:root {
  color-scheme: dark;
  --ink: #05060f;
  --panel: #0d1226;
  --line: #1e2748;
  --text: #e8edfb;
  --dim: #93a0c4;
  --cyan: #3fe3ff;
  --magenta: #ff45a8;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(1200px 700px at 20% -10%, #17204a 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #2a1038 0%, transparent 55%),
    var(--ink);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

.app {
  height: 100%;
  display: flex;
  gap: 20px;
  padding: 16px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* The canvas keeps its own fixed ratio, sized in script from this box.
   It must not be a growing flex item: flex-grow plus stretch make both axes
   definite, and any declared aspect-ratio then does nothing. */
.stage-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The two canvases stack: WebGL underneath, the 2D HUD and overlays on top.
   In flat view the WebGL layer is hidden and the 2D renderer takes the top
   canvas, so the same element is always the input target. */
.stage {
  position: relative;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(120, 150, 220, 0.22),
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 0 90px rgba(63, 227, 255, 0.10);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.stage canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.stage canvas[hidden] { display: none !important; }

.side {
  flex: 0 0 310px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}

.brand h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand h1 span { font-weight: 400; }
.tagline { margin: 6px 0 0; color: var(--dim); font-size: 13px; }

.touch-pad { display: none; gap: 8px; }
.touch-pad .pad {
  flex: 1;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 700;
}

.row { display: flex; gap: 8px; }

.btn, .pad {
  flex: 1;
  appearance: none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #161e3d, #0e1430);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover, .pad:hover { border-color: #33406e; background: linear-gradient(180deg, #1c2650, #121937); }
.btn:active, .pad:active { transform: translateY(1px); background: #0b1130; }
.btn:focus-visible, .pad:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.help {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 18, 38, 0.72);
  padding: 12px 14px;
}
.help h2 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.help dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 13px;
}
.help dt { white-space: nowrap; }
.help dd { margin: 0; color: var(--dim); }
.help ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--dim); }
.help li { margin: 3px 0; }
.help li b { color: var(--text); font-weight: 600; }
.hint { margin: 10px 0 0; font-size: 12px; color: var(--dim); }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #121a38;
  font: 600 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  text-align: center;
}

.foot { margin-top: auto; padding-top: 4px; font-size: 12px; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--cyan); }

@media (max-width: 900px) {
  .app { flex-direction: column; gap: 12px; padding: 10px; }
  .side { flex: 0 0 auto; overflow: visible; }
  .stage-wrap { min-height: 55vh; }
  .brand, .help { display: none; }
  .touch-pad { display: flex; }
  .foot { margin-top: 0; text-align: center; }
}

@media (pointer: coarse) and (min-width: 901px) {
  .touch-pad { display: flex; }
}