/* ==========================================================================
   WAR OF WHISKERS — ALPHA FEEDBACK FORM v2  ·  "MISSION DEBRIEF"
   Standalone: Clawhart artwork is embedded as a data URI. Open and test.
   Flow: Debrief → Questions → Transmission → Received + Badge
   ========================================================================== */

:root{
  --cat:#00D4FF;          /* neon cyan — Order of the Nine */
  --dog:#FF1E6F;          /* neon magenta — Iron Paw Legion */
  --void:#05060f;
  --ink:#0a0c1a;
  --ink-2:#11142b;
  --line:rgba(120,150,220,.16);
  --text:#eaf0ff;
  --muted:#8a93b8;
  --read:#b9c3e4;         /* readable body colour — brighter than --muted */
  --read-2:#a3aed3;       /* secondary readable */
  --bevel:22px;
  --btn-radius:12px;

  --display:'Tektur',sans-serif;
  --body:'Chakra Petch',sans-serif;
  --mono:'Share Tech Mono',monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(0,212,255,.10), transparent 60%),
    radial-gradient(900px 600px at 95% 110%, rgba(255,30,111,.10), transparent 60%),
    var(--void);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
/* EMBEDDED (production, inside the site's iframe): the body must be fully
   transparent so the iframe never paints an opaque dark rectangle over the
   home page. That hard rectangle — appearing a frame before the overlay's
   backdrop faded in — was the "home screen flicker" on every open/close.
   With a transparent body the home page simply shows through until the
   overlay's own scrim fades in over it, and fades back out cleanly on close.
   Standalone (opening the file directly to test) keeps the dark backdrop. */
html.embedded,
html.embedded body{background:transparent}

/* ---------- demo launcher (stands in for play.html) ---------- */
.stage{min-height:100%;display:grid;place-items:center;padding:40px 20px;text-align:center;gap:18px}
.stage p{color:var(--read-2);font-size:14.5px;max-width:40ch;margin:0 auto;line-height:1.65}
.stage .mark{font-family:var(--display);font-weight:900;letter-spacing:.06em;font-size:clamp(22px,5vw,34px);text-transform:uppercase}

/* ---------- shared ---------- */
.kicker{
  font-family:var(--mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:#9aa5cd;
}
/* text elements read as a single solid cyan — no cheap colour-shift.
   (the question BARS keep their mixed cyan->magenta gradient.) */
.grad-text{
  color:var(--cat);
  -webkit-text-fill-color:var(--cat);
}

/* primary button — with a flowing sheen sweep on hover */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:15px;line-height:1;
  padding:15px 30px;border:0;border-radius:var(--btn-radius);
  color:#02141c;cursor:pointer;
  background:linear-gradient(135deg,#00D4FF,#8fefff);
  box-shadow:0 8px 28px rgba(0,212,255,.28);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 34px rgba(0,212,255,.42);transform:translateY(-1px)}
.btn:hover::after{animation:sheen .7s ease forwards}
.btn:active{transform:translateY(0)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn[disabled]{opacity:.5;pointer-events:none}

.btn-ghost{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:13.5px;line-height:1;cursor:pointer;
  padding:14px 22px;border-radius:var(--btn-radius);
  color:var(--cat);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(0,212,255,.4);background:rgba(0,212,255,.07);
  transition:background .2s,box-shadow .2s,transform .12s,border-color .2s;
}
.btn-ghost:hover{background:rgba(0,212,255,.15);border-color:rgba(0,212,255,.7);box-shadow:0 8px 26px rgba(0,212,255,.2);transform:translateY(-1px)}
:focus-visible{outline:2px solid var(--cat);outline-offset:3px}

/* ---------- overlay ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(3,4,10,.93);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
}
.overlay.open{opacity:1;visibility:visible}
.overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,150,220,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,150,220,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 85%);
}

.frame{
  position:relative;width:100%;max-width:1040px;
  /* size to the iframe/overlay, never to 100dvh — dvh reads taller than the
     iframe box while the mobile URL bar is showing, which used to push the
     card's top (close button + progress bar) out of the iframe's clip box */
  height:920px;max-height:100%;
  display:flex;flex-direction:column;min-height:0;
  padding:1px;
  background:linear-gradient(160deg,rgba(0,212,255,.42),rgba(120,150,220,.18) 40%,rgba(255,30,111,.30));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  transform:translateY(10px) scale(.985);
  transition:transform .32s cubic-bezier(.2,.9,.3,1);
}
.overlay.open .frame{transform:none}
.card{
  position:relative;
  flex:1 1 auto;min-height:0;
  background:var(--ink-2);
  clip-path:polygon(0 0,calc(100% - 21px) 0,100% 21px,100% 100%,21px 100%,0 calc(100% - 21px));
  overflow:hidden;
}

/* close */
.close{
  position:absolute;top:16px;right:18px;z-index:11;
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:rgba(10,12,26,.8);border:1px solid var(--line);
  color:var(--muted);font-family:var(--mono);font-size:15px;line-height:1;
  transition:color .18s,border-color .18s,background .18s;
}
.close:hover{color:var(--text);border-color:rgba(0,212,255,.5);background:rgba(0,212,255,.10)}

/* ---------- views ---------- */
.view{display:none;height:100%;flex-direction:column;min-height:0}
.view.active{display:flex;animation:viewIn .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.scroll{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;
}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.scroll::-webkit-scrollbar-thumb{background:rgba(120,150,220,.28);border-radius:99px}

/* ==========================================================================
   VIEW 1 — MISSION DEBRIEF
   ========================================================================== */
.brief-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:38px;align-items:start;
  padding:46px 52px;
}
.brief-text{min-width:0}
.brief-title{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,5vw,58px);line-height:.94;letter-spacing:.005em;
  margin:14px 0 0;
}
.brief-lede{
  color:var(--text);font-size:19px;line-height:1.55;font-weight:600;
  margin:22px 0 0;max-width:34ch;
}
.brief-body{
  color:var(--read);font-size:16.5px;line-height:1.72;
  margin:16px 0 0;max-width:52ch;
}
.brief-body + .brief-body{margin-top:13px}
.brief-body strong{color:var(--text);font-weight:700}
.prompts{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;list-style:none;padding:0;
}
.prompts li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#9fb6dd;padding:8px 13px;border-radius:8px;
  border:1px solid rgba(120,150,220,.22);background:rgba(0,212,255,.05);
}
.brief-sign{
  color:var(--read-2);font-size:15.5px;line-height:1.6;margin:22px 0 0;font-style:italic;
}
.brief-cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brief-cta .note{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

/* portrait */
.portrait{display:flex;flex-direction:column;gap:14px}
.portrait-stage{
  position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(72% 62% at 50% 34%, rgba(0,212,255,.26), transparent 70%),
    radial-gradient(70% 55% at 50% 105%, rgba(255,30,111,.15), transparent 70%),
    linear-gradient(180deg,#0e1228,#080a17);
  border:1px solid rgba(120,150,220,.18);
  box-shadow:inset 0 0 44px rgba(0,0,0,.55), 0 14px 40px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
}
.portrait-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:
    radial-gradient(circle at 50% 42%, transparent 30%, rgba(0,212,255,.13) 31%, transparent 32.5%),
    radial-gradient(circle at 50% 42%, transparent 43%, rgba(0,212,255,.09) 44%, transparent 45.5%),
    radial-gradient(circle at 50% 42%, transparent 56%, rgba(120,150,220,.07) 57%, transparent 58%);
}
.portrait-stage::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,212,255,.045) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
.portrait-stage img{
  position:relative;z-index:1;width:94%;height:auto;display:block;
  transform:translateX(14px);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(0,212,255,.22));
}
.plate{text-align:center}
.plate .name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px}
.plate .unit{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:5px}

/* scroll hint — appears at the bottom of the brief to show there's more content */
.scroll-hint{
  position:sticky;bottom:0;z-index:5;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:8px;padding:26px 0 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;
  background:linear-gradient(to top,var(--ink-2) 45%,rgba(17,20,43,.82) 72%,transparent);
  transition:opacity .35s ease;
}
.scroll-hint.hide{opacity:0}
.scroll-hint::after{
  content:"↓";font-size:14px;display:block;
  animation:hintBounce 2s ease-in-out infinite;
}
@keyframes hintBounce{
  0%,100%{transform:translateY(0);opacity:.6}
  50%{transform:translateY(4px);opacity:1}
}

/* ==========================================================================
   VIEW 2 — QUESTIONS
   ========================================================================== */
.qbar{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  padding:14px 60px 14px 26px;
  background:rgba(8,10,24,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* live status indicator — mirrors the home-page live-dot exactly
   (magenta / var(--dog), opacity+scale pulse, 1.4 s cycle) */
.qbar .livedot{
  position:relative;width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:var(--dog);
  box-shadow:0 0 10px var(--dog),0 0 22px var(--dog);
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.68)}
}
.qbar .who{min-width:0;flex:1}
.qbar .who b{
  display:block;font-family:var(--display);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text);
}
.qbar .who span{
  display:none;
}
.prog{flex:0 0 150px;display:flex;align-items:center;gap:10px}
.prog-track{
  position:relative;flex:1;height:5px;border-radius:99px;
  background:rgba(120,150,220,.16);overflow:hidden;
}
.prog-fill{
  position:absolute;inset:0 auto 0 0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--cat),var(--dog));
  box-shadow:0 0 12px rgba(0,212,255,.5);
  transition:width .35s cubic-bezier(.2,.9,.3,1);
}
.prog-num{font-family:var(--mono);font-size:11.5px;color:var(--read-2);letter-spacing:.08em;white-space:nowrap}

.qbody{padding:30px 46px 40px}

/* ---------- question block ---------- */
.q{
  padding:22px 24px;border-radius:16px;scroll-margin-top:90px;
  margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
  border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.q:last-of-type{margin-bottom:0}
/* an un-answered question flagged at submit glows amber until it's touched */
.q.missing{
  border-color:rgba(255,176,32,.85);
  box-shadow:0 0 0 1px rgba(255,176,32,.4),0 0 22px rgba(255,176,32,.22),
             inset 0 0 30px rgba(255,176,32,.05);
}
.q-cat{display:block;margin-bottom:8px}
.q-head{display:flex;align-items:flex-start;gap:18px;justify-content:space-between}
.q-text{
  font-family:var(--body);font-weight:700;font-size:20.5px;line-height:1.32;
  color:var(--text);margin:0;
}
.q-sub{color:var(--read-2);font-size:15px;line-height:1.6;margin:9px 0 20px;max-width:64ch}
.q-sub ul{margin:7px 0 0;padding-left:18px}
.q-sub li{margin:2px 0}
.score{
  font-family:var(--display);font-weight:900;font-size:54px;line-height:1;
  min-width:120px;text-align:right;color:#5f8fb8;
  transition:color .18s ease,text-shadow .18s ease;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.score .of{font-size:22px;color:var(--muted);font-weight:500;margin-left:3px}
.score.word{
  font-size:26px;letter-spacing:.1em;text-transform:uppercase;
  /* --score-w is measured in JS to the WIDEST possible word so the readout
     never changes width mid-drag (that width change was reflowing the
     question text and causing the stretch/snap glitch) */
  width:var(--score-w,220px);min-width:0;max-width:100%;
  font-weight:700;
}
/* untouched sliders sit dim until the player commits to a value */
.q[data-touched="0"] .score{opacity:.45}
.q.nudge{animation:nudge .5s ease}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.q.nudge .track{border-color:rgba(255,30,111,.7);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 3px rgba(255,30,111,.18)}

/* ---------- POWER BAR ---------- */
/* --p 0..1 fill position · --i 0..1 colour position · --g 0..1 charge/glow ramp */
.meter{
  position:relative;height:32px;
  --p:0;--i:0;--g:0;--pulse:1.5s;
  --w:calc(var(--p) * (100% - 20px) + 20px);
}
/* colour-matched bloom: same gradient as the fill, blurred underneath.
   this is what stops the old "purple halo over the blue end" problem */
/* GLOW 3 — Breathing Ring: a fixed-size outline around the whole bar.
   the container NEVER scales; only the outer glow blooms and pulses. */
.aura{
  position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px;
  border-radius:12px;pointer-events:none;
  /* Bloom is driven by these four knobs so we can rein it in on phones and
     kill it on low-perf devices WITHOUT touching the animation below.
     rest = the calm end of the breath · peak = the top of the breath.
     These global values are already toned well down from the original
     (softer spread, lower opacity) so the glow no longer washes over the
     next question on any device. */
  --aura-rest-blur:calc(3px + var(--g)*6px);
  --aura-rest-op:calc(.08 + var(--g)*.26);
  --aura-peak-blur:calc(6px + var(--g)*12px);
  --aura-peak-op:calc(.16 + var(--g)*.40);
  --aura-border:calc(.12 + var(--g)*.34);
  border:1.5px solid rgba(120,210,255,var(--aura-border));
  box-shadow:0 0 var(--aura-rest-blur) rgba(0,200,255,var(--aura-rest-op)),
             inset 0 0 calc(2px + var(--g)*3px) rgba(120,180,255,calc(.05 + var(--g)*.14));
  transition:border-color .25s ease,box-shadow .25s ease;
}
.track{
  position:absolute;inset:0;border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,#04050d,#0a0d1f);
  border:1px solid rgba(120,150,220,.18);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.05);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ticks{
  position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:3;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(120,150,220,.12) calc(10% - 1px) 10%);
}
.grad{
  position:absolute;inset:0;z-index:1;
  /* front-loaded hue shift so every single click reads as a visible change */
  background:linear-gradient(90deg,
    #00D4FF 0%, #29CDFF 18%, #62BFFF 34%,
    #9E9CFF 52%, #D076E8 70%, #FF4C8D 87%, #FF1E6F 100%);
  clip-path:inset(0 calc(100% - var(--w)) 0 0 round 9px);
  transition:clip-path .16s cubic-bezier(.2,.9,.3,1),filter .22s ease;
  filter:saturate(calc(.95 + var(--i)*.55)) brightness(calc(.9 + var(--i)*.28));
  /* STYLE 5 — Glass: bright top bevel, shaded belly, glossy dome */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),
             inset 0 -6px 10px rgba(0,0,0,.4),
             inset 0 1px 3px rgba(255,255,255,.35);
}
.grad::before{
  content:"";position:absolute;left:0;right:0;top:0;height:58%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 70%,transparent);
  border-radius:9px 9px 40% 40%;
  mix-blend-mode:screen;
}
/* sparks sit at meter level — overflow hidden keeps tip-burst particles
   from escaping the right edge while preserving the upward/downward crackle */
.sparks{position:absolute;inset:-6px 0;z-index:3;pointer-events:none;overflow:hidden}
.spark{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:burst var(--dur,520ms) linear forwards;
}
/* PARTICLES 5 — Tip Burst: sparks crackle outward from the charged tip */
@keyframes burst{
  0%{opacity:0;transform:translate(0,0) scale(.3)}
  20%{opacity:1;transform:translate(calc(var(--dx)*.25),calc(var(--dy)*.25)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx,20px),var(--dy,0)) scale(.2)}
}
.thumb{
  position:absolute;top:3px;bottom:3px;width:20px;z-index:4;
  left:calc(var(--p) * (100% - 20px));
  border-radius:6px;
  background:linear-gradient(180deg,#ffffff,#dff1ff 55%,#a9d8f5);
  box-shadow:0 0 0 1px rgba(3,10,22,.85),0 3px 8px rgba(0,0,0,.55),
             0 0 calc(4px + var(--g)*16px) rgba(190,235,255,calc(.35 + var(--g)*.55));
  transition:left .16s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease;
}
.thumb::after{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;
  transform:translateX(-50%);border-radius:2px;background:rgba(3,10,22,.42);
}
.meter input[type=range]{
  position:absolute;inset:-6px 0;width:100%;height:calc(100% + 12px);margin:0;
  z-index:5;
  -webkit-appearance:none;appearance:none;background:transparent;
  opacity:0;cursor:pointer;
}
.meter input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:32px}
.meter input[type=range]::-moz-range-thumb{width:22px;height:32px;border:0}
.meter input[type=range]:focus-visible ~ .track{outline:2px solid var(--cat);outline-offset:3px}

/* A charged bar wears a STATIC glow (the rest values on .aura, scaled by --g).
   It no longer breathes — the only pulsing motion in the whole form is now
   reserved for a perfect 10/10 (see the perfPulse block below). Removing the
   variable-speed breath is what stops mid/high scores from shimmering at
   different rates and drawing the eye off the question text. The `ring`
   keyframes are kept below for reference only; nothing references them now. */
@keyframes ring{
  0%,100%{border-color:rgba(120,210,255,var(--aura-border));
    box-shadow:0 0 var(--aura-rest-blur) rgba(0,200,255,var(--aura-rest-op)),
               inset 0 0 calc(2px + var(--g)*3px) rgba(120,180,255,calc(.05 + var(--g)*.14))}
  50%{border-color:rgba(150,225,255,calc(var(--aura-border) + .18));
    box-shadow:0 0 var(--aura-peak-blur) rgba(0,215,255,var(--aura-peak-op)),
               inset 0 0 calc(2px + var(--g)*5px) rgba(150,205,255,calc(.08 + var(--g)*.2))}
}
/* ── PERFECT 10/10 — the ONLY pulse in the form ─────────────────────────
   A single, soft breathing ring drawn tight around the bar (never a
   panel-wide flare, so it can't wash over the question text).

   SYNC: the animation runs on EVERY bar's aura from page load, at one fixed
   duration, so all auras share an identical phase. The pulse is simply
   invisible (opacity:0) until a bar actually reaches 10/10, at which point we
   fade it in. Opacity is NOT part of the keyframes, so revealing the ring
   never restarts or re-phases it — score 10 on three questions and all three
   breathe in perfect lockstep instead of drifting.

   The bloom is deliberately small (a ~4–9px halo) so it reads as a gentle
   heartbeat hugging the bar, not a spreading glow. */
.aura::after{
  content:"";position:absolute;inset:-1px;border-radius:12px;
  pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  animation:perfPulse 2.8s ease-in-out infinite;
}
.q[data-over="1"] .aura::after{opacity:1}
@keyframes perfPulse{
  0%,100%{
    border:1px solid rgba(150,225,255,.18);
    box-shadow:0 0 4px rgba(120,215,255,.16),
               inset 0 0 5px rgba(120,200,255,.09);
  }
  50%{
    border:1px solid rgba(170,235,255,.40);
    box-shadow:0 0 9px rgba(130,220,255,.32),
               inset 0 0 7px rgba(150,210,255,.15);
  }
}

/* ════════════════════════════════════════════════════════════════
   LOW-PERF PATH — devices flagged by the on-load frame probe (older
   phones like the Galaxy S20) shed everything that thrashes the GPU:
   the particle stream and the pulsing / overdrive glow. What STAYS is
   everything cheap and meaningful — the bar fills, the colour shifts
   cyan→magenta, the thumb glows, the readout updates — plus one soft,
   static aura so a charged bar still looks charged. Result: full,
   readable feedback with no stutter and no black flicker.
   ════════════════════════════════════════════════════════════════ */
.low-perf .sparks{display:none}                       /* no particle DOM churn */
.low-perf .aura::after{animation:none}                /* no 10/10 breathing     */
.low-perf .aura{
  /* a gentle, fixed glow that scales with charge but never animates */
  --aura-rest-blur:calc(2px + var(--g)*5px);
  --aura-rest-op:calc(.08 + var(--g)*.2);
  --aura-border:calc(.11 + var(--g)*.24);
}
/* a calm STATIC version of the tight 10/10 ring, frozen mid-breath, so a
   perfect score still stands out on low-perf devices without any animation */
.low-perf .q[data-over="1"] .aura::after{
  opacity:1;
  border:1px solid rgba(160,230,255,.32);
  box-shadow:0 0 7px rgba(130,215,255,.24),inset 0 0 6px rgba(150,205,255,.12);
}
/* trim the thumb bloom a touch so it stays sharp rather than smeared */
.low-perf .thumb{
  box-shadow:0 0 0 1px rgba(3,10,22,.85),0 3px 8px rgba(0,0,0,.55),
             0 0 calc(3px + var(--g)*7px) rgba(190,235,255,calc(.32 + var(--g)*.3));
}

.anchors{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:13px;
}
.anchors span:first-child{color:#8cc2e2}
.anchors span:last-child{color:#f0a9c4}
.anchors.tri{justify-content:space-between}
.anchors.tri span:nth-child(2){color:#c9d3f2;text-align:center}

/* balance meter (Q6) — reads as a difficulty gauge: the bar fills as the AI
   gets harder, and the CENTRE is the charged sweet spot rather than the top end */
.meter.centred .grad{
  background:linear-gradient(90deg,#FF1E6F 0%,#C87BE6 26%,#00D4FF 50%,#C87BE6 74%,#FF1E6F 100%);
}
.meter.centred .centre-mark{
  position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:4;
  transform:translateX(-50%);border-radius:2px;
  background:rgba(160,210,255,.55);pointer-events:none;
  box-shadow:0 0 8px rgba(0,212,255,.35);
}

/* ---------- fields (flowing hover glow, matches the buttons) ---------- */
.field{
  position:relative;border-radius:11px;padding:1px;
  background:linear-gradient(90deg,rgba(120,150,220,.28),rgba(120,150,220,.28));
  background-size:220% 100%;background-position:0% 50%;
  transition:background .3s ease;
}
.field:hover,.field:focus-within{
  background-image:linear-gradient(90deg,var(--cat),var(--dog),var(--cat));
  animation:flow 3.4s linear infinite;
  box-shadow:0 0 22px rgba(0,212,255,.16);
}
@keyframes flow{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.field textarea,.field input[type=text],.field input[type=email]{
  display:block;width:100%;
  background:#080a18;color:var(--text);
  border:0;border-radius:10px;
  padding:13px 15px;font-family:var(--body);font-size:15px;line-height:1.55;
}
.field textarea{min-height:96px;resize:vertical}
.field textarea::placeholder,.field input::placeholder{color:#727ba8}
.field textarea:focus,.field input:focus{outline:none}

.block{
  padding:22px 24px;border-radius:16px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
  border:1px solid var(--line);
}
.block:last-of-type{margin-bottom:0}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.counter{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.counter.warn{color:#ffb46f}
.counter.full{color:var(--dog)}

/* checkbox / radio */
.opt{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:15px;color:var(--read);
  padding:11px 16px;border-radius:10px;
  border:1px solid rgba(120,150,220,.22);background:rgba(10,13,31,.6);
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s;
  user-select:none;
}
.opt:hover{border-color:rgba(0,212,255,.5);color:var(--text);box-shadow:0 0 18px rgba(0,212,255,.12)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.mark{
  width:19px;height:19px;flex:0 0 auto;border-radius:5px;
  border:1px solid rgba(120,150,220,.5);background:#070917;
  display:grid;place-items:center;transition:all .2s;
}
.opt.radio .mark{border-radius:50%}
.mark::after{
  content:"";width:9px;height:9px;border-radius:2px;transform:scale(0);
  background:linear-gradient(135deg,var(--cat),#8fefff);transition:transform .18s cubic-bezier(.2,1.5,.4,1);
}
.opt.radio .mark::after{border-radius:50%}
.opt input:checked ~ .mark{border-color:var(--cat);box-shadow:0 0 12px rgba(0,212,255,.45)}
.opt input:checked ~ .mark::after{transform:scale(1)}
.opt:has(input:checked){border-color:rgba(0,212,255,.55);background:rgba(0,212,255,.08);color:var(--text)}
.opt input:focus-visible ~ .mark{outline:2px solid var(--cat);outline-offset:3px}
.opt-row{display:flex;gap:12px;flex-wrap:wrap}

.reveal{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.2,.9,.3,1),opacity .28s ease,margin .32s;
  margin-top:0;
}
.reveal > div{overflow:hidden}
.reveal.open{grid-template-rows:1fr;opacity:1;margin-top:16px}

.hint{font-size:13.5px;color:var(--muted);line-height:1.55;margin:9px 0 0}

.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.actions .note{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.gate-msg{
  font-family:var(--body);font-weight:600;font-size:14px;color:#ffb46f;
  margin:14px 0 0;display:none;
}
.gate-msg.show{display:block;animation:viewIn .3s ease both}

/* ==========================================================================
   VIEW 3 — TRANSMISSION
   ========================================================================== */
.transmit{align-items:center;justify-content:center;text-align:center;padding:40px 30px}
.tx-ring{
  position:relative;width:120px;height:120px;margin:0 auto 30px;
}
.tx-ring i{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--cat);border-right-color:rgba(0,212,255,.25);
  animation:spin 1.1s linear infinite;
}
.tx-ring i:nth-child(2){inset:16px;border-top-color:var(--dog);border-right-color:rgba(255,30,111,.25);animation-duration:.8s;animation-direction:reverse}
.tx-ring i:nth-child(3){inset:32px;border-top-color:#9E9CFF;animation-duration:1.5s}
.tx-ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;color:var(--cat);letter-spacing:.1em;
}
@keyframes spin{to{transform:rotate(360deg)}}
.tx-status{
  font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--read);min-height:1.4em;
}
.tx-bar{
  width:min(340px,80%);height:3px;margin:24px auto 0;border-radius:99px;
  background:rgba(120,150,220,.16);overflow:hidden;
}
.tx-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--cat),var(--dog));
  box-shadow:0 0 12px rgba(0,212,255,.6);
  transition:width .28s linear;
}

/* ==========================================================================
   VIEW 4 — RECEIVED + BADGE
   ========================================================================== */
.done-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:40px;align-items:center;padding:46px 52px;min-height:100%;
}
.done-title{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(32px,4.3vw,50px);line-height:.96;margin:14px 0 0;
}
.done-body{color:var(--read);font-size:16.5px;line-height:1.72;margin:20px 0 0;max-width:50ch}
.done-body + .done-body{margin-top:13px}
.done-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* badge — BIGGER stage */
.badge-slot{display:flex;flex-direction:column;align-items:center;gap:16px}
.badge-stage{position:relative;width:300px;height:300px;display:grid;place-items:center;overflow:hidden}
.badge-shock{
  position:absolute;width:200px;height:200px;border-radius:50%;
  border:2px solid rgba(0,212,255,.8);opacity:0;
}
.badge-art{
  width:260px;height:260px;transform:translateY(-320px) scale(.7);opacity:0;
}

.card.revealed .badge-art{animation:drop .78s cubic-bezier(.3,1.4,.5,1) .18s forwards}
.card.revealed .badge-shock{animation:shock .7s ease-out .82s forwards}
@keyframes drop{
  0%{transform:translateY(-320px) scale(.7);opacity:0}
  62%{opacity:1}
  70%{transform:translateY(10px) scale(1.06);opacity:1}
  82%{transform:translateY(-8px) scale(.98)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes shock{
  0%{transform:scale(.4);opacity:.9;border-width:3px}
  100%{transform:scale(2.4);opacity:0;border-width:1px}
}
@keyframes slotFadeIn{from{opacity:0}to{opacity:1}}

.badge-art .halo{transform-origin:center;animation:breathe 3.2s ease-in-out infinite;animation-delay:1s}
@keyframes breathe{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.62;transform:scale(1.06)}}
.badge-label{text-align:center;opacity:0}
.card.revealed .badge-label{animation:viewIn .5s ease .95s both}
.badge-label .bname{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:22px;letter-spacing:.1em;
}
.badge-label .bdesc{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:7px;
}
.unlock-tag{
  display:inline-block;position:relative;overflow:hidden;
  font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.12em;
  text-transform:uppercase;
  color:#050a12;
  text-shadow:1px 1px 0 rgba(0,212,255,.25), -1px -1px 0 rgba(0,180,220,.15);
  background:linear-gradient(135deg,var(--cat),#8fefff);
  padding:10px 22px;border-radius:8px;margin-bottom:14px;opacity:0;
}
.unlock-tag::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
}
.card.revealed .unlock-tag{animation:viewIn .4s ease .88s both}
.card.revealed .unlock-tag::after{animation:tagSheen 4s ease 1.6s infinite}
@keyframes tagSheen{
  0%{transform:translateX(-120%)}
  18%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .brief-wrap{grid-template-columns:1fr;gap:24px;padding:34px 26px 38px;align-content:start}
  .brief-text{order:2}
  .portrait{order:1;max-width:300px;margin:0 auto;width:100%}
  .brief-title{margin-top:10px}
  .done-wrap{grid-template-columns:1fr;gap:26px;padding:34px 26px;align-content:center}
  .badge-slot{order:1}
  .done-text{order:2}
  .qbody{padding:24px 22px 34px}
  .qbar{padding:12px 56px 12px 18px}
}
@media (max-width:860px){
  .overlay{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .q-text{font-size:18px}
  .q-head{gap:12px}
  .score{font-size:44px;min-width:100px}
  .score.word{font-size:22px}
  .btn{width:100%;text-align:center;justify-content:center}
  .brief-cta,.done-cta{width:100%}
  .brief-cta .note{width:100%;text-align:center}
  .btn-ghost{width:100%;justify-content:center}
  .prog{flex:0 0 96px}
  .prog-num{display:none}
  .badge-stage{width:230px;height:230px}
  .badge-art{width:200px;height:200px}
  /* Phones sit close to the eye, so the static charged glow reads stronger
     than on a monitor. Rein the aura knobs in tight here so the resting glow
     on a charged bar stays subtle and never bleeds up into the question text.
     The 10/10 perfPulse ring is already tight and low-opacity, so it needs no
     phone-specific override. */
  .aura{
    --aura-rest-blur:calc(2px + var(--g)*4px);
    --aura-rest-op:calc(.07 + var(--g)*.18);
    --aura-peak-blur:calc(3px + var(--g)*8px);
    --aura-peak-op:calc(.12 + var(--g)*.26);
    --aura-border:calc(.1 + var(--g)*.26);
  }
}
@media (max-width:560px){
  /* on phones the Perfect-Balance readout drops onto its own line, so the
     question text keeps full width and never reflows as the word changes */
  .q-centred .q-head{flex-direction:column;align-items:flex-start;gap:10px}
  .q-centred .score.word{width:auto;text-align:left;font-size:24px}
}
@media (max-width:420px){
  .brief-lede{font-size:17px}
  .brief-body{font-size:15.5px}
  .qbody{padding:20px 16px 30px}
  .anchors{font-size:11px}
  .prompts li{font-size:11.5px;padding:7px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .badge-art{transform:none !important;opacity:1 !important}
  .badge-label,.unlock-tag{opacity:1 !important}
  .livedot,.unlock-tag::after{animation:none !important;opacity:1 !important;transform:none !important}
}