/* oneword («Сто к одному») — классная доска с мелом: тема раунда написана наверху, каждый уникальный ответ
   получает пучок «палочек» (считалка |||| + диагональная зачёркивающая пятую), как считают голоса на перекличке.
   Отличие от уток/пингвинов/выборов (Comfortaa+золото на тёмном) и от crowd (чёрный+жёлто-синие плиты+Inter Tight):
   тёмно-зелёная доска мела, деревянная рамка и деревянная планка шапки (цвет рамки, меловые буквы), меловой
   почерк Playpen Sans (в Google Fonts ЕДИНСТВЕННЫЙ рукописный шрифт сразу с кириллицей и греческим — Kalam и Caveat
   греческого не имеют) и узкий гротеск Roboto Condensed (кириллица+греческий) для мелкого интерфейса.
   Плоско: без градиентов (ни одной градиентной функции в файле), стекла, свечения — только статичный SVG-шум и
   твёрдые полосы линовки/следы тряпки как текстура мела, никакого blur/glow.
   Шрифты подключают страницы тегом <link> (не @import): так они начинают грузиться раньше стилей.
   Доска и телефон подключают этот файл и рисуют свои компоненты (считалки-пучки, деревянная рамка). */

:root {
  color-scheme: dark;
  --bg: #121f16;           /* стена класса за доской — почти чёрный зелёный */
  --board: #22392a;        /* сама доска мела — классический грифельно-зелёный, не чёрный и не прежний петроль */
  --board2: #2b4432;       /* вложенная/активная зона на доске */
  --frame: #5a4229;        /* деревянная рамка доски и планка шапки, плоский коричневый */
  --frame-ink: #3a2c1a;    /* нижняя кромка рамки — тоже плоский цвет, не тень */
  --chalk: #f2efe2;        /* белый мел — основной текст и палочки по умолчанию */
  --chalk-yellow: #efc94c; /* мелок жёлтый — только «самое популярное» */
  --chalk-pink: #e39fbb;   /* мелок розовый — третий цвет кластера, кружок победителя */
  --chalk-blue: #8bc3e6;   /* мелок голубой — "самое редкое" / четвёртый цвет кластера */
  --ink: #16241b;          /* тёмный текст на меловой плите-чипе */
  --text: #ece7d7;         /* тёплый меловой почти-белый для обычного текста */
  --muted: rgba(236, 231, 215, .72); /* на --board2 5.3:1, на --board 6.0:1, на --frame 4.8:1 */
  --line: rgba(236, 231, 215, .26);
  --a: var(--chalk-yellow); /* популярное: активные элементы, подсказка */
  --a-ink: var(--ink);
  --b: var(--chalk-blue);   /* редкое: второй акцент */
  --b-ink: var(--ink);
  --hot: #e2653c;          /* мелок красно-оранжевый: тревога таймера */
  --ok: #8bd68f;
  --bad: #e25a3c;
  --display: "Playpen Sans", "Segoe Print", "Bradley Hand", cursive; /* меловой почерк — заголовки, тема, слова, крупные цифры */
  --body: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; /* узкий гротеск — мелкий интерфейс */
  --r: 7px;
  --noise: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyByZXN1bHQ9J3QnLz48ZmVDb2xvck1hdHJpeCBpbj0ndCcgdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAuMDYgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPgo=");
}

html { background: var(--bg); touch-action: manipulation; }

/* ---------- текстура доски: статичный флэт-шум (SVG feTurbulence) + твёрдая линовка + следы тряпки ----------
   Линовка — SVG-плитка с одной тонкой линией (не градиент). Следы тряпки — несколько широких наклонных
   полупрозрачных плоских полос с жёсткими краями (как стёртые меловые разводы). */
.chalkboard {
  position: relative;
  background-color: var(--board);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Crect width='34' height='1' fill='%23ece7d7' fill-opacity='.05'/%3E%3C/svg%3E"),
    var(--noise);
  background-size: 34px 34px, 140px 140px;
}
.chalkboard { overflow: hidden; }
.chalkboard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23ece7d7' fill-opacity='.045'%3E%3Cpolygon points='46,9 93,3 93.6,6.4 46.6,12.6'/%3E%3Cpolygon points='52,16 90,11.4 90.6,14.4 52.6,19.2'/%3E%3Cpolygon points='4,88 40,83 40.6,86.4 4.6,91.6'/%3E%3Cpolygon points='10,94 34,90.6 34.6,93.6 10.6,97'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------- корпус: доска в деревянной рамке ----------
   Приём мира: не карточка с цветной полоской, а предмет с настоящим бортом — толстая деревянная
   рамка со всех сторон, более тёмная нижняя кромка (плоский цвет, не тень). */
.cabinet { position: relative; background: var(--board2); border: 5px solid var(--frame); border-bottom-width: 9px; border-radius: 3px; overflow: hidden; }
.cabinet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--noise); background-size: 140px 140px; }
.chip { display: inline-block; background: transparent; color: var(--chalk); border: 2px dashed rgba(242, 239, 226, .6); border-radius: var(--r); padding: 4px 9px; font: 800 13px/1.2 var(--body); letter-spacing: .1em; }

/* деревянная планка шапки — цвет рамки доски, меловые буквы (не золотой баннер): та же рама, что у панелей */
.plate { position: relative; background-color: var(--frame); background-image: var(--noise); background-size: 140px 140px; color: var(--chalk); border-bottom: 5px solid var(--frame-ink); }
.plate b, .plate strong { font: 700 1.05em/1 var(--display); letter-spacing: 0; }

/* ---------- считалка-пучок: общий компонент доски и телефона ----------
   Четыре вертикальные палочки + одна диагональная, зачёркивающая пятую. pathLength="1" на каждом штрихе —
   анимация "написания" через stroke-dashoffset не зависит от реальной геометрии пути. */
.tslot { position: relative; width: var(--sw, 128px); height: var(--sh, 104px); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; }
.tslot .tword { font-family: var(--display); font-weight: 700; font-size: var(--sword, 16px); line-height: 1.1; text-align: center; max-width: 100%; overflow-wrap: anywhere; color: var(--chalk-c, var(--chalk)); opacity: 0; transition: opacity .2s; }
.tslot.revealed .tword { opacity: 1; }
.tslot svg.tally { width: var(--stw, 78px); height: var(--sth, 30px); overflow: visible; display: block; }
.tslot svg.tally path { fill: none; stroke: var(--chalk-c, var(--chalk)); stroke-width: var(--tsw, 6); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .3s ease-out, opacity 0s linear var(--sd, 0s); transition-delay: var(--sd, 0s); }
.tslot.revealed svg.tally path { stroke-dashoffset: 0; opacity: 1; }
.tslot .tcount { font: 700 var(--scount, 16px)/1 var(--display); font-style: normal; color: var(--chalk-c, var(--chalk)); opacity: 0; transition: opacity .2s; transition-delay: calc(var(--sd, 0s) + .25s); }
.tslot.revealed .tcount { opacity: 1; }

/* прогресс в духе считалки: короткие меловые штрихи в ряд, "включённый" = прочерчен мелом, "выключенный" = пунктирный контур */
.segdots { display: flex; flex-wrap: wrap; gap: 6px; }
.segdots i { width: 6px; height: 16px; flex: none; border-radius: 3px; border: 2px dashed var(--line); background: transparent; }
.segdots i.on { background: var(--chalk); border: 2px solid var(--chalk); transform: rotate(4deg); }

/* «написано мелом»: подчёркивание и кружок вокруг цифры рисуются штрихом (stroke-dash), как считалки;
   класс .drawn добавляет JS через мгновение после появления; при reduced-motion штрих сразу готов */
.chalk-ul, .chalk-ring { overflow: visible; pointer-events: none; }
.chalk-ul path, .chalk-ring path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chalk-ul path { stroke: var(--chalk); stroke-width: 4; transition: stroke-dashoffset .7s ease-out; }
.chalk-ul path + path { stroke-width: 3; transition-delay: .35s; }
.chalk-ring path { stroke: var(--chalk-pink); stroke-width: 3.5; transition: stroke-dashoffset .8s ease-out .15s; }
.drawn .chalk-ul path, .drawn .chalk-ring path, .chalk-ul.drawn path, .chalk-ring.drawn path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .tslot svg.tally path, .tslot .tword, .tslot .tcount, .chalk-ul path, .chalk-ring path { transition: none !important; animation: none !important; }
  .chalk-ul path, .chalk-ring path { stroke-dashoffset: 0 !important; }
}