/* Game-show layer. The case content stays readable; imagery is decorative. */
:root{--bg:#080c1e;--surface:#101a36;--raised:#1b2d56;--ink:#f5f7ff;--muted:#acbad8;--gold:#ffd36c;--blue:#9bc8ff;--line:#30466f;--success:#75f1c0;--danger:#ffadb8}
body{background:radial-gradient(ellipse at 16% -5%,#183272aa,transparent 44%),radial-gradient(ellipse at 100% 25%,#4a277833,transparent 44%),#080c1e;background-attachment:fixed}
header{background:#090f22dc;border-bottom:1px solid #354b783d;backdrop-filter:blur(16px)}header .inner{max-width:1540px}.brand{font-weight:800;letter-spacing:-.035em}.brand img{filter:drop-shadow(0 0 12px #ffd36c44)}.toplinks a{color:#d9e4ff}
main{max-width:1440px;padding-top:2rem}h1,h2{font-weight:800}h1{letter-spacing:-.045em}.title-dot{color:var(--gold)}.eyebrow{font-size:.7rem;letter-spacing:.2em}.studio-intro{position:relative;padding:1.5rem 0 .2rem}.studio-intro h1{font-size:clamp(2.4rem,5vw,4.2rem)}.studio-intro .muted{max-width:650px}
button,a.button{border-radius:11px;transition:transform .14s ease,background .14s ease,border-color .14s ease}button.primary,a.button.primary{background:linear-gradient(140deg,#ffe5a2,#ffc653);border-color:#ffdb83;box-shadow:0 4px 0 #9c6f1f,0 6px 20px #efad2220;color:#211a12}button.primary:hover,a.button.primary:hover{background:linear-gradient(140deg,#fff0c8,#ffd064);transform:translateY(-1px)}button.primary:active,a.button.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #9c6f1f}.button:focus-visible,button:focus-visible{outline:3px solid #fff0b1;outline-offset:4px}
.sound-button{white-space:nowrap;color:#c8d7f5!important;font-size:.82rem!important}.sound-button span{font-size:1.15rem;color:var(--gold)}.sound-button[aria-pressed=true]{background:#183d3a!important;border-color:#64bea5;color:#b3ffe6!important}.sound-button[aria-pressed=true] span{color:#88ffd6}
.quick-steps{gap:1.5rem}.quick-steps b{background:#22376b;border:1px solid #4d6595;color:#ffe099}.quick-steps li{font-size:.92rem}.board-cards{gap:1.5rem}.board-card{padding:0;overflow:hidden;border:1px solid #49639366;border-top:0;background:linear-gradient(140deg,#162447,#101831);box-shadow:0 18px 50px #0004}.board-card.maroon{border-top:0}.course-art{position:relative;height:235px;overflow:hidden;border-bottom:1px solid #365d9155}.course-art img{width:100%;height:100%;object-fit:cover;object-position:center 48%;transition:transform .7s ease}.course-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#14213fff,transparent 55%)}.board-card:hover .course-art img{transform:scale(1.03)}.art-tag{position:absolute;bottom:1.2rem;left:1.65rem;z-index:1;background:#0a142abf;color:#d7e9ff;border:1px solid #6993c766;border-radius:30px;padding:.35rem .7rem;font-size:.68rem;letter-spacing:.16em;font-weight:750}.course-card-content{padding:1.5rem 1.7rem 1.6rem}.course-card-content .eyebrow{display:none}.board-card h2{font-size:1.8rem;max-width:none;margin-bottom:1rem}.board-card .topics{margin:.5rem 0 1.25rem}.board-card .launch>.primary{min-height:53px;font-size:1rem}.board-secondary{margin:1.2rem 0}.board-card .helper{font-size:.82rem;margin-bottom:0}.topics summary{color:#beccec}.topics ul{margin:.5rem 0}.try-note{padding:.9rem 0}.resume-section:has(>summary){background:#11263a;border-color:#31536c}
.entry-art{margin:-2rem -2rem 1.5rem;height:180px;overflow:hidden;position:relative}.entry-art img{width:100%;height:100%;object-fit:cover;object-position:center 40%}.entry-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#16243b,transparent 50%)}.teacher-entry{overflow:hidden}.entry .card{border-color:#3b5480}.entry h1{font-size:3.8rem}
.room-stage{position:relative;isolation:isolate;min-height:156px;align-items:center;overflow:hidden;padding:1.5rem 1.8rem;background:linear-gradient(110deg,#172c58,#0a122c);border:1px solid #3a579366;border-radius:16px;box-shadow:0 12px 40px #0003}.room-stage>div:not(.room-art){position:relative;z-index:2}.room-stage h1{max-width:760px;text-shadow:0 2px 12px #0009}.room-art{position:absolute;right:4rem;inset-block:0;width:430px;z-index:0;opacity:.55;pointer-events:none}.room-art img{width:100%;height:100%;object-fit:cover;object-position:center 48%;mask-image:linear-gradient(90deg,transparent,#000 35%,#000 75%,transparent)}.room-stage:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#112346 20%,transparent 80%);pointer-events:none}.code-box{padding:.7rem 1rem;background:#08122dc9;border:1px solid #55709d;border-radius:12px;backdrop-filter:blur(8px)}.code-value{font-size:1.75rem;letter-spacing:.18em;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #ffc95040}.code-box .small-text{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}
.host-guide{background:#121d3699;border-color:#344973;padding:1rem 1.25rem}.host-guide-title strong{font-size:.9rem}.host-guide-grid{gap:1rem}.host-guide h2{font-size:.9rem}.host-guide p,.host-guide .helper{font-size:.8rem}.host-guide .button,.host-guide button{font-size:.82rem}.host-guide h2>span{background:#223861;color:#bbd5ff}.host-guide-title{margin-bottom:.8rem}
.scoreboard{gap:.75rem;margin:1.2rem 0 1.6rem}.team{--team:#78b6ff;position:relative;overflow:hidden;padding:1rem 1rem .9rem;background:linear-gradient(155deg,#1b2d51,#111a31);border:1px solid #344a72;border-radius:12px;box-shadow:0 7px 16px #0003}.team:nth-child(2){--team:#cba5ff}.team:nth-child(3){--team:#80ecd6}.team:nth-child(4){--team:#ffb0cc}.team:nth-child(5){--team:#ffcb7d}.team:nth-child(6){--team:#97d8ff}.team:nth-child(7){--team:#c9e78a}.team:nth-child(8){--team:#ecaaff}.team:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--team)}.team.picking{border-color:var(--team);box-shadow:0 0 20px #75a2fb1a}.team-name{display:flex;align-items:center;gap:.5rem;font-weight:650;color:#c2cfea;font-size:.75rem}.team-number{color:var(--team);font-size:.7rem;letter-spacing:.04em}.team-score{font-size:2rem;margin-top:.45rem;color:white;letter-spacing:-.04em}.team-score small{font-size:.6rem;margin-left:.4rem;letter-spacing:.13em;color:#91a5cb;font-weight:550}.game-bar .badge{color:#ffe6a3;border-color:#81683a;background:#4b351e3d}.game-bar{margin-bottom:1rem}
.board{gap:.85rem;padding:1rem;background:linear-gradient(135deg,#1d245644,#08244755);border:1px solid #39538b77;border-radius:18px;box-shadow:0 20px 70px #0004}.category{grid-template-rows:150px repeat(3,100px);gap:.7rem}.category-head{position:relative;background:linear-gradient(155deg,#1a3265,#131e42);border:1px solid #385693;border-bottom:2px solid #5482ca;padding:.8rem .55rem;border-radius:10px}.category-head h2{font-size:1rem;line-height:1.2;letter-spacing:-.02em}.category-head p{font-size:.72rem;color:#aebfe5}.topic-icon{width:37px;height:37px;margin:0 auto .55rem;display:block;color:#9bc8ff;filter:drop-shadow(0 0 6px #77acff44)}.category:nth-child(2) .topic-icon{color:#c7aaff}.category:nth-child(3) .topic-icon{color:#85e8d5}.category:nth-child(4) .topic-icon{color:#ffb5d1}.category:nth-child(5) .topic-icon{color:#ffe09b}
.clue{position:relative;display:flex;flex-direction:column;gap:0;min-height:100px;overflow:hidden;background:linear-gradient(145deg,#204798,#152d6a);border:1px solid #547edd;border-bottom:4px solid #0a173e;border-radius:10px;color:#ffe49a;font-size:2.9rem;font-weight:850;letter-spacing:-.055em;text-shadow:0 2px 0 #7c592c,0 0 22px #ffdc6033;box-shadow:inset 0 1px 0 #88a7ff40,0 4px 8px #0004}.clue small{font-size:.55rem;letter-spacing:.22em;line-height:1.3;color:#a9bee7;text-shadow:none;font-weight:650}.clue:hover:not(:disabled){background:linear-gradient(145deg,#3567cb,#25489c);border-color:#99b4ff;transform:translateY(-3px);box-shadow:0 8px 28px #335bc044}.clue:active:not(:disabled){transform:translateY(1px)}.clue.played{border-color:#263658;border-bottom-width:1px;background:#0a142b90;opacity:.75;box-shadow:none;text-shadow:none}.tile-complete{font-size:1.6rem;color:#6d83a9}.final-row{padding:.75rem .25rem}.final-row .primary{background:linear-gradient(135deg,#fcde8b,#efb84e);min-width:265px}.final-row .helper{font-size:.85rem}.screen .board{margin-top:1rem}.screen .clue:disabled:not(.played){opacity:1}.display-note{border-left-color:#789cf1;background:#14203c55;border-radius:6px;font-size:.8rem}
.question{max-width:1060px;background:linear-gradient(130deg,#142447,#10182e);border:1px solid #405b8b;border-radius:18px;padding:1.7rem;box-shadow:0 20px 60px #0004}.question .prompt{font-size:clamp(1.25rem,2.3vw,1.8rem);font-weight:650;line-height:1.4;letter-spacing:-.025em}.question-head{margin-bottom:.8rem}.question .points{font-size:.9rem;letter-spacing:.02em}.question .badge{margin-left:.4rem;background:#0b1935;border-color:#425c89}.answer-instructions{display:flex;align-items:start;gap:1rem;margin:-.25rem 0 1.3rem;padding:.8rem 1rem;background:#132f43;border:1px solid #355f73;border-radius:10px;font-size:.85rem;color:#c4e1ef}.answer-instructions strong{white-space:nowrap;font-size:.65rem;letter-spacing:.13em;color:#8cdcff;margin-top:.18rem}.solo-preview{background:#38301b;border-color:#7e6b3c;color:#efdcaf}.solo-preview strong{color:#ffe1a0}
.options{gap:.85rem}.option{min-height:96px;background:linear-gradient(145deg,#1d3053,#18263f);border-color:#405d8a;border-radius:12px;padding:1.1rem;font-size:1.02rem}.option .letter{width:36px;height:36px;background:#2a4471;border:1px solid #526d9b;border-radius:9px;color:#dce8ff;font-size:1.05rem}.option:not(button){cursor:default}button.option:hover:not(:disabled){border-color:#9bbcff;box-shadow:0 0 0 1px #749fec;background:#25416a;transform:translateY(-2px)}.option.selected{outline:2px solid var(--gold);background:#3a3728;border-color:#f5d580}.option.selected .letter{background:var(--gold);border-color:var(--gold);color:#1c2435}.option.correct{background:linear-gradient(140deg,#15473e,#13392e);border-color:#75f1c0;box-shadow:0 0 25px #49e4a017}.option.correct .letter{background:#75f1c0;color:#102f25;border-color:#75f1c0}.option.incorrect{background:#432333;border-color:#cf829d}.option:disabled{opacity:1}.option:disabled:not(.selected):not(.correct):not(.incorrect){opacity:.82}.rationale{background:#133b31;border-color:#75f1c0;padding:1.2rem;border-radius:7px}.status-line{font-weight:550;color:#c6d4ee;font-size:.93rem}.controls{background:#0b1530;border-color:#3e5580;border-radius:12px;padding:1rem;box-shadow:none;position:static}.controls .helper{font-size:.8rem}.controls button{min-height:46px}.controls .control-hint{color:#c2d1ed}.key{margin-bottom:1rem}.key summary{font-size:.86rem}
.timer-dial{width:82px;height:82px;position:relative;flex-shrink:0}.timer-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.timer-dial circle{fill:none;stroke-width:4}.timer-track{stroke:#2c4166}.timer-progress{stroke:#84c7ff;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.timer-dial .timer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;min-width:0;padding:0;font-size:1rem;color:#e8f3ff}.timer-dial.urgent .timer-progress{stroke:#ffc768}.timer-dial.urgent .timer{color:#ffdc96}.timer-dial.urgent{animation:timerGlow 1s ease-in-out infinite}.is-revealed .correct{animation:revealGlow .6s ease-out}.is-revealed .rationale{animation:revealIn .4s ease-out}.lobby{border:1px solid #354e7b;border-radius:16px;background:linear-gradient(140deg,#182c52,#111a30);padding:3rem 2rem}.my-team{background:#193b5b;border:1px solid #3b7095}.ended{padding:2.5rem;border:1px solid #6e6342;border-radius:18px;background:radial-gradient(ellipse at top,#6a562738,transparent 80%),#121a32}.ended h2{color:#ffe2a0}
@keyframes timerGlow{50%{filter:drop-shadow(0 0 8px #ffd36c44)}}@keyframes revealGlow{0%{box-shadow:0 0 0 8px #75f1c060;transform:scale(.98)}100%{box-shadow:0 0 25px #49e4a017;transform:scale(1)}}@keyframes revealIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.category{grid-template-rows:145px repeat(3,88px)}.clue{min-height:88px;font-size:2.5rem}.board{gap:.55rem;padding:.7rem}.category-head h2{font-size:.92rem}.room-art{right:0;opacity:.4}.room-stage h1{max-width:570px}.host-guide-grid{grid-template-columns:1fr 1fr}.course-art{height:210px}}
@media(max-width:850px){.course-art{height:220px}.board-cards{grid-template-columns:1fr}.course-card-content{padding:1.3rem}.entry-art{margin:-2rem -2rem 1.2rem}.room-stage{padding:1.25rem}.question{padding:1.15rem}.answer-instructions{flex-direction:column;gap:.35rem}.scoreboard{gap:.5rem}.team{padding:.7rem}.team-score{font-size:1.7rem}.topic-icon{width:30px;height:30px}.category-head p{display:none}.category{grid-template-rows:125px repeat(3,78px)}.clue{min-height:78px}.studio-intro{padding-top:.5rem}.entry h1{font-size:2.5rem}}
@media(max-width:520px){header .inner{gap:.5rem;align-items:flex-start}.brand{font-size:.85rem;max-width:165px;line-height:1.2}.brand img{width:25px;height:25px}.toplinks{gap:.4rem;max-width:185px}.toplinks .sound-button{font-size:.7rem!important;padding:.35rem .5rem;min-height:36px}.toplinks .badge{font-size:.66rem;padding:.25rem .4rem}.toplinks a{font-size:.75rem}.toplinks .quiet.small{font-size:.75rem}.board{padding:.45rem;gap:.55rem;border-radius:12px}.category{grid-template-columns:1.6fr repeat(3,1fr);grid-template-rows:78px;gap:.35rem}.category-head{padding:.25rem;border:1px solid #385693;border-left:3px solid #6284c5}.category-head .topic-icon{width:23px;height:23px;margin-bottom:.15rem}.category-head h2{font-size:.68rem;line-height:1.1;overflow-wrap:normal}.clue{font-size:1.65rem;min-height:78px;border-bottom-width:3px;border-radius:7px}.clue small{font-size:.42rem;letter-spacing:.12em}.course-art{height:175px}.art-tag{left:1.2rem;font-size:.61rem}.course-card-content{padding:1.2rem}.board-card h2{font-size:1.45rem}.entry-art{margin:-1.2rem -1.2rem 1.2rem}.room-stage{min-height:168px;padding:1.1rem;grid-template-columns:1fr auto;gap:.7rem}.room-stage h1{font-size:1.35rem}.room-stage .eyebrow{font-size:.59rem;letter-spacing:.11em}.room-stage .small-text{font-size:.7rem}.code-box{padding:.5rem;align-self:start}.code-value{font-size:1rem;letter-spacing:.1em}.code-box .small-text{font-size:.55rem}.room-art{width:100%;right:-40px;opacity:.25}.host-guide{padding:.9rem}.host-guide-grid{grid-template-columns:1fr;gap:.7rem}.host-guide-grid>div:last-child{grid-column:auto}.host-guide-grid h2{margin-bottom:.4rem}.host-guide h2>span{width:21px;height:21px}.host-guide-grid .join-tools input{display:none}.host-guide-title{margin-bottom:.6rem}.question{padding:1rem}.answer-instructions{padding:.75rem;font-size:.8rem}.timer-dial{width:68px;height:68px}.question .badge{font-size:.7rem;margin-left:0}.question .points{font-size:.8rem}.question .prompt{font-size:1.12rem}.option{font-size:.95rem;padding:.85rem;min-height:76px}.option .letter{width:30px;height:30px;font-size:.95rem}.team-name{font-size:.67rem;gap:.35rem}.team-score{font-size:1.45rem}.team-score small{font-size:.5rem}.game-bar{align-items:flex-start}.game-bar .helper{font-size:.72rem}.quick-steps{gap:.6rem}.quick-steps li{font-size:.8rem}.quick-steps b{width:23px;height:23px}.board-secondary{font-size:.8rem}.studio-intro h1{font-size:2.2rem}.try-note{font-size:.82rem}.sound-button span{font-size:1rem}.controls{padding:.8rem}.controls .helper{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;transform:none!important}.timer-dial svg{transform:rotate(-90deg)!important}}
@media print{.sound-button,.course-art,.room-art,.answer-instructions{display:none!important}body{background:white}}
/* Keep the course launch controls near the top on laptop displays. */
.studio-intro{padding:0}.studio-intro h1{font-size:clamp(2.2rem,4vw,3.4rem)}.studio-intro .quick-steps{margin-top:1rem}.course-art{height:180px}
@media(min-width:851px){.screen{padding-top:1.25rem}.screen .room-stage{min-height:112px;padding:1rem 1.3rem}.screen .room-head h1{font-size:1.8rem}.screen .scoreboard{margin:.9rem 0}.screen .team{padding:.6rem .9rem}.screen .team-score{font-size:1.6rem;margin-top:.2rem}.screen .category{grid-template-rows:108px repeat(3,76px)}.screen .clue{min-height:76px;font-size:2.4rem}.screen .category-head .topic-icon{width:27px;height:27px;margin-bottom:.35rem}.screen .category-head h2{font-size:.92rem}.screen .category-head p{display:none}.screen .board{padding:.7rem}.screen .footer{margin-top:1rem}}
.joining{max-width:610px}.joining .entry-cards{grid-template-columns:1fr}.joining .teacher-entry{display:none}.joining h1{font-size:2.8rem}.joining .intro{margin-bottom:1.3rem}.question:has(.solo-preview) .controls [data-action=open]{background:#20365c;color:#d9e8ff;box-shadow:none;border-color:#4b6893}
@media(max-width:520px){.joining h1{font-size:2.2rem}}
@media(min-width:851px) and (max-height:850px){
.screen{padding-top:1rem}.screen .room-stage{min-height:84px;padding:.65rem 1rem}.screen .room-head{margin-bottom:.75rem}.screen .room-head h1{font-size:1.55rem;margin-bottom:.25rem}.screen .room-stage .eyebrow{margin-bottom:.35rem;font-size:.62rem}.screen .room-stage .small-text{font-size:.72rem}.screen .code-box{padding:.4rem .65rem}.screen .code-value{font-size:1.4rem}.screen .display-note{padding:.25rem .6rem;margin-bottom:.6rem;font-size:.7rem}.screen .display-note .button{font-size:.7rem;padding:.2rem .5rem;min-height:28px}.screen .scoreboard{margin:.6rem 0 .7rem}.screen .team{padding:.45rem .65rem}.screen .team-score{font-size:1.3rem;margin-top:.15rem}.screen .team-name{font-size:.68rem}.screen .game-bar{margin:.55rem 0 .6rem}.screen .game-bar .helper{font-size:.73rem}.screen .board{margin-top:0;padding:.5rem;gap:.6rem;border-radius:12px}.screen .category{grid-template-rows:80px repeat(3,58px);gap:.45rem}.screen .category-head{padding:.35rem}.screen .category-head h2{font-size:.85rem;margin-bottom:0}.screen .category-head .topic-icon{width:23px;height:23px;margin-bottom:.3rem}.screen .clue{font-size:2rem;min-height:58px;padding:.2rem}.screen .clue small{font-size:.42rem}.screen .final-row{padding:.4rem .2rem;margin-top:.5rem}.screen .final-row .button,.screen .final-row button{min-height:37px;padding:.45rem .8rem;font-size:.85rem}.screen .footer{display:none}.screen .question .prompt{font-size:1.4rem}
}