/* Шрифты: Unbounded и Onest, SIL OFL 1.1 (лицензии в fonts/OFL-*.txt) */
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url(/fonts/unbounded-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: "Unbounded"; font-weight: 500; font-display: swap; src: url(/fonts/unbounded-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+2212; }
@font-face { font-family: "Unbounded"; font-weight: 600; font-display: swap; src: url(/fonts/unbounded-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: "Unbounded"; font-weight: 600; font-display: swap; src: url(/fonts/unbounded-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+2212; }
@font-face { font-family: "Onest"; 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-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+2212; }
@font-face { font-family: "Onest"; 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-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+2212; }
@font-face { font-family: "Onest"; 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-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+2212; }

/* Токены: docs/design/TOKENS.md */
:root {
  --bg-void: #07080d;
  --bg-deep: #0b0d16;
  --surface-field: #0e1120;
  --surface-1: #121524;
  --surface-2: #191d30;
  --surface-3: #22273d;
  --line-hair: #2a3048;
  --line-strong: #3d4563;
  --line-frame: #636c8f;
  --text-1: #eef1ff;
  --text-2: #aab1cc;
  --text-3: #858da9;
  --text-on-accent: #0b0d16;
  --accent-firefly: #d7ff4f;
  --accent-echo: #ff5c93;
  --nebula-teal: #0f2a2e;
  --nebula-wine: #2a1424;
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;
  --ph-display: 600 40px/1.0 var(--font-display);
  --ph-title: 500 24px/1.15 var(--font-display);
  --ph-h2: 500 20px/1.2 var(--font-display);
  --ph-body: 400 17px/1.4 var(--font-text);
  --ph-button: 600 17px/1.0 var(--font-text);
  --ph-label: 600 15px/1.2 var(--font-text);
  --ph-caption: 500 13px/1.3 var(--font-text);
  --gutter: 20px;
  --tap-min: 48px;
  --safe-top: max(env(safe-area-inset-top), 12px);
  --safe-bottom: max(env(safe-area-inset-bottom), 12px);
  --radius-field: 4px;
  --radius-panel: 16px;
  --radius-chip: 9999px;
  --button-h: 56px;
  --field-size: min(350px, calc(100vw - 40px));
  --dot-size: 44px;
  --focus-ring: 0 0 0 3px var(--bg-deep), 0 0 0 6px var(--accent-firefly);
  --edge-highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --glow-button-pressed: 0 0 12px rgb(215 255 79 / 0.3);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-medium: 400ms;
  --press-scale: 0.97;
  --enter-shift: 12px;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 200ms;
    --dur-medium: 200ms;
    --press-scale: 1;
    --enter-shift: 0px;
  }
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg-void); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--safe-top) var(--gutter) var(--safe-bottom);
  color: var(--text-1);
  font: var(--ph-body);
  -webkit-tap-highlight-color: transparent;
  /* туманность и звёзды без анимации (DESIGN.md 9.2) */
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(238 241 255 / 0.55), transparent),
    radial-gradient(1px 1px at 78% 9%, rgb(238 241 255 / 0.45), transparent),
    radial-gradient(1.5px 1.5px at 64% 34%, rgb(238 241 255 / 0.5), transparent),
    radial-gradient(1px 1px at 31% 52%, rgb(238 241 255 / 0.35), transparent),
    radial-gradient(1px 1px at 88% 61%, rgb(238 241 255 / 0.4), transparent),
    radial-gradient(1.5px 1.5px at 22% 83%, rgb(238 241 255 / 0.45), transparent),
    radial-gradient(1px 1px at 57% 92%, rgb(238 241 255 / 0.35), transparent),
    radial-gradient(120% 60% at 0% 0%, rgb(15 42 46 / 0.9), transparent 60%),
    radial-gradient(110% 60% at 100% 100%, rgb(42 20 36 / 0.85), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* типографика */
.display { font: var(--ph-display); font-variant-numeric: tabular-nums; }
.ph-title { font: var(--ph-title); text-wrap: balance; }
.ph-h2 { font: var(--ph-h2); text-wrap: balance; }
.body-lg { font: var(--ph-body); text-wrap: pretty; }
.label { font: var(--ph-label); color: var(--text-2); }
.caption { font: var(--ph-caption); color: var(--text-3); }
.muted { color: var(--text-2); }
.center { text-align: center; }
.firefly { color: var(--accent-firefly); }
.echo-word, .error, .hint-echo { color: var(--accent-echo); }
.error { font: var(--ph-label); min-height: 18px; }

/* шапка 40 px */
#top { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 8px; font: var(--ph-label); }
#who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ring { position: relative; width: 40px; height: 40px; flex: none; }
#ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
#ring circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: var(--line-hair); }
#ring-arc {
  stroke: var(--accent-firefly);
  stroke-dasharray: var(--ring-len);
  filter: drop-shadow(0 0 4px rgb(215 255 79 / 0.4));
}
#timer {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.warn #ring-arc { stroke: var(--accent-echo); filter: drop-shadow(0 0 4px rgb(255 92 147 / 0.4)); }
.warn #timer { color: var(--accent-echo); }

/* экраны */
main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 430px; margin: 0 auto; transition: opacity var(--dur-base) var(--ease-out); }
main.dim { opacity: 0.6; }
section { flex: 1; display: flex; flex-direction: column; gap: 12px; animation: enter var(--dur-medium) var(--ease-out) both; }
@keyframes enter { from { opacity: 0; transform: translateY(var(--enter-shift)); } }
.actions { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* кнопки */
button { cursor: pointer; touch-action: manipulation; }
.primary, .secondary {
  width: 100%; height: var(--button-h); border: 0; border-radius: var(--radius-panel);
  font: var(--ph-button);
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.primary { background: var(--accent-firefly); color: var(--text-on-accent); }
.primary:active:not(:disabled) { transform: scale(var(--press-scale)); box-shadow: var(--glow-button-pressed); }
.secondary { background: var(--surface-2); color: var(--text-1); box-shadow: var(--edge-highlight); }
.secondary:active:not(:disabled) { transform: scale(var(--press-scale)); background: var(--surface-3); }
.primary:disabled, .secondary:disabled { background: var(--surface-1); color: var(--text-3); cursor: default; }
.text-btn {
  min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 8px; border: 0; border-radius: var(--radius-panel);
  background: none; color: var(--accent-firefly); font: var(--ph-label);
}

/* вход */
.logo { font: 600 32px/1 var(--font-display); letter-spacing: -0.01em; margin: 8px 0 40px; }
.logo-o { color: var(--accent-firefly); text-shadow: 0 0 20px rgb(215 255 79 / 0.5); }
#join-form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
#join-form .label:not(:first-child) { margin-top: 12px; }
.code-box { position: relative; width: max-content; }
.code-cells { display: flex; gap: 10px; }
.code-cells span {
  width: 56px; height: 64px; display: grid; place-items: center;
  background: var(--surface-1); border: 2px solid var(--line-frame); border-radius: var(--radius-field);
  font: 600 32px/1 var(--font-display); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.code-cells span.current { border-color: var(--accent-firefly); }
#code {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0;
  font-size: 16px; caret-color: transparent; color: transparent; background: transparent;
}
#code:focus-visible { box-shadow: none; }
.text-input {
  width: 100%; height: 56px; padding: 0 16px; font: var(--ph-body); font-size: 18px;
  background: var(--surface-1); border: 2px solid var(--line-frame); border-radius: var(--radius-panel);
}
.text-input:focus-visible { border-color: var(--accent-firefly); box-shadow: none; }
.shake { animation: shake var(--dur-base) var(--ease-inout); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* персонаж и значки */
.char {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size);
}
.char img { width: 100%; height: 100%; display: block; }
.char.fallback img { display: none; }
.char.fallback::before {
  content: attr(data-initial);
  width: 64%; height: 64%; border-radius: 50%; display: grid; place-items: center;
  border: max(2px, calc(var(--size) * 0.05)) solid var(--c);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 22%, transparent));
  box-shadow: 0 0 calc(var(--size) * 0.15) color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--text-1); font: 600 calc(var(--size) * 0.26)/1 var(--font-display);
}
.badge {
  display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size);
  color: var(--c); font-size: calc(var(--size) * 0.7); line-height: 1;
}
.hero { display: grid; place-items: center; min-height: 216px; margin-top: 8px; }
.hero-sm { min-height: 176px; margin-top: 48px; }
.hero .char { animation: idle 4s var(--ease-inout) infinite; }
@keyframes idle { 50% { transform: translateY(-6px); } }

/* выбор персонажа */
.row-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.panel { background: var(--surface-1); border-radius: var(--radius-panel); box-shadow: var(--edge-highlight); }
.preview { display: flex; align-items: center; gap: 12px; height: 180px; padding: 16px; }
.preview .muted { font: var(--ph-body); color: var(--text-2); margin-top: 4px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick-cell, .suspect-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 96px; padding: 4px; border: 2px solid transparent; border-radius: var(--radius-panel);
  background: var(--surface-1); box-shadow: var(--edge-highlight);
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pick-cell .caption, .suspect-cell .label { color: var(--text-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-cell:active:not([aria-disabled="true"]), .suspect-cell:active:not(:disabled) { transform: scale(var(--press-scale)); background: var(--surface-3); }
.pick-cell[aria-pressed="true"] { border-color: var(--accent-firefly); background: var(--surface-2); }
.pick-cell[aria-disabled="true"] { cursor: default; }
.pick-cell[aria-disabled="true"] .char { opacity: 0.4; }
.pick-cell[aria-disabled="true"] .caption { color: var(--text-3); }
#pick-hint { min-height: 17px; }

/* лобби */
.avatars { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.avatar { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 56px; }
.avatar .caption { color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* метка */
.timebar { height: 4px; border-radius: 2px; background: var(--line-hair); overflow: hidden; }
#pin-bar { display: block; height: 100%; background: var(--accent-firefly); transform-origin: left; }
.warn #pin-bar { background: var(--accent-echo); }
.sweep { animation: sweep var(--secs, 1s) linear both; }
#pin-bar.sweep { animation-name: bar; }
@keyframes sweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--ring-len); } }
@keyframes bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.is-echo #ax-top, .is-echo #ax-bottom { color: var(--accent-echo); font: var(--ph-h2); }
.is-echo #pin-note { color: var(--accent-echo); }
#field {
  --x: 50%; --y: 50%; --dot: var(--accent-firefly);
  position: relative; width: var(--field-size); aspect-ratio: 1; margin: 0 auto;
  touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden;
  background-color: rgb(14 17 32 / 0.94);
  border: 2px solid var(--line-frame); border-radius: var(--radius-field);
  background-image:
    linear-gradient(var(--line-strong), var(--line-strong)),
    linear-gradient(var(--line-strong), var(--line-strong)),
    linear-gradient(90deg, var(--line-hair) 1px, transparent 1px),
    linear-gradient(var(--line-hair) 1px, transparent 1px);
  background-size: 2px 100%, 100% 2px, 25% 25%, 25% 25%;
  background-position: 50% 0, 0 50%, -1px 0, 0 -1px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
#field[data-locked="true"] #dot { box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px var(--dot); }
.chip {
  position: absolute; top: 50%; translate: 0 -50%; max-width: 42%; padding: 6px 10px;
  background: rgb(25 29 48 / 0.85); border-radius: var(--radius-chip);
  font: var(--ph-label); pointer-events: none; overflow-wrap: anywhere;
}
.chip-left { left: 6px; } .chip-right { right: 6px; text-align: right; }
.guide { position: absolute; background: var(--line-frame); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.guide-v { top: 0; bottom: 0; width: 1px; left: var(--x); }
.guide-h { left: 0; right: 0; height: 1px; top: var(--y); }
#field[data-drag="true"] .guide { opacity: 0.8; }
#dot {
  position: absolute; left: var(--x); top: var(--y); width: var(--dot-size); height: var(--dot-size);
  margin: calc(var(--dot-size) / -2) 0 0 calc(var(--dot-size) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, var(--dot) 30% 62%, color-mix(in srgb, var(--dot) 30%, transparent) 64%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--dot) 55%, transparent);
}

/* подозрение */
.suspect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.suspect-cell { height: 120px; gap: 6px; }
.suspect-cell:disabled { opacity: 0.4; cursor: default; }
.suspect-cell[aria-pressed="true"] { border-color: var(--accent-echo); background: var(--surface-2); }

/* итог */
.reveal-head { display: flex; gap: 8px; min-height: 96px; margin-top: 24px; }
#s-reveal .display { margin-top: 8px; }
#s-reveal .body-lg { font: var(--ph-h2); }
#final-place { margin-top: 32px; }

/* дАкажи: текст игрока (до 100 знаков, любой язык и направление письма) */
.stmt {
  padding: 16px; font: var(--ph-h2); text-wrap: pretty;
  overflow-wrap: anywhere; unicode-bidi: plaintext;
}
.stmt-input {
  height: auto; min-height: 112px; padding: 12px 16px; resize: none; display: block;
  line-height: 1.4; unicode-bidi: plaintext; caret-color: var(--accent-firefly);
}
.text-input[aria-invalid="true"] { border-color: var(--accent-echo); }
#s-write .row-head { min-height: var(--tap-min); margin-bottom: -8px; }
.field-foot { display: flex; align-items: flex-start; gap: 12px; margin-top: -4px; }
.field-foot .error { flex: 1; min-height: 0; }
.count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.count.low { color: var(--text-2); }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  min-height: var(--tap-min); padding: 0 8px; border: 2px solid transparent; border-radius: var(--radius-panel);
  background: var(--surface-1); box-shadow: var(--edge-highlight); font: var(--ph-button); color: var(--text-1);
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.choice:active { transform: scale(var(--press-scale)); background: var(--surface-3); }
.choice[aria-pressed="true"], .guess-cell[aria-pressed="true"] { border-color: var(--accent-firefly); background: var(--surface-2); }
.choice-big { min-height: 112px; font: var(--ph-title); }
#s-guess .suspect-grid { margin-top: 0; }
.author-row { display: flex; align-items: center; gap: 8px; font: var(--ph-label); color: var(--text-2); }
.hero-xs { min-height: 168px; margin-top: 16px; }
#mine-count { font-variant-numeric: tabular-nums; }
.result-word { margin-top: 32px; color: var(--accent-firefly); }
.result-word.lie { color: var(--accent-echo); }
#result-score { margin-top: 16px; }
.skip-btn { align-self: center; margin-top: 8px; color: var(--text-2); }
.text-btn[aria-disabled="true"] { color: var(--text-3); cursor: default; }
[tabindex="-1"]:focus-visible { box-shadow: none; }

/* суперхозяин: раскладка экранов, вид режима придёт позже */
#sh-edit, #sh-done { display: contents; }
.sh-stack { display: grid; gap: 8px; }
.sh-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 12px 16px;
  text-align: start; font: var(--ph-body); overflow-wrap: anywhere; unicode-bidi: plaintext;
}
.sh-card .label { color: var(--text-2); }
.sh-big { min-height: 112px; font: var(--ph-h2); }
.sh-big > .label { font: var(--ph-title); color: var(--accent-firefly); }
.panel.sh-card { border: 2px solid transparent; }
.panel.sh-card[data-win="true"] { border-color: var(--accent-firefly); }
#show-power { margin-top: 24px; }

/* сквозные состояния */
#netbar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  margin: 0 calc(var(--gutter) * -1) 8px; padding: 10px var(--gutter);
  background: var(--surface-2); font: var(--ph-label);
}
#netbar svg { width: 24px; height: 24px; fill: none; stroke: var(--text-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#hostgone {
  position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: var(--gutter); background: rgb(11 13 22 / 0.94);
}
#hostgone-secs { font-variant-numeric: tabular-nums; }
#toast {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--safe-bottom) + 72px); z-index: 5;
  padding: 12px 16px; border-radius: var(--radius-panel); background: var(--surface-2); box-shadow: var(--edge-highlight);
  color: var(--accent-echo); font: var(--ph-label);
}
.skel { background: var(--surface-1); border-radius: var(--radius-panel); }
.skel-title { height: 24px; width: 60%; margin-top: 16px; }
.skel-hero { height: 200px; margin-top: 24px; }
.skel-line { height: 56px; margin-top: auto; }

/* пульс цифры таймера в последние 5 с */
.pulse { animation: pulse 300ms var(--ease-out); }
@keyframes pulse { 40% { transform: scale(1.08); } }

/* «Меньше движения» (DESIGN.md 5.6): только смена прозрачности и цвета */
@media (prefers-reduced-motion: reduce) {
  .hero .char, .spin, .shake, .pulse { animation: none; }
  .primary, .secondary, .pick-cell, .suspect-cell, .choice { transition-property: background-color, box-shadow, border-color; }
}
#end-text { margin-top: 30vh; }

/* ---------- «дАкажи» (TOKENS.md «дАкажи»): светлое небо (правда), огонь (ложь) по краю, мультяшные формы ----------
   Тема живёт под body[data-mode="dakazhi"] (core.ts applyMode). «Ось» и нейтральный вид остаются на токенах выше.
   Текст на фоне это чернила INK (небо 9.6, огонь 5.5); INK_3 и синие акценты на небе не проходят 4.5, поэтому
   тихий текст на фоне берёт INK_2, а синий и красный идут текстом только на белых панелях. Свечения нет. */
.mode-mark { display: none; }
html[data-mode="dakazhi"] { background: #c6ecff; color-scheme: light; }
body[data-mode="dakazhi"] {
  --dk-sky: #8fd3ff;
  --dk-sky-low: #c6ecff;
  --dk-fire: #ff6b35;
  --dk-navy: #2b2b6b;
  --dk-shadow: rgb(43 43 107 / 0.28);
  --dk-gold: #ffd43b;
  --dk-cream: #fff3bf;
  --dk-truth: #1864ab;
  --dk-lie: #c92a2a;
  --dk-lie-ink: #a61e1e;
  --dk-lie-bright: #ff5a4a;
  --dk-quiet: #5c5f8f;
  --dk-fire-h: min(36vh, 300px);
  --dk-fire-w: calc(var(--dk-fire-h) * 0.268); /* ширина огня у низа экрана: наклон 105° */
  --dk-pop: 0 4px 0 var(--dk-navy);
  --dk-pop-in: 0 1px 0 var(--dk-navy);
  --dk-lift: 0 5px 0 var(--dk-shadow);
  --dk-press: translateY(calc((1 - var(--press-scale)) * 100px));
  --dk-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23a9d4f5' transform='translate(0 5)'%3E%3Ccircle cx='34' cy='34' r='18'/%3E%3Ccircle cx='60' cy='24' r='22'/%3E%3Ccircle cx='86' cy='32' r='17'/%3E%3Crect x='14' y='30' width='92' height='22' rx='11'/%3E%3C/g%3E%3Cg fill='%23fbfdff'%3E%3Ccircle cx='34' cy='34' r='18'/%3E%3Ccircle cx='60' cy='24' r='22'/%3E%3Ccircle cx='86' cy='32' r='17'/%3E%3Crect x='14' y='30' width='92' height='22' rx='11'/%3E%3C/g%3E%3C/svg%3E");
  --dk-flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd43b'/%3E%3Cstop offset='.55' stop-color='%23ff8a1f'/%3E%3Cstop offset='1' stop-color='%23c92a2a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M30 80C30 58 41 42 47 30C53 42 64 58 64 80Z'/%3E%3Cpath fill='url(%23f)' d='M56 80C56 58 72 42 78 4C84 42 100 58 100 80Z'/%3E%3Cpath fill='%23fff3bf' d='M68 80C68 66 76 58 79 46C82 58 90 66 90 80Z'/%3E%3C/svg%3E");
  --text-1: #1f1d4f;
  --text-2: #46467a;
  --text-3: #46467a;
  --text-on-accent: #1f1d4f;
  --surface-1: #fbfdff;
  --surface-2: #ffffff;
  --surface-3: #dcedfb;
  --line-hair: #dcedfb;
  --line-frame: var(--dk-quiet);
  --accent-firefly: var(--dk-gold);
  --accent-echo: var(--dk-lie-ink);
  --radius-panel: 22px;
  --focus-ring: 0 0 0 3px #fbfdff, 0 0 0 6px var(--dk-navy);
  --edge-highlight: var(--dk-lift);
  --glow-button-pressed: var(--dk-pop-in);
  background: none;
}
/* фон: небо с облаками, по правому краю огонь за косой чертой 105° (как на ТВ), пламя внизу */
body[data-mode="dakazhi"]::before, body[data-mode="dakazhi"]::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
}
body[data-mode="dakazhi"]::before {
  inset: 0;
  background:
    var(--dk-cloud) no-repeat -38px 19% / 150px auto,
    var(--dk-cloud) no-repeat calc(100% + 52px) 31% / 136px auto,
    var(--dk-cloud) no-repeat -30px 63% / 120px auto,
    linear-gradient(var(--dk-sky), var(--dk-sky-low) 80%);
}
body[data-mode="dakazhi"]::after {
  right: 0; bottom: 0; width: var(--dk-fire-w); height: var(--dk-fire-h);
  background:
    var(--dk-flames) no-repeat right bottom / 100% 24%,
    linear-gradient(to bottom right, transparent calc(50% - 2px), var(--dk-navy) calc(50% - 2px) calc(50% + 3px), var(--dk-fire) calc(50% + 3px));
}
/* низкий экран (открыта клавиатура): огонь отступает в угол и не заходит под строки над кнопкой */
@media (max-height: 600px) { body[data-mode="dakazhi"] { --dk-fire-h: 22vh; } }
body[data-mode="dakazhi"] ::selection { background: var(--dk-gold); color: var(--text-1); }

/* надпись режима в лобби: белая наклейка в тёмно-синем контуре, золотая «А» с нимбом */
body[data-mode="dakazhi"] .mark-dakazhi {
  display: block; align-self: center; margin-top: 10px;
  font: 600 30px/1 var(--font-display); letter-spacing: 0.01em; color: #fff;
  -webkit-text-stroke: 7px var(--dk-navy); paint-order: stroke fill; text-shadow: 0 3px 0 var(--dk-navy);
}
.mark-a { position: relative; display: inline-block; color: var(--dk-gold); font-size: 1.3em; }
.mark-a::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: -0.26em; height: 0.16em;
  border: 4px solid var(--dk-gold); border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--dk-navy), inset 0 0 0 2.5px var(--dk-navy), 0 3px 0 2.5px var(--dk-navy);
}

/* наклейки: крупные слова прямо на фоне (очки, место, «Правда» и «Ложь») */
body[data-mode="dakazhi"] #final-place, body[data-mode="dakazhi"] :is(.firefly.display, .firefly.ph-title, .result-word) {
  color: #fff; letter-spacing: 0.01em;
  -webkit-text-stroke: 0.2em var(--dk-navy); paint-order: stroke fill; text-shadow: 0 0.1em 0 var(--dk-navy);
}
body[data-mode="dakazhi"] :is(.firefly.display, .firefly.ph-title, .result-word) { color: var(--dk-gold); }
body[data-mode="dakazhi"] .result-word.lie { color: var(--dk-lie-bright); }
body[data-mode="dakazhi"] #stmt-status { color: var(--text-1); }

/* персонаж стоит на облаке */
body[data-mode="dakazhi"] .hero { background: var(--dk-cloud) no-repeat 50% 100% / 220px auto; }
body[data-mode="dakazhi"] .hero-xs { background-size: 180px auto; }

/* шапка: белый циферблат как на ТВ */
body[data-mode="dakazhi"] #ring { border-radius: 50%; background: var(--surface-1); box-shadow: 0 3px 0 var(--dk-shadow); }
body[data-mode="dakazhi"] .ring-bg { stroke: var(--surface-3); }
body[data-mode="dakazhi"] #ring-arc { stroke: var(--dk-truth); filter: none; }
body[data-mode="dakazhi"].warn #ring-arc { stroke: var(--dk-lie); filter: none; }
body[data-mode="dakazhi"].warn #timer { color: var(--dk-lie); }

/* кнопки: толстый контур и «ступенька» снизу, нажатие вдавливает (при «меньше движения» только тень) */
body[data-mode="dakazhi"] :is(.primary, .secondary, .choice) {
  border: 3px solid var(--dk-navy); border-radius: 20px; box-shadow: var(--dk-pop);
}
body[data-mode="dakazhi"] .secondary, body[data-mode="dakazhi"] .choice { background: var(--surface-2); }
body[data-mode="dakazhi"] :is(.primary, .secondary):active:not(:disabled), body[data-mode="dakazhi"] .choice:active {
  transform: var(--dk-press); box-shadow: var(--dk-pop-in);
}
body[data-mode="dakazhi"] .secondary:active:not(:disabled), body[data-mode="dakazhi"] .choice:active { background: var(--surface-3); }
body[data-mode="dakazhi"] :is(.primary, .secondary):disabled {
  background: var(--surface-3); color: var(--dk-quiet); border-color: rgb(43 43 107 / 0.3); box-shadow: none;
}
body[data-mode="dakazhi"] .choice[aria-pressed="true"] { background: var(--dk-gold); border-color: var(--dk-navy); }
body[data-mode="dakazhi"] :is(#truth-no, #verdict-no)[aria-pressed="true"] { background: var(--dk-fire); }
body[data-mode="dakazhi"] .text-btn {
  min-height: 44px; padding: 0 16px; border: 2.5px solid var(--dk-navy); border-radius: var(--radius-chip);
  background: var(--surface-2); color: var(--text-1); box-shadow: 0 3px 0 var(--dk-navy);
}
body[data-mode="dakazhi"] .text-btn:active:not([aria-disabled="true"]) { transform: var(--dk-press); box-shadow: var(--dk-pop-in); }
body[data-mode="dakazhi"] .text-btn[aria-disabled="true"] { color: var(--dk-quiet); border-color: rgb(43 43 107 / 0.3); box-shadow: none; }
body[data-mode="dakazhi"] :is(.primary, .secondary, .choice, .text-btn):focus-visible { box-shadow: var(--focus-ring); }

/* карточки: белые, круглые, мягкая тень вниз; выбранная получает контур и сливочный цвет */
body[data-mode="dakazhi"] .panel { background: var(--surface-1); border-radius: 24px; box-shadow: 0 6px 0 var(--dk-shadow); }
body[data-mode="dakazhi"] :is(.pick-cell, .suspect-cell) { border-width: 3px; border-radius: 20px; background: var(--surface-1); }
body[data-mode="dakazhi"] :is(.pick-cell, .suspect-cell)[aria-pressed="true"] { border-color: var(--dk-navy); background: var(--dk-cream); }
body[data-mode="dakazhi"] .pick-cell[aria-disabled="true"] { background: var(--surface-3); box-shadow: none; }

/* поля ввода */
body[data-mode="dakazhi"] .text-input { border: 3px solid var(--dk-quiet); border-radius: 20px; background: var(--surface-2); caret-color: var(--dk-navy); }
body[data-mode="dakazhi"] .text-input:focus-visible { border-color: var(--dk-navy); box-shadow: var(--focus-ring); }
body[data-mode="dakazhi"] .text-input[aria-invalid="true"] { border-color: var(--dk-lie); }
body[data-mode="dakazhi"] .count, body[data-mode="dakazhi"] .count.low { color: var(--text-1); }
body[data-mode="dakazhi"] .count.low { font-weight: 700; }

/* кнопки внизу и чип пропуска стоят на небе: огонь и его черта остаются свободными */
body[data-mode="dakazhi"] .actions { padding-right: calc(var(--dk-fire-w) * 0.5 + 8px); }
body[data-mode="dakazhi"] .skip-btn {
  align-self: flex-start; max-width: calc(100% - var(--dk-fire-w) * 0.5 - 8px); padding-block: 6px; text-align: left; line-height: 1.2;
}

/* сквозные состояния */
body[data-mode="dakazhi"] #netbar { background: var(--surface-2); box-shadow: var(--dk-lift); }
body[data-mode="dakazhi"] #hostgone { background: rgb(198 236 255 / 0.96); }
body[data-mode="dakazhi"] #toast { border: 3px solid var(--dk-navy); }

/* ---------- «суперхозяин» (TOKENS.md «суперхозяин», вариант A «Студия»): розовая студия телемагазина ----------
   Родня «дАкажи»: те же наклейки, тёмно-синий контур, белые панели и «ступенька» под кнопками. На розовом
   проходят только чернила INK (студия 6.0, луч 6.9), поэтому весь текст на фоне идёт INK, иерархию держат
   размер и вес. Пола, как на ТВ, на телефоне нет: подписи над кнопками не встают на тёмный розовый. Свечения нет. */
html[data-mode="superkhozyain"] { background: #ff6fa8; color-scheme: light; }
body[data-mode="superkhozyain"] {
  --sh-studio: #ff6fa8;
  --sh-ray: #ff86b6;
  --sh-navy: #2b2b6b;
  --sh-shadow: rgb(43 43 107 / 0.28);
  --sh-gold: #ffd43b;
  --sh-cream: #fff3bf;
  --sh-free: #ffe3ee;
  --sh-quiet: #5c5f8f;
  --sh-raspberry: #c2255c;
  --sh-error: #6b0d33;
  --sh-pop: 0 4px 0 var(--sh-navy);
  --sh-pop-in: 0 1px 0 var(--sh-navy);
  --sh-lift: 0 5px 0 var(--sh-shadow);
  --sh-press: translateY(calc((1 - var(--press-scale)) * 100px));
  --sh-podium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 92'%3E%3Cpath d='M6 30v32q104 36 208 0V30' fill='%232b2b6b'/%3E%3Cellipse cx='110' cy='30' rx='104' ry='26' fill='%23ffd43b' stroke='%232b2b6b' stroke-width='5'/%3E%3Cellipse cx='110' cy='30' rx='70' ry='15' fill='none' stroke='%232b2b6b' stroke-width='3' opacity='.35'/%3E%3C/svg%3E");
  --text-1: #1f1d4f;
  --text-2: #1f1d4f;
  --text-3: #1f1d4f;
  --text-on-accent: #1f1d4f;
  --surface-1: #fbfdff;
  --surface-2: #ffffff;
  --surface-3: var(--sh-free);
  --line-hair: var(--sh-free);
  --line-frame: var(--sh-quiet);
  --accent-firefly: var(--sh-gold);
  --accent-echo: var(--sh-error);
  --radius-panel: 22px;
  --focus-ring: 0 0 0 3px #fbfdff, 0 0 0 6px var(--sh-navy);
  --edge-highlight: var(--sh-lift);
  --glow-button-pressed: var(--sh-pop-in);
  background: none;
}
/* фон: лучи студии из точки над героем (на ТВ они ещё и медленно вращаются) */
body[data-mode="superkhozyain"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 30%, var(--sh-studio) 0deg 7.5deg, var(--sh-ray) 7.5deg 15deg);
}
body[data-mode="superkhozyain"] ::selection { background: var(--sh-gold); color: var(--text-1); }

/* надпись режима в лобби: белая наклейка в контуре и золотая звезда со звёздочкой, как на ТВ */
body[data-mode="superkhozyain"] .mark-super {
  display: block; align-self: center; margin-top: 10px; white-space: nowrap;
  font: 600 28px/1 var(--font-display); letter-spacing: 0.01em; color: #fff;
  -webkit-text-stroke: 7px var(--sh-navy); paint-order: stroke fill; text-shadow: 0 3px 0 var(--sh-navy);
}
.mark-tagline { display: none; }
body[data-mode="superkhozyain"] .mark-tagline { display: block; align-self: center; margin: 4px 0 0; font: 500 14px/1.2 var(--font-text); color: var(--text-1); }
.mark-star { width: 34px; height: 34px; margin: -14px 0 0 1px; vertical-align: top; overflow: visible; filter: drop-shadow(0 3px 0 var(--sh-navy)); }
.mark-star polygon { fill: var(--sh-gold); stroke: var(--sh-navy); stroke-width: 7; stroke-linejoin: round; }
.mark-star path { fill: none; stroke: var(--sh-navy); stroke-width: 8; stroke-linecap: round; }

/* крупные слова на фоне (очки, место) это наклейки; подписи с акцентом на фоне идут чернилами */
body[data-mode="superkhozyain"] .firefly { color: var(--text-1); font-weight: 700; }
body[data-mode="superkhozyain"] #final-place, body[data-mode="superkhozyain"] :is(.firefly.display, .firefly.ph-title) {
  color: var(--sh-gold); letter-spacing: 0.01em;
  -webkit-text-stroke: 0.2em var(--sh-navy); paint-order: stroke fill; text-shadow: 0 0.1em 0 var(--sh-navy);
}
body[data-mode="superkhozyain"] #final-place { color: #fff; }

/* персонаж стоит на золотой подставке телемагазина */
body[data-mode="superkhozyain"] .hero { background: var(--sh-podium) no-repeat 50% 100% / 200px auto; }
body[data-mode="superkhozyain"] .hero-xs { background-size: 170px auto; }

/* шапка: белый циферблат, как на ТВ */
body[data-mode="superkhozyain"] #ring { border-radius: 50%; background: var(--surface-1); box-shadow: 0 3px 0 var(--sh-shadow); }
body[data-mode="superkhozyain"] .ring-bg { stroke: var(--surface-3); }
body[data-mode="superkhozyain"] #ring-arc { stroke: var(--sh-navy); filter: none; }
body[data-mode="superkhozyain"].warn #ring-arc { stroke: var(--sh-raspberry); filter: none; }
body[data-mode="superkhozyain"].warn #timer { color: var(--sh-raspberry); }

/* кнопки: толстый контур и «ступенька», нажатие вдавливает (при «меньше движения» только тень) */
body[data-mode="superkhozyain"] :is(.primary, .secondary, .choice) {
  border: 3px solid var(--sh-navy); border-radius: 20px; box-shadow: var(--sh-pop);
}
body[data-mode="superkhozyain"] .secondary, body[data-mode="superkhozyain"] .choice { background: var(--surface-2); }
body[data-mode="superkhozyain"] :is(.primary, .secondary):active:not(:disabled), body[data-mode="superkhozyain"] .choice:active {
  transform: var(--sh-press); box-shadow: var(--sh-pop-in);
}
body[data-mode="superkhozyain"] .secondary:active:not(:disabled), body[data-mode="superkhozyain"] .choice:active { background: var(--surface-3); }
body[data-mode="superkhozyain"] :is(.primary, .secondary):disabled {
  background: var(--surface-3); color: var(--sh-quiet); border-color: rgb(43 43 107 / 0.3); box-shadow: none;
}
body[data-mode="superkhozyain"] .choice[aria-pressed="true"] { background: var(--sh-gold); border-color: var(--sh-navy); }
body[data-mode="superkhozyain"] .text-btn {
  min-height: 44px; padding: 0 16px; border: 2.5px solid var(--sh-navy); border-radius: var(--radius-chip);
  background: var(--surface-2); color: var(--text-1); box-shadow: 0 3px 0 var(--sh-navy);
}
body[data-mode="superkhozyain"] .text-btn:active:not([aria-disabled="true"]) { transform: var(--sh-press); box-shadow: var(--sh-pop-in); }
body[data-mode="superkhozyain"] .text-btn[aria-disabled="true"] { color: var(--sh-quiet); border-color: rgb(43 43 107 / 0.3); box-shadow: none; }
body[data-mode="superkhozyain"] :is(.primary, .secondary, .choice, .text-btn):focus-visible { box-shadow: var(--focus-ring); }

/* сноски-кнопки голоса: звёздочки в золотом кружке слева от текста, как купоны на ТВ */
body[data-mode="superkhozyain"] .sh-big { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: start; }
body[data-mode="superkhozyain"] .sh-big > .label {
  display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--sh-navy); border-radius: 50%;
  background: var(--sh-gold); color: var(--sh-navy); font: 600 18px/1 var(--font-display); letter-spacing: -0.06em; padding-top: 7px;
}
body[data-mode="superkhozyain"] .sh-big[aria-pressed="true"] > .label { background: var(--surface-1); }

/* карточки: белые, круглые, мягкая тень вниз; победившая получает контур и сливочный цвет */
body[data-mode="superkhozyain"] .panel { background: var(--surface-1); border-radius: 24px; box-shadow: 0 6px 0 var(--sh-shadow); }
body[data-mode="superkhozyain"] .panel.sh-card[data-win="true"] { border-color: var(--sh-navy); background: var(--sh-cream); }
body[data-mode="superkhozyain"] :is(.pick-cell, .suspect-cell) { border-width: 3px; border-radius: 20px; background: var(--surface-1); }
body[data-mode="superkhozyain"] :is(.pick-cell, .suspect-cell)[aria-pressed="true"] { border-color: var(--sh-navy); background: var(--sh-cream); }
body[data-mode="superkhozyain"] .pick-cell[aria-disabled="true"] { background: var(--surface-3); box-shadow: none; }

/* поля ввода */
body[data-mode="superkhozyain"] .text-input { border: 3px solid var(--sh-quiet); border-radius: 20px; background: var(--surface-2); caret-color: var(--sh-navy); }
body[data-mode="superkhozyain"] .text-input:focus-visible { border-color: var(--sh-navy); box-shadow: var(--focus-ring); }
body[data-mode="superkhozyain"] .text-input[aria-invalid="true"] { border-color: var(--sh-error); }
body[data-mode="superkhozyain"] .count.low { font-weight: 700; }

/* сквозные состояния */
body[data-mode="superkhozyain"] #netbar { background: var(--surface-2); box-shadow: var(--sh-lift); }
body[data-mode="superkhozyain"] #hostgone { background: rgb(255 111 168 / 0.96); }
body[data-mode="superkhozyain"] #toast { border: 3px solid var(--sh-navy); }

/* без paint-order обводка съела бы заливку: контур убираем, остальное делает text-shadow */
@supports not (paint-order: stroke fill) {
  body:is([data-mode="dakazhi"], [data-mode="superkhozyain"]) :is(.mark-dakazhi, .mark-super, #final-place, .firefly.display, .firefly.ph-title, .result-word) { -webkit-text-stroke: 0; }
}