.qr b,.qr span,.qr small{display:block}
.qr small{max-width:300px;margin-top:12px;color:#52606d;line-height:1.4}
.qrLoading{width:190px;height:190px;flex:0 0 190px;display:grid;place-items:center;padding:18px;text-align:center;background:white;border-radius:18px;color:#64748b;font-weight:800}

:root{--navy:#071b2d;--gold:#e9c46a;--paper:#f7f3ea;--ink:#102a43}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 10% 10%,#194d76,#071b2d 58%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button,input,select{font:inherit}
.app{min-height:100svh;display:grid;place-items:center;padding:22px}
.shell{position:relative;width:min(1180px,100%);min-height:min(780px,calc(100svh - 44px));background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:0 30px 90px #0007}
.shell.small{width:min(520px,100%);min-height:auto}
.home{min-height:inherit;display:grid;grid-template-columns:1.05fr .95fr}
.home>section{padding:clamp(38px,7vw,86px);display:flex;flex-direction:column;justify-content:center}
.overline{text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:.75rem;color:#a4453f}
.home h1,.join h2,.lobby h2,.finish h2{font:700 clamp(2.7rem,6vw,5.5rem)/.96 Georgia,serif;letter-spacing:-.04em;margin:18px 0}
.home p{font-size:1.12rem;line-height:1.65;color:#52606d}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.primary,.secondary{border:0;border-radius:14px;padding:15px 23px;font-weight:850;cursor:pointer}
.primary{background:var(--navy);color:white}
.secondary{background:white;color:var(--navy);border:1px solid #d8dee5}
.primary:disabled{opacity:.45}
.home figure{position:relative;margin:0;background:#082036}
.home figure>img{width:100%;height:100%;object-fit:cover;opacity:.78}
.home figcaption{position:absolute;left:26px;right:26px;bottom:26px;padding:20px;border:1px solid #fff5;border-radius:18px;background:#071b2ddd;color:white}
.home figcaption b,.home figcaption span{display:block}
.join{padding:44px}
.join h2{font-size:2.5rem}
.join label{display:block;font-weight:800;margin:18px 0}
.join input,.join select{display:block;width:100%;margin-top:8px;border:1px solid #ccd4dc;border-radius:13px;background:white;padding:15px 16px;font-size:1.15rem;color:var(--ink)}
.join>label:first-of-type input{font-size:1.8rem;letter-spacing:.12em;font-weight:900}
.wide{width:100%}
.link{display:block;margin:16px auto 0;border:0;background:transparent}
.error,.toast{color:#a51d2d}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:white;padding:13px 18px;border-radius:12px}
.bar{height:70px;padding:0 28px 0 175px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d8dee5;background:white}
.bar strong{font-size:1.35rem;letter-spacing:.1em}
.lobby{display:grid;grid-template-columns:1fr 360px;gap:45px;padding:48px 56px}
.lobby h2{font-size:2rem;margin-bottom:5px}
.code{font:700 clamp(3.3rem,8vw,7rem)/1 Georgia,serif;letter-spacing:.08em;margin:10px 0 22px}
.qr{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.qr img{width:190px;height:190px;background:white;padding:8px;border-radius:18px}
.qr b,.qr span{display:block}
.qr span{color:#64748b;margin-top:7px}
.duration{margin:4px 0 22px}
.duration>b{display:block;margin-bottom:9px}
.duration>div{display:flex;gap:8px;flex-wrap:wrap}
.duration button{min-width:76px;border:1px solid #b9c4ce;border-radius:11px;background:#fff;color:var(--navy);padding:10px 13px;font-weight:800;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.duration button:active{transform:scale(.96)}
.duration button.selected{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:0 0 0 3px #071b2d22,0 5px 12px #071b2d2b}
.duration button.selected::before{content:'✓ ';font-weight:900}
.roster{background:#fff;border:1px solid #dbe1e7;border-radius:20px;padding:22px}
.roster h3{display:flex;justify-content:space-between;margin:0 0 15px}
.roster h3 span{background:#e9eef2;border-radius:99px;padding:3px 10px}
.roster p{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;margin:8px 0;padding:10px;background:#f3f6f8;border-radius:10px}
.roster p>b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white}
.roster em{font-style:normal;font-weight:900}
.empty{text-align:center;color:#82909d;padding:70px 10px}
.hostQ{padding:25px 32px}
.qmeta{display:flex;justify-content:space-between;margin-bottom:16px;color:#596b79}
.qgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}
.qgrid figure{margin:0;position:relative;min-height:580px;background:linear-gradient(145deg,#0b2033,#153f61);border-radius:18px;overflow:hidden;display:grid;place-items:center}
.qgrid figure img{width:100%;height:100%;object-fit:contain;position:absolute;background:#0b2033}
.qgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:35px 18px 16px;color:white;background:linear-gradient(transparent,#000c)}
.questionCover{display:flex;flex-direction:column;align-items:center;gap:22px;color:white;text-align:center;padding:36px}
.questionCover span{width:150px;height:150px;border:3px solid #e9c46a;border-radius:50%;display:grid;place-items:center;font:700 6rem Georgia,serif;color:#e9c46a}
.questionCover b{max-width:260px;line-height:1.5;color:#dce8f1}
.qgrid section{display:flex;flex-direction:column}
.qgrid h2{font:700 clamp(1.5rem,2.5vw,2.3rem)/1.2 Georgia,serif;margin:6px 0 22px}
.answers{display:grid;gap:10px}
.ans{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px;color:white;padding:15px;border-radius:13px}
.ans b{width:34px;height:34px;border-radius:9px;background:#fff3;display:grid;place-items:center}
.ans.correct{outline:6px solid #26c281}
.explain{line-height:1.5;background:#e3f3ec;padding:13px;border-radius:12px}
.next{align-self:flex-end;margin-top:auto}
.wait,.phone{min-height:calc(100svh - 114px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.wait h2,.phone h2{font:700 2.3rem Georgia,serif;margin:18px 0 8px}
.mark{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:#2c9a68;color:white;font-size:3rem;box-shadow:0 0 0 15px #2c9a681c}
.mark.bad{background:#c23d43;box-shadow:0 0 0 15px #c23d431c}
.phoneMeta{position:absolute;top:90px;color:#657786;font-weight:800}
.phoneAnswers{width:min(560px,100%);display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}
.phoneAnswers button{min-width:0;width:100%;aspect-ratio:1.15;border:0;border-radius:22px;color:white;font-size:2.5rem;box-shadow:inset 0 -7px #0002,0 10px 20px #0002}
.finish{text-align:center;padding:55px}
.finish h2{font-size:4rem}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:35px auto;max-width:750px}
.podium>div{flex:1;min-height:160px;background:white;border:1px solid #dce2e7;border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:center}
.podium>div:first-child{min-height:200px;order:2;border:3px solid var(--gold)}
.podium>div:nth-child(2){order:1}
.podium>div:nth-child(3){order:3}
.podium span{font-size:2.3rem}
.podium b,.podium small{display:block}
.finish .roster{max-width:650px;margin:auto;text-align:left}
@media(max-width:780px){.app{padding:0}
.shell,.shell.small{border-radius:0;min-height:100svh}
.home{grid-template-columns:1fr}
.home figure{order:-1;min-height:300px}
.home>section{padding:34px 24px}
.home h1{font-size:3.3rem}
.bar{padding:0 14px 0 145px}
.bar b{display:none}
.lobby{grid-template-columns:1fr;padding:28px 20px}
.code{font-size:3.8rem}
.qr{flex-direction:column;align-items:flex-start}
.qgrid{grid-template-columns:1fr}
.qgrid figure{min-height:300px}
.questionCover span{width:100px;height:100px;font-size:4rem}
.hostQ{padding:18px 14px}
.next{margin-top:20px}
.join{padding:32px 22px}
.phone{width:100%;padding:30px 14px}
.phone h2{font-size:clamp(2rem,10vw,2.8rem)}
.phoneAnswers{width:100%;max-width:560px;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.phoneAnswers button{aspect-ratio:1.08;border-radius:18px;font-size:2.2rem}
.finish{padding:35px 16px}
.finish h2{font-size:2.5rem}
.podium{gap:6px}
.podium>div{padding:8px}
.podium b{font-size:.9rem}
}


.backsite{position:absolute;left:18px;top:18px;z-index:5;color:#fff;text-decoration:none;font-weight:800}
.shell .backsite{color:#071b2d}
.quiz-nav-link{text-decoration:none}

.variantPicker{min-height:inherit;padding:clamp(48px,8vw,88px);display:flex;flex-direction:column;justify-content:center}
.variantPicker h2{font:700 clamp(2.3rem,5vw,4.5rem)/1 Georgia,serif;margin:18px 0}
.variantPicker>p{max-width:760px;margin:0;color:#52606d;font-size:1.08rem;line-height:1.55}
.variantGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
.variantCard{min-height:210px;border:1px solid #cbd5df;border-radius:22px;background:#fff;color:var(--navy);padding:30px;text-align:left;cursor:pointer;box-shadow:0 12px 28px #071b2d12;transition:transform .16s,box-shadow .16s,border-color .16s}
.variantCard:hover,.variantCard:focus-visible{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 18px 34px #071b2d25;outline:3px solid #e9c46a55}
.variantCard.accent{background:var(--navy);color:#fff;border-color:var(--navy)}
.variantCard span,.variantCard b,.variantCard small{display:block}
.variantCard span{margin-bottom:18px;color:#af7730;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.variantCard.accent span{color:var(--gold)}
.variantCard b{font:700 clamp(1.7rem,3vw,2.6rem)/1.1 Georgia,serif;margin-bottom:12px}
.variantCard small{max-width:430px;font-size:1rem;line-height:1.45;opacity:.8}
@media(max-width:780px){
.variantPicker{padding:76px 20px 32px}
.variantPicker h2{font-size:clamp(2.2rem,11vw,3.2rem)}
.variantGrid{grid-template-columns:1fr;gap:14px;margin:25px 0}
.variantCard{min-height:170px;padding:24px}
}


/* Safe RC 2026-10-06 */
.presenterLogin .helper,.join .helper{color:#64748b;line-height:1.45;margin:-4px 0 18px}
.joinNames{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.joinNames label{margin:0}
.timerStage{width:100%;height:100%;min-height:580px;display:grid;place-items:center;padding:36px}
.timerRing{--progress:1;position:relative;width:min(300px,68%);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--gold) calc(var(--progress)*360deg),#ffffff20 0);box-shadow:0 0 0 1px #ffffff1f,0 24px 70px #0005}
.timerRing::before{content:'';position:absolute;inset:14px;border-radius:50%;background:linear-gradient(145deg,#0b2033,#153f61);box-shadow:inset 0 0 34px #0005}
.timerRing span,.timerRing small{position:relative;z-index:1;color:white}
.timerRing span{font:700 clamp(5rem,11vw,9rem)/.85 Georgia,serif;letter-spacing:-.05em}
.timerRing small{margin-top:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.join select:invalid{color:#7b8792}
@media(max-width:780px){.joinNames{grid-template-columns:1fr}.timerStage{min-height:300px}.timerRing{width:min(210px,62%)}}