:root{
  --bg1:#7fd4ff;--bg2:#4fa8ff;--bg3:#1a5bc9;--night:#0f1d4d;--panel:#ffffffee;--panel2:#f3fbff;--ink:#17305a;--ink-soft:#4f6793;--line:#8ac6ff;
  --navy:#193f8e;--blue:#2f6ae8;--blue2:#58a7ff;--sky:#6fd1ff;--mint:#4ce0c0;--mint2:#18b597;--gold:#ffd84a;--orange:#ffb21f;--pink:#ff7dc1;--red:#ff6161;--green:#60cf68;
  --shadow:0 14px 0 rgba(18,57,120,.18),0 24px 44px rgba(18,57,120,.18);
  --radius:26px;--radius-sm:18px;--vh:100vh;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2) 40%,var(--bg3));}
body{display:grid;grid-template-rows:74px 1fr 28px}
a{color:inherit}
.ambient{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(circle at 15% 8%,rgba(255,255,255,.9) 0 1px,transparent 2px) 0 0/80px 80px,
  radial-gradient(circle at 80% 20%,rgba(255,255,255,.6) 0 2px,transparent 3px) 0 0/120px 120px,
  radial-gradient(circle at top,rgba(255,255,255,.28),transparent 34%);
  opacity:.75;}
.topbar,.footer,.app{position:relative;z-index:2}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(180deg,#1f4fae,#173d8a);color:#fff;border-bottom:4px solid rgba(255,255,255,.18);box-shadow:0 6px 0 rgba(8,37,91,.18)}
.brand{display:flex;align-items:center;gap:12px}.brand-symbol{width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,#ffe679,#ffbf33);color:#1b3c7b;display:grid;place-items:center;font-weight:900;position:relative;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}.brand-symbol .spark{position:absolute;right:5px;top:2px;font-size:11px;color:#fff}
.brand strong{display:block;font-size:16px;letter-spacing:.18em}.brand small{display:block;font-size:10px;opacity:.88;letter-spacing:.16em}
.status{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}.dot{width:10px;height:10px;border-radius:50%;background:#bfc9d9}.dot.online{background:#7cffb0;box-shadow:0 0 0 6px rgba(124,255,176,.17);animation:pulse 1.5s infinite}
.footer{font-size:10px;color:#eaf3ff;display:grid;place-items:center;letter-spacing:.18em;background:linear-gradient(180deg,rgba(14,38,90,.25),rgba(14,38,90,.45))}.footer span{opacity:.7;margin:0 6px}
.app{height:100%;width:min(1280px,calc(100vw - 20px));margin:0 auto;padding:10px 0 8px;overflow:hidden}.loading{height:100%;display:grid;place-items:center;color:#fff;font-weight:800}.blink{animation:blink 1s infinite}

/* Common */
.host-wide,.play-wrap,.landing-shell{height:100%;display:grid;grid-template-rows:auto 1fr;gap:10px;overflow:hidden}
.headrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 4px 0;min-height:72px}.headrow h1{margin:5px 0 0;font-size:30px;line-height:1.03;color:#fff;text-shadow:0 3px 0 rgba(13,42,92,.24)}.headrow p{margin:4px 0 0;color:#e7f4ff;font-size:13px;font-weight:600}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:900;letter-spacing:.14em}.top-meta{display:flex;align-items:center;gap:8px}.tag{padding:10px 14px;border-radius:16px;background:linear-gradient(180deg,#fff2a6,#ffda54);border:2px solid rgba(255,255,255,.7);font-size:12px;font-weight:900;color:#6d4700;box-shadow:0 4px 0 rgba(181,132,15,.24)}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:4px solid rgba(255,255,255,.82);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}.panel:before{content:"";position:absolute;inset:0 0 auto;height:18px;background:linear-gradient(180deg,rgba(255,255,255,.58),transparent);pointer-events:none}
.section-title{font-size:12px;font-weight:900;letter-spacing:.16em;color:#2b5fc7;margin:0 0 10px;text-transform:uppercase}
.btn{appearance:none;border:0;border-radius:18px;padding:13px 18px;font:inherit;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;white-space:nowrap;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);transition:transform .14s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,#5be6ca,#22c3a0);color:#063b36}.btn-outline{background:linear-gradient(180deg,#fff,#d9eeff);color:#2553a8;border:2px solid #9bc9ff}.btn-lg{padding:15px 18px;font-size:15px}.btn-danger{background:linear-gradient(180deg,#ffa2a2,#ff6d6d);color:#5e1111}.w-full{width:100%}
.input,select{width:100%;min-width:0;background:linear-gradient(180deg,#fff,#eef8ff);border:3px solid #a7d3ff;border-radius:16px;padding:12px 14px;color:var(--ink);font:inherit;font-weight:700;outline:none}.input:focus,select:focus{border-color:#5fb6ff}.input::placeholder{color:#8da4c7}
.form-block{margin-bottom:12px}.field-label{display:block;font-size:12px;font-weight:900;color:#3368c7;margin-bottom:7px}.pin-input{text-align:center;font-size:28px;letter-spacing:.22em;font-variant-numeric:tabular-nums;font-weight:900}
.divider-text{display:flex;align-items:center;gap:10px;color:#6680ad;font-size:11px;font-weight:800;margin:16px 0}.divider-text:before,.divider-text:after{content:"";height:2px;background:#d8ebff;flex:1}
.hint,.muted{color:var(--ink-soft);font-size:13px;line-height:1.45}.center{text-align:center}.secondary-link{display:block;margin-top:8px;text-align:center;color:#4e70aa;font-size:13px}.label{font-size:11px;font-weight:900;color:#5777ae;letter-spacing:.12em}

/* Landing */
.hero{text-align:center;padding:6px 0 0}.hero h1{margin:10px 0 8px;font-size:min(64px,7vw);line-height:.96;color:#fff;text-shadow:0 4px 0 rgba(25,53,102,.26)}.grad{background:linear-gradient(180deg,#fff7b2,#ffd446);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{margin:0 auto;max-width:820px;color:#ebf5ff;font-weight:700}
.landing-panel{width:min(680px,100%);margin:0 auto;padding:18px 22px 20px;overflow:auto}
.avatar-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.avatar-option{background:linear-gradient(180deg,#ffffff,#eaf4ff);border:3px solid #b4d9ff;border-radius:20px;padding:10px 8px;color:var(--ink);display:flex;flex-direction:column;gap:6px;align-items:center;font:inherit;font-weight:800}.avatar-option.active{border-color:#ffd247;background:linear-gradient(180deg,#fffbe6,#fff2bd);box-shadow:0 0 0 4px rgba(255,221,98,.2)}

/* Layout */
.host-bottom-grid,.player-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:10px;min-height:0;overflow:hidden}.host-bottom-grid>*,.player-layout>*{min-height:0}
.race-panel{padding:14px 16px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;min-height:0;height:100%}.race-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}.race-copy{margin:0;color:#6281b0;font-size:12px;font-weight:800}.race-track{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-content:start;overflow:hidden}.lane{display:grid;grid-template-columns:130px 1fr;gap:8px;align-items:center}.lane-label{display:flex;align-items:center;gap:8px;min-width:0}.rank-badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(180deg,#fff,#dcefff);border:2px solid #9bc7ff;color:#2e5db8;font-size:13px}.rank-badge.rank-1{background:linear-gradient(180deg,#fff1a8,#ffd75f);color:#6e4a00;border-color:#f8c533}.rank-badge.rank-2{background:linear-gradient(180deg,#fff,#e7edf8)}.rank-badge.rank-3{background:linear-gradient(180deg,#ffe7d4,#ffc79a)}
.lane-id{min-width:0}.lane-id strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lane-id small{display:block;color:#718ab1;font-weight:800}
.track{height:48px;border-radius:999px;background:linear-gradient(180deg,#dff1ff,#b7ddff);border:3px solid #8abfff;position:relative;overflow:hidden;box-shadow:inset 0 -4px 0 rgba(75,134,204,.18)}.track:before{content:"";position:absolute;inset:50% 12px auto;height:0;border-top:2px dashed rgba(42,96,175,.35)}.track-progress{position:absolute;left:0;top:0;bottom:0;width:var(--progress);background:linear-gradient(90deg,#77ffe4,#8ccaff)}.runner{position:absolute;top:50%;transform:translate(-50%,-50%)}.finish-line{position:absolute;right:10px;top:3px;bottom:3px;width:18px;border-radius:6px;background:repeating-linear-gradient(180deg,#fff,#fff 6px,#4a70b6 6px,#4a70b6 12px)}
.race-foot{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;color:#5677ad;font-size:11px;font-weight:900;text-align:center}.peloton{background:linear-gradient(180deg,#edf6ff,#d8ebff);border:3px solid #b4d5ff;border-radius:18px;padding:8px 10px}.peloton-title{display:block;font-size:11px;font-weight:900;color:#5371a1;margin-bottom:6px}.peloton-list{display:flex;gap:6px;flex-wrap:wrap;overflow:hidden}.peloton-entry{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#fff;border:2px solid #c9e2ff;font-size:11px;font-weight:900;color:#315cae}
.race-empty{display:grid;place-items:center;height:100%;color:#6d86ae;font-weight:800}

.host-control-panel,.chat-panel,.phase-card{padding:14px 16px;height:100%;display:flex;flex-direction:column;min-height:0}
.qrwrap{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}.qr{width:132px;height:132px;background:#fff;border-radius:18px;border:3px solid #b9dcff;padding:7px;object-fit:contain}.join-block{min-width:0}.huge-pin{font-size:44px;line-height:1;letter-spacing:.08em;font-weight:900;color:#295fc1;margin:7px 0 10px}.control-stack{display:flex;gap:8px;flex-wrap:wrap}.tiny-link{font-size:11px;color:#5f80b2;word-break:break-all;margin:8px 0 0}
.participants{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:10px 0 7px;font-size:12px;color:#5676a8;font-weight:800}.participants strong{font-size:24px;color:#1f53b0}.bar{height:10px;border-radius:999px;background:#cfe8ff;overflow:hidden;border:2px solid #b7d8ff}.bar>span{display:block;height:100%;background:linear-gradient(90deg,#ffe06e,#ffa93a)}
.divider{height:2px;background:#d6e9ff;margin:12px 0}.player-cloud{display:flex;gap:7px;flex-wrap:wrap;overflow:auto;padding-right:2px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#fff,#ecf6ff);border:2px solid #bddcff;font-size:12px;font-weight:800;color:#355ca7}.chip.offline{opacity:.45}.chip.answered{background:linear-gradient(180deg,#f3fff4,#daf8e0);border-color:#9fdea9}
.question-label{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#dff0ff;color:#2e62bf;font-size:12px;font-weight:900;letter-spacing:.12em}.score-rule{margin:8px 0 6px;color:#6483b4;font-size:12px;font-weight:800}.big-q{font-size:clamp(21px,2vw,30px);line-height:1.28;font-weight:900;color:#17305a;margin:12px 0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{min-height:72px;padding:14px 14px;border-radius:20px;border:3px solid #a8d0ff;background:linear-gradient(180deg,#fff,#edf6ff);display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);font:inherit;font-weight:900;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(81,132,210,.13)}.choice:hover:not(:disabled){transform:translateY(-1px)}.choice:disabled{cursor:default}.choice .num{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#ffd954,#ffbf19);color:#704700;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);flex-shrink:0}.choice.correct{background:linear-gradient(180deg,#f6fff5,#dcfbe5);border-color:#85d992}.choice.wrong{opacity:.52}.choice.selected{border-color:#ffcd48;background:linear-gradient(180deg,#fffbe8,#fff0bf)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.stat{background:linear-gradient(180deg,#edf7ff,#dff0ff);border:3px solid #bedfff;border-radius:18px;padding:12px;text-align:center}.stat strong{display:block;font-size:24px;color:#2358b2}.stat span{display:block;font-size:11px;color:#6683ae;font-weight:800}.countdown{font-size:40px;color:#ff8d28;font-weight:900;line-height:1}.countdown.urgent{color:#ff5656}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.controls .btn{flex:1}.table{width:100%;border-collapse:collapse}.table th{font-size:11px;color:#6a85ae;padding:7px 8px;text-align:left}.table td{padding:9px 8px;border-top:2px solid #dcecff;font-weight:800}.table td:last-child,.table th:last-child{text-align:right}.mini-player{display:flex;align-items:center;gap:8px}.score{color:#2e63bf}.lead-list{display:grid;gap:8px}.lead-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,#fff,#eef7ff);border:3px solid #bcdcff;font-weight:900}.lead-row:first-child{background:linear-gradient(180deg,#fff4bc,#ffe180);border-color:#ffd041}.lead-row .rank{font-size:22px;color:#9d6800}.lead-row .points{color:#265bb8}
.my-info{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;font-weight:900;color:#5475aa}.my-score{color:#2358b2!important}.my-avatar-inline{display:inline-flex;align-items:center;gap:6px}.phase-card{text-align:center;justify-content:flex-start;overflow:auto}.runner-showcase{display:flex;justify-content:center;align-items:center;margin:6px 0 8px}.runner-showcase .avatar{transform:scale(1.2)}.answer-submitted{display:inline-block;padding:10px 16px;border-radius:16px;background:linear-gradient(180deg,#e9fff4,#caf6db);border:3px solid #9fdcae;color:#15804f;font-weight:900}.badge-score{font-size:46px;line-height:1;color:#215ab7;font-weight:900;margin:8px 0}.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#e4f2ff;color:#2f63c0;font-size:12px;font-weight:900}.final-hero{font-size:34px;line-height:1;color:#1f52ae;font-weight:900;margin:8px 0 12px}
.chat-panel{background:linear-gradient(180deg,#244f9e,#143d88);color:#fff;border-color:#6eb7ff}.chat-panel .section-title{color:#d8edff}.chat-log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}.chat-row{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:start}.chat-row.system{grid-template-columns:28px 1fr}.chat-avatar{display:flex;justify-content:center;padding-top:2px}.system-badge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffe784,#ffca38);color:#6c4700;font-weight:900}.chat-bubble{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:8px 10px}.chat-row.host .chat-bubble{background:rgba(255,232,171,.18);border-color:rgba(255,239,184,.28)}.chat-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;margin-bottom:4px}.chat-meta strong{font-size:11px}.chat-meta span{opacity:.85}.chat-bubble p{margin:0;line-height:1.35;font-size:13px;word-break:break-word}.chat-empty{font-size:13px;opacity:.86}.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.chat-form .input{background:linear-gradient(180deg,#fff,#eaf5ff);border-color:#9fd0ff}
.editor{padding:14px 16px;overflow:auto}.editor h3{margin:0 0 10px;color:#2357b6}.editor-question{padding-top:12px;border-top:2px solid #deecff}.editor-question h4{margin:0 0 8px;color:#3265c0}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-head{display:grid;grid-template-columns:1fr 130px;gap:8px;align-items:end}.hint-line{font-size:12px;color:#6d86ae;margin:8px 0 4px}
.toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%);background:linear-gradient(180deg,#fff,#eef7ff);color:#1e4aa3;padding:12px 16px;border-radius:16px;border:3px solid #b9d9ff;font-weight:900;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.15s;z-index:50}.toast.visible{opacity:1}.toast.error{background:linear-gradient(180deg,#fff4f4,#ffe2e2);border-color:#ffb9b9;color:#a43d3d}

/* Avatar art */
.avatar{display:inline-block;width:44px;height:50px;position:relative;vertical-align:middle}.avatar svg{width:100%;height:100%;display:block}.avatar-shadow{transform-origin:center}.avatar-motion{transform-origin:47px 54px}.avatar .limb{transform-origin:center}.pose-run .avatar-motion,.pose-runfast .avatar-motion,.pose-happy .avatar-motion,.pose-clap .avatar-motion,.pose-celebrate .avatar-motion{animation:bob .7s infinite ease-in-out}.pose-runfast .avatar-motion{animation-duration:.38s}.pose-run .l-arm,.pose-run .r-leg,.pose-runfast .l-arm,.pose-runfast .r-leg{animation:swingA .36s infinite alternate ease-in-out}.pose-run .r-arm,.pose-run .l-leg,.pose-runfast .r-arm,.pose-runfast .l-leg{animation:swingB .36s infinite alternate ease-in-out}.pose-runfast .l-arm,.pose-runfast .r-leg,.pose-runfast .r-arm,.pose-runfast .l-leg{animation-duration:.22s}.pose-happy .l-arm,.pose-happy .r-arm,.pose-celebrate .l-arm,.pose-celebrate .r-arm{animation:cheer .4s infinite alternate ease-in-out}.pose-fall{transform:rotate(82deg);transform-origin:50% 80%;animation:fall 1s infinite ease-in-out}.pose-fall .avatar-shadow{opacity:.1}.pose-clap .l-arm{animation:clapL .38s infinite alternate}.pose-clap .r-arm{animation:clapR .38s infinite alternate}

@keyframes blink{50%{opacity:.35}}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(124,255,176,0)}}@keyframes bob{50%{transform:translateY(-2px)}}@keyframes swingA{from{transform:rotate(28deg)}to{transform:rotate(-28deg)}}@keyframes swingB{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}@keyframes cheer{from{transform:rotate(10deg)}to{transform:rotate(-40deg)}}@keyframes clapL{from{transform:rotate(18deg)}to{transform:rotate(-20deg)}}@keyframes clapR{from{transform:rotate(-18deg)}to{transform:rotate(20deg)}}@keyframes fall{0%,100%{transform:rotate(82deg)}50%{transform:rotate(76deg) translateY(2px)}}

@media (max-width:1100px){
  .app{width:calc(100vw - 12px)}
  .race-track{grid-template-columns:1fr}.host-bottom-grid,.player-layout{grid-template-columns:1fr 300px}.lane{grid-template-columns:120px 1fr}.headrow h1{font-size:26px}
}
@media (max-width:860px){
  body{grid-template-rows:64px 1fr 24px}.topbar{padding:10px 12px}.brand strong{font-size:14px}.brand small{font-size:9px}.status{font-size:11px}
  .app{width:100%;padding:6px 6px 4px}
  .headrow{min-height:auto}.headrow h1{font-size:21px}.headrow p{font-size:11px}
  .host-bottom-grid,.player-layout{grid-template-columns:1fr;grid-template-rows:1fr minmax(160px,34%)}
  .race-panel{grid-template-rows:auto 1fr auto}.race-track{grid-template-columns:1fr}
  .lane{grid-template-columns:104px 1fr}.track{height:44px}.chat-panel{min-height:0}
  .choices{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}.qrwrap{grid-template-columns:96px 1fr}.qr{width:96px;height:96px}.huge-pin{font-size:36px}.avatar-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .hero h1{font-size:40px}.landing-panel{padding:14px 14px 16px}.avatar-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .headrow{padding:0}.eyebrow,.tag{font-size:10px;padding:6px 10px}
  .host-bottom-grid,.player-layout{grid-template-rows:1fr 180px}.section-title{margin-bottom:6px}
  .host-control-panel,.chat-panel,.phase-card,.race-panel{padding:10px 12px;border-radius:20px}
  .big-q{font-size:18px;margin:8px 0}.countdown{font-size:34px}.choice{min-height:62px;padding:10px 12px;border-radius:16px;font-size:13px}.choice .num{width:28px;height:28px;border-radius:10px;font-size:13px}
  .stats{gap:6px}.stat{padding:8px;border-radius:14px}.stat strong{font-size:18px}.lead-row{padding:8px 10px;grid-template-columns:34px 1fr auto}.lead-row .rank{font-size:18px}.lead-row .name,.lead-row .points{font-size:13px}
  .avatar{width:36px;height:40px}.runner-showcase .avatar{transform:scale(1.05)}.badge-score{font-size:34px}.final-hero{font-size:26px}.chat-form{grid-template-columns:1fr 74px}.footer{font-size:8px}
}

/* V6: true viewport dashboard, no unnecessary chrome */
html,body{height:100%;height:100dvh;overflow:hidden}
body{display:block}
.topbar,.footer{display:none!important}
.app{width:100%;max-width:none;height:100%;height:100dvh;margin:0;padding:7px;overflow:hidden}
.host-wide{height:100%;display:grid;grid-template-rows:38px minmax(136px,42fr) minmax(0,58fr);gap:6px;min-height:0;overflow:hidden}
.play-wrap{height:100%;display:grid;grid-template-rows:36px 38px minmax(0,1fr);gap:6px;min-height:0;overflow:hidden}
.headrow{min-height:0;height:100%;margin:0;padding:0 5px;gap:8px}
.head-title{display:flex;align-items:center;gap:10px;min-width:0}
.hud-brand{font-weight:1000;font-size:clamp(14px,1.65vw,22px);letter-spacing:.045em;color:#fff;white-space:nowrap;text-shadow:0 2px rgba(13,42,92,.24)}
.hud-brand b{color:#fff2a0}.hud-step{font-size:11px;font-weight:900;color:#e6f5ff;white-space:nowrap}
.hud-count{font-weight:900;font-size:12px;color:#fff;white-space:nowrap}
.top-meta .tag{padding:5px 10px;font-size:10px;border-radius:12px;box-shadow:none}
.host-wide>.race-panel{height:100%;min-height:0}
.host-wide>.host-bottom-grid{height:100%;min-height:0}
.host-bottom-grid{grid-template-columns:minmax(0,1.37fr) minmax(220px,.63fr);gap:6px}
.host-bottom-grid>.panel{min-height:0;overflow:hidden}
.race-panel{padding:7px 10px;gap:3px;border-width:2px;border-radius:14px}
.race-head{align-items:center;min-height:18px;gap:5px}.race-head .section-title{font-size:10px;margin:0}.race-copy{font-size:10px}
.race-status{display:none}
.race-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:3px 10px;align-content:stretch;min-height:0;overflow:hidden}
.lane{display:grid;grid-template-columns:minmax(76px,26%) minmax(0,1fr);gap:5px;align-items:center;min-height:0}
.lane-label{gap:4px}.rank-badge{width:21px;height:21px;font-size:10px;border-width:1px;flex-shrink:0}.lane-id strong{font-size:clamp(9px,1.1vw,12px);line-height:1.1}.lane-id small{font-size:10px;line-height:1.1}
.track{height:100%;max-height:31px;min-height:22px;border-width:1px}.runner .avatar{width:27px;height:29px}
.race-foot{font-size:9px;gap:2px}.finish-line{right:6px;width:11px}
.peloton{padding:3px 7px;border-width:1px;border-radius:9px;overflow:hidden;max-height:43px}.peloton-title{display:inline;font-size:10px;margin-right:8px}.peloton-list{display:inline-flex;vertical-align:middle;gap:3px}.peloton-entry{padding:1px 3px;border-width:1px;font-size:9px}.peloton-entry .avatar{width:15px;height:18px}
.host-control-panel,.chat-panel,.phase-card{padding:9px 11px;border-width:2px;border-radius:14px;overflow:hidden}
.host-control-panel{overflow-y:auto;scrollbar-width:thin}.host-control-panel .section-title,.chat-panel .section-title{font-size:10px;margin:0 0 5px}
.host-control-panel .big-q{font-size:clamp(15px,1.8vw,23px);margin:5px 0 8px;line-height:1.22}
.host-control-panel .choices{gap:5px}.host-control-panel .choice{min-height:36px;padding:5px 7px;font-size:clamp(10px,1vw,13px);border-width:1px;border-radius:10px;gap:6px}.host-control-panel .choice .num{width:22px;height:22px;font-size:10px;border-radius:7px}
.host-control-panel .stats{margin:6px 0;gap:5px}.host-control-panel .stat{padding:3px;border-width:1px;border-radius:10px}.host-control-panel .stat strong{font-size:17px}.host-control-panel .stat span{font-size:10px}.host-control-panel .countdown{font-size:26px}
.host-control-panel .controls{gap:5px;margin-top:7px}.host-control-panel .controls .btn{padding:8px 10px;font-size:11px;border-radius:10px}.host-control-panel .divider{margin:6px 0}.host-control-panel .player-cloud{max-height:42px;overflow:auto;gap:3px}.host-control-panel .chip{font-size:10px;padding:2px 5px;border-width:1px}.host-control-panel .chip .avatar{width:16px;height:19px}
.host-control-panel .qrwrap{grid-template-columns:88px minmax(0,1fr);gap:7px}.host-control-panel .qr{width:88px;height:88px;padding:4px;border-width:1px}.host-control-panel .huge-pin{font-size:35px;margin:3px 0}.host-control-panel .tiny-link{margin:3px 0;font-size:9px}.host-control-panel .control-stack{gap:4px}.host-control-panel .control-stack .btn{padding:6px 8px;font-size:10px;border-radius:9px}
.host-control-panel .participants{margin:6px 0 3px}.host-control-panel .participants strong{font-size:16px}
.chat-panel{display:flex;flex-direction:column;min-height:0}.chat-log{min-height:0;max-height:none;flex:1;overflow:auto;gap:4px}.chat-row{grid-template-columns:27px minmax(0,1fr);gap:5px}.chat-row.system{grid-template-columns:23px minmax(0,1fr)}.chat-avatar .avatar{width:24px;height:28px}.system-badge{width:19px;height:19px;font-size:10px}
.chat-bubble{padding:5px 7px;border-radius:10px;border-width:1px}.chat-meta{margin-bottom:1px}.chat-meta strong{font-size:10px}.chat-bubble p{font-size:11px;line-height:1.25}
.chat-form{margin-top:5px;gap:4px;grid-template-columns:minmax(0,1fr) 48px;flex-shrink:0}.chat-form .input{padding:7px 8px;border-width:1px;border-radius:9px;font-size:11px}.chat-form .btn{padding:7px 4px;border-radius:9px;font-size:10px}
.host-wide>.editor{position:fixed;z-index:30;inset:7%;height:auto;overflow:auto;border:3px solid #91c6ff;box-shadow:0 0 0 100vmax rgba(7,25,61,.72),0 20px 60px #061a43}

/* Player HUD: ranking + question + chat must all stay visible */
.mini-standings{min-height:0;display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:11px;background:linear-gradient(180deg,#fff,#e0f0ff);border:2px solid #a9d2ff;overflow:hidden;white-space:nowrap}
.mini-title{color:#2054b1;font-size:11px;font-weight:1000;flex-shrink:0}
.mini-rank{border-radius:8px;background:#d9ebff;padding:4px 6px;font-size:10px;font-weight:800;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mini-rank b{color:#2057b3}.mini-rank.mine{background:#fff0a8}.mini-self{margin-left:auto;flex-shrink:0;color:#245ab3;font-size:10px;font-weight:1000}
.player-layout{height:100%;display:grid;grid-template-columns:minmax(0,1.34fr) minmax(220px,.66fr);grid-template-rows:minmax(0,1fr);gap:6px;min-height:0}
.player-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.player-main>.phase-card{flex:1;min-height:0;overflow:auto}
.question-topline{display:flex;align-items:center;justify-content:space-between;gap:6px}.question-topline .countdown{font-size:29px}.question-topline .score-rule{font-size:10px}
.player-main .big-q{font-size:clamp(17px,2.3vw,27px);margin:10px 0 13px;line-height:1.3}
.player-main .choices{gap:6px}.player-main .choice{min-height:48px;padding:7px 9px;border-width:2px;border-radius:12px;font-size:13px;gap:7px}.player-main .choice .num{width:27px;height:27px;font-size:11px;border-radius:8px}
.lobby-card{display:flex;align-items:center;justify-content:center;gap:12px}.lobby-inline,.result-inline{display:flex;align-items:center;justify-content:center;gap:12px}.lobby-inline .avatar,.result-inline .avatar{width:65px;height:75px;flex-shrink:0}.lobby-inline strong,.result-inline strong{display:block;font-size:clamp(16px,2.4vw,26px)}.lobby-inline small,.result-inline small{display:block;color:#5474a5;font-weight:800;margin-top:5px}.lobby-hero{font-size:clamp(22px,4vw,48px);font-weight:1000;color:#2d63b8}.lobby-hero span{color:#23b99d}.lobby-notice{font-size:12px;font-weight:800;color:#597ab0;text-align:center}
.result-card .result-answer{font-size:12px;font-weight:800;color:#2659b1;margin:8px}.result-card .badge-score{font-size:23px;margin:0}.result-card .choices{width:100%;margin-top:4px}.result-card .choice{min-height:33px;font-size:11px}
.standings-card .lead-list{width:100%;overflow:auto;min-height:0}.standings-card .lead-row{padding:5px 8px;border-width:1px;border-radius:10px}.standings-card .lead-row .rank{font-size:17px}

@media(max-width:900px){
 .host-bottom-grid{grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr)}
 .race-track{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lane{grid-template-columns:minmax(65px,25%) minmax(0,1fr)}
 .player-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,57fr) minmax(0,43fr)}
 .play-wrap{grid-template-rows:32px 34px minmax(0,1fr)}
}
@media(max-width:600px){
 .app{padding:4px}.play-wrap{gap:4px;grid-template-rows:29px 33px minmax(0,1fr)}
 .hud-brand{font-size:13px}.hud-step{display:none}.hud-count{font-size:10px}.top-meta .tag{font-size:9px;padding:3px 6px}
 .mini-standings{padding:2px 4px;gap:3px;border-width:1px}.mini-title{font-size:9px}.mini-rank{font-size:9px;padding:3px 4px}.mini-rank:nth-of-type(n+5){display:none}.mini-self{font-size:9px}
 .player-layout{grid-template-rows:minmax(0,55fr) minmax(0,45fr);gap:4px}
 .phase-card,.chat-panel{padding:7px 8px;border-width:1px;border-radius:12px}
 .player-main .big-q{font-size:clamp(14px,4.3vw,18px);margin:5px 0 7px}
 .player-main .choices{grid-template-columns:1fr 1fr;gap:4px}.player-main .choice{min-height:44px;font-size:11px;padding:4px 5px;gap:4px;border-width:1px;border-radius:9px}.player-main .choice .num{width:23px;height:23px;font-size:10px}
 .question-topline .countdown{font-size:24px}.question-topline .score-rule{font-size:9px}
 .lobby-inline .avatar,.result-inline .avatar{width:45px;height:52px}.lobby-inline strong,.result-inline strong{font-size:17px}.lobby-hero{font-size:27px}.lobby-notice{font-size:10px}
 .chat-row{grid-template-columns:24px minmax(0,1fr)}.chat-avatar .avatar{width:21px;height:24px}.chat-bubble{padding:4px 6px}.chat-bubble p{font-size:11px}.chat-panel .section-title{margin:0 0 4px}
 .chat-form .input{font-size:12px;padding:7px 8px}.chat-form .btn{font-size:11px}
 .host-wide{grid-template-rows:31px minmax(125px,39fr) minmax(0,61fr);gap:4px}
 .host-bottom-grid{grid-template-columns:minmax(0,1.1fr) minmax(150px,.9fr);gap:4px}
 .race-panel{padding:4px 5px}.race-copy{display:none}.race-track{gap:2px 4px}.lane{grid-template-columns:65px minmax(0,1fr);gap:2px}.lane-id strong{font-size:9px}.lane-id small{display:none}.rank-badge{width:16px;height:16px;font-size:9px}.track{min-height:15px;max-height:22px}.runner .avatar{width:18px;height:21px}.race-foot{font-size:8px}
 .host-control-panel{padding:5px 6px}.host-control-panel .choices{grid-template-columns:1fr 1fr}.host-control-panel .choice{min-height:34px;font-size:10px;padding:3px}.host-control-panel .big-q{font-size:14px}.host-control-panel .stats{gap:2px}.host-control-panel .stat span{font-size:8px}.host-control-panel .stat strong{font-size:13px}.host-control-panel .qrwrap{grid-template-columns:60px minmax(0,1fr)}.host-control-panel .qr{width:60px;height:60px}.host-control-panel .huge-pin{font-size:23px}
}
@media(max-height:650px){
 .host-wide{grid-template-rows:30px minmax(122px,40fr) minmax(0,60fr)}
 .race-head{min-height:12px}.race-foot{display:none}.race-track{gap:2px 8px}.track{max-height:24px}.lane-id small{display:none}
 .host-control-panel .big-q{font-size:16px;margin:4px 0}.host-control-panel .choices{gap:4px}.host-control-panel .choice{min-height:30px;padding:3px 6px}
 .host-control-panel .stats{margin:4px 0}.host-control-panel .stat{padding:2px}.host-control-panel .player-cloud{max-height:28px}
 .play-wrap{grid-template-rows:28px 30px minmax(0,1fr)}.player-layout{grid-template-rows:minmax(0,55fr) minmax(0,45fr)}
}

/* V7 — ONE SHARED RACE LANE (visual podium race, no individual progress bars) */
.host-wide{grid-template-rows:32px minmax(108px,25fr) minmax(0,75fr)!important}
.host-wide>.common-race-panel{height:100%;min-height:0;display:grid;grid-template-rows:20px minmax(0,1fr) 23px;gap:2px;padding:5px 10px}
.common-race-panel .race-head{display:flex;align-items:center;justify-content:space-between;min-height:0}
.common-race-panel .race-head .section-title{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap;font-size:11px}
.race-small-label{font-size:10px;color:#6687b5;font-weight:800;letter-spacing:0;text-transform:none}
.race-progress-label{font-weight:1000;font-size:10px;color:#285bac;background:#e1f1ff;border-radius:9px;padding:3px 8px;white-space:nowrap}
.common-race-stage{position:relative;min-height:0;border:2px solid #a0d7ff;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#c7efff 0%,#b7e5ff 50%,#a5e7ca 52%,#79cda4 100%)}
.race-sky-detail{position:absolute;color:#fff;opacity:.8;font-size:18px;pointer-events:none}.race-sky-detail.one{top:4px;left:18%}.race-sky-detail.two{top:3px;right:20%}
.single-track{position:absolute;left:1%;right:1%;top:44%;height:47%;background:repeating-linear-gradient(180deg,#d1a77d 0 18px,#c69b70 18px 20px);border-radius:9px;border:2px solid #a77c53;box-shadow:inset 0 4px 0 #e8c8a1;overflow:hidden}
.single-track .track-stripe{position:absolute;top:50%;left:3%;right:5%;border-top:2px dashed #fbe5be;opacity:.9}
.race-start,.race-finish{position:absolute;bottom:2px;font-size:9px;font-weight:1000;color:#5b3827;z-index:1}.race-start{left:4px}.race-finish{right:5px}
.pack-runner{position:absolute;left:var(--pack-x);top:var(--pack-y);width:38px;height:38px;transform:translate(-50%,-50%);transition:left .75s ease,top .65s ease;z-index:3}
.pack-runner .avatar{width:36px;height:42px;filter:drop-shadow(0 2px 2px #4f705e99)}
.pack-runner.leading .avatar{width:42px;height:49px;transform:scale(1.1)}
.pack-name{position:absolute;z-index:6;left:50%;transform:translateX(-50%);max-width:110px;white-space:nowrap;display:flex;align-items:center;gap:3px;background:#ffffffed;padding:1px 4px;border:1px solid #84b5e8;border-radius:7px;color:#1b4b93;font-size:9px;font-weight:900;box-shadow:0 2px 3px #24446622;pointer-events:none}
.pack-name b{color:#9b6200}.pack-name small{font-size:8px;color:#4a70a7}.pack-name.above{bottom:37px}.pack-name.below{top:39px}
.pack-followers{position:absolute;top:48%;left:2%;z-index:2;max-width:27%;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:10px;background:#ffffffb8;border:1px solid #a4d7ea;min-width:0}
.pack-follow-label{font-size:9px;font-weight:900;color:#356b8f;white-space:nowrap}.pack-follow-grid{display:flex;gap:2px;flex-wrap:wrap;max-height:26px;overflow:hidden;align-content:center}.pack-follow-dot{width:7px;height:7px;border-radius:50%;border:1px solid #fff;background:var(--follow-color);box-shadow:0 1px 1px #2355}
.pack-follow-grid b{font-size:8px}
.race-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:hidden;white-space:nowrap;font-size:10px;font-weight:900;color:#2858aa}
.race-summary span{overflow:hidden;text-overflow:ellipsis}
.mini-race-strip{height:100%;display:flex;align-items:center;gap:5px;padding:2px 6px}
.mini-race-entries{min-width:0;display:flex;gap:4px;flex:1;overflow:hidden}.mini-race-entries .mini-rank{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-race-entries em{font-style:normal;color:#5681b8}
@media(min-width:901px){.pack-runner{width:45px;height:45px}.pack-runner .avatar{width:43px;height:50px}.pack-runner.leading .avatar{width:47px;height:54px}.pack-name.above{bottom:43px}.pack-name.below{top:43px}}
@media(max-width:900px){.host-wide{grid-template-rows:29px minmax(104px,24fr) minmax(0,76fr)!important}.common-race-panel .race-head .section-title{font-size:10px}.pack-name{font-size:8px}.pack-name small{display:none}.pack-follow-label{font-size:8px}}
@media(max-width:600px){.host-wide{grid-template-rows:27px minmax(94px,23fr) minmax(0,77fr)!important}.host-wide>.common-race-panel{grid-template-rows:15px minmax(0,1fr) 15px;padding:3px 5px}.common-race-panel .race-head .section-title{font-size:9px}.race-small-label{display:none}.race-progress-label{font-size:8px;padding:1px 4px}.pack-runner{width:27px;height:30px}.pack-runner .avatar{width:26px;height:30px}.pack-runner.leading .avatar{width:29px;height:33px}.pack-name{font-size:7px;max-width:60px}.pack-name.above{bottom:27px}.pack-name.below{top:28px}.pack-followers{padding:2px;max-width:25%}.pack-follow-label{font-size:7px}.pack-follow-dot{width:5px;height:5px}.race-summary{font-size:8px}.mini-race-entries .mini-rank:nth-child(n+3){display:none}.mini-self{white-space:nowrap}}

/* V8 — Compact join screen and safer one-lane race artwork */
/* Landing can scroll as a safety fallback; quiz/host dashboards remain viewport-sized. */
.app:has(.join-screen){overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.join-screen{width:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:10px 4px 16px;overflow:visible}
.join-screen>.landing-panel{width:min(560px,100%);margin:0;padding:15px 17px 14px;flex-shrink:0;overflow:visible}
.join-heading{color:#2557ad;font-size:clamp(16px,4.7vw,23px);font-weight:1000;text-align:center;letter-spacing:.055em;margin:0 0 13px}
.join-screen .form-block{margin-bottom:12px}
.join-screen .field-label{font-size:12px;margin-bottom:5px}
.join-screen .input{height:45px;padding:7px 11px;border-width:2px;border-radius:12px}
.join-screen .pin-input{font-size:24px;letter-spacing:.22em}
.join-screen .avatar-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.join-screen .avatar-option{min-width:0;min-height:88px;padding:7px 3px 5px;border-width:2px;border-radius:13px;gap:2px;font-size:11px;line-height:1.12}
.join-screen .avatar-option .avatar{width:49px;height:51px;flex-shrink:0}
.join-screen .btn-lg{padding:11px 12px;font-size:14px;border-radius:12px}
.join-screen .divider-text{margin:10px 0 8px}
.join-screen .btn-outline{padding:9px;font-size:12px;border-radius:12px}
/* The older V7 stage clipped avatars at extreme vertical positions. Keep the
   character pack centered, with room for head, feet and bounce animations. */
.host-wide>.common-race-panel{grid-template-rows:17px minmax(0,1fr) 18px;gap:3px}
.common-race-stage{overflow:hidden;min-height:0}
.pack-runner{top:var(--pack-y);width:36px;height:40px;z-index:4}
.pack-runner .avatar{width:36px;height:40px}
.pack-runner.leading .avatar{width:39px;height:43px;transform:none}
.pack-name{display:none!important} /* full names remain available in the race summary and tooltip */
.pack-followers{top:42%;}
@media(min-width:901px){
 .pack-runner{width:40px;height:44px}
 .pack-runner .avatar{width:40px;height:44px}
 .pack-runner.leading .avatar{width:43px;height:46px}
}
@media(max-height:620px){
 .host-wide{grid-template-rows:29px minmax(114px,29fr) minmax(0,71fr)!important}
 .host-wide>.common-race-panel{grid-template-rows:15px minmax(0,1fr) 16px;padding:3px 7px}
 .pack-runner,.pack-runner .avatar{width:31px;height:33px}
 .pack-runner.leading .avatar{width:33px;height:35px}
 .single-track{top:42%;height:51%}
}
@media(max-width:600px){
 .join-screen{padding:6px 3px 13px}
 .join-screen>.landing-panel{padding:12px 12px 12px;border-width:2px;border-radius:20px}
 .join-heading{font-size:18px;margin-bottom:9px}
 .join-screen .form-block{margin-bottom:9px}
 .join-screen .input{height:42px}
 .join-screen .pin-input{font-size:22px}
 .join-screen .avatar-option{min-height:75px;padding:3px 2px;font-size:10px}
 .join-screen .avatar-option .avatar{width:43px;height:44px}
 .join-screen .btn-lg{padding:10px}
 .join-screen .divider-text{margin:7px 0 5px}
 .host-wide>.common-race-panel{grid-template-rows:14px minmax(0,1fr) 15px}
 .pack-runner,.pack-runner .avatar{width:25px;height:28px}
 .pack-runner.leading .avatar{width:27px;height:30px}
}
@media(max-height:650px) and (max-width:600px){
 .join-screen .avatar-option{min-height:67px;font-size:10px}
 .join-screen .avatar-option .avatar{width:36px;height:39px}
 .join-screen .form-block{margin-bottom:7px}
 .join-screen .input{height:39px}
}

/* V9 — keep start positions readable without an overlay hiding the left edge. */
.pack-followers{left:auto;right:1%;top:4%;max-width:29%;padding:2px 6px;z-index:2}
.pack-runner{transition:left 1.25s cubic-bezier(.2,.7,.18,1),top .5s ease}
@media(max-width:600px){.pack-followers{right:1%;top:2%;max-width:28%;padding:1px 3px}}

/* V10 · exact score badges, question-break rank card, victory celebration */
.pack-runner{z-index:5}
.runner-score-badge{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,100%);display:inline-flex;align-items:baseline;justify-content:center;gap:1px;min-width:30px;padding:2px 5px;background:linear-gradient(180deg,#fff8bd,#ffd557);border:1.5px solid #d69a18;border-radius:9px;color:#654000;font-weight:1000;font-size:11px;line-height:1.1;white-space:nowrap;box-shadow:0 2px 0 #a77b3070;pointer-events:none;z-index:10}
.runner-score-badge small{font-size:8px}
.common-race-stage{overflow:hidden}
.pack-runner{top:clamp(26%,var(--pack-y),57%)!important}
.pack-followers{z-index:3}
@media(min-width:901px){.host-wide>.common-race-panel{grid-template-rows:17px minmax(0,1fr) 18px}.runner-score-badge{font-size:11px}}
@media(max-height:620px){.runner-score-badge{font-size:9px;padding:1px 3px;min-width:23px}.runner-score-badge small{font-size:7px}}
@media(max-width:600px){.runner-score-badge{font-size:8px;padding:1px 2px;min-width:21px}.runner-score-badge small{font-size:6px}.pack-runner{top:clamp(27%,var(--pack-y),52%)!important}}

.waiting-rank-popup{width:min(100%,520px);margin:auto auto;align-self:center;border:3px solid #ffd45c;border-radius:19px;background:linear-gradient(170deg,#fffef1,#e8f6ff 78%);box-shadow:0 8px 0 #f6c96f55,0 16px 25px #124a8750;padding:12px 16px;text-align:center;color:#224e9d;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:7px;min-height:0;max-height:100%;overflow:auto;position:relative}
.waiting-pop-tag{align-self:center;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:1000;color:#7c5709;background:#ffdc6c;letter-spacing:.12em}
.waiting-pop-head{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.waiting-pop-head>div{background:#fff;border:2px solid #bcddff;border-radius:13px;padding:7px 5px;display:flex;flex-direction:column;gap:2px}
.waiting-pop-caption{font-size:11px;color:#577bb5;font-weight:900}.waiting-pop-head strong{font-size:clamp(26px,3.5vw,39px);line-height:1.05;color:#2258b6;font-variant-numeric:tabular-nums}.waiting-pop-head strong small{font-size:13px;color:#6387b6}
.waiting-pop-sub{font-size:12px;font-weight:900;color:#466caa}.waiting-pop-sub b{color:#e49a07}
.waiting-pop-podium{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;min-width:0}.waiting-pop-entry{background:#e5f2ff;border:1px solid #b6d8ff;padding:3px 6px;font-size:10px;border-radius:8px;font-weight:800;white-space:nowrap}.waiting-pop-entry b{color:#ca8c11}.waiting-pop-entry em{font-style:normal;color:#4b6aa2}.waiting-pop-entry.mine{background:#fff0b4;border-color:#efc344}
.waiting-pop-footer{font-size:10px;font-weight:700;color:#7793b4}
.result-waiting{overflow:hidden!important;gap:4px}.result-waiting .result-answer{margin:2px 0;font-size:11px;line-height:1.25}.result-waiting .result-inline{flex-shrink:0}.result-waiting .waiting-rank-popup{flex:1;min-height:0}
.waiting-card{overflow:hidden!important}.waiting-card .waiting-rank-popup{margin:0 auto;flex-shrink:1;min-height:0}.waiting-result-list{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:7px}.waiting-result-list span{background:#ecf5ff;padding:3px 6px;border-radius:9px;font-size:10px;font-weight:900;color:#4f6aa2}.waiting-result-list em{font-style:normal}

/* Celebration remains in its own clipped panel, rather than covering chat or controls. */
.champion-stage{position:relative;min-height:0;flex:1;overflow:hidden;isolation:isolate;border-radius:17px;background:radial-gradient(ellipse at 50% 45%,#fff8c9 4%,#b9efff 54%,#78baff 100%);border:3px solid #ffe16c;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:9px 6px}
.celebration-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.confetti-piece{position:absolute;top:-15%;left:var(--x);width:8px;height:14px;background:var(--c);opacity:.95;transform:rotate(var(--rot));animation:confetti-fall var(--dur) linear var(--delay) infinite;border-radius:2px}.celebration-spark{position:absolute;color:#ffba20;font-size:clamp(30px,5vw,60px);animation:twinkle 1s ease-in-out infinite alternate}.spark-left{top:20%;left:9%}.spark-right{top:32%;right:10%;animation-delay:.4s}
.champion-crown{font-size:clamp(21px,3vw,40px);filter:drop-shadow(0 3px 0 #bc8b2d);z-index:2;animation:crown-bounce .7s ease-in-out infinite alternate}
.champion-runner{z-index:2;width:85px;height:97px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 6px #4878bd55);animation:winner-bounce 1s ease-in-out infinite alternate}.champion-runner .avatar{width:76px;height:86px}
.champion-copy{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;gap:2px;text-align:center;max-width:100%}.champion-copy span{font-size:11px;font-weight:1000;letter-spacing:.13em;color:#a97900}.champion-copy strong{font-size:clamp(19px,2.6vw,32px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#204b9b;text-shadow:0 2px 0 #fff}.champion-copy>b{font-size:23px;color:#dc8b00}.champion-applause{font-weight:900;font-size:11px;color:#375c9e;z-index:2}
.host-final-panel{display:flex;flex-direction:column;overflow:hidden}.host-final-panel .champion-stage{min-height:0}.final-host-ranking{display:flex;flex-wrap:wrap;gap:4px;padding:5px 0}.final-host-ranking>span{font-size:10px;padding:4px 7px;background:#e7f3ff;border-radius:9px;color:#406cab;font-weight:900}.final-host-ranking strong{color:#dc990f}.host-final-panel .controls{flex-shrink:0;margin-top:4px}
.final-card{overflow:hidden!important;gap:5px}.final-card .champion-stage{min-height:0}.final-rank-footer{font-size:12px;color:#4269ab;font-weight:900}.final-rank-footer b{color:#d28c09}.final-other-ranks{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.final-other-ranks span{font-size:10px;background:#e8f3ff;border-radius:7px;padding:3px 5px;font-weight:900;color:#52709f}.final-other-ranks b{color:#d48c00}
@keyframes confetti-fall{0%{transform:translateY(-10%) rotate(var(--rot));opacity:0}10%{opacity:1}100%{transform:translateY(550px) rotate(800deg);opacity:.75}}
@keyframes twinkle{to{transform:scale(1.4) rotate(22deg);opacity:.5}}
@keyframes crown-bounce{to{transform:translateY(-5px) rotate(8deg)}}
@keyframes winner-bounce{to{transform:translateY(-11px) rotate(-5deg)}}
@media(max-width:600px){
 .waiting-rank-popup{padding:6px 8px;gap:4px;border-width:2px;border-radius:13px;box-shadow:0 3px 0 #f6c96f55}
 .waiting-pop-tag{font-size:9px;padding:2px 8px}.waiting-pop-head{gap:4px}.waiting-pop-head>div{padding:4px 3px;border-width:1px;border-radius:8px}.waiting-pop-caption{font-size:9px}.waiting-pop-head strong{font-size:26px}.waiting-pop-head strong small{font-size:10px}.waiting-pop-sub{font-size:10px}.waiting-pop-entry{font-size:9px;padding:2px 4px}.waiting-pop-footer{font-size:9px}
 .champion-stage{border-width:2px;padding:4px;gap:1px}.champion-runner{width:59px;height:63px}.champion-runner .avatar{width:55px;height:61px}.champion-crown{font-size:22px}.champion-copy strong{font-size:18px}.champion-copy span{font-size:9px}.champion-copy>b{font-size:19px}.champion-applause{font-size:9px}.final-rank-footer{font-size:10px}.final-other-ranks span{font-size:9px}
 .result-waiting .result-inline{padding:1px 0}.result-waiting .result-answer{font-size:10px}.waiting-result-list{display:none}
}
@media(max-height:620px){.waiting-pop-footer{display:none}.waiting-rank-popup{gap:3px}.champion-runner{height:53px}.champion-runner .avatar{width:49px;height:55px}.champion-crown{font-size:20px}.final-host-ranking span:nth-child(n+5){display:none}}
@media(prefers-reduced-motion:reduce){.confetti-piece,.celebration-spark,.champion-crown,.champion-runner{animation:none}}