/* ============================================================================
   THE CAPTAIN CLEO VISUAL BIBLE
   One world. Every prototype surface loads this file and nothing else.

   WHY IT IS DRAWN IN CODE AND NOT IN PICTURES
   The audit found five visual languages colliding inside one screen: photoreal
   market stalls, three unrelated AI illustration styles, flat cartoon, and a
   photographed boy. Adding a sixth set of images could not have fixed that. So
   every surface here is built from gradients, SVG and canvas, which means the
   whole world is guaranteed to be one language, it weighs almost nothing, it is
   licence-clean, and it does not wait on an art commission to be judged.

   Real artwork can be dropped in later behind the same tokens. The point of the
   prototype is the FEEL, and the feel must not be borrowed.

   RULES THIS FILE ENFORCES
   - No card grids as primary child navigation. Places, not tiles.
   - No pure black and no empty dark screens. The world is lit.
   - One typeface, Baloo 2, already self-hosted and OFL licensed in this repo.
   - No emoji as the icon system. Emoji were one of the fragmenting languages.
   - Zero network requests. No CDN, no web font fetch, no library.
   ========================================================================== */

@font-face{
  font-family:'Baloo 2';
  src:url('../../baloo2.woff2') format('woff2');
  font-weight:400 800; font-display:swap;
}

:root{
  /* --- the sea, from the deep to the shallows ------------------------------ */
  --abyss:#04182b;
  --deep:#072a45;
  --sea:#0b4f6c;
  --shallow:#12909f;
  --lagoon:#2ad0c8;
  --foam:#d9f6fb;

  /* --- the sky, golden hour, because a lit world is the whole brief -------- */
  --dusk:#3b2a63;
  --sunset:#ff8f5e;
  --sun:#ffc266;

  /* --- reward and identity ------------------------------------------------- */
  --gold:#ffc94a;
  --gold-deep:#e0982a;
  --gold-pale:#ffe9a8;
  --coral:#ff6b6b;
  --leaf:#5fd66f;
  --ink:#04182b;
  --paper:#fffaf0;

  /* --- glamour, ROUND 2 ----------------------------------------------------
     Her definition, and it is not glitter: cinematic lighting, jewel-like
     colour, premium gold detailing, rich depth, magical particles, beautiful
     motion. Violet and magenta are HIGHLIGHTS, deliberately rationed, because
     the moment they become surfaces the world turns into a toy shop. */
  --violet:#8b6cf0;
  --magenta:#e46bd0;
  --midnight:#020c18;
  --jewel-glow:0 0 40px rgba(139,108,240,.45);
  --gold-rim:inset 0 0 0 1px rgba(255,201,74,.55);

  /* --- type ---------------------------------------------------------------- */
  --font:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;

  /* --- depth. real shadow, real light, never a flat rectangle -------------- */
  --lift-1:0 2px 6px rgba(2,14,26,.35);
  --lift-2:0 8px 24px rgba(2,14,26,.45);
  --lift-3:0 18px 48px rgba(2,14,26,.55);
  --glow-gold:0 0 28px rgba(255,201,74,.55);
  --glow-lagoon:0 0 32px rgba(42,208,200,.5);

  /* --- one timing system, so every surface moves the same way -------------- */
  --snap:140ms cubic-bezier(.2,.9,.3,1.4);
  --ease:320ms cubic-bezier(.22,.61,.36,1);
  --sail:900ms cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

/* The browser's own [hidden]{display:none} lives in the user agent sheet, so ANY
   author rule that sets display beats it. .chip sets flex and .iconbtn sets
   grid, which meant el.hidden = true did nothing at all and the element stayed
   on screen. Silent, and it would have bitten every surface that tried to hide
   something. Declared once, here, so no component has to remember. */
[hidden]{display:none !important}

html,body{
  margin:0; padding:0; height:100%;
  font-family:var(--font);
  color:var(--foam);
  background:var(--abyss);
  overscroll-behavior:none;
}

/* the child must never be able to select or drag the world apart */
body.world{
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  overflow:hidden;
}
body.world input,body.world textarea{user-select:text; -webkit-user-select:text}

/* ============================================================================
   THE STAGE
   A full-screen, non-scrolling world with real depth layers. This is the shape
   every child-facing surface takes. It is deliberately NOT a page.
   ========================================================================== */
.stage{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 108%, var(--shallow) 0%, var(--sea) 32%, var(--deep) 62%, var(--abyss) 100%),
    linear-gradient(180deg, var(--dusk) 0%, #12314f 45%, transparent 70%);
}

/* each layer parallaxes at its own rate. set --depth 0 (far) to 1 (near). */
.layer{position:absolute; inset:-6%; will-change:transform; pointer-events:none}
.layer.interactive{pointer-events:auto}

/* the sun, low and warm, so no screen is ever an empty dark rectangle */
.sunlight{
  position:absolute; left:50%; top:14%; width:min(78vw,620px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,194,102,.55) 0%, rgba(255,143,94,.22) 38%, transparent 68%);
  pointer-events:none;
}

.stars{position:absolute; inset:0; pointer-events:none; opacity:.85}

/* ============================================================================
   TYPE
   Very little of it, ever. The child-facing budget is enforced per prototype
   and printed in the review pack.
   ========================================================================== */
.shout{
  font-size:clamp(2rem,9vw,4.2rem); font-weight:800; line-height:.95;
  letter-spacing:-.01em; margin:0;
  color:var(--paper);
  text-shadow:0 3px 0 rgba(4,24,43,.45), 0 10px 30px rgba(4,24,43,.6);
}
.say{font-size:clamp(1rem,4.2vw,1.35rem); font-weight:600; margin:.35em 0 0; color:rgba(217,246,251,.92)}
.tiny{font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(217,246,251,.55)}
.gold{color:var(--gold)}

/* ============================================================================
   THE ONE BUTTON SHAPE
   Chunky, physical, pressable. It has a lip and it moves when pressed, because
   a button that does not move does not feel like a game.
   ========================================================================== */
.press{
  font-family:var(--font); font-weight:800; font-size:1.15rem;
  color:var(--ink); background:linear-gradient(180deg,#ffe08a,var(--gold));
  border:0; border-radius:999px; padding:.7em 1.6em; cursor:pointer;
  box-shadow:0 6px 0 var(--gold-deep), var(--lift-2);
  transform:translateY(0); transition:transform var(--snap), box-shadow var(--snap);
}
.press:active{transform:translateY(5px); box-shadow:0 1px 0 var(--gold-deep), var(--lift-1)}
.press.big{font-size:1.5rem; padding:.75em 2.2em}
.press.calm{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
  color:var(--foam); box-shadow:0 4px 0 rgba(2,14,26,.5), var(--lift-1);
}

/* ============================================================================
   THE PERSISTENT HUD
   One tiny bar. Explorer, stars, sound. It is the only chrome a child ever
   sees, and it is identical on every surface so the world feels continuous.
   ========================================================================== */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem;
  padding-top:calc(.55rem + env(safe-area-inset-top));
  pointer-events:none;
}
.hud > *{pointer-events:auto}
.hud .spacer{flex:1; pointer-events:none}

.chip{
  display:flex; align-items:center; gap:.4rem;
  background:rgba(4,24,43,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(217,246,251,.16);
  border-radius:999px; padding:.25rem .7rem .25rem .3rem;
  box-shadow:var(--lift-1);
  font-weight:700; font-size:.95rem; color:var(--foam);
}
.chip svg{display:block}
/* NOT called .stars. The starfield rule above is .stars{position:absolute;
   inset:0}, and a chip named "stars" inherited it and stretched itself across
   the whole screen. The starfield keeps the obvious name because prototype
   pages already use it for their backdrop; the chip is the one that moves. */
.chip.starcount{padding-left:.7rem; color:var(--gold)}

.iconbtn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(217,246,251,.16);
  background:rgba(4,24,43,.55); backdrop-filter:blur(8px); color:var(--foam);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--lift-1);
  transition:transform var(--snap);
}
.iconbtn:active{transform:scale(.9)}

/* ============================================================================
   PLACES, NOT TILES
   A destination is a thing standing in the world that you tap. It breathes, it
   is lit, and it tells you its state by how it LOOKS, never by a progress bar.
   ========================================================================== */
.place{
  position:absolute; border:0; background:none; padding:0; cursor:pointer;
  transform-origin:50% 90%;
  transition:transform var(--ease), filter var(--ease);
  filter:drop-shadow(0 12px 22px rgba(2,14,26,.55));
}
.place:active{transform:scale(.94)}
.place .label{
  position:absolute; left:50%; bottom:-1.9em; transform:translateX(-50%);
  font-weight:800; font-size:.95rem; white-space:nowrap; color:var(--paper);
  text-shadow:0 2px 8px rgba(4,24,43,.9); pointer-events:none;
}

/* state is carried by light, exactly as the brief asks */
.place.calling{animation:beckon 2.4s ease-in-out infinite}
.place.calling .halo{opacity:1}
.place.locked{filter:drop-shadow(0 8px 18px rgba(2,14,26,.6)) saturate(.25) brightness(.55)}
.place.locked .label{color:rgba(217,246,251,.5)}
.place.fogged{opacity:.42; filter:blur(2.5px) saturate(.3) brightness(.6)}
.place.fogged .label{display:none}

.halo{
  position:absolute; inset:-18%; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,201,74,.45) 0%, transparent 65%);
  transition:opacity var(--ease); pointer-events:none;
}

@keyframes beckon{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.03)}
}

/* ============================================================================
   CLEO, THE CHARACTER
   She is not a logo here. She flies in, reacts and leaves. Her line is capped
   at a handful of words by the layout itself, on purpose.
   ========================================================================== */
.cleo{
  position:fixed; z-index:70; width:clamp(88px,22vw,140px);
  pointer-events:none; opacity:0; transform:translateY(28px) scale(.85);
  transition:opacity var(--ease), transform var(--ease);
  filter:drop-shadow(0 10px 22px rgba(2,14,26,.6));
}
.cleo.here{opacity:1; transform:translateY(0) scale(1)}
.cleo.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

.speech{
  position:fixed; z-index:71; max-width:min(74vw,340px);
  background:var(--paper); color:var(--ink);
  font-weight:800; font-size:1.05rem; line-height:1.25;
  padding:.6em .9em; border-radius:18px;
  box-shadow:var(--lift-2);
  opacity:0; transform:translateY(10px) scale(.9); transform-origin:50% 100%;
  transition:opacity var(--snap), transform var(--snap);
}
.speech.here{opacity:1; transform:translateY(0) scale(1)}
.speech:after{
  content:''; position:absolute; bottom:-9px; left:28px;
  border:10px solid transparent; border-top-color:var(--paper); border-bottom:0;
}

/* ============================================================================
   THE CAMERA
   Moving between places is a camera move through one continuous world, never a
   page load. Two named moves, used everywhere.
   ========================================================================== */
.world-cam{position:absolute; inset:0; transform-origin:50% 50%; will-change:transform, filter}
.world-cam.diving{animation:dive var(--sail) cubic-bezier(.65,0,.35,1) forwards}
.world-cam.surfacing{animation:surface var(--sail) cubic-bezier(.22,.61,.36,1) forwards}
@keyframes dive{to{transform:scale(3.4); filter:brightness(1.5) blur(7px); opacity:0}}
@keyframes surface{from{transform:scale(2.2); filter:blur(9px); opacity:0} to{transform:scale(1); filter:none; opacity:1}}

.wipe{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 55%, rgba(255,201,74,.9), rgba(255,143,94,.85) 35%, var(--abyss) 78%);
  transition:opacity 420ms ease;
}
.wipe.on{opacity:1}

/* ============================================================================
   REWARD
   Gold, physical, and it always MOVES toward the counter it increases.
   ========================================================================== */
.pop{
  position:fixed; z-index:141; pointer-events:none; font-weight:800;
  color:var(--gold); text-shadow:0 2px 10px rgba(4,24,43,.9); font-size:1.4rem;
}
@keyframes riseFade{to{transform:translateY(-70px) scale(1.25); opacity:0}}

.shine{position:fixed; z-index:140; pointer-events:none; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gold) 45%,transparent 70%); box-shadow:var(--glow-gold)}

/* the whole stage reacts, so a win is felt and not just displayed */
.stage.celebrate{animation:cheer 620ms cubic-bezier(.2,.9,.3,1.4)}
@keyframes cheer{0%{transform:scale(1)}35%{transform:scale(1.022)}100%{transform:scale(1)}}
.stage.oops{animation:shake 420ms ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}45%{transform:translateX(7px)}70%{transform:translateX(-4px)}}

/* ============================================================================
   REDUCED MOTION
   The world stays lit and readable, it simply stops moving on its own. Nothing
   is hidden and no journey becomes impossible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.06s !important;
  }
  .place.calling{animation:none; outline:3px solid var(--gold); outline-offset:6px; border-radius:14px}
  .cleo.bob{animation:none}
}

/* ============================================================================
   ROUND 2: GLAMOUR
   Her note governs everything below: "Do not add more. Make what is already
   here feel magical." So nothing here adds a screen, a menu or a decision. It
   is all lighting, motion, material and rationed spectacle.
   ========================================================================== */

/* --- THE OVERTURE ----------------------------------------------------------
   The Captain Cleo opening ritual. About 4s on a first visit, about 1s on a
   return, because a ritual you cannot skip stops being a pleasure by the third
   time. It sits above everything and removes itself when finished. */
.overture{
  position:fixed; inset:0; z-index:200; background:var(--midnight);
  display:grid; place-items:center; overflow:hidden;
}
.overture.gone{opacity:0; pointer-events:none; transition:opacity 620ms ease}

.ov-stars{position:absolute; inset:0; opacity:0; animation:ovStars 1200ms ease forwards}
@keyframes ovStars{to{opacity:1}}

/* The gold compass DRAWS itself rather than simply appearing. A line being
   drawn reads as something being made for you, which is the whole feeling. */
/* The compass and the title are both centred, so they MUST NOT be on screen at
   the same time. They were, and the title drew straight through the compass
   with the needle cutting the letters. It read as a layout bug, not a reveal.
   The compass is now fully gone by 2600ms and the title starts at 2450ms, so
   the one becomes the other instead of colliding with it. */
.ov-compass{
  position:absolute; width:min(58vw,320px); aspect-ratio:1; opacity:0;
  animation:ovCompass 2100ms cubic-bezier(.22,.61,.36,1) 500ms forwards;
}
.ov-compass circle,.ov-compass path,.ov-compass line{
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  animation:draw 1700ms cubic-bezier(.22,.61,.36,1) 620ms forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ovCompass{
  0%{opacity:0; transform:scale(.82) rotate(-16deg)}
  26%{opacity:1; transform:scale(1) rotate(0deg)}
  66%{opacity:1; transform:scale(1.04)}
  100%{opacity:0; transform:scale(1.45)}
}

/* one fast, confident turquoise stroke across the dark */
.ov-streak{
  position:absolute; left:-40%; top:52%; width:180%; height:3px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--lagoon) 38%, #fff 50%, var(--lagoon) 62%, transparent);
  filter:blur(.4px) drop-shadow(0 0 14px var(--lagoon));
  animation:ovStreak 900ms cubic-bezier(.7,0,.3,1) 1500ms forwards;
}
@keyframes ovStreak{
  0%{opacity:0; transform:translateX(-30%) scaleY(.4)}
  22%{opacity:1; transform:translateX(0) scaleY(1)}
  100%{opacity:0; transform:translateX(34%) scaleY(.3)}
}

.ov-title{
  position:relative; text-align:center; opacity:0;
  animation:ovTitle 1600ms cubic-bezier(.22,.61,.36,1) 2450ms forwards;
}
.ov-title .cc{
  display:block;
  font-size:clamp(2.4rem,12vw,5.4rem); font-weight:800; line-height:.9; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 8%,var(--gold-pale) 42%,var(--gold) 74%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,201,74,.45));
}
@keyframes ovTitle{
  0%{opacity:0; transform:translateY(16px) scale(.94); filter:blur(8px)}
  30%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
  100%{opacity:1; transform:scale(1.02)}
}

/* The dark peels back and the bay is already behind it, so the world is not
   loaded, it is ARRIVED AT. */
.ov-iris{
  position:absolute; inset:0; background:var(--midnight);
  clip-path:circle(150% at 50% 50%);
  animation:ovIris 900ms cubic-bezier(.65,0,.35,1) 3450ms forwards;
}
@keyframes ovIris{to{clip-path:circle(0% at 50% 46%)}}

/* --- THE BEACON ------------------------------------------------------------
   The primary action, and deliberately NOT a rounded rectangle. A gold ring
   with a compass needle in it, breathing, embedded in the scene. A child taps
   a glowing thing in a world. Nobody taps a web button. */
.beacon{
  position:relative; border:0; background:none; padding:0; cursor:pointer;
  width:clamp(124px,34vw,176px); aspect-ratio:1;
  display:grid; place-items:center;
  animation:beaconPulse 2800ms ease-in-out infinite;
}
.beacon:active{transform:scale(.94)}
.beacon .ring{position:absolute; inset:0}
.beacon .word{
  position:absolute; bottom:-2.4em; left:50%; transform:translateX(-50%);
  font-weight:800; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-pale); white-space:nowrap;
  text-shadow:0 2px 12px rgba(4,24,43,.95);
}
@keyframes beaconPulse{
  0%,100%{transform:translateY(0) scale(1); filter:drop-shadow(0 10px 30px rgba(255,201,74,.35))}
  50%{transform:translateY(-6px) scale(1.035); filter:drop-shadow(0 14px 42px rgba(255,201,74,.62))}
}
.beacon .halo2{
  position:absolute; inset:-28%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,74,.34) 0%, rgba(139,108,240,.14) 46%, transparent 68%);
  animation:beaconHalo 2800ms ease-in-out infinite;
}
@keyframes beaconHalo{0%,100%{opacity:.55; transform:scale(.94)}50%{opacity:1; transform:scale(1.08)}}

/* --- ATMOSPHERE ------------------------------------------------------------
   Depth without clutter. Light shafts and drifting motes read as expensive and
   cost almost nothing. */
.shafts{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:
    linear-gradient(101deg, transparent 34%, rgba(255,226,168,.16) 38%, transparent 43%),
    linear-gradient(96deg, transparent 52%, rgba(255,226,168,.11) 56%, transparent 61%);
  animation:shaftDrift 14s ease-in-out infinite alternate;
}
@keyframes shaftDrift{to{transform:translateX(3%) scaleY(1.04)}}

.motes{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.mote{
  position:absolute; border-radius:50%; background:var(--gold-pale);
  filter:blur(.3px); opacity:0; animation:moteRise linear infinite;
}
@keyframes moteRise{
  0%{opacity:0; transform:translateY(0) translateX(0)}
  12%{opacity:.85}
  88%{opacity:.5}
  100%{opacity:0; transform:translateY(-120px) translateX(22px)}
}

/* a cheap, convincing water reflection band */
.reflect{
  position:absolute; left:0; right:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(217,246,251,.16), transparent 72%);
  filter:blur(2px); transform:scaleY(-1); opacity:.35;
  mask-image:linear-gradient(180deg, #000, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
}

/* --- CLEO BODY LANGUAGE ----------------------------------------------------
   Her brief: animation instead of words. Cleo is not a tutorial box. */
.cleo.swoop{animation:cleoSwoop 780ms cubic-bezier(.22,.9,.3,1.15)}
@keyframes cleoSwoop{
  0%{opacity:0; transform:translate(-70px,-40px) rotate(-16deg) scale(.7)}
  60%{opacity:1; transform:translate(6px,4px) rotate(4deg) scale(1.06)}
  100%{opacity:1; transform:none}
}
.cleo.point{animation:cleoPoint 900ms ease-in-out 2}
@keyframes cleoPoint{0%,100%{transform:rotate(0)}40%{transform:rotate(-9deg) translateX(7px)}}
.cleo.cheer{animation:cleoCheer 620ms cubic-bezier(.2,.9,.3,1.5) 2}
@keyframes cleoCheer{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-22px) rotate(6deg) scale(1.08)}}
.cleo.gasp{animation:cleoGasp 480ms cubic-bezier(.2,.9,.3,1.4)}
@keyframes cleoGasp{0%{transform:scale(1)}40%{transform:scale(1.16) translateY(-8px)}100%{transform:scale(1)}}
.cleo.peek{animation:cleoPeek 1100ms cubic-bezier(.22,.61,.36,1)}
@keyframes cleoPeek{0%{transform:translateY(60px)}55%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* --- THE WRAPPER -----------------------------------------------------------
   One visual language across adventures. Captain Cleo owns the frame, the
   loading, the result and the way back. The adventure owns what is inside it.
   Crossing in must not feel like leaving the product. */
.cleoframe{position:fixed; inset:0; background:var(--abyss); z-index:1}
.cleoframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

.approach{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 50%, rgba(11,79,108,.9), var(--midnight) 72%);
  transition:opacity 520ms ease;
}
.approach.gone{opacity:0; pointer-events:none}
.approach .name{
  font-size:clamp(1.7rem,7vw,3rem); font-weight:800; letter-spacing:.04em; text-align:center;
  background:linear-gradient(180deg,#fff,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ovTitle 900ms cubic-bezier(.22,.61,.36,1) forwards;
}

.result{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:1.2rem;
  background:radial-gradient(circle at 50% 40%, rgba(11,79,108,.94), var(--midnight) 76%);
  opacity:0; pointer-events:none; transition:opacity 420ms ease;
}
.result.on{opacity:1; pointer-events:auto}
.result .card{
  text-align:center; max-width:min(92vw,430px);
  padding:1.6rem 1.3rem; border-radius:26px;
  background:linear-gradient(180deg, rgba(18,144,159,.22), rgba(4,24,43,.85));
  border:1px solid rgba(255,201,74,.3); box-shadow:var(--lift-3), var(--gold-rim);
}
.result .big{
  display:block;
  font-size:clamp(2.2rem,10vw,3.6rem); font-weight:800; line-height:1;
  background:linear-gradient(180deg,#fff,var(--gold-pale) 45%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- SPECTACLE, RATIONED ---------------------------------------------------
   Occasional, per her brief. A screen that is always spectacular is just busy. */
.slowmo{animation:slowPulse 900ms cubic-bezier(.2,.9,.3,1)}
@keyframes slowPulse{0%{filter:saturate(1)}40%{filter:saturate(1.5) brightness(1.12)}100%{filter:saturate(1)}}

.sunburst{
  position:fixed; z-index:78; pointer-events:none; width:340px; height:340px;
  margin:-170px 0 0 -170px; opacity:0;
  background:conic-gradient(from 0deg, transparent 0 6deg, rgba(255,201,74,.5) 7deg 9deg, transparent 10deg 22deg);
  border-radius:50%; animation:burstSpin 900ms cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes burstSpin{
  0%{opacity:0; transform:scale(.3) rotate(0)}
  30%{opacity:.95}
  100%{opacity:0; transform:scale(1.5) rotate(52deg)}
}

@media (prefers-reduced-motion: reduce){
  .ov-compass,.ov-streak,.ov-title,.ov-iris,.ov-stars{animation-delay:0ms !important}
  .beacon{animation:none; outline:3px solid var(--gold); outline-offset:8px; border-radius:50%}
  .mote,.shafts{display:none}
}