/* Горлышко — стили интерфейса (пакет P4). Ризограф-зин: плоская печать, надпечатка, растр, сдвиг регистра.
   Один файл на всю игру и страницу «Об игре». Классы с префиксом g-. Текст ≥ 14 px, контраст ≥ 4,5:1,
   цели ≥ 44 px. Без внешних ресурсов, кроме самохостного шрифта сайта. */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-subset.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ───────── токены (GDD §7) ───────── */
:root {
  color-scheme: light;
  --paper: #F2EDE4;
  --margin: #E6DFD3;
  --fiber: #D9D0C1;
  --sheet: #F7F2E9;
  --ink: #1A1A1A;
  --ink-2: #4D473F;
  --pink: #FF48B0;
  --blue: #0078BF;
  --yellow: #FFE800;
  --teal: #00838A;
  --orange: #FF7477;
  --fire: #FF4100;
  --gold: #E2A300;          /* то же золото «Лично я», что у холста (THEMES.*.gold); текст на нём #1A1A1A — 7,9:1 */
  --on-gold: #1A1A1A;
  --on-ink: #F2EDE4;
  --pink-ink: #B3006B;
  --blue-ink: #005A8F;
  --teal-ink: #00626A;
  --focus: #0057A0;
  --veil: rgba(242, 237, 228, 0.88);
  --veil-soft: rgba(242, 237, 228, 0.55);
  --shade: rgba(26, 26, 26, 0.16);
  --ink-blend: multiply;      /* надпечатка: днём краски перемножаются, ночью — screen */
  --band: #FFE800;            /* жёлтая плашка под подзаголовком; текст на ней #1A1A1A — 15:1 */
  --on-band: #1A1A1A;
  --mis: 3px;
  --r: 6px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #141217;
  --margin: #1B1920;
  --fiber: #2C2832;
  --sheet: #1C1A21;
  --ink: #EFE8DC;
  --ink-2: #BDB4A8;
  --gold: #E2A300;
  --on-gold: #1A1A1A;
  --on-ink: #141217;
  --pink-ink: #FF8ACB;
  --blue-ink: #6CC0F5;
  --teal-ink: #45C6CC;
  --focus: #7FC8FF;
  --veil: rgba(20, 18, 23, 0.9);
  --veil-soft: rgba(20, 18, 23, 0.55);
  --shade: rgba(0, 0, 0, 0.5);
  --ink-blend: screen;
  --band: #005A8F;
  --on-band: #F7F2E9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #141217;
    --margin: #1B1920;
    --fiber: #2C2832;
    --sheet: #1C1A21;
    --ink: #EFE8DC;
    --ink-2: #BDB4A8;
    --gold: #E2A300;
    --on-gold: #1A1A1A;
    --on-ink: #141217;
    --pink-ink: #FF8ACB;
    --blue-ink: #6CC0F5;
    --teal-ink: #45C6CC;
    --focus: #7FC8FF;
    --veil: rgba(20, 18, 23, 0.9);
    --veil-soft: rgba(20, 18, 23, 0.55);
    --shade: rgba(0, 0, 0, 0.5);
    --ink-blend: screen;
    --band: #005A8F;
    --on-band: #F7F2E9;
  }
}

/* ───────── основа ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, input, select, output { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, button[disabled] { cursor: default; opacity: 0.55; }
kbd {
  font: 700 14px/1.2 var(--font);
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--sheet);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* заголовки и окна получают фокус программно (диктор читает их), рамка им не нужна */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, [role="dialog"][tabindex="-1"]:focus { outline: none; }

a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.g-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.g-muted { color: var(--ink-2); font-size: 14px; margin: 6px 0; }
.g-center { text-align: center; }
.g-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-h3 {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.g-kicker {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.g-credit { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.g-noscript { max-width: 560px; margin: 48px auto; padding: 0 16px; font-size: 18px; }
.g-loading {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* ───────── страница игры ───────── */
.g-body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.g-app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--paper);
}
.g-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.g-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.g-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.g-ui .g-pop, .g-ui .g-pausebtn, .g-ui .g-pause, .g-ui .g-screen, .g-ui .g-modal { pointer-events: auto; }
.g-ui .g-sheet, .g-ui .g-dialog { -webkit-user-select: text; user-select: text; }
.g-ui .g-sheet button, .g-ui .g-dialog button { -webkit-user-select: none; user-select: none; }

/* ───────── кнопки ───────── */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--sheet);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--mis) var(--mis) 0 var(--fiber);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.g-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fiber); }
.g-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--fiber); }
.g-btn--primary {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--mis) var(--mis) 0 var(--pink);
}
.g-btn--primary:hover { box-shadow: 4px 4px 0 var(--pink); }
.g-btn--ghost { background: transparent; }
.g-btn--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.g-btn--quiet:hover { box-shadow: none; text-decoration-thickness: 2px; }
.g-btn--small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.g-btn--icon { width: 48px; padding: 0; font-size: 24px; }
.g-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--blue-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.g-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
.g-x:hover { background: var(--margin); }

/* ───────── иконки и глифы ───────── */
.g-icon { flex: none; display: inline-block; vertical-align: middle; }
.g-icon .i-st { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.g-icon .i-dash { stroke-dasharray: 8 9; stroke-width: 5; }
.g-icon .i-fi { fill: currentColor; }
.g-icon .i-pink { fill: var(--pink); stroke: var(--ink); stroke-width: 5; }
.g-icon .i-blue { fill: var(--blue); stroke: var(--ink); stroke-width: 5; }
.g-icon .i-teal { fill: var(--teal); stroke: var(--ink); stroke-width: 5; }
.g-icon .i-fire { fill: var(--fire); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.g-icon--yellow .i-fi { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; }

.g-glyph { flex: none; display: block; overflow: visible; }
.g-glyph-ink { fill: var(--ink); }
.g-glyph-mis { fill: var(--pink); opacity: 0.7; mix-blend-mode: multiply; }
:root[data-theme="night"] .g-glyph-mis { mix-blend-mode: screen; opacity: 0.55; }
.g-glyph-eye { fill: var(--paper); }

/* ───────── невидимые кнопки поверх холста ───────── */
.g-proxies { position: absolute; inset: 0; }
.g-proxy {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 1;
}
.g-proxy.is-rect { border-radius: 10px; }
/* плашки привычек на краю листа: единственная невидимая кнопка, которая ловит мышь и касание (подсказка) */
.g-proxy.g-proxy--habits { pointer-events: auto; cursor: help; border-radius: 4px; }
.g-proxy:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--veil-soft);
}
.g-tip {
  position: absolute;
  max-width: 240px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--sheet);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

/* ───────── эффекты: кольца удержания, призрак, линия канала ───────── */
.g-fx { position: absolute; inset: 0; pointer-events: none; }
.g-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-dragline { stroke: transparent; stroke-width: 0; }
.g-dragline.is-on { stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; }
.g-dragline--pink { stroke: var(--pink); }
.g-dragline--blue { stroke: var(--blue); }
.g-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pink);
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  opacity: 0.85;
}
.g-holdring { position: absolute; left: 0; top: 0; overflow: visible; }
.g-holdring-bg { fill: none; stroke: var(--veil-soft); stroke-width: 10; }
.g-holdring-fg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ───────── подсказки-иконки ───────── */
.g-hints { position: absolute; inset: 0; pointer-events: none; }
.g-hint {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--mis) var(--mis) 0 var(--yellow);
  animation: g-breathe 1.4s ease-in-out infinite;
}
.g-hint--legend {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 14px 8px 10px;
  border-radius: 14px;
}
.g-hint-row { display: inline-flex; align-items: center; gap: 8px; }
/* «почему горлышко стоит» и «клюв в стороне» — коротко, без дыхания */
.g-hint--neck { animation: none; font-weight: 700; box-shadow: var(--mis) var(--mis) 0 var(--fiber); }
@keyframes g-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ───────── баннер недели ───────── */
/* Оттиск-карточка: бумага с зерном и чёрной рамкой, под ней — второй прогон краской недели растром
   со сдвигом регистра (нечётные недели розовые, чётные синие — как штампы на холсте и номера на постере). */
.g-banner {
  --wk: var(--pink);
  --wk-text: var(--pink-ink);
  --wk-mis: rgba(255, 72, 176, 0.5);
  position: absolute;
  left: 50%;
  top: 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 24px 13px;
  color: var(--ink);
  text-align: center;
  transform: translateX(-50%) rotate(-2deg);
  isolation: isolate;
  pointer-events: none;
  animation: g-stamp-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.g-banner[data-ink="blue"] { --wk: var(--blue); --wk-text: var(--blue-ink); --wk-mis: rgba(0, 120, 191, 0.45); }
.g-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 3px solid var(--ink);
  background-color: var(--sheet);
  background-image: radial-gradient(circle, var(--fiber) 0.8px, transparent 1.25px);
  background-size: 6px 6px;
}
.g-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: translate(8px, 7px);
  background-image: radial-gradient(circle, var(--wk) 0 50%, transparent 56%);
  background-size: 4px 4px;
}
.g-banner-week { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.g-banner-title { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-shadow: 2px 2px 0 var(--wk-mis); }
.g-banner-tool { font-size: 14px; font-weight: 700; color: var(--wk-text); }
@keyframes g-stamp-in {
  0% { opacity: 0; transform: translateX(-50%) rotate(-2deg) scale(1.35); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) rotate(-2deg) scale(1); }
}

/* ───────── пауза ───────── */
.g-pausebtn {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--fiber);
}
.g-pause {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 18px 18px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--sheet);
  box-shadow: 5px 5px 0 var(--blue);
}
.g-pause-title { margin: 0; font-size: 26px; font-weight: 800; }
.g-pause-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* «Неделю заново» и правило второго шанса под ней; потрачен — только строка «почему кнопки нет» */
.g-pause-restart { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.g-pause-note { margin: 0; }
.g-ui.is-paused .g-proxies { display: none; }

/* ───────── поповеры поверх поля ───────── */
.g-pops { position: absolute; inset: 0; pointer-events: none; }
.g-pop {
  position: absolute;
  left: 0;
  top: 0;
  max-width: calc(100% - 16px);
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shade);
  animation: g-pop-in 0.16s ease-out both;
}
@keyframes g-pop-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.g-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 40px 10px 0;
  font-size: 15px;
  font-weight: 800;
}
.g-pop-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* пульт стиля */
.g-pult { width: min(330px, calc(100% - 32px)); padding: 12px 14px 14px; box-shadow: 5px 5px 0 var(--pink); }
.g-pult-head { display: flex; align-items: center; gap: 10px; margin: 0 40px 10px 0; }
.g-pult-who { display: flex; flex-direction: column; line-height: 1.2; }
.g-pult-who strong { font-size: 18px; font-weight: 800; }
.g-pult-role { font-size: 14px; color: var(--ink-2); }
.g-seg { display: flex; gap: 6px; margin: 0 0 10px; }
.g-seg-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.g-seg-btn[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.g-seg--wide { flex-wrap: wrap; }
.g-seg--wide .g-seg-btn { flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.g-seg-title { font-weight: 800; }
.g-seg-desc { font-size: 14px; font-weight: 500; opacity: 0.9; }
.g-pult-marks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -2px 0 10px; font-size: 14px; }
.g-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.g-mark-bar { display: inline-flex; gap: 2px; }
.g-mark-bar i { width: 8px; height: 12px; border: 2px solid var(--ink); }
.g-mark-bar i.is-on { background: var(--ink); }

.g-pult-pad {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 6px 0 0;
  border: 2px solid var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    radial-gradient(circle, var(--fiber) 1.2px, transparent 1.6px);
  background-size: 2px 100%, 100% 2px, 9px 9px;
  background-position: 50% 0, 0 50%, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.g-pult-zones { position: absolute; inset: 0; }
.g-zone {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}
/* центр зоны — у внешнего угла квадранта (там встаёт ручка), поэтому подпись — у внутреннего угла */
.g-zone--show { left: 0; top: 0; align-items: flex-end; justify-content: flex-end; text-align: right; }
.g-zone--together { right: 0; top: 0; align-items: flex-start; justify-content: flex-end; text-align: left; }
.g-zone--trust { right: 0; bottom: 0; align-items: flex-start; justify-content: flex-start; text-align: left; }
.g-zone--yours { left: 0; bottom: 0; align-items: flex-end; justify-content: flex-start; text-align: right; }
.g-zone-label { max-width: 100%; }
.g-zone-arrow { position: absolute; font-size: 18px; line-height: 1; color: var(--ink-2); }
.g-zone--show .g-zone-arrow { left: 6px; top: 4px; }
.g-zone--together .g-zone-arrow { right: 6px; top: 4px; }
.g-zone--trust .g-zone-arrow { right: 6px; bottom: 4px; }
.g-zone--yours .g-zone-arrow { left: 6px; bottom: 4px; }
.g-zone[aria-checked="true"] { background: rgba(255, 72, 176, 0.16); }
.g-zone[aria-checked="true"] .g-zone-label { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-color: var(--pink); }
.g-zone.is-hint { outline: 3px dashed var(--teal-ink); outline-offset: -6px; }
.g-zone:focus-visible { outline-offset: -4px; }
.g-pult-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 6px;
  align-items: center;
}
.g-pult-frame .g-pult-pad { grid-column: 2; grid-row: 1; margin: 0; }
.g-pult-ax {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  pointer-events: none;
  white-space: nowrap;
}
.g-pult-ax--d { grid-column: 1; grid-row: 1; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.g-pult-ax--s { grid-column: 2; grid-row: 2; justify-self: end; }
.g-pult-handle {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 3px 2px 0 var(--blue);
  touch-action: none;
  cursor: grab;
  transition: left 0.12s ease, top 0.12s ease, box-shadow 0.12s ease;
}
.g-pult-handle::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--ink);
}
.g-pult.is-match .g-pult-handle { box-shadow: 0 0 0 var(--blue); }
.g-pult.is-miss .g-pult-handle { box-shadow: 6px 4px 0 var(--blue); }
.g-pult-status { min-height: 22px; margin: 8px 0 0; font-size: 14px; font-weight: 800; }
.g-pult-status:empty { min-height: 0; margin: 0; }
.g-pult.is-match .g-pult-status { color: var(--teal-ink); }
.g-pult.is-miss .g-pult-status { color: var(--pink-ink); }

/* веер обезьяны */
.g-fan { width: min(300px, calc(100% - 32px)); box-shadow: 5px 5px 0 var(--yellow); }
.g-fan-list { display: flex; flex-direction: column; gap: 8px; }
.g-fan-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  box-shadow: 2px 2px 0 var(--fiber);
}
.g-fan-btn:hover { background: var(--margin); }
.g-fan-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 800;
  border: 2px solid var(--ink);
}

/* шлюз, лимит, отложить */
.g-gatemenu { width: min(340px, calc(100% - 32px)); }
.g-instead { width: min(320px, calc(100% - 32px)); }
.g-pick-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 50vh; overflow: auto; }
.g-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.g-limit { width: min(280px, calc(100% - 32px)); }
.g-limit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.g-limit-val { flex: 1; text-align: center; font-size: 28px; font-weight: 800; }

/* каналы */
.g-chan { width: min(480px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; }
.g-chan-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.g-chan-row { display: grid; grid-template-columns: minmax(84px, 0.8fr) 1fr 1fr; gap: 6px; align-items: start; }
.g-chan-row.is-target { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.g-chan-head { font-size: 14px; font-weight: 800; }
.g-chan-col { display: inline-flex; align-items: center; gap: 6px; }
.g-chan-who { display: flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; }
.g-chan-cell { display: flex; flex-direction: column; gap: 4px; }
.g-chan-lvl, .g-chan-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.g-chan-lvl.g-lvl-0 { border-style: dashed; color: var(--ink-2); }
.g-chan-sync { justify-content: center; }
.g-chan-sync:active { background: var(--ink); color: var(--on-ink); }
.g-chan-pips { display: inline-flex; gap: 2px; }
.g-chan-pips i { width: 6px; height: 14px; border: 2px solid currentColor; }
.g-chan-pips i.is-on { background: currentColor; }
.g-chan-note { font-size: 14px; color: var(--ink-2); }

/* ───────── экраны между неделями ───────── */
.g-screens { position: absolute; inset: 0; pointer-events: none; }
.g-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--veil);
  pointer-events: auto;
}
.g-screen--print { background: var(--veil-soft); align-items: flex-end; }
.g-sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto 0;
  padding: 22px 20px 20px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background-color: var(--sheet);
  background-image: radial-gradient(circle, var(--fiber) 0.9px, transparent 1.3px);
  background-size: 7px 7px;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  animation: g-sheet-in 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes g-sheet-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.g-sheet h2 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.g-stamp-h {
  display: inline-block;
  padding: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: var(--mis) 2px 0 rgba(255, 72, 176, 0.45);
}
.g-stamp-h--lose { color: var(--pink-ink); text-shadow: none; }
.g-stamp {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 2px 10px;
  border: 3px solid var(--pink-ink);
  border-radius: 4px;
  color: var(--pink-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.g-stamp--lose { margin: 0 0 8px; font-size: 16px; }
.g-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* полоса поверх холста: оттиск, поражение и постер рисует рендер, здесь — кнопки */
.g-screen--bar, .g-ui .g-screen--bar {
  align-items: flex-end;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;
  overflow: visible;
}
.g-bar {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
  pointer-events: auto;
  animation: g-sheet-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.g-bar .g-nav { margin-top: 0; }
/* итог сессии в полосе: видимая короткая сводка (на телефоне текст постера на холсте не прочесть) */
.g-bar-sum { margin: 0 0 10px; }
.g-bar-sum p { margin: 0; }
.g-bar-sum-main { font-size: 18px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.g-bar-sum-sub { margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.g-bar-note { margin: 0 0 8px; font-size: 14px; }
/* «Постер крупно»: почти в натуральную величину, с прокруткой (на телефоне — и вбок: текст постера
   должен читаться, а не сжиматься в ширину экрана) */
.g-modal--poster { align-items: flex-start; }
.g-dialog.g-posterdlg { width: 100%; max-width: 1110px; padding: 10px; overflow: auto; }
.g-posterdlg-scroll { overflow: auto; }
.g-poster-big { display: block; width: max(100%, 720px); height: auto; border: 2px solid var(--ink); }
.g-bar-text { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.g-letter--bar, .g-offer--bar { margin: 0 0 10px; }

/* оттиск */
.g-print-art { margin: 6px 0 12px; }
.g-print-art canvas { display: block; width: 100%; height: auto; }
.g-seals { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; padding: 0; list-style: none; }
.g-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 2px dashed var(--ink-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.g-seal-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}
.g-seal.is-ok { border-style: solid; border-color: var(--ink); color: var(--ink); }
.g-seal.is-ok .g-seal-mark { border-style: solid; background: var(--pink); border-color: var(--ink); color: #1A1A1A; transform: rotate(-8deg); }
.g-score { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 6px; }
.g-score-k { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.g-score-v { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.g-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.g-num {
  padding: 6px 10px;
  border-left: 4px solid var(--ink);
  background: var(--paper);
}
.g-num dt { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.g-num dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-num.is-gold { border-left-color: var(--gold); }
.g-num.is-blot { border-left-color: var(--pink); }
.g-nums--end .g-num dd { font-size: 26px; }
.g-mentor { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 8px 0; font-weight: 700; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
}
.g-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-quad-cell {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.g-quad-cell::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--k, 0) * 100%);
  background: var(--fiber);
  z-index: 0;
}
.g-quad-cell > * { position: relative; z-index: 1; }
.g-quad-cell { flex-wrap: wrap; row-gap: 0; }
.g-quad-k { min-width: 0; overflow-wrap: anywhere; }
.g-quad-v { font-variant-numeric: tabular-nums; }
.g-zadel { font-size: 18px; margin: 10px 0; }
.g-letter, .g-offer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
}
.g-offer { flex-direction: column; box-shadow: 4px 4px 0 var(--teal); }
.g-offer p { margin: 0; }

/* пятница: люди */
.g-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0; }
.g-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 3px 3px 0 var(--fiber);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.g-person:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pink); }
.g-person-txt { display: flex; flex-direction: column; line-height: 1.25; }
.g-person-txt strong { font-size: 18px; font-weight: 800; }
.g-person-role { font-size: 14px; color: var(--ink-2); margin: 0; }
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border: 2px solid var(--pink-ink);
  border-radius: 999px;
  color: var(--pink-ink);
  font-size: 14px;
  font-weight: 800;
}
.g-person.has-letter { box-shadow: 3px 3px 0 var(--pink); }

/* 1:1 «колодец» */
.g-screen--well .g-sheet { text-align: center; max-width: 520px; }
.g-screen--well .g-kicker, .g-screen--well h2 { text-align: center; }
.g-well {
  --k: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: min(260px, 70vw);
  aspect-ratio: 1 / 1;
  margin: 10px auto 8px;
}
.g-well-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  opacity: calc(0.18 + var(--k) * 0.5);
  transform: scale(calc(0.52 + var(--k) * 0.48));
  transition: transform 0.2s linear, opacity 0.2s linear;
}
.g-well-ring--2 { border-color: var(--blue); transform: scale(calc(0.4 + var(--k) * 0.42)); border-style: dashed; }
.g-well-ring--3 { border-color: var(--pink); transform: scale(calc(0.3 + var(--k) * 0.34)); }
.g-well-glyph { position: relative; z-index: 1; }
.g-well.is-silent .g-well-ring { border-width: 3px; }
.g-said { min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-bubble {
  position: relative;
  max-width: 460px;
  margin: 8px auto;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  animation: g-pop-in 0.3s ease-out both;
}
.g-bubble--surface { color: var(--ink-2); font-weight: 500; }
.g-bubble--surface.is-old { font-size: 15px; }
.g-bubble--deep {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--blue);
}
.g-bubble--deep.has-letter { box-shadow: 4px 4px 0 var(--pink); }
.g-holdbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 152px;
  height: 152px;
  margin: 8px auto 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 4px 4px 0 var(--teal);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.g-holdbtn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  transform: scale(0.96);
  box-shadow: 0 0 0 10px var(--veil-soft), 0 0 0 12px var(--teal);
}
.g-holdbtn-label { max-width: 110px; }

/* ответы 1:1 */
.g-answers-top { display: flex; align-items: center; gap: 12px; }
.g-answers-top h2 { margin: 0; }
.g-answers { display: flex; flex-direction: column; gap: 10px; }
.g-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  box-shadow: 3px 3px 0 var(--fiber);
}
.g-answer:hover { box-shadow: 4px 4px 0 var(--blue); transform: translate(-1px, -1px); }
.g-answer-id {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}
.g-react p { margin: 6px 0; font-size: 17px; font-weight: 600; }

/* разбор кляксы: плитки */
.g-fb-phrase {
  min-height: 64px;
  margin: 10px 0;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  font-size: 18px;
  font-weight: 700;
}
.g-fb-phrase.is-empty { color: var(--ink-2); font-weight: 500; border-style: dashed; }
.g-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.g-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 3px 3px 0 var(--fiber);
  touch-action: manipulation;
  /* выбор плитки виден сразу: фон, текст и синяя тень меняются без перехода */
}
.g-tile-slot { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.g-tile-text { font-size: 16px; font-weight: 700; }
.g-tile[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: 3px 3px 0 var(--blue); }
.g-tile[aria-pressed="true"] .g-tile-slot { color: var(--on-ink); opacity: 0.85; }
.g-tile.is-tempt {
  grid-column: 1 / -1;
  min-height: 80px;
  border-width: 3px;
  box-shadow: 0 0 0 4px var(--fire);
  animation: g-tempt 1.6s ease-in-out infinite;
}
.g-tile.is-tempt .g-tile-text { font-size: 26px; font-weight: 800; }
.g-tile--label .g-tile-text { font-style: italic; }
@keyframes g-tempt {
  0%, 100% { box-shadow: 0 0 0 4px var(--fire); }
  50% { box-shadow: 0 0 0 8px rgba(255, 65, 0, 0.45); }
}

/* выбор 1 из 3 */
.g-screen--choice .g-sheet { max-width: 900px; }
.g-plates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.g-plate {
  padding: 6px 12px;
  border: 2px solid #1A1A1A;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--shade);
}
/* перепечатанная привычка — бирюзовый растр, как на холсте и постере; подпись на бумажной полоске (контраст);
   вторая перепечатка — с насечкой в углу (на холсте — насечки на плашке) */
.g-plate--l1, .g-plate--l2 {
  position: relative;
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--teal) 0 46%, transparent 54%);
  background-size: 4px 4px;
  color: var(--ink);
  border-color: var(--ink);
}
.g-plate--l1 span, .g-plate--l2 span { padding: 0 4px; background: var(--paper); }
.g-plate--l2::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(225deg, var(--ink) 0 50%, transparent 50%);
}
.g-ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.g-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 170px;
  padding: 14px 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 4px 4px 0 var(--fiber);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.g-ccard:hover { transform: translate(-2px, -2px) rotate(-0.4deg); box-shadow: 6px 6px 0 var(--blue); }
.g-ccard--habit { box-shadow: 4px 4px 0 var(--gold); }
.g-ccard--fork { box-shadow: 4px 4px 0 var(--orange); }
.g-ccard.is-highlight { border-width: 3px; box-shadow: 6px 6px 0 var(--pink); }
.g-ccard-kind { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.g-ccard-title { font-size: 22px; font-weight: 800; line-height: 1.15; }
.g-ccard-line { font-size: 14px; font-weight: 700; color: var(--pink-ink); }
.g-ccard-desc { font-size: 15px; font-weight: 500; }
.g-ccard-stamp { position: absolute; top: 10px; right: 10px; margin: 0; }

/* итог сессии */
.g-poster-art { margin: 8px 0 12px; }
.g-poster-art canvas { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.g-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-weeks li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 2px solid var(--ink); background: var(--paper); font-size: 14px; font-weight: 700; }
.g-weeks strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.g-medals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-medal { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px dashed var(--ink-2); color: var(--ink-2); }
.g-medal.is-ok { border-style: solid; border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }
.g-medal-txt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; }
.g-medal-txt strong { font-size: 16px; }

/* ───────── титульное меню: плакат ───────── */
/* Под текстом — холст с ключевым рисунком (js/render/keyart.js): в ландшафте плакат справа от текста,
   в портрете — над ним. Холст сам рисует бумагу, поэтому фон экрана — только запасной. */
.g-screen--menu { align-items: center; background: var(--paper); }
.g-keyart {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.g-menu {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: auto 0;
  padding: 8px 4px 24px;
  text-align: left;
}
.g-titlebox { position: relative; display: inline-block; max-width: 100%; }
.g-title, .g-title-ink {
  margin: 0;
  font-size: clamp(54px, 14vw, 124px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.g-title { position: relative; text-shadow: -2px -1px 0 rgba(0, 120, 191, 0.32); }
/* второй прогон: розовая краска растром, лист ушёл в барабане вправо-вниз */
.g-title-ink {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0.05em, 0.045em);
  color: transparent;
  background-image: radial-gradient(circle, var(--pink) 0 46%, transparent 52%);
  background-size: 5px 5px;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: var(--ink-blend);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}
/* подзаголовок на жёлтой плашке; плашка чуть ниже строки — как вторая краска со своим регистром */
.g-subtitle { margin: 16px 0 2px; font-size: 20px; font-weight: 800; line-height: 1.5; }
.g-band {
  padding: 1px 7px 2px;
  color: var(--on-band);
  background: linear-gradient(var(--band), var(--band)) 3px 4px / calc(100% - 3px) calc(100% - 3px) no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.g-tagline { margin: 10px 0 22px; font-size: 16px; color: var(--ink-2); max-width: 440px; }
.g-screen--menu .g-credit { max-width: 440px; }
@media (min-aspect-ratio: 6/5) and (min-width: 640px) {
  .g-screen--menu { justify-content: flex-start; padding-left: clamp(20px, 6vw, 120px); }
  .g-menu { max-width: min(560px, 46vw); }
  /* «Горлышко» ≈ 4,4 em: заголовок не шире колонки текста и не выше пятой части экрана */
  .g-title, .g-title-ink { font-size: clamp(44px, min(10vw, 17vh), 124px); }
}
/* большой монитор: текст плаката крупнее, чтобы колонка держала вес рядом с рисунком */
@media (min-aspect-ratio: 6/5) and (min-width: 1500px) and (min-height: 860px) {
  .g-menu { max-width: 640px; }
  .g-title, .g-title-ink { font-size: 140px; }
  .g-subtitle { font-size: 24px; }
  .g-tagline { font-size: 19px; max-width: 540px; }
  .g-menu-btns { max-width: 380px; }
  .g-menu .g-btn { font-size: 18px; }
  .g-menu-btns .g-btn { min-height: 52px; }
  .g-menu .g-set-label { font-size: 18px; }
  .g-menu .g-set-desc { font-size: 16px; }
  .g-screen--menu .g-credit { font-size: 15px; max-width: 540px; }
}
@media (max-aspect-ratio: 6/5), (max-width: 639.98px) {
  /* место под плакат сверху; на низких экранах — меньше. Плакат уезжает вверх вместе с текстом,
     чтобы при прокрутке меню текст не ложился на рисунок */
  .g-screen--menu { padding-top: clamp(140px, 29vh, 330px); }
  .g-keyart { position: absolute; bottom: auto; }
  .g-title, .g-title-ink { font-size: clamp(54px, 15vw, 104px); }
}
.g-menu-btns { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 320px; }
.g-menu-btns .g-btn { justify-content: flex-start; }
.g-menu-how{max-width:440px;margin:14px 0 4px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.g-menu-duration{max-width:440px;margin:0 0 8px;font-size:14px;line-height:1.5}
.g-replay { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; max-width: 320px; }
.g-replay-note { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; }
.g-set-note { min-height: 1.3em; margin: 8px 0 0; font-size: 14px; }
.g-menu-small { margin-top: 18px; }
/* «Спокойный режим» прямо на титуле */
label.g-set-row.g-menu-calm { max-width: 420px; margin-top: 14px; }

/* ───────── модальные диалоги: «Что это было», настройки, клавиши ───────── */
.g-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--veil);
  overflow-y: auto;
  pointer-events: auto;
}
.g-dialog {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100% - 8px);
  overflow-y: auto;
  margin: auto;
  padding: 22px 20px 18px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--blue);
  animation: g-sheet-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.g-dialog h2 { margin: 0 44px 12px 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.g-dialog h3 { margin: 18px 0 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.g-dialog-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.g-kicker-n { font-weight: 700; }

.g-what-title { text-shadow: var(--mis) 2px 0 rgba(255, 72, 176, 0.4); }
.g-what-body { font-size: 17px; line-height: 1.55; margin: 0 0 12px; }
.g-what-game, .g-what-note { margin: 10px 0; padding: 10px 12px; font-size: 16px; line-height: 1.5; background: var(--paper); }
.g-what-game { border-left: 4px solid var(--teal); }
.g-what-note { border-left: 4px solid var(--orange); }
.g-what-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); font-style: italic; }
.g-what-srclist { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.g-what-srclist li { margin: 4px 0; }
.g-library { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-libitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.g-libnum { flex: none; width: 28px; font-size: 18px; font-weight: 800; color: var(--pink-ink); font-variant-numeric: tabular-nums; }
.g-sources { margin: 8px 0; padding-left: 24px; font-size: 15px; line-height: 1.5; }
.g-sources li { margin: 6px 0; }

.g-set-sec { margin: 0 0 6px; }
.g-set-block { margin: 10px 0 12px; }
.g-set-label { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.g-set-desc { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.g-set-row { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 4px 0; }
.g-set-row label { display: flex; flex-direction: column; cursor: pointer; }
.g-set-row--range .g-set-label { margin: 0; min-width: 96px; }
/* флажок: вся строка — подпись, касание во всю ширину, не ниже 48 px */
label.g-set-row.g-set-check { flex-direction: row; width: 100%; cursor: pointer; border-radius: 10px; }
.g-set-text { display: flex; flex-direction: column; padding: 4px 0; }
.g-set-text .g-set-label:last-child { margin: 0; }
.g-check { width: 24px; height: 24px; margin: 10px; accent-color: var(--ink); flex: none; }
.g-range { flex: 1; min-width: 120px; height: 44px; accent-color: var(--ink); }
.g-range-out { min-width: 48px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.g-keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; align-items: center; }
.g-keys-row { display: contents; }
.g-keys dt { margin: 0; }
.g-keys dd { margin: 0; font-size: 16px; }

/* ───────── страница «Об игре» ───────── */
.g-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-size: 17px;
  line-height: 1.6;
}
.g-page h1 {
  margin: 0 0 6px;
  font-size: clamp(40px, 10vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 3px 2px 0 rgba(255, 72, 176, 0.5), -2px -2px 0 rgba(0, 120, 191, 0.35);
}
.g-page h2 { margin: 36px 0 10px; font-size: 24px; font-weight: 800; line-height: 1.2; }
.g-page h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 800; }
.g-page p, .g-page li { max-width: 68ch; }
.g-page ol, .g-page ul { padding-left: 24px; }
.g-page blockquote { margin: 16px 0; padding: 10px 16px; border-left: 4px solid var(--pink); background: var(--sheet); }
.g-page .g-btn { margin: 8px 8px 8px 0; }
.g-page-lead { font-size: 20px; font-weight: 600; color: var(--ink-2); }

/* ───────── ландшафт и узкие экраны ───────── */
@media (max-width: 420px) {
  .g-sheet { padding: 18px 14px 16px; box-shadow: 4px 4px 0 var(--pink); }
  .g-sheet h2 { font-size: 24px; }
  .g-score-v { font-size: 38px; }
  .g-banner-title { font-size: 22px; }
  .g-tile.is-tempt .g-tile-text { font-size: 22px; }
  .g-dialog { padding: 20px 14px 16px; }
  .g-ccard { min-height: 0; }
  .g-ccard-title { font-size: 20px; }
  .g-pult { width: min(292px, calc(100% - 24px)); padding: 10px 12px 12px; }
  .g-pult-head { margin-bottom: 6px; }
  .g-pult .g-seg { margin-bottom: 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .g-screen { align-items: flex-start; }
  /* полоса оттиска на телефоне боком: предложение «Спокойного» — в одну строку, листу остаётся место */
  .g-bar { padding: 8px 12px; }
  .g-offer--bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; }
  .g-well { width: min(180px, 36vh); }
  .g-holdbtn { width: 128px; height: 128px; }
  .g-banner { top: 8%; }
  /* листы пятницы на телефоне боком (812×375): компактнее, главное — в первом экране */
  .g-screen { padding: 10px 16px; }
  .g-sheet { padding: 12px 16px 12px; box-shadow: 4px 4px 0 var(--pink); }
  .g-sheet h2 { margin-bottom: 6px; font-size: 22px; }
  .g-sheet .g-kicker { margin-bottom: 2px; }
  .g-nav { margin-top: 10px; }
  /* 1:1 «колодец»: слева человек и колодец, справа кнопка молчания — сразу видна целиком */
  .g-screen--well .g-sheet {
    max-width: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: 18px;
    align-items: center;
  }
  .g-screen--well .g-sheet > * { grid-column: 1; }
  .g-screen--well .g-holdbtn { grid-column: 2; grid-row: 1 / span 4; justify-self: center; margin: 0; }
  .g-screen--well .g-sheet > .g-muted.g-center { grid-column: 2; grid-row: 5; margin: 0; }
  .g-screen--well .g-well { width: min(140px, 32vh); margin: 2px auto; }
  .g-screen--well .g-said { min-height: 0; }
  /* ответы: слева тема, справа оба ответа — «Б» не уходит за край */
  .g-screen--answers .g-sheet {
    max-width: 800px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: 18px;
    align-items: start;
  }
  .g-screen--answers .g-sheet > * { grid-column: 1; }
  .g-screen--answers .g-sheet > .g-h3 { grid-column: 2; grid-row: 1; margin-top: 0; }
  .g-screen--answers .g-answers { grid-column: 2; grid-row: 2 / span 4; }
  .g-screen--answers .g-bubble { margin: 6px 0; }
  .g-screen--answers .g-bubble--deep { font-size: 17px; }
  .g-answer { min-height: 48px; padding: 8px 12px; font-size: 16px; }
  /* выбор карточки: шапка в две колонки (слева заголовок, справа привычки), описания в две строки —
     полностью они в доступном имени кнопки; карточки и «Без карточки» — в первом экране */
  .g-screen--choice .g-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 18px;
    align-items: start;
  }
  .g-screen--choice .g-sheet > * { grid-column: 1 / -1; }
  .g-screen--choice .g-sheet > .g-kicker { grid-column: 1; grid-row: 1; }
  .g-screen--choice .g-sheet > h2 { grid-column: 1; grid-row: 2; }
  .g-screen--choice .g-sheet > .g-muted { grid-column: 1; grid-row: 3; margin: 0 0 6px; }
  .g-screen--choice .g-sheet > .g-h3 { grid-column: 2; grid-row: 1; margin: 0 0 4px; }
  .g-screen--choice .g-sheet > .g-plates { grid-column: 2; grid-row: 2 / span 2; margin: 0 0 6px; }
  .g-ccards { gap: 10px; }
  .g-ccard { min-height: 0; padding: 8px 12px 10px; gap: 3px; }
  .g-ccard-title { font-size: 17px; }
  .g-ccard-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .g-bar-sum { margin-bottom: 6px; }
  .g-bar-sum-main { font-size: 16px; }
}

/* ───────── меньше движения (§8): без анимаций и тряски ───────── */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ───────── высокий контраст системы ───────── */
@media (forced-colors: active) {
  .g-proxy:focus-visible, :focus-visible { outline: 3px solid CanvasText; }
  .g-btn, .g-tile, .g-answer, .g-ccard, .g-person { border-color: CanvasText; }
}