/* Шрифты лежат на самом сайте, чтобы страница не зависела от Google Fonts */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/russo-one-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/russo-one-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/onest-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/onest-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/onest-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/onest-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/onest-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/onest-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Основа страницы */
[hidden] { display: none !important; }
img { max-width: 100%; }
body { margin: 0; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Layout: баннер канала и круглый логотип сверху, под ними ряд обложек игр и страница выбранной игры со списком серий */
:root {
  color-scheme: dark;
  --bg: #04070f;
  --panel: #0a1124;
  --panel-2: #0f1a36;
  --line: #1a2b52;
  --fg: #eaf1ff;
  --muted: #8fa4cc;
  --accent: #1f6bff;
  --accent-2: #35d0ff;
  --accent-fg: #ffffff;
  --glow: rgba(47, 123, 255, .55);
  --font-display: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(70% 380px at 50% 0, rgba(31, 107, 255, .22), transparent);
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-block: 20px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1080px; margin: 0 auto; display: grid; gap: 28px; }
a, button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Channel header */
.hero { display: grid; gap: 0; }
.banner-wrap {
  position: relative; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--line);
  background: #000;
}
.banner { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; }
.banner-wrap::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, var(--bg));
}
.id {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: end;
  margin-top: -40px; padding-inline: 6px;
}
.avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #000;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent), 0 0 28px var(--glow);
}
.who { min-width: 0; padding-bottom: 6px; }
.who h1, .site-name {
  margin: 0;
  font: 400 clamp(1.3rem, 5.6vw, 2rem)/1.1 var(--font-display);
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--fg);
  background: linear-gradient(180deg, #ffffff 20%, #9ec1ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.handle { margin: 4px 0 0; font: 500 .75rem var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 760px) {
  .banner { aspect-ratio: 2.4 / 1; }
  .id { margin-top: -52px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .avatar { width: 116px; height: 116px; }
  .cta { grid-column: auto; align-self: end; padding-bottom: 8px; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.2em;
  border-radius: 10px; border: 1px solid transparent;
  background: linear-gradient(135deg, #1a56d6, var(--accent));
  color: var(--accent-fg);
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 20px rgba(47, 123, 255, .35);
}
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent-2); filter: none; }

.lead { margin: 0; max-width: 60ch; color: var(--muted); }

.note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 14px;
  border: 1px dashed var(--line); border-radius: 10px;
  color: var(--muted); font-size: .9rem;
}
.note span { flex: 1 1 260px; min-width: 0; }
.note button {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
}

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.search {
  flex: 1 1 220px; min-width: 0;
  padding: .65em .95em;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
}
.search::placeholder { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: .5em .95em; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font-weight: 500; font-size: .85rem; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.label {
  margin: 18px 0 10px;
  font: 500 .72rem var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Cover row */
.rail {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 12px 8px; margin-inline: -8px;
}
.deck-card {
  position: relative; flex: 0 0 148px; aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  color: var(--fg); text-align: left; cursor: pointer;
  background: radial-gradient(120% 80% at 50% 0, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .2);
  scroll-snap-align: start;
  transition: transform .15s ease, box-shadow .15s ease;
}
.deck-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .09) 50%, transparent 62%);
}
.deck-card:hover { transform: translateY(-3px); }
a.deck-card { text-decoration: none; }
.deck-card[aria-pressed="true"] {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
  box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .2), 0 0 24px var(--glow);
  transform: translateY(-4px);
}
.code {
  position: absolute; inset: 0 0 20% 0;
  display: grid; place-items: center;
  font: 400 2.3rem var(--font-display); letter-spacing: .01em;
  background: linear-gradient(180deg, #ffffff 25%, #8fb6ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.info {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 44px 12px 11px;
  background: linear-gradient(transparent, rgba(2, 5, 12, .85));
}
.name { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.meta { font: 500 .66rem var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.empty { margin: 0; padding: 14px 0; color: var(--muted); }

@media (min-width: 760px) {
  .rail {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .deck-card { flex: initial; }
}

/* Series page */
.detail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  padding: clamp(18px, 4vw, 36px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 40px rgba(31, 107, 255, .12);
}
@media (min-width: 860px) {
  .detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; }
}
.info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: start; }
.pill {
  align-self: flex-start;
  padding: .25em .75em; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent-2);
  font: 500 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.detail h1, .detail h2 {
  margin: 0;
  font: 400 clamp(1.4rem, 4.5vw, 2.1rem)/1.12 var(--font-display);
  letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
}
.facts { margin: 0; font: 500 .8rem var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.desc { margin: 0; max-width: 52ch; }
.progress { display: grid; gap: 8px; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; }
.progress p { margin: 0; font-size: .85rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.eps { list-style: none; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.ep {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 6px; align-items: center;
  padding-right: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.ep:hover { border-color: var(--accent); }
.ep-link {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 14px 6px 14px 14px; color: var(--fg); text-decoration: none; border-radius: 12px;
}
.ep-link:hover .ep-title { color: var(--accent-2); }
.num { font: 500 .85rem var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-title { font-weight: 500; overflow-wrap: anywhere; }
.dur { font: 500 .8rem var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ep.done .ep-title { opacity: .5; }
.tick {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--muted);
  background: transparent; color: var(--accent-fg); cursor: pointer; padding: 0;
}
.tick svg { width: 14px; height: 14px; opacity: 0; }
.tick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--glow); }
.tick[aria-pressed="true"] svg { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
  .deck-card { transition: none; }
  .deck-card:hover, .deck-card[aria-pressed="true"] { transform: none; }
}

/* Вход в профиль */
.lead-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.auth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.auth-out, .auth-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.auth-hint { color: var(--muted); font-size: .85rem; max-width: 28ch; }
.auth .btn { padding: .55em 1em; font-size: .88rem; }
.auth-name { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.auth-status { flex-basis: 100%; color: var(--muted); font-size: .8rem; }
.auth-status:empty { display: none; }
.avatar-sm {
  width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg); font-weight: 600;
}
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

.auth-dialog {
  width: min(92vw, 420px); padding: 22px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 40px rgba(31, 107, 255, .25);
}
.auth-dialog::backdrop { background: rgba(2, 5, 12, .72); }
.auth-dialog form { display: grid; gap: 10px; }
.auth-dialog h3 { margin: 0; font: 400 1.25rem var(--font-display); text-transform: uppercase; }
.auth-note { margin: 0; color: var(--muted); font-size: .85rem; }
.btn.wide { width: 100%; }
.auth-or { margin: 4px 0 0; text-align: center; color: var(--muted); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.field { font-size: .85rem; color: var(--muted); }
.auth-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.link-btn {
  justify-self: start; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; font-size: .9rem;
}
.auth-msg { margin: 0; min-height: 1.2em; color: var(--accent-2); font-size: .9rem; }
.auth-fields { display: grid; gap: 10px; }
.auth-fields[hidden] { display: none; }

/* Профиль в правом верхнем углу */
.topbar {
  display: flex; justify-content: flex-end; align-items: center;
  min-height: 44px; margin-bottom: 14px;
}
.topbar .auth { justify-content: flex-end; }
.topbar .auth-out { flex-wrap: nowrap; }
.auth-in {
  flex-wrap: nowrap; gap: 10px;
  padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel);
}
.avatar-sm {
  width: 36px; height: 36px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--glow);
}
.auth-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-exit {
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--muted); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px;
}
.auth-exit:hover { color: var(--accent-2); }
.auth-status { text-align: right; }
@media (max-width: 480px) { .auth-name { max-width: 12ch; } }

/* Фото профиля при регистрации */
.auth-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
.photo-pick { display: flex; align-items: center; gap: 12px; }
.photo-preview {
  width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px dashed var(--muted);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview:empty::before { content: "+"; color: var(--muted); font-size: 1.6rem; line-height: 1; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + .btn { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Игра без серий */
.soon-box {
  align-self: start; display: grid; gap: 14px; justify-items: start;
  padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted);
}
.soon-box p { margin: 0; }

/* Ссылки на игры и навигация для поисковиков и зрителей */
/* Список игр для поисковиков и экранных читалок: людям он не нужен, каталог есть выше */
.games-nav { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.games-nav .label { margin: 0 0 6px; }
.games-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.games-nav a { color: var(--fg); text-underline-offset: 3px; }
.games-nav a:hover { color: var(--accent-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 500 .8rem var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.crumbs a { color: var(--accent-2); text-underline-offset: 3px; }

/* Большая обложка слева на странице игры */
.poster {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 3;
  border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .25), 0 0 32px var(--glow);
}
@media (min-width: 860px) {
  .info-col { position: sticky; top: 16px; }
}

/* Напоминание о регистрации */
.save-note {
  display: grid; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: rgba(31, 107, 255, .1);
}
.save-note p { margin: 0; font-size: .92rem; line-height: 1.45; }
.save-note .btn { justify-self: start; }

/* О канале */
.about { display: grid; gap: 14px; max-width: 70ch; }
.about h2 { margin: 0; font: 400 1.3rem/1.2 var(--font-display); text-transform: uppercase; }
.about p { margin: 0; color: var(--muted); line-height: 1.6; }
.how { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.how li {
  counter-increment: s; position: relative; padding: 14px 16px 14px 56px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); line-height: 1.5;
}
.how li::before {
  content: counter(s); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 500 .9rem var(--font-mono); color: var(--accent-2); border: 1px solid var(--accent);
}
.how strong { color: var(--fg); }
.desc.more { color: var(--muted); }

/* Миниатюры серий */
.ep-link { grid-template-columns: 2.1rem 112px minmax(0, 1fr) auto; }
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #050a18; box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .18);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 55%, rgba(2, 5, 12, .55));
}
.ep-link:hover .thumb { box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 14px var(--glow); }
.ep.done .thumb { opacity: .5; }
@media (min-width: 560px) { .ep-link { grid-template-columns: 2.1rem 148px minmax(0, 1fr) auto; } }
@media (max-width: 559px) {
  .ep { grid-template-columns: minmax(0, 1fr) 2.5rem; padding-right: 6px; gap: 2px; }
  .ep-link { grid-template-columns: 1.3rem 84px minmax(0, 1fr); gap: 8px; padding: 12px 4px 12px 8px; }
  .ep-link .dur { display: none; }
  .ep-title { font-size: .92rem; line-height: 1.3; hyphens: auto; }
}
@media (max-width: 360px) { .ep-link { grid-template-columns: 1.2rem 72px minmax(0, 1fr); gap: 6px; } }

/* Метки и прогресс на карточках */
.badge {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  padding: .28em .65em; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font: 600 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 14px var(--glow);
}
.new-tag {
  display: inline-block; white-space: nowrap; vertical-align: middle; margin-left: .4em;
  padding: .15em .55em; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font: 600 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.cbar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(150, 190, 255, .25); overflow: hidden; }
.cbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; }

/* Скоро: серая карточка, которая не открывается */
#soon-sec { margin-top: 8px; }
.deck-card.is-soon { cursor: default; filter: grayscale(1) brightness(.8); opacity: .75; box-shadow: inset 0 0 0 1px rgba(200, 200, 210, .18); }
.deck-card.is-soon:hover { transform: none; }
.deck-card.is-soon .badge { background: #8a8f9a; color: #0b0d12; box-shadow: none; left: auto; right: 8px; }

/* Кнопка «Назад» на странице игры */
.back { justify-self: start; align-self: start; width: fit-content; padding: .55em 1em; font-size: .9rem; }

/* Счётчик «В сети» */
.online {
  margin-right: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font: 500 .8rem var(--font-mono); letter-spacing: .04em; color: var(--muted);
}
.online[hidden] { display: inline-flex !important; }   /* старые страницы игр: плашка всегда на месте */
.online.off { display: none !important; }
.online svg { width: 18px; height: 18px; color: var(--accent-2); }
.online b { color: var(--fg); font-weight: 600; }

/* Запасной вариант миниатюры: если картинка с YouTube не загрузилась, остаётся тёмный квадрат со значком «смотреть» */
.thumb::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0;
  transform: translate(-35%, -50%); border-left: 14px solid rgba(150, 190, 255, .55);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.thumb img { position: relative; z-index: 1; }
.thumb::after { z-index: 2; pointer-events: none; }
.privacy { max-width: 70ch; display: grid; gap: 14px; }
.privacy h1 { margin: 0; font: 400 clamp(1.4rem, 5vw, 2rem)/1.15 var(--font-display); text-transform: uppercase; }
.privacy h2 { margin: 12px 0 0; font: 400 1.1rem/1.2 var(--font-display); text-transform: uppercase; }
.privacy p, .privacy li { margin: 0; color: var(--muted); line-height: 1.6; }
.privacy ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.privacy a { color: var(--accent-2); text-underline-offset: 3px; }
.nf { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 40px 0; }
.nf img { width: 120px; height: 120px; border-radius: 50%; }
.nf h1 { margin: 0; font: 400 clamp(1.6rem, 6vw, 2.4rem)/1.1 var(--font-display); text-transform: uppercase; }
.nf p { margin: 0; color: var(--muted); }