/* ОБЛИК И ВЁРСТКА.
 *
 * ⚠️ ПОРЯДОК РЕШЕНИЙ ЗДЕСЬ ОБРАТНЫЙ ПРИВЫЧНОМУ: сначала телефон, потом широкий экран. Жёсткая
 * величина — панель кнопок (её размер диктуется пальцем, а не вкусом), остальное отдаётся полю.
 * Обратный порядок даёт поле, которое «почти влезло», и кнопки, до которых не дотянуться.
 *
 * ⚠️ dvh, А НЕ vh. На телефоне адресная строка то появляется, то исчезает; 100vh считается по
 * максимальной высоте, и нижний ряд кнопок уезжает под строку браузера — нажатия просто не доходят.
 */
:root{
  --bg:#14101a; --panel:rgba(29,24,38,0.82); --line:rgba(140,118,170,0.22);
  --ink:#efe9f2; --dim:#a294b4; --accent:#f2c14e; --danger:#e56b6f;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --gap: 8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:clamp(0.82rem,3.2vw,0.95rem)/1.45 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Прокрутки в игре нет вовсе: страница ровно во весь экран. */
  overflow:hidden;
  /* ⚠️ touch-action, а НЕ pointer-events: последнее отключило бы приём касаний целиком. */
  touch-action:none; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}

#app{
  height:100dvh; display:grid;
  /* ⚠️ ЛОТКИ ДЕЛЯТ СТРОКУ СО СЧЁТОМ, а не занимают свою. Отдельная строка стоила 55 px высоты, и
   * клетка падала с 21 до 18 px — на телефоне это разница между «видно» и «щуришься». */
  /* ⚠️ minmax(0,1fr), А НЕ 1fr. Колонка «1fr» не может стать уже своего содержимого, а ряд кнопок
   * лежит в строке, растянутой на обе колонки: его собственная ширина продавливала сетку до 423 px
   * при экране 320 — вся раскладка уезжала вбок, и клетка падала до 13 px. Замерено, не угадано. */
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"hud trays" "stage stage" "pad pad";
  max-width:100%; overflow:hidden;
  padding:calc(var(--safe-t) + 6px) 8px calc(var(--safe-b) + 6px);
  gap:var(--gap);
}
#hud{grid-area:hud} #trays{grid-area:trays} #stage{grid-area:stage} #pad{grid-area:pad}
/* Каждый узел сетки обязан уметь сжиматься: без min-width:0 любой из них растянет строку. */
#hud,#trays,#stage,#pad{min-width:0}

/* ── верхняя строка ─────────────────────────────────────────────────────────────────────────── */
#hud{
  display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px 8px;
  backdrop-filter:blur(6px);
}
.stat{display:flex; flex-direction:column; line-height:1.1; min-width:0}
.stat span{font-size:0.68em; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.stat b{font-variant-numeric:tabular-nums; font-size:1.15em}
.stat.wide{flex:1; min-width:0}
.stat.wide b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* ⚠️ На телефоне «Город» из строки счёта убран: четыре показателя плюс два лотка не помещаются в
 * 320 px, и лоток «Держим» вытеснялся за край — механика есть, а на экране её нет. Название города
 * всё равно называет баннер при смене и экран конца игры. */
@media (max-width:759px){ .stat.wide{display:none} }
#menu{margin-left:auto}

/* ── сцена: задник, стакан, лотки ───────────────────────────────────────────────────────────── */
/* Виньетка по краям сцены: город к углам уходит в тень, взгляд держится на стакане. */
#stage::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(10,7,16,.55) 100%);
}
#stage{
  position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center; gap:var(--gap);
  border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
}
#sky{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
/* Стакан — не дыра в экране, а огранённая шахта: две обводки и тёплый отблеск по краю.
 * Без рамки поле читается чёрным прямоугольником, наклеенным поверх города. */
#well{
  position:relative; z-index:1; border-radius:12px; overflow:hidden;
  box-shadow:
    0 14px 46px rgba(0,0,0,.6),
    0 0 0 1px rgba(242,193,78,.28),
    0 0 0 5px rgba(20,15,28,.7),
    0 0 0 6px rgba(242,193,78,.12),
    inset 0 0 28px rgba(0,0,0,.5);
}
#board{display:block}

#banner{
  position:absolute; inset:auto 0 12%; z-index:2; pointer-events:none;
  display:grid; justify-items:center; gap:2px; text-align:center;
  transition:opacity .35s;
}
#banner b{font-size:clamp(1.2rem,6vw,2rem); letter-spacing:.04em;
  text-shadow:0 2px 18px #000, 0 0 2px #000}
#banner span{color:var(--accent); font-size:0.8em; letter-spacing:.14em; text-transform:uppercase}

#trays{display:flex; gap:6px; align-items:stretch}
.tray{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:5px 7px;
  backdrop-filter:blur(6px)}
.tray h2{margin:0 0 3px; font-size:0.62em; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); font-weight:600}
.tray canvas{display:block}
.tray.keys{display:none}

/* ── экранные кнопки ────────────────────────────────────────────────────────────────────────── */
#pad{display:grid; gap:var(--gap)}
#pad .row{display:flex; gap:20px; justify-content:center; min-width:0}  /* 20px — мёртвая зона */
#pad button{
  /* ⚠️ min-width:0, А НЕ 48px. Жёсткие 48 px не давали кнопке сжаться и продавливали всю сетку.
   * Размер пальца держится не минимальной шириной, а расчётом: на 320 px четыре кнопки с зазорами
   * по 20 px дают по 61 px — проверка check/touch.mjs меряет, доходят ли нажатия на самом деле. */
  flex:1 1 0; min-width:0; min-height:52px;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  font-size:1.3em; font-family:inherit;
  backdrop-filter:blur(6px); touch-action:none;
}
#pad .row.wide{gap:20px}
#pad .row.wide button{font-size:0.82em; min-height:46px; padding:0 4px; white-space:nowrap}
#pad .hard{background:rgba(242,193,78,0.16); border-color:rgba(242,193,78,0.4)}
#pad button:active{background:rgba(242,193,78,0.22)}
/* Отказ виден: игрок отличает «упёрся в стену» от «не нажалось». */
#pad button.refused{animation:refuse .22s}
@keyframes refuse{0%{background:rgba(229,107,111,.55)}100%{background:var(--panel)}}

button.ghost,button.primary{
  font-family:inherit; font-size:1em; border-radius:10px; padding:10px 16px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
}
button.primary{background:var(--accent); color:#241a08; border-color:transparent; font-weight:600}

/* ── экраны ─────────────────────────────────────────────────────────────────────────────────── */
#screen{position:fixed; inset:0; z-index:10; display:grid; place-items:center;
  background:rgba(12,9,18,.72); backdrop-filter:blur(8px); padding:16px}
#screen[hidden]{display:none!important}
.sheet{width:min(420px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:18px; display:grid; gap:10px; text-align:center}
.sheet h1{margin:0; font-size:clamp(1.4rem,7vw,2rem); letter-spacing:.02em}
.sheet p{margin:0; color:var(--dim)}
.scStats{display:flex; justify-content:center; gap:18px; flex-wrap:wrap}
.scStats div{display:flex; flex-direction:column}
.scStats span{font-size:.7em; text-transform:uppercase; letter-spacing:.08em; color:var(--dim)}
.scStats b{font-size:1.3em; font-variant-numeric:tabular-nums}
.acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
#scNameWrap{display:grid; gap:4px; font-size:.75em; color:var(--dim); text-align:left;
  text-transform:uppercase; letter-spacing:.08em}
#scName{font:inherit; font-size:1.15rem; padding:8px 10px; border-radius:9px; text-transform:none;
  border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--ink); letter-spacing:normal}
.board{list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:38dvh; overflow:auto;
  text-align:left}
.board li{display:grid; grid-template-columns:1.6em 1fr auto; gap:8px; padding:5px 8px;
  border-radius:8px; background:rgba(0,0,0,.25); align-items:baseline}
.board li.me{background:rgba(242,193,78,.16); outline:1px solid rgba(242,193,78,.35)}
.board .rank{color:var(--dim); font-variant-numeric:tabular-nums}
.board .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board .pts{font-variant-numeric:tabular-nums; font-weight:600}
.legal{font-size:.68em; color:var(--dim); line-height:1.45; margin:4px 0 0}

/* ── широкий экран: лотки становятся колонкой сбоку, кнопки прячутся ────────────────────────── */
@media (min-width:760px) and (pointer:fine){
  #pad{display:none}
  #app{
    grid-template-columns:1fr 160px;
    grid-template-rows:auto 1fr;
    grid-template-areas:"hud hud" "stage trays";
  }
  #trays{flex-direction:column; width:160px}
  #stage{padding:16px}
  .tray.keys{display:grid; gap:4px; color:var(--dim); font-size:.8em}
  kbd{background:rgba(0,0,0,.35); border:1px solid var(--line); border-bottom-width:2px;
    border-radius:5px; padding:1px 5px; font:0.9em ui-monospace,monospace; color:var(--ink)}
}

/* ⚠️ Ландшафт закрыт заглушкой, а не «как-нибудь уместится»: поле 10x20 в лежачем экране
 * телефона даёт клетку меньше пальца. */
@media (orientation:landscape) and (max-height:520px){
  #app{display:none}
  body::after{
    content:"Переверните устройство"; position:fixed; inset:0; display:grid; place-items:center;
    font-size:1.1rem; color:var(--ink); background:var(--bg); text-align:center; padding:24px;
  }
}