/* «Контекстно» — оформление в тёмной теме RDL (тёмный продуктовый интерфейс).
   Мобильный-первый: базовые правила для 320–430 px, дальше ломтики 620 и 960 px.
   Никаких внешних шрифтов, картинок и CDN — только системный стек и CSS. */

/* ============================ 1. Токены ============================ */
:root {
  /* поверхности: глубину дают слои и волосяные границы, а не тени */
  --bg:        #0B0C0E;
  --surface:   #171B21;
  --surface-2: #20252C;
  --surface-3: #272E36;
  --line:      rgba(255, 255, 255, 0.13);
  --line-2:    rgba(255, 255, 255, 0.22);
  --glass:     rgba(20, 22, 26, 0.72);

  /* текст */
  --text:      #E8E9EB;
  --text-2:    #A1A6AD;
  --text-3:    #878D94;   /* приглушённый, но не ниже 4.5:1 на всех тёмных слоях */
  --text-dim:  #6B7078;

  /* единственный акцент — тёплый оранжевый */
  --accent:      #FF5500;
  --accent-soft: rgba(255, 85, 0, 0.12);
  --accent-line: rgba(255, 85, 0, 0.45);

  /* шкала близости: цвета несут смысл, поэтому остаются цветными */
  --h-win: #22C55E;
  --h-1:   #D55E00;   /* киноварь: различима с оранжевым при дальтонизме */
  --h-2:   #E69F00;
  --h-3:   #F0E442;
  --h-4:   #56B4E9;
  --h-5:   #7E858E;   /* было #6B7078: текст на плашке не проходил по контрасту */
  --chip-ink: #0B0C0E;

  /* форма и сетка: шаг 8px, радиусы умеренные */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --gap: 16px;
  --pad: 16px;

  /* безопасная зона сверху: на телефоне с «челкой» её высоту читает app.js,
     чтобы поднять счётчики раунда не под вырез, а под ним */
  --safe-top: env(safe-area-inset-top, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;
  --ease: 150ms cubic-bezier(.2, .7, .3, 1);
}

/* ============================ 2. База ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }
h1, h2, h3, p, ul, li, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 700; }

/* цифры не «прыгают» при обновлении */
.counter, .guess__rank, .closest__rank, .timerbar__value, .metric__value,
.score__val, .score__attr, .rank-row__place, .rank-row__score, .invite__code,
.codebox__value, .input--code, .stat strong, .recordline__value { font-variant-numeric: tabular-nums; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* очень сдержанный технический фон: тонкая сетка, без свечения и градиентов */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.backdrop__grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* ============================ 3. Верхняя панель ============================ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s1);
  padding: 10px 16px;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar__brand { display: flex; align-items: center; gap: var(--s1); min-width: 0; margin-right: auto; }
.logo { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent); flex: 0 0 auto; }
.brandname { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }

.codebox {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; color: var(--text); transition: border-color var(--ease);
}
.codebox:hover { border-color: var(--line-2); }
.codebox__label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.codebox__value { font-weight: 700; font-size: 14px; letter-spacing: .1em; }
.codebox .icon { width: 13px; height: 13px; color: var(--text-3); }

.topbar__exit { flex: 0 0 auto; min-height: 44px; padding: 4px 12px; font-size: 13px; }
.net { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.net__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.net[data-state="on"] .net__dot { background: var(--h-win); }
.net[data-state="on"] .net__text { color: var(--text-2); }
.net[data-state="wait"] .net__dot { background: var(--h-3); animation: blink 1.2s ease-in-out infinite; }
.net[data-state="off"] .net__dot { background: var(--h-1); }
.net[data-state="off"] .net__text { color: var(--h-1); }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 430px) { .net__text { display: none; } }

/* ============================ 4. Каркас ============================ */
.app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto;
       padding: var(--s2) 16px var(--s3); display: flex; flex-direction: column; gap: var(--gap); }
.screen { display: flex; flex-direction: column; gap: var(--gap); animation: screenin 180ms ease both; }
.screen--center { min-height: 60vh; justify-content: center; align-items: center; text-align: center; }
@keyframes screenin { from { opacity: 0; transform: translateY(4px); } }

.footer { position: relative; z-index: 1; max-width: 520px; margin: 0 auto;
          padding: var(--s2) 16px 32px; color: var(--text-3); font-size: 11.5px; line-height: 1.6;
          text-align: center; border-top: 1px solid var(--line); }
.footer__soft { margin-top: 6px; }
.noscript { padding: var(--s3); text-align: center; color: var(--h-1); }

/* ============================ 5. Типографика ============================ */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.headnote { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.hero { padding: var(--s1) 0 0; }
.hero__title { font-size: clamp(34px, 11vw, 56px); font-weight: 800; line-height: 1.02;
               letter-spacing: -0.03em; margin: 10px 0 12px; color: var(--text); }
.hero__lead { color: var(--text-2); font-size: 15px; max-width: 46ch; }
.invitenote { margin-top: var(--s2); padding: 10px 12px; border-radius: var(--r-md);
              background: var(--accent-soft); border: 1px solid var(--accent-line);
              color: var(--text); font-size: 13px; font-weight: 600; }
.hint { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hint--wait { color: var(--h-3); }
.warnline { color: var(--h-1); font-weight: 600; }

/* ============================ 6. Карточки ============================ */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--pad); display: flex; flex-direction: column; gap: 12px;
}
.card__head { display: flex; align-items: center; gap: var(--s1); }
.card__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; flex: 1; min-width: 0; }
.counter { font-size: 13px; font-weight: 700; background: var(--surface-2);
           border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; color: var(--text-2); }
.card--accent { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(255,85,0,.06), var(--surface)); }
.card--invite { border-color: var(--line-2); }

.badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em;
         text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
         background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }

/* ============================ 7. РљРЅРѕРїРєРё ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  padding: 12px 16px; min-height: 46px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  cursor: pointer; text-align: center;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--chip-ink); border-color: transparent; font-weight: 700; }
.btn--primary:hover:not(:disabled) { background: #E64D00; }
.btn--outline { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--outline:hover:not(:disabled) { background: var(--surface-2); border-color: rgba(255,255,255,.22); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.btn--big { min-height: 52px; font-size: 16px; }
.btn--small { min-height: 44px; padding: 8px 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn--hint { border-color: var(--line-2); color: var(--text); }
.btn--hint:disabled { color: var(--text-3); border-color: var(--line); }
.btnrow { display: flex; gap: var(--s1); flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 46%; }

/* ============================ 8. Поля ============================ */
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 16px; /* 16px — чтобы iOS не увеличивал страницу при фокусе */
  transition: border-color var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent); }
.input--code { text-transform: uppercase; font-weight: 700; letter-spacing: .28em; font-size: 19px; text-align: center; }
.input--guess { font-size: 17px; font-weight: 600; min-height: 52px; }

/* ============================ 9. Вход: три равных входа ============================ */
.entrygrid { display: flex; flex-direction: column; gap: var(--gap); }
.entrygrid__caption { margin: 4px 0 -4px; }
/* Карточка сохранённой игры: сверху и заметно — это самый вероятный следующий шаг. */
#resumeCard { gap: 10px; }

.recordline { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
              padding-top: 10px; border-top: 1px solid var(--line); }
.recordline__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.recordline__value { font-size: 15px; font-weight: 700; color: var(--text); }
.recordline--new .recordline__value { color: var(--h-win); }

/* ============================ 10. Лобби ============================ */
.invite__top { display: flex; align-items: center; gap: var(--s1) 12px; flex-wrap: wrap; }
.invite__code { font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 10vw, 40px);
                letter-spacing: .12em; line-height: 1.1; color: var(--text);
                flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.invite__row { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.invite__row .btn { flex: 0 0 auto; }
.invitelink { flex: 1 1 100%; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.5;
              color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line);
              border-radius: var(--r-sm); padding: 9px 11px; overflow-wrap: anywhere; word-break: break-word; }

.players { display: flex; flex-direction: column; }
.player { display: flex; align-items: center; gap: 10px; padding: 12px 4px;
          border-bottom: 1px solid var(--line); }
.player:last-child { border-bottom: 0; }
.player__nick { font-weight: 600; flex: 1; min-width: 0; display: flex; align-items: center;
                gap: var(--s1); flex-wrap: nowrap; }
.player__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.player--me .player__name { color: var(--text); font-weight: 700; }
.player__me { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.player__off { font-size: 12px; color: var(--text-3); }
.player__score { font-weight: 700; font-size: 15px; min-width: 2ch; text-align: right; }
.player--host .player__nick::after,
.player--manager .player__nick::after { flex: 0 0 auto; font-size: 10px; font-weight: 700; white-space: nowrap;
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-2); }
.player--host .player__nick::after { content: "ведущий"; }
.player--manager .player__nick::after { content: "распорядитель"; border-color: var(--accent-line); color: var(--accent); }

.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { flex: 1 1 auto; min-width: 46px; min-height: 42px; background: var(--surface-2);
       border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-size: 15px;
       color: var(--text-2); cursor: pointer; transition: all var(--ease); }
.seg[aria-pressed="true"] { background: var(--accent); color: var(--chip-ink); border-color: transparent; }
.seg:disabled { cursor: default; }

.modes { display: flex; flex-direction: column; gap: var(--s1); }
.modebtn { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px;
           border-radius: var(--r-md); cursor: pointer; background: var(--surface-2);
           border: 1px solid var(--line); color: var(--text);
           transition: border-color var(--ease), background var(--ease); }
.modebtn__title { font-size: 15px; font-weight: 700; }
.modebtn__sub { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.modebtn[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.modebtn[aria-pressed="true"] .modebtn__title { color: var(--accent); }
.modebtn:disabled { cursor: default; }
.modebtn:disabled .modebtn__title { color: var(--text-2); }
.modebtn:disabled[aria-pressed="true"] .modebtn__title { color: var(--accent); }

.search { display: flex; flex-direction: column; gap: var(--s1); }
/* Список стоит в потоке и раздвигает кнопки: он не может их накрыть. */
.suggest { position: static; max-height: 208px; overflow-y: auto; background: var(--surface-2);
           border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; margin: 0;
           overscroll-behavior: contain; }
.suggest__item { display: block; width: 100%; text-align: left; padding: 10px 12px;
                 border-radius: var(--r-sm); background: none; border: 0; color: var(--text);
                 font-size: 15px; font-weight: 600; cursor: pointer; }
.suggest__item:hover, .suggest__item:focus-visible { background: var(--surface-3); outline: none; }

.startbox { display: flex; flex-direction: column; gap: var(--s1); }

/* ============================ 11. Раунд ============================ */
.roundhead { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; }
.roundhead__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.roundhead__title { font-size: clamp(30px, 9vw, 40px); font-weight: 800; letter-spacing: -0.03em;
                    line-height: 1; margin-top: 6px; }
.roundhead__title span { font-variant-numeric: tabular-nums; }
.roundhead__host { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roundhead__host strong { font-size: 15px; font-weight: 700; }

.modebadge { align-self: flex-start; margin-top: 6px; font-size: 10px; font-weight: 700;
             letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
             background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }

.timerbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
            border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.timerbar .icon { width: 15px; height: 15px; color: var(--text-3); }
.timerbar__label { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--text-3); }
.timerbar__value { font-weight: 700; font-size: 17px; color: var(--text); }
.timerbar--soon { border-color: rgba(239,68,68,.5); }
.timerbar--soon .icon, .timerbar--soon .timerbar__label { color: #FF6B6B; }
.timerbar--soon .timerbar__value { color: #FF6B6B; }

.roundgrid { display: flex; flex-direction: column; gap: var(--gap); }
.roundgrid__main, .roundgrid__side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.hostword { font-size: clamp(26px, 9vw, 36px); font-weight: 800; letter-spacing: -0.03em;
            line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }

.waitbox { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md);
           background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
           font-size: 14px; font-weight: 600; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--h-3); flex: 0 0 auto;
         animation: blink 1.4s ease-in-out infinite; }

.guessbar { display: flex; gap: var(--s1); align-items: stretch; }
.guessbar .input { flex: 1; }
.btn--send { flex: 0 0 auto; width: 52px; min-height: 52px; padding: 0; }
.btn--send .icon { width: 20px; height: 20px; }

.feedback { padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 600;
            border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
.feedback[data-kind="err"] { color: #FFD9D4; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); }
.feedback[data-kind="ok"] { color: var(--text); background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45); }
.feedback[data-kind="warn"] { color: #FFE9C2; background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.4); }

.roundbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.stat strong { font-size: 15px; font-weight: 700; color: var(--text); margin-left: 4px; }
.roundbar .btn--hint { margin-left: auto; }
/* На телефоне завершение раунда занимает всю строку: это осознанное второе действие,
   а не случайно перенесённая кнопка. На широком экране встаёт рядом с подсказкой. */
.btn--endround { flex: 1 1 100%; border-color: var(--line-2); color: var(--text-2); }
.btn--endround:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.24); }

/* Подтверждение завершения раунда: показывается на месте, без системного окна. */
.confirmbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-2);
}
.confirmbar__text { font-size: 14px; font-weight: 600; color: var(--text); }
.confirmbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.confirmbar__actions .btn { flex: 1 1 auto; }

.feed { display: flex; flex-direction: column; gap: 6px; }
.feed > * { flex: 0 0 auto; }   /* строки держат высоту: лента листается, а не сжимается */
.feed.is-scrollable { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.feed.is-scrollable::-webkit-scrollbar { width: 8px; }
.feed.is-scrollable::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }

.guess { position: relative; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
         padding: 11px 12px 11px 14px; border-radius: var(--r-md);
         background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.guess__bar { position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
             border-radius: 0 999px 999px 0; background: var(--tint); }
.guess__rank { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
               min-width: 60px; justify-content: center; padding: 7px 10px; border-radius: var(--r-sm);
               background: var(--tint); color: var(--chip-ink);
               font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.guess__rank .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.guess.h-5 .guess__rank { color: var(--text); }
.guess__mid { display: flex; flex-direction: column; gap: 1px; flex: 1 1 140px; min-width: 0; }
.guess__word { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.guess__meta { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
               font-size: 12px; color: var(--text-2); }
.guess__nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; }
/* 11 px, а не 10: в таблице итогов этот значок («угадал» / «не угадал») читают
   с телефона, а на 10 px он сливается с фоном. */
.guess__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
              border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px; color: var(--text-2); }
.guess__tag--mine { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.guess__heat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
               color: var(--tint-text); flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap; }
.guess--mine { background: var(--surface-3); border-color: var(--line-2); }
.guess--win { border-color: rgba(34,197,94,.5); }

.h-win { --tint: var(--h-win); --tint-text: var(--h-win); }
.h-1   { --tint: var(--h-1);   --tint-text: #FF8A4C; }   /* мелкий текст: осветлённый тон */
.h-2   { --tint: var(--h-2); --tint-text: var(--h-2); }
.h-3   { --tint: var(--h-3); --tint-text: var(--h-3); }
.h-4   { --tint: var(--h-4); --tint-text: var(--h-4); }
.h-5   { --tint: var(--h-5); --tint-text: var(--text-2); }

.empty { color: var(--text-3); font-size: 13.5px; padding: 10px 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 12px; margin-top: 2px;
          border-top: 1px solid var(--line); }
.legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
.legend__item i { width: 8px; height: 8px; border-radius: 2px; background: var(--tint); flex: 0 0 auto; }
.legend__item.h-win .icon { width: 12px; height: 12px; color: var(--h-win); fill: var(--h-win); stroke: none; }

.scorelist { display: flex; flex-direction: column; }
.score { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.score:last-child { border-bottom: 0; }
.score__nick { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--text-2);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score--me .score__nick { color: var(--text); font-weight: 700; }
.score__attr { font-size: 12px; color: var(--text-3); }
.score__val { font-weight: 700; font-size: 15px; min-width: 2ch; text-align: right; }
.score__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--h-win); flex: 0 0 auto; }
.score__dot[data-off="1"] { background: var(--text-dim); }

/* ============================ 12. Итоги ============================ */
.result { display: flex; flex-direction: column; gap: 10px; padding: var(--s1) 0 0; }
.result__winner { font-size: clamp(26px, 8.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.result__winner .win-name { color: var(--h-win); }
.answer { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface);
          border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.answer__word { font-size: clamp(28px, 10vw, 42px); font-weight: 800; letter-spacing: -0.03em;
                color: var(--text); overflow-wrap: anywhere; }
.answer__word--none { font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--text-2); }

.autonext { height: 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.autonext span { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--accent);
                 transform: scaleX(0); }
.autonext.is-run span { animation: countdown 8s linear forwards; }
@keyframes countdown { to { transform: scaleX(1); } }

.leaderboard { display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--r-lg);
            background: var(--surface); border: 1px solid var(--line); }
.rank-row--1 { border-color: var(--line-2); background: var(--surface-2); }
.rank-row--me { border-color: var(--accent-line); }
.rank-row__place { font-weight: 700; font-size: 17px; color: var(--text-3); min-width: 2ch; }
.rank-row--1 .rank-row__place { color: var(--text); }
.rank-row__nick { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row__score { font-weight: 800; font-size: 18px; }
.rank-row__score small { font-size: 11px; color: var(--text-3); font-weight: 600; margin-left: 3px; }

/* «Кто ближе» */
.closest { display: flex; flex-direction: column; gap: 6px; }
.closest__row { position: relative; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
                padding: 11px 12px 11px 14px; border-radius: var(--r-md);
                background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.closest__bar { position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
               border-radius: 0 999px 999px 0; background: var(--tint); }
.closest__row--me { border-color: var(--line-2); background: var(--surface-3); }
.closest__row--won { border-color: rgba(34,197,94,.5); }
.closest__rank { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 52px;
                 justify-content: center; padding: 6px 9px; border-radius: var(--r-sm);
                 background: var(--tint); color: var(--chip-ink); font-weight: 800; font-size: 16px; }
.closest__rank .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.closest__rank--none { background: var(--surface-3); color: var(--text-2); font-size: 13px; border: 1px solid var(--line); }
.closest__main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 120px; min-width: 0; }
.closest__word { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.closest__word--none { color: var(--text-2); font-weight: 600; font-size: 14px; }
/* Ведущий раунда в «По очереди»: он загадал слово, поэтому в таблице стоит
   с подписью, а не с выдуманным «лучшим словом». */
.closest__word--setter { color: var(--accent); font-size: 15px; }
.closest__row--setter { border-color: var(--accent-line); }
.closest__tries { font-variant-numeric: tabular-nums; }
.closest__meta { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
                 font-size: 12px; color: var(--text-2); }
.closest__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
                 flex: 0 0 auto; margin-left: auto; text-align: right; }
.closest__pts { font-weight: 800; font-size: 18px; }
.closest__pts small { font-size: 11px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.closest__why { font-size: 11.5px; line-height: 1.4; color: var(--text-2); }

/* ============================ 13. Одиночный режим ============================ */
.metrics { display: flex; flex-direction: column; }
.metric { display: flex; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.metric:last-child { border-bottom: 0; }
.metric__label { flex: 1; min-width: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.metric__value { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.metric--good .metric__value { color: var(--h-win); }
.metric--new .metric__value { color: var(--accent); }
.metric__unit { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.recordnote { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
              background: var(--accent-soft); border: 1px solid var(--accent-line);
              color: var(--text); font-size: 13px; font-weight: 600; }
.recordnote .icon { width: 16px; height: 16px; color: var(--accent); }

/* ============================ 14. Служебное ============================ */
.splash { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-2);
           border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.splash__title { font-size: 18px; font-weight: 700; }
.splash__problem { display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 340px; margin-top: 8px; }

.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
          bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column;
          gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 12px 15px; border-radius: var(--r-md); font-size: 14px; font-weight: 600;
         background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
         animation: toastin 160ms ease both; }
.toast[data-kind="err"] { border-color: rgba(239,68,68,.55); color: #FFD9D4; }
.toast[data-kind="ok"] { border-color: rgba(34,197,94,.5); }
.toast[data-kind="warn"] { border-color: rgba(234,179,8,.5); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ============ Телефон: поле ввода сразу над найденными словами ============
   Заказ владельца 25.09.2026: на телефоне экранная клавиатура поднимается снизу и
   закрывала почти все найденные слова. Поэтому до 959 px включительно:
     • счётчики раунда стоят ВЫШЕ поля ввода (порядок блоков задан в index.html);
     • лента слов получает свою высоту и свою прокрутку;
     • шапка раунда, таймер и карточка «Догадки» сжаты, строки ленты компактнее;
     • пока поле в фокусе и экран сжат клавиатурой (класс .round--typing на body),
       на экране остаётся только нужное: счётчики → поле → «Догадки · ближе — выше» → лента.
   На широком экране (960 px и больше) всё остаётся как было. */

@media (max-width: 959px) {
  /* Шапка раунда и таймер — компактнее: их высота уходит ленте слов. */
  .roundhead { align-items: center; gap: 8px; }
  .roundhead__title { font-size: 26px; margin-top: 4px; }
  .roundhead__host strong { font-size: 13.5px; }
  .modebadge { margin-top: 4px; }
  .timerbar { padding: 8px 12px; gap: 8px; }
  .timerbar__label { font-size: 10px; }
  .timerbar__value { font-size: 15px; }

  /* Каждый отступ виден на маленьком экране — сжимаем их все. */
  .screen { gap: 10px; }
  .roundgrid, .roundgrid__main, .roundgrid__side { gap: 10px; }

  /* Карточка «Догадки»: заголовок «ближе — выше» стоит выше и занимает меньше места. */
  .card { padding: 12px 12px 10px; gap: 8px; }
  .card__head { gap: 6px; }
  .card__title { font-size: 15px; }
  /* 11 px вместо 10: подпись карточки («лучшее слово и очки») тоже читают с телефона. */
  .headnote { font-size: 11px; }
  .legend { padding-top: 8px; gap: 4px 12px; }
  .legend__item { font-size: 10.5px; }
  .empty { padding: 8px 2px; font-size: 13px; }

  /* Лента слов: своя высота и своя прокрутка — длинный список не растягивает страницу.
     Высоту подгоняет под целые строки fitFeed() в app.js (класс is-scrollable).
     46vh даёт на экране 844 px пять-шесть строк, а когда открыта клавиатура, лента
     в компактном виде растягивается на всю оставшуюся высоту (блок .round--typing ниже). */
  .feed { gap: 5px; max-height: 46vh; overflow-y: auto; padding-right: 2px; overscroll-behavior: contain; }
  #endFeed { gap: 5px; max-height: 46vh; overflow-y: auto; }

  /* Строка ленты: ранг слева, слово рядом с ним, подпись — во всю ширину строки.
     Так строка ниже, а в экран влезает больше найденных слов. */
  .guess { padding: 7px 9px 7px 11px; gap: 3px 8px; }
  .guess__mid { display: contents; }
  .guess__rank { order: 0; min-width: 46px; padding: 5px 7px; font-size: 16px; }
  .guess__rank::before { width: 7px; height: 7px; }
  .guess__word { order: 1; font-size: 15px; }
  .guess__heat { order: 2; font-size: 10.5px; }
  .guess__meta { order: 3; flex: 1 1 100%; font-size: 11px; line-height: 1.2; gap: 2px 6px; }
  .guess__tag, .guess__delta { padding: 0 5px; line-height: 1.25; }

  /* Счётчики раунда и кнопки — в одну строку, выше поля ввода. */
  .roundbar { gap: 6px 10px; }
  .stat { font-size: 11px; }
  .stat strong { font-size: 14px; }
  .roundbar .btn--small { padding: 6px 10px; font-size: 12.5px; }
  .btn--endround { flex: 1 1 100%; }

  /* Цели для пальца: поле ввода и кнопка отправки не меньше 44 px. */
  .input--guess { min-height: 46px; }
  .btn--send { width: 48px; min-height: 46px; }
}

/* Клавиатура открыта: поле в фокусе, а экран сжат (visualViewport ниже 560 px — признак
   открытой клавиатуры). Показываем только нужное при наборе слова. Кнопка «Завершить раунд»
   в это время скрыта: она всё равно оказалась бы под клавиатурой, а её место нужно словам.
   Как только клавиатура закрыта, весь экран возвращается. */
@media (max-width: 959px) {
  body.round--typing .topbar,
  body.round--typing .roundhead,
  body.round--typing .timerbar,
  body.round--typing .roundgrid__side,
  body.round--typing .legend,
  body.round--typing .waitbox,
  body.round--typing .startbar,
  body.round--typing #hostWordCard,
  body.round--typing #btnEndRound { display: none; }

  body.round--typing .app { padding-top: 4px; padding-bottom: 16px; }
  body.round--typing .screen { gap: 4px; }
  body.round--typing .roundgrid,
  body.round--typing .roundgrid__main { gap: 4px; }
  body.round--typing .card { padding: 4px 10px 6px; gap: 2px; }
  body.round--typing .card__title { font-size: 13.5px; }
  body.round--typing .counter { font-size: 11px; padding: 1px 6px; }
  /* Поле и кнопка — по нижней границе правила «палец»: их высота уходит словам. */
  body.round--typing .input--guess { min-height: 44px; padding: 8px 12px; }
  body.round--typing .btn--send { width: 46px; min-height: 44px; }
  body.round--typing .guess { padding: 3px 8px 3px 10px; }
  /* Ниже ленты в этом виде ничего нет: листается вся страница, а не лента внутри ленты. */
  body.round--typing .feed { max-height: none; overflow: visible; padding-right: 0; }
}

/* ============================ 15. Ломтики ============================ */
@media (max-width: 383px) {
  .player { gap: var(--s1); padding: 11px 2px; }
  .player--host .player__nick::after,
  .player--manager .player__nick::after { font-size: 9px; letter-spacing: .06em; padding: 2px 6px; }
  .player__score { font-size: 14px; }
  .guess__heat { font-size: 10.5px; letter-spacing: .04em; }
}

@media (min-width: 620px) {
  .app, .footer { max-width: 640px; }
  .app { padding: var(--s3) 20px 40px; }
  :root { --pad: 20px; --gap: 16px; }
}

@media (min-width: 960px) {
  .app, .footer { max-width: 1040px; }
  :root { --gap: 20px; }
  .hero__title { font-size: 60px; }

  /* Вход: слева заголовок и правила, справа имя и три равных входа. */
  #screen-entry { display: grid; grid-template-columns: 0.82fr 1.18fr; grid-template-areas:
    "hero resume" "hero actions"; gap: 28px; align-items: start; }
  #screen-entry .hero { grid-area: hero; padding-right: 24px; align-self: center; }
  #resumeCard { grid-area: resume; }
  .entrygrid { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .entrygrid__caption { grid-column: 1 / -1; }
  #nickCard { grid-column: 1 / -1; }
  .entrygrid #formSolo { grid-column: 1 / -1; }   /* одиночная игра — во всю ширину колонки */

  .roundgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
  .roundgrid .feed { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
  #endFeed { max-height: 34vh; overflow-y: auto; }
  .guess__heat { margin-left: auto; }
  .btn--endround { flex: 0 0 auto; }
  .modes { flex-direction: row; }
  .modebtn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
}


/* ============================ Что нового ============================ */
.news { padding: 0; overflow: hidden; }
.news__summary { display: flex; align-items: center; gap: 8px; padding: 13px 16px; cursor: pointer;
                 list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.news__summary::-webkit-details-marker { display: none; }
.news__summary:active { background: var(--surface-2); }
.news__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.news__title { font-weight: 600; }
.news__hint { margin-left: auto; color: var(--text-3); font-size: 13px; }
.news[open] .news__hint::after { content: ' ▲'; }
.news:not([open]) .news__hint::after { content: ' ▼'; }
.news__list { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.news__item { color: var(--text-2); font-size: 14px; line-height: 1.55;
              padding-left: 12px; border-left: 2px solid var(--accent-soft); }
.news__item strong { color: var(--text); font-weight: 600; }
.news__date { display: block; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.news .hint { padding: 0 16px 14px; }


/* ===================== Второй признак шкалы: форма значка =====================
   Цвет несёт смысл, но при дальтонизме красный и оранжевый сливаются
   (около 8% мужчин). Поэтому у каждой ступени ЕСТЬ И ФОРМА — она читается
   одинаково у всех. Формы: круг — горячо, ромб — теплее, треугольник — тепло,
   квадрат — прохладно, чёрточка — холодно.
   Подписи («очень горячо», «тепло») рядом остаются и удалять их нельзя. */
.guess__rank::before,
.legend__item i {
  content: '';
  flex: 0 0 auto;
  background: currentColor;
}
.guess__rank::before { width: 8px; height: 8px; color: var(--chip-ink); }
.guess.h-5 .guess__rank::before { color: var(--text); }

.h-win .guess__rank::before, .legend__item.h-win i { border-radius: 50%; }
.h-1   .guess__rank::before, .legend__item.h-1 i   { border-radius: 50%; }
.h-2   .guess__rank::before, .legend__item.h-2 i   { border-radius: 2px; transform: rotate(45deg); }
.h-3   .guess__rank::before, .legend__item.h-3 i   { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.h-4   .guess__rank::before, .legend__item.h-4 i   { border-radius: 1px; }
.h-5   .guess__rank::before, .legend__item.h-5 i   { height: 3px; border-radius: 2px; width: 12px; }

/* в легенде значки подкрашиваем цветом ступени, как и было */
.legend__item i { width: 10px; height: 10px; border-radius: 2px; background: var(--tint); color: var(--tint); }
.legend__item.h-5 i { width: 12px; height: 3px; background: var(--h-5); color: var(--h-5); }

/* Цели для пальца: всё, что нажимают, не меньше 44 px */
.btn, .btn--big, .input, .codebox { min-height: 44px; }


/* «Теплее / холоднее»: сравнение со своей прошлой догадкой */
.guess__delta { font-size: 11px; font-weight: 700; letter-spacing: .03em; border-radius: 999px;
                padding: 1px 7px; font-variant-numeric: tabular-nums; }
.guess__delta--hot  { color: #FFB07C; background: rgba(213, 94, 0, .18); }
.guess__delta--cold { color: #A9D8F5; background: rgba(86, 180, 233, .14); }
.guess__delta--same { color: var(--text-2); background: var(--surface-3); }


/* ============================== Как играть ============================== */
.howto__open { margin-top: var(--s2); }
.howto { margin-top: var(--s2); }
.howto__demo { margin-top: 14px; padding: 12px; border-radius: var(--r-md);
               background: var(--surface-2); border: 1px solid var(--line); }
.howto__caption { font-size: 14px; color: var(--text-2); margin-bottom: 10px; }
.howto__list { display: flex; flex-direction: column; gap: 8px; }
.howto__row { display: flex; align-items: center; gap: 12px; }
.howto__rank { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
               min-width: 60px; justify-content: center; padding: 6px 10px; border-radius: var(--r-sm);
               background: var(--tint); color: var(--chip-ink); font-weight: 800; font-size: 17px;
               font-variant-numeric: tabular-nums; }
.howto__rank .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.howto__row.h-5 .howto__rank { color: var(--text); }
.howto__mid { display: flex; flex-direction: column; min-width: 0; }
.howto__word { font-size: 15.5px; font-weight: 700; }
.howto__note { font-size: 12px; color: var(--text-2); }
.howto__rules { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.howto__rules li { position: relative; padding-left: 18px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.howto__rules li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 5px; height: 5px;
                           border-radius: 50%; background: var(--accent); }
.howto .btn--big { margin-top: 16px; }
/* форма значка и в примере «Как играть» */
.h-2 .howto__rank::before, .h-3 .howto__rank::before { content: ''; width: 8px; height: 8px; background: var(--chip-ink); }
.h-2 .howto__rank::before { border-radius: 2px; transform: rotate(45deg); }
.h-3 .howto__rank::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.h-5 .howto__rank::before { content: ''; width: 12px; height: 3px; border-radius: 2px; background: var(--text); }
.h-win .howto__rank::before, .h-1 .howto__rank::before, .h-4 .howto__rank::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-ink); }

/* ============================ Стикеры-реакции ============================
   Заказ владельца 25.09.2026. Набор картинок лежит в game/public/stickers,
   список читает страница (набор.json). Здесь только вид: кнопка, панель выбора
   и лента реакций, которая живёт поверх экрана и сама исчезает через пару секунд. */
.btn--sticker { display: inline-flex; align-items: center; gap: 6px;
                border-color: var(--line-2); color: var(--text); }
.stickerbtn__face { font-size: 15px; line-height: 1; }
.stickerrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stickerrow .hint { flex: 1 1 160px; }

/* Лента реакций: поверх страницы, над полем ввода, ниже плашек-сообщений. */
.stickerlayer { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%);
                bottom: calc(88px + env(safe-area-inset-bottom, 0px));
                width: min(92vw, 420px); display: flex; flex-direction: column;
                align-items: center; gap: 8px; pointer-events: none; }
.stickerbubble { display: flex; flex-direction: column; align-items: center; gap: 4px;
                 max-width: 100%; padding: 8px 12px 10px; border-radius: var(--r-lg);
                 background: var(--surface-2); border: 1px solid var(--line-2);
                 animation: stickerin 200ms ease both; }
.stickerbubble--out { animation: stickerout 220ms ease both; }
.stickerbubble__img { display: block; width: 96px; height: 96px; object-fit: contain; }
.stickerbubble__nick { max-width: 100%; font-size: 12px; font-weight: 700; color: var(--text-2);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes stickerin { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes stickerout { to { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* Панель выбора: «шторка» снизу — на телефоне до неё легко дотянуться большим пальцем. */
.stickerpanel { position: fixed; inset: 0; z-index: 70; display: flex;
                align-items: flex-end; justify-content: center; }
.stickerpanel__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.stickerpanel__sheet { position: relative; width: min(100%, 520px); max-height: 82vh; overflow-y: auto;
                       border-bottom-left-radius: 0; border-bottom-right-radius: 0;
                       padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
                       animation: sheetin 180ms ease both; }
@keyframes sheetin { from { opacity: .6; transform: translateY(14px); } }
.stickergrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stickergrid li { display: flex; }
.stickeritem { flex: 1 1 auto; min-height: 44px; padding: 6px; border-radius: var(--r-md);
               background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
               display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stickeritem:hover { border-color: var(--accent-line); }
.stickeritem:disabled { opacity: .5; cursor: default; }
.stickeritem__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.stickeritem__sprite { width: 100%; aspect-ratio: 1 / 1; background-repeat: no-repeat; }
.stickeritem__name { font-size: 10.5px; line-height: 1.2; color: var(--text-2); text-align: center; }
.stickercheck { display: flex; align-items: center; gap: 8px; min-height: 44px;
                font-size: 14px; color: var(--text); }
.stickercheck input { width: 20px; height: 20px; accent-color: var(--accent); }
@media (min-width: 620px) { .stickergrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============================ Монеты и покупка стикеров ============================
   Заказ владельца 25.09.2026: стикеры открываются за монеты, которые копятся за
   победы. Кошелёк — заметная строка, а не мелкая подпись: его ищут глазами. */
.wallet { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
          margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.wallet__value { font-size: 24px; font-weight: 800; color: var(--text);
                 letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wallet--panel { margin: 0 0 4px; }
.wallet--panel .wallet__value { font-size: 20px; }
#meWalletNote { margin-top: 2px; }

/* Закрытый стикер: картинка притемнена, поверх — замок и цена. */
.stickeritem--locked { border-style: dashed; }
.stickeritem--locked:hover { border-color: var(--accent-line); }
.stickeritem__pic { position: relative; display: block; width: 100%; }
.stickeritem--locked .stickeritem__img,
.stickeritem--locked .stickeritem__sprite { opacity: .3; filter: grayscale(1); }
.stickeritem__lock { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
                     font-size: 22px; line-height: 1; }
.stickeritem__price { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
                      padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff;
                      font-size: 12px; font-weight: 700; white-space: nowrap;
                      font-variant-numeric: tabular-nums; }

/* Вопрос «Купить стикер за 400 монет?» — как подтверждение конца раунда, только
   внутри панели стикеров. Кнопки не меньше 44 px: палец должен попадать. */
.buybar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px;
          padding: 12px 13px; border-radius: var(--r-md);
          background: var(--surface-2); border: 1px solid var(--accent-line); }
.buybar__text { font-size: 14.5px; font-weight: 600; color: var(--text); }
.buybar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.buybar__actions .btn { flex: 1 1 120px; min-height: 44px; }
@media (max-width: 359px) { .buybar__actions .btn { flex: 1 1 100%; } }