/* The lab: coach plans, rival boards, controller menus and personal rewards. */
:root{--lab-accent:#a7ead4;--lab-warm:#e9bb85}
body[data-theme=mint]{--accent:#a2ecd0;--lab-accent:#7af0cb;--mint:#7af0cb;background:#101e20}
body[data-theme=sunset]{--accent:#f6bb94;--lab-accent:#f5cb91;--mint:#f5cb91;background:#211923}
body[data-theme=cosmic]{--accent:#d2a0ff;--lab-accent:#d9a5ff;--mint:#d9a5ff;background:#17132b}
body[data-theme=mint] .board-casing{border-color:#467b6e;box-shadow:0 0 45px #64d3ae12}
body[data-theme=sunset] .board-casing{border-color:#aa705e;box-shadow:0 0 45px #f3aa7915}
body[data-theme=cosmic] .board-casing{border-color:#8255aa;box-shadow:0 0 45px #b670ff22}
.cpu-coach{padding:17px;border:1px solid #a7ead421;border-radius:16px;background:linear-gradient(145deg,#a7ead408,#bb92ef07);margin:0 0 23px}
.coach-section-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:8px;letter-spacing:1.4px;color:#b9ccca;margin-bottom:14px}
.lab-tag{font-size:7px;white-space:nowrap;border:1px solid #a7ead430;padding:4px 5px;border-radius:4px;letter-spacing:.5px}
.shadow-switch{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}
.shadow-switch b{display:block;font-size:14px;font-weight:600;color:#dcf6eb}.shadow-switch small{display:block;color:#8c9baf;font-size:11px;margin-top:5px}
.shadow-switch input{appearance:none;width:36px;height:22px;border-radius:15px;background:#3c4055;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.shadow-switch input:before{content:'';position:absolute;left:4px;top:4px;width:14px;height:14px;background:#b3bdca;border-radius:50%;transition:transform .2s}
.shadow-switch input:checked{background:#386457}.shadow-switch input:checked:before{transform:translateX(14px);background:#c4ffe7}
.select-label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#aeb8ca;margin:16px 0 12px}
select{width:100%;font:inherit;color:#e7eaf2;background:#222b3e;border:1px solid #4a5269;border-radius:8px;padding:11px;min-height:42px;cursor:pointer}
.setting-row.compact{font-size:10px;gap:8px;padding:7px 0;border:0}.planner-status{font-size:10px;color:#9ee5d0;line-height:1.6;margin:12px 0 8px}
.micro-copy{font-size:11px;line-height:1.65;color:#a6b0c3;margin:10px 0}.planner-route{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.planner-route kbd{font-size:9px;padding:4px 5px}
.plan-preview{display:flex;gap:7px;overflow-x:auto;padding:3px 0}.plan-step{flex:1;min-width:52px;margin:0}.plan-step canvas{display:block;width:100%;border:1px solid #57617a66;border-radius:5px;aspect-ratio:1 / 2;background:#141d2d}.plan-step figcaption{font-size:8px;color:#98bcb4;text-align:center;line-height:1.4;margin-top:5px}
.plan-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.secondary-button{background:#ffffff07;color:#d3d9e7;border:1px solid #ffffff22;border-radius:9px;min-height:40px;padding:9px 15px;font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.secondary-button:hover{background:#ffffff10}.secondary-button:disabled{opacity:.4;cursor:default}
.plan-buttons .secondary-button{font-size:10px;padding:6px 10px;min-height:32px}.shadow-legend{font-size:8px;color:#7d94a5;margin:12px 0 0;line-height:1.4}.shadow-legend i{display:inline-block;width:8px;height:8px;border:1px dashed #a7ead4;margin-right:4px;vertical-align:middle}.shadow-legend span{padding:0 3px}
.next-queue{min-width:0}.next-queue #next-pieces{max-width:230px;flex-wrap:wrap;justify-content:flex-end;gap:7px}.next-queue .preview-piece{--preview-cell:5px;transform:scale(.8);transform-origin:center}.next-queue:has(.preview-piece:nth-child(7)){align-items:flex-start}
.controller-strip{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#101522ed;border-top:1px solid #ffffff12;padding:8px 20px;display:flex;gap:18px;justify-content:center;color:#a7b2c6;font-size:10px;backdrop-filter:blur(10px)}
.controller-strip kbd{font-size:9px;margin:0 3px}.controller-strip .xbox{border-radius:50%;padding:2px 5px}.xbox.a{color:#b2eeb1}.xbox.b{color:#f2a0a5}.controller-strip[hidden]{display:none}.has-controller{padding-bottom:42px}
.opponent-panel{text-align:left;width:100%}.rival-heading{display:flex;gap:10px;align-items:center;margin:0 0 14px}.rival-orb{font-size:27px;width:44px;height:44px;display:grid;place-items:center;background:radial-gradient(circle,#a6e6da33,#b899f409);border:1px solid #9ce8d355;border-radius:14px;color:#bcf0db}.rival-heading .chapter-label{font-size:7px;letter-spacing:1.5px}.rival-heading h2{font-size:19px;margin:4px 0 0;font-weight:500}.rival-status{margin-left:auto;font-size:9px;color:#a8daca}
#cpu-board{width:100%;max-width:210px;height:auto;border:1px solid #59647b66;border-radius:8px;display:block;margin:auto;box-shadow:0 10px 40px #0002}.is-versus .lesson-sidebar>:not(.opponent-panel){display:none}.is-versus .lesson-sidebar{padding-top:7px}.match-stats{display:flex;justify-content:space-between;align-items:center;margin:15px 0 12px;color:#8796ad;font-size:9px;letter-spacing:1px}.match-stats b{font-size:20px;color:#d6dfed;display:inline-block;margin-left:5px;font-weight:500}
.incoming-label{display:flex;justify-content:space-between;font-size:9px;color:#b2b9ca;margin:10px 0}.incoming-label b{color:#f3ad9c;margin-left:5px}.incoming-track{height:5px;border-radius:5px;background:#343a50;overflow:hidden}.incoming-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#edbe80,#ed8e98);transition:width .2s}.opponent-panel>.secondary-button{width:100%;margin-top:12px}.opponent-panel>.text-button{display:block;margin-top:12px;font-size:11px}
.is-versus #playground-tools .preset-buttons,.is-versus #playground-tools>.chapter-label{display:none}.is-versus #reset-button,.is-versus #undo-button{display:none}.is-versus .utility-controls{margin:0}.is-versus #board-mode-label{color:#a7ead4}
.tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:25px 0 20px}.tier-button{display:flex;flex-direction:column;gap:10px;align-items:center;padding:14px 6px;color:#a2acc1;border:1px solid #ffffff14;background:#ffffff03;border-radius:12px;cursor:pointer}.tier-button span{font-size:23px;color:#bfc4e9}.tier-button b{font-size:10px;font-weight:500}.tier-button small{font-size:8px;letter-spacing:.7px}.tier-button.selected{color:#d3faeb;border-color:#9de0c98a;background:#a7ead410}.tier-button.selected span{color:#a7ead4}
.versus-settings{display:grid;grid-template-columns:1fr;gap:0}.versus-settings .select-label{margin:6px 0 12px}.help-note.plain{padding:13px 15px;font-size:11px;line-height:1.7;color:#a9b5c9;display:block}.dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}dialog h2{font-size:28px}.dialog-actions .primary-button{margin:0}.result-stats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.result-stats span{flex:1;min-width:90px;border:1px solid #ffffff16;border-radius:10px;padding:14px;font-size:10px;color:#a6b2c6}.result-stats b{display:block;font-size:25px;font-weight:500;color:#dcf5eb;margin-bottom:6px}
.sparks-total{display:flex;align-items:baseline;gap:12px;margin:25px 0 8px;color:#d0acfa}.sparks-total strong{font-size:42px;font-weight:500}.sparks-total span:first-child{font-size:28px}.sparks-total span:last-child{font-size:12px;color:#a8b1c6}.cosmetic-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:23px 0 27px}.cosmetic-item{padding:15px;color:#cdd6e7;border:1px solid #ffffff1c;background:#ffffff04;border-radius:12px;cursor:pointer;text-align:left}.cosmetic-item.selected{border-color:#adf0d8}.cosmetic-item:disabled{opacity:.5;cursor:default}.cosmetic-swatch{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,var(--swatch),#23243d);display:block;margin-bottom:14px;box-shadow:0 0 14px #ffffff0a}.cosmetic-item b,.cosmetic-item small{display:block;font-size:12px;font-weight:500}.cosmetic-item small{font-size:10px;color:#8e9db3;margin-top:6px}.rival-badges{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.rival-badge{padding:9px 12px;border:1px solid #a5e6cf66;border-radius:8px;color:#b8ebd8;font-size:11px}.rival-badge.locked{opacity:.35;border-color:#ffffff33}.backup-actions{display:flex;gap:8px;margin:23px 0 12px;flex-wrap:wrap}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.sparks-flash{animation:sparks-pop .55s ease}.controller-settings{padding:12px 0}.range-setting{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:17px 0;color:#b7c1d3;font-size:12px}.range-setting input{width:45%;accent-color:#a7ead4}.binding-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:17px 0}.binding-grid button{display:flex;justify-content:space-between;align-items:center;min-height:40px;background:#ffffff05;border:1px solid #ffffff15;border-radius:7px;color:#bec9dc;padding:9px;font-size:10px;cursor:pointer}.binding-grid kbd{min-width:30px;font-size:9px;text-align:center}.binding-grid .capturing{border-color:#a7ead4;color:#a7ead4}.menu-focus{outline:2px solid #b4f9dc!important;outline-offset:4px!important}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #b4f9dc;outline-offset:4px}.play-controls button{touch-action:none;user-select:none;-webkit-user-select:none}button,a,input,select{touch-action:manipulation}dialog{max-height:90dvh;overflow:auto}.board-casing.is-paused:after{content:'PAUSED';display:grid;place-items:center;position:absolute;inset:0;background:#111827cc;color:#cdf2e4;font-size:15px;letter-spacing:5px;backdrop-filter:blur(4px);z-index:5}
.incoming-holes{display:flex;gap:3px;overflow:auto;margin-top:6px}.incoming-holes span{font:8px Consolas,monospace;color:#e0bfa9;border:1px solid #b18d6b44;border-radius:3px;min-width:13px;text-align:center;padding:2px}.is-versus .lesson-sidebar{display:block}.is-playground .board-topbar{height:auto;min-height:46px;flex-wrap:wrap;gap:9px}.is-playground .board-mode{flex-basis:100%}.is-playground .next-queue{width:100%;justify-content:space-between}.is-playground #next-pieces{height:auto;gap:5px}.is-playground .next-queue .preview-piece{width:23px;height:12px;grid-template-columns:repeat(4,5px);grid-template-rows:repeat(2,5px);transform:none;gap:1px}
@keyframes sparks-pop{50%{color:#fff;transform:scale(1.2)}}
@media(min-width:1100px){.is-versus .game-layout{grid-template-columns:220px minmax(300px,360px) 260px;gap:35px}}
@media(max-width:1000px){.cpu-coach{margin-bottom:16px}.is-versus .game-layout{grid-template-columns:minmax(120px,180px) minmax(250px,340px);gap:25px;justify-content:center}.is-versus .coach-sidebar{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.is-versus .cpu-coach{grid-row:1 / 4}.is-versus .step-tracker,.is-versus .little-lesson{display:none}}
@media(max-width:650px){.mode-switch{flex-shrink:0}.mode-switch button{padding:10px 12px;font-size:11px}.cpu-coach{padding:15px}.cpu-coach .coach-section-title{font-size:9px}.coach-sidebar .cpu-coach{grid-column:1 / -1}.plan-preview{max-width:300px}.plan-step{max-width:92px}.next-queue #next-pieces{gap:4px;max-width:210px}.next-queue .preview-piece{transform:scale(.7);margin:-3px}.controller-strip{padding:8px 10px;font-size:9px}.controller-strip>span:first-child{display:none}.controller-strip>span{line-height:1.7}.tier-grid{gap:4px}.tier-button{padding:12px 3px}.tier-button b{font-size:9px}.is-versus .game-layout{grid-template-columns:minmax(0,1fr);gap:16px}.is-versus .lesson-sidebar{grid-row:2;padding-top:0}.is-versus .opponent-panel{display:grid;grid-template-columns:95px 1fr;gap:0 15px;padding:15px;border:1px solid #ffffff16;border-radius:14px;background:#171c2a}.is-versus #cpu-board{grid-column:1;grid-row:1 / 7;width:95px}.is-versus .rival-heading{grid-column:2;gap:7px;margin:0 0 10px}.rival-orb{font-size:20px;width:32px;height:32px;border-radius:10px}.rival-heading h2{font-size:16px}.is-versus .match-stats{grid-column:2;margin:6px 0}.is-versus .incoming-label,.is-versus .incoming-track,.is-versus .match-caption{grid-column:2}.is-versus .opponent-panel>.secondary-button,.is-versus .opponent-panel>.text-button{grid-column:2;min-height:32px;margin:8px 0 0;font-size:10px;padding:6px}.is-versus #match-caption{font-size:9px;margin:5px 0}.is-versus .play-area{grid-row:1}.is-versus .coach-sidebar{grid-column:auto;display:flex;flex-direction:column;gap:0}.is-versus .lesson-subtitle{display:none}.play-controls{gap:5px}.play-controls button{min-height:48px}.keyboard-description{font-size:9px}.app-footer{gap:9px;flex-wrap:wrap}.app-footer button{font-size:9px}.board-casing{touch-action:none}.binding-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.mobile-incoming{display:none}
@media(max-width:650px){.is-versus .game-layout{display:grid}.is-versus .incoming-holes{grid-column:2}.is-playground:not(.is-versus) .lesson-sidebar{display:none}.is-playground .workspace-heading{margin:42px 0 14px}.is-playground .play-area{width:clamp(185px,calc((100dvh - 305px) / 2),272px)}.is-playground .play-controls{width:min(92vw,330px);position:relative;left:50%;transform:translateX(-50%)}.is-playground .keyboard-description{display:none}.next-queue .preview-piece{margin:0}.is-versus .mobile-incoming{display:inline-flex;color:#93a6bb;font-size:7px;letter-spacing:.7px;margin-left:auto}.is-versus .mobile-incoming.alert{color:#f1ba91}.is-versus .board-mode{flex-basis:auto;font-size:7.5px;letter-spacing:.8px}}