/* ============================================================
   «Serpenthole» — единая тёмная тема, намеренно.
   Все цвета заданы явно, страница не наследует фон хоста.
   ============================================================ */
:root{
  /* Размер текста в полях ввода. На пальцевых экранах 16px: Safari на iOS
     самовольно зумит страницу, если в поле меньше, и обратно не отъезжает.
     Подпись-мираж берёт тот же токен, иначе разъедется с текстом. */
  --in-size:12px;
  --void:#0a0812;
  --deep:#15102a;
  --panel:rgba(21,16,42,.78);
  --edge:rgba(180,160,220,.16);
  --edge-hot:rgba(180,160,220,.38);
  --ink:#ece4f5;
  --dust:#8b7fa3;
  --dim:#5d5474;

  --ice:#7fd4e8;
  --ember:#ff7a3c;
  --gold:#f2c14e;
  --rock:#b4a690;
  --organic:#4ade9b;
  --nebula:#c763e8;
  --danger:#ff4d6d;

  --f-display:'Jura','Trebuchet MS',system-ui,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
html{height:100dvh}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  overflow:hidden;
  height:100dvh;
  -webkit-font-smoothing:antialiased;
  /* телефон не должен ни скроллить, ни масштабировать, ни выделять текст
     при удержании пальца — всё это ломает управление */
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
/* Отступы под вырез нужны интерфейсу, но не полю: канвас должен доходить до
   физических краёв экрана, иначе по бокам появляются чёрные поля. Поэтому
   безопасная зона применяется к слою HUD, а не к сцене. */
/* Декоративные слои между канвасом и приборами. Оба — радиальные градиенты
   во весь экран: на канвасе такая заливка стоила 6.8 мс из 8 мс кадра, а
   здесь не стоит ничего, потому что не зависит от содержимого игры. */
#vignette,#heatGlow{position:absolute;inset:0;z-index:1;pointer-events:none}
#vignette{
  background:radial-gradient(circle at 50% 50%,
    rgba(10,8,18,0) 38%, rgba(10,8,18,.72) 100%);
}
/* Повторяет прежний канвасный градиент: радиус считается от высоты экрана
   (было VH*0.2 → VH*0.78), а средняя остановка воспроизводит смешивание
   канваса через прозрачный чёрный — без неё свечение выходит заметно ярче
   и теплее прежнего. Яркость задаёт opacity: (жар − 0.3) × 0.5. */
#heatGlow{
  background:radial-gradient(circle 78vh at 50% 50%,
    rgba(0,0,0,0) 26%, rgba(127,61,30,.5) 63%, rgba(255,122,60,1) 100%);
  opacity:0;
}

.hud{
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#stage{position:fixed;inset:0;background:var(--void)}
#game{position:absolute;inset:0;display:block;touch-action:none}

/* ---------- HUD ---------- */