/* =========================================================
   THE B2B MARKETERS' POP QUIZ  |  Adobe x WPP Enterprise Solutions
   B2B Marketing Leaders Forum Asia, 14-15 Oct 2026
   Self-contained prototype. All sizes use container units (cqw/cqh)
   so the layout scales with the phone, framed or full screen.
   ========================================================= */
:root{
  --red:#E3341F;
  --red-frame:#EA3A22;
  --blue:#1B3A8C;
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);background:#EEF0FA;color:#fff;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- Phone frame (desktop) ---------- */
.frame{
  position:relative;height:min(844px,calc(100vh - 48px));aspect-ratio:390/844;
  border-radius:56px;padding:11px;background:#15162a;
  box-shadow:0 40px 90px -24px rgba(27,58,140,.45),0 0 0 2px #2b2c46 inset;
}
.app{
  --topPad:13cqw;
  position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;
  container-type:size;isolation:isolate;touch-action:manipulation;
  background:linear-gradient(180deg,#E3341F 0%,#DD3336 20%,#B5345A 42%,#7A3690 64%,#45399E 82%,#1B3A8C 100%);
}
.status{position:absolute;top:0;left:0;right:0;height:12cqw;padding:0 8cqw 0 9cqw;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:3.8cqw;z-index:50;pointer-events:none}
.status .icons{display:flex;gap:1.6cqw;align-items:center}
.notch{position:absolute;top:2.6cqw;left:50%;width:30cqw;height:8.2cqw;margin-left:-15cqw;background:#05050c;border-radius:6cqw;z-index:51;pointer-events:none}
.home{position:absolute;bottom:2.2cqw;left:50%;width:36cqw;margin-left:-18cqw;height:1.3cqw;border-radius:9px;background:rgba(255,255,255,.8);z-index:50;pointer-events:none}

/* ---------- Full screen on real phones ---------- */
@media (max-width:520px){
  /* iOS browsers size 100vh to include their toolbars, so a centred 100vh body pushed the
     game down (blue band on top) and hid the bottom. Pin the frame to the visible viewport. */
  body{background:var(--blue);min-height:0}
  .frame{position:fixed;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;padding:0;box-shadow:none;background:none}
  .app{border-radius:0;--topPad:calc(env(safe-area-inset-top,0px) + 4cqw)}
  .status,.notch,.home{display:none}
}

/* ---------- Header ---------- */
.top{position:absolute;left:0;right:0;top:var(--topPad);height:11cqw;padding:0 6cqw;display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none}
.lockup{display:flex;align-items:center;gap:2.2cqw}
.lockup .adobe{font-weight:800;font-size:5.2cqw;letter-spacing:-.01em}
.lockup .colon{display:flex;flex-direction:column;gap:.9cqw}
.lockup .colon i{width:1cqw;height:1cqw;border-radius:50%;background:#fff;display:block}
.lockup .wpp{font-size:2.5cqw;font-weight:600;line-height:1.05}
.progress{display:flex;align-items:center;gap:2.2cqw;font-size:3.2cqw;font-weight:700;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
.progress.show{opacity:1;transform:none}
.dots{display:flex;gap:1.3cqw;align-items:center}
.dots i{width:2.2cqw;height:2.2cqw;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);transition:all .3s}
.dots i.done{background:#fff;border-color:#fff}
.dots i.cur{background:#fff;border-color:#fff;width:3cqw;height:3cqw}

/* ---------- Decorative background bubbles ---------- */
.decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.decor .bwrap{position:absolute}
.decor .tr{top:-15cqw;right:-15cqw}
.decor .bl{bottom:-14cqw;left:-13cqw;opacity:.9}
.decor .br{bottom:-9cqw;right:-8cqw;opacity:.8}

/* ---------- Screens ---------- */
.screen{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  padding:calc(var(--topPad) + 14cqw) 6cqw 7cqw;
  opacity:0;visibility:hidden;transform:translateX(8%);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s linear .55s;
}
.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s}
.screen.out{transform:translateX(-8%)}

/* ---------- Bubble ---------- */
.bwrap{
  position:relative;flex:none;
  animation:rise .65s cubic-bezier(.3,1.5,.5,1) var(--rd,0s) both, bob var(--bd,5s) ease-in-out var(--bdl,0s) infinite;
}
.bwrap.abs{position:absolute;transform:translate(-50%,-50%)}
@keyframes rise{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -1.6cqw}}

.bubble{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  width:var(--d,30cqw);height:var(--d,30cqw);border-radius:50%;
  padding:calc(var(--d,30cqw)*.13);
  font-weight:700;font-size:calc(var(--d,30cqw)*.12);line-height:1.12;color:#fff;
  text-shadow:0 1px 6px rgba(30,10,90,.45);
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.95) 0 3%,rgba(255,255,255,.4) 6.5%,rgba(255,255,255,0) 17%),
    radial-gradient(circle at 68% 80%,rgba(255,110,200,.85) 0%,rgba(255,110,200,0) 42%),
    radial-gradient(circle at 20% 72%,rgba(150,130,255,.55) 0%,rgba(150,130,255,0) 38%),
    radial-gradient(circle at 45% 40%,#7c66f6 0%,#5c41df 48%,#3d28ab 82%,#2c1d8a 100%);
  box-shadow:
    inset calc(var(--d,30cqw)*-.06) calc(var(--d,30cqw)*-.09) calc(var(--d,30cqw)*.16) rgba(25,10,90,.55),
    inset calc(var(--d,30cqw)*.04) calc(var(--d,30cqw)*.05) calc(var(--d,30cqw)*.12) rgba(255,255,255,.28),
    0 calc(var(--d,30cqw)*.08) calc(var(--d,30cqw)*.22) rgba(20,8,70,.35);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .35s,filter .35s;
}
.bubble::before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none}
.bubble::after{ /* halftone texture */
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.85;z-index:1;
  background-image:radial-gradient(rgba(255,215,245,.9) 0.9px,transparent 1.3px);
  background-size:5px 5px;
  -webkit-mask-image:radial-gradient(circle at 72% 74%,#000 0,rgba(0,0,0,.55) 20%,transparent 44%);
          mask-image:radial-gradient(circle at 72% 74%,#000 0,rgba(0,0,0,.55) 20%,transparent 44%);
}
.bubble .txt{position:relative;z-index:3;pointer-events:none}
.bubble.pink{
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.7) 0 3%,rgba(255,255,255,0) 15%),
    radial-gradient(circle at 70% 75%,rgba(255,150,200,.5) 0%,rgba(255,150,200,0) 45%),
    radial-gradient(circle at 50% 50%,rgba(240,90,120,.35) 0%,rgba(200,60,110,.55) 65%,rgba(150,40,110,.75) 100%);
  box-shadow:inset calc(var(--d)*-.05) calc(var(--d)*-.07) calc(var(--d)*.14) rgba(110,20,70,.45),0 calc(var(--d)*.06) calc(var(--d)*.18) rgba(90,10,50,.25);
}
@media (hover:hover){.bubble:not(.deco):hover{filter:brightness(1.08)}}
button.bubble:active{transform:scale(.94)}

.bubble .edge{position:absolute;inset:0;border-radius:50%;border:max(2px,.8cqw) solid #fff;opacity:0;transition:opacity .25s;z-index:2;pointer-events:none}
.bubble .ring{position:absolute;inset:-9%;border-radius:50%;border:1.5px solid rgba(255,255,255,.65);opacity:0;transform:scale(.85);transition:opacity .35s,transform .35s;pointer-events:none}
.bubble .ring::after{content:'';position:absolute;inset:-9%;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.bubble .badge{
  position:absolute;top:2%;right:2%;width:max(22px,calc(var(--d,30cqw)*.2));height:max(22px,calc(var(--d,30cqw)*.2));
  border-radius:50%;background:#fff;color:var(--red);font-weight:800;font-size:max(12px,calc(var(--d,30cqw)*.11));
  display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1);z-index:4;
  box-shadow:0 2px 8px rgba(40,0,40,.25);text-shadow:none;pointer-events:none;
}
.bubble .badge svg{width:62%;height:62%}
.bubble.sel{transform:scale(1.04)}
.bubble.sel .edge{opacity:1}
.bubble.sel .ring{opacity:1;transform:scale(1)}
.bubble.sel .badge{transform:scale(1)}
.bubble.dim{opacity:.35;filter:saturate(.55);transform:scale(.94)}
.bubble.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1.04)}}
.bubble.pop{animation:popOut .5s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes popOut{0%{transform:scale(1)}35%{transform:scale(1.18);opacity:1}100%{transform:scale(1.38);opacity:0}}
.bubble.regrow{animation:regrow .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes regrow{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Sparks / shock rings ---------- */
.fx{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.spark{position:absolute;border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,.75);animation:spark .8s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}}
.shock{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:shock .7s ease-out forwards}
@keyframes shock{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.65);opacity:0}}

/* ---------- 1. Attract ---------- */
#s-attract .kicker{font-size:5.6cqw;font-weight:700;margin-top:3cqw}
#s-attract .title{font-size:27cqw;font-weight:800;line-height:.86;letter-spacing:-.03em;margin-top:2cqw}
#s-attract .sub{font-size:4.6cqw;font-weight:700;margin-top:4cqw}
#s-attract .sub2{font-size:4.1cqw;font-weight:300;line-height:1.35;opacity:.92;margin-top:1.4cqw;max-width:80cqw}
#s-attract .mini-deco{position:absolute;right:9cqw;top:calc(var(--topPad) + 60cqw)}
.play-wrap{--d:min(56cqw,28cqh);position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.play-core{position:relative;width:var(--d);height:var(--d)}
.play-core .static{position:absolute;border-radius:50%;pointer-events:none}
.play-core .s1{inset:-10%;border:1.5px solid rgba(255,255,255,.4)}
.play-core .s2{inset:-21%;border:1px solid rgba(255,255,255,.18)}
.play-core .pulse{position:absolute;inset:-6%;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:pulse 2.4s ease-out infinite;pointer-events:none}
.play-core .pulse.p2{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.95);opacity:.85}100%{transform:scale(1.35);opacity:0}}
.play-core .bubble.play{width:var(--d);height:var(--d);animation:breathe 2.6s ease-in-out infinite;z-index:1}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.play-core .bubble.play.pop{animation:popOut .5s cubic-bezier(.3,.7,.4,1) forwards}
.play-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;z-index:3;pointer-events:none;font-size:6.8cqw;font-weight:700;text-shadow:0 2px 10px rgba(30,10,90,.4);transition:opacity .25s}
.play-label i{display:block;width:8cqw;height:.8cqw;border-radius:9px;background:rgba(255,255,255,.85)}
.play-core.popping .play-label,.play-core.popping .static,.play-core.popping .pulse{opacity:0;transition:opacity .3s}

/* ---------- Question frame ---------- */
.qframe{
  position:relative;flex:none;border:3.2cqw solid var(--red-frame);
  background:rgba(98,44,108,.6);padding:4.5cqw;
  box-shadow:0 2cqw 6cqw rgba(70,10,40,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.qlabel{font-size:2.6cqw;letter-spacing:.18em;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:1.8cqw;margin-bottom:2.2cqw}
.qtext{font-size:5.7cqw;font-weight:700;line-height:1.17;letter-spacing:-.005em}
mark{background:#fff;color:var(--red);padding:0 .22em;font-weight:800}
.ico.play{width:0;height:0;border-left:2.2cqw solid #fff;border-top:1.3cqw solid transparent;border-bottom:1.3cqw solid transparent}
.ico.stop{width:2.4cqw;height:2.4cqw;background:#fff;border-radius:.5cqw}
.qfoot{display:flex;align-items:center;justify-content:space-between;margin-top:4cqw}
.pill{background:#fff;color:var(--red);font-weight:700;font-size:3.3cqw;padding:1.9cqw 4.2cqw;border-radius:99px}
.slots{display:flex;gap:1.4cqw}
.slots i{width:5.2cqw;height:5.2cqw;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);font-style:normal;font-size:2.7cqw;font-weight:800;display:grid;place-items:center;transition:all .3s cubic-bezier(.3,1.6,.5,1)}
.slots i.on{background:#fff;color:var(--red);border-color:#fff;transform:scale(1.12)}

/* ---------- Bubble stage (two staggered columns) ---------- */
.stage{--s:min(34cqw,15.5cqh);flex:1;display:flex;min-height:0;margin-top:3cqw}
.stage .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around}
.stage .col.r{padding-top:calc(var(--s)*.5)}
.stage .col.l{padding-bottom:calc(var(--s)*.15)}
.stage .col.l .bwrap:nth-child(2){margin-left:2cqw}
.stage .col.r .bwrap:nth-child(2){margin-right:2cqw}
.stage .bwrap{--d:calc(var(--s)*var(--k,1))}
.stage .bubble{font-size:calc(var(--d)*.135)}
.stage.mid .bubble{font-size:calc(var(--d)*.104)}
.stage.long{--s:min(34cqw,15cqh)}
.stage.long .bubble{font-size:calc(var(--d)*.098)}

/* ---------- 5. Hot takes ---------- */
.hot-head{display:flex;align-items:center;gap:2.8cqw}
.flame{flex:none;width:9.5cqw;height:9.5cqw;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFA164,#F2502A 70%);box-shadow:0 0 0 1.3cqw rgba(255,255,255,.14)}
.flame svg{width:52%;height:52%}
.hot-title{flex:1;font-weight:700;font-size:3.7cqw;line-height:1.18}
.counter{border:1.5px solid rgba(255,255,255,.65);border-radius:99px;padding:1.3cqw 3.2cqw;font-size:3cqw;font-weight:700;background:rgba(255,255,255,.12)}
.seg{display:flex;gap:1.6cqw;margin:3.6cqw 0 4cqw}
.seg i{flex:1;height:1.1cqw;border-radius:99px;background:rgba(255,255,255,.3);transition:background .35s}
.seg i.on{background:#fff}
.qframe.big{min-height:46cqw;display:flex;align-items:center;overflow:hidden}
.stmt{font-size:8.8cqw;font-weight:800;line-height:1.08;letter-spacing:-.015em}
.stmt.in{animation:slideIn .5s cubic-bezier(.2,.8,.2,1)}
.stmt.out{animation:slideOut .23s ease-in forwards}
@keyframes slideIn{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes slideOut{to{transform:translateX(-25%);opacity:0}}
.timer{display:flex;align-items:center;gap:2.6cqw;margin-top:4.6cqw}
.track{flex:1;height:1.3cqw;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.fill{height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,#FFB347,#FF5FA8);border-radius:99px}
.secs{font-size:3cqw;font-weight:600;min-width:8cqw;text-align:right;opacity:.88;white-space:nowrap}
.timer.low .fill{animation:blink .5s ease-in-out infinite alternate}
.timer.up .secs{opacity:1;font-weight:800}
@keyframes blink{to{opacity:.55}}
.hot-stage{--s:min(41cqw,21cqh);display:flex;justify-content:space-between;align-items:flex-start;flex:1;padding-top:7cqw;min-height:0}
.hot-stage .bwrap{--d:calc(var(--s)*var(--k,1))}
.hot-stage .bwrap:nth-child(2){margin-top:11cqw}
.hot-stage .bubble{font-size:calc(var(--d)*.145)}

/* ---------- 7. Unlock results ---------- */
#s-unlock{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8cqw}
#s-unlock::-webkit-scrollbar{display:none}
.unlock-frame .uhead{font-size:6.6cqw;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.unlock-frame .usub{font-size:3.4cqw;font-weight:400;line-height:1.35;opacity:.92;margin-top:1.6cqw}
.field{margin-top:4cqw}
.field label{display:block;font-size:2.4cqw;letter-spacing:.18em;font-weight:700;text-transform:uppercase;margin-bottom:1.6cqw}
.field input{
  display:block;width:100%;height:12cqw;min-height:44px;border:0;border-radius:99px;
  padding:0 4.6cqw;background:rgba(255,255,255,.93);color:#1B1A4A;
  font-family:var(--font);font-weight:700;font-size:max(16px,3.8cqw);
  box-shadow:inset 0 1px 3px rgba(40,10,60,.18),0 1cqw 3cqw rgba(40,10,60,.18);
  outline:none;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text;
  transition:box-shadow .2s;
}
.field input::placeholder{color:#8a86a6;font-weight:600}
.field input:focus{box-shadow:inset 0 1px 3px rgba(40,10,60,.18),0 0 0 3px rgba(255,255,255,.5)}
.field.bad input{box-shadow:inset 0 1px 3px rgba(40,10,60,.18),0 0 0 2px #FFB347}
.ferr{font-size:2.9cqw;font-weight:600;color:#FFD08A;margin-top:1.4cqw;min-height:0;display:none}
.field.bad .ferr{display:block}
.consent{display:flex;gap:3cqw;align-items:flex-start;margin-top:4.6cqw;cursor:pointer}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent .box{flex:none;width:5.6cqw;height:5.6cqw;min-width:20px;min-height:20px;border:1.5px solid rgba(255,255,255,.9);border-radius:1.2cqw;display:grid;place-items:center;margin-top:.3cqw;transition:background .2s}
.consent .box svg{width:70%;height:70%;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.3,1.6,.5,1)}
.consent input:checked + .box{background:#fff}
.consent input:checked + .box svg{opacity:1;transform:none}
.consent input:focus-visible + .box{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.consent .ctext{font-size:2.95cqw;line-height:1.45;opacity:.95}
.consent a,.ufine a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ufine{font-size:2.7cqw;line-height:1.45;opacity:.82;margin:2.4cqw 0 0 8.6cqw}
.unlock-stage{--d:min(40cqw,20cqh);flex:1;display:flex;align-items:center;justify-content:center;min-height:calc(var(--d) + 12cqw);padding-top:4cqw}
.unlock-core{position:relative;width:var(--d);height:var(--d)}
.unlock-core .uring{position:absolute;inset:-10%;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:0;transform:scale(.85);transition:opacity .4s,transform .4s;pointer-events:none}
.unlock-core .bubble{font-size:calc(var(--d)*.14)}
.unlock-core .bubble.locked{opacity:.32;filter:saturate(.25) brightness(1.15);cursor:not-allowed}
.unlock-core.ready .uring{opacity:1;transform:scale(1);animation:pulse 2.4s ease-out infinite}
.unlock-core.ready .bubble{animation:breathe 2.6s ease-in-out infinite}
.unlock-core .bubble.pop{animation:popOut .5s cubic-bezier(.3,.7,.4,1) forwards}

/* ---------- 8. Waiting ---------- */
#s-waiting{padding-bottom:16cqw}
.cluster{position:relative;flex:1;margin:2cqw 0 4cqw;min-height:0}
.wait-title{text-align:center;font-size:7.8cqw;font-weight:800;line-height:1.08}
.wbar{width:52cqw;height:1.3cqw;border-radius:99px;background:rgba(255,255,255,.22);margin:4.6cqw auto 0;overflow:hidden}
.wfill{height:100%;width:0;background:linear-gradient(90deg,#FFB347,#FF5FA8);border-radius:99px}
.wdots{display:flex;gap:1.8cqw;justify-content:center;margin-top:4cqw}
.wdots i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#fff;opacity:.3;animation:wdot 1.2s ease-in-out infinite}
.wdots i:nth-child(2){animation-delay:.2s}.wdots i:nth-child(3){animation-delay:.4s}
@keyframes wdot{0%,100%{opacity:.3}40%{opacity:1}}

/* ---------- 9. Results ---------- */
.vs{font-size:7.4cqw;font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0 0 5cqw;overflow-wrap:anywhere}
#s-results{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6cqw}
#s-results::-webkit-scrollbar{display:none}
.live{display:flex;align-items:center;gap:2.8cqw;font-size:9.4cqw;font-weight:800;letter-spacing:-.02em;margin:0 0 4cqw}
.live-dot{position:relative;flex:none;width:4.4cqw;height:4.4cqw;border-radius:50%;background:radial-gradient(circle,#FF5A3C 0 34%,#fff 38%)}
.live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:pulse 1.6s ease-out infinite}
.qframe.results{padding:1.2cqw 4.5cqw}
.row{padding:3.2cqw 0;border-top:1px solid rgba(255,255,255,.22);opacity:0;transform:translateY(3cqw);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.row:first-child{border-top:0}
.row.show{opacity:1;transform:none}
.rlabel{display:flex;align-items:center;gap:1.8cqw;font-size:2.5cqw;letter-spacing:.17em;text-transform:uppercase;font-weight:700;opacity:.92}
.mini{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 9%,#9583ff 32%,#4b33c9 82%);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.rans{font-weight:700;font-size:4.5cqw;line-height:1.22;margin-top:1.2cqw}
.rstat{font-size:3.3cqw;opacity:.88;margin-top:.9cqw}
.rstat .num{font-weight:800;font-variant-numeric:tabular-nums}
.cta{display:flex;align-items:center;gap:3.6cqw;margin-top:4.4cqw;background:var(--red);padding:4.2cqw;box-shadow:0 2cqw 6cqw rgba(60,10,40,.3);opacity:0;transform:translateY(3cqw);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.cta.show{opacity:1;transform:none}
.scan{flex:none;width:10cqw;height:10cqw;border-radius:50%;background:#fff;display:grid;place-items:center}
.scan svg{width:56%;height:56%}
.cta strong{display:block;font-size:3.9cqw;font-weight:700;line-height:1.2}
.cta small{display:block;font-size:3.05cqw;font-weight:400;opacity:.93;margin-top:.9cqw;line-height:1.3}
.replay{display:block;margin:4cqw auto 0;padding:2cqw 4cqw;font-size:3cqw;font-weight:500;opacity:.5;text-decoration:underline;text-underline-offset:3px}
.replay:hover{opacity:.85}

@media (prefers-reduced-motion:reduce){
  .bwrap{animation:rise .3s both}
  .play-core .pulse{animation:none;opacity:0}
}

/* =========================================================
   Additions for the live build (7 Oct 2026)
   ========================================================= */

/* Test mode marker, so nobody mistakes a test play for a real one */
.test-badge{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + .6cqw);transform:translateX(-50%);z-index:60;
  background:#FFD08A;color:#5a2a00;font-weight:800;font-size:2.6cqw;letter-spacing:.14em;padding:1cqw 3cqw;border-radius:99px;pointer-events:none}

/* Cold start / fallback notes inside the results frame */
.rnote{font-size:3.3cqw;line-height:1.4;opacity:.92;padding:3.2cqw 0;border-top:1px solid rgba(255,255,255,.22)}
.rnote.warn{color:#FFD08A;font-weight:600}
.retry{display:inline-block;margin-top:2cqw;padding:2cqw 4.4cqw;border-radius:99px;background:#fff;color:var(--red);font-weight:800;font-size:3.3cqw}

/* Kiosk: next player */
.next-player{display:block;margin:4.4cqw auto 0;padding:3cqw 7cqw;min-height:48px;border-radius:99px;background:#fff;color:var(--red);font-weight:800;font-size:4cqw}
.next-player small{display:block;font-weight:600;font-size:2.8cqw;opacity:.7;margin-top:.6cqw}

/* Simple message screens (quiz closed, test replay) */
.msg-title{font-size:9cqw;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-top:6cqw}
.msg-body{font-size:4.2cqw;line-height:1.4;opacity:.92;margin-top:4cqw;max-width:82cqw}
.again{display:block;margin:5cqw auto 0;padding:2.4cqw 5cqw;border-radius:99px;border:1.5px solid rgba(255,255,255,.7);font-size:3.3cqw;font-weight:700}

/* Portrait only: ask phones in landscape to rotate */
.rotate{display:none}
@media (orientation:landscape) and (max-height:500px){
  .rotate{display:flex;position:fixed;inset:0;z-index:999;align-items:center;justify-content:center;text-align:center;padding:24px;
    background:linear-gradient(180deg,#E3341F 0%,#7A3690 60%,#1B3A8C 100%);color:#fff;font-weight:700;font-size:20px}
}

/* ---------- Scrolling screens stop below the header ----------
   Unlock and Results can be taller than the phone. Start their scroll area at the
   bottom of the logo header (same visual start point: 11cqw + 3cqw = 14cqw), so
   scrolled content is clipped there instead of sliding under the logos. */
#s-unlock,#s-results{
  top:calc(var(--topPad) + 11cqw);padding-top:3cqw;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3cqw);
          mask-image:linear-gradient(to bottom,transparent 0,#000 3cqw);
}