/* «В клетку» — оболочка игры. Всё, что не игровое поле: HUD, тач-кнопки, страницы-оверлеи.
   Палитра одна на весь проект и повторяет чернила: бумага, клетка, синяя паста, красная. */

@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-cyrillic-wght-normal.woff2') format('woff2-variations');
  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: 'Caveat';
  src: url('fonts/caveat-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212;
}

:root {
  --paper: #fbfaf2;
  --grid: #aebfd8;
  --ink: #1b3a8f;
  --ink-deep: #16305f;
  --red: #b8372c;
  --pencil: #6b6f74;
  --hand: 'Caveat', 'Segoe Print', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hand);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#screen { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ───────────────────────── HUD ───────────────────────── */

#hud {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 clamp(10px, 3vw, 28px) calc(8px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.hud__left, .hud__right { display: flex; gap: clamp(10px, 3vw, 26px); align-items: flex-end; }
.hud__right { text-align: right; }

.gauge { line-height: 1; }
.gauge__label { display: block; font-size: clamp(11px, 2.4vw, 15px); color: var(--pencil); }
.gauge__num { display: block; font-size: clamp(26px, 7vw, 44px); font-weight: 700; }
.hud__right .gauge__num { color: var(--ink); }

#face { width: clamp(44px, 11vw, 64px); height: auto; }

.keys { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; min-height: 14px; }
.keys i {
  width: 16px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px;
  transform: rotate(-3deg);
}
.keys i.b { color: #2f5fb8; background: #2f5fb833; }
.keys i.r { color: var(--red); background: #b8372c33; }
.keys i.y { color: #b8912c; background: #b8912c33; }

.toast {
  position: fixed; left: 50%; top: 14%; transform: translateX(-50%);
  margin: 0; font-size: clamp(16px, 4vw, 24px); color: var(--ink);
  opacity: 0; transition: opacity .25s ease; text-align: center; max-width: 80vw;
}
.toast.show { opacity: 1; }

/* ───────────────────────── Тач ───────────────────────── */

#touch { position: fixed; inset: 0; z-index: 22; pointer-events: none; }

#joy {
  position: fixed; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  width: 132px; height: 132px; border-radius: 50%;
  border: 2px solid #1b3a8f44; background: #1b3a8f10;
  pointer-events: auto; touch-action: none;
}
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; border: 2px solid #1b3a8f66; background: #1b3a8f22;
}

.tbtn {
  position: fixed; pointer-events: auto; touch-action: none;
  font-family: var(--hand); color: var(--ink); background: #1b3a8f10;
  border: 2px solid #1b3a8f44; border-radius: 50%;
}
.tbtn--fire {
  right: calc(18px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  width: 104px; height: 104px; font-size: 20px;
}
.tbtn--use {
  right: calc(130px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom));
  width: 66px; height: 66px; font-size: 15px;
}
.tbtn--swap {
  right: calc(24px + env(safe-area-inset-right)); bottom: calc(136px + env(safe-area-inset-bottom));
  width: 66px; height: 66px; font-size: 15px;
}
.tbtn:active { background: #1b3a8f2e; }
.tbtn[hidden] { display: none; }

.corner {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  z-index: 23; font-family: var(--hand); font-size: 18px; color: var(--pencil);
  background: none; border: none; cursor: pointer; pointer-events: auto;
}

/* ──────────────────── Страницы-оверлеи ──────────────────── */

.sheet {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
  background:
    repeating-linear-gradient(to bottom, transparent 0 21px, #aebfd855 21px 22px),
    repeating-linear-gradient(to right, transparent 0 21px, #aebfd855 21px 22px),
    var(--paper);
}
.sheet[hidden] { display: none; }
.sheet__inner { width: min(620px, 92vw); text-align: center; }

.brand { font-size: clamp(54px, 16vw, 128px); font-weight: 700; margin: 0; line-height: .9; }
.brand__sub { color: var(--pencil); font-size: clamp(16px, 4vw, 22px); margin: 6px 0 26px; }

.hand { font-size: clamp(30px, 8vw, 54px); font-weight: 700; margin: 0 0 10px; }
.mark { font-size: clamp(90px, 26vw, 180px); color: var(--red); line-height: .8; }

.levels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.levels button {
  font-family: var(--hand); font-size: 20px; color: var(--ink);
  background: none; border: none; cursor: pointer; padding: 4px 10px;
}
.levels button[disabled] { color: var(--pencil); text-decoration: line-through; cursor: default; }
.levels button[aria-current='true'] { text-decoration: underline wavy var(--red); }

.row { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: center; margin-bottom: 22px; }
.pick { font-size: 19px; display: inline-flex; align-items: center; gap: 8px; }
.pick select, .pick input { font-family: var(--hand); font-size: 18px; accent-color: var(--ink); }

.big {
  font-family: var(--hand); font-size: clamp(26px, 6vw, 36px); color: var(--paper);
  background: var(--ink); border: none; border-radius: 4px;
  padding: 10px 34px; cursor: pointer; transform: rotate(-.6deg);
}
.big:hover { background: var(--ink-deep); }
.flat {
  display: block; margin: 14px auto 0; font-family: var(--hand); font-size: 20px;
  color: var(--pencil); background: none; border: none; cursor: pointer;
}

.tally { display: grid; grid-template-columns: auto auto; gap: 4px 18px; justify-content: center; font-size: 22px; margin: 18px 0; }
.tally dt { color: var(--pencil); text-align: right; }
.tally dd { margin: 0; text-align: left; font-weight: 700; }
.grade { font-size: 26px; }
.grade b { color: var(--red); font-size: 40px; }

.hint { color: var(--pencil); font-size: 16px; margin-top: 22px; line-height: 1.5; }

#err {
  position: fixed; inset: 8px 8px auto 8px; z-index: 99; max-height: 60vh; overflow: auto;
  margin: 0; padding: 10px; font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap;
  color: #fff; background: #b8372ce6; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}


/* На телефоне низ экрана занят пальцами: джойстик слева, огонь справа. Поэтому в
   тач-режиме показания переезжают наверх — иначе кнопка огня накрывает счётчик патронов,
   а джойстик закрывает здоровье, и игрок не видит ровно то, ради чего смотрит на HUD. */
body.touch #hud {
  inset: 0 0 auto 0;
  align-items: flex-start;
  padding: calc(4px + env(safe-area-inset-top)) clamp(10px, 3vw, 28px) 0;
}
body.touch .hud__left, body.touch .hud__right { align-items: flex-start; }
body.touch .gauge__num { font-size: clamp(22px, 5vw, 32px); }
body.touch #face { width: clamp(36px, 8vw, 48px); }
body.touch .toast { top: auto; bottom: 24%; }
body.touch .corner { top: calc(52px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }


#errCopy {
  position: fixed; right: 12px; top: calc(60vh + 16px); z-index: 100;
  font-family: var(--hand); font-size: 16px; color: #fff; background: #8a2018;
  border: none; border-radius: 4px; padding: 8px 14px; cursor: pointer;
}
#errCopy[hidden], #errReload[hidden] { display: none; }

#errReload {
  position: fixed; right: 12px; top: calc(60vh + 60px); z-index: 100;
  font-family: var(--hand); font-size: 16px; color: #8a2018; background: #fff;
  border: none; border-radius: 4px; padding: 8px 14px; cursor: pointer;
}