/* ==========================================================================
   «ВИДЕОТЕКА» — VHS RETRO-TV THEME для DLE
   --------------------------------------------------------------------------
   Загружается ПОСЛЕ engine.css, поэтому перевешивает стили движка.
   Всё оформление держится на CSS-переменных в блоке :root ниже.
   ========================================================================== */


/* 1. ПЕРЕМЕННЫЕ
   ----------------------------------------------- */
:root {
  /* корпус: дерево */
  --wood-shadow: #1d1209;
  --wood-dark:   #3a2415;
  --wood-mid:    #5a3a22;
  --wood-light:  #7a4e2d;

  /* корпус: пластик цвета «тёмный беж» */
  --case-1: #14100d;
  --case-2: #241e18;
  --case-3: #3a322a;
  --case-4: #554b3f;
  --case-5: #7b6f60;
  --case-edge: rgba(255, 232, 200, .16);

  /* экран */
  --scr-core: #060a0b;
  --scr-edge: #000;

  /* индикаторы */
  --osd:      #6dffa8;
  --osd-dim:  #2c8a58;
  --osd-glow: 0 0 5px rgba(109, 255, 168, .85), 0 0 14px rgba(109, 255, 168, .35);
  --amber:    #ffb43c;
  --amber-glow: 0 0 6px rgba(255, 180, 60, .9), 0 0 18px rgba(255, 180, 60, .3);
  --red:      #ff4a35;
  --red-glow: 0 0 6px rgba(255, 74, 53, .9), 0 0 16px rgba(255, 74, 53, .35);
  --cyan:     #4fe3ff;

  /* текст на экране */
  --txt:      #d9e5e0;
  --txt-dim:  #8ba39b;
  --txt-mute: #5f736d;

  /* шрифты (кириллица поддерживается всеми тремя) */
  --f-disp: "Russo One", "Trebuchet MS", Tahoma, sans-serif;
  --f-mono: "PT Mono", "Courier New", Consolas, monospace;
  --f-body: "Play", Tahoma, Verdana, sans-serif;
}


/* 2. БАЗА
   ----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0;
 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
img {max-width: 100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}

html {font-size: 14px;}
body {font: 14px/1.6 var(--f-body); color: var(--txt); background-color: var(--wood-shadow);
  min-height: 100%; width: 100%; padding: 0; margin: 0;}
a {color: var(--osd); text-decoration: none;}
a:hover, a:focus {color: #fff; text-decoration: none;}
h1, h2, h3, h4, h5 {font-weight: 400; font-size: 18px;}

b, strong, h1, h2, h3, h4, h5, .fw700 {font-family: var(--f-disp); font-weight: 400;}
.icon-left .fa {margin-right: .4em; vertical-align: middle;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

::selection {background: var(--amber); color: #1a1208;}

/* скроллбар в стиле панели управления */
::-webkit-scrollbar {width: 12px; height: 12px;}
::-webkit-scrollbar-track {background: #1b1611;}
::-webkit-scrollbar-thumb {background: var(--case-4); border: 2px solid #1b1611; border-radius: 6px;}
::-webkit-scrollbar-thumb:hover {background: var(--case-5);}


/* 3. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
   ----------------------------------------------- */
button, textarea, input[type="text"], input[type="password"], select
{appearance: none; -webkit-appearance: none; font-family: var(--f-body); font-size: 14px;}

.btn, button, input[type="button"], input[type="submit"] {
  display: inline-block; text-align: center; padding: 0 18px; height: 38px; line-height: 36px; cursor: pointer;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--osd); background: #0d1214; border: 1px solid var(--case-4); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #07090a;}
.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
  color: #06120b; background: var(--osd); border-color: var(--osd); box-shadow: 0 0 12px rgba(109,255,168,.5);}
.btn:active, button:active, input[type="button"]:active, input[type="submit"]:active {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8); transform: translateY(1px);}

input[type="text"], input[type="password"] {
  display: block; width: 100%; height: 38px; line-height: 38px; padding: 0 14px;
  background: #0a0f11; color: var(--txt); border: 1px solid var(--case-3); border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--osd-dim); box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 10px rgba(109,255,168,.25);}
input::-webkit-input-placeholder {color: var(--txt-mute);}
input::-moz-placeholder {color: var(--txt-mute);}
input:-moz-placeholder {color: var(--txt-mute);}
input:-ms-input-placeholder {color: var(--txt-mute);}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}

select {height: 38px; padding: 0 10px; color: var(--txt); background: #0a0f11;
  border: 1px solid var(--case-3); border-radius: 2px;}
textarea {display: block; width: 100%; padding: 14px; overflow: auto; vertical-align: top;
  resize: vertical; height: 100px; background: #0a0f11; color: var(--txt);
  border: 1px solid var(--case-3); border-radius: 2px; font-family: var(--f-body); font-size: 14px;}

/* чекбоксы — как тумблеры на корпусе */
.checkbox, .form-checks label, input[type="checkbox"] {color: var(--txt-dim);}


/* 4. ХЕЛПЕРЫ
   ----------------------------------------------- */
.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit
{overflow: hidden; position: relative; background: #0d1214;}
.img-resp {padding-top: 70%;}
.img-resp-vert {padding-top: 140%;}
.img-resp-sq {padding-top: 100%;}
.img-box img, .img-square img, .img-resp img, .img-resp-vert img, .img-resp-sq img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img, .img-resp-sq img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}

.fx-row {display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-between;
  justify-content: space-between;}
.fx-col {display: -ms-flexbox; display: -webkit-flex; display: flex;
  -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;}
.fx-center {-ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}
.fx-middle {-ms-flex-align: center; -webkit-align-items: center; align-items: center;}


/* 5. КОМНАТА И КОРПУС ТЕЛЕВИЗОРА
   ----------------------------------------------- */
/* overflow:hidden НЕ ставим на body — значение распространяется на вьюпорт
   и полоса прокрутки пропадает. Держим его на .wrap (как в исходной теме).
   min-width тоже не задаём: жёсткий пол в 320px выталкивал вёрстку за экран
   на узких устройствах (303px и ниже). Раскладка полностью резиновая. */
.room {min-height: 100vh; position: relative;
  background-color: #150e07;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255, 196, 120, .16) 0%, rgba(0,0,0,0) 55%),
    url("../images/vhs/wood.svg"),
    linear-gradient(180deg, #3a2415 0%, #150e07 100%);
  background-size: auto, 700px 700px, auto;
  background-blend-mode: soft-light, normal, normal;
  /* НЕ используем background-attachment: fixed — он заставляет браузер
     перерисовывать весь вьюпорт на каждом кадре прокрутки, что на телефонах
     даёт просадку FPS. С обычным scroll текстура выглядит так же. */
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center top, 0 0, center top;}

/* контейнер: обрезает горизонтальные вылеты .items, но не влияет на прокрутку */
.wrap {overflow: hidden; position: relative; z-index: 10;}

/* корпус телевизора: дерево + фаска.
   Отступы вынесены в переменные: ими пользуется и .tv-bezel, и
   .top-menu-in, поэтому содержимое выпадающего меню всегда совпадает
   по левому краю с содержимым экрана. */
.tv-set {position: relative; --pad-tv: 16px; --pad-bezel: 26px;
  max-width: 1340px; margin: 0 auto; padding: var(--pad-tv);
  background-image: url("../images/vhs/wood.svg");
  background-size: 700px 700px;
  border-radius: 26px;
  box-shadow:
    inset 0 3px 0 rgba(255, 224, 184, .28),
    inset 0 -4px 10px rgba(0,0,0,.65),
    inset 3px 0 8px rgba(255,210,160,.10),
    inset -3px 0 8px rgba(0,0,0,.4),
    0 34px 70px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.55);}

/* шурупы по углам */
.tv-set:before, .tv-set:after {
  content: ""; position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9a892, #4b4239 60%, #241e18 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.7), inset 0 -1px 1px rgba(0,0,0,.5);}
.tv-set:before {left: 7px;}
.tv-set:after  {right: 7px;}

/* пластиковая рамка вокруг экрана (здесь же живут надписи OSD) */
.tv-bezel {position: relative; border-radius: 18px; padding: var(--pad-bezel);
  background: linear-gradient(180deg, var(--case-4) 0%, var(--case-3) 12%, var(--case-2) 58%, var(--case-1) 100%);
  box-shadow: inset 0 1px 0 var(--case-edge), inset 0 -2px 6px rgba(0,0,0,.8), 0 3px 0 rgba(0,0,0,.45);}

/* сам экран */
.tv-screen {position: relative; overflow: hidden; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 35%, #11191c 0%, var(--scr-core) 62%, var(--scr-edge) 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.95), inset 0 0 160px rgba(0,0,0,.75), 0 0 0 2px #000;}


/* 6. ЭФФЕКТЫ ЭКРАНА (CRT / VHS)
   ----------------------------------------------- */
.crt {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 900;
  pointer-events: none; overflow: hidden;}

/* строчная развёртка */
.crt-lines {position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  opacity: .3;}

/* зернистость — двигаем через transform: он ложится на композитор и не
   вызывает перерисовку, в отличие от анимации background-position */
.crt-grain {position: absolute; top: -50px; left: -50px; right: -50px; bottom: -50px;
  background-image: url("../images/vhs/noise.svg");
  background-size: 200px 200px;
  opacity: .05; mix-blend-mode: screen;
  will-change: transform;
  animation: grain-shift .6s steps(3) infinite;}

/* виньетка + выпуклость стекла */
.crt-vignette {position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.28) 92%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(255,0,60,.035) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,120,255,.035) 100%);}

/* хроматическое смещение (магента ↔ циан) */
.crt-chroma:before, .crt-chroma:after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  mix-blend-mode: screen;}
.crt-chroma:before {background: rgba(255,0,90,.05); animation: chroma-a 5.5s ease-in-out infinite;}
.crt-chroma:after  {background: rgba(0,190,255,.05); animation: chroma-b 5.5s ease-in-out infinite;}

/* полосу кадровой развёртки (.crt-roll, ползущая сверху вниз) убрали:
   она постоянно пересекает текст и мешает читать. Остальные слои
   (развёртка, зерно, хроматическое смещение, виньетка) — статичные. */


/* 7. ЭКРАННАЯ НАДПИСЬ (OSD) — живёт на рамке, поэтому не мешает вёрстке
   ----------------------------------------------- */
.osd {position: absolute; z-index: 950; font-family: var(--f-mono); color: var(--osd);
  text-shadow: var(--osd-glow); letter-spacing: .14em; font-size: 11px; line-height: 14px;
  pointer-events: none; user-select: none; text-transform: uppercase; white-space: nowrap;}
.osd-tl {top: 7px; left: 32px;}
.osd-tr {top: 7px; right: 32px; text-align: right;}
.osd-bl {bottom: 7px; left: 32px;}
.osd-br {bottom: 7px; right: 32px; text-align: right;}
.osd .dim {color: var(--osd-dim); text-shadow: 0 0 4px rgba(44,138,88,.7);}

/* мигающий индикатор записи */
.osd-blink {display: inline-block; color: var(--red); text-shadow: var(--red-glow);
  animation: blink 1.1s steps(1) infinite;}

/* «шторка» индикаторов трекинга */
.osd-bars {display: inline-block; vertical-align: middle;}
.osd-bars i {display: inline-block; width: 6px; height: 11px; margin-left: 3px; background: var(--osd);
  box-shadow: var(--osd-glow); font-style: normal;}
.osd-bars i.off {background: #1d2a24; box-shadow: none;}


/* 8. ШАПКА — ЛИЦЕВАЯ ПАНЕЛЬ МАГНИТОФОНА
   ----------------------------------------------- */
.header {position: relative; margin: 0 -16px 14px; padding: 0 16px;
  background: linear-gradient(180deg, var(--case-5) 0%, var(--case-4) 12%, var(--case-3) 45%, var(--case-2) 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 1px 0 var(--case-edge), inset 0 -3px 8px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.45);}

.header-in {min-height: 78px; height: auto; max-width: 1200px; margin: 0 auto;
  padding: 10px 0; gap: 14px;}

/* логотип — как шильдик на корпусе */
.logo {display: block; width: 250px; flex: 0 0 auto; line-height: 1;
  font-family: var(--f-disp); font-size: 25px; color: #f3e2c8;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(255,190,110,.35);
  position: relative; padding-top: 2px;}
.logo:before {content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 10px;
  vertical-align: -4px; border-radius: 3px; border: 2px solid var(--amber);
  background: linear-gradient(135deg, transparent 46%, var(--amber) 46%, var(--amber) 54%, transparent 54%);
  box-shadow: 0 0 10px rgba(255,180,60,.45);}
.logo:hover {color: var(--amber);}
.logo .logo-sub {display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  color: var(--case-5); text-shadow: none; margin: 6px 0 0 36px;}

/* дисплей счётчика кассеты */
.vcr-display {width: 165px; flex: 0 0 auto; padding: 7px 12px; border-radius: 3px;
  background: #08100c; border: 1px solid #000;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9), 0 1px 0 var(--case-edge);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--osd);
  text-shadow: var(--osd-glow);}
.vcr-display .vd-mode {display: block; font-size: 15px; line-height: 1.1; color: var(--osd);}
.vcr-display .vd-tape {display: block; margin-top: 3px; font-size: 11px; color: var(--osd-dim);
  text-shadow: 0 0 4px rgba(44,138,88,.6);}
.vcr-display .vd-led {color: var(--red); text-shadow: var(--red-glow);}

/* транспортные клавиши */
.vcr-keys {display: flex; gap: 6px; flex: 0 0 auto;}
.vcr-keys span {display: block; width: 34px; height: 32px; border-radius: 3px;
  background: linear-gradient(180deg, #8d8073 0%, #554b3f 45%, #241e18 100%);
  color: #1b1611; font-size: 13px; line-height: 30px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,235,205,.35), inset 0 -2px 4px rgba(0,0,0,.6), 0 3px 5px rgba(0,0,0,.55);
  cursor: pointer; user-select: none;}
.vcr-keys span:hover {color: var(--amber); transform: translateY(1px);}
.vcr-keys span.rec {color: #6b1c12;}

/* меню */
.h-menu {flex: 0 0 auto; text-align: right; white-space: nowrap;}
.h-menu li {display: inline-block; margin-left: 6px;}
.h-menu a {display: block; height: 30px; line-height: 28px; padding: 0 12px; border-radius: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #e0d3bd; background: linear-gradient(180deg, #4b4239, #241e18);
  border: 1px solid #100d0a; box-shadow: inset 0 1px 0 rgba(255,235,205,.2);}
.h-menu a:hover, .h-menu a.active {color: #1a1208; background: linear-gradient(180deg, var(--amber), #d98a15);
  box-shadow: 0 0 12px rgba(255,180,60,.45);}

/* поиск — как индикаторный дисплей магнитофона */
.search-box {flex: 1 1 220px; min-width: 200px; position: relative;}
.search-box input#story, .search-box input#story:focus {width: 100%; height: 40px; line-height: 40px;
  padding-right: 54px; background: #08100c; color: var(--osd);
  border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9), 0 1px 0 var(--case-edge);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .05em;}
.search-box input#story:focus {color: #b6ffd8;}
.search-box button {position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; padding: 0;
  color: var(--osd); background: transparent; border: 0; font-size: 16px; line-height: 32px;}
.search-box button:hover {color: var(--amber); background: transparent; box-shadow: none;}


/* 9. НАВИГАЦИЯ — СЛОТЫ ДЛЯ КАССЕТ
   ----------------------------------------------- */
.nav {position: relative; z-index: 10; padding: 12px 0 4px;}
.nav-in {display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -8px;}
.nav-in li {width: 23.5%; padding: 0 8px;}
.nav-in a {display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px;
  border-radius: 3px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #17211f 0%, #0b1012 100%);
  border: 1px solid #1e2a27;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 5px rgba(0,0,0,.4);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--txt-dim); transition: color .15s, border-color .15s;}
.nav-in a:before {content: "▸"; color: var(--osd-dim); font-size: 11px; transition: color .15s;}
.nav-in a span:first-child {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 60px); flex: 1 1 auto; min-width: 0;}
.nav-in a span + span {flex: 0 0 auto; font-size: 11px; color: var(--txt-mute);
  padding-left: 10px; border-left: 1px solid #1e2a27;}
.nav-in a:hover, .nav-in a:hover span, .nav-in a.active, .nav-in a.active span {
  color: var(--osd); border-color: var(--osd-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 14px rgba(109,255,168,.14);}
.nav-in a:hover:before, .nav-in a.active:before {color: var(--osd);}


/* 10. ЗАГОЛОВКИ БЛОКОВ
   ----------------------------------------------- */
.items-header {margin-bottom: 24px; padding-bottom: 10px;
  border-bottom: 1px dashed #1e2a27;}
.items-title {font-size: 22px; line-height: 1.3; color: var(--osd);
  text-shadow: 0 0 12px rgba(109,255,168,.28);}
.items-sort {font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--txt-mute); text-transform: uppercase;}
.items-sort form, .items-sort li {display: inline-block; vertical-align: top;}
.items-sort li {margin-left: 10px;}
.items-sort li + li {padding-left: 10px; border-left: 1px solid #1e2a27;}
.items-sort a {color: var(--osd);}
.items-sort a:hover {color: var(--amber);}


/* 11. СЕТКА И КАРТОЧКИ-КАССЕТЫ
   ----------------------------------------------- */
.items {margin: 0 -14px;}

.item {float: left; width: 33.33%; margin-bottom: 26px;}
.item-link {display: block; padding: 0 14px;}

.item-in {position: relative; border-radius: 4px; padding-bottom: 12px; overflow: hidden;
  background: linear-gradient(180deg, #161d1c 0%, #0d1214 100%);
  border: 1px solid #1e2a27;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .16s, box-shadow .16s, border-color .16s;}
.item-link:hover .item-in {transform: translateY(-3px); border-color: var(--osd-dim);
  box-shadow: 0 10px 22px rgba(0,0,0,.6), 0 0 22px rgba(109,255,168,.16);}

/* верхняя полоса «этикетки» */
.item-head {display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px 0 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-mute);}
.item-head span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.item-head .ih-ep {color: var(--amber); text-shadow: var(--amber-glow); flex: 0 0 auto;}
.item-head .ih-cat {flex: 0 1 auto; min-width: 0;}

/* кадр кассеты */
.item-img {overflow: hidden; position: relative; background: #05080a;}
.item-img img {filter: saturate(.78) contrast(1.06) brightness(.92); transition: filter .2s, transform .3s;}
.item-link:hover .item-img img {filter: saturate(1) contrast(1.02) brightness(1); transform: scale(1.03);}

/* значок PLAY */
.item-play {position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(4,10,7,.72); border: 2px solid var(--osd);
  color: var(--osd); text-shadow: var(--osd-glow); font-size: 18px; line-height: 48px; text-align: center;
  opacity: 0; transform: scale(.7); transition: opacity .18s, transform .18s;
  box-shadow: 0 0 22px rgba(109,255,168,.35); z-index: 3;}
.item-play:before {content: "\f04b"; font: normal normal normal 14px/1 FontAwesome; margin-left: 3px;}
.item-link:hover .item-play {opacity: 1; transform: scale(1);}

/* помеха на кадре при наведении */
.item-track {position: absolute; left: 0; right: 0; height: 26px; opacity: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.22) 0px, rgba(255,255,255,.22) 2px,
    rgba(0,0,0,.12) 2px, rgba(0,0,0,.12) 4px);
  mix-blend-mode: screen; transition: opacity .15s; z-index: 2;}
.item-link:hover .item-track {opacity: .5;}

/* метаданные поверх кадра */
.item-meta {display: inline-block; height: 22px; line-height: 22px; padding: 0 7px;
  border-radius: 2px; position: absolute; z-index: 4;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em;
  color: #d9e5e0; background: rgba(3,8,6,.78); border: 1px solid rgba(109,255,168,.2);
  backdrop-filter: blur(1px);}
.meta-views {left: 8px; top: 8px; color: var(--osd);}
.meta-time  {left: 8px; bottom: 8px; color: var(--amber); border-color: rgba(255,180,60,.25);}
.meta-rate  {right: 8px; bottom: 8px; color: var(--osd); background: rgba(3,8,6,.85);
  border-color: var(--osd-dim); opacity: 0;}
.meta-rate .wdone {opacity: 1;}
.item-meta .fa {font-size: 13px;}

.item-title {margin: 10px 10px 0 10px; height: 40px; overflow: hidden; line-height: 20px;
  font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--txt);}
.item-link:hover .item-title {color: #fff;}

.item-foot {margin: 8px 10px 0 10px; padding-top: 8px; border-top: 1px dotted #1e2a27;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-mute);}
.item-foot .if-sp {color: var(--osd-dim);}

.item-model {width: 20%;}


/* 12. ОПИСАНИЕ / SEO-ПЛАСТИНА
   ----------------------------------------------- */
.sect-desc {line-height: 1.75; margin-bottom: 26px; font-size: 13px; color: var(--txt-dim);
  padding: 16px 18px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(20,30,28,.7), rgba(10,16,18,.7));
  border: 1px solid #1a2422;}
.sect-desc p + p {margin-top: 12px;}
.sect-desc p {opacity: .8;}
.sect-desc .items-title, .sect-desc h1 {margin-bottom: 12px; font-size: 22px; color: var(--osd);
  text-shadow: 0 0 12px rgba(109,255,168,.28);}
.sect-desc a {text-decoration: underline; color: var(--osd);}
.sect-desc a:hover {color: var(--amber); text-decoration: none;}

.slice {overflow: hidden; position: relative; transition: height .2s;}
.slice-masked:before {content: ''; position: absolute; z-index: 1; bottom: 0; left: 0; right: 0;
  height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,16,18,0) 0%, #0d1214 100%);}
.slice-btn {margin: -26px 0 18px 0;}
.slice-btn span {display: inline-block; cursor: pointer; font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--osd);}
.slice-btn span:hover {color: var(--amber);}


/* 13. ПОДВАЛ — ПАНЕЛЬ УПРАВЛЕНИЯ
   ----------------------------------------------- */
.footer {position: relative; margin: 34px -16px -16px; padding: 26px 16px 26px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, var(--case-3) 0%, var(--case-2) 40%, var(--case-1) 100%);
  box-shadow: inset 0 1px 0 var(--case-edge), 0 -3px 8px rgba(0,0,0,.5);
  font-size: 12px; color: #b9ab96;}
.footer-in {max-width: 1200px; margin: 0 auto;}

/* решётка динамика */
.footer-grille {width: 132px; height: 56px; flex: 0 0 auto; border-radius: 3px;
  background-color: #171310;
  background-image: radial-gradient(circle, rgba(0,0,0,.75) 1.2px, transparent 1.3px);
  background-size: 6px 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 var(--case-edge);}

.footer-alert {font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  line-height: 34px; color: var(--red); text-shadow: var(--red-glow);
  padding: 0 14px; border-radius: 3px; background: #0a0f11; flex: 0 0 auto;
  border: 1px solid #2a1a17;}
.footer-alert span {font-size: 11px; color: var(--red);}

.footer-copy {line-height: 1.7; color: var(--case-5); font-family: var(--f-mono); font-size: 11px;
  flex: 0 0 auto;}

.footer-text {opacity: .85; text-align: center; font-size: 11px; line-height: 1.7;
  flex: 0 1 auto; max-width: 300px;}
.footer-text li {display: inline-block; margin: 0 4px 8px 4px; padding: 0 10px;}
.footer-text li + li {border-left: 1px solid #4b4239;}
.footer-text a {color: var(--osd); font-family: var(--f-mono); letter-spacing: .06em;}

.footer-count img {opacity: .5; filter: grayscale(1) brightness(.8);}

/* шильдик бренда */
.footer-brand {font-family: var(--f-disp); font-size: 13px; letter-spacing: .2em;
  color: var(--case-5); text-transform: uppercase; white-space: nowrap; flex: 0 0 auto;}


/* 14. ПАГИНАЦИЯ
   ----------------------------------------------- */
.bottom-nav {text-align: center; padding-top: 26px;}
.pagi-nav {display: inline-block; border-radius: 4px; line-height: 36px; padding: 0 8px;
  background: #0d1214; border: 1px solid #1e2a27; box-shadow: 0 3px 8px rgba(0,0,0,.5);}
.pagi-nav > a, .pagi-nav > span {display: inline-block; float: left; padding: 0 12px; min-width: 38px;
  font-family: var(--f-mono); font-size: 13px; border-left: 1px solid #1e2a27; color: var(--txt-dim);}
.pagi-nav > *:first-child {border-left: 0;}
.pagi-nav > a:hover {color: #fff; background: #16211f;}
.pagi-nav > span:not(:first-child):not(.nav_ext) {color: #06120b; background: var(--osd);
  text-shadow: none; box-shadow: 0 0 12px rgba(109,255,168,.45);}


/* 15. ВНУТРЕННЯЯ СТРАНИЦА И ПЛЕЕР
   ----------------------------------------------- */
.main {position: relative; z-index: 10; padding: 0 16px 10px;
  min-height: 60vh;}

.pages-bg {padding: 16px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(22,29,28,.75), rgba(13,18,20,.75));
  border: 1px solid #1a2422;}
.sub-title {margin-bottom: 14px;}

.fcols {margin-bottom: 28px;}
.fright {width: 370px;}
.fleft {width: calc(100% - 400px); width: -webkit-calc(100% - 400px); padding: 20px 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(22,29,28,.8), rgba(11,16,18,.8));
  border: 1px solid #1a2422;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);}
.fleft > h1.items-title {margin-bottom: 14px;}

@media screen and (min-width: 1240px) {
.fcols .item {float: none; width: 100%; margin: 22px 0 0 0;}
.fcols .item-link {padding: 0;}
.fcols .item-in {display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px;}
.fcols .item-head {display: none;}
.fcols .item-img {flex: 0 0 200px; width: 200px; padding-top: 0; height: 118px;}
.fcols .item-img img {position: static; width: 100%; height: 100%; object-fit: cover;}
.fcols .item-title {margin: 0; padding-top: 12px; flex: 1 1 auto; height: 60px; line-height: 20px;}
.fcols .item-foot {display: none;}
.fcols .item-play {opacity: 1; transform: scale(1); width: 42px; height: 42px;
  line-height: 38px; margin: -21px 0 0 -21px; font-size: 15px;}
}

/* плеер в рамке CRT */
.fplayer {position: relative; margin: 18px -24px 0 -24px; background: #000; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);}
.fplayer .crt {position: absolute;}
.fplayer-caption {position: absolute; left: 0; right: 0; bottom: 0; z-index: 950; padding: 6px 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--osd); text-shadow: var(--osd-glow); pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame
{max-width: 100% !important; display: block; width: 100%; height: 420px; border: 0;}
.mejs-container {max-width: 100% !important;}

.f-desc {margin-bottom: 10px;}
.full-tags {line-height: 32px; font-size: 13px; color: var(--txt-dim);}
.full-tags b {color: var(--amber); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;}
.full-tags a {color: var(--osd);}
.full-tags a:hover {text-decoration: underline; color: var(--amber);}

/* метастрока */
.fmeta {padding: 12px 24px; margin: 0 -24px 20px; border-bottom: 1px solid #1e2a27;
  border-top: 1px solid #1e2a27; background: rgba(0,0,0,.25);}
.fm-item {float: left; line-height: 18px; height: 38px; padding: 0 18px;
  border-right: 1px solid #1e2a27;}
.fm-item div {font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-mute);}
.fm-item {font-size: 12px; color: var(--txt);}
.fm-fav {cursor: pointer; width: 38px; height: 38px; text-align: center; font-size: 20px;
  float: right; color: var(--osd-dim); line-height: 38px; border-radius: 3px; background: #0a0f11;
  box-shadow: inset 0 0 0 1px #1e2a27;}
.fm-fav:hover {color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,74,53,.5), 0 0 12px rgba(255,74,53,.2);}

/* рейтинг */
.fmeta-rate {float: left; white-space: nowrap; text-align: center; overflow: hidden; height: 38px;
  border-right: 1px solid #1e2a27; padding-right: 18px;}
.rate-plus, .rate-minus, .rate-counts {display: inline-block; vertical-align: middle;}
.rate-data {display: none;}
.rate-counts {width: 160px; height: 38px; position: relative; font-size: 12px;}
.rate-plus, .rate-minus {cursor: pointer; width: 38px; height: 38px; text-align: center; font-size: 20px;
  line-height: 38px; background: #0a0f11; margin-right: 6px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1e2a27;}
.rate-plus {color: var(--osd);}
.rate-minus {color: var(--red);}
.rate-plus:hover, .rate-minus:hover {box-shadow: inset 0 0 0 1px currentColor, 0 0 12px rgba(109,255,168,.2);}
.rate-bar {width: 100%; height: 5px; border-radius: 3px; overflow: hidden; position: absolute;
  background: rgba(255,74,53,.45); left: 0; right: 0; bottom: 0;}
.rate-fill {width: 50%; height: 100%; position: absolute; left: 0; top: 0; background: var(--osd);
  transition: width 1s linear;}
.rate-perc {margin-right: 5px; font-size: 17px; color: var(--osd); font-family: var(--f-mono);}
.rate-likes {color: var(--txt-mute); font-family: var(--f-mono); font-size: 11px;}


/* 16. ТЕКСТ СТАТЬИ
   ----------------------------------------------- */
.full-text {font-size: 13px; line-height: 1.8; color: var(--txt-dim);}
.full-text img:not(.emoji) {max-width: 100%; margin: 12px 0; border: 1px solid #1e2a27;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin: 0 12px 12px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin: 0 0 12px 12px;}
.full-text a {text-decoration: underline; color: var(--osd);}
.full-text a:hover {text-decoration: none; color: var(--amber);}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin: 14px 0; font-size: 18px; color: var(--osd);}
.full-text p {margin-bottom: 12px;}
.full-text ul, .full-text ol {margin: 0;}
.full-text ul li {list-style: disc; margin-left: 40px;}
.full-text ol li {list-style: decimal; margin-left: 40px;}
.full-text blockquote {border-left: 3px solid var(--osd-dim); padding: 6px 0 6px 16px;
  margin: 12px 0; color: var(--txt-mute);}

.full-taglist a {color: var(--osd);}
.full-taglist {margin-top: 20px;}
.full-taglist span:not(.fa):not(:last-child):after {content: ","; display: inline;}


/* 17. КОММЕНТАРИИ
   ----------------------------------------------- */
.full-comms {padding: 14px 24px 16px; margin: 22px -24px -20px -24px;
  border-top: 1px solid #1e2a27; background: rgba(0,0,0,.2);}
.comms-title {line-height: 38px; border-bottom: 1px dashed #1e2a27; margin-bottom: 12px;}
.comms-title > span {font-family: var(--f-disp); font-size: 16px; color: var(--osd);}
.add-comm-btn {float: right;}
.add-comm-form {position: relative; margin: 18px 0; display: none;}

/* Плавное появление формы комментариев.
   Анимируем ТОЛЬКО прозрачность и небольшой сдвиг, но НЕ высоту: анимация
   высоты заставляет блок «ползти шагами», содержимое проявляется слоями.
   Высота мгновенно становится полной, а блок сам проявляется из пустоты. */
.add-comm-form.appearing {animation: comm-form-in .26s ease-out;}
@keyframes comm-form-in {
  from {opacity: 0; transform: translateY(-10px);}
  to   {opacity: 1; transform: translateY(0);}
}

@media (prefers-reduced-motion: reduce) {
  .add-comm-form.appearing {animation: none;}
}
.ac-soc {position: absolute; right: 0; top: -8px;}
.ac-soc:before {content: attr(data-label); display: inline-block; vertical-align: top;
  line-height: 30px; margin-right: 5px; font-family: var(--f-mono); font-size: 11px; color: var(--txt-mute);}
.ac-soc a {display: inline-block; margin: 0 0 0 3px; vertical-align: top;}
.ac-soc img {display: block; width: 30px;}
.ac-inputs, .ac-textarea {margin-bottom: 14px;}
.ac-inputs input {width: 49%;}
.ac-textarea textarea {height: 90px;}
.sec-answer + .sec-label {margin-top: 10px;}
.ac-protect {margin-top: -10px; display: none;}
.ac-protect .label {font-size: 12px;}
.ac-protect .sep-input {padding: 10px 10px 10px 160px;}

.mass_comments_action {display: none;}
.last-comm-link {margin-bottom: 10px;}
.last-comm-link a {text-decoration: underline;}

.comm-item {font-size: 12px; color: var(--txt-dim);}
.comm-author {margin-right: 10px; color: var(--amber); font-family: var(--f-mono); font-size: 12px;}
.comm-one {margin-bottom: 8px; opacity: .65;}
.comm-two {line-height: 1.6;}
[id*=comment-id-] {margin-top: 12px; padding: 10px 12px; border-radius: 3px;
  background: rgba(255,255,255,.02); border: 1px solid #16211f;}
[id*=comment-id-]:nth-child(2n) {background: rgba(109,255,168,.03); border-color: #1e2a27;}


/* 18. ФОРМЫ DLE
   ----------------------------------------------- */
.berrors {background: rgba(255,74,53,.1); color: var(--red); margin: 0 0 20px 0;
  padding: 10px 20px; border: 1px solid rgba(255,74,53,.4); border-radius: 3px;
  font-family: var(--f-mono); font-size: 12px;}
.berrors a {color: var(--amber); text-decoration: underline;}

.form-wrap h1 {font-size: 24px; margin-bottom: 20px; color: var(--osd);}
.form-wrap > div, .form-vote > div {margin-bottom: 20px;}
.form-item > label {color: var(--txt-dim); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; padding-top: 12px;}
.imp > label:after {color: var(--red);}
.form-textarea > label {background: #0d1214; color: var(--osd); border: 1px solid #1e2a27;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;}
.tableform td, .tableform th {border-top: 1px dotted #1e2a27;}
.tableform th, .tableform .label, .tableform .addnews {color: var(--txt-dim);}
.findrelated {background: rgba(255,180,60,.08); border: 1px solid rgba(255,180,60,.3);
  padding: 6px; font-family: var(--f-mono); font-size: 12px;}
#category {width: 100% !important;}
.bbcodes img {filter: invert(.75) hue-rotate(180deg);}

/* всплывающий профиль */
.user-popup, .us-prof {background: #0d1214; border: 1px solid #1e2a27; box-shadow: 0 6px 20px rgba(0,0,0,.6);}
.usp-left {background: linear-gradient(180deg, var(--case-4), var(--case-2));}
.usp-right {color: var(--txt-dim);}
.up-img {border-color: #241e18;}


/* 19. БЛОК АВТОРИЗАЦИИ
   ----------------------------------------------- */
.login-box {width: 260px; padding: 12px; border-radius: 4px;
  background: rgba(6,10,11,.94); border: 1px solid #1e2a27; color: var(--txt-dim);}
.lb-user {display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}
.lb-ava {width: 44px; height: 44px; border-radius: 3px; flex: 0 0 44px; overflow: hidden;
  border: 1px solid #2a3a36;}
.lb-name {font-family: var(--f-mono); font-size: 12px; color: var(--osd);}
.lb-name a {display: block; font-size: 11px; color: var(--amber);}
.lb-menu li a {display: block; padding: 7px 0; font-size: 12px; color: var(--txt-dim);
  border-bottom: 1px dotted #1a2422;}
.lb-menu li a:hover {color: var(--osd);}
.lb-menu li:last-child a {border-bottom: 0; color: var(--red);}
.lb-check {margin: 10px 0; font-size: 11px; color: var(--txt-mute);}
.lb-lnk a {font-size: 11px; font-family: var(--f-mono);}
.lb-soc {font-size: 11px; color: var(--txt-mute); margin-top: 8px;}
.lb-soc img {width: 24px;}


/* 19a. ВСПЛЫВАЮЩИЕ ОКНА DLE
   -----------------------------------------------
   В engine.css у .ui-dialog нет z-index, поэтому окно (например
   «вы не можете голосовать за свою новость») рисуется под слоями темы
   (.crt — 900, .top-menu — 1000) и под обрезкой .wrap. Поднимаем
   диалог над всем и перекрашиваем под тёмную тему. */
.ui-dialog {
  z-index: 10050 !important;
  background: #0d1214 !important;
  color: var(--txt);
  border: 1px solid var(--case-4);
  border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 18px 40px rgba(0,0,0,.7);
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.6;
}
.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(180deg, #3a322a, #241e18) !important;
  color: var(--osd);
  border-bottom: 1px solid #1e2a27;
  font-family: var(--f-disp);
  letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(109,255,168,.3);
}
.ui-dialog .ui-dialog-title { color: var(--osd) !important; font-family: var(--f-disp); font-size: 15px;}
.ui-dialog .ui-dialog-content { background: #0d1214; color: var(--txt-dim); padding: 18px 20px;}
.ui-dialog .ui-dialog-content p { margin: 0; }
.ui-dialog .ui-dialog-buttonpane {
  background: #0a0f11 !important; border-top: 1px solid #1e2a27; padding: 10px 20px;
}
.ui-dialog .ui-dialog-buttonset button,
.ui-dialog .ui-dialog-buttonpane button {
  background: #0a0f11; color: var(--osd);
  border: 1px solid var(--case-4); border-radius: 3px;
  font-family: var(--f-mono); letter-spacing: .06em;
}
.ui-dialog .ui-dialog-buttonset button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
  background: var(--osd); color: #06120b; border-color: var(--osd);
}
/* jQuery UI перетаскивает окно за заголовок */
.ui-dialog .ui-dialog-titlebar, .ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-resizable .ui-resizable-handle { z-index: 10051; }


/* 20. КНОПКА МЕНЮ, ВЫПАДАЮЩЕЕ МЕНЮ, НАВЕРХ
   ----------------------------------------------- */
/* бургер доступен на всех ширинах — и на ПК, и на телефоне */
.btn-menu {display: block; width: 50px; height: 40px; line-height: 40px; text-align: center;
  border-radius: 3px; cursor: pointer; font-size: 22px; color: var(--osd); flex: 0 0 auto;
  background: linear-gradient(180deg, #4b4239, #241e18);
  box-shadow: inset 0 1px 0 rgba(255,235,205,.2), 0 2px 5px rgba(0,0,0,.5);
  transition: color .15s, box-shadow .15s;}
.btn-menu:hover {color: var(--amber); box-shadow: inset 0 1px 0 rgba(255,235,205,.2), 0 0 14px rgba(255,180,60,.35);}
.btn-menu:active {transform: translateY(1px);}
/* когда меню раскрыто — кнопка горит янтарным, как включённый тумблер */
body.opened-menu .btn-menu {color: #1a1208;
  background: linear-gradient(180deg, var(--amber), #d98a15);
  box-shadow: 0 0 14px rgba(255,180,60,.45);}

/* Выпадающая панель с категориями.
   Раскрываем через transform + opacity, а НЕ через max-height: анимация
   max-height заставляет содержимое проявляться слоями — панель открывается
   «шагами». Здесь высота фиксирована, панель просто едет вниз и проявляется. */
.top-menu {position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  max-height: min(70vh, 560px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  background: linear-gradient(180deg, #121a19 0%, #0a0f11 100%);
  border-top: 1px solid #1e2a27;
  box-shadow: 0 20px 34px rgba(0,0,0,.6);
  transition: opacity .18s ease, transform .2s ease, visibility .2s;}
.top-menu.open {opacity: 1; visibility: visible; transform: translateY(0);}

.top-menu-in {padding: 16px calc(var(--pad-tv) + var(--pad-bezel));}
.top-menu-in .nav-in {margin: 0 -8px;}

/* шапка выпадающего меню: заголовок + крестик закрытия */
.top-menu-head {display: -ms-flexbox; display: -webkit-flex; display: flex;
  -ms-flex-align: center; -webkit-align-items: center; align-items: center;
  -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #1e2a27;}
.tmh-title {font-family: var(--f-disp); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--osd); text-shadow: 0 0 10px rgba(109,255,168,.3);}
.top-menu-close {width: 32px; height: 32px; line-height: 30px; padding: 0; text-align: center;
  cursor: pointer; font-size: 16px; border-radius: 3px; color: var(--osd-dim);
  background: #0a0f11; border: 1px solid #1e2a27;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: color .15s, background-color .15s, box-shadow .15s;}
.top-menu-close:hover {color: #fff; background: var(--red); border-color: var(--red);
  box-shadow: 0 0 14px rgba(255,74,53,.45);}

.top-list li {width: 25%; padding: 0 8px;}
.top-list a {height: 44px;}
.top-list a:before {content: "\f07b"; font: normal normal normal 14px/1 FontAwesome;}

/* Ссылки Telegram/Блог/Чат в выпадающем меню — нужны только там, где
   одноимённые кнопки в шапке скрыты. На широких экранах показывает шапка. */
.top-social {display: none; margin: 14px -8px 0 -8px; padding-top: 12px;
  border-top: 1px solid #1e2a27;}
.top-social li {display: inline-block; padding: 0 4px;}
.top-social a {display: block; height: 34px; line-height: 32px; padding: 0 14px; border-radius: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #e0d3bd; background: linear-gradient(180deg, #4b4239, #241e18);
  border: 1px solid #100d0a; box-shadow: inset 0 1px 0 rgba(255,235,205,.2);}
.top-social a:hover {color: #1a1208; background: linear-gradient(180deg, var(--amber), #d98a15);
  box-shadow: 0 0 12px rgba(255,180,60,.45);}

.close-overlay {width: 100%; height: 100%; background: rgba(0,0,0,.72); position: fixed;
  left: 0; top: 0; z-index: 900; display: none;}
body.opened-menu {overflow: hidden; width: 100%;}

#gotop {position: fixed; width: 46px; height: 46px; line-height: 44px; right: 14px; bottom: 14px;
  cursor: pointer; font-size: 20px; z-index: 9998; display: none; text-align: center;
  border-radius: 50%; color: var(--osd); background: #0d1214;
  border: 1px solid var(--osd-dim); box-shadow: 0 0 16px rgba(109,255,168,.28);}
#gotop:hover {color: #06120b; background: var(--osd);}


/* 21. АНИМАЦИИ
   ----------------------------------------------- */
@keyframes grain-shift {
  0%   {transform: translate3d(0, 0, 0);}
  33%  {transform: translate3d(40px, 20px, 0);}
  66%  {transform: translate3d(-30px, 45px, 0);}
  100% {transform: translate3d(0, 0, 0);}
}
@keyframes chroma-a {
  0%, 100% {transform: translateX(0); opacity: .5;}
  50%      {transform: translateX(1.5px); opacity: 1;}
}
@keyframes chroma-b {
  0%, 100% {transform: translateX(0); opacity: .5;}
  50%      {transform: translateX(-1.5px); opacity: 1;}
}
@keyframes blink {
  0%, 49%   {opacity: 1;}
  50%, 100% {opacity: 0;}
}
@keyframes led-breathe {
  0%, 100% {opacity: 1;}
  50%      {opacity: .45;}
}

@media (prefers-reduced-motion: reduce) {
  .crt-grain, .crt-chroma:before, .crt-chroma:after,
  .osd-blink, .vcr-display .vd-led {animation: none !important;}
}


/* 22. АДАПТИВ
   ----------------------------------------------- */
@media screen and (max-width: 1240px) {
.tv-set {--pad-tv: 10px; --pad-bezel: 22px; border-radius: 18px;}
.wrap-center {max-width: 1000px;}
.logo {width: 230px; font-size: 22px;}
.vcr-display {display: none;}
.vcr-keys {display: none;}
.h-menu, .nav, .footer-alert, .footer-copy {display: none;}
.header {margin: 0 -10px 12px; padding: 0 10px; border-radius: 0 0 10px 10px;}
.tv-bezel {padding: var(--pad-bezel); border-radius: 12px;}
.tv-screen {border-radius: 8px;}
.osd {font-size: 10px;}
.osd-tl, .osd-bl {left: 26px;}
.osd-tr, .osd-br {right: 26px;}
.footer {margin: 28px -10px -10px; padding: 22px 10px;}
.header-in, .main {padding-left: 0; padding-right: 0;}
.item-model {width: 25%;}

/* бургер теперь всегда виден — дублировать display:block не нужно.
   На планшете/телефоне категории в выпадающем меню идут по две в ряд,
   а ссылки из шапки дублируются внутри меню. */
.top-list li {width: 50%;}
.top-social {display: block;}

.fcols {display: block;}
.fleft {width: 100%;}
.fright {width: auto; margin: 26px 0 0 0;}
.fright .items-title {margin-bottom: 20px;}
}

@media screen and (max-width: 980px) {
.wrap-center {max-width: 768px;}
.items-sort {width: 100%; margin-top: 10px; white-space: nowrap; overflow-y: hidden; overflow-x: auto;}
.item {width: 50%;}
.footer-in {display: block; text-align: center;}
.footer-grille {margin: 0 auto 14px auto;}
.footer-count {margin-top: 12px;}
.item-model {width: 33.33%;}

.fm-item {display: none;}
.fleft, .fmeta, .full-comms, [id*=comment-id-] {padding-left: 16px; padding-right: 16px;}
.fplayer, .fmeta, .full-comms {margin-right: -16px; margin-left: -16px;}
}

@media screen and (max-width: 760px) {
.wrap-center {max-width: 640px;}
.header-in {height: auto; padding: 14px 0;}
.logo {width: 100%; font-size: 22px;}
.logo .logo-sub {margin-left: 0;}
.search-box {width: 100%; margin-top: 12px;}
.vcr-keys {display: none;}

.pagi-nav {display: block; background: transparent; padding: 0; border: 0; box-shadow: none;}
.pagi-nav > a, .pagi-nav > span {float: none; display: inline-block; padding: 0 12px;
  border-left: 0; border: 1px solid #1e2a27; border-radius: 3px; background: #0d1214;
  box-shadow: 0 3px 8px rgba(0,0,0,.5); margin: 0 4px 8px 4px;}

.ac-protect {margin-top: 0;}
.comments-tree-list .comments-tree-list {padding-left: 0 !important;}
.comments-tree-list .comments-tree-list:before {display: none;}
.sub-title h1 {font-size: 18px; line-height: 24px;}

/* на узких экранах рамка тонкая — надписи OSD не помещаются */
.osd-bl, .osd-br {display: none;}
}

@media screen and (max-width: 590px) {
.wrap-center {max-width: 480px;}

/* на телефоне категории в выпадающем меню — одна в ряд */
.top-list li {width: 100%;}
.top-menu-in {padding: 12px calc(var(--pad-tv) + var(--pad-bezel));}
.top-menu {max-height: min(80vh, 440px);}

.items-title {font-size: 1.1rem;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height: 260px;}

.osd {font-size: 10px;}
.osd-tl, .osd-bl {left: 12px;}
.osd-tr, .osd-br {right: 12px;}

.ac-soc {position: static;}
.ac-inputs input {width: 100%; margin-top: 10px;}
.ac-protect {width: 100%; float: none; margin: 0;}
.ui-dialog {width: 100% !important;}
.ui-dialog .ui-dialog-titlebar {color: var(--osd);}
.upop-left, .upop-right {float: none !important; width: 100% !important; margin: 0; padding: 0 20px;}
.upop-left {margin-bottom: 10px; text-align: center;}
.ui-dialog-buttonset button {display: block; margin: 0 0 5px 0; width: 100%;}
#dofullsearch, #searchsuggestions span.seperator {display: none !important;}
.attach .download-link {margin: 0; float: none; display: block; padding: 0 10px;}
.attach-info {float: none;}

/* --- ужимание отступов и текста на узких экранах --- */
.items-header {margin-bottom: 18px; padding-bottom: 8px;}
.sect-desc {padding: 13px; font-size: 12.5px;}
.pages-bg {padding: 12px;}
.full-text {font-size: 12.5px; line-height: 1.75;}
.item-meta {height: 20px; line-height: 20px; font-size: 10px; padding: 0 6px;}
.item-meta .fa {font-size: 12px;}
.item-head {padding: 6px 9px 0 9px;}
.item-title {margin: 9px 9px 0 9px; height: 38px;}
.item-foot {margin: 7px 9px 0 9px; padding-top: 7px;}
.comms-title > span {font-size: 15px;}
.footer-text {max-width: min(300px, 100%);}

.fleft {padding: 16px 14px;}
.fmeta {padding: 10px 14px;}
.full-comms {padding: 12px 14px;}
.fplayer, .fmeta, .full-comms {margin-left: -14px; margin-right: -14px;}
[id*=comment-id-] {padding: 9px 10px;}
}

@media screen and (max-width: 470px) {
.wrap-center {max-width: 320px;}
.item {width: 100%; margin-bottom: 16px;}
.item-model {width: 50%;}

.tv-set {--pad-tv: 5px; --pad-bezel: 12px; border-radius: 12px;}
.header {margin: 0 -5px 10px; padding: 0 5px; border-radius: 0 0 8px 8px;}
.tv-bezel {padding: var(--pad-bezel); border-radius: 8px;}
.tv-screen {border-radius: 5px;}
.osd {display: none;}
.footer {margin: 22px -5px -5px; padding: 18px 5px;}

.fmeta-rate {border-right: 0; padding-right: 0;}
.rate-counts {width: 100px;}
.add-comm-btn {padding: 0 10px;}
.comms-title2 {text-align: center; display: block !important;}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height: 195px;}

/* --- мелкие телефоны: ужимаем ещё сильнее --- */
.sect-desc {padding: 11px; font-size: 12px;}
.pages-bg {padding: 10px;}
.full-text {font-size: 12px;}
.items-header {margin-bottom: 14px;}
.item {margin-bottom: 14px;}
.item-head {padding: 5px 8px 0 8px; font-size: 9px;}
.item-title {margin: 8px 8px 0 8px; height: 36px; font-size: 12.5px;}
.item-foot {margin: 6px 8px 0 8px; padding-top: 6px;}
.logo {font-size: 19px;}
.logo .logo-sub {font-size: 8px; letter-spacing: .12em;}
.search-box input#story, .search-box input#story:focus {height: 36px; line-height: 36px; font-size: 12px;}
.comms-title > span {font-size: 14px;}
.footer-brand {font-size: 11px; letter-spacing: .14em;}
.fleft {padding: 14px 11px;}
.fmeta {padding: 9px 11px;}
.full-comms {padding: 11px;}
.fplayer, .fmeta, .full-comms {margin-left: -11px; margin-right: -11px;}
}