/* Bright classroom theme. Layout and game states remain in style.css. */
/* Red theme overrides are loaded after this stylesheet. */
.board-frame{overflow:hidden}
.waiting-for-teacher #gameBoard{filter:blur(10px);pointer-events:none;user-select:none;-webkit-user-select:none}
.waiting-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:#155b48b8;color:#fffdf0;border-radius:0}
.waiting-overlay h2{font-size:clamp(22px,3.2vw,38px);margin:12px 0;line-height:1.35}
.waiting-overlay p{font-size:clamp(13px,1.6vw,19px);color:#e7f9ec;max-width:600px;margin:0;line-height:1.7}
.waiting-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:0;background:#ffffff1c;border:1px solid #ffffff44;color:#ffdf8b;font-size:40px}
.waiting-dots{color:#ffe199;letter-spacing:6px;font-size:17px;margin-top:18px}
#adminStartPanel{background:linear-gradient(160deg,#fff,#edf9f1);border-color:#bce3cd}
#adminStartPanel #start{width:100%;margin-top:20px}
#showResults{width:100%;margin-top:14px;min-height:46px;background:#e3f2ff;color:#256385}
.teacher-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.teacher-actions #showResults{grid-column:1/-1}
.teacher-actions .icon-button{display:grid;place-items:center;min-height:48px;font-size:25px;padding:8px;line-height:1;touch-action:manipulation}
.teacher-actions #showResults{margin-top:0}
.teacher-actions button{min-height:44px;width:100%}
.teacher-actions #stop{background:#ffe9df;color:#994d31}
.teacher-actions #reset{background:#fff0c7;color:#87631d}
#adminStartPanel #logout{width:100%;margin-top:0;background:#edf0f5;color:#637082}
#adminStartPanel #adminNotice{font-size:11px;line-height:1.7}
#resultsDialog{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:26px;background:#f5fbfc;overscroll-behavior:contain}
.results-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:sticky;top:-26px;background:#f5fbfc;z-index:1;padding:8px 0 12px}
.results-header h2{margin:12px 0 0;font-size:26px}.results-header button{min-height:44px;flex-shrink:0}
#resultsSummary{color:#496d75;font-size:13px;margin:0 0 20px}
.result-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
.result-card{cursor:default;padding:15px;overflow:visible;min-height:230px}.result-card:after{display:none}
.result-card h3{margin:12px 0 8px;font-size:16px;overflow-wrap:anywhere;color:#355e64}
.result-card .result-status{font-size:11px;color:#496b68;line-height:1.6;margin:0 0 12px}
.result-metrics{display:flex;justify-content:space-between;gap:10px;background:#ffffff80;border-radius:0;padding:10px;font-size:10px;color:#526e77}
.result-metrics b{display:block;font-size:20px;margin-top:5px;color:#355e64}
.result-answers{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.result-answers>div{background:#ffffffa6;border:1px solid #ffffff;border-radius:0;padding:8px;display:flex;flex-direction:column;gap:4px;color:#627982;font-size:9px;min-width:0}
.result-answers b{font-size:19px;color:#355e64;overflow-wrap:anywhere}
.result-answers .is-correct{background:#e5f9e9;border-color:#a9d7b3;color:#25683b}
.result-answers .is-wrong{background:#fff0ed;border-color:#ebbaae;color:#a04138}
.result-answers small{font-size:10px}.result-empty{font-size:13px;color:#6a8385;padding:20px 0}
@media(max-width:1000px){.result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#resultsDialog{padding:16px;width:calc(100vw - 16px)}.results-header{top:-16px}.results-header h2{font-size:21px}.result-cards{gap:14px 10px}.result-card{padding:10px}.result-card h3{font-size:14px}.result-card .seat-icon{width:30px;height:30px;font-size:20px}.result-metrics{padding:7px;gap:6px}.result-metrics b{font-size:17px}.result-answers>div{padding:6px}.result-answers b{font-size:17px}}
:root{color:#334b57;background:#f4fbff}
body{background:radial-gradient(ellipse at 0 15%,#fff0c9 0,transparent 42%),radial-gradient(ellipse at 100% 45%,#d9f6ed 0,transparent 42%),#f4fbff}
header{background:#ffffffed;border-bottom:2px solid #e0eef3;height:78px}
.brand{color:#30ad88}.brand span{color:#587784}.brand b{color:#29816d}
.live{color:#28765f;background:#e9f8ed;border-radius:0;padding:8px 13px}
.quiet{color:#506e7b;background:#edf5fa;border-radius:0;font-weight:600}
main{max-width:1280px;padding-top:28px}
.heading{position:relative;margin-bottom:27px;padding:4px 0}
.heading:before,.heading:after{position:absolute;top:22px;font-size:38px;pointer-events:none}
.heading:before{content:'✦';left:19%;color:#f1b93f;transform:rotate(-12deg)}
.heading:after{content:'✿';right:19%;color:#ed9fba;transform:rotate(12deg)}
.eyebrow{color:#568777;letter-spacing:1.5px}
h1{color:#246f64;font-size:40px;margin-top:11px;text-shadow:0 3px #fff}
p{color:#627b88}.heading p{color:#667f8b;font-size:13px}
.classroom{gap:23px;grid-template-columns:minmax(0,1fr) 295px}
.board-frame{border:10px solid #f5c679;border-radius:0;background:#f5c679;box-shadow:0 5px 0 #dfaa57,0 14px 32px #4a867219}
.board{background:radial-gradient(ellipse at 30% 10%,#338d72,#206954);border:2px solid #ffffff55;border-radius:0;padding:20px 24px 18px;box-shadow:inset 0 0 25px #154c3420;min-height:0}
.board-top{color:#f0fff2;letter-spacing:.6px;font-weight:600}
#round{background:#ffffff17;border-radius:0;padding:9px;width:auto}
#phase{font-size:9px;color:#e4f7d5}
#clock{background:#fff7d2;color:#73521e;border:2px solid #ffe6a1;border-radius:0;font-size:28px;padding:5px 19px;box-shadow:0 3px 0 #154d3b44}
.board h2{color:#fffbed;font-size:25px;margin-top:17px}.board-help{color:#dcf6e9;font-size:12px}
.puzzle{margin-top:8px}.svg-label{stroke:#29775f;fill:#fffef2;font-weight:600;stroke-width:5px}
.number rect{fill:#fff9dc;stroke:#f4c368;rx:0}.number text{fill:#365651}
.answer{border:3px solid #fee3a0;border-radius:0;background:#fffef6;box-shadow:0 4px 0 #174b3933;color:#216b59}
.answer:disabled{background:#f3f9de;color:#3c7660}.answer::placeholder{color:#6c9073;opacity:1}
.answer:enabled{border-color:#ffe193;background:#fffef5}.answer:focus{outline:4px solid #ffe89d77;border-color:#ffcf56}
.answer.correct{background:#d5f9df;border-color:#58d296}.answer.wrong{background:#ffe5e7;border-color:#f3999c}
.board-bottom{border-color:#dbf3e64d;padding-top:12px}.board-bottom>span{color:#e0f5e6;font-size:11px}
#submit{background:#ffda7f;color:#624716;border-radius:0;padding:12px 24px;font-size:13px;box-shadow:0 3px 0 #dca44b}
button:disabled{opacity:.65}.chalk{bottom:-7px;background:#fffdf2}
.panel{background:#fff;border:2px solid #dfedf0;border-radius:0;padding:25px;box-shadow:0 7px 0 #e4eff244,0 10px 30px #55847309}
#joinPanel{border-color:#f5deb3;background:linear-gradient(160deg,#fff,#fffaf0)}
.tag{background:#fff0c7;color:#89661e;border-radius:0;font-size:10px;padding:8px 12px;letter-spacing:.6px}
.panel h2{color:#355e64;font-size:22px}.panel p{color:#617c88;font-size:12px}
label{color:#47636f;font-size:12px}input,select{background:#fff;border:2px solid #dfebed;border-radius:0;color:#355c63;padding:12px}
input:focus,select:focus{border-color:#61bfa1;outline:3px solid #74d3b52c}
.primary{background:#278b70;box-shadow:0 4px 0 #176f57;border-radius:0;font-size:13px;padding:14px 20px;color:white}
.primary:hover:not(:disabled){background:#217e65}
.note{color:#6c8390;font-size:11px;line-height:2}.panel .note{background:#f1f8f7;border-radius:0;padding:13px;margin-top:23px}
.seats-section{margin-top:34px}.section-heading h2{color:#355e64;font-size:22px}
.section-heading small{background:#e4f5ed;color:#347862;font-weight:600;font-size:11px;padding:6px 11px}
.seat-legend{color:#45876b;font-size:11px}.seat-legend i{color:#ac7921}
.seats{gap:17px}.seat{--seat-bg:#fff1c9;--seat-line:#efd58f;--seat-shadow:#dfc274;background:var(--seat-bg);border:2px solid var(--seat-line);box-shadow:0 5px 0 var(--seat-shadow);border-radius:0;min-height:132px;padding:15px 18px;color:#496170;transition:transform .18s,box-shadow .18s}
.seat:nth-child(4n+2){--seat-bg:#e2f1ff;--seat-line:#bdddf4;--seat-shadow:#a2c9e7}
.seat:nth-child(4n+3){--seat-bg:#e7f5df;--seat-line:#cbe4b9;--seat-shadow:#afcf97}
.seat:nth-child(4n+4){--seat-bg:#ffe7ee;--seat-line:#f3c9d6;--seat-shadow:#e4aec0}
.seat:after{border-color:#76909a22;bottom:36px}.seat-top{font-weight:700;letter-spacing:1px;color:#5d7580}.seat-icon{background:#ffffffaa;width:38px;height:38px;display:grid;place-items:center;border-radius:0;font-size:24px;letter-spacing:0}
.seat strong{font-size:14px;margin:5px 0 15px;color:#3c5a66}.seat-status{opacity:1;font-size:10px;color:#5e7682}.seat:disabled{opacity:1}.seat.filled{background:var(--seat-bg);border-color:var(--seat-line);box-shadow:0 5px 0 var(--seat-shadow)}
.seat.filled .seat-status{color:#28785c}.seat.done{background:#fff1bd;border-color:#eac465;box-shadow:0 5px 0 #d7b357}.seat.done .seat-status{color:#826014}.seat.mine{outline:3px solid #30a885;outline-offset:3px}
.seat:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 0 var(--seat-shadow)}
.secondary{background:#eaf3fa;color:#436878;border-radius:0;font-weight:600}
#adminNotice{background:#eaf8ee;color:#37765c;border-radius:0}th{background:#edf6f8;color:#58717b}th,td{border-color:#e3eef0}td .good{color:#247954}td .bad{color:#b34956}
footer{border-color:#dce9ed;color:#6e8693}dialog{border:2px solid #dceee7;border-radius:0;background:#fffdf6}dialog h2{color:#355e64}#toast{background:#246e5a;border:2px solid #bce3d2;border-radius:0}
@media(min-width:1400px){.board{min-height:0}}
@media(max-width:1000px){.classroom{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.board{padding:17px 14px}.panel{padding:20px}.heading:before{left:10%}.heading:after{right:10%}.board-top{font-size:8px}.board h2{font-size:22px}}
@media(max-width:760px){header{height:72px}.live{padding:7px 9px;font-size:8px}main{padding:23px 15px}.heading{padding:5px 0}.heading h1{font-size:29px}.heading p{font-size:11px;padding:0 20px}.heading:before,.heading:after{font-size:21px;top:32px}.heading:before{left:0}.heading:after{right:0}.classroom{grid-template-columns:1fr}.board-frame{border-width:7px;border-radius:0}.board{border-radius:0;padding:14px 10px}.board-top{font-size:7px;gap:4px}#phase{font-size:7px}#round{padding:7px 5px}#clock{font-size:23px;padding:5px 10px}.board h2{font-size:22px}.board-help{font-size:10px}.board-bottom>span{font-size:9px}#submit{padding:10px 17px;font-size:12px}.puzzle{margin:14px 0}.panel{padding:22px}.panel .note{margin-top:20px}.seats{gap:15px}.seat{padding:13px;min-height:128px}.seat strong{font-size:13px}.section-heading h2{font-size:20px}.section-heading small{font-size:10px}.section-heading .eyebrow{font-size:9px}.admin{padding:17px}}
@media(prefers-reduced-motion:reduce){button,.seat{transition:none}}
/* A joined team gets the full board width, including iPad portrait and landscape. */
.team-view main{max-width:none;padding:16px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.team-view .classroom{grid-template-columns:minmax(0,1fr);gap:18px}
.team-view .heading{margin:0 0 16px;padding:0}
.team-view .heading h1{font-size:26px;margin:0}
.team-view .heading .eyebrow,.team-view .heading>p,.team-view .heading:before,.team-view .heading:after{display:none}
.team-view .board-frame{width:100%}
.team-view .board{padding:16px 24px}
.team-view .board h2{margin:7px 0 4px}
#teamBadge{margin:8px 0 0;text-align:center;color:#e5ffef;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.team-view .puzzle{width:min(100%,calc((100svh - 350px)*2.485));min-width:min(100%,600px);margin:12px auto}
.team-view .answer{font-size:clamp(22px,3vw,34px);touch-action:manipulation}
.team-view #submit{min-height:48px;min-width:150px;font-size:16px}
.team-view .board-bottom>span{font-size:13px}
.team-view #memberPanel{width:100%;box-shadow:none}
.team-view #memberPanel .big-icon{display:none}
.team-view #memberPanel h2{margin-top:8px}
.team-view .seats-section{margin-top:26px}
@media(pointer:coarse){button,.quiet{min-height:44px}input:not(.answer),select{min-height:48px;font-size:16px}.answer{font-size:24px}}
@media(min-width:761px) and (max-width:1366px){.team-view header{height:64px}.team-view .board h2{font-size:23px}.team-view .board-help{font-size:12px}.team-view .board-top{font-size:11px}.team-view #phase{font-size:10px}}
@media(max-width:760px){.team-view main{padding:12px 10px}.team-view .heading h1{font-size:23px}.team-view .board{padding:12px 8px}.team-view .board-bottom>span{font-size:10px}.team-view #submit{min-width:112px;font-size:14px}.team-view .answer{font-size:clamp(16px,4vw,26px)}}