@font-face { font-family: 'Martell'; src: url('../assets/martell-web-regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Martell'; src: url('../assets/martell-web-medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Martel Sans'; src: url('../assets/martel-sans-regular.ttf'); font-weight: 400; }

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { display: grid; place-items: center; font-family: 'Martell', Georgia, serif; color: #fff6e0; }

/* 9:16 stage. --u is 1% of its height; --px is one pixel of the 1080×1920 Figma frames, so a
   mockup value goes in as calc(var(--px) * N) and scales with the stage. */
#stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#view, #view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the catch flash: a burst of light blooming from the hero (see FLASH in main.js) — over the picture,
   under the HUD; added light only ever brightens */
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; mix-blend-mode: plus-lighter;   /* additive where supported */
  background:
    radial-gradient(circle at var(--fx, 50%) var(--fy, 60%), rgb(255 246 222 / 1) 0, rgb(255 222 160 / 0.75) 10%, rgb(255 204 130 / 0.35) 28%, rgb(255 196 120 / 0.12) 55%, rgb(255 190 110 / 0) 85%),
    rgb(255 214 150 / 0.14);   /* the whole picture lifts a little, as a bloom does */ }

/* the Figma logo (275.356 × 126.754) scaled up 1.3× at JB's request */
#logo { position: absolute; top: calc(var(--px) * 56.8); left: 50%; width: calc(var(--px) * 358); height: calc(var(--px) * 164.8); transform: translateX(-50%); pointer-events: none; }

/* hidden = faded out, not removed: the counter eases away as the result eases in */
#hud { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.6s ease; }
#hud[hidden] { display: block; opacity: 0; }
#stats { position: absolute; top: calc(var(--u) * 13.2); width: 100%; display: flex; justify-content: center; gap: calc(var(--u) * 4.2); font-size: calc(var(--u) * 2.2); font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.stat { display: flex; align-items: center; gap: calc(var(--u) * 0.9); }
.stat[hidden] { display: none; }
/* a ball of light, like the ones to catch */
.icon-ball { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #f7d293 46%, rgb(247 210 147 / 0.35) 66%, rgb(247 210 147 / 0) 78%); filter: drop-shadow(0 0 calc(var(--u) * 0.7) #f7d293); }
.icon-clock { width: calc(var(--u) * 2); height: calc(var(--u) * 2); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#progress { position: absolute; left: 12%; right: 12%; bottom: calc(var(--u) * 4); height: 2px; background: rgba(255, 246, 224, 0.22); }
#progress-fill { display: block; height: 100%; background: #f7d293; transform-origin: left; transform: scaleX(0); }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 12); text-align: center; }
.screen[hidden] { display: none; }
/* --dark goes 0 → 1 while the camera climbs to the summit: the run sinks into deep blue */
#screen-end { justify-content: center; padding-bottom: 0; background: rgb(2 12 50 / calc(0.45 + 0.55 * var(--dark, 0))); }

/* the call-to-action buttons, 25 % larger than the Figma frame (JB 02/10) */
.btn { font: inherit; font-weight: 500; font-size: calc(var(--px) * 22.5); line-height: calc(var(--px) * 25); text-transform: uppercase; color: #000018; background: #fff; border: 0; border-radius: calc(var(--px) * 75); min-width: calc(var(--px) * 225); padding: calc(var(--px) * 27.5) calc(var(--px) * 50); cursor: pointer; }
.btn.ghost { background: none; color: #fff6e0; font-size: calc(var(--u) * 2.25); padding: calc(var(--u) * 1.25); }
.btn:focus-visible { outline: 2px solid #fff6e0; outline-offset: 3px; }
.hint { font-size: calc(var(--u) * 1.9); letter-spacing: 0.06em; opacity: 0.85; }
.result { font-size: calc(var(--u) * 9); line-height: 1; }

#cover { position: absolute; inset: 0; background: #020c32; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: grid; place-items: center; font-size: calc(var(--u) * 1.9); padding: 8%; text-align: center; }
#cover.on { opacity: 1; pointer-events: auto; }

/* ---- intro — Figma "screen tv ok" (532:2) ---- */
#screen-intro { display: block; padding: 0; }
#screen-intro[hidden] { display: none; }
#screen-intro.leaving { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }   /* the text gives way to the camera's dive */
.intro-title { position: absolute; top: calc(var(--px) * 339); left: calc(var(--px) * 56); right: calc(var(--px) * 56); display: flex; flex-direction: column; gap: calc(var(--px) * 24); font-weight: 500; text-align: center; }
.intro-title .kicker { font-size: calc(var(--px) * 28); color: #e8c27d; }
.intro-title h1 { font-size: calc(var(--px) * 48); line-height: calc(var(--px) * 56); font-weight: 500; color: #fff; }
#btn-start { position: absolute; top: calc(var(--px) * 1522); left: 50%; transform: translateX(-50%); }
.legals { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: calc(var(--px) * 4); align-items: flex-start; padding: 0 calc(var(--px) * 56) calc(var(--px) * 18); text-align: left; }
.legals p { flex: 1; font-family: 'Martel Sans', sans-serif; font-size: calc(var(--px) * 16); line-height: 1; color: rgba(255, 255, 255, 0.9); }
.legals nav { display: flex; gap: calc(var(--px) * 24); }
.legals a { font-weight: 500; font-size: calc(var(--px) * 10); color: #fff; text-decoration: none; white-space: nowrap; padding-bottom: calc(var(--px) * 4); border-bottom: 1px solid #fff; }

/* the result eases in over the run rather than cutting to it */
#screen-end { animation: result-in 1.6s ease both; }
@keyframes result-in { from { opacity: 0; } to { opacity: 1; } }

/* the logo stays above the screens (the result darkens to a solid blue); the cover above all */
#logo { z-index: 2; }
#cover { z-index: 3; }

/* loading screen: a dark blue, close to the transitions' but deep enough for the logo's cartouche
   (#001545) to stand out; the logo centred above it, a small spinner at the bottom. When loading
   is done the logo fades out, the blue lifts off the mountain, then the intro comes in (below). */
#cover.boot { background: #010a2b; transition-duration: 1s; }
.booting #logo { z-index: 4; }
.logo-centred #logo { top: calc(50% - var(--px) * 82.4); }
#logo { transition: opacity 0.6s ease; }
.logo-out #logo { opacity: 0; }
#spinner { display: none; position: absolute; bottom: calc(var(--px) * 140); left: 50%; width: calc(var(--px) * 44); height: calc(var(--px) * 44); margin-left: calc(var(--px) * -22); border-radius: 50%; border: calc(var(--px) * 3) solid rgb(232 194 125 / 0.25); border-top-color: #e8c27d; animation: spin 0.9s linear infinite; }
#cover.boot #spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
#screen-intro { cursor: pointer; }

/* intro coming in over the mountain: the kicker and title rise out of a blur, then the button;
   the legal line only fades. Without .in they wait out of sight (enterIntro removes it). */
#screen-intro .kicker, #screen-intro h1, #btn-start, #screen-intro .legals {
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), translate 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s ease, scale 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
#screen-intro:not(.in) .kicker { opacity: 0; translate: 0 calc(var(--px) * 24); filter: blur(4px); }
#screen-intro:not(.in) h1 { opacity: 0; translate: 0 calc(var(--px) * 36); filter: blur(8px); }
#screen-intro:not(.in) #btn-start { opacity: 0; scale: 0.9; }
#screen-intro:not(.in) .legals { opacity: 0; }
#screen-intro.in h1 { transition-delay: 0.18s; }
#screen-intro.in #btn-start { transition-delay: 0.6s; }
#screen-intro.in .legals { transition-delay: 0.8s; }

/* tutorial line, shown over the straight lead-in, just above the progress bar (placeholder copy until the mockup) */
.tip { position: absolute; bottom: calc(var(--u) * 8); left: 8%; right: 8%; text-align: center; font-weight: 500; font-size: calc(var(--px) * 32); line-height: calc(var(--px) * 42); color: #fff; opacity: 0; transition: opacity 0.8s ease; }
.tip.on { opacity: 1; transition-delay: 0.7s; }   /* comes in once the previous line has gone */
/* countdown to the start line, in the tutorial line's place: each number pops in big and settles */
#countdown { position: absolute; bottom: calc(var(--u) * 6); left: 0; right: 0; text-align: center; font-weight: 600; font-size: calc(var(--px) * 110); line-height: 1; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 calc(var(--px) * 24) rgb(232 194 125 / 0.7); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
#countdown.on { opacity: 1; }
#countdown.pop { animation: count-pop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes count-pop { 0% { transform: scale(1.8); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); } }

/* ?fps readout, above everything, out of the way of the touch */
#fps { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 8px; z-index: 10; pointer-events: none; white-space: pre; font: 13px/1.35 ui-monospace, Menlo, monospace; color: #0f0; background: rgb(0 0 0 / 0.6); padding: 4px 6px; border-radius: 4px; }

/* intro → run: the blue holds a moment and lifts slowly; the line of text (to come) fades in on it */
#cover.transition { transition-duration: 1s; }
#transition-text { position: absolute; left: 10%; right: 10%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 36); text-align: center; font-weight: 500; font-size: calc(var(--px) * 40); line-height: calc(var(--px) * 52); color: #fff; opacity: 0; transition: opacity 0.4s ease; }
/* a finger held on the screen and sliding left and right: the ring under the fingertip pulses */
.logo-over #logo { z-index: 4; }
.touch-icon { animation: touch-slide 2.4s ease-in-out infinite; width: calc(var(--px) * 120); height: calc(var(--px) * 150); overflow: visible; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.touch-ring { stroke: #e8c27d; transform-origin: 26px 12px; animation: touch-pulse 1.4s ease-out infinite; }
@keyframes touch-slide { 0%, 100% { transform: translateX(calc(var(--px) * -90)); } 50% { transform: translateX(calc(var(--px) * 90)); } }
@keyframes touch-pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
#cover.tip.on #transition-text { opacity: 1; }   /* comes in with the blue itself, no wait */