:root {
  --bg: #0a101a; --bar: #122033; --gold: #e8bc65; --gold-bg: #3a2a10; --blue: #70bcd6; --blue-bg: #10283a;
  --green: #54c879; --green-bg: #10301a; --purple: #b482e6; --purple-bg: #28163a; --red: #e05b62; --red-bg: #3a1014;
  --steer: #10283a; --muted: #96afc8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #f5faff; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#app { display: flex; flex-direction: column; height: 100%; max-width: 520px; margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px; background: var(--bar); flex: none; }
header .title { flex: 1; color: var(--gold); font-weight: 700; font-size: 18px; }
button { font: inherit; font-weight: 700; color: var(--blue); background: var(--blue-bg); border: 3px solid currentColor;
  border-radius: 16px; touch-action: none; cursor: pointer; }
button:active, button.pressed { filter: brightness(1.5); transform: scale(0.97); }
button small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.round { width: 46px; height: 34px; border-radius: 17px; font-size: 16px; padding: 0; }
#stage { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
canvas { display: block; touch-action: none; background: #000; }
#controls { flex: none; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; }
.row button { flex: 1; min-height: 70px; font-size: 19px; }
#steer button { min-height: 92px; font-size: 34px; }
#steer button small { font-size: 11px; }
#steer.dim button { opacity: 0.4; }
.gold { color: var(--gold); background: var(--gold-bg); }
.blue { color: var(--blue); background: var(--blue-bg); }
.green { color: var(--green); background: var(--green-bg); }
.purple { color: var(--purple); background: var(--purple-bg); }
.red { color: var(--red); background: var(--red-bg); }
.wide { font-size: 21px; }
.hidden { display: none !important; }
#sheet { position: fixed; inset: 0; background: rgba(5, 9, 15, 0.85); display: flex; align-items: center;
  justify-content: center; padding: 16px; z-index: 5; }
#sheet[hidden] { display: none; }
.card { background: var(--bar); border: 2px solid #8a6a2a; border-radius: 14px; padding: 16px; width: 100%;
  max-width: 420px; max-height: 100%; overflow-y: auto; touch-action: pan-y; }
.card h2 { margin: 0 0 12px; color: var(--gold); }
.card h3 { margin: 16px 0 6px; color: var(--gold); font-size: 16px; }
.card button { width: 100%; min-height: 52px; margin-bottom: 8px; font-size: 18px; }
.card p { margin: 4px 0 8px; font-size: 14px; line-height: 1.4; color: #dbe7f2; }
.card .fine { color: var(--muted); font-size: 12px; }
#loading, #error { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg); color: var(--gold); font-size: 18px; text-align: center; z-index: 9; }
#error { color: var(--red); white-space: pre-wrap; font-size: 13px; font-family: monospace; }
#error[hidden], #loading[hidden] { display: none; }