@font-face{font-family:"DM Serif Display";src:url(fonts/DMSerifDisplay-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}

:root{
  --deep:#0C1030; --navy:#14193F; --cyan:#00B6ED; --magenta:#C2389C; --violet:#5B2E9A;
  --ink:#fff; --ink-2:#C9CEE6; --ink-3:#8E96BD; --grey:#4A5568;
  --found:#3DDC84; --missed:#FFB020; --wrong:#FF5C7A;
  --pad:clamp(16px,3vw,40px);
  --top:calc(env(safe-area-inset-top,0px) + clamp(16px,2.4vw,28px));
  --bottom:calc(env(safe-area-inset-bottom,0px) + clamp(16px,2.4vw,28px));
  --radius:clamp(14px,1.6vw,22px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--deep);color:var(--ink);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-size:clamp(16px,1.5vw,20px);line-height:1.4;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.02;margin:0;letter-spacing:-.005em}
p{margin:0}
:focus{outline:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
/* Headings get focus on each screen change for screen readers; they never need a visible ring. */
h1:focus-visible,h2:focus-visible{outline:none}
/* Netlify's free-plan badge. The dashboard setting is the real fix; this is a fallback. */
#nl-badge-frame{display:none!important}

/* ---------- backdrop: space scene, stars, mesh for transitions ---------- */
.sky{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(75vmax 60vmax at 92% 108%,rgba(194,56,156,.7),transparent 62%),
    radial-gradient(65vmax 55vmax at 105% -5%,rgba(107,52,180,.75),transparent 62%),
    radial-gradient(60vmax 50vmax at -5% 105%,rgba(52,58,170,.65),transparent 60%),
    radial-gradient(45vmax 35vmax at 40% 45%,rgba(60,40,130,.35),transparent 70%),
    var(--deep)}
.stars{position:absolute;inset:0}
.stars i{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d,4s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes twinkle{from{opacity:var(--o,.7)}to{opacity:.15}}
.mesh{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:
    radial-gradient(55vmax 50vmax at 8% 38%,rgba(0,182,237,.9),transparent 60%),
    radial-gradient(50vmax 45vmax at 38% 100%,rgba(194,56,156,.85),transparent 62%),
    radial-gradient(50vmax 45vmax at 92% 78%,rgba(91,46,154,.85),transparent 60%),
    radial-gradient(45vmax 40vmax at 75% 5%,rgba(20,25,63,.95),transparent 60%),
    var(--navy)}
body.mesh-on .mesh{opacity:1}

/* felt monsters peeking in from the edges */
.peek{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.peek-on .peek{opacity:1}
body.peek-dim .peek{opacity:.35}
.peek img{position:absolute;width:var(--s);height:var(--s);object-fit:cover;border-radius:50%;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
  transform:rotate(var(--r,0deg));animation:bob 6s ease-in-out var(--delay,0s) infinite alternate}
@keyframes bob{from{translate:0 0}to{translate:0 -10px}}

/* stacked wordmark, top left on every screen */
.wordmark{position:fixed;z-index:3;top:var(--top);left:calc(var(--pad) + env(safe-area-inset-left,0px));
  font-family:"DM Serif Display",Georgia,serif;font-size:clamp(18px,2vw,26px);line-height:.92;display:flex;flex-direction:column}
.wordmark .sky-word{color:#7FD8F6}

/* ---------- screen frame ---------- */
#app{position:relative;z-index:1;height:100%;height:100dvh}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:var(--top) calc(var(--pad) + env(safe-area-inset-right,0px)) var(--bottom) calc(var(--pad) + env(safe-area-inset-left,0px))}
.screen.enter{animation:enter .4s ease-out both}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.head{padding-left:clamp(80px,9vw,120px);min-height:clamp(56px,6vw,76px);display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.head h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.kicker{color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8em;margin-bottom:6px}
.lede{color:var(--ink-2);font-size:clamp(1.05rem,1.8vw,1.4rem);max-width:46ch}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(14px,2.4vh,28px)}
.foot{display:flex;justify-content:center;align-items:center;gap:16px;padding-top:clamp(10px,2vh,20px)}

/* buttons: big white pill for the main action, gradient pill for secondary */
.btn{min-height:64px;min-width:220px;padding:0 44px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .12s ease,opacity .2s ease}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.3;box-shadow:none}
.btn.grad{background:linear-gradient(100deg,var(--cyan),var(--magenta));color:#fff}
.btn.xl{min-height:84px;min-width:300px;font-size:clamp(1.4rem,2.4vw,1.9rem)}

/* ---------- start ---------- */
.start h1{font-size:clamp(3.4rem,10vw,8.5rem);text-shadow:0 6px 40px rgba(12,16,48,.6)}
.start .lede{text-align:center;max-width:30ch;text-shadow:0 2px 16px rgba(12,16,48,.8)}
.start .center{gap:clamp(18px,3.5vh,40px)}

/* ---------- sector pick ---------- */
.sectors{flex:1;display:grid;gap:clamp(12px,1.8vw,22px);grid-template-columns:repeat(3,1fr);align-content:center;max-width:1100px;width:100%;margin:0 auto}
.sector{min-height:clamp(96px,16vh,160px);border-radius:var(--radius);padding:20px;font-weight:700;font-size:clamp(1.2rem,2.3vw,1.8rem);line-height:1.15;text-align:center;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .12s ease,background .15s ease,border-color .15s ease}
.sector:active,.sector.on{transform:scale(.96);background:#fff;color:var(--navy);border-color:#fff}

/* ---------- scenario intro + interstitial ---------- */
.scenario h2{font-size:clamp(2.2rem,4.8vw,4rem);max-width:24ch;text-wrap:balance}
.scenario .lede{font-size:clamp(1.3rem,2.4vw,2rem);color:#fff;font-weight:600}
.loading h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.spinner{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- persona cards ---------- */
.counter{font-weight:800;font-size:clamp(1.2rem,2.2vw,1.8rem);background:rgba(255,255,255,.12);border-radius:999px;padding:10px 22px;white-space:nowrap;transition:background .2s ease,color .2s ease}
.counter.full{background:var(--cyan);color:var(--navy)}
.board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:clamp(8px,1.6vh,18px)}
.cards{--cols:6;--rows:2;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(8px,1.2vw,16px);
  width:min(100%,calc((100dvh - var(--chrome,260px)) * var(--cols) / var(--rows)))}
@media (max-aspect-ratio:1/1){.cards{--cols:4;--rows:3}}
.pcard{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--navy);display:block;width:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s ease,box-shadow .15s ease,opacity .3s ease,filter .3s ease}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .role{position:absolute;inset:auto 0 0 0;padding:34% 10px 10px;background:linear-gradient(transparent,rgba(8,10,30,.55) 35%,rgba(8,10,30,.94));
  font-weight:700;font-size:clamp(.78rem,1.25vw,1.05rem);line-height:1.15;text-align:left}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .15s ease;pointer-events:none}
.pcard.on{transform:scale(.95)}
.pcard.on::after{box-shadow:inset 0 0 0 5px var(--cyan)}
.pcard .tick{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:var(--cyan);color:var(--navy);display:grid;place-items:center;
  font-weight:800;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.pcard.on .tick{transform:scale(1)}
.pcard.tap{animation:tap .2s ease-out}
@keyframes tap{50%{transform:scale(.9)}}
.pcard .tag{position:absolute;top:8px;left:8px;border-radius:999px;padding:4px 10px;font-size:clamp(.66rem,1vw,.82rem);font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* reveal states */
.pcard.flip{animation:flip .5s ease-out backwards}
@keyframes flip{from{transform:perspective(800px) rotateY(90deg);opacity:0}}
.pcard.found::after{box-shadow:inset 0 0 0 5px var(--found)}
.pcard.found .tag{background:var(--found);color:#053}
.pcard.missed::after{box-shadow:inset 0 0 0 5px var(--missed)}
.pcard.missed .tag{background:var(--missed);color:#3a2500}
.pcard.decoy-picked{opacity:.45;filter:grayscale(.8)}
.pcard.decoy-picked .tag{background:rgba(255,255,255,.85);color:var(--navy)}
.pcard.decoy{opacity:.18;filter:grayscale(1)}
.reveal .head h2 .num{color:var(--cyan)}

/* ---------- round 2: deal moments ---------- */
.progress{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:6px;margin-top:10px;width:min(100%,560px)}
.progress span{display:block}
.progress i{display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;position:relative}
.progress i::before{content:"";position:absolute;inset:0;background:var(--c,var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.progress i.done::before,.progress i.now::before{transform:scaleX(1)}
.progress i.now::before{background:rgba(255,255,255,.7)}
.progress i.best{--c:var(--found)} .progress i.half{--c:var(--missed)} .progress i.wrong,.progress i.missed{--c:var(--wrong)}
.progress b{display:block;font-size:.62em;font-weight:600;color:var(--ink-3);margin-top:5px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress span.here b{color:#fff}
.moment{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,44px);align-items:center;padding-top:clamp(10px,2vh,24px)}
.moment .pcard{width:min(100%,calc(100dvh - 300px));justify-self:center}
.moment .pcard .role{font-size:clamp(1.05rem,1.9vw,1.6rem);padding-bottom:16px;padding-left:16px}
.talk{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px)}
.bubble{position:relative;background:#fff;color:var(--navy);border-radius:24px;padding:clamp(18px,2.4vw,30px);
  font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.15;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.bubble::before{content:"";position:absolute;left:-14px;top:36px;border:14px solid transparent;border-left:0;border-right-color:#fff}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.answers{display:grid;gap:clamp(8px,1.4vh,14px)}
.answer{min-height:64px;text-align:left;padding:14px 22px;border-radius:18px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);
  font-weight:600;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.25;transition:transform .12s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
  animation:enter .3s ease-out backwards}
.answer:nth-child(2){animation-delay:.08s}.answer:nth-child(3){animation-delay:.16s}
.answer:active:not(:disabled){transform:scale(.98)}
.answer:disabled{cursor:default;opacity:.45}
.answer.best{opacity:1;background:var(--found);border-color:var(--found);color:#042;animation:pulse .5s ease-out}
.answer.chosen.half{opacity:1;background:var(--missed);border-color:var(--missed);color:#3a2500}
.answer.chosen.wrong{opacity:1;background:var(--wrong);border-color:var(--wrong);color:#fff}
@keyframes pulse{50%{transform:scale(1.03)}}
.verdict{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.5rem,2.8vw,2.3rem);min-height:1.2em;animation:enter .35s ease-out both}
.verdict.best{color:var(--found)} .verdict.half{color:var(--missed)} .verdict.wrong{color:var(--wrong)}
.moment .foot{justify-content:flex-start;padding-top:0;min-height:64px}

.stall .pcard{filter:grayscale(.85)}
.stall .pcard::after{box-shadow:inset 0 0 0 5px var(--wrong)}
.stall .pcard .tag{background:var(--wrong);color:#fff}
.stall .pcard.shake{animation:shake .5s .2s both}
@keyframes shake{15%,55%{transform:translateX(-12px) rotate(-2deg)}35%,75%{transform:translateX(12px) rotate(2deg)}}
.stall h3{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--wrong)}
.stall .lede{color:#fff;font-size:clamp(1.2rem,2.1vw,1.7rem)}

@media (max-aspect-ratio:1/1){
  .moment{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;align-items:start}
  .moment .pcard{width:min(64vw,38vh)}
  .bubble::before{display:none}
}

/* ---------- result ---------- */
.result{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,56px);flex:1;min-height:0;align-items:center}
.score{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(6rem,17vw,13rem);line-height:.85;font-variant-numeric:tabular-nums}
.score small{font-size:.28em;color:var(--ink-3);margin-left:.1em}
.result h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-top:14px}
.result .lede{margin-top:10px}
.lost h3{font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85em;color:var(--cyan);margin-bottom:12px}
.rows{display:grid;gap:clamp(8px,1.4vh,14px)}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,1.4vw,18px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:10px;animation:enter .4s ease-out both}
.row:nth-child(2){animation-delay:.12s}.row:nth-child(3){animation-delay:.24s}
.row .who{width:clamp(64px,8vw,96px);aspect-ratio:1;border-radius:12px;object-fit:cover}
.row .deckimg{width:clamp(120px,15vw,190px);aspect-ratio:4/3;border-radius:12px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.row .why{font-size:.8em;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.row .why.missed,.row .why.wrong{color:var(--wrong)} .row .why.half{color:var(--missed)}
.row .rname{font-weight:700;font-size:1.05em;line-height:1.2}
.row .find{color:var(--ink-2);font-size:.92em;margin-top:4px}
.row .find b{color:#fff}
.bridge{margin-top:clamp(12px,2vh,20px);padding:clamp(16px,2vw,24px);border-radius:var(--radius);background:linear-gradient(110deg,rgba(0,182,237,.85),rgba(91,46,154,.85) 60%,rgba(194,56,156,.85));
  font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.1}
@media (max-aspect-ratio:1/1){
  .result{grid-template-columns:1fr;align-content:center;text-align:center}
  .result .lede{margin-inline:auto}
  .rows,.row{text-align:left}
}

/* ---------- visitor mode: privacy link, honeypot, ticket ---------- */
.privacy{margin-top:-6px;font-size:.9em}
.privacy a{color:#0077A8;font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ticket{background:#fff;color:var(--navy);border-radius:20px;padding:16px 26px;min-width:min(100%,320px);box-shadow:0 18px 40px rgba(0,0,0,.35);
  border:2px dashed rgba(20,25,63,.25);animation:pop .5s .4s cubic-bezier(.2,1.4,.4,1) backwards}
.ticket .kicker{color:#0077A8}
.ticket .tname{font-family:"DM Serif Display",Georgia,serif;font-size:1.7rem;line-height:1.1}
.ticket .tscore{font-weight:700;margin-top:4px} .ticket .tscore b{font-size:1.3em}
.ticket .tmeta{color:var(--grey);font-size:.9em;margin-top:2px}
.btn.ghost-pill{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}

/* ---------- polish: attention cues and entrances ---------- */
@keyframes beckon{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 16px rgba(255,255,255,0)}}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.97)}}
.start h1{animation:rise .8s cubic-bezier(.2,.9,.3,1) backwards}
.start .lede{animation:rise .8s .15s cubic-bezier(.2,.9,.3,1) backwards}
.start .btn{animation:rise .8s .3s cubic-bezier(.2,.9,.3,1) backwards,beckon 2.2s 1.2s ease-in-out infinite}
.round1 #lock:not(:disabled){animation:pop .4s cubic-bezier(.2,1.4,.4,1),beckon 1.8s .4s ease-in-out infinite}
.cards.full .pcard:not(.on){opacity:.45;filter:saturate(.6)}
.counter.nudge{animation:nudge .4s ease}
@keyframes nudge{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sectors .sector{animation:rise .5s cubic-bezier(.2,.9,.3,1) backwards}
.sectors .sector:nth-child(2){animation-delay:.05s}.sectors .sector:nth-child(3){animation-delay:.1s}
.sectors .sector:nth-child(4){animation-delay:.15s}.sectors .sector:nth-child(5){animation-delay:.2s}.sectors .sector:nth-child(6){animation-delay:.25s}
.moment:not(.stall)>.pcard{animation:slidein .5s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes slidein{from{opacity:0;transform:translateX(-40px) rotate(-3deg)}}
.score.landed{animation:land .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes land{40%{transform:scale(1.08)}}
.fan{position:relative;height:clamp(120px,20vh,200px);width:100%;margin-bottom:8px}
.fan img{position:absolute;left:50%;top:0;width:clamp(150px,20vw,240px);aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:translateX(calc(-50% + var(--i) * 70%)) rotate(calc(var(--i) * 8deg));animation:deal .6s cubic-bezier(.2,1.2,.4,1) backwards}
@keyframes deal{from{opacity:0;transform:translateX(-50%) translateY(60px) rotate(0) scale(.8)}}
.staff-card #s-sound[aria-pressed="true"]{background:var(--cyan);color:var(--navy)}

/* ---------- phones: a back-up if the stand runs on mobiles ---------- */
@media (max-width:600px){
  :root{--pad:16px;--radius:14px}
  body{font-size:15px}
  .screen{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen>*{flex-shrink:0}
  .board,.moment,.result,.questions,.sectors,.formwrap{flex:1 0 auto;min-height:auto}
  .head{padding-left:58px;min-height:52px;gap:10px}
  .head h2{font-size:1.75rem}
  .head .lede{font-size:.95rem}
  .kicker{font-size:.72em;margin-bottom:4px}
  .lede{font-size:1rem}
  .wordmark{font-size:16px}
  .btn{min-width:0;min-height:56px;padding:0 28px;font-size:1.05rem}
  .btn.xl{min-width:min(100%,280px);min-height:64px;font-size:1.3rem}
  .start h1{font-size:3.3rem}
  .sectors{grid-template-columns:1fr 1fr;gap:10px;align-content:center}
  .sector{min-height:88px;font-size:1.1rem;padding:12px}
  .scenario h2{font-size:1.9rem}
  .scenario .lede{font-size:1.15rem}
  .loading h2{font-size:1.9rem}
  .counter{font-size:1rem;padding:8px 14px}
  .cards{--cols:3;--rows:4;gap:6px}
  .round1 .board,.reveal .board{margin-inline:-10px}
  .pcard .role{font-size:.72rem;padding:30% 7px 7px}
  .pcard .tick{width:26px;height:26px;top:6px;right:6px;font-size:.8rem}
  .pcard .tag{top:6px;left:6px;padding:3px 7px;font-size:.6rem}
  .pcard.on::after,.pcard.found::after,.pcard.missed::after,.stall .pcard::after{box-shadow:inset 0 0 0 4px var(--c-out,currentColor)}
  .pcard.on::after{--c-out:var(--cyan)} .pcard.found::after{--c-out:var(--found)} .pcard.missed::after{--c-out:var(--missed)} .stall .pcard::after{--c-out:var(--wrong)}
  .progress{gap:4px;margin-top:8px}
  .progress i{height:8px}
  .progress b{display:none}
  .moment{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:14px;padding-top:12px}
  .moment .pcard{width:min(56vw,30vh)}
  .moment .pcard .role{font-size:.95rem;padding:30% 10px 10px}
  .bubble{font-size:1.25rem;padding:16px 18px;border-radius:18px}
  .bubble::before{display:none}
  .answer{min-height:56px;padding:12px 16px;font-size:.95rem;border-radius:14px}
  .verdict{font-size:1.35rem}
  .stall h3{font-size:2rem}
  .stall .lede{font-size:1.05rem}
  .result{grid-template-columns:1fr;text-align:center;gap:18px;align-content:start;padding-top:8px}
  .score{font-size:5.5rem}
  .result h2{font-size:2rem;margin-top:8px}
  .result .lede{margin-inline:auto}
  .rows,.row{text-align:left}
  .row{gap:10px;padding:8px}
  .row .who{width:52px}
  .row .deckimg{width:88px;border-radius:8px}
  .row .find{font-size:.85em}
  .bridge{font-size:1.25rem}
  .card-form{padding:22px 18px;border-radius:22px}
  .card-form h2{font-size:2rem}
  .field input{min-height:56px}
  .questions{gap:18px;align-content:start}
  .q>p{font-size:1.05rem;margin-bottom:8px}
  .opts{grid-template-columns:1fr 1fr;gap:8px}
  .opt{min-height:56px;padding:8px 10px;font-size:.92rem;border-radius:14px}
  h1.thanks{font-size:2.8rem}
  .thanks .lede{font-size:1.2rem}
  .fan{height:120px}
  .fan img{width:132px;border-radius:10px}
  .staff-card{padding:22px 18px}
}
/* phones on their side: short screens scroll rather than shrink */
@media (max-height:500px) and (orientation:landscape){
  .screen{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen>*{flex-shrink:0}
  .board,.moment,.result,.questions,.sectors,.formwrap{flex:1 0 auto;min-height:auto}
  .head h2{font-size:1.7rem}
  .head .lede{font-size:.95rem}
  .start h1{font-size:3rem}
  .cards{width:100%}
  .sector{min-height:64px}
  .moment{align-items:start}
  .moment .pcard{width:min(100%,48vh)}
  .result{align-items:start}
  .score{font-size:5rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- lead form: white card floating over the sky ---------- */
.screen.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
input{font:inherit;font-size:max(16px,1em);-webkit-user-select:text;user-select:text}
.formwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0 24px}
.card-form{color-scheme:light;width:min(100%,640px);background:#fff;color:var(--navy);border-radius:28px;padding:clamp(24px,3.4vw,44px);display:grid;gap:clamp(12px,1.8vh,18px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);animation:pop .45s cubic-bezier(.2,1.2,.4,1) both}
.card-form h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.card-form .sub{color:var(--grey);font-size:clamp(1rem,1.6vw,1.2rem)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.field{display:grid;gap:6px}
.field span{font-weight:700;font-size:.9em}
.field input{min-height:60px;padding:0 18px;border-radius:14px;border:2px solid #D5DAE6;background:#F5F7FB;color:var(--navy);transition:border-color .15s ease}
.field input:focus{border-color:var(--cyan);background:#fff;outline:none}
.field.bad input{border-color:var(--wrong)}
.consent{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#F5F7FB;border:2px solid transparent;color:var(--grey);font-size:.95em;line-height:1.35;min-height:60px}
.consent input{width:30px;height:30px;flex:none;margin:0;accent-color:var(--cyan)}
.consent.bad{border-color:var(--wrong)}
.err{color:#D12A4A;font-weight:700;min-height:1.3em}
.card-form .btn{justify-self:start;min-width:200px}
@media (max-width:560px){.pair{grid-template-columns:1fr}}

/* ---------- three questions ---------- */
.questions{flex:1;display:grid;gap:clamp(16px,3vh,32px);align-content:center;max-width:1100px;width:100%;margin:0 auto;padding:12px 0}
.q>p{font-weight:700;font-size:clamp(1.15rem,2vw,1.55rem);margin-bottom:12px}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px)}
.opt{min-height:72px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);font-weight:600;font-size:clamp(.95rem,1.45vw,1.15rem);line-height:1.2;
  transition:transform .12s ease,background .15s ease,color .15s ease,border-color .15s ease}
.opt:active{transform:scale(.97)}
.opt.on{background:#fff;color:var(--navy);border-color:#fff}
@media (max-aspect-ratio:1/1){.opts{grid-template-columns:repeat(2,1fr)}}

/* ---------- thanks ---------- */
h1.thanks{font-size:clamp(3rem,8vw,6.5rem);max-width:14ch}
.thanks .lede{color:#fff;font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:600;max-width:26ch}

/* ---------- staff panel ---------- */
.wordmark{padding:6px;margin:-6px;border-radius:10px;transition:background 3s linear}
.wordmark.pressing{background:rgba(255,255,255,.18)}
.staff{position:fixed;inset:0;z-index:10;background:rgba(8,10,30,.8);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.staff[hidden]{display:none}
.staff-card{color-scheme:light;width:min(100%,560px);background:#fff;color:var(--navy);border-radius:24px;padding:32px;display:grid;gap:18px}
.staff-card h2{font-size:2.4rem}
.staff-card .big{font-size:1.2rem} .staff-card .big b{font-size:1.6em}
.staff-card .offline{font-weight:600;color:var(--grey);margin-top:-8px}
.staff-row{display:flex;gap:12px;flex-wrap:wrap}
.staff-card .btn{min-width:0;flex:1;box-shadow:none;background:var(--navy);color:#fff}
.staff-card .btn.ghost{background:#EEF1F6;color:var(--navy)}
.staff-card .btn.armed{background:var(--wrong);color:#fff}
.staff-card .danger{border-top:1px solid #E2E6EF;padding-top:18px}
.staff-card .msg{min-height:1.3em;color:var(--grey);font-weight:600;word-break:break-all}
.staff-card .msg a{color:#0077A8}