/* ==========================================================================
   ПОЛЕ ЧУДЕС — 8-битный ремейк
   Палитра построена на цветах NES; вся «объёмность» сделана ступенчатыми
   тенями без единого скругления — как в игровой графике тех лет.
   ========================================================================== */

/* ------------------------------ ШРИФТЫ ---------------------------------- */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/pressstart-cyr.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/pressstart-lat.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../fonts/pixelify-cyr.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../fonts/pixelify-lat.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* ------------------------------ ПЕРЕМЕННЫЕ ------------------------------ */
:root {
  --bg:        #101820;
  --bg-2:      #182838;
  --panel:     #203048;
  --ink:       #f8f8f8;
  --ink-dim:   #a0a8b8;
  --yellow:    #fcd800;
  --yellow-d:  #906800;
  --red:       #d82800;
  --red-d:     #781400;
  --blue:      #2038ec;
  --green:     #00a844;
  --green-d:   #005820;
  --purple:    #b41ec8;
  --cyan:      #3cbcfc;
  --grey:      #7c7c7c;
  --black:     #000;

  --pxs: 4px;               /* толщина «пикселя» рамок */
  --f8:  'Press Start 2P', 'Courier New', monospace;
  --fp:  'Pixelify Sans', 'Press Start 2P', monospace;
}

/* ------------------------------ СБРОС ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fp);
  font-size: 18px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse at 50% -10%, #2e3f5e 0%, #16203a 45%, var(--bg) 100%),
    var(--bg);
  overflow-x: hidden;
  /* в установленном приложении случайное выделение текста и «резиновый»
     скролл выглядят как баг, а двойной тап не должен зумить */
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* поля под вырезы и системные панели телефона */
#screen-title, #screen-game, #screen-end {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* в полях ввода выделение, наоборот, нужно */
input[type="text"] { -webkit-user-select: text; user-select: text; }

img, canvas { display: block; }

/* ==========================================================================
   ПИКСЕЛЬНЫЕ РАМКИ И КНОПКИ
   ========================================================================== */
.px-frame {
  box-shadow:
    0 calc(var(--pxs) * -1) 0 0 var(--black),
    0 var(--pxs) 0 0 var(--black),
    calc(var(--pxs) * -1) 0 0 0 var(--black),
    var(--pxs) 0 0 0 var(--black);
}

.btn {
  font-family: var(--f8);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--black);
  background: linear-gradient(180deg, #ffe650 0%, #e8c000 55%, #c8a000 100%);
  border: 0;
  padding: 14px 18px;
  cursor: pointer;
  position: relative;
  text-align: center;
  image-rendering: pixelated;
  box-shadow:
    inset calc(var(--pxs) * -1) calc(var(--pxs) * -1) 0 0 rgba(0, 0, 0, .38),
    inset var(--pxs) var(--pxs) 0 0 rgba(255, 255, 255, .45),
    0 calc(var(--pxs) * -1) 0 0 var(--black),
    0 var(--pxs) 0 0 var(--black),
    calc(var(--pxs) * -1) 0 0 0 var(--black),
    var(--pxs) 0 0 0 var(--black);
  transition: transform .06s steps(2), filter .1s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) {
  transform: translateY(var(--pxs));
  box-shadow:
    inset var(--pxs) var(--pxs) 0 0 rgba(0, 0, 0, .38),
    0 calc(var(--pxs) * -1) 0 0 var(--black),
    0 var(--pxs) 0 0 var(--black),
    calc(var(--pxs) * -1) 0 0 0 var(--black),
    var(--pxs) 0 0 0 var(--black);
}
.btn:disabled { opacity: .35; cursor: default; filter: grayscale(.7); }

.btn .hint {
  display: block;
  font-family: var(--fp);
  font-size: 12px;
  letter-spacing: 0;
  opacity: .55;
  margin-top: 4px;
  text-transform: lowercase;
}

.btn-big     { font-size: 14px; padding: 18px 34px; }
.btn-small   { font-size: 10px; padding: 11px 14px; }
.btn-ghost { background: linear-gradient(180deg, #33486a 0%, #1e2c46 100%); color: var(--ink); }
.btn-spin  { background: linear-gradient(180deg, #ff5a2c 0%, #d82800 55%, #9c1c00 100%); color: var(--ink); }
.btn-guess { background: linear-gradient(180deg, #2ad06a 0%, #00a844 55%, #00702c 100%); color: var(--ink); }

@keyframes pulse-btn {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}
.btn.pulse:not(:disabled) { animation: pulse-btn 1.1s steps(4, end) infinite; }

.icon-btn {
  font-family: var(--f8);
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
  border: 0;
  width: 38px; height: 34px;
  cursor: pointer;
  box-shadow:
    inset -2px -2px 0 0 rgba(0, 0, 0, .4),
    inset 2px 2px 0 0 rgba(255, 255, 255, .18),
    0 -2px 0 0 var(--black), 0 2px 0 0 var(--black),
    -2px 0 0 0 var(--black), 2px 0 0 0 var(--black);
}
.icon-btn.off { color: var(--grey); }
.icon-btn:active { transform: translateY(2px); }

/* ==========================================================================
   КАРКАС / ЭКРАНЫ
   ========================================================================== */
#crt {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.screen { display: none; }
.screen.active { display: block; }

/* ---------------------------- ТИТУЛЬНЫЙ --------------------------------- */
#screen-title { min-height: 100dvh; display: none; }
#screen-title.active { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

.title-inner { text-align: center; max-width: 560px; width: 100%; }

.logo {
  font-family: var(--f8);
  line-height: 1;
  margin-bottom: 14px;
}
.logo span { display: block; }
.logo-l1 {
  font-size: clamp(30px, 10vw, 58px);
  color: var(--yellow);
  text-shadow:
    var(--pxs) var(--pxs) 0 var(--red-d),
    calc(var(--pxs) * 2) calc(var(--pxs) * 2) 0 var(--black);
  animation: logo-blink 2.4s steps(2, end) infinite;
}
.logo-l2 {
  font-size: clamp(38px, 13vw, 76px);
  color: var(--red);
  margin-top: 10px;
  text-shadow:
    var(--pxs) var(--pxs) 0 var(--yellow-d),
    calc(var(--pxs) * 2) calc(var(--pxs) * 2) 0 var(--black);
}
@keyframes logo-blink {
  0%, 90%, 100% { filter: brightness(1); }
  95%           { filter: brightness(1.6); }
}

.logo-sub {
  font-family: var(--f8);
  font-size: clamp(8px, 2.6vw, 12px);
  color: var(--cyan);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.title-stars {
  color: var(--yellow);
  letter-spacing: 12px;
  font-size: 20px;
  margin-bottom: 22px;
  animation: star-pulse 1.6s steps(3, end) infinite;
}
@keyframes star-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.name-field {
  display: block;
  margin: 0 auto 26px;
  max-width: 320px;
}
.name-field span {
  display: block;
  font-family: var(--f8);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

input[type="text"] {
  font-family: var(--f8);
  font-size: 13px;
  width: 100%;
  padding: 14px 12px;
  text-align: center;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--bg-2);
  border: 0;
  outline: none;
  caret-color: var(--yellow);
  box-shadow:
    inset 3px 3px 0 0 rgba(0, 0, 0, .55),
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
}
input[type="text"]::placeholder { color: #4c5c70; }
input[type="text"]:focus {
  box-shadow:
    inset 3px 3px 0 0 rgba(0, 0, 0, .55),
    0 -3px 0 0 var(--cyan), 0 3px 0 0 var(--cyan),
    -3px 0 0 0 var(--cyan), 3px 0 0 0 var(--cyan);
}

#screen-title .btn { display: block; margin: 0 auto 14px; min-width: 260px; }

.title-record {
  font-size: 15px;
  color: var(--green);
  margin-top: 18px;
  min-height: 22px;
}
.title-foot {
  font-size: 14px;
  color: #56637a;
  margin-top: 10px;
}

/* ---------------------------- ИГРОВОЙ ЭКРАН ----------------------------- */
#screen-game { padding: 10px 12px 20px; max-width: 1080px; margin: 0 auto; }

/* --- сцена студии --- */
.studio-wrap {
  margin-bottom: 12px;
  line-height: 0;
  text-align: center;
}
#studio-canvas {
  width: 100%;
  height: auto;
  /* сцена не должна съедать пол-экрана на широком мониторе */
  max-height: 30vh;
  max-width: calc(30vh * 4);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    0 -4px 0 0 var(--black), 0 4px 0 0 var(--black),
    -4px 0 0 0 var(--black), 4px 0 0 0 var(--black);
}

/* Две колонки на десктопе: слева барабан и управление, справа задание и табло.
   На узких экранах колонки «растворяются» (display:contents) и порядок
   задаётся через order — чтобы табло шло сразу под заданием. */
.game-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.col-left, .col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.round-label {
  font-family: var(--f8);
  font-size: clamp(9px, 2.5vw, 13px);
  color: var(--yellow);
  letter-spacing: 1px;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }

.multiplier {
  font-family: var(--f8);
  font-size: 12px;
  color: var(--black);
  background: var(--yellow);
  padding: 7px 9px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s steps(3);
}
.multiplier.show { opacity: 1; transform: scale(1); animation: pulse-btn .8s steps(3) infinite; }

/* --- задание --- */
.task {
  background: linear-gradient(180deg, #2a3d5c 0%, #1b2942 100%);
  padding: 12px 14px;
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .35),
    inset 3px 3px 0 0 rgba(255, 255, 255, .10),
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
}
.task-cat {
  font-family: var(--f8);
  font-size: 8px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.task-q { font-size: clamp(16px, 3.6vw, 20px); color: var(--ink); }

/* --- табло --- */
.board-wrap { overflow-x: auto; padding: 4px 0 6px; }

.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 60px;
}

.tile {
  --ts: 52px;
  width: var(--ts);
  height: calc(var(--ts) * 1.2);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f8);
  font-size: calc(var(--ts) * .42);
  color: var(--black);
  background: linear-gradient(180deg, #24354e 0%, #141e30 100%);
  box-shadow:
    inset -4px -4px 0 0 rgba(0, 0, 0, .5),
    inset 4px 4px 0 0 rgba(255, 255, 255, .07),
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
  transition: background .12s;
}
.tile.open {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f6 42%, #d2d2e0 100%);
  color: #12121c;
  box-shadow:
    inset -4px -4px 0 0 rgba(0, 0, 0, .28),
    inset 4px 4px 0 0 #fff,
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
}

@keyframes tile-flip {
  0%   { transform: scaleX(1);   background: var(--yellow); }
  50%  { transform: scaleX(.05); background: var(--yellow); }
  100% { transform: scaleX(1);   background: var(--ink); }
}
.tile.flip { animation: tile-flip .4s steps(6, end); }

@keyframes tile-win {
  0%, 100% { background: var(--ink);   color: var(--black); }
  50%      { background: var(--green); color: var(--ink); }
}
.tile.win { animation: tile-win .5s steps(2, end) 4; }

/* длинные слова — плитки мельче */
.board[data-len="9"]  .tile, .board[data-len="10"] .tile { --ts: 46px; }
.board[data-len="11"] .tile, .board[data-len="12"] .tile { --ts: 40px; }
.board[data-len="13"] .tile, .board[data-len="14"] .tile { --ts: 36px; }

/* --- ведущий --- */
.host {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(180deg, #1e2f46 0%, #131e30 100%);
  padding: 11px 13px;
  margin-bottom: 14px;
  min-height: 62px;
  box-shadow:
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
}
.host-face {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background: #101828;
  box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--yellow-d);
}
.host-text { font-size: clamp(15px, 3.4vw, 19px); color: var(--yellow); }
.host-text::after {
  content: '_';
  animation: caret 1s steps(2, end) infinite;
  opacity: .7;
}
@keyframes caret { 0%, 50% { opacity: .7 } 51%, 100% { opacity: 0 } }

/* --- барабан + игроки --- */
.mid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.wheel-wrap { flex: 0 0 auto; align-self: center; }
#wheel-canvas {
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    0 -4px 0 0 var(--black), 0 4px 0 0 var(--black),
    -4px 0 0 0 var(--black), 4px 0 0 0 var(--black);
}

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.wheel-wrap.shake { animation: shake-x .5s steps(2, end) 2; }

.players {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.player {
  background: linear-gradient(180deg, #2a3d5c 0%, #1b2942 100%);
  padding: 8px 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .35),
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
  transition: background .15s;
}
.player.active {
  background: linear-gradient(180deg, #0c7a3c 0%, #044e22 100%);
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .35),
    0 -3px 0 0 var(--yellow), 0 3px 0 0 var(--yellow),
    -3px 0 0 0 var(--yellow), 3px 0 0 0 var(--yellow);
}
.player.active::before {
  content: '▶';
  position: absolute;
  left: -18px; top: 50%;
  transform: translateY(-50%);
  color: var(--yellow);
  font-size: 13px;
  animation: caret .7s steps(2, end) infinite;
}
.player.out { opacity: .4; filter: grayscale(1); }

.p-av {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background: #101828;
  box-shadow: 0 0 0 2px var(--black);
}
.player.active .p-av { box-shadow: 0 0 0 2px var(--yellow); }
.p-info { min-width: 0; flex: 1 1 auto; }

.p-name {
  font-family: var(--f8);
  font-size: 9px;
  color: var(--ink);
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player.human .p-name { color: var(--yellow); }
.p-city {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-score {
  font-family: var(--f8);
  font-size: 15px;
  color: var(--cyan);
  margin-top: 6px;
  letter-spacing: 1px;
}
.p-prize { font-size: 12px; color: #e07af0; }

/* --- кнопки хода --- */
.actions {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.actions .btn { flex: 1 1 0; }

.super-hint {
  display: none;
  font-family: var(--f8);
  font-size: 10px;
  color: var(--yellow);
  text-align: center;
  margin-bottom: 12px;
}
.super-hint.show { display: block; }

/* --- клавиатура --- */
.keyboard {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 5px;
  opacity: .45;
  transition: opacity .15s;
}
.keyboard.enabled { opacity: 1; }

.key {
  font-family: var(--f8);
  font-size: clamp(9px, 2.3vw, 12px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  background: linear-gradient(180deg, #e2e8f2 0%, #b8c2d2 100%);
  border: 0;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .32),
    inset 3px 3px 0 0 rgba(255, 255, 255, .55),
    0 -2px 0 0 var(--black), 0 2px 0 0 var(--black),
    -2px 0 0 0 var(--black), 2px 0 0 0 var(--black);
}
.key:hover:not(:disabled) { background: linear-gradient(180deg, #ffe860 0%, #e0b800 100%); }
.key:active:not(:disabled) { transform: translateY(2px); }
.key.used {
  background: linear-gradient(180deg, #46566c 0%, #2c3848 100%);
  color: #667488;
  box-shadow:
    inset 3px 3px 0 0 rgba(0, 0, 0, .45),
    0 -2px 0 0 var(--black), 0 2px 0 0 var(--black),
    -2px 0 0 0 var(--black), 2px 0 0 0 var(--black);
}
.key:disabled { cursor: default; }
.keyboard:not(.enabled) .key { cursor: default; }

/* --- сектор «Приз» --- */
.prize-choice {
  display: none;
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--purple);
  padding: 16px 20px;
  text-align: center;
  width: min(420px, calc(100vw - 32px));
  box-shadow:
    inset -4px -4px 0 0 rgba(0, 0, 0, .35),
    inset 4px 4px 0 0 rgba(255, 255, 255, .25),
    0 -4px 0 0 var(--black), 0 4px 0 0 var(--black),
    -4px 0 0 0 var(--black), 4px 0 0 0 var(--black);
}
.prize-choice.show { display: block; animation: pop-in .25s steps(4, end); }
.prize-box { font-size: 34px; animation: star-pulse 1s steps(2) infinite; }
.prize-q {
  font-family: var(--f8);
  font-size: 11px;
  margin: 8px 0 14px;
  color: var(--ink);
}
.prize-btns { display: flex; gap: 10px; }
.prize-btns .btn { flex: 1 1 0; }

@keyframes pop-in {
  0%   { transform: translateX(-50%) scale(.7); opacity: 0; }
  100% { transform: translateX(-50%) scale(1);  opacity: 1; }
}

/* --- заставка между турами --- */
.interlude {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.interlude.show { opacity: 1; }
.interlude-big {
  font-family: var(--f8);
  font-size: clamp(18px, 6vw, 38px);
  color: var(--yellow);
  text-align: center;
  text-shadow: var(--pxs) var(--pxs) 0 var(--red-d);
  animation: pulse-btn 1s steps(3) infinite;
}
.interlude-small { font-size: clamp(15px, 3.6vw, 20px); color: var(--cyan); text-align: center; padding: 0 20px; }

/* ---------------------------- ФИНАЛЬНЫЙ ЭКРАН --------------------------- */
#screen-end { min-height: 100dvh; display: none; }
#screen-end.active { display: flex; align-items: center; justify-content: center; padding: 28px 16px; }

.end-inner { max-width: 520px; width: 100%; text-align: center; }
.end-title {
  font-family: var(--f8);
  font-size: clamp(16px, 5.5vw, 30px);
  color: var(--yellow);
  text-shadow: var(--pxs) var(--pxs) 0 var(--red-d);
  margin-bottom: 16px;
}
.end-msg { font-size: 18px; color: var(--ink); margin-bottom: 22px; }

.end-stats {
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: left;
  box-shadow:
    0 -3px 0 0 var(--black), 0 3px 0 0 var(--black),
    -3px 0 0 0 var(--black), 3px 0 0 0 var(--black);
}
.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 2px dotted #3a4a60;
  font-size: 16px;
}
.stat:last-child { border-bottom: 0; }
.stat span { color: var(--ink-dim); }
.stat b { font-family: var(--f8); font-size: 11px; color: var(--cyan); }

.end-prizes { margin-bottom: 20px; }
.prizes-title {
  font-family: var(--f8);
  font-size: 9px;
  color: var(--purple);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.prize-item { font-size: 16px; color: var(--ink); }

.end-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------- МОДАЛЬНЫЕ ОКНА ---------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: rgba(8, 12, 20, .86);
}
.modal.show { display: flex; }

.modal-box {
  background: var(--panel);
  padding: 22px 20px;
  width: min(400px, 100%);
  text-align: center;
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow:
    inset -4px -4px 0 0 rgba(0, 0, 0, .35),
    inset 4px 4px 0 0 rgba(255, 255, 255, .12),
    0 -4px 0 0 var(--yellow), 0 4px 0 0 var(--yellow),
    -4px 0 0 0 var(--yellow), 4px 0 0 0 var(--yellow);
  animation: pop-in-c .22s steps(4, end);
}
@keyframes pop-in-c { 0% { transform: scale(.8); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }

.modal-wide { width: min(560px, 100%); text-align: left; }

.modal-title {
  font-family: var(--f8);
  font-size: 13px;
  color: var(--yellow);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.modal-sub { font-size: 15px; color: var(--ink-dim); margin-bottom: 14px; }
.modal-box input[type="text"] { margin-bottom: 18px; letter-spacing: 3px; }
.modal-btns { display: flex; gap: 10px; justify-content: center; }

.rules-body { font-size: 16px; margin-bottom: 18px; }
.rules-body p { margin: 0 0 12px; }
.rules-body b { color: var(--yellow); }
.rules-body ul { margin: 0 0 12px; padding-left: 20px; }
.rules-body li { margin-bottom: 6px; }
.s-num    { color: var(--cyan)   !important; }
.s-bank   { color: #ff6650       !important; }
.s-zero   { color: var(--grey)   !important; }
.s-prize  { color: #e07af0       !important; }
.s-plus   { color: var(--cyan)   !important; }
.s-x2     { color: #ff9c88       !important; }
.s-chance { color: var(--ink)    !important; }
#rules-close { display: block; margin: 0 auto; }

/* ---------------------------- ПЛАШКИ PWA -------------------------------- */
.install-bar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 200%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(460px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--panel);
  font-size: 15px;
  transition: transform .3s steps(6, end);
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .35),
    inset 3px 3px 0 0 rgba(255, 255, 255, .12),
    0 -3px 0 0 var(--yellow), 0 3px 0 0 var(--yellow),
    -3px 0 0 0 var(--yellow), 3px 0 0 0 var(--yellow);
}
.install-bar.show { transform: translate(-50%, 0); }
.install-bar span { flex: 1 1 100%; text-align: center; }
.update-bar {
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, .35),
    inset 3px 3px 0 0 rgba(255, 255, 255, .12),
    0 -3px 0 0 var(--green), 0 3px 0 0 var(--green),
    -3px 0 0 0 var(--green), 3px 0 0 0 var(--green);
}

/* ---------------------------- CRT-ЭФФЕКТЫ ------------------------------- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .16) 0px,
    rgba(0, 0, 0, .16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 199;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

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

/* ---------------------------- АДАПТИВ ----------------------------------- */
/* ==========================================================================
   ШИРОКИЙ ЭКРАН
   Тоже вмещаем игру целиком: страница высотой в экран, барабан забирает
   остаток высоты левой колонки.
   ========================================================================== */
@media (min-width: 861px) {
  #screen-game.active {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 12px;
  }

  .topbar, .studio-wrap { flex: 0 0 auto; }
  .studio-wrap { margin-bottom: 10px; }
  #studio-canvas { max-height: 22dvh; max-width: calc(22dvh * 3.93); }

  .game-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .col-left, .col-right { height: 100%; }

  .wheel-wrap {
    flex: 1 1 auto;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* базовое align-self:center ужимало обёртку до натуральных 256px,
       и барабан переставал расти вместе с колонкой */
    align-self: stretch;
  }
  /* height:100% вместе с max-width растягивало барабан в овал:
     задаём сторону явно, пропорцию держит aspect-ratio */
  #wheel-canvas { width: min(100%, 44dvh); height: auto; }

  .board-wrap { flex: 0 0 auto; }
  .keyboard { flex: 0 0 auto; }
  /* без ограничения клавиши раздуваются до 60px и выталкивают низ страницы */
  .key { aspect-ratio: auto; height: clamp(34px, 5.2dvh, 46px); }

  /* колонка не должна выпускать содержимое за экран: сжимается барабан,
     а карточки игроков остаются целыми */
  .col-left { overflow: hidden; }
  .players { flex: 0 0 auto; }
}

/* Широкий, но невысокий экран (ноутбук): ужимаем карточки игроков,
   иначе третья уезжает под нижний край. */
@media (min-width: 861px) and (max-height: 900px) {
  .wheel-wrap { min-height: 120px; }
  .player { padding: 6px 9px; }
  .p-city { display: none; }
  .p-av { width: 28px; height: 28px; }
  .p-score { font-size: 13px; margin-top: 3px; }
  #studio-canvas { max-height: 20dvh; max-width: calc(20dvh * 3.93); }
}

/* ==========================================================================
   УЗКИЙ ЭКРАН
   Игра должна помещаться в один экран без прокрутки: раскладка становится
   вертикальной колонкой фиксированной высоты, а барабан забирает себе весь
   остаток места. Колонки «растворяются» (display:contents), порядок задаётся
   через order — задание и табло идут первыми.
   ========================================================================== */
@media (max-width: 860px) {
  #screen-game.active {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100dvh;
    max-width: none;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  .topbar, .studio-wrap { flex: 0 0 auto; margin-bottom: 0; }

  .game-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    /* без этого блоки наследуют align-items:start от десктопной сетки
       и сжимаются по содержимому вместо полной ширины */
    align-items: stretch;
  }
  .col-left, .col-right { display: contents; }

  .task       { order: 1; flex: 0 0 auto; }
  .board-wrap { order: 2; flex: 0 0 auto; }
  .host       { order: 3; flex: 0 0 auto; }
  .wheel-wrap { order: 4; flex: 1 1 auto; min-height: 0; }
  .players    { order: 5; flex: 0 0 auto; }
  .actions    { order: 6; flex: 0 0 auto; }
  .super-hint { order: 7; flex: 0 0 auto; }
  .keyboard   { order: 8; flex: 0 0 auto; }

  /* барабан подстраивается под свободную высоту */
  .wheel-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #wheel-canvas { width: min(100%, 32dvh); height: auto; }

  /* сцена на телефоне узкая и высокая — лимит не должен её ужимать
     сильнее, чем это делает ширина экрана */
  #studio-canvas { max-height: 26dvh; max-width: 100%; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .topbar { margin-bottom: 0; }
  .round-label { font-size: 9px; }
  .icon-btn { width: 32px; height: 28px; font-size: 11px; }

  .task { padding: 7px 9px; }
  .task-cat { font-size: 7px; margin-bottom: 4px; }
  .task-q { font-size: 15px; line-height: 1.3; }

  .board-wrap { padding: 2px 0; }
  .board { gap: 4px; }
  .tile { --ts: 36px; }
  .board[data-len="8"]  .tile, .board[data-len="9"]  .tile { --ts: 32px; }
  .board[data-len="10"] .tile, .board[data-len="11"] .tile { --ts: 28px; }
  .board[data-len="12"] .tile, .board[data-len="13"] .tile,
  .board[data-len="14"] .tile { --ts: 24px; }

  .host { padding: 6px 8px; min-height: 0; gap: 7px; }
  .host-face { width: 32px; height: 32px; }
  .host-text { font-size: 14px; line-height: 1.25; }

  /* игроки — одна компактная строка: аватар и счёт */
  .players { width: 100%; flex-direction: row; gap: 5px; }
  .player {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 4px;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }
  .player.active::before { display: none; }
  .p-info { width: 100%; }
  .p-av { width: 26px; height: 26px; }
  .p-name { font-size: 7px; }
  .p-city { display: none; }
  .p-score { font-size: 10px; margin-top: 1px; letter-spacing: 0; }

  .actions { gap: 7px; }
  .btn { font-size: 10px; padding: 10px 8px; }
  .btn .hint { display: none; }

  .keyboard { gap: 4px; }
  .key { aspect-ratio: auto; height: 30px; font-size: 11px; }

  .super-hint { font-size: 8px; }
}

/* Низкие экраны: ужимаем всё второстепенное, чтобы барабан остался крупным
   и не появился скролл. Барабан — главный элемент, ему отдаётся остаток. */
@media (max-width: 720px) and (max-height: 740px) {
  #screen-game.active { gap: 5px; }
  .game-grid { gap: 5px; }

  #studio-canvas { max-height: 17dvh; }

  .task { padding: 5px 8px; }
  .task-cat { display: none; }
  .task-q { font-size: 13px; line-height: 1.25; }

  .tile { --ts: 28px; }
  .board[data-len="8"]  .tile, .board[data-len="9"]  .tile { --ts: 26px; }
  .board[data-len="10"] .tile, .board[data-len="11"] .tile { --ts: 23px; }
  .board[data-len="12"] .tile, .board[data-len="13"] .tile,
  .board[data-len="14"] .tile { --ts: 20px; }

  .host { padding: 4px 6px; gap: 6px; }
  .host-face { width: 26px; height: 26px; }
  .host-text { font-size: 12px; line-height: 1.2; }

  .wheel-wrap { min-height: 104px; }

  .player { padding: 3px; }
  .p-av { width: 20px; height: 20px; }
  .p-name { font-size: 6px; }
  .p-score { font-size: 9px; }

  .btn { padding: 7px 5px; font-size: 9px; }
  .key { height: 24px; font-size: 10px; }
  .keyboard { gap: 3px; }
}

@media (max-width: 380px) {
  .tile { --ts: 30px; }
  .key { font-size: 10px; }
  .p-name { font-size: 6px; }
}