/* ==========================================================================
   Вариант «Vice» — ночное побережье: закатное небо, силуэт города, неон.
   Дизайн сайта с 2026-11-13 (выбор владельца; SHIPPED в src/design.ts).
   Только тёмная тема. Этот же файл уходит на страницы карты как
   public/map/skin.css (scripts/map/build_map_pages.py).

   Что здесь своё, а что нет: небо, горизонт и неоновая трубка статуса
   нарисованы кодом. Логотипов, артов, скриншотов и шрифтов игры нет; знак
   в шапке остаётся простым текстом (бриф, правило 3). Закатная гамма разрешена
   владельцем 2026-11-13 (бриф, правило 2, [v6]); остальные запреты правила 2
   действуют.

   Файл не в слое: его правила сильнее components.css при любой специфичности.
   ========================================================================== */

@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("/fonts/SofiaSansCondensed-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("/fonts/SofiaSansCondensed-cyrillic-wght-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---- Токены --------------------------------------------------------------- */
html:root[data-design="vice"] {
  color-scheme: dark;

  --color-bg: #130A26;                 /* ночь над заливом */
  --color-surface: #1E1238;
  --color-text: #FBF1EA;               /* 17.2:1 на bg */
  --color-text-muted: #BBADD4;         /* 9.1:1 */
  --color-border: #34245C;
  --color-accent: #FF6FB0;             /* неон вывески: ссылки, кнопки; 7.4:1 */
  --color-accent-contrast: #1A0A2B;
  --color-status-confirmed: #6FE8A6;
  --color-status-partial: #FFC857;
  --color-status-unconfirmed: #B9B4D6;

  --color-surface-sunken: #0B0518;
  --color-border-strong: #8672B8;
  --color-rule: #FF6FB0;
  --color-focus: #5CE1FF;              /* второй неон — только кольцо фокуса */
  --color-neon: #FF6FB0;
  --color-neon-contrast: #1A0A2B;
  --color-status-confirmed-surface: #123326;
  --color-status-partial-surface: #3A2A10;
  --color-status-unconfirmed-surface: #2A2247;
  --color-status-confirmed-fill: #6FE8A6;
  --color-status-partial-fill: #FFC857;
  --color-status-unconfirmed-fill: #B9B4D6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --tracking-display: 0;
  --tracking-label: 0.04em;

  /* Свои: небо от ночи к горизонту и свет на небе */
  --sky: linear-gradient(to top, #FFC99B 0, #FF9E7A 2.5rem, #F2506E 6rem, #B4237F 11.5rem, #4A1570 21rem, var(--color-bg) 32rem);
  --sky-ink: #FFF6EE;
  --shadow-night: 0 2rem 4rem -1.75rem rgb(5 2 14 / 0.9);
  --z-grain: 60;
}

/* ---- Основа: марево и зерно ---------------------------------------------- */
html { background: var(--color-surface-sunken); }   /* под коротким подвалом — его же цвет, а не фон страницы */
body {
  background:
    radial-gradient(56rem 26rem at 88% -8rem, rgb(180 35 127 / 0.28), transparent 70%),
    var(--color-bg);
  background-repeat: no-repeat;
  overflow-x: clip;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html { scrollbar-color: var(--color-border-strong) var(--color-surface-sunken); }
input { caret-color: var(--color-accent); }

/* ---- Голос заголовков: тяжёлый наклонный ---------------------------------- */
.label, .status, .btn, .wordmark, .question, .section-h h2, .section-h__title, .prose h2, .prose h3,
.qcard__q, .qrow__q, .topic__title, .hero__title, .feature__q, .countdown__value, .countdown__text,
.topic-head__title, .page__title { font-style: italic; }

.question, .section-h h2, .section-h__title, .feature__q, .topic-head__title, .page__title, .hero__title {
  font-weight: 900; text-transform: uppercase; line-height: 0.98;
}
.qrow__q, .qcard__q, .topic__title { font-weight: 800; font-size: 1.5rem; line-height: 1.08; }

/* ---- Шапка ---------------------------------------------------------------- */
.site-header { border-bottom: 0; }
.site-header::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--color-accent), #FF9E7A 45%, transparent 85%);
}
body:has(.hero) .site-header::after { display: none; }
.wordmark__plate { border-radius: var(--radius-sm); box-shadow: 0 0 1.25rem -0.25rem var(--color-neon); }
.nav a, .menu__panel a { color: var(--color-text); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); text-decoration-color: currentColor; }
.lang { border-radius: var(--radius-full); border-color: var(--color-border); }
.icon-btn { border-radius: var(--radius-full); }
.menu__panel { border-bottom-width: 1px; }

/* ---- Кнопка --------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-full); border-width: 0; padding-inline: var(--spacing-6);
  font-weight: 800; font-size: var(--text-lg);
  transition: background-color var(--duration-fast) var(--ease-ui), transform var(--duration-fast) var(--ease-ui), box-shadow var(--duration-base) var(--ease-ui);
}
.btn:hover { background: #FF9BC8; color: var(--color-accent-contrast); transform: translateY(-1px); box-shadow: 0 0.75rem 1.75rem -0.75rem var(--color-accent); }
.btn:active { background: var(--color-accent); color: var(--color-accent-contrast); transform: scale(0.98); box-shadow: none; }

/* ---- Статус: шкала — неоновая трубка -------------------------------------- */
.gauge { overflow: visible; height: 0.375rem; border-radius: var(--radius-full); background: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 45%, transparent); }
.gauge::before { border-radius: inherit; box-shadow: 0 0 0.875rem color-mix(in oklab, currentColor 80%, transparent), 0 0 0.125rem currentColor; }
.gauge--unconfirmed { background: var(--pattern-hatch); }
.status--chip { border-radius: var(--radius-full); padding-inline: 0.6em 0.8em; }

/* ---- Блок ответа ---------------------------------------------------------- */
.answer {
  --_glow: var(--color-status-unconfirmed-fill);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-night), 0 3rem 5rem -3.5rem var(--_glow);
}
.answer--confirmed { --_glow: var(--color-status-confirmed-fill); }
.answer--partial { --_glow: var(--color-status-partial-fill); }
.answer--unconfirmed { border-style: dashed; border-color: var(--color-border-strong); }
.answer > .gauge, .feature > .gauge { margin: var(--spacing-4) var(--spacing-4) 0; }
.answer__head { border-bottom: 0; padding-bottom: 0; }
.answer__note { margin: var(--spacing-3) var(--spacing-4) 0; border: 0; border-radius: var(--radius-md); }
.answer__basis { background: var(--color-surface-sunken); border-top: 0; }
.cite { border-color: var(--color-border); border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface); }
.cite:hover { border-color: var(--color-accent); }
@media (min-width: 48rem) {
  .answer > .gauge { margin-inline: var(--spacing-6); }
  .answer__note { margin-inline: var(--spacing-6); padding-inline: var(--spacing-4); }
}

/* ---- Секции, списки, карточки --------------------------------------------- */
.section-h { border-top: 1px solid var(--color-border); padding-top: var(--spacing-4); }
.prose-section { border-top: 1px solid var(--color-border); }
.side-block > .label { border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.prose blockquote, .source__quote { border-inline-start: 1px solid var(--color-border-strong); }

.qlist, .sources__list, .ledger, .topics .topic:first-child, .corrections, .not-found__list { border-top-color: var(--color-border); }
.qrow__q a, .qcard__q a, .topic__title a, .feature__q a { color: var(--color-text); }
.qrow:hover .qrow__q a, .qcard:hover .qcard__q a, .topic:hover .topic__title a { color: var(--color-accent); text-decoration: none; }
@media (min-width: 48rem) {
  .qrow:hover { background: var(--color-surface); box-shadow: -1rem 0 0 var(--color-surface), 1rem 0 0 var(--color-surface); }
}

/* Расшифровка статуса: плашка цвета статуса вместо цветной полосы слева */
.qrow__note, .qcard__note {
  justify-self: start; padding: 0.3em 0.65em; border: 0; border-radius: var(--radius-sm);
  background: var(--color-status-unconfirmed-surface); color: var(--color-text);
}
.qrow__note--partial, .qcard__note--partial { background: var(--color-status-partial-surface); }

.qcard { border-radius: var(--radius-lg); padding: var(--spacing-5); transition: border-color var(--duration-fast) var(--ease-ui), transform var(--duration-base) var(--ease-ui), box-shadow var(--duration-base) var(--ease-ui); }
.qcard:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-night); }

.source__n, .cite__n { font-weight: 700; }
.source:target { box-shadow: -1rem 0 0 var(--color-surface), 1rem 0 0 var(--color-surface); }

/* ---- Главная: небо -------------------------------------------------------- */
.hero { position: relative; isolation: isolate; padding-bottom: 10.5rem; }
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; width: 100vw; translate: -50% 0; bottom: 0;
}
.hero::before {   /* небо и солнце у горизонта */
  top: -4.5rem;
  background:
    radial-gradient(circle at 74% calc(100% - 3rem), #FFEFC4 0, #FFD596 4rem, rgb(255 196 140 / 0.4) 4.2rem, transparent 13rem),
    var(--sky);
}
.hero::after {    /* силуэт города: закрывает горизонт цветом страницы */
  height: calc(5.5rem + 2px); bottom: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 120' preserveAspectRatio='none'%3E%3Cpath fill='%23130A26' d='M0 118V84h34V62h10V52h22v10h10v22h20V48h14V34h6V18h4v16h6v14h14v44h26V70h44v22h18V38h10V28h28v10h10v58h30V60h8v-8h24v8h8v28h22V26h12V14h4V2h4v12h4v12h12v54h30V66h36v14h16V54h40v44h24V72h12v-8h20v8h12v12h46v34z'/%3E%3C/svg%3E") repeat-x 50% 100% / 29.5rem 5.5rem,
    linear-gradient(var(--color-bg), var(--color-bg)) no-repeat 0 100% / 100% 3px;
}
.hero__main { display: flex; flex-direction: column; }
.hero__title { order: -2; margin: 0; color: var(--sky-ink); font-size: var(--text-2xl); text-wrap: balance; }
.hero__eyebrow { order: -1; margin-block: var(--spacing-2) var(--spacing-5); color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.hero__actions > a:not(.btn) { color: var(--sky-ink); font-weight: var(--font-weight-semibold); }
.hero .btn { background: var(--sky-ink); color: var(--color-accent-contrast); }
.hero .btn:hover { background: #fff; box-shadow: 0 0.75rem 1.75rem -0.75rem rgb(19 10 38 / 0.8); }

.feature { border: 0; padding-top: 0; box-shadow: var(--shadow-night); }
.feature > .gauge { margin: var(--spacing-5) 0 var(--spacing-2); }
.feature__q a:hover { color: var(--color-accent); text-decoration: none; }

.countdown { border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-night); }
.countdown__value { font-weight: 900; }
.countdown__text { text-transform: uppercase; font-weight: 800; }
.hero__legend { border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-night); }
.legend__item .gauge::before { box-shadow: none; }

@media (min-width: 48rem) {
  .feature > .gauge { margin-top: var(--spacing-6); }
}
@media (min-width: 64rem) {
  .hero { padding-bottom: 12rem; }
  .hero__title { font-size: var(--text-4xl); }
  .hero__side { padding-top: var(--spacing-2); }
  /* Счётчик стоит прямо на небе, без рамки */
  .countdown { padding: 0; border: 0; background: none; box-shadow: none; color: var(--sky-ink); }
  .countdown__value { font-size: 6rem; line-height: 0.82; text-shadow: 0 0 2.5rem rgb(255 111 176 / 0.55); }
  .countdown__text { font-size: var(--text-2xl); margin-top: var(--spacing-2); }
  .countdown__meta { color: var(--color-text-muted); }
}

/* ---- Хаб темы, страницы, поиск ------------------------------------------- */
.tally__bar { border-radius: var(--radius-full); overflow: hidden; }
.search__input { border-width: 1px; border-radius: var(--radius-full); padding-inline: var(--spacing-5); }
.search__input:focus-visible { border-color: var(--color-accent); }

/* ---- Подвал --------------------------------------------------------------- */
.site-footer { border-top: 0; background: var(--color-surface-sunken); }
.site-footer::before {
  content: ""; display: block; height: 2px; margin-top: calc(var(--spacing-8) * -1); margin-bottom: var(--spacing-8);
  background: linear-gradient(90deg, transparent 10%, #FF9E7A 50%, var(--color-accent));
}
.disclaimer { border-color: var(--color-border); border-radius: var(--radius-lg); }
.disclaimer__tag { border-radius: var(--radius-full); padding-inline: 0.75em; }

/* ---- Печать: тёмная тема на бумаге не читается — чёрное на белом ---------- */
@media print {
  html:root[data-design="vice"] {
    color-scheme: light;
    --color-bg: #fff; --color-surface: #fff; --color-surface-sunken: #fff;
    --color-text: #000; --color-text-muted: #444; --sky-ink: #000;
    --color-border: #bbb; --color-border-strong: #666; --color-rule: #000;
    --color-accent: #000; --color-accent-contrast: #fff;
    --color-neon: #fff; --color-neon-contrast: #000;
    --color-status-confirmed: #1F6B45; --color-status-partial: #7A4A00; --color-status-unconfirmed: #444;
    --color-status-confirmed-fill: #1F6B45; --color-status-partial-fill: #7A4A00; --color-status-unconfirmed-fill: #444;
    --color-status-confirmed-surface: #fff; --color-status-partial-surface: #fff; --color-status-unconfirmed-surface: #fff;
    --shadow-night: none;
  }
  html, body { background: #fff; }
  body::after, .hero::before, .hero::after, .site-footer::before { display: none; }
  .hero { padding-bottom: 0; }
  .answer, .qcard, .cite, .disclaimer, .wordmark__plate { box-shadow: none; }
  .answer, .answer__note, .qrow__note, .qcard__note, .cite, .cite__n, .source__n { border: 1px solid var(--color-border-strong); }
  .gauge::before { box-shadow: none; }
  .countdown__value { text-shadow: none; }
}