:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #080c12;
  color: #eef3fa;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  overflow: auto;
  background: radial-gradient(circle at 50% -20%, #223b57, #0b111a 55%, #080c12);
}

button, a { -webkit-tap-highlight-color: transparent; }
.game-shell, .credits-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.game-shell { padding: 22px 0 16px; }
.game-shell > header { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
h1, h2 { color: #fff; }
h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: -.045em; }
h2 { margin: 0 0 16px; font-size: 1.35rem; }
header p, .credits-page p { color: #aebfd1; line-height: 1.6; }
header p { margin: 0; font-size: .92rem; }

.game-frame { height: clamp(520px, 76dvh, 820px); position: relative; }
.game-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #40546b;
  border-radius: 16px;
  background: #05070b;
  box-shadow: 0 26px 80px #0009;
  isolation: isolate;
}
.game-stage #canvas {
  display: block; width: 100%; height: 100%;
  position: absolute !important; inset: 0;
  touch-action: none; overscroll-behavior: contain; user-select: none;
}
.game-stage:fullscreen, .game-stage:-webkit-full-screen, .game-stage.focus-mode {
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
.game-stage.focus-mode { position: fixed; inset: 0; z-index: 1000; }
body.game-focused { overflow: hidden; }

.screen-actions { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.screen-actions span { position: absolute; display: flex; gap: 7px; pointer-events: auto; }
.display-actions { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.camera-actions { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
.screen-actions button, #help-close {
  width: 42px;
  height: 42px;
  border: 1px solid #8ba4bd70;
  border-radius: 12px;
  color: #f5f8fc;
  background: #111a25dc;
  box-shadow: 0 6px 22px #0008;
  font: 700 20px/1 inherit;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.screen-actions button:hover, .screen-actions button:focus-visible { border-color: #69c8ff; background: #1c3042; outline: none; }

.control-guide {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #7892ac70;
  border-radius: 18px;
  background: #101924f2;
  box-shadow: 0 30px 90px #000c;
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.control-guide.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
#help-close { position: absolute; top: 14px; right: 14px; }
.eyebrow { margin: 0 0 7px; color: #5fc8ff; font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.control-guide dl { margin: 0; display: grid; gap: 9px; }
.control-guide dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #8ba4bd25; }
.control-guide dt { color: #fff; font-weight: 750; }
.control-guide dd, .desktop-tip { margin: 0; color: #b7c5d4; line-height: 1.45; font-size: .88rem; }
.control-guide a { display: inline-block; margin-top: 18px; color: #6fd0ff; }

footer { width: min(1180px, calc(100% - 32px)); margin: 12px auto 24px; text-align: center; font-size: .82rem; }
a { color: #77c7ff; }
a:hover { color: #ffe154; }
.credits-page { max-width: 780px; padding: 44px 0 64px; }
.credits-page section { margin-top: 24px; padding: 20px 24px; border: 1px solid #415469; border-radius: 10px; background: #151d28dd; }

@media (max-width: 720px) {
  .game-shell { width: 100%; padding: 0; }
  .game-shell > header { height: 58px; margin: 0; padding: 0 14px; align-items: center; justify-content: space-between; }
  .game-shell > header h1 { font-size: 1.2rem; }
  .game-shell > header p { max-width: 64%; text-align: right; font-size: .72rem; line-height: 1.3; }
  .game-frame { height: calc(100dvh - 58px); min-height: 420px; }
  .game-stage { border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .screen-actions span { gap: 5px; }
  .screen-actions button { width: 40px; height: 40px; border-radius: 11px; background: #111a25ee; }
  .control-guide { padding: 24px 20px; }
  .control-guide dl div { grid-template-columns: 78px 1fr; }
  footer { display: none; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .game-shell > header { display: none; }
  .game-frame { height: 100dvh; min-height: 0; }
}