/* One 9:16 frame centered on any screen. Everything the clip needs is drawn in the canvas;
   these DOM screens are only for buttons and never appear in the recording. */
:root {
  --ink: #1b1530;
  --pop: #ffcb05;
  --go: #3ddc84;
  --bad: #ff4d6d;
  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  /* Game HUD tokens. The HUD is drawn on the canvas (so it's in the recorded clip); render.js reads these. */
  --hud-ink: #141829;          /* outlines, extrusions, drop shadows */
  --hud-white: #ffffff;
  --hud-bevel: #d5dcec;        /* the lip along the bottom inside of a capsule */
  --hud-yellow: #ffcb05;
  --hud-yellow-deep: #ffa400;
  --hud-cyan: #7fe3ff;
  --hud-pale-cyan: #d9f7ff;
  --hud-green: #3ddc84;
  --hud-red: #ff4d6d;
  --hud-red-deep: #d52f52;
  --hud-pink: #ffa8cf;
  --hud-plate: rgba(20, 24, 41, 0.7);   /* dark translucent panels */
  --hud-plate-edge: rgba(255, 255, 255, 0.24);
  --hud-font-display: 'Lilita One';     /* big callouts */
  --hud-font: 'Fredoka';                /* numbers and labels */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--ink); color: #fff; font-family: var(--display); overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* the page runs under the notch (viewport-fit=cover): keep the game frame inside the safe area */
body { display: grid; place-items: center; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

.frame { position: relative; height: min(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px), 177.78vw); aspect-ratio: 9 / 16; max-width: 100vw; overflow: hidden; container-type: size; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#cam { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Stop: lines up with the top HUD row the canvas draws (7.5% down), inside the right safe line. Not in the recording. */
.stop-btn { position: absolute; z-index: 6; top: 9cqh; right: 13.9cqw; height: 4.8cqh; padding: 0 2cqh; display: flex; align-items: center; gap: 1cqh; font: 800 2.1cqh var(--display); color: var(--ink); background: #fff; border: .4cqh solid var(--ink); border-radius: 999px; box-shadow: 0 .5cqh 0 var(--ink); cursor: pointer; }
.stop-btn span { width: 1.5cqh; height: 1.5cqh; border-radius: .3cqh; background: #ff4d6d; }
/* Pause: a round navy button at the bottom center, under the watermark (DOM only, so it's not in the clip) */
.pause-btn { /* a small white capsule-style button in the top HUD row; main.js sets --pause-x/y/size from the canvas layout */
  position: absolute; z-index: 6; left: calc(var(--pause-x, 59) * 1cqw); top: calc(var(--pause-y, 7.5) * 1cqh); width: calc(var(--pause-size, 4.5) * 1cqh); height: calc(var(--pause-size, 4.5) * 1cqh);
  display: flex; align-items: center; justify-content: center; gap: .7cqh; padding: 0; border-radius: 50%;
  background: linear-gradient(var(--hud-white) 70%, var(--hud-bevel) 70%); border: .31cqh solid var(--hud-ink); box-shadow: 0 .47cqh 0 var(--hud-ink); cursor: pointer; }
.pause-btn span { width: .7cqh; height: 1.9cqh; border-radius: .25cqh; background: var(--hud-ink); }
.pause-btn:active { transform: translateY(.3cqh); box-shadow: 0 .17cqh 0 var(--hud-ink); }
#pauseScreen { background: rgba(20, 24, 41, .55); }
.pause-card { width: 62cqw; display: flex; flex-direction: column; align-items: stretch; gap: 1.6cqh; padding: 3cqh 4cqw; border-radius: 3cqh; background: var(--hud-plate); border: 2px solid var(--hud-plate-edge); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pause-card h2 { margin: 0 0 .5cqh; font: 400 6cqh var(--hud-font-display), var(--display); color: var(--hud-yellow); -webkit-text-stroke: .6cqh var(--hud-ink); paint-order: stroke fill; text-shadow: 0 .6cqh 0 var(--hud-ink); }
.pause-card .btn { min-width: 0; padding: 1.3cqh 0; font: 400 3cqh var(--hud-font-display), var(--display); color: var(--hud-ink); border: .45cqh solid var(--hud-ink); box-shadow: 0 .6cqh 0 var(--hud-ink); }
.pause-card .btn:not(.white) { background: var(--hud-yellow); }
/* Top 3 (start screen and pause menu): a small navy plate; quiet one-liner when empty or offline */
.board { padding: 1cqh 1.8cqh; border-radius: 1.8cqh; background: var(--hud-plate); border: .25cqh solid var(--hud-plate-edge); color: #fff; font: 600 1.6cqh var(--hud-font), var(--display); text-align: left; }
.board-title { margin: 0 0 .4cqh; font: 400 1.7cqh var(--hud-font-display), var(--display); letter-spacing: .04em; color: var(--hud-yellow); text-align: center; }
.board ol { margin: 0; padding: 0 0 0 2.4cqh; display: flex; flex-direction: column; gap: .2cqh; }
.board li { padding-left: .4cqh; }
.board li::marker { color: var(--hud-yellow); font-weight: 700; }
.board li span { display: inline-block; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.board li b { float: right; margin-left: 1.5cqh; font-weight: 700; }
.board-empty { margin: 0; text-align: center; opacity: .75; font-size: 1.45cqh; }
.pause-card .board { margin-bottom: .6cqh; }
#startScreen .board { position: absolute; top: 3cqh; right: 4cqw; width: 36cqw; }
/* fun fact: the same navy plate as the top 3 board, mirrored to the top left */
#startScreen .fact { position: absolute; top: 3cqh; left: 4cqw; width: 36cqw; padding: 1cqh 1.6cqh; border-radius: 1.8cqh; background: var(--hud-plate); border: .25cqh solid var(--hud-plate-edge); color: #fff; }
#startScreen .fact p { margin: 0; font: 600 1.45cqh/1.3 var(--hud-font), var(--display); }
#startScreen .fact .board-title { margin-bottom: .4cqh; font: 400 1.7cqh var(--hud-font-display), var(--display); }
.end .rank { align-self: center; margin: 0 0 .4cqh; padding: .6cqh 1.8cqh; border-radius: 999px; font: 700 1.8cqh var(--hud-font), var(--display); color: #fff; background: var(--hud-plate); border: .25cqh solid var(--hud-plate-edge); }
.stop-btn:active { transform: translateY(.4cqh); box-shadow: 0 .1cqh 0 var(--ink); }

.screen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; text-align: center; padding: 13% 9% 15% 6%; background: rgba(27, 21, 48, .62); }
/* Results: the buttons start just under the canvas's TIME! panel (it ends ~47% down) and stay above the
   watermark badge (~82% down). Arcade type and the HUD's navy ink; yellow = the one thing to do next. */
.screen.end { background: none; justify-content: flex-start; padding: calc(var(--result-bottom, 55.4) * 1cqh + 2.4cqh) 0 0; } /* right under the canvas TIME! card */
.end-actions { width: 70cqw; display: flex; flex-direction: column; align-items: stretch; gap: 1.2cqh; }
.end-row { display: flex; gap: 2.5cqw; }
.end-row .btn { flex: 1; }
.end .btn { min-width: 0; padding: 1.1cqh 0; font: 400 2.8cqh var(--hud-font-display), var(--display); letter-spacing: .02em; color: var(--hud-ink); border: .45cqh solid var(--hud-ink); box-shadow: 0 .6cqh 0 var(--hud-ink); }
.end .btn:active { transform: translateY(.4cqh); box-shadow: 0 .2cqh 0 var(--hud-ink); }
.end .btn:not(.white) { background: var(--hud-yellow); }
.end .entered, .end .fine, .end .link { align-self: center; }
.end .entered { font: 700 1.9cqh var(--hud-font), var(--display); border-color: var(--hud-ink); }
.end .fine { font: 600 1.5cqh var(--hud-font), var(--display); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); opacity: 1; }
.end .link { font: 600 1.6cqh var(--hud-font), var(--display); }
.replay { /* over Snorlax on the top edge of the canvas TIME! card (--result-top): 15% of the frame tall, one sprite cell wide */
  position: absolute; left: 50%; bottom: calc(100cqh - var(--result-top, 31) * 1cqh - 1.4cqh); height: 15cqh; aspect-ratio: var(--sprite-aspect, 1.09);
  transform: translateX(-50%); padding: 0; border: 0; cursor: pointer; background: none; }
/* Snorlax himself is drawn on the canvas (render.js) so he's in the saved clip; this is his tap target */
.replay-tag { position: absolute; right: -2cqh; top: 2.5cqh; padding: .4cqh 1.2cqh; font: 700 1.6cqh var(--hud-font), var(--display); color: var(--hud-ink); background: var(--hud-yellow); border: .25cqh solid var(--hud-ink); border-radius: 999px; box-shadow: 0 .3cqh 0 var(--hud-ink); white-space: nowrap; }
.replay.singing .replay-tag { display: none; }
.end .data-link { position: absolute; left: 50%; bottom: 1.5cqh; transform: translateX(-50%); font-size: 1.25cqh; font-weight: 500; opacity: .45; text-shadow: none; white-space: nowrap; }

/* Start screen: a looping 9:16 art video (assets/start.mp4) fills the frame, and the real controls sit
   on top at fixed frame positions (cqh/cqw), matching where the video draws its panel and START button. */
/* the still frame sits behind the video, so it shows while loading or if the phone won't autoplay (Low Power Mode) */
#startScreen { --ink: #16204d; display: block; padding: 0; background: #ead9f2 url(../assets/start.jpg) center / cover no-repeat; }
.start-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
#startScreen.still .start-video { visibility: hidden; }
/* never show iOS Safari's own play button over the background video */
.start-video::-webkit-media-controls,
.start-video::-webkit-media-controls-start-playback-button,
.start-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#startScreen .logo { position: absolute; top: 12.6cqh; left: 50%; width: 17cqw; height: auto; transform: translateX(-50%); filter: drop-shadow(0 .5cqh .8cqh rgba(0, 0, 0, .3)); }
#startScreen .err { position: absolute; top: 44.5cqh; left: 10cqw; right: 10cqw; padding: .8cqh 1.6cqh; font-size: 1.7cqh; color: #c2183c; background: #fff; border: .4cqh solid var(--ink); border-radius: 1.6cqh; max-width: none; }
/* covers the "Yell to fly." bar drawn at 69-76% of the height; grows upward if the text wraps */
#startScreen .how { position: absolute; left: 12.5cqw; right: 12.5cqw; bottom: 23.2cqh; max-width: none; padding: .8cqh 1.4cqh; font-size: 1.75cqh; line-height: 1.28; color: var(--ink); background: #fffaf2; border: .45cqh solid var(--ink); border-radius: 2.4cqh; box-shadow: 0 .6cqh 0 var(--ink); }
#startScreen .how b { font-weight: 800; background: linear-gradient(transparent 58%, var(--pop) 58%); }
#startScreen .how b:nth-of-type(-n+2) { padding: 0 .5cqh; white-space: nowrap; border-radius: .7cqh; text-transform: uppercase; background: var(--pop); }
#startScreen .how b:nth-of-type(2) { background: #9fd8ff; }
/* invisible hit area over the START drawn in the video (78.1-85.9% high, 21.5-78.5% wide) */
#startScreen #startBtn { position: absolute; top: 78.1cqh; left: 21.5cqw; width: 57cqw; height: 7.8cqh; min-width: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: transparent; font-size: 1px; }
#startScreen #startBtn:active { background: rgba(22, 32, 77, .18); transform: none; }
#startScreen #startBtn:disabled { background: rgba(255, 255, 255, .45); opacity: 1; }
.start-more { position: absolute; top: 87.2cqh; left: 8cqw; right: 8cqw; display: flex; flex-direction: column; align-items: center; gap: .8cqh; }
#startScreen #hardBtn { width: 57cqw; min-width: 0; padding: .8cqh 0; font-size: 2.3cqh; border-width: .45cqh; box-shadow: 0 .6cqh 0 var(--ink); }
#startScreen .lock { margin: 0; padding: .5cqh 2cqh; font-size: 1.65cqh; opacity: 1; color: #fff; background: rgba(22, 32, 77, .85); border: .3cqh solid #fff; border-radius: 999px; }
#startScreen .lock b { color: var(--pop); }
#startScreen .lock svg { height: 1.7cqh; width: auto; vertical-align: -.25cqh; margin-right: .3cqh; }
#startScreen .fine { margin: 0; font-size: 1.25cqh; max-width: 46ch; opacity: 1; padding: .5cqh 1.4cqh; border-radius: 1cqh; color: #fff; background: rgba(22, 32, 77, .62); }
.kicker { margin: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.how { margin: 0; font-size: clamp(16px, 2.6dvh, 22px); line-height: 1.35; font-weight: 500; max-width: 24ch; }
.fine { margin: 0; font-size: 13px; opacity: .85; max-width: 30ch; line-height: 1.35; }
.lock { opacity: .75; }
.tagline { margin: -1vh 0 0; font-weight: 800; font-size: clamp(18px, 3dvh, 26px); letter-spacing: .02em; }
.brief { width: min(340px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 22px 20px; border-radius: 24px; background: #fffaf2; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.brief .kicker { color: var(--bad); }
.brief h2 { margin: 0; font-size: 30px; line-height: 1.05; }
.brief ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.35; }
.brief .how { max-width: none; font-size: 16px; }
.brief .btn { min-width: 0; background: var(--bad); color: #fff; }
.brief .link { color: var(--ink); text-shadow: none; align-self: center; }
.err { margin: 0; color: #ffd0d8; font-weight: 800; max-width: 30ch; }

.btn { font: 800 clamp(18px, 2.8dvh, 22px) var(--display); min-width: 220px; padding: 14px 30px; border-radius: 999px; border: 3px solid var(--ink); background: var(--pop); color: var(--ink); box-shadow: 0 6px 0 var(--ink); cursor: pointer; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn:focus-visible, .link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn[disabled] { opacity: .6; }
.btn.ghost, .btn.white { background: #fff; }
.entered { margin: 0; padding: 10px 18px; border-radius: 14px; background: var(--go); color: var(--ink); font-weight: 800; border: 3px solid var(--ink); }
/* personal best: a dark badge so it reads over the bright road */

.entry { width: min(340px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: left; padding: 22px 20px; border-radius: 24px; background: #fffaf2; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.entry h2 { margin: 0; font-size: 34px; line-height: 1; }
.entry .kicker { color: #6b5a7a; }
.entry .how { max-width: none; font-size: 16px; }
.entry > label:not(.check) { font-weight: 800; font-size: 14px; margin-bottom: -6px; }
.handle { display: flex; align-items: center; border: 3px solid var(--ink); border-radius: 14px; background: #fff; padding: 0 12px; }
.handle span { font-weight: 800; font-size: 20px; color: #6b5a7a; }
.handle input { flex: 1; min-width: 0; border: 0; outline: 0; font: 700 20px var(--display); padding: 12px 6px; background: transparent; color: var(--ink); }
.handle:focus-within { outline: 3px solid var(--pop); outline-offset: 2px; }
.platforms { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.platforms legend { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.platforms label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; font-weight: 700; background: #fff; }
.platforms label:has(input:checked) { background: var(--pop); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.check input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.entry .err { color: #c2183c; }
.entry .btn { min-width: 0; }
.entry .link { color: var(--ink); text-shadow: none; align-self: center; }
.link { background: none; border: 0; color: #fff; font: 500 14px var(--display); text-decoration: underline; cursor: pointer; padding: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.sim { position: fixed; left: 8px; top: 40%; opacity: .9; z-index: 20; width: 190px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--ink); border: 2px solid var(--ink); font: 500 12px system-ui, sans-serif; display: flex; flex-direction: column; gap: 6px; }
.sim p { margin: 0; font-weight: 700; }
.sim-row { display: flex; gap: 6px; }
.sim button { flex: 1; font: 700 13px system-ui, sans-serif; padding: 8px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; touch-action: none; }
.sim .sim-keys { font-weight: 400; opacity: .7; }

/* Preview mode (no mic): two big hold buttons along the bottom */
.sim.preview { left: 50%; top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(340px, 92vw); background: rgba(27,21,48,.85); color: #fff; border-color: #fff; opacity: 1; }
.sim.preview > p:first-child::after { content: ': no mic here, hold to steer'; font-weight: 500; }
.sim.preview button { padding: 16px 8px; font-size: 18px; }
.sim.preview .sim-keys, .sim.preview input, .sim.preview label { display: none; }

@media (prefers-reduced-motion: reduce) { .btn:active, #startScreen .btn:active { transform: none; } }