/* Общие стили аркады: тёмный фон, игра на весь экран, экраны старта и проигрыша поверх канваса. */
:root {
  --bg: #0b0d14;
  --fg: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #1a9fff;
  --panel: rgba(12, 14, 22, 0.86);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.game { position: fixed; inset: 0; touch-action: none; }
.game canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.hud {
  position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 12px; left: 150px;
  display: flex; justify-content: flex-end; gap: 14px; pointer-events: none;
  font: 700 18px/1 var(--font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hud small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; text-align: right; }

.to-hub, .pause, .mute {
  position: fixed; top: calc(env(safe-area-inset-top) + 8px); z-index: 5;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(24, 24, 27, 0.7); color: var(--fg);
  font: 600 18px/1 var(--font); text-decoration: none; cursor: pointer;
}
.to-hub { left: 12px; }
.pause { left: 58px; }
.mute { left: 104px; font-size: 16px; }
.pause[hidden] { display: none; }
.pause[hidden] ~ .mute { left: 58px; }
.to-hub:focus-visible, .pause:focus-visible, .mute:focus-visible, .screen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.screen {
  position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px;
  /* Без backdrop-filter: размытие поверх анимированного канваса дорого на телефонах. */
  background: radial-gradient(ellipse at center, rgba(5, 6, 10, 0.5), rgba(5, 6, 10, 0.78));
}
.screen[hidden] { display: none; }
.screen__card {
  width: min(360px, 100%); padding: 26px 22px 22px; border-radius: 20px; text-align: center;
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.screen h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: 0.02em; }
.screen p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.screen .score { margin: 6px 0 16px; font: 800 44px/1 var(--font); font-variant-numeric: tabular-nums; }
.screen .best { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.screen .best b { color: var(--fg); }
.screen .new { color: #facc15; font-weight: 700; }
.screen button {
  width: 100%; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink, #fff); font: 700 18px/1 var(--font);
}
.screen button:active { transform: scale(0.98); }