@font-face{font-family:"Alfa Slab One";src:url(alfa-slab-one.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Quicksand";src:url(quicksand.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bg0:#0c0420;--bg1:#1d0b4a;--bg2:#3a1690;
  --panel:#24105c;--panel2:#180940;
  --gold:#ffcc3d;--gold2:#ff9f1c;--pink:#ff4fa3;--cyan:#39d0ff;--violet:#a77bff;
  --ok:#2fd16f;--ok2:#11843f;--bad:#ff4d5e;--bad2:#a8182a;
  --ink:#fff;--ink2:#d9ccff;--ink3:#a796e0;
  --A:#ff5fa2;--B:#39c0ff;--C:#ffb63d;--D:#9d7bff;
  --r:18px;
  --display:"Alfa Slab One",Georgia,serif;
  --sans:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(15px,calc(1.3vmin + .65vmax),26px);height:100%}
html.large{font-size:clamp(17px,calc(1.5vmin + .75vmax),30px)}
body{margin:0;height:100%;overflow:hidden;background:var(--bg0);color:var(--ink);font-family:var(--sans);font-weight:600;-webkit-font-smoothing:antialiased;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
input{font:inherit;user-select:text;-webkit-user-select:text}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
kbd{font-family:var(--sans);font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-bottom-width:3px;border-radius:6px;padding:0 .35em;font-size:.85em}

.app{position:fixed;inset:0;overflow:hidden}

/* ---------- studio backdrop ---------- */
.studio{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,#5a26c4 0%,#2a1066 38%,#140733 70%,var(--bg0) 100%);overflow:hidden}
.backwall{position:absolute;inset:0 0 22% 0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9vmin),
  radial-gradient(60% 55% at 50% 58%,rgba(255,79,163,.16),transparent 70%);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 30%,#000 80%,transparent);mask:linear-gradient(to bottom,transparent,#000 30%,#000 80%,transparent)}
.beam{position:absolute;top:-8%;width:34vmax;height:120%;left:calc(50% - 17vmax);transform-origin:50% 0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.5;animation:sway 9s ease-in-out infinite alternate}
.b1{background:linear-gradient(to bottom,rgba(255,79,163,.55),rgba(255,79,163,0) 75%);transform:rotate(32deg);animation-delay:-2s}
.b2{background:linear-gradient(to bottom,rgba(57,208,255,.5),rgba(57,208,255,0) 75%);transform:rotate(-30deg);animation-duration:11s}
.b3{background:linear-gradient(to bottom,rgba(255,204,61,.42),rgba(255,204,61,0) 70%);transform:rotate(12deg);animation-duration:13s;animation-delay:-5s}
.b4{background:linear-gradient(to bottom,rgba(167,123,255,.45),rgba(167,123,255,0) 70%);transform:rotate(-12deg);animation-duration:10s;animation-delay:-7s}
@keyframes sway{0%{rotate:-9deg}100%{rotate:9deg}}
.floor{position:absolute;left:-10%;right:-10%;bottom:0;height:24%;background:
  radial-gradient(50% 70% at 50% 0%,rgba(160,110,255,.55),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7vmin),
  linear-gradient(#24105a,#0c0420);border-top:2px solid rgba(255,204,61,.35);box-shadow:0 -10px 40px rgba(167,123,255,.35)}
.crowd{position:absolute;left:0;right:0;bottom:-1px;height:7vmin;background:
  radial-gradient(circle at 50% 100%,#07020f 0 2.6vmin,transparent 2.7vmin) 0 100%/6vmin 7vmin repeat-x,
  radial-gradient(circle at 50% 100%,#0e0520 0 2.2vmin,transparent 2.3vmin) 3vmin 100%/6vmin 5.5vmin repeat-x;opacity:.9}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));z-index:2}
.screen.active{display:flex;animation:screenIn .35s ease-out}
@keyframes screenIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.loading{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.4rem;color:var(--gold);z-index:90;background:var(--bg0)}

/* ---------- shared bits ---------- */
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 35%,rgba(0,0,0,.12)),var(--panel);border:2px solid rgba(255,204,61,.65);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 18px rgba(0,0,0,.25),0 14px 40px rgba(0,0,0,.45),0 0 30px rgba(167,123,255,.25)}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3em;padding:.55em 1.4em;border-radius:999px;font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;color:#2a1200;background:linear-gradient(180deg,#fff2a6 0%,var(--gold) 40%,var(--gold2) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(160,80,0,.45),0 6px 0 #9c5a00,0 10px 24px rgba(0,0,0,.4);transition:transform .12s,box-shadow .12s,filter .12s;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.big-btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.big-btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(160,80,0,.45),0 2px 0 #9c5a00,0 4px 10px rgba(0,0,0,.4)}
.big-btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);border:2px solid rgba(255,255,255,.35);box-shadow:none;text-shadow:none;font-family:var(--sans);font-weight:700}
.big-btn.alt{background:linear-gradient(180deg,#b7f5ff,var(--cyan) 45%,#1a8fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,60,120,.4),0 6px 0 #0b5d8f,0 10px 24px rgba(0,0,0,.4);color:#04223a}
.big-btn.danger{background:linear-gradient(180deg,#ffb0b8,var(--bad) 50%,#b8202f);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 0 #7a1020}
.big-btn.ghost.danger{background:none;border-color:rgba(255,77,94,.6);color:#ffb3ba;box-shadow:none}
.icon-btn{width:2.6rem;height:2.6rem;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);font-size:1.15rem;line-height:1;transition:background .15s,transform .12s}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.back{font-size:1.8rem;padding-bottom:.15em}
.link-btn{color:var(--ink2);font-weight:700;padding:.4em .6em;border-radius:10px}
.link-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.link-btn.danger{color:#ff9aa5}
.mini-btn{font-size:.8rem;font-weight:700;padding:.15em .7em;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);margin-left:.5em;vertical-align:middle}
.ico-sound::before{content:"🔊"}.muted-sfx .ico-sound::before{content:"🔇"}
.ico-music::before{content:"🎵"}
.muted-music .ico-music{opacity:.35;filter:grayscale(1)}
.chip-btn{display:flex;align-items:center;gap:.5em;padding:.3em .8em .3em .4em;border-radius:999px;background:rgba(0,0,0,.25);border:2px solid rgba(255,204,61,.5)}
.seg{display:flex;flex-wrap:wrap;gap:.4em;margin:.3em 0 .9em}
.seg button{flex:1 1 auto;min-height:2.6em;padding:.35em .9em;border-radius:14px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);font-weight:700;transition:all .15s}
.seg button[aria-checked="true"]{background:linear-gradient(180deg,#fff2a6,var(--gold));color:#2a1200;border-color:#fff2a6;box-shadow:0 0 16px rgba(255,204,61,.5)}
.seg.small button{min-height:2.2em;padding:.2em .7em}
.toast{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:95;padding:.7em 1.3em;border-radius:999px;background:linear-gradient(180deg,#fff2a6,var(--gold));color:#2a1200;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastIn .35s cubic-bezier(.2,1.6,.4,1);text-align:center;max-width:90vw;pointer-events:none}
@keyframes toastIn{from{transform:translate(-50%,30px) scale(.8);opacity:0}}

/* ---------- host ---------- */
.host-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:0}
.host-slot{position:relative;width:100%;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-end}
.host{height:100%;width:auto;max-width:100%;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.host .h-head{transform-origin:120px 180px;animation:headBob 3.2s ease-in-out infinite}
.host .h-arm{transform-origin:186px 214px;animation:micBob 3.2s ease-in-out infinite}
@keyframes headBob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px)}}
@keyframes micBob{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
.host .h-lids rect{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 4.6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96.5%{transform:scaleY(1)}}
.host .h-m,.host .h-eyes-happy{display:none}
.host .m-neutral{display:inline}
.host.talk .m-neutral{display:none}.host.talk .m-talk{display:inline}
.host.talk.mouth-closed .m-talk{display:none}.host.talk.mouth-closed .m-neutral{display:inline}
.host.happy .m-neutral,.host.happy .m-talk,.host.happy.talk .m-neutral{display:none!important}
.host.happy .m-happy{display:inline!important}
.host.happy .h-eyes-open{display:none}.host.happy .h-eyes-happy{display:inline}
.host.happy .h-blush{opacity:.65}
.host.happy .h-head{animation:headHappy .5s ease-in-out 3}
@keyframes headHappy{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(-6px)}70%{transform:rotate(7deg) translateY(-6px)}}
.host.sad .m-neutral,.host.sad .m-talk{display:none!important}.host.sad .m-sad{display:inline!important}
.host.sad .h-pupils{transform:translateY(4px)}
.host.sad .br-l{transform:rotate(14deg);transform-origin:113px 87px}
.host.sad .br-r{transform:rotate(-14deg);transform-origin:127px 87px}
.host.sad .h-ear-l{transform:rotate(-10deg);transform-origin:82px 98px}
.host.sad .h-ear-r{transform:rotate(10deg);transform-origin:158px 98px}
.host.shock .h-m{display:none!important}.host.shock .m-shock{display:inline!important}
.host.shock .h-brows{transform:translateY(-7px)}
.host.shock .h-head{animation:shake .45s}
.host.think .h-m{display:none!important}.host.think .m-smirk{display:inline!important}
.host.think .h-pupils{transform:translate(4px,-4px)}
.host.think .br-r{transform:translateY(-5px)}
.host .h-pupils,.host .br-l,.host .br-r,.host .h-brows,.host .h-ear-l,.host .h-ear-r{transition:transform .25s}
.bubble{position:relative;z-index:3;max-width:min(100%,24rem);padding:.6em .95em;border-radius:20px;background:#fff;color:#22104a;font-weight:700;font-size:1rem;line-height:1.3;box-shadow:0 8px 22px rgba(0,0,0,.35);text-align:center;margin-bottom:.7em;transform-origin:50% 100%}
.bubble::after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-12px;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble.pop{animation:bubblePop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bubblePop{from{transform:scale(.6);opacity:0}}

/* ---------- title ---------- */
#s-title{gap:.6rem}
.title-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.top-tools{display:flex;gap:.45rem}
.level-chip{font-size:.9rem;min-width:0}
.lv-emoji{font-size:1.4rem}
.lv-text{display:flex;flex-direction:column;align-items:flex-start;gap:.15em;min-width:0}
.lv-text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.lv-bar{display:block;width:7.5em;height:.45em;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
.lv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));border-radius:9px;transition:width .8s}
.title-main{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:2vmin;align-items:center}
.title-stage{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vmin}
.marquee{position:relative;padding:1.1rem 2.2rem 1rem;border-radius:26px;background:linear-gradient(180deg,#3d1499,#1f0a5c);border:4px solid var(--gold);box-shadow:0 0 0 6px #5a1fc2,0 0 40px rgba(255,79,163,.55),inset 0 0 30px rgba(0,0,0,.5);text-align:center;transform:rotate(-2deg)}
.bulbs{position:absolute;inset:-4px;border-radius:26px;pointer-events:none;background:
  radial-gradient(circle,#fff6c2 0 3px,rgba(255,204,61,.9) 4px,transparent 6px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:9px;animation:bulbs 1.2s steps(2) infinite}
@keyframes bulbs{50%{filter:brightness(.55) hue-rotate(-20deg)}}
.logo{margin:0;font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:.02em}
.logo span{display:block}
.logo .l1{font-size:clamp(2.4rem,9vmin,6.2rem);color:#fff;text-shadow:0 4px 0 #ff4fa3,0 8px 0 #8a1f63,0 0 26px rgba(255,79,163,.8)}
.logo .l2{font-size:clamp(2.6rem,10vmin,6.8rem);background:linear-gradient(180deg,#fff7c2,#ffcc3d 50%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #8a4a00) drop-shadow(0 0 18px rgba(255,204,61,.6))}
.tagline{text-wrap:balance;margin-top:.5rem;font-size:.95rem;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.title-host{flex:0 1 auto;min-height:0;width:100%}
.title-host .host-slot{min-height:8rem;flex:0 0 auto;height:clamp(8rem,36vh,22rem)}
.menu{display:flex;flex-direction:column;gap:1.4vmin;width:100%;max-width:34rem;justify-self:center}
.start-btn{width:100%;justify-content:flex-start;padding:.6em 1.3em;min-height:4.4rem;border-radius:26px;font-size:1.45rem;animation:pulseGlow 2.4s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(160,80,0,.45),0 6px 0 #9c5a00,0 10px 24px rgba(0,0,0,.4),0 0 0 rgba(255,204,61,0)}50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(160,80,0,.45),0 6px 0 #9c5a00,0 10px 24px rgba(0,0,0,.4),0 0 34px rgba(255,204,61,.75)}}
.bb-ico{font-size:2rem}
.bb-txt{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bb-txt small{font-family:var(--sans);font-weight:700;font-size:.62em;opacity:.8;letter-spacing:0}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2vmin}
.mode-btn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6em;align-items:center;text-align:left;padding:.65em .9em;border-radius:20px;min-height:4.2rem;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(0,0,0,.1)),var(--mc,#3a1a8c);border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.3);transition:transform .12s,filter .12s}
.mode-btn:hover{transform:translateY(-3px);filter:brightness(1.12)}
.mode-btn:active{transform:translateY(3px)}
.mode-btn span{grid-row:span 2;font-size:1.7rem}
.mode-btn b{font-family:var(--display);font-weight:400;font-size:1.05rem}
.mode-btn small{font-size:.78rem;color:var(--ink2);font-weight:600}
.m-quick{--mc:#1f5fc9}.m-streak{--mc:#c4333f}.m-daily{--mc:#0d8a73}.m-pass{--mc:#8e2fc2}
.menu-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem .8rem;font-size:.95rem}
.gclink{color:var(--ink3);text-decoration:none;font-weight:700;padding:.4em .6em;border-radius:10px}
.gclink:hover{color:#fff}

/* ---------- setup screens ---------- */
#s-quick,#s-pass,#s-stats{align-items:center;justify-content:center}
.setup{width:min(100%,46rem);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.setup-head{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem .4rem}
.setup-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.35)}
.setup-body{flex:1;min-height:0;overflow-y:auto;padding:.2rem 1.2rem .6rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.setup-body h3{margin:.7rem 0 .3rem;font-size:1rem;color:var(--ink2);font-weight:700;letter-spacing:.03em}
.setup-foot{padding:.7rem 1rem 1rem;display:flex;justify-content:center}
.setup-foot .big-btn{min-width:60%}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.45rem}
.cat-chip{display:flex;align-items:center;gap:.5em;min-height:2.8em;padding:.35em .7em;border-radius:14px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);font-weight:700;text-align:left;transition:all .15s;font-size:.95rem}
.cat-chip .ce{font-size:1.25em}
.cat-chip[aria-pressed="true"]{background:linear-gradient(180deg,rgba(57,208,255,.35),rgba(57,208,255,.15));border-color:var(--cyan);box-shadow:0 0 14px rgba(57,208,255,.4)}
.names{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.4rem}
.names label{display:flex;align-items:center;gap:.4em;background:rgba(0,0,0,.2);border-radius:14px;padding:.25em .5em;border:2px solid var(--pc,#fff)}
.names .pdot{width:1.4em;height:1.4em;border-radius:50%;background:var(--pc);flex:0 0 auto;display:grid;place-items:center;font-size:.8em;color:#1a0b3d;font-weight:800}
.names input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-weight:700;padding:.45em .2em;outline:none}

/* ---------- game ---------- */
#s-game{gap:.5rem}
.hud{display:flex;align-items:center;gap:.6rem;min-height:2.8rem}
.hud-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.hud-round{font-family:var(--display);font-size:1.05rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:100%}
.dots i{width:.62rem;height:.62rem;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.3);transition:all .3s}
.dots i.cur{background:var(--gold);border-color:#fff;transform:scale(1.25);box-shadow:0 0 8px var(--gold)}
.dots i.ok{background:var(--ok);border-color:#aaffc8}
.dots i.no{background:var(--bad);border-color:#ffb3ba}
.dots i.sk{background:#8a7bb5}
.hud-right{display:flex;align-items:center;gap:.5rem}
.streak{display:flex;align-items:center;gap:.15em;font-family:var(--display);font-size:1.1rem;padding:.15em .55em .15em .35em;border-radius:999px;background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.15);transition:all .3s}
.flame{width:1.05em;height:1.4em;fill:#6d5a9a;transition:all .3s}
.flame .core{fill:#8f80b8}
.streak.s1 .flame{fill:#ff8a1c}.streak.s1 .flame .core{fill:#ffd23d}
.streak.s1{border-color:rgba(255,138,28,.6)}
.streak.s2 .flame{fill:#ff5a1c;transform:scale(1.2);animation:flick .35s infinite alternate;filter:drop-shadow(0 0 6px #ff7a1c)}
.streak.s2{border-color:#ff7a1c;box-shadow:0 0 14px rgba(255,122,28,.5)}
.streak.s3 .flame{fill:#ff2d55;transform:scale(1.35);animation:flick .25s infinite alternate;filter:drop-shadow(0 0 10px #ff4fa3)}
.streak.s3 .flame .core{fill:#fff3a0}
.streak.s3{border-color:var(--pink);box-shadow:0 0 20px rgba(255,79,163,.7)}
@keyframes flick{from{transform:scale(1.2) skewX(-4deg)}to{transform:scale(1.3) skewX(4deg) translateY(-1px)}}
.streak.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.35)}}
.score{display:flex;flex-direction:column;align-items:flex-end;line-height:1;padding:.2em .7em;border-radius:14px;background:rgba(0,0,0,.25);border:2px solid rgba(255,204,61,.4);min-width:5.2em}
.score small{font-size:.65rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em}
.score b{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--gold)}
.players{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.players:empty{display:none}
.pchip{display:flex;align-items:center;gap:.4em;padding:.2em .7em .2em .25em;border-radius:999px;background:rgba(0,0,0,.25);border:2px solid transparent;font-weight:700;font-size:.9rem;opacity:.7;transition:all .25s}
.pchip .pdot{width:1.5em;height:1.5em;border-radius:50%;background:var(--pc);display:grid;place-items:center;color:#1a0b3d;font-size:.75em;font-weight:800}
.pchip b{font-family:var(--display);font-weight:400;color:var(--gold)}
.pchip.on{opacity:1;border-color:var(--pc);box-shadow:0 0 14px color-mix(in srgb,var(--pc) 60%,transparent);transform:scale(1.06)}
.stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(10rem,27%) 1fr;gap:1.5vmin}
.host-col{min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.game-host{height:100%}
.game-host .host-slot{max-height:62%}
.play-col{min-height:0;display:flex;flex-direction:column;gap:1.2vmin}
.qpanel{position:relative;flex:1 1 auto;min-height:6.5rem;display:flex;flex-direction:column;padding:.8rem 1.2rem 1rem;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 30%,rgba(0,0,0,.08) 100%),linear-gradient(135deg,#3b1aa0,#21095e);border:3px solid var(--gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -10px 30px rgba(0,0,0,.25),0 0 0 5px rgba(90,31,194,.8),0 14px 34px rgba(0,0,0,.45),0 0 40px rgba(167,123,255,.35)}
.qpanel::before{content:"";position:absolute;left:3%;right:3%;top:4px;height:42%;border-radius:22px 22px 60% 60%/22px 22px 30% 30%;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,0));pointer-events:none}
.qmeta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;font-weight:700}
.cat-tag{padding:.15em .7em;border-radius:999px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.25)}
.diff-tag{padding:.15em .7em;border-radius:999px;background:var(--dc,#2fd16f);color:#1a0b3d}
.diff-tag.d1{--dc:#5be08f}.diff-tag.d2{--dc:#ffcc3d}.diff-tag.d3{--dc:#ff7a8a}
.diff-tag.tf{--dc:#39d0ff}
.qnum{margin-left:auto;color:var(--ink3)}
.qtext-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qtext{margin:0;font-weight:700;font-size:1.6rem;line-height:1.25;text-align:center;text-wrap:balance;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.qpanel.enter{animation:qIn .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes qIn{from{transform:translateY(-14px) rotateX(25deg);opacity:0}}
.timer{position:absolute;left:1.1rem;right:1.1rem;bottom:.45rem;height:.5rem;border-radius:9px;background:rgba(0,0,0,.35)}
.timer i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:9px;background:linear-gradient(90deg,var(--ok),var(--gold));transform-origin:0 50%}
.timer.low i{background:linear-gradient(90deg,var(--bad),#ff9f1c)}
.timer span{position:absolute;right:0;top:-1.55rem;font-family:var(--display);font-size:.95rem;color:var(--gold)}
.timer.low span{color:var(--bad);animation:bump .5s infinite}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:1.1vmin}
.answers.tf .ans{min-height:4rem}
.ans{position:relative;display:flex;align-items:center;gap:.7em;min-height:3.6rem;padding:.45em .9em .45em .5em;border-radius:18px;text-align:left;font-weight:700;font-size:1.12rem;line-height:1.2;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 50%,rgba(0,0,0,.1)),#26106a;border:3px solid #6d4fd9;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 #140638,0 8px 16px rgba(0,0,0,.35);transition:transform .12s,border-color .15s,background .2s,opacity .3s,box-shadow .2s;overflow:hidden}
.ans .lt{flex:0 0 auto;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:.95em;color:#1a0b3d;background:var(--lc);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.25)}
.ans:nth-child(1){--lc:var(--A)}.ans:nth-child(2){--lc:var(--B)}.ans:nth-child(3){--lc:var(--C)}.ans:nth-child(4){--lc:var(--D)}
.ans .at{flex:1;min-width:0;overflow-wrap:anywhere}
.ans .mk{flex:0 0 auto;font-size:1.3em;display:none}
@media (hover:hover){.ans:not(:disabled):hover{transform:translateY(-3px);border-color:var(--lc);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 0 #140638,0 0 22px color-mix(in srgb,var(--lc) 55%,transparent)}}
.ans:not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #140638}
.ans:disabled{cursor:default}
.ans.enter{animation:ansIn .4s cubic-bezier(.2,1.3,.4,1) both}
@keyframes ansIn{from{transform:translateX(-24px);opacity:0}}
.ans.locked{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.04) 50%),#8a5a00;animation:lockPulse .3s ease-in-out infinite alternate;box-shadow:0 0 26px rgba(255,204,61,.7),0 5px 0 #4a2a00}
@keyframes lockPulse{to{filter:brightness(1.25)}}
.ans.correct{border-color:#b6ffd0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 50%),linear-gradient(135deg,var(--ok),var(--ok2));box-shadow:0 0 30px rgba(47,209,111,.8),0 5px 0 #06451f;animation:correctPop .5s cubic-bezier(.2,1.6,.4,1)}
.ans.correct .mk,.ans.wrong .mk{display:block}
.ans.wrong{border-color:#ffc2c8;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.03) 50%),linear-gradient(135deg,var(--bad),var(--bad2));box-shadow:0 0 22px rgba(255,77,94,.6),0 5px 0 #5a0812;animation:shake .45s}
.ans.reveal{animation:correctPop .6s cubic-bezier(.2,1.6,.4,1) .15s both}
.ans.dim{opacity:.38;filter:saturate(.4)}
.ans.gone{opacity:.12;filter:grayscale(1);transform:scale(.96);pointer-events:none}
.ans.gone .at{text-decoration:line-through}
.ans.hinted{border-color:#fff;box-shadow:0 0 0 3px var(--cyan),0 0 26px rgba(57,208,255,.7),0 5px 0 #140638}
.ans.hinted::after{content:"🐐";position:absolute;right:.4em;top:50%;transform:translateY(-50%);font-size:1.3em;animation:bump .8s infinite}
@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.qpanel.shake{animation:shake .45s}
.foot{min-height:3.6rem;display:flex;align-items:stretch}
.lifelines{flex:1;display:flex;gap:1vmin;justify-content:center}
.life{flex:0 1 9.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.25em .5em;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03)),#123c78;border:2px solid #4fb6ff;box-shadow:0 4px 0 #071d3e;transition:all .15s;line-height:1.1}
.life b{font-family:var(--display);font-weight:400;font-size:1rem}
.life small{font-size:.72rem;color:#bfe6ff}
.life:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.15)}
.life:disabled{opacity:.3;filter:grayscale(1);cursor:default;box-shadow:none}
.life.used{position:relative}
.life.used::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:3px;background:var(--bad);transform:rotate(-14deg);border-radius:3px}
.fact{flex:1;display:flex;align-items:center;gap:.9rem;padding:.55rem .6rem .55rem 1rem;border-radius:20px;background:rgba(10,4,30,.75);border:2px solid var(--fc,var(--ok));box-shadow:0 0 20px color-mix(in srgb,var(--fc,var(--ok)) 35%,transparent);animation:factIn .35s cubic-bezier(.2,1.3,.4,1)}
.fact.bad{--fc:var(--bad)}
.fact.skip{--fc:#8a7bb5}
@keyframes factIn{from{transform:translateY(16px);opacity:0}}
.fact-txt{flex:1;min-width:0;font-size:1rem;line-height:1.3;font-weight:600;color:#efe9ff}
.fact-txt b{color:var(--fc,var(--ok));font-weight:800}
.fact .next{flex:0 0 auto;min-height:2.7em;font-size:1.05rem;padding:.4em 1.1em}
.pop-layer{position:absolute;inset:0;pointer-events:none;z-index:30}
.pts{position:absolute;font-family:var(--display);font-size:1.8rem;color:var(--gold);text-shadow:0 3px 0 #7a3f00,0 0 16px rgba(255,204,61,.8);animation:ptsUp 1.2s ease-out forwards;white-space:nowrap;transform:translate(-50%,-50%)}
.pts.x2{color:#ff9ad0;text-shadow:0 3px 0 #7a1f4f,0 0 16px rgba(255,79,163,.8)}
@keyframes ptsUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%) scale(1)}}
.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(2rem,8vmin,4.4rem);color:#fff;white-space:nowrap;text-shadow:0 5px 0 #c4333f,0 0 30px rgba(255,79,163,.9);animation:bannerIn 1.4s cubic-bezier(.2,1.5,.4,1) forwards;pointer-events:none}
.banner.gold{text-shadow:0 5px 0 #9c5a00,0 0 30px rgba(255,204,61,.9);color:#fff7c2}
@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}20%{transform:translate(-50%,-50%) scale(1.1) rotate(-3deg);opacity:1}75%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}100%{transform:translate(-50%,-80%) scale(.9) rotate(-3deg);opacity:0}}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(8,2,24,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}}
.dialog{width:min(100%,26rem);max-height:100%;overflow-y:auto;padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;text-align:center;animation:dlgIn .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes dlgIn{from{transform:scale(.85);opacity:0}}
.dialog h2{margin:0 0 .2rem;font-family:var(--display);font-weight:400;color:var(--gold);font-size:1.6rem}
.dialog p{margin:0;color:var(--ink2)}
.toggles{display:flex;gap:.5rem}
.tog{flex:1;padding:.6em;border-radius:14px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);font-weight:700}
.muted-sfx .tog[data-act="toggle-sound"],.muted-music .tog[data-act="toggle-music"]{opacity:.55;border-style:dashed}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left;font-weight:700}
.set-row .seg{margin:0}
.help{width:min(100%,36rem);text-align:left}
.help h2{text-align:center}
.help ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:.55em;line-height:1.4;color:#eee8ff;font-weight:600}
.help .big-btn{align-self:center}
.round-card{position:relative;width:min(100%,34rem);max-height:100%;overflow-y:auto;padding:1.5rem 1.5rem 1.4rem;border-radius:30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem;background:radial-gradient(120% 90% at 50% 0%,#6a2ee8,#2a0e78 60%,#170648);border:4px solid var(--gold);box-shadow:0 0 0 7px #5a1fc2,0 0 60px rgba(255,79,163,.6),0 20px 50px rgba(0,0,0,.6);animation:cardIn .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes cardIn{from{transform:scale(.4) rotate(-6deg);opacity:0}}
.rc-kicker{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-size:.9rem}
.rc-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2rem,7vmin,3.2rem);line-height:1;color:#fff;text-shadow:0 4px 0 var(--pink),0 0 24px rgba(255,79,163,.7)}
.rc-host{display:flex;align-items:center;gap:.8rem;text-align:left;background:rgba(255,255,255,.95);color:#22104a;border-radius:20px;padding:.5rem .9rem .5rem .4rem;font-weight:700;max-width:100%}
.rc-host p{margin:0;line-height:1.3}
.host-slot.small{width:4.6rem;height:5rem;flex:0 0 auto}
.rc-sub{color:var(--ink2);font-weight:700}
.rc-picks{display:flex;flex-direction:column;gap:.5rem;width:100%}
.rc-picks .cat-chip{justify-content:center;font-size:1.1rem;min-height:3.2em;background:rgba(255,255,255,.12)}
.rc-picks .cat-chip:hover{border-color:var(--gold);background:rgba(255,204,61,.18)}
.turn-card .rc-title{text-shadow:0 4px 0 var(--pc,var(--pink)),0 0 24px var(--pc,var(--pink))}

/* ---------- results ---------- */
#s-results{align-items:center;justify-content:center}
.results{width:min(100%,46rem);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.res-head{display:flex;align-items:flex-end;gap:1rem;padding:1rem 1.2rem .3rem}
.res-host{width:48%;max-width:22rem;height:9.5rem;flex:0 0 auto;flex-direction:row;align-items:flex-end;gap:.3rem}
.res-host .host-slot{width:44%;flex:0 0 auto;height:100%}
.res-host .bubble{order:2;flex:1;align-self:center;margin:0 0 2.2rem;font-size:.9rem;text-align:left;padding:.5em .75em}
.res-host .bubble::after{left:-10px;top:50%;bottom:auto;margin:-10px 0 0;border:10px solid transparent;border-right-color:#fff;border-left:0}
.res-title{flex:1;text-align:center;padding-bottom:.6rem}
.res-title h2{margin:0;font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4)}
.stars{font-size:2.4rem;letter-spacing:.1em;margin-top:.2rem}
.stars i{font-style:normal;display:inline-block;filter:grayscale(1) brightness(.5);transition:all .3s}
.stars i.on{filter:none;animation:starPop .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes starPop{from{transform:scale(0) rotate(-40deg)}}
.res-body{flex:1;min-height:0;overflow-y:auto;padding:.3rem 1.2rem .6rem;display:flex;flex-direction:column;gap:.8rem}
.big-score{text-align:center;font-family:var(--display);font-size:clamp(2.6rem,10vmin,4.4rem);line-height:1;color:#fff;text-shadow:0 4px 0 var(--pink),0 0 30px rgba(255,79,163,.6)}
.big-score small{display:block;font-family:var(--sans);font-size:1rem;color:var(--ink2);text-shadow:none;font-weight:700;margin-top:.3em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}
.tile{background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.14);border-radius:16px;padding:.5rem .6rem;text-align:center}
.tile b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--gold)}
.tile small{color:var(--ink2);font-weight:700;font-size:.8rem}
.grid-emoji{text-align:center;font-size:1.3rem;letter-spacing:.08em;line-height:1.4;word-break:break-all}
.xpbox{background:rgba(0,0,0,.25);border-radius:16px;padding:.6rem .9rem;border:2px solid rgba(57,208,255,.35)}
.xpbox .row{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem;margin-bottom:.35rem}
.xpbar{height:.8rem;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width 1.2s cubic-bezier(.3,.8,.3,1)}
.podium{display:flex;flex-direction:column;gap:.45rem}
.pod{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:16px;background:rgba(0,0,0,.25);border:2px solid var(--pc);font-weight:700;font-size:1.1rem}
.pod .medal{font-size:1.6rem;width:1.6em;text-align:center}
.pod .nm{flex:1}
.pod b{font-family:var(--display);font-weight:400;color:var(--gold);font-size:1.3rem}
.pod.win{background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 35%,transparent),rgba(0,0,0,.2));box-shadow:0 0 22px color-mix(in srgb,var(--pc) 50%,transparent);transform:scale(1.02)}
.res-foot{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:.6rem 1rem 1rem}
.res-foot .big-btn{flex:1 1 auto;max-width:15rem}
.share-pre{font-family:var(--sans);white-space:pre-wrap;text-align:center;background:rgba(0,0,0,.3);border-radius:14px;padding:.6rem;margin:0;font-weight:700;line-height:1.45;user-select:text;-webkit-user-select:text}

/* ---------- stats ---------- */
.brain{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:20px;background:linear-gradient(135deg,rgba(57,208,255,.2),rgba(167,123,255,.2));border:2px solid rgba(57,208,255,.45);margin-bottom:.8rem}
.brain .be{font-size:2.8rem}
.brain .bt{flex:1;min-width:0}
.brain .bt small{color:var(--ink2);font-weight:700}
.brain .bt b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:#fff}
.bars{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.barrow{display:grid;grid-template-columns:minmax(8.5rem,34%) 1fr 4.6rem;align-items:center;gap:.6rem;font-size:.92rem;font-weight:700}
.barrow .bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow .bt{height:1rem;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.barrow .bt i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#7a5cff,var(--cyan));width:0;transition:width .9s cubic-bezier(.3,.8,.3,1)}
.barrow .bt i.hi{background:linear-gradient(90deg,#1fae5b,#7dffb0)}
.barrow .bv{text-align:right;color:var(--ink2);font-size:.85rem}
.barrow .bv b{color:#fff}
.levels{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.levels span{font-size:.78rem;padding:.2em .6em;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink3);font-weight:700}
.levels span.got{background:rgba(255,204,61,.2);color:var(--gold)}
.stats .tiles{grid-template-columns:repeat(3,1fr)}
.muted-note{color:var(--ink3);font-size:.85rem;font-weight:600;margin:.4rem 0}

/* ---------- responsive ---------- */
@media (max-aspect-ratio:1/1){
  /* portrait */
  .title-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  .title-stage{justify-content:flex-start}
  .marquee{padding:.8rem 1.6rem .7rem}
  .title-host{max-height:none;flex:1 1 auto;flex-direction:row;align-items:flex-end;gap:.4rem;padding:0 .3rem}
  .title-host .host-slot{width:52%;max-width:20rem;flex:0 0 auto;min-height:6rem;height:100%}
  .title-host .bubble{order:2;align-self:center;margin:0 0 2rem;text-align:left}
  .title-host .bubble::after{left:-10px;top:50%;bottom:auto;margin:-10px 0 0;border:10px solid transparent;border-right-color:#fff;border-left:0}
  .menu{max-width:none}
  .stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .host-col{height:clamp(5.5rem,15vh,9.5rem)}
  .game-host{flex-direction:row;align-items:flex-end;gap:.4rem}
  .game-host .host-slot{width:30%;max-width:8rem;flex:0 0 auto;height:100%;max-height:none}
  .game-host .bubble{order:2;flex:1;align-self:center;max-width:none;margin:0 0 .3rem;text-align:left;font-size:.98rem}
  .game-host .bubble::after{left:-10px;top:50%;bottom:auto;margin:-10px 0 0;border:10px solid transparent;border-right-color:#fff;border-left:0}
  .answers{grid-template-columns:1fr}
  .answers.tf{grid-template-columns:1fr 1fr}
  .qtext{font-size:1.45rem}
  .fact{flex-wrap:wrap;justify-content:flex-end}
  .fact-txt{flex-basis:100%}
  .fact .next{min-height:2.5em}
  .res-head{flex-direction:column;align-items:stretch;gap:0}
  .res-host{width:100%;max-width:none;height:8rem}
  .res-host .host-slot{width:34%}
  .res-title{padding-bottom:.2rem}
}
@media (max-width:480px){
  .names{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat-chip{font-size:.88rem}
  .mode-btn{padding:.55em .7em;min-height:3.8rem}
  .mode-btn small{font-size:.72rem}
  .score{min-width:4.4em}
  .hud-round{font-size:.95rem}
  .res-head{padding:.8rem .8rem .2rem}
  .barrow{grid-template-columns:7.4rem 1fr 4rem}
}
@media (min-aspect-ratio:1/1) and (min-height:521px){
  .ans{min-height:clamp(3.6rem,10vh,5.4rem);font-size:1.22rem}
  .answers.tf .ans{min-height:clamp(4rem,12vh,6rem)}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  /* short landscape phones */
  html{font-size:13px}
  html.large{font-size:14.5px}
  .screen{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .marquee{padding:.6rem 1.4rem .5rem}
  .logo .l1{font-size:2.6rem}.logo .l2{font-size:2.9rem}
  .tagline{font-size:.75rem;margin-top:.3rem}
  .title-host .bubble{font-size:.85rem;padding:.4em .7em}
  .start-btn{min-height:3.4rem;font-size:1.2rem}
  .mode-btn{min-height:3.2rem;padding:.4em .7em}
  .mode-btn span{font-size:1.3rem}
  .icon-btn{width:2.3rem;height:2.3rem}
  #s-game{gap:.3rem}
  .hud{min-height:2.3rem}
  .stage{grid-template-columns:minmax(8rem,22%) 1fr}
  .game-host .bubble{font-size:.82rem;padding:.4em .6em;margin-bottom:.5em}
  .qpanel{padding:.4rem .9rem .6rem;min-height:4.5rem;border-radius:18px}
  .qtext{font-size:1.3rem}
  .ans{min-height:2.9rem;font-size:1rem;padding:.3em .7em .3em .4em;border-radius:14px}
  .ans .lt{width:1.9em;height:1.9em}
  .foot{min-height:2.9rem}
  .life{flex-basis:7.5rem}
  .life small{display:none}
  .fact{padding:.35rem .4rem .35rem .8rem}
  .fact-txt{font-size:.9rem}
  .fact .next{min-height:2.3em;font-size:.95rem}
  .round-card{padding:.9rem 1.2rem;gap:.45rem}
  .res-host{height:6.5rem}
  .res-head{padding:.5rem 1rem .1rem}
  .stars{font-size:1.8rem}
  .setup-head{padding:.5rem .8rem .2rem}
  .setup-body h3{margin:.4rem 0 .2rem}
}
@media (min-width:1500px) and (min-aspect-ratio:1/1){
  .stage{grid-template-columns:minmax(14rem,25%) 1fr;max-width:1700px;margin:0 auto;width:100%}
}

/* ---------- reduced motion ---------- */
.calm *,.calm *::before,.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.calm .beam{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}