/* LAP website palette. Own quiz-stage and crew illustrations. */
:root{--lap-blue:#005dc6;--lap-navy:#00234a;--lap-cream:#f0ece2;--lap-yellow:#ffdf34;--lap-orange:#f24f01}
body{background:var(--lap-cream);color:var(--lap-navy)}
.logo{display:inline-flex;flex-direction:column;align-items:center;flex-shrink:0;letter-spacing:0;line-height:1}
.logo img{width:86px;height:42px;object-fit:contain}.logo small{font-size:7px;letter-spacing:1.3px;margin-top:4px}
button.primary,.primary-link{background:var(--lap-blue)}
.home h1,.score-pair b,.result-label{color:var(--lap-blue)}
.home h1 em{color:var(--lap-navy)}
.home-art{background:var(--lap-blue);border:3px solid var(--lap-navy);box-shadow:12px 12px 0 var(--lap-yellow)}
.character{object-fit:contain;filter:drop-shadow(0 6px 5px #001b3922)}
.character.wave{animation:crew-sway 2.5s ease-in-out infinite}
.art-characters .character{width:125px;height:185px}
.phone-page header{border-bottom:1px solid #00234a24;padding-bottom:18px}
.phone-page h1{color:var(--lap-navy)}
.phone-page .avatars{gap:10px}.avatar-choice{background:#fffaf0;border:2px solid #00234a18;border-radius:16px;padding:10px 2px 9px;font-size:9px;min-width:0;transition:transform .16s,border-color .16s}
.avatar-choice .character{width:67px;height:98px}.avatar-choice:hover{transform:translateY(-3px)}
.avatar-choice.selected{background:#fff8d5;border-color:var(--lap-blue);box-shadow:0 4px 0 var(--lap-blue)}
.avatar-choice span{font-weight:700}.badge{background:#ffdf3466;color:var(--lap-navy)}
.phone-status>.character{width:160px;height:230px}.timer-fill{background:var(--lap-blue)}
.screen-page{background:var(--lap-navy);padding:16px}
.stage{background:radial-gradient(ellipse at 50% 16%,#1675df 0,#005dc6 38%,#003a7c 69%,#00234a 100%);border:1px solid #73a9e8;box-shadow:inset 0 0 70px #00234a80}
.stage:before{background:linear-gradient(115deg,transparent 7%,#f0ece214 8%,#f0ece22b 12%,transparent 26%),linear-gradient(245deg,transparent 7%,#f0ece214 8%,#f0ece22b 12%,transparent 26%);pointer-events:none}
.stage:after{content:'';position:absolute;bottom:-80px;left:-10%;width:120%;height:230px;z-index:-1;transform:perspective(350px) rotateX(45deg);background:repeating-linear-gradient(90deg,transparent 0 79px,#f0ece21a 80px 81px),repeating-linear-gradient(0deg,transparent 0 49px,#f0ece21a 50px 51px);border-top:2px solid #ffdf3480;pointer-events:none}
.stage-arch{position:absolute;left:17%;right:17%;top:73px;bottom:50px;border:2px solid #f0ece244;border-radius:48% 48% 5px 5px;z-index:-1;box-shadow:0 0 0 13px #005dc630,0 0 0 15px #f0ece21a,inset 0 0 35px #89bdff30;pointer-events:none}
.stage-head{position:relative;z-index:1}.stage-head .logo{background:var(--lap-cream);padding:8px 13px 9px;border-radius:7px;transform:rotate(-4deg);color:var(--lap-navy);box-shadow:3px 4px 0 #00234a55}
.stage-head .logo img{width:72px;height:34px}.stage-head .logo small{font-size:6px;letter-spacing:1px}
.stage-head .stage-tag{border:1px solid #f0ece277;border-radius:30px;padding:9px 16px;letter-spacing:2px;background:#00234a44}
.stage-demo{background:var(--lap-yellow);color:var(--lap-navy);border-radius:30px;padding:8px 12px;letter-spacing:1px}
.stage-title{color:var(--lap-cream);text-shadow:0 5px 0 #00234a55;font-weight:900;letter-spacing:-2px}
.stage-title em{color:var(--lap-yellow);font-style:italic;text-shadow:0 3px 0 #00234a88}
.stage-kicker{color:var(--lap-cream);font-size:11px;letter-spacing:3px;font-weight:700}
.stage-copy,.join-url,.stage-explanation{color:var(--lap-cream)}
.qr-box{border:4px solid var(--lap-yellow);background:#fff;border-radius:12px;box-shadow:7px 7px 0 #00234a70;padding:7px}
.qr-box span{color:var(--lap-navy);font-size:10px;padding:5px 0 1px}
.podium-slot{max-width:160px}.podium-slot .character{width:102px;height:147px;margin-bottom:-13px}
.podium-slot.empty .character{opacity:.7;filter:saturate(.85)}
.podium{background:var(--lap-cream);color:var(--lap-navy);border:1px solid #00234a;border-top:6px solid var(--lap-yellow);box-shadow:5px 7px 0 #00193470;border-radius:3px 3px 12px 12px;padding:7px 6px 10px}
.podium-logo{display:block;width:33px;height:17px;object-fit:contain;margin:0 auto 4px;opacity:.9}
.podium-name{font-size:12px}.podium-score{color:var(--lap-blue);font-size:25px}.podium-status{color:#365574}
.podiums:after{background:linear-gradient(#156dcc,#00234a);border-top-color:var(--lap-yellow);height:18px}
.podium-slot.winner .podium{background:var(--lap-yellow);border-top-color:#fff}.podium-slot.winner .podium-score{color:var(--lap-navy)}
.podium-slot.answered .podium{border-top-color:#8ae09b}
.stage-answer{background:#00234ae8;border:1px solid #72a6e5;border-radius:12px;box-shadow:0 4px 0 #001a3880}
.stage-answer b{background:var(--lap-cream);color:var(--lap-navy);border:0;border-radius:50%;width:34px;height:34px}
.stage-answer:nth-child(2) b{background:#ffb58e}.stage-answer:nth-child(3) b{background:var(--lap-yellow)}.stage-answer:nth-child(4) b{background:#b0d5a3}
.stage-answer.correct{background:#155b34;border-color:#b0edbe}.stage-answer.correct b{background:#b0edbe;color:#124226}
.stage .timer-fill{background:var(--lap-yellow)}.stage .timer-track{background:#00234a80;height:8px}.stage .countdown{color:var(--lap-yellow)}
.stage-footer{color:#f0ece2bb}.stage-progress{color:var(--lap-yellow);font-weight:700;letter-spacing:1px}
.host-top{background:var(--lap-cream)}.screen-tools button{background:var(--lap-navy)}
.host-preview .podium-slot .character{width:90px;height:130px}
@keyframes crew-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(min-width:1500px){.screen-page .podium-slot .character{width:130px;height:188px}.screen-page .podium{min-height:118px}.podium-logo{width:42px;height:21px}}
@media(min-width:641px) and (max-height:800px){.screen-page .stage{min-height:calc(100vh - 32px)}.screen-page .podium-slot .character{width:84px;height:121px}.screen-page .podium{min-height:85px}.screen-page .stage-title{font-size:50px}.screen-page .stage-center{padding-top:8px}.screen-page .stage-kicker{margin-bottom:10px}.screen-page .lobby-core{margin:6px auto}.screen-page .qr-box{max-width:135px}.screen-page .stage-copy{font-size:14px}}
@media(max-width:640px){.logo img{width:72px;height:35px}.stage-head .logo{padding:6px 9px}.stage-head .logo img{width:49px;height:24px}.stage-head .logo small{font-size:4px}.stage-head .stage-tag{font-size:8px;letter-spacing:1px;padding:7px 9px}.stage-demo{font-size:7px;padding:7px 8px}.stage-arch{left:8%;right:8%;top:72px}.stage-kicker{font-size:9px;letter-spacing:1.5px}.podium-slot .character,.host-preview .podium-slot .character{width:50px;height:76px}.podium-logo{width:23px;height:12px}.podium{padding:5px 2px 8px}.podium-name{font-size:9px}.stage-answer b{width:25px;height:25px}.art-characters .character{width:94px;height:144px}.avatar-choice .character{width:60px;height:90px}.screen-page{padding:8px}.stage-title,.host-preview .stage-title{font-size:32px}.stage-explanation{line-height:1.5}}
@media(prefers-reduced-motion:reduce){.character.wave{animation:none}}
.screen-master{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px 200px 12px 16px;min-height:72px;background:var(--lap-navy);color:var(--lap-cream);border-radius:0 0 12px 12px}.screen-master>span{font-size:10px;letter-spacing:1px}.screen-master .primary{background:var(--lap-yellow);color:var(--lap-navy)}.screen-page:has(.screen-master) .stage{min-height:calc(100dvh - 112px)}.screen-master button:disabled{opacity:.55}@media(max-width:640px){.screen-master{padding:14px 8px 60px;flex-wrap:wrap}.screen-page:has(.screen-master) .stage{min-height:620px}}
@media(min-width:641px) and (max-height:800px){.screen-page:has(.screen-master) .stage-center{padding-top:0}.screen-page:has(.screen-master) .stage-title{font-size:42px}.screen-page:has(.screen-master) .stage-kicker{margin-bottom:6px}.screen-page:has(.screen-master) .qr-box{max-width:115px}.screen-page:has(.screen-master) .podium-slot .character{width:70px;height:100px}.screen-page:has(.screen-master) .podium{padding:5px 5px 6px;min-height:75px}.screen-page:has(.screen-master) .podium-score{font-size:20px}.screen-page:has(.screen-master) .stage-copy{font-size:13px}.screen-page:has(.screen-master) .stage-question{font-size:30px}.screen-page:has(.screen-master) .stage-answer{font-size:16px;padding:10px;min-height:54px}}
/* Live answers, standings and coffee-show effects. */
.crew-figure{position:relative;width:100%;isolation:isolate}.rank-number{color:#526b82;font-size:10px}.podium-slot.leader .podium{border-top-color:var(--lap-yellow);box-shadow:0 0 18px #ffdf3450,5px 7px 0 #00193470}.leader-label{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--lap-yellow);color:var(--lap-navy);font-size:9px;font-weight:900;letter-spacing:.5px;padding:6px 9px;border-radius:20px;z-index:6}.podiums{margin-top:30px}.podium-slot.answer-right .podium{background:#d9f3cf;border-color:#7dde90;border-top-color:#49b366}.podium-slot.answer-wrong .podium{background:#ffe0cf;border-color:#ff986b;border-top-color:#e86337}.answer-lock{font-size:11px;font-weight:800;color:#60718a;margin-top:5px;min-height:24px;padding:5px 2px;border-radius:5px;background:#00234a0a;font-variant-numeric:tabular-nums}.answer-lock.locked{background:var(--lap-blue);color:white}.answer-right .answer-lock{background:#246e36}.answer-wrong .answer-lock{background:#a43f1c}.podium-status{font-size:10px;height:auto;min-height:16px;font-weight:700}.crew-figure>.character{position:relative;z-index:2}.stage[data-phase=finished] .podium-slot.winner .crew-figure{padding-bottom:24px}.coffee-spill{position:absolute;inset:0;z-index:4;pointer-events:none}.fx-cup{position:absolute;left:58%;top:-28px;width:35px;height:39px;background:#f0ece2;border:3px solid #005dc6;border-radius:3px 3px 10px 10px;transform:rotate(-105deg);opacity:0}.fx-cup:before{content:'';position:absolute;left:-5px;right:-5px;top:-4px;border-top:5px solid #00234a;border-radius:3px}.fx-cup img{width:23px;position:absolute;top:10px;left:3px}.coffee-stream{position:absolute;left:50%;top:0;width:7px;height:45%;background:#6c351b;border-radius:50%;transform-origin:top;opacity:0}.coffee-spill i{position:absolute;left:calc(30% + var(--i)*8%);top:20%;width:5px;height:10px;background:#80421f;border-radius:50%;opacity:0}.coffee-splat{position:absolute;left:34%;top:19%;width:30%;height:11%;border-radius:60% 30% 40% 25%;background:#754020;transform:rotate(-12deg);opacity:.75}.play-effects .fx-cup{animation:cup-pour 1.6s ease both}.play-effects .coffee-stream{animation:coffee-pour 1.5s ease both}.play-effects .coffee-spill i{animation:coffee-drop 1s calc(.45s + var(--i)*.06s) ease both}.play-effects .coffee-splat{animation:splat-in 1s both}.play-effects .answer-wrong .character{animation:coffee-duck .8s .5s ease}.correct-burst{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:center;color:var(--lap-yellow);font-size:23px;text-shadow:0 0 12px #ffdf34;z-index:3}.correct-burst span{align-self:start}.play-effects .correct-burst{animation:sparkle-win 1.1s ease both}.bean-throne{position:absolute;bottom:0;left:12%;right:12%;height:48px;z-index:1;border-radius:50%;background:radial-gradient(ellipse,#995729,#513017);box-shadow:0 0 22px #ffdf3455}.bean-throne i,.bean-confetti i{position:absolute;background:#99562c;border:2px solid #40291c;border-radius:50%;width:19px;height:12px;transform:rotate(calc(var(--i)*31deg))}.bean-throne i:after,.bean-confetti i:after{content:'';position:absolute;left:45%;top:0;height:100%;border-left:2px solid #452c1d;transform:rotate(15deg)}.bean-throne i{left:calc(mod(var(--i), 6)*15%);top:calc(round(down, var(--i)/6)*12px)}.bean-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.bean-confetti i{left:calc(var(--i)*4.7%);top:-25px;opacity:0}.play-effects .bean-confetti i{animation:bean-fall 3s calc(var(--i)*.09s) ease-in both}.stage[data-phase=finished] .stage-center{z-index:1}.stage[data-phase=finished] .leader-label{font-size:11px}.play-effects .podium-score{animation:score-pop .5s ease}
@keyframes cup-pour{0%{opacity:0;transform:translateY(-25px) rotate(-20deg)}20%,65%{opacity:1;transform:translateY(0) rotate(-105deg)}100%{opacity:0;transform:translateY(-25px) rotate(-20deg)}}
@keyframes coffee-pour{0%,22%{opacity:0;transform:scaleY(0)}35%,70%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes coffee-drop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(75px)}}
@keyframes splat-in{0%,50%{opacity:0;transform:scale(0)}100%{opacity:.75;transform:scale(1) rotate(-12deg)}}
@keyframes coffee-duck{0%,100%{transform:translateY(0)}50%{transform:translateY(8px) rotate(-7deg)}}
@keyframes sparkle-win{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes bean-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(650px) rotate(540deg)}}
@keyframes score-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@media(max-width:640px){.leader-label{font-size:7px;padding:4px}.answer-lock{font-size:8px}.podium-status{font-size:8px}.rank-number{font-size:8px}.fx-cup{width:25px;height:29px}.fx-cup img{width:17px;left:1px}.stage[data-phase=finished] .leader-label{font-size:7px}.bean-throne{left:0;right:0}.bean-throne i{width:12px;height:8px}}
@media(prefers-reduced-motion:reduce){.fx-cup,.coffee-stream,.coffee-spill i,.bean-confetti{display:none}.coffee-splat{opacity:.75}.correct-burst{opacity:1}}

.stage[data-phase=question] .podium-slot.answered .podium{border-top-color:#7abfff}
.restart-confirm{max-width:440px;width:calc(100% - 32px);border:0;border-radius:18px;padding:28px;background:var(--lap-cream);color:var(--lap-navy);box-shadow:0 20px 80px #0006}.restart-confirm::backdrop{background:#00234aaa}.restart-confirm h2{font-size:24px}.restart-confirm p{margin:16px 0 22px;line-height:1.6;font-size:15px}.restart-confirm .row{justify-content:flex-end}