/* ============================================================================
   Ideagen World '26 — Customs app — STYLES (Dark / Product-Launch register)
   Tokens reused verbatim from ideagen-world-26.html.
   Travel conceit — journey stepper, drawn passport photo, split-flap
   departures board, boarding-pass reveal — echoes the event site's own
   .bpass / .board / stamped-card language.
   ========================================================================== */
:root{
  --bg:#0D1117; --card:#111c2f; --card2:#152439; --thumb:#1f2a3c;
  --ink:#e4e4e7; --mute:#9ca3af; --faint:#8590a0; --brightmute:#c3ccd8;
  --teal:#29D2D7; --teal-lt:#5CE0E5; --pink:#ff54a4; --blue:#36eeff; --magenta:#E30072; --green:#00CE7D;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.22);
  --space-xs:6px; --space-sm:10px; --space-md:16px; --space-lg:24px; --space-xl:40px;
  --dur-micro:200ms; --dur-entrance:700ms; --dur-cascade:500ms; --dur-ambient:6000ms;
  --eo:cubic-bezier(.22,1,.36,1);
  --cardsh:0 0 0 1px rgba(255,255,255,.07),0 0 22px -10px rgba(41,210,215,.16),rgba(255,255,255,.09) 0 .5px 0 inset;
  --cardshH:0 0 0 1px rgba(255,255,255,.14),0 18px 40px -22px rgba(0,0,0,.7),0 0 34px -8px rgba(41,210,215,.3),rgba(255,255,255,.14) 0 .5px 0 inset;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Gilroy',system-ui,-apple-system,sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.028) 2px, transparent 2px),
    radial-gradient(ellipse 55% 50% at 85% 10%, rgba(0,160,210,.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 10% 34%, rgba(147,39,143,.16) 0%, transparent 70%);
  background-size:28px 28px,100% 100%,100% 100%;
  background-attachment:fixed;
  color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ── ambient orbs ─────────────────────────────────────────────────────── */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform}
.orb.o1{width:60vw;height:60vw;top:-18vw;right:-14vw;background:radial-gradient(circle,rgba(41,210,215,.22),transparent 70%);animation:drift1 22s ease-in-out infinite alternate}
.orb.o2{width:56vw;height:56vw;bottom:-16vw;left:-12vw;background:radial-gradient(circle,rgba(255,84,164,.2),transparent 70%);animation:drift2 27s ease-in-out infinite alternate;animation-delay:-13s}
.orb.o3{width:40vw;height:40vw;top:40%;left:50%;background:radial-gradient(circle,rgba(0,206,125,.14),transparent 70%);animation:drift3 18s ease-in-out infinite alternate;animation-delay:-7s}
@keyframes drift1{to{transform:translate3d(-40px,40px,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(40px,-30px,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(-30px,-24px,0) scale(.9)}}

/* ── shared type signatures ───────────────────────────────────────────── */
.grad{display:inline-block;font-weight:700;background:linear-gradient(100deg,var(--pink),var(--blue),var(--pink));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6.5s linear infinite}
@keyframes gradShift{to{background-position:220% center}}
.fs{color:var(--pink)}
.muted{color:var(--faint);font-weight:400}

/* ── app bar ──────────────────────────────────────────────────────────── */
.appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 20px 12px;
  background:rgba(13,17,23,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(41,210,215,.4),rgba(255,84,164,.4),transparent)}
.lockup{display:inline-flex;align-items:center;gap:9px}
.lockup__txt{display:inline-flex;align-items:center;font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1}
.mm-a{color:#fff}
.mm-bar{border-radius:3px;background:linear-gradient(var(--teal-lt),var(--pink));width:2.5px;height:17px;margin:0 8px}
.mm-b{background:linear-gradient(100deg,var(--teal-lt),var(--pink),var(--teal-lt));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s linear infinite}

/* four-dots mark — gentle enter + float */
.mzdots{width:26px;height:26px;flex:none}
.mzdots circle{transform-origin:center;animation:mzEnter .7s var(--eo) backwards, mzFloat 4s ease-in-out infinite}
.mzdots circle:nth-child(1){animation-delay:0ms,1.1s}
.mzdots circle:nth-child(2){animation-delay:120ms,2.1s}
.mzdots circle:nth-child(3){animation-delay:240ms,3.1s}
.mzdots circle:nth-child(4){animation-delay:360ms,4.1s}
@keyframes mzEnter{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes mzFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.05)}}

.pill{position:relative;display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.05);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brightmute)}
.pill::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1.5px;pointer-events:none;background:linear-gradient(100deg,var(--pink),var(--blue),var(--pink));background-size:220% auto;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gradShift 5s linear infinite}
.livedot{width:6px;height:6px;border-radius:50%;background:var(--teal-lt);animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ── journey stepper (boarding-pass route) ───────────────────────────── */
.journey{max-width:560px;margin:0 auto;padding:14px 20px 0}
.journey__track{list-style:none;display:flex;justify-content:space-between;position:relative}
.journey__track::before{content:"";position:absolute;left:10%;right:10%;top:11px;height:2px;background:rgba(255,255,255,.1);border-radius:2px}
.journey__fill{position:absolute;left:10%;top:11px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-lt),var(--pink));width:0;transition:width var(--dur-cascade) var(--eo);box-shadow:0 0 10px -2px rgba(92,224,229,.7)}
.journey__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.journey__dot{width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:border-color var(--dur-micro) var(--eo),background var(--dur-micro) var(--eo),transform var(--dur-micro) var(--eo)}
.journey__dot::after{content:"";width:7px;height:7px;border-radius:50%;background:transparent;transition:background var(--dur-micro) var(--eo)}
.journey__lab{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);transition:color var(--dur-micro) var(--eo);white-space:nowrap}
.journey__step.is-done .journey__dot{border-color:var(--teal-lt);background:linear-gradient(160deg,var(--teal-lt),var(--teal))}
.journey__step.is-done .journey__dot::after{background:#06121f;width:6px;height:11px;border-radius:0;transform:rotate(45deg) translate(-1px,-2px);background:transparent;border:solid #06121f;border-width:0 2px 2px 0}
.journey__step.is-current .journey__dot{border-color:var(--pink);transform:scale(1.12);box-shadow:0 0 0 4px rgba(255,84,164,.14)}
.journey__step.is-current .journey__dot::after{background:var(--pink);animation:dotPulse 2.4s ease-in-out infinite}
.journey__step.is-current .journey__lab,.journey__step.is-done .journey__lab{color:var(--brightmute)}

/* ── stage / screens + directional transitions ──────────────────────── */
.stage{max-width:560px;margin:0 auto;padding:20px 20px 56px;overflow-x:clip}
.screen{display:none}
.screen--active{display:block}
.screen--active.in-fwd{animation:slideFwd var(--dur-entrance) var(--eo) both}
.screen--active.in-back{animation:slideBack var(--dur-entrance) var(--eo) both}
@keyframes slideFwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* staggered reveal for children of a freshly shown screen */
.screen--active .rv{animation:rvIn var(--dur-entrance) var(--eo) backwards;animation-delay:var(--d,0s)}
@keyframes rvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.backbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--mute);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 10px 8px 0;min-height:44px;border-radius:10px;transition:color var(--dur-micro) var(--eo),transform var(--dur-micro) var(--eo)}
.backbtn:hover{color:#fff;transform:translateX(-2px)}
.backbtn svg{width:16px;height:16px}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
h1{font-size:clamp(34px,10vw,48px);font-weight:400;line-height:1.05;letter-spacing:-.025em;color:#fff}
h2{font-size:clamp(26px,7.5vw,34px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:#fff}
.lead{margin-top:14px;font-size:16px;color:var(--mute);max-width:52ch}
.lead b{color:var(--ink);font-weight:600}

/* ── card ─────────────────────────────────────────────────────────────── */
.card{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border-radius:18px;box-shadow:var(--cardsh)}
.form{margin-top:26px;padding:22px 20px 24px;display:grid;gap:20px}

/* ── form fields ──────────────────────────────────────────────────────── */
.field{display:grid;gap:8px}
.field label,.consent__txt{font-size:14px;color:var(--brightmute)}
.field label{font-weight:600;color:#fff}
input[type=text],select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(0,0,0,.28);border:1px solid var(--line2);border-radius:12px;
  padding:15px 16px;min-height:52px;transition:border-color var(--dur-micro) var(--eo),box-shadow var(--dur-micro) var(--eo)}
input[type=text]::placeholder{color:var(--faint)}
input[type=text]:focus,select:focus{outline:none;border-color:var(--teal-lt);box-shadow:0 0 0 3px rgba(41,210,215,.18)}
.selectwrap{position:relative}
.selectwrap::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--brightmute);border-bottom:2px solid var(--brightmute);transform:translateY(-70%) rotate(45deg);pointer-events:none}
select{appearance:none;-webkit-appearance:none;padding-right:44px}
select option{background:#0f1a2b;color:var(--ink)}

.err{font-size:13px;color:var(--pink);font-weight:600}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px;border-radius:12px;background:rgba(255,84,164,.05);box-shadow:inset 0 0 0 1px rgba(255,84,164,.3)}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent__box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line2);margin-top:1px;position:relative;transition:background var(--dur-micro) var(--eo),border-color var(--dur-micro) var(--eo)}
.consent input:checked + .consent__box{background:linear-gradient(160deg,var(--teal-lt),var(--teal));border-color:var(--teal-lt)}
.consent input:checked + .consent__box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #06121f;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--teal-lt);outline-offset:2px}
.consent__txt{line-height:1.5}

/* ── CTA + link button ────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;color:#06121f;cursor:pointer;
  min-height:56px;padding:16px 22px;border:none;border-radius:14px;
  background:linear-gradient(100deg,var(--teal-lt),var(--teal));
  box-shadow:0 10px 30px -12px rgba(41,210,215,.7);
  transition:transform var(--dur-micro) var(--eo),box-shadow var(--dur-micro) var(--eo),opacity var(--dur-micro) var(--eo)}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(41,210,215,.8)}
.cta:active{transform:translateY(0)}
.cta:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.cta__arw{transition:transform var(--dur-micro) var(--eo)}
.cta:hover .cta__arw{transform:translateX(3px)}
.cta.is-loading{opacity:.7;pointer-events:none}
.cta.is-loading .cta__arw{animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.linkbtn{display:block;width:100%;text-align:center;background:none;border:none;color:var(--mute);font:inherit;font-size:14px;font-weight:600;padding:12px;min-height:44px;cursor:pointer;border-radius:10px;transition:color var(--dur-micro) var(--eo)}
.linkbtn:hover{color:#fff}

.stack{margin-top:24px;display:grid;gap:6px}

/* ── draw-your-face studio ───────────────────────────────────────────── */
.studio{margin-top:24px;padding:18px;display:grid;gap:16px}
.photo{position:relative;width:100%;max-width:280px;margin:0 auto;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 15%,#f6f8fc,#e7ecf4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 40px -8px rgba(36,48,60,.18),0 0 0 1px var(--line2);touch-action:none}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px -20px rgba(36,48,60,.35);border-radius:16px}
.photo canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.photo__guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity var(--dur-entrance) var(--eo)}
.photo__guide svg{width:62%;height:62%;opacity:.5}
.photo.has-ink .photo__guide{opacity:0}
.photo__hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:#7c8aa0;pointer-events:none;transition:opacity var(--dur-micro) var(--eo)}
.photo.has-ink .photo__hint{opacity:0}

.tools{display:grid;gap:14px}
.swatches{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.16);cursor:pointer;padding:0;position:relative;transition:transform var(--dur-micro) var(--eo),border-color var(--dur-micro) var(--eo)}
.swatch:hover{transform:translateY(-2px)}
.swatch.is-on{border-color:#fff;transform:translateY(-2px) scale(1.06);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.swatch--eraser{background:
  linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%) 0 0/12px 12px,
  linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%) 6px 6px/12px 12px,
  #1a2740}
.swatch--eraser::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.toolrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sizes{display:flex;align-items:center;gap:8px}
.sizebtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.22);cursor:pointer;display:grid;place-items:center;transition:border-color var(--dur-micro) var(--eo),transform var(--dur-micro) var(--eo)}
.sizebtn:hover{transform:translateY(-2px)}
.sizebtn.is-on{border-color:var(--teal-lt);box-shadow:0 0 0 3px rgba(41,210,215,.16)}
.sizebtn i{display:block;border-radius:50%;background:var(--brightmute)}
.sizebtn[data-size="4"] i{width:5px;height:5px}
.sizebtn[data-size="9"] i{width:10px;height:10px}
.sizebtn[data-size="16"] i{width:16px;height:16px}
.ghostbtn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--brightmute);font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;padding:0 14px;border-radius:12px;transition:border-color var(--dur-micro) var(--eo),color var(--dur-micro) var(--eo),transform var(--dur-micro) var(--eo)}
.ghostbtn:hover{color:#fff;border-color:var(--line2);transform:translateY(-2px)}
.ghostbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ghostbtn svg{width:15px;height:15px}
.ghostrow{display:flex;gap:8px}

/* ── avatar (drawn photo or initials monogram) ───────────────────────── */
.ava{flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(41,210,215,.28),rgba(255,84,164,.28));
  color:#fff;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);position:relative}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava--sm{width:36px;height:36px;font-size:12px}
.ava--md{width:52px;height:52px;font-size:16px}
.ava--lg{width:72px;height:72px;font-size:22px}
.ava--ring{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 2px rgba(92,224,229,.5),0 0 18px -6px rgba(92,224,229,.6)}

/* ── quiz ─────────────────────────────────────────────────────────────── */
.qhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.qhead .ava{margin-right:2px}
.qmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.qcount{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.qworld{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--teal-lt);background:rgba(41,210,215,.1);box-shadow:inset 0 0 0 1px rgba(41,210,215,.4);border-radius:999px;padding:4px 11px}
.qscore{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#fff;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums}
.qscore svg{width:14px;height:14px;color:var(--green)}
.qscore.bump{animation:scorePop .5s var(--eo)}
@keyframes scorePop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.qprogress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.qprogress__fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--blue));transition:width var(--dur-cascade) var(--eo)}
.qtext{margin:20px 0 22px;font-size:clamp(22px,6vw,28px);font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.01em}

.opts{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;
  min-height:60px;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  transition:transform var(--dur-micro) var(--eo),border-color var(--dur-micro) var(--eo),box-shadow var(--dur-micro) var(--eo),opacity var(--dur-micro) var(--eo)}
.opt.rv{animation:optIn var(--dur-cascade) var(--eo) backwards;animation-delay:var(--d,0s)}
@keyframes optIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--teal-lt)}
.opt:active:not(:disabled){transform:translateY(0)}
.opt:disabled{cursor:default}
.opt__mark{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);transition:all var(--dur-micro) var(--eo)}
.opt__txt{flex:1}
.opt--correct{border-color:var(--green);background:linear-gradient(180deg,rgba(0,206,125,.14),rgba(0,206,125,.04))}
.opt--correct .opt__mark{border-color:var(--green);background:var(--green);position:relative}
.opt--correct .opt__mark::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #06121f;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.opt--wrong{border-color:var(--magenta);background:linear-gradient(180deg,rgba(227,0,114,.14),rgba(227,0,114,.04));animation:shake .4s var(--eo)}
.opt--wrong .opt__mark{border-color:var(--magenta);background:var(--magenta)}
.opt--dim{opacity:.5}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ── vote ─────────────────────────────────────────────────────────────── */
.votes{margin-top:24px;display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:400px){.votes{grid-template-columns:1fr}}
.vote{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;cursor:pointer;
  min-height:64px;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  transition:transform var(--dur-micro) var(--eo),border-color var(--dur-micro) var(--eo),box-shadow var(--dur-micro) var(--eo)}
.vote:hover{transform:translateY(-2px);border-color:var(--teal-lt)}
.vote__name{font-size:15px;font-weight:700;color:#fff}
.vote__tag{font-size:11.5px;color:var(--faint)}
.vote--on{border-color:var(--green);background:linear-gradient(180deg,rgba(0,206,125,.12),rgba(0,206,125,.03));box-shadow:0 0 22px -10px rgba(0,206,125,.5)}
.vote--on .vote__name{color:var(--green)}

/* ── boarding-pass result reveal ─────────────────────────────────────── */
.bpass{position:relative;margin-top:22px;display:flex;border-radius:18px;overflow:hidden;
  background:linear-gradient(115deg,rgba(41,210,215,.10),rgba(255,84,164,.08));
  box-shadow:inset 0 0 0 1px var(--line2),0 18px 44px -26px rgba(0,0,0,.8)}
.bpass.reveal{animation:passIn 620ms var(--eo) both}
@keyframes passIn{0%{opacity:0;transform:translateY(20px) scale(.96)}100%{opacity:1;transform:none}}
.bpass__stub{flex:none;width:120px;padding:18px 16px;background:rgba(9,15,24,.42);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.bpass__stub::after{content:"";position:absolute;right:-1px;top:8px;bottom:8px;border-right:2px dashed rgba(255,255,255,.28)}
.bpass__lab{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bpass__rank{font-size:38px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bpass__class{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-lt)}
.bpass__class.first{color:var(--green)}
.bpass__body{flex:1;padding:16px 18px;display:grid;gap:12px;min-width:0}
.bpass__pax{display:flex;align-items:center;gap:12px;min-width:0}
.bpass__name{font-size:17px;font-weight:700;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpass__dept{font-size:12px;color:var(--faint)}
.bpass__stats{display:flex;gap:16px;flex-wrap:wrap}
.bpass__stats b{display:block;font-size:18px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.bpass__stats small{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bpass .drawbadge{margin-top:2px}
/* First Class stamp thunk */
.stamp{position:absolute;top:50%;right:18px;transform:translateY(-50%) rotate(-14deg);
  font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);padding:8px 12px;border-radius:10px;
  box-shadow:inset 0 0 0 3px var(--green);opacity:.92;pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,.2)}
.stamp.thunk{animation:stampThunk 620ms var(--eo) both;animation-delay:520ms}
@keyframes stampThunk{0%{opacity:0;transform:translateY(-50%) rotate(-14deg) scale(2.6)}70%{opacity:1;transform:translateY(-50%) rotate(-14deg) scale(.92)}100%{opacity:.92;transform:translateY(-50%) rotate(-14deg) scale(1)}}
@media(max-width:430px){
  .bpass{flex-direction:column}
  .bpass__stub{width:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px}
  .bpass__stub::after{right:8px;left:8px;top:auto;bottom:-1px;border-right:none;border-bottom:2px dashed rgba(255,255,255,.28)}
  .bpass__rank{font-size:30px}
  .stamp{top:auto;bottom:14px;right:16px;transform:rotate(-14deg)}
  .stamp.thunk{animation:stampThunkSm 620ms var(--eo) both;animation-delay:520ms}
  @keyframes stampThunkSm{0%{opacity:0;transform:rotate(-14deg) scale(2.6)}70%{opacity:1;transform:rotate(-14deg) scale(.92)}100%{opacity:.92;transform:rotate(-14deg) scale(1)}}
}

/* ── departures-board leaderboard ────────────────────────────────────── */
.board{margin-top:22px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:var(--cardsh)}
.board__head,.brow{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:12px;padding:12px 16px}
.board__head{background:rgba(41,210,215,.06);box-shadow:inset 0 -1px 0 var(--line)}
.board__head span{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-lt)}
.board__head .h-score,.board__head .h-time{text-align:right}
.brow{box-shadow:inset 0 -1px 0 var(--line);transform-origin:top center}
.brow:last-child{box-shadow:none}
.brow.flap{animation:flapIn 520ms var(--eo) backwards;animation-delay:var(--d,0s)}
@keyframes flapIn{0%{opacity:0;transform:perspective(400px) rotateX(-42deg) translateY(-6px)}100%{opacity:1;transform:none}}
.brow__rank{font-size:15px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;text-align:center}
.brow__pax{display:flex;align-items:center;gap:11px;min-width:0}
.brow__id{display:flex;flex-direction:column;min-width:0}
.brow__name{font-size:15px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow__name em{font-style:normal;color:var(--teal-lt)}
.brow__dept{font-size:11.5px;font-weight:500;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow__score{font-size:20px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-align:right;line-height:1}
.brow__time{font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.brow--first{background:linear-gradient(90deg,rgba(255,84,164,.12),transparent 70%)}
.brow--first .brow__rank,.brow--first .brow__score{color:var(--pink)}
.brow--me{background:linear-gradient(90deg,rgba(41,210,215,.14),rgba(41,210,215,.03));box-shadow:inset 0 0 0 1px rgba(41,210,215,.5)}
.brow--me .ava{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 2px rgba(92,224,229,.6)}
/* podium medals — top 3 rows on the departures board */
.medal{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin:0 auto;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(0,0,0,.28),0 2px 5px -1px rgba(0,0,0,.55)}
.medal::after{content:"";position:absolute;inset:2px;border-radius:50%;background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%);pointer-events:none}
.medal__n{position:relative;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.medal--rank1{background:radial-gradient(120% 120% at 30% 22%,#FFF0B8,#F4CE5B 42%,#D69B1E 100%)}
.medal--rank2{background:radial-gradient(120% 120% at 30% 22%,#FBFDFF,#D3DBE6 45%,#9AA7B7 100%)}
.medal--rank3{background:radial-gradient(120% 120% at 30% 22%,#FAD9B8,#D68F53 45%,#9C5E2E 100%)}
.medal--rank1 .medal__n{color:#3a2d00}
.medal--rank2 .medal__n{color:#232a33}
.medal--rank3 .medal__n{color:#3a2413}
/* faint row wash + score tint per podium place (these follow .brow--first / .brow--me so they win the cascade) */
.brow--rank1{background:linear-gradient(90deg,rgba(244,206,91,.16),transparent 72%)}
.brow--rank2{background:linear-gradient(90deg,rgba(200,210,224,.14),transparent 72%)}
.brow--rank3{background:linear-gradient(90deg,rgba(214,143,83,.14),transparent 72%)}
.brow--rank1 .brow__score{color:#F4CE5B}
.brow--rank2 .brow__score{color:#D7DFEA}
.brow--rank3 .brow__score{color:#E2A46B}
/* keep the "you" highlight readable if the current player is on the podium */
.brow--me.brow--rank1,.brow--me.brow--rank2,.brow--me.brow--rank3{background:linear-gradient(90deg,rgba(41,210,215,.14),rgba(41,210,215,.03))}
.board-empty{padding:26px 16px;text-align:center;color:var(--mute);font-size:14px}

.youcard{margin-top:14px;padding:16px 18px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,rgba(255,84,164,.08),rgba(255,84,164,.02));box-shadow:inset 0 0 0 1px rgba(255,84,164,.4)}
.youcard__rank{display:flex;flex-direction:column;line-height:1;flex:none}
.youcard__lab{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.youcard__rank #lbYouRank{font-size:28px;font-weight:700;color:#fff}
.youcard__body{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--brightmute)}
.drawbadge{align-self:flex-start;font-size:12px;font-weight:700;color:var(--green);background:rgba(0,206,125,.1);box-shadow:inset 0 0 0 1px rgba(0,206,125,.45);border-radius:999px;padding:6px 12px}

.updated{margin-top:16px;text-align:center;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ── celebratory brand-dot burst (leaderboard arrival) ───────────────── */
.burst{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.burst i{position:absolute;top:38%;left:50%;width:10px;height:10px;border-radius:50%;opacity:0;will-change:transform,opacity}
.burst i{animation:confetti 1100ms var(--eo) forwards;animation-delay:var(--d,0s)}
@keyframes confetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--tx,0),var(--ty,-160px)) scale(1)}}

/* ── appbar right cluster + mute toggle ──────────────────────────────── */
.appbar__right{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.appbar__right .pill{margin-left:0}
.mutebtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--brightmute);display:grid;place-items:center;cursor:pointer;transition:color var(--dur-micro) var(--eo),border-color var(--dur-micro) var(--eo),transform var(--dur-micro) var(--eo)}
.mutebtn:hover{color:#fff;transform:translateY(-1px)}
.mutebtn svg{width:19px;height:19px}
.mutebtn .mute-off{display:none}
.mutebtn.is-muted{color:var(--faint)}
.mutebtn.is-muted .mute-on{display:none}
.mutebtn.is-muted .mute-off{display:block}

/* ── per-question countdown ring ─────────────────────────────────────── */
.qright{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.qright .qscore{margin-left:0}
.qtimer{position:relative;width:40px;height:40px;flex:none}
.qtimer[hidden]{display:none}
.qtimer svg{width:40px;height:40px;transform:rotate(-90deg)}
.qtimer__track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.qtimer__bar{fill:none;stroke:var(--teal-lt);stroke-width:4;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:0;transition:stroke var(--dur-micro) var(--eo)}
.qtimer__n{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.qtimer.warn .qtimer__bar{stroke:var(--pink)}
.qtimer.warn .qtimer__n{color:var(--pink)}
.qtimer.warn{animation:timerPulse 1s var(--eo) infinite}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* ── kiosk: hand-off bar (pinned so it's always in reach on an iPad) ──── */
.kioskbar{margin-top:22px}
.kioskbar__count{font-variant-numeric:tabular-nums;opacity:.85;font-weight:700}
body.mode-kiosk .stage{padding-bottom:120px}
body.mode-kiosk .kioskbar{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(13,17,23,.97),rgba(13,17,23,.82) 62%,transparent);
  backdrop-filter:blur(8px)}
body.mode-kiosk .kioskbar .cta{max-width:560px;margin:0 auto}

/* ── big-screen board mode ───────────────────────────────────────────── */
body.mode-board .journey{display:none}
body.mode-board .stage{max-width:1120px;padding:14px 28px 40px}
body.mode-board .screen{display:none!important}
body.mode-board .screen[data-screen="leaderboard"]{display:block!important;animation:none}
body.mode-board #lbPass,body.mode-board #lbYou,body.mode-board #kioskBar,body.mode-board #lbAlready{display:none!important}
body.mode-board h2{font-size:clamp(40px,6vw,64px)}
body.mode-board .lead{font-size:20px;max-width:none}
body.mode-board .board{margin-top:26px}
body.mode-board .board__head,body.mode-board .brow{grid-template-columns:66px 1fr auto auto;padding:16px 26px;gap:18px}
body.mode-board .board__head span{font-size:13px}
body.mode-board .ava--sm{width:52px;height:52px;font-size:18px}
body.mode-board .brow__rank{font-size:24px}
body.mode-board .medal{width:46px;height:46px}
body.mode-board .medal__n{font-size:20px}
body.mode-board .brow__name{font-size:26px}
body.mode-board .brow__dept{font-size:15px;margin-top:2px}
body.mode-board .brow__score{font-size:34px}
body.mode-board .brow__time{font-size:18px}
body.mode-board .updated{font-size:15px;margin-top:22px}

/* ── focus + accessibility ────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal-lt);outline-offset:2px;border-radius:6px}
[data-autofocus]:focus{outline:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── reduced motion + print ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .orb{opacity:.35}
  .mzdots circle{opacity:1!important;transform:none!important}
  .grad,.mm-b{animation:none!important;background-position:0 center}
  .burst{display:none!important}
  .stamp{opacity:.92!important;transform:translateY(-50%) rotate(-14deg)!important}
}
@media print{
  .orbs,.burst,.journey{display:none!important}
  *{animation:none!important;transition:none!important}
  body{background:#fff;color:#000}
}