/* tablet-gemini — слой поверх compressed.min.css (тема Gemini 2019).
   Десктоп ≥1000px не трогаем: вид как в 2019. Ниже — одна и та же разметка, перестроенная медиазапросами
   (мобильная тема smartphone 2019 года — только ориентир, второй вёрстки нет). */

/* кнопки вместо span/a старых плагинов — без браузерного оформления */
#slides button, .infbtn button, .loginbox button { border: 0; font: inherit; color: inherit; cursor: pointer; }
#slides button { font-size: 0; }
/* «Войти» — кнопка вместо ссылки; повторяем .loginbtn a из темы */
.loginbtn button { text-align: center; display: block; height: 32px; background-color: #db143d; font-size: 1.1em; width: 72px; padding: 2px 4px 4px 2px; border-radius: 3px; color: #fff; }
.loginbtn button:hover b { background-color: #f1345d; }

/* слайдер: один слайд виден, остальные скрыты (раньше это делал slides.js) */
.slides_container > div { display: none; height: 100%; }
.slides_container > div.is-active { display: block; }
.slides_container img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* окно входа (было jQuery UI dialog) */
.loginbox { position: relative; }
.logindialog { position: absolute; z-index: 200; right: 0; top: 34px; width: 260px; padding: 15px;
	background: #dfe3e6; border: 2px solid #a6b5c0; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.logindialog[hidden] { display: none; }
.logindialog .lfield { margin-bottom: 8px; }
.logindialog label { display: block; color: #3a4750; font-size: 12px; margin-bottom: 2px; }
.logindialog input[type=text], .logindialog input[type=password] { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #a6b5c0; }
.infcont[hidden] { display: none !important; }
.infcont:not([hidden]) { display: block; }

/* подпись мода под иконкой — как inline-стиль 2019 года */
.short-mod { display: block; color: #3a3a3a; font-size: 15px; height: 25px; text-align: center; overflow: hidden; }

/* просмотр скриншотов */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; }
.lightbox-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #fff; font-size: 36px; cursor: pointer; }

/* видео не шире колонки */
.fullstory .video iframe { max-width: 100%; }

@media (max-width: 999px) {
	.wrapper, .wwide { min-width: 0; }
	.wrapper { width: auto; margin: 0 8px; }
	.container { margin: 0; }
	body { background-size: auto; }

	/* шапка: логотип, вход и поиск в потоке */
	#header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; height: auto; }
	#header .logo { margin: 0; float: none; width: auto; padding: 0; background: none; }
	#header .logo a { width: 305px; max-width: 100%; }
	#header .rcol { float: none; display: flex; flex: 1 1 260px; flex-wrap: wrap-reverse; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 0; width: auto; }
	.searchbar { margin: 0; flex: 1 1 220px; width: auto; max-width: 420px; }
	.searchbar .lfield { width: calc(100% - 37px); box-sizing: border-box; }
	.searchbar .lfield input { width: 100%; }

	/* меню — одна строка, листается пальцем */
	#menubar { height: auto; padding: 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#menubar .lcol, #menubar .lcol ul { float: none; display: flex; white-space: nowrap; }

	/* две колонки -> одна */
	.body { border-width: 8px; }
	.vsep { padding: 8px 0 0; background: none; }
	#midside, #sidebar { float: none; width: auto; margin: 0; padding: 0; }
	#sidebar { margin-top: 16px; }
	.block { width: auto; }
	#midside img, .body img { max-width: 100%; height: auto; }

	/* главная: слайдер и вступление */
	#slides, .slides_container { height: auto; aspect-ratio: 990 / 278; }
	#slides .next, #slides .prev { top: calc(50% - 30px); }
	#slides .prev { left: 0; }
	#slides .next { right: 0; }

	/* карточки: сетка вместо float с фиксированной высотой */
	#dle-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
	#dle-content > :not(.shortstory) { grid-column: 1 / -1; }
	.shortstory, .shortstory:nth-child(2n) { width: auto; height: auto; float: none; margin-left: 0; }
	.shortstory .short-text { float: none; margin: 0 10px; }

	/* полная статья */
	.fullstory .head .icon, .fullstory .head .right-info { float: none; width: auto; }
	.fullstory .head .icon { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
	.fullstory .head .icon img { width: 96px; height: 96px; }
	.fullstory .head .date { float: none; width: auto; }
	/* в теме у шапки статьи высота 190px, у заголовка 20px, у строк характеристик 16px — на узком экране всё наезжает */
	.fullstory .head, .fullstory .head .right-info h1, .fullstory .specifications li { height: auto; }
	.fullstory .head .right-info ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
	.fullstory .head .right-info ul li { float: none; width: auto; }
	.fullstory .head .right-info ul li:empty { display: none; }

	/* форма комментария: таблица -> поля в столбик */
	.tableform, .tableform tbody, .tableform tr, .tableform td { display: block; width: auto; }
	.tableform .label { padding: 6px 0 2px; }
	.tableform input.f_input, .tableform textarea { width: 100%; box-sizing: border-box; }
	.fullstory .screenshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.fullstory .screenshots img { width: 100%; }
	.fullstory ul.video-title li { width: 100%; }
	.fullstory .video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.related { padding-right: 0; }

	/* подвал */
	.fbox { float: none; width: auto; margin: 0 0 12px; }
	#footer { height: auto; padding: 10px 13px; overflow: hidden; }
}

@media (max-width: 599px) {
	#dle-content { grid-template-columns: minmax(0, 1fr); }
	#header .logo a { width: 220px; padding-top: 64px; background-size: 220px auto; }
	.fullstory .head .right-info ul { grid-template-columns: minmax(0, 1fr); }
	.fullstory .screenshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.base .maincont .story, .fullstory .story p { font-size: 15px; line-height: 22px; text-align: left; }
}