:root {
  --bg: #120d1f;
  --ink: #f4f1ff;
  --muted: #a69fc4;
  --accent: #e5484d;
  --gold: #f2c14e;
  --panel: rgba(18, 13, 31, .92);
  --pixel: "Silkscreen", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--pixel); }
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#screen { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; image-rendering: pixelated; }
button { font: inherit; color: inherit; cursor: pointer; }

/* menus */
.menu { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 16px; background: rgba(8, 5, 16, .55); }
.menu.open { display: grid; animation: fade .18s steps(4); }
@keyframes fade { from { opacity: 0; } }
.panel {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; text-align: center;
  background: var(--panel); border: 4px solid #3a2f5e; box-shadow: 0 0 0 4px #0b0815, 8px 8px 0 4px rgba(0,0,0,.4);
  padding: 22px 22px 18px; position: relative;
}
.panel.wide { width: min(520px, 100%); }
.back { position: absolute; left: 12px; top: 10px; color: var(--muted); font-size: 11px; text-decoration: none; }
.back:hover { color: var(--ink); }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .08em; margin: 14px 0 6px; text-transform: uppercase; }
h1 { font-size: clamp(44px, 12vw, 64px); line-height: .95; margin: 4px 0 10px; font-weight: 700; color: #fff;
  text-shadow: 4px 4px 0 var(--accent), 8px 8px 0 #3a2f5e; }
h2 { font-size: 30px; margin: 4px 0 12px; font-weight: 700; text-shadow: 3px 3px 0 var(--accent); }
h2.bday { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; color: var(--gold); text-shadow: 3px 3px 0 var(--accent); }
.blurb { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 6px 0 14px; }
.col { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mbtn {
  display: block; width: 100%; padding: 10px 12px; font-size: 14px; text-decoration: none; text-align: center;
  background: #241b3f; border: 3px solid #3a2f5e; color: var(--ink); box-shadow: 0 4px 0 #0b0815;
}
.mbtn:hover, .mbtn:focus-visible { background: #33285a; border-color: #6e5fb0; outline: none; }
.mbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b0815; }
.mbtn.primary { background: var(--accent); border-color: #ff7a7e; color: #fff; }
.mbtn.primary:hover { background: #f05a5f; }
.mbtn[hidden] { display: none; }
.best { color: var(--muted); font-size: 11px; margin: 14px 0 0; min-height: 1em; }
.keys { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; margin: 6px 0 10px; }
.keys td { padding: 6px 4px; border-bottom: 2px solid #2a2147; }
.keys td:first-child { color: var(--gold); width: 28%; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stats div { background: #241b3f; border: 3px solid #3a2f5e; padding: 10px 4px; }
.stats b { display: block; font-size: 22px; color: #fff; }
.stats span { font-size: 10px; color: var(--muted); }

/* touch controls */
.touch { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: none; }
body.touching .touch { display: block; }
.stick {
  position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom));
  width: 132px; height: 132px; border-radius: 50%; border: 3px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  pointer-events: auto; touch-action: none;
}
.knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(255,255,255,.28); border: 3px solid rgba(255,255,255,.4); }
.buttons { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 70px 70px; grid-template-rows: 70px 70px; gap: 10px; pointer-events: none; }
.tb {
  pointer-events: auto; touch-action: none; border-radius: 50%; border: 3px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: 11px; font-weight: 700;
}
.tb.on { background: rgba(255,255,255,.32); }
.tb.jump { grid-column: 2; grid-row: 2; background: rgba(229,72,77,.3); border-color: rgba(255,122,126,.7); width: 78px; height: 78px; margin: -4px; }
.tb.dash { grid-column: 1; grid-row: 2; background: rgba(60,138,214,.28); border-color: rgba(120,180,255,.6); }
.tb.grab { grid-column: 2; grid-row: 1; }
.pausebtn { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); width: 40px; height: 40px; border-radius: 8px; }