:root{color:#f4f7fb;background:#0b1020;font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-height:100vh;margin:0}button,input,select{font:inherit;border-radius:10px;padding:.75rem 1rem}button{cursor:pointer;background:var(--accent);color:var(--button-text,white);border:0;font-weight:800}button:disabled{opacity:.5;cursor:not-allowed}input,select{background:var(--input-bg);color:inherit;border:1px solid var(--border)}.shell{--background:#492577;--text:#fff;--accent:#8648cf;--button-text:white;--input-bg:#35135f;--border:#8056a5;--card:#35135f;--muted:#e4d8f0;background:var(--background);min-height:100vh;color:var(--text);padding:2.5rem max(4vw,1rem)}.host-shell{flex-direction:column;gap:clamp(.35rem,.8vh,.75rem);height:100dvh;min-height:0;padding:clamp(.5rem,1.5vh,1.25rem) clamp(.6rem,2vw,2rem);display:flex;overflow:hidden}.setup-shell{overflow:hidden auto}.host-shell>.topbar{flex:none;width:100%;min-height:0;margin-bottom:0}.host-shell>.topbar h2{margin:0;font-size:clamp(1rem,2.2vw,1.6rem)}.host-shell>.session-meta{flex:none;width:100%;margin:0;font-size:clamp(.7rem,1vw,.9rem)}.host-shell>.question-card{flex:auto;width:100%;min-height:0;padding:clamp(.55rem,1.2vw,1.1rem);overflow:hidden}.host-shell>.controls{flex:none;gap:clamp(.35rem,.8vh,.7rem);width:100%;max-height:21vh;margin:0;padding:clamp(.55rem,1vw,.9rem);overflow:hidden}.host-shell .question-card{grid-template-rows:auto auto minmax(0,1fr);gap:clamp(.25rem,.7vh,.65rem)}.host-shell .question-card h1{margin:0;font-size:clamp(1.15rem,3.2vw,2.8rem)}.host-shell .eyebrow{margin:0;font-size:clamp(.6rem,.9vw,.8rem)}.host-shell .question-media{object-fit:contain;background:#0002;max-height:18vh}.host-shell .answers{gap:clamp(.35rem,.7vw,.7rem);min-height:0}.host-shell .answer-media{object-fit:contain;background:#0002;max-height:8vh}.host-shell .answer{min-height:0;padding:clamp(.4rem,.7vw,.7rem);font-size:clamp(.75rem,1.4vw,1.1rem)}.host-shell .controls h2{margin:0;font-size:clamp(1rem,2vw,1.5rem)}.host-shell .controls .notice{padding:clamp(.35rem,.7vh,.65rem)}.host-shell .controls button{padding:clamp(.45rem,.8vh,.7rem) 1rem}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;max-width:1100px;margin:0 auto;padding:1.5rem;box-shadow:0 16px 50px #0003}.host-shell>.card{border-radius:clamp(10px,1.2vw,18px);max-width:none}.stack{gap:1rem;display:grid}.topbar{justify-content:space-between;align-items:center;gap:1rem;max-width:1100px;margin:0 auto 2rem;display:flex}h1,h2,h3{line-height:1.15}label{gap:.4rem;font-weight:700;display:grid}.muted{color:var(--muted)}.stage{text-align:center;place-items:center;min-height:400px;display:grid}.host-shell .stage{flex:auto;min-height:0;padding:clamp(.75rem,2vw,1.5rem)}.host-shell .stage svg{width:min(22vh,180px);height:min(22vh,180px)}.qr-placeholder{background:repeating-conic-gradient(#111 0 25%, #fff 0 50%) 50% / 24px 24px;color:#111;border:8px solid #fff;place-items:center;width:clamp(100px,15vh,140px);height:clamp(100px,15vh,140px);margin:clamp(.5rem,1.5vh,1.5rem) auto;font-size:2rem;font-weight:900;display:grid}.session-meta{max-width:1100px;color:var(--muted);justify-content:space-between;margin:-1rem auto 1rem;font-size:.9rem;display:flex}.question-card{gap:1rem;display:grid}.question-media{object-fit:contain;background:#0002;border-radius:12px;width:100%;max-height:320px}.answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.answer{text-align:left;background:color-mix(in srgb, var(--accent) 22%, var(--card));border:1px solid var(--border);min-height:76px;padding:1rem;font-size:1.1rem}.answers .answer{color:#fff;background:var(--answer-color,color-mix(in srgb, var(--accent) 22%, var(--card)));border-color:#ffffff35;align-items:center;gap:.9rem;display:flex}.answers .answer .answer-shape{background:#fff;width:1.6rem;height:1.6rem}.answers .answer.selected{outline-color:#ffe18a}.answer-media{object-fit:cover;border-radius:9px 9px 0 0;width:calc(100% + 2rem);max-height:180px;margin:-1rem -1rem .8rem;display:block}.answer-overlay{z-index:20;background:color-mix(in srgb, var(--background) 92%, black);cursor:pointer;place-items:center;padding:4vw;animation:none;display:grid;position:fixed;inset:0}.answer-overlay-content{border:3px solid var(--accent);background:var(--card);text-align:center;border-radius:24px;width:min(92vw,1100px);max-height:88vh;overflow:hidden;box-shadow:0 25px 100px #0009}.overlay-image-frame{background:#000;height:62vh;position:relative}.overlay-image-frame img{object-fit:contain;width:100%;height:100%;display:block}.overlay-image-status{color:#e4d8f0;place-items:center;font-size:1rem;display:grid;position:absolute;inset:0}.answer-overlay-content .overlay-caption{justify-content:center;align-items:center;gap:1rem;max-height:25vh;padding:1.5rem;display:flex;overflow-y:auto}.answer-overlay-content h2{margin:0;font-size:clamp(2rem,6vw,5rem)}.overlay-letter{background:var(--accent);width:3.5rem;height:3.5rem;color:var(--button-text);border-radius:50%;flex:none;place-items:center;font-size:1.75rem;font-weight:900;display:grid}@keyframes overlay-enter{0%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}.answer-overlay.exiting{animation:.65s cubic-bezier(.4,0,.8,.2) forwards overlay-shrink}@keyframes overlay-shrink{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.24)}}.answer.correct{color:#fff;background:#14734d}.answer.selected{outline:3px solid #ffe18a}.controls{margin-top:1rem}.controls .secondary{background:color-mix(in srgb, var(--muted) 25%, var(--card))}.notice{background:color-mix(in srgb, var(--accent) 16%, var(--card));border-radius:10px;padding:.8rem 1rem}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.8rem;font-weight:800}.big-number{text-align:center;font-size:clamp(3rem,10vw,7rem);font-weight:900}.distribution-row{grid-template-columns:140px 1fr;align-items:center;gap:.75rem;display:grid}.bar{background:var(--accent);border-radius:5px;min-width:5px;height:22px}.leaderboard{gap:.5rem;display:grid}.leaderboard-row{border:1px solid var(--border);background:color-mix(in srgb, var(--accent) 12%, var(--card));border-radius:10px;grid-template-columns:45px 1fr auto;align-items:center;gap:1rem;padding:.9rem 1rem;display:grid}.leaderboard-row:first-child{outline:2px solid var(--accent)}@media (width<=650px){.shell{padding:1.25rem .75rem}.topbar{flex-direction:column;align-items:flex-start}.answers{grid-template-columns:1fr}}.host-presentation{--stage-purple:#46178f;--text:#fff;--background:#492577;--card:#35135f;--accent:#8648cf;--button-text:#fff;isolation:isolate;background:radial-gradient(at 48% 32%,#86659a55,#0000 65%),linear-gradient(125deg,#553877,#42216e 65%,#371260);grid-template-rows:auto minmax(0,1fr) minmax(150px,28vh) auto;gap:clamp(8px,1.2vh,16px);padding:clamp(10px,1.5vh,20px);display:grid;position:relative}.host-presentation:before{content:"";z-index:-1;pointer-events:none;border:24px solid #ffffff04;position:absolute;inset:12% 14% 26%;transform:rotate(-3deg);box-shadow:0 0 0 18px #230e3914,inset 0 0 80px #20093b30}.presentation-header{grid-template-columns:1fr minmax(0,3fr) 1fr;align-items:start;gap:12px;display:grid}.presentation-header h1{color:#292929;text-align:center;overflow-wrap:anywhere;background:#fff;border-radius:4px;grid-column:2;justify-self:center;margin:0;padding:clamp(14px,2vh,28px) clamp(22px,3vw,60px);font-size:clamp(22px,3.2vw,54px);line-height:1.15;box-shadow:0 3px #0002}.presentation-action{color:#fff;background:#272331;border:3px solid #1b1529;border-radius:6px;justify-content:center;justify-self:end;align-items:center;gap:10px;padding:12px 16px;font-size:clamp(12px,1.15vw,20px);line-height:1.25;display:flex;box-shadow:inset 0 -3px #0003}.presentation-action:hover{background:#393143}.presentation-action:focus-visible{outline-offset:4px;outline:3px solid #fff}.presentation-stage{grid-template-columns:minmax(90px,1fr) minmax(0,6fr) minmax(90px,1fr);align-items:center;gap:24px;min-height:0;display:grid}.presentation-media{place-items:center;height:100%;min-height:0;display:grid}.question-image-button{cursor:zoom-in;background:0 0;border-radius:0;width:100%;height:100%;min-height:0;padding:0;display:block}.question-image-button img{object-fit:contain;width:100%;height:100%;min-height:0;display:block}.question-image-button:focus-visible{outline-offset:4px;outline:3px solid #fff}.question-image-overlay{z-index:30;background:#140923f5;position:fixed;inset:0}.question-image-close{color:#fff;cursor:zoom-out;background:0 0;border-radius:0;grid-template-rows:minmax(0,1fr) auto;gap:12px;width:100%;height:100%;padding:clamp(12px,2vw,32px);display:grid}.question-image-close>img{object-fit:contain;width:100%;height:100%;min-height:0;display:block}.question-image-close>span{text-align:center;font-size:14px;font-weight:600}.question-image-close>span>span{margin-left:12px;font-size:22px}.question-image-close:focus-visible{outline-offset:-6px;outline:3px solid #fff}.stage-stat{flex-direction:column;align-items:center;gap:8px;display:flex}.stat-circle{aspect-ratio:1;background:var(--stage-purple);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;width:clamp(74px,7.5vw,140px);font-size:clamp(34px,4vw,76px);font-weight:900;line-height:1;display:grid}.response-stat .stat-circle{width:clamp(64px,5.5vw,110px)}.stat-label{background:var(--stage-purple);text-align:center;border-radius:6px;max-width:160px;padding:2px 8px;font-size:clamp(11px,1.2vw,20px);font-weight:800;line-height:1.25}.question-placeholder{color:#ffffff30;font-size:clamp(80px,20vh,250px);font-weight:900}.presentation-answers{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(6px,.7vw,12px);min-height:0;display:grid}.answer-color-0{--answer-color:#e8173b}.answer-color-1{--answer-color:#1469cf}.answer-color-2{--answer-color:#d6a000}.answer-color-3{--answer-color:#258b0b}.presentation-answer{background:var(--answer-color);color:#fff;border:2px solid #ffffff15;border-radius:4px;align-items:center;gap:clamp(12px,1.4vw,26px);min-width:0;min-height:0;padding:clamp(10px,1.5vw,26px);font-size:clamp(18px,2vw,36px);font-weight:800;line-height:1.2;display:flex;box-shadow:inset 0 -5px #0002}.presentation-answer.has-answer-media{padding-block:0}.answer-label{overflow-wrap:anywhere}.presentation-answer>img{object-fit:contain;border-radius:0;flex-shrink:0;align-self:stretch;width:clamp(64px,9vw,180px);height:100%;max-height:none}.answer-shape{background:#fff;flex:none;width:clamp(22px,2.5vw,46px);height:clamp(22px,2.5vw,46px);display:inline-block}.shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-diamond{transform:rotate(45deg)scale(.78)}.shape-circle{border-radius:50%}.answer-concealed{box-shadow:none;background:#ffffff08;border-color:#ffffff0b}.presentation-answer.is-incorrect{opacity:.45}.presentation-answer.is-correct{outline-offset:-4px;outline:3px solid #fff}.answer-result{margin-left:auto;font-size:1.2em}.presentation-footer{color:#e4d8f0;justify-content:space-between;align-items:center;gap:12px;font-size:clamp(10px,.85vw,14px);line-height:1.2;display:flex}.presentation-footer span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.presentation-footer span:first-child,.presentation-footer span:last-child{flex-shrink:0}.presentation-results{text-align:center;width:min(100%,750px);max-height:100%;padding:16px;overflow-y:auto}.presentation-results h2{margin:0 0 16px;font-size:clamp(18px,2vw,32px)}.result-chart{justify-content:center;align-items:end;gap:clamp(20px,3vw,50px);display:flex}.result-column{flex-direction:column;align-items:center;gap:8px;width:18%;font-size:clamp(20px,2vw,32px);display:flex}.result-bar{background:var(--answer-color);border-radius:4px 4px 0 0;width:100%}.result-column .answer-shape{width:20px;height:20px}.presentation-results p{margin:14px 0 0}.result-names{color:#e4d8f0;font-size:14px}@media (width<=800px){.host-presentation{grid-template-rows:auto minmax(0,1fr) minmax(150px,30vh) auto;padding:10px}.presentation-header{grid-template-columns:minmax(0,1fr) auto}.presentation-header h1{grid-column:1;justify-self:stretch;padding:14px;font-size:clamp(18px,3vw,28px)}.presentation-action{max-width:160px;padding:9px;font-size:12px}.presentation-stage{grid-template-columns:64px minmax(0,1fr) 64px;gap:10px}.stat-circle,.response-stat .stat-circle{width:60px;font-size:30px}.stat-label{font-size:10px}.presentation-answer{gap:10px;padding:10px;font-size:clamp(14px,2.6vw,20px)}.presentation-answer>img{width:clamp(56px,12vw,110px)}}@media (height<=550px) and (width>=801px){.host-presentation{grid-template-rows:auto minmax(0,1fr) minmax(110px,28vh) auto;gap:6px;padding:8px}.presentation-header h1{padding:10px 24px;font-size:24px}.presentation-action{padding:8px 12px}.presentation-answer{padding:8px 14px;font-size:18px}.stat-circle{width:64px;font-size:32px}.result-chart{gap:15px}.result-bar{max-height:55px}.presentation-results{padding:4px}.presentation-results h2,.presentation-results p{margin:4px 0}}.host-presentation.welcome-screen{grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(16px,3vw,48px)}.welcome-topbar,.welcome-footer{justify-content:space-between;align-items:center;gap:16px;display:flex}.welcome-topbar>span{letter-spacing:.04em;font-size:clamp(16px,1.5vw,24px);font-weight:900}.welcome-topbar select{color:#fff;background:#35135f;border-color:#ffffff40}.welcome-content{text-align:center;place-self:center;width:min(100%,1060px);max-height:100%;padding:12px;overflow-y:auto}.welcome-kicker{color:#e4d8f0;text-transform:uppercase;letter-spacing:.15em;margin:0 0 14px;font-size:clamp(12px,1.2vw,18px);font-weight:800}.welcome-title{color:#292929;background:#fff;border-radius:4px;margin:0 0 clamp(20px,4vh,40px);padding:18px 36px;font-size:clamp(28px,4.5vw,64px);display:inline-block;box-shadow:0 4px #0002}.lobby-panel{text-align:left;justify-content:center;align-items:center;gap:clamp(24px,5vw,80px);display:flex}.lobby-qr{color:#35135f;text-align:center;background:#fff;border-radius:6px;flex-shrink:0;padding:20px;box-shadow:0 6px #0002}.lobby-qr svg{width:clamp(160px,22vw,260px);height:auto;display:block}.lobby-qr p{max-width:260px;margin:12px 0 0;font-weight:800}.lobby-details{min-width:0;max-width:470px}.lobby-details h2{margin:0;font-size:clamp(22px,2.6vw,36px)}.lobby-details>p{color:#e4d8f0}.lobby-link{color:#fff;overflow-wrap:anywhere;font-size:clamp(13px,1.3vw,18px);display:block}.lobby-count strong{color:#fff;margin-right:8px;font-size:40px}.welcome-button{color:#35135f;background:#fff;border-radius:5px;padding:14px 24px;font-size:clamp(16px,1.5vw,22px);box-shadow:0 5px #0003}.welcome-button:hover{background:#f0e5ff}.welcome-button:focus-visible,.lobby-link:focus-visible{outline-offset:5px;outline:3px solid #ffd84c}.welcome-button>span{margin-left:16px}.lobby-players{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px;display:flex}.lobby-players>span{overflow-wrap:anywhere;background:#35135f;border-radius:5px;max-width:100%;padding:8px 16px;font-weight:700}.welcome-shapes{gap:10px;display:flex}.welcome-shapes>span{background:var(--answer-color);border-radius:3px;place-items:center;width:42px;height:36px;display:grid;box-shadow:inset 0 -3px #0002}.welcome-shapes .answer-shape{width:17px;height:17px}.welcome-footer{color:#e4d8f0;font-size:13px}.welcome-trophy{color:#ffd84c;margin:-10px 0 20px;font-size:clamp(40px,7vh,75px);line-height:1}.welcome-leaderboard{max-width:800px;margin:0 auto 28px}.welcome-leaderboard .leaderboard-row{text-align:left;background:#35135f;border-color:#ffffff30;grid-template-columns:48px minmax(0,1fr) auto}.welcome-leaderboard .leaderboard-row>span{overflow-wrap:anywhere}.welcome-leaderboard .leaderboard-row:first-child{color:#35135f;background:#fff;border-left:8px solid #d6a000;outline:0;font-size:1.2em}@media (width<=650px){.host-presentation.welcome-screen{padding:14px}.welcome-topbar select{padding:6px}.welcome-content{padding:12px 0}.welcome-title{margin-bottom:20px;padding:12px 20px}.lobby-panel{text-align:center;flex-direction:column;gap:20px}.lobby-qr{padding:12px}.lobby-qr svg{width:min(42vw,200px)}.lobby-qr p{font-size:13px}.lobby-count{margin:8px 0}.welcome-leaderboard .leaderboard-row{grid-template-columns:25px minmax(0,1fr) auto;gap:8px;padding:12px 8px;font-size:14px}}.host-preferences{align-items:center;gap:12px;display:flex}.sound-toggle{color:#fff;background:#35135f;border:1px solid #ffffff40;border-radius:6px;padding:8px 12px;font-size:13px}.sound-toggle:hover{background:#50257d}.sound-toggle:focus-visible{outline-offset:3px;outline:3px solid #fff}.sound-toggle[aria-pressed=false]{color:#d4c3e5}.presentation-sound{grid-area:1/1}@media (width<=800px){.presentation-header{grid-template-rows:auto auto}.presentation-sound{grid-area:2/1/auto/-1}.presentation-header h1,.presentation-action{grid-row:1}.host-preferences{gap:6px}.sound-toggle{padding:6px 8px;font-size:11px}}
