/* W-1078b: smartphone visual correction layer for iOS Safari and DLE editor. */

html {
	background: #05070a !important;
	background-color: #05070a !important;
	color-scheme: dark;
	overscroll-behavior-y: none;
}

body.ill-mobile-ui {
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	background-color: #05070a !important;
	overscroll-behavior-y: none;
	isolation: isolate;
}

.ill-mobile-ui #toolbar {
	background-color: #05070a !important;
	isolation: isolate;
}

.ill-mobile-ui #toolbar:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-150px - env(safe-area-inset-top));
	height: calc(150px + env(safe-area-inset-top));
	background: #05070a;
	pointer-events: none;
	z-index: -1;
}

.ill-mobile-ui #header,
.ill-mobile-ui .background,
.ill-mobile-ui #footer .background {
	background-color: #05070a !important;
}

.ill-mobile-ui #in-toolbar {
	display: grid !important;
	grid-template-columns: 3.05rem minmax(0, 1fr) 3.05rem 3.05rem !important;
	align-items: center;
	height: 3.45rem !important;
	overflow: visible !important;
}

.ill-mobile-ui #in-toolbar:before {
	grid-column: 2;
	width: 2.35rem;
	height: 2.35rem;
}

.ill-mobile-ui #menu-btn,
.ill-mobile-ui #login-btn,
.ill-mobile-ui #mobile-search-btn {
	width: 3.05rem !important;
	height: 3.45rem !important;
	min-width: 3.05rem !important;
}

.ill-mobile-ui #login-btn {
	grid-column: 3;
}

.ill-mobile-ui #mobile-search-btn {
	position: relative;
	grid-column: 4;
	grid-row: 1;
	display: inline-grid !important;
	place-items: center;
	justify-self: stretch;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ill-text, #f4efe5) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, color .18s ease;
}

.ill-mobile-ui #mobile-search-btn:before {
	content: "";
	width: 1rem;
	height: 1rem;
	border: 3px solid currentColor;
	border-radius: 50%;
	transform: translate(-.08rem, -.08rem);
	transition: width .18s ease, height .18s ease, border .18s ease, border-radius .18s ease, transform .18s ease, background .18s ease;
}

.ill-mobile-ui #mobile-search-btn:after {
	content: "";
	position: absolute;
	width: .72rem;
	height: 3px;
	background: currentColor;
	border-radius: 999px;
	transform: translate(.54rem, .54rem) rotate(45deg);
	transition: transform .18s ease;
}

html.ill-search-open .ill-mobile-ui #mobile-search-btn:before {
	width: 1.35rem;
	height: 3px;
	background: currentColor;
	border: 0;
	border-radius: 999px;
	transform: rotate(45deg);
}

html.ill-search-open .ill-mobile-ui #mobile-search-btn:after {
	transform: rotate(-45deg);
}

.ill-mobile-ui #mobile-search-btn:active {
	transform: scale(.96);
}

.ill-mobile-ui #menu-head {
	max-height: min(58dvh, 24rem) !important;
	padding: .48rem !important;
	border-radius: 18px !important;
}

.ill-mobile-ui #menu-head a {
	min-height: 2.45rem !important;
	padding: .48rem .68rem !important;
	border-radius: 13px !important;
	font-size: .95rem !important;
}

.ill-mobile-ui #menu-head a + a {
	margin-top: .28rem !important;
}

.ill-mobile-ui.ill-search-ready #quicksearch {
	position: fixed !important;
	left: max(.72rem, env(safe-area-inset-left)) !important;
	right: max(.72rem, env(safe-area-inset-right)) !important;
	top: calc(3.82rem + env(safe-area-inset-top)) !important;
	z-index: 9060 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: .55rem !important;
	max-width: calc(100vw - max(1.44rem, env(safe-area-inset-left) + env(safe-area-inset-right))) !important;
	background:
		linear-gradient(145deg, rgba(8, 10, 15, .99), rgba(14, 17, 24, .98)),
		radial-gradient(circle at 50% -2rem, rgba(215, 182, 111, .12), transparent 10rem) !important;
	border: 1px solid rgba(215, 182, 111, .3) !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-.55rem) scale(.98);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

html.ill-search-open .ill-mobile-ui.ill-search-ready #quicksearch {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.ill-mobile-ui #quicksearch .quicksearch {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 2.85rem !important;
	gap: .45rem;
	align-items: center;
	width: 100% !important;
	overflow: visible !important;
}

.ill-mobile-ui #quicksearch input[name="story"],
.ill-mobile-ui #quicksearch button[type="submit"] {
	height: 2.85rem !important;
	min-height: 2.85rem !important;
}

.ill-mobile-ui #quicksearch input[name="story"] {
	width: 100% !important;
	min-width: 0 !important;
	padding: 0 .9rem !important;
	color: var(--ill-text, #f4efe5) !important;
	background: rgba(5, 7, 10, .9) !important;
	border: 1px solid rgba(215, 182, 111, .26) !important;
	border-radius: 13px !important;
	box-shadow: none !important;
}

.ill-mobile-ui #quicksearch button[type="submit"] {
	position: relative !important;
	right: auto !important;
	top: auto !important;
	display: inline-grid !important;
	place-items: center;
	width: 2.85rem !important;
	min-width: 2.85rem !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #08090c !important;
	background: linear-gradient(135deg, var(--ill-gold-soft, #e4c274), #ad7f34) !important;
	border: 1px solid rgba(240, 217, 154, .48) !important;
	border-radius: 13px !important;
	box-shadow: none !important;
	text-indent: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
}

.ill-mobile-ui #quicksearch button[type="submit"]:before {
	content: "";
	width: .92rem;
	height: .92rem;
	border: 3px solid currentColor;
	border-radius: 50%;
	transform: translate(-.08rem, -.08rem);
}

.ill-mobile-ui #quicksearch button[type="submit"]:after {
	content: "";
	position: absolute;
	width: .66rem;
	height: 3px;
	background: currentColor;
	border-radius: 999px;
	transform: translate(.52rem, .52rem) rotate(45deg);
}

.ill-mobile-ui .illuminy-mobile-comment-form,
.ill-mobile-ui .comments-edit-area {
	overflow: visible !important;
}

.ill-mobile-ui .illuminy-mobile-comment-editor,
.ill-mobile-ui .comments-edit-area {
	width: 100% !important;
	min-width: 0 !important;
}

.ill-mobile-ui .illuminy-mobile-comment-editor .dleaddcomments-editor,
.ill-mobile-ui .illuminy-mobile-comment-editor .wseditor,
.ill-mobile-ui .illuminy-mobile-comment-editor .bb-editor,
.ill-mobile-ui .comments-edit-area .dlecomments-editor,
.ill-mobile-ui .comments-edit-area .bb-editor {
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	min-height: 0 !important;
	background: rgba(4, 6, 9, .96) !important;
	border: 1px solid rgba(215, 182, 111, .3) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.ill-mobile-ui .illuminy-mobile-comment-editor .bb-pane,
.ill-mobile-ui .comments-edit-area .bb-pane {
	order: 1;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: .28rem;
	width: 100% !important;
	min-height: 2.68rem !important;
	max-height: 5.4rem;
	margin: 0 !important;
	padding: .46rem .5rem !important;
	overflow: auto !important;
	background: linear-gradient(180deg, rgba(21, 25, 34, .98), rgba(13, 16, 23, .98)) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(215, 182, 111, .18) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-overflow-scrolling: touch;
}

.ill-mobile-ui .illuminy-mobile-comment-editor .bb-pane button,
.ill-mobile-ui .illuminy-mobile-comment-editor .bb-pane input,
.ill-mobile-ui .illuminy-mobile-comment-editor .bb-pane select,
.ill-mobile-ui .comments-edit-area .bb-pane button,
.ill-mobile-ui .comments-edit-area .bb-pane input,
.ill-mobile-ui .comments-edit-area .bb-pane select {
	max-width: 100%;
	border-radius: 10px !important;
}

.ill-mobile-ui .illuminy-mobile-comment-editor textarea#comments,
.ill-mobile-ui .illuminy-mobile-comment-editor .bb-editor textarea#comments,
.ill-mobile-ui .comments-edit-area textarea[id^="dleeditcomments"],
.ill-mobile-ui .comments-edit-area .bb-editor textarea[id^="dleeditcomments"] {
	order: 2;
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 100% !important;
	height: 12rem !important;
	min-height: 12rem !important;
	max-height: none !important;
	margin: 0 !important;
	padding: .95rem 1rem !important;
	color: var(--ill-text, #f4efe5) !important;
	background: #050608 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	resize: vertical;
	line-height: 1.55 !important;
	-webkit-appearance: none;
}

.ill-mobile-ui .illuminy-mobile-comment-editor textarea.ajaxwysiwygeditor:not(#comments),
.ill-mobile-ui .comments-edit-area textarea.ajaxwysiwygeditor:not([id^="dleeditcomments"]) {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ill-mobile-ui .illuminy-mobile-comment-editor .tox.tox-tinymce,
.ill-mobile-ui .comments-edit-area .tox.tox-tinymce {
	width: 100% !important;
	min-height: 16rem !important;
	border-radius: 18px !important;
	overflow: hidden !important;
}

.ill-mobile-ui .illuminy-mobile-comment-form__submit .btn,
.ill-mobile-ui .illuminy-mobile-image-uploader > a,
.ill-mobile-ui .illuminy-mobile-comment-subscribe .form-check-label {
	border-radius: 14px !important;
}

/* W-1079: smartphone action, editor and pager stabilization. */
@media (max-width: 760px) {
	.ill-mobile-ui,
	.ill-mobile-ui * {
		box-sizing: border-box;
	}

	.ill-mobile-ui .post {
		overflow: hidden;
		border-radius: 20px;
	}

	.ill-mobile-ui .post .title,
	.ill-mobile-ui .post .title a {
		font-size: 1.44rem !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}

	.ill-mobile-ui .post-cont {
		font-size: 1rem !important;
		line-height: 1.58 !important;
		overflow-wrap: break-word !important;
	}

	.ill-mobile-ui .panel {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: .6rem !important;
		width: 100% !important;
		min-width: 0 !important;
		margin-top: 1rem !important;
	}

	.ill-mobile-ui .panel .com-num,
	.ill-mobile-ui .panel .more {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ill-mobile-ui .panel .more {
		flex: 1 1 auto !important;
	}

	.ill-mobile-ui .panel .more a,
	.ill-mobile-ui .more a,
	.ill-mobile-ui a.more {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 8.2rem !important;
		min-height: 2.9rem !important;
		padding: .68rem .95rem !important;
		color: #08090c !important;
		background: linear-gradient(135deg, var(--ill-gold-soft, #e4c274), #ad7f34) !important;
		border: 1px solid rgba(240, 217, 154, .46) !important;
		border-radius: 15px !important;
		font-size: .96rem !important;
		font-weight: 800 !important;
		line-height: 1.12 !important;
		text-indent: 0 !important;
		text-shadow: none !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .18) !important;
	}

	.ill-mobile-ui .panel .more a:before,
	.ill-mobile-ui .more a:before,
	.ill-mobile-ui a.more:before {
		display: none !important;
		content: none !important;
	}

	.ill-mobile-ui .commentbox h3,
	.ill-mobile-ui .comments h3,
	.ill-mobile-ui .heading {
		font-size: 1.36rem !important;
		line-height: 1.18 !important;
		letter-spacing: 0 !important;
		overflow-wrap: break-word !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment {
		padding: .95rem !important;
		border-radius: 18px !important;
		overflow: hidden !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment__actions,
	.ill-mobile-ui .illuminy-comment-actions,
	.ill-mobile-ui .comment .meta > ul.left,
	.ill-mobile-ui .comment .meta ul.left {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .48rem !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: .65rem 0 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment__action,
	.ill-mobile-ui .illuminy-comment-actions .comment-action,
	.ill-mobile-ui .comment .meta .left > li {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment__action a,
	.ill-mobile-ui .illuminy-mobile-comment__action b,
	.ill-mobile-ui .fast a,
	.ill-mobile-ui .del a,
	.ill-mobile-ui .illuminy-comment-actions .comment-action a,
	.ill-mobile-ui .comment .meta .left a,
	.ill-mobile-ui .comment .meta .left .edit_btn > a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 2.72rem !important;
		padding: .56rem .62rem !important;
		border-radius: 14px !important;
		font-size: .86rem !important;
		line-height: 1.08 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment-editor .bb-editor,
	.ill-mobile-ui .comments-edit-area .bb-editor,
	.ill-mobile-ui .illuminy-mobile-comment-editor .tox.tox-tinymce,
	.ill-mobile-ui .comments-edit-area .tox.tox-tinymce {
		background: #050608 !important;
		border-color: rgba(215, 182, 111, .3) !important;
		border-radius: 16px !important;
		overflow: hidden !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment-editor .bb-pane,
	.ill-mobile-ui .comments-edit-area .bb-pane,
	.ill-mobile-ui .illuminy-mobile-comment-editor .tox .tox-editor-header,
	.ill-mobile-ui .comments-edit-area .tox .tox-editor-header,
	.ill-mobile-ui .illuminy-mobile-comment-editor .tox .tox-toolbar-overlord,
	.ill-mobile-ui .comments-edit-area .tox .tox-toolbar-overlord,
	.ill-mobile-ui .illuminy-mobile-comment-editor .tox .tox-toolbar__primary,
	.ill-mobile-ui .comments-edit-area .tox .tox-toolbar__primary {
		background: #050608 !important;
		border-bottom-color: rgba(215, 182, 111, .18) !important;
		box-shadow: none !important;
	}

	.ill-mobile-ui .illuminy-mobile-comment-editor textarea#comments,
	.ill-mobile-ui .illuminy-mobile-comment-editor textarea[name="comments"],
	.ill-mobile-ui .illuminy-mobile-comment-editor .bb-editor textarea,
	.ill-mobile-ui .comments-edit-area textarea[id^="dleeditcomments"],
	.ill-mobile-ui .comments-edit-area .bb-editor textarea {
		background: #050608 !important;
		color: #f4efe5 !important;
		border: 0 !important;
	}

	.ill-mobile-ui .pager,
	.ill-mobile-ui .navigation {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .65rem !important;
		padding-inline: max(.9rem, env(safe-area-inset-left)) max(.9rem, env(safe-area-inset-right)) !important;
	}

	.ill-mobile-ui .pager > a,
	.ill-mobile-ui .pager > span,
	.ill-mobile-ui .navigation > a,
	.ill-mobile-ui .navigation > span {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.ill-mobile-ui .pager .pprev,
	.ill-mobile-ui .pager .pnext,
	.ill-mobile-ui .navigation a,
	.ill-mobile-ui .navigation span {
		min-height: 2.95rem !important;
		border-radius: 15px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.ill-mobile-ui .ui-dialog,
	.ill-mobile-ui .dle-popup,
	.ill-mobile-ui .dlepopup,
	.ill-mobile-ui #dlepopup {
		left: max(.75rem, env(safe-area-inset-left)) !important;
		right: max(.75rem, env(safe-area-inset-right)) !important;
		width: auto !important;
		max-width: none !important;
		max-height: min(82dvh, 34rem) !important;
		margin: 0 !important;
		border-radius: 18px !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 390px) {
	.ill-mobile-ui .pager,
	.ill-mobile-ui .navigation {
		grid-template-columns: 1fr !important;
	}

	.ill-mobile-ui .panel {
		align-items: stretch !important;
	}
}
