:root{font-family:Arial,Helvetica,sans-serif;color:#24312f;background:#eeeae1;font-synthesis:none;--ink:#25332f;--muted:#7b8177;--line:#d6d7cb;--orange:#ce5b35;--cream:#f6f3eb}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #de8355;outline-offset:3px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:83px;padding:0 4.1%;border-bottom:1px solid #d2d4c9;display:flex;justify-content:space-between;align-items:center;gap:25px}.wordmark{font-weight:900;font-size:23px;font-style:italic;letter-spacing:-1.2px;display:flex;align-items:center;gap:10px}.brand-ball{display:inline-grid;place-items:center;background:var(--orange);color:#f5e8cf;border-radius:50%;width:31px;height:31px;font-size:32px;line-height:1;font-style:normal}.brand-divider{height:23px;width:1px;background:#bbc3b7;margin:0 7px}.lab-word{font-size:10px;font-style:normal;letter-spacing:2px;font-weight:500}.top-right{display:flex;align-items:center;gap:22px}.build-label{font-size:9px;letter-spacing:1.5px;color:#7b8376}.status-pill{font-size:10px;display:flex;align-items:center;gap:7px;white-space:nowrap}.status-pill i,.live-dot,.orange-dot{width:6px;height:6px;display:inline-block;border-radius:100%;background:#718365}.dark-button,.primary-button{background:var(--ink);color:#f7f4e9;border-radius:4px;padding:13px 17px;font-size:11px;font-weight:bold;display:inline-flex;align-items:center;justify-content:center;gap:23px;white-space:nowrap}.dark-button:hover{background:#3c4d44}.primary-button{background:var(--orange)}.primary-button:hover{background:#b74c29}main{max-width:1800px;margin:auto;padding:35px 4.1% 15px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:31px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;margin:0 0 13px}.intro h1{font-size:clamp(32px,3.3vw,54px);line-height:1.05;font-weight:500;letter-spacing:-2.7px;margin:0}.intro h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:normal;color:var(--orange)}.intro-copy{font-size:12px;line-height:1.7;color:#777e73;margin:0 1px 1px 15px}.mode-tabs{display:flex;align-items:center;gap:30px;border-bottom:1px solid #cbd0c3;margin-bottom:20px;height:45px}.mode-tabs button{position:relative;background:none;font-size:12px;padding:0 0 16px;color:#7b8177;align-self:flex-end}.mode-tabs button span{font-size:9px;margin-right:9px;opacity:.7}.mode-tabs button.active{color:var(--ink);font-weight:bold}.mode-tabs button.active:after{position:absolute;height:3px;bottom:-1px;left:0;right:0;background:var(--orange);content:''}.mode-caption{margin-left:auto;font-size:10px;color:#858b7e;align-self:flex-start}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:20px;align-items:stretch}.viewport{position:relative;background:#68746c;border-radius:7px;overflow:hidden;min-height:555px;height:min(65vh,780px);isolation:isolate}#court{width:100%;height:100%;display:block;outline-offset:-3px;touch-action:none}.viewport-top{position:absolute;top:24px;left:25px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.court-tag{display:grid;grid-template-columns:7px 1fr;gap:8px 7px;color:#f3f1e4;text-shadow:0 1px 8px #14221a}.court-tag .live-dot{background:#e4cda8;align-self:center}.court-tag b{font-size:10px;letter-spacing:2.3px}.court-tag small{grid-column:2;font-size:9px;opacity:.65;letter-spacing:.3px}.glass-button{background:#25372a58;border:1px solid #dbe4cf55;color:#fffcf0;backdrop-filter:blur(10px);font-size:10px;border-radius:4px;padding:11px 13px;pointer-events:auto}.glass-button span{margin:0 10px;color:#e0e3d5}.viewport-bottom{position:absolute;bottom:0;left:0;right:0;padding:66px 26px 24px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;background:linear-gradient(transparent,#14251caa);color:#f7f2e3}.shot-feedback span{font-size:8px;letter-spacing:1.7px;color:#e4d5b9;display:block;margin-bottom:8px}.shot-feedback strong{font-family:Georgia,serif;font-style:italic;font-size:26px;font-weight:normal}.shot-stats{display:flex;align-items:center;gap:18px}.shot-stats div{text-align:center;min-width:33px}.shot-stats b{font-size:26px;font-weight:400}.shot-stats span{display:block;font-size:7px;letter-spacing:1.1px;margin-top:5px;color:#d2d7c7}.shot-stats .stat-divider{height:35px;width:1px;background:#d8dec74a;margin:0 3px}#studio-help{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;color:#d8e0cf;letter-spacing:.4px}.loading{position:absolute;inset:0;background:#263b33;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;color:#f5ecd5;font-size:14px}.loading span{font-size:11px;color:#acb5a5}.inspector{background:var(--cream);border:1px solid #dadcd1;border-radius:7px;padding:23px 23px 15px;display:flex;flex-direction:column}.inspector-header{display:flex;justify-content:space-between;align-items:center}.inspector-header .eyebrow{font-size:8px;letter-spacing:1.5px;margin:0}.small-tag{font-size:7px;letter-spacing:1px;border:1px solid #d9ded1;color:#7b8876;padding:4px 5px;border-radius:3px}.player-heading{display:flex;align-items:center;gap:16px;margin:22px 0 24px}.player-heading>span{font-size:48px;line-height:.95;letter-spacing:-4px;color:var(--orange);font-style:italic;font-weight:bold}.player-heading h2{font-size:15px;font-weight:500;margin:0 0 7px;letter-spacing:-.3px}.player-heading p{font-size:9px;color:var(--muted);margin:0}.field-label{display:block;font-size:8px;letter-spacing:1.3px;color:#7f8979;margin-bottom:8px;font-weight:700}select,input{color:var(--ink);background:#f9f7f1;border:1px solid #d7dccf;border-radius:3px;padding:10px 11px;font-size:12px;max-width:100%}.select-wrap select{width:100%;font-size:11px}.team-row{display:flex;align-items:center;margin-top:16px;gap:15px}.team-row .field-label{margin:0}.swatches{display:flex;gap:9px}.swatch{width:20px;height:20px;border-radius:50%;border:3px solid #f6f3eb;box-shadow:0 0 0 1px transparent;padding:0}.swatch.orange{background:#c8653e}.swatch.teal{background:#275659}.swatch.selected{box-shadow:0 0 0 1px #6b7864}.text-button{background:none;color:var(--muted);font-size:10px;padding:3px 0}.text-button:hover{color:var(--orange)}#wireframe{margin-left:auto;font-size:9px}#wireframe[aria-pressed=true]{color:var(--orange)}.section-rule{border-top:1px solid #dce0d3;margin:22px 0 21px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-title h3{font-size:13px;font-weight:500;margin:0}.panel-title>span{font-size:6px;letter-spacing:.7px;color:#929986;white-space:nowrap}.panel-copy{font-size:11px;line-height:1.65;color:var(--muted);margin:11px 0 18px}.rhythm{margin-bottom:22px}.rhythm-track{height:7px;position:relative;background:#e1e3d7;border-radius:4px}.sweet-spot{position:absolute;left:55%;width:19%;height:100%;background:#b5c7a1;border-radius:2px}#rhythm-fill{position:absolute;height:100%;width:0;background:#d97c4e88;border-radius:4px}#rhythm-cursor{position:absolute;left:0;top:-3px;height:13px;width:2px;background:#bc552f}.rhythm-labels{display:flex;justify-content:space-between;font-size:6px;color:#88917e;letter-spacing:1px;margin-top:9px}.control-list{display:grid;gap:11px}.control-list div{display:flex;align-items:center;gap:10px;font-size:9px;color:#717d69}kbd{display:inline-block;font-family:Arial,sans-serif;font-size:8px;border:1px solid #d5dccb;border-radius:3px;padding:4px 5px;line-height:1;color:#59664d;min-width:29px;text-align:center;background:#f3f4e9}.control-list kbd:first-child{min-width:53px}.control-list div:nth-child(2) span{font-size:8px}#reset-ball{width:100%;justify-content:space-between;margin-top:23px;padding:13px 14px;font-size:11px}#reset-ball kbd{color:#ffeddc;background:#ffffff12;border-color:#ffe7c34a}.asset-footer{border-top:1px solid #dce0d3;padding-top:14px;margin-top:auto;display:flex;justify-content:space-between;gap:8px;font-size:7px;color:#929986}.asset-footer a{color:#677359;font-size:8px}#practice-panel,#studio-panel{margin-bottom:22px}.animation-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:270px;overflow:auto}.animation-list button{font-size:9px;text-align:left;padding:9px 8px;background:#ebece2;border-radius:3px;color:#7a846d;border:1px solid transparent}.animation-list button.active{color:#9f492b;background:#f1e0ce;border-color:#dcb99b}.animation-list button:hover{border-color:#c3b394}.timeline{display:flex;align-items:center;gap:23px;border:1px solid #d6dacc;background:#f7f4ec;padding:17px 20px;border-radius:5px;margin-top:14px}.timeline-main{flex:1}.timeline-main>div{display:flex;justify-content:space-between;font-size:10px;margin-bottom:5px}.timeline-main>div span{font-size:9px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--orange);padding:0;cursor:pointer}.timeline label{font-size:10px;color:var(--muted);white-space:nowrap}.timeline select{font-size:10px;padding:7px;margin-left:7px}.toggle-label{display:flex;align-items:center;gap:5px}.toggle-label input{accent-color:var(--orange)}.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 1px 0;font-size:8px;color:#878f7b}.bottom-bar p{letter-spacing:1px;display:flex;align-items:center;gap:9px}.orange-dot{background:var(--orange);height:5px;width:5px}.bottom-bar p span:not(.orange-dot){margin:0 7px}.bottom-bar>div{display:flex;gap:21px;font-size:9px}dialog{border:1px solid #cbd0c2;background:#f6f2e9;border-radius:10px;width:510px;max-width:calc(100vw - 30px);max-height:90vh;padding:28px;color:var(--ink);box-shadow:0 25px 120px #16231d55}dialog::backdrop{background:#13231cb0;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start}.dialog-heading h2{font:italic 31px Georgia,serif;margin:0}.dialog-heading .eyebrow{font-size:8px}.close-button{background:none;font-size:28px;line-height:1;color:var(--muted)}.dialog-intro{font-size:12px;line-height:1.7;color:#7a8371}.server-label{font-size:9px;color:#778b66;margin:18px 0}#room-browse>input{width:100%}.room-create,#join-form{display:flex;gap:9px;margin:12px 0}.room-create select,#join-form input{flex:1;min-width:0}.room-create .primary-button{font-size:11px}#room-browse .panel-title{margin:25px 0 12px}.room-row{width:100%;display:block;text-align:left;background:#e6e9dd;padding:13px;font-size:11px;border-radius:4px;margin:7px 0}.empty{font-size:11px;line-height:1.7;padding:15px;background:#e9ecdf;border-radius:4px;color:#7b846d}.notice{font-size:11px;line-height:1.6;color:#a04c31;min-height:17px}.room-code{font-size:32px;letter-spacing:5px;margin:10px 0 20px}#room-link{width:100%;font-size:10px}#room-roster{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.roster-player{padding:14px;background:#e8e7db;border-left:3px solid var(--orange);border-radius:4px;display:flex;flex-direction:column;gap:7px}.roster-player.team-1{border-color:#2b5d60}.roster-player strong{font-size:11px}.roster-player span{font-size:9px;color:#7b846d}.room-actions{display:flex;gap:15px;flex-wrap:wrap}.room-actions .primary-button{width:100%}#studio-panel .section-rule{margin-bottom:18px}
@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.inspector{padding:27px}.control-list{gap:15px}.control-list div{font-size:10px}.animation-list{max-height:360px}.animation-list button{padding:13px 10px}}
@media(max-width:1100px){.build-label{display:none}.top-right{gap:15px}.intro-copy{font-size:11px}.workspace{grid-template-columns:minmax(0,1fr) 265px;gap:13px}.inspector{padding:20px 18px 15px}.viewport{min-height:555px}.lab-word{display:none}.brand-divider{display:none}.player-heading{gap:12px}}
@media(max-width:760px){.topbar{height:65px;padding:0 20px}.wordmark{font-size:20px}.top-right{gap:9px}.top-right .status-pill{display:none}.dark-button{font-size:10px;padding:11px 12px}.intro-copy{display:none}main{padding:28px 20px 10px}.intro{margin-bottom:24px}.intro h1{font-size:37px;letter-spacing:-2px}.eyebrow{font-size:8px}.mode-tabs{gap:23px}.mode-caption{display:none}.workspace{grid-template-columns:1fr}.viewport{height:56vh;min-height:390px}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.inspector-header,.asset-footer{grid-column:1/-1}.player-heading{grid-column:1/-1;margin:10px 0}.inspector>.field-label{align-self:center;margin:0}.team-row{grid-column:1/-1;margin:0}.inspector>#practice-panel,.inspector>#studio-panel{grid-column:1/-1;margin:0}.control-list{grid-template-columns:1fr 1fr;gap:13px}.panel-copy br{display:none}.rhythm{max-width:400px}.asset-footer{margin-top:9px}.animation-list{grid-template-columns:repeat(3,1fr);max-height:none}.timeline{gap:10px;flex-wrap:wrap;padding:13px}.timeline-main{min-width:160px}.timeline .toggle-label{margin-left:auto}.bottom-bar{align-items:flex-start;flex-direction:column;padding-bottom:10px}.bottom-bar>div{gap:20px;flex-wrap:wrap}.viewport-top{top:18px;left:18px;right:18px}.viewport-bottom{padding:60px 19px 20px}.shot-feedback strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:760px){.viewport-bottom{display:block}.shot-stats{position:absolute;right:20px;bottom:65px;gap:10px}.shot-stats b{font-size:20px}.shot-stats .stat-divider{height:28px}.shot-feedback strong{font-size:22px}#studio-help{display:none}}
.timeline{flex-wrap:wrap}.timeline-main{min-width:180px}
/* Expressions layer over the selected motion in the player study. */
.face-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.face-actions .toggle-label{display:flex;align-items:center;gap:6px;font-size:11px}
.face-controls .panel-copy{margin:10px 0 0;font-size:12px}
.match-hud{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:12px 25px;background:#20332cec;box-shadow:0 8px 30px #17261f22;color:#faf1db;border-radius:8px;pointer-events:none;z-index:3}
.team-score{display:flex;align-items:center;gap:14px}.team-score span{font-size:9px;letter-spacing:1.2px}.team-score strong{font-size:32px;font-variant-numeric:tabular-nums}.team-score.terracotta strong{color:#ffab79}.team-score.tidal strong{color:#8bd1ce}.match-clock{text-align:center;min-width:70px;display:grid;gap:2px}.match-clock span,.match-clock small{font-size:7px;letter-spacing:1px}.match-clock strong{font-size:22px;font-variant-numeric:tabular-nums}.match-clock.urgent strong{color:#ff9977}
.match-overlay{position:absolute;inset:0;z-index:6;background:#192c2f6e;backdrop-filter:blur(4px);display:grid;place-items:center;padding:22px}.match-card{max-width:430px;width:100%;padding:34px;background:#f7f2e8;border:1px solid #fff7e6;border-radius:9px;box-shadow:0 18px 80px #14251e50}.match-card h2{font:italic 39px Georgia,serif;letter-spacing:-1px;margin:4px 0 16px}.match-card p{font-size:13px;color:#687467;line-height:1.7}.match-card .primary-button,.match-card .dark-button{width:100%;margin-top:18px}.match-card .text-button{margin-top:16px}.match-card label{display:block;font-size:8px;letter-spacing:1.4px;margin:22px 0 9px}.match-card select{width:100%;font-size:12px}.match-callout{position:absolute;z-index:4;top:123px;left:50%;transform:translateX(-50%);background:#21392ddb;color:#fff3d9;padding:10px 20px;border-radius:30px;font-size:12px;white-space:nowrap;pointer-events:none}
.match-controls{display:grid;gap:14px;margin:22px 0}.match-controls>div{display:grid;gap:6px}.match-controls kbd{font-size:9px;font-weight:bold;color:#3e5048;letter-spacing:.5px}.match-controls span,.match-tip{font-size:11px;line-height:1.5;color:#7b8177}.match-tip{border-top:1px solid var(--line);padding-top:16px}.match-tools{display:flex;gap:22px;margin-top:21px}.match-roster{display:grid;gap:8px;margin:20px 0}.match-roster div{display:flex;align-items:center;justify-content:space-between;font-size:11px;border-left:3px solid #ce5b35;padding:8px;background:#eeede3}.match-roster .team-1{border-color:#317d80}.match-roster small{font-size:8px;color:#738174}.box-score{width:100%;border-collapse:collapse;font-size:11px;margin:18px 0}.box-score td,.box-score th{text-align:left;padding:7px 3px;border-bottom:1px solid #d5d9cb}.box-score th{font-size:8px;color:#79836f}
body.match-mode .court-tag{visibility:hidden}body.match-mode .asset-footer,body.match-mode .team-row,body.match-mode .player-heading,body.match-mode .inspector>.field-label,body.match-mode .inspector>.select-wrap{display:none}body.match-mode .inspector-header{margin-bottom:5px}body.match-mode #match-panel>.section-rule{display:none}body.match-mode .viewport-bottom{pointer-events:none}body.match-mode .intro{margin-bottom:20px}body.match-mode .shot-stats{display:none}
@media(max-width:760px){.match-hud{top:15px;gap:12px;padding:10px 14px}.team-score{gap:7px}.team-score span{font-size:7px;letter-spacing:.3px}.team-score strong{font-size:25px}.match-clock{min-width:56px}.match-clock span,.match-clock small{font-size:6px}.match-card{padding:24px}.match-card h2{font-size:31px}.match-callout{top:100px;font-size:10px}body.match-mode #match-panel{grid-column:1/-1}.match-controls{grid-template-columns:1fr 1fr}.match-roster{grid-template-columns:1fr 1fr}body.match-mode .camera-name{display:none}}
.match-meter{opacity:.4;margin:22px 0}.match-meter.active{opacity:1}.match-meter>span{font-size:8px;letter-spacing:1px;color:#77816c}.match-meter>div{height:10px;position:relative;background:#dce0d1;margin-top:10px;border-radius:5px;overflow:hidden}.match-meter i{position:absolute;left:40.5%;width:19%;height:100%;background:#74a582}.match-meter b{position:absolute;inset:0 auto 0 0;background:#db784caa;width:0;border-right:3px solid #9f4525}

/* Keep match controls and pause within the court-height sidebar. */
body.match-mode .match-controls{gap:10px;margin:16px 0}
body.match-mode .match-controls>div{grid-template-columns:80px 1fr;gap:9px;align-items:start}
body.match-mode .match-controls kbd{font-size:8px;padding:5px 3px}
body.match-mode .match-roster{grid-template-columns:1fr 1fr;gap:6px;margin:15px 0}
body.match-mode .match-roster div{gap:6px;font-size:10px}
body.match-mode .match-meter{margin:16px 0}
body.match-mode .match-tools{margin-top:14px}
@media(max-width:760px){body.match-mode .match-controls>div{grid-template-columns:1fr}}
@media(max-width:760px){body.match-mode .viewport-top{top:84px}body.match-mode .match-callout{top:133px}}

#shot-readiness{display:block;font-size:8px;font-weight:bold;letter-spacing:.8px;color:#526d58;margin-top:9px}.match-callout{max-width:calc(100% - 30px);text-align:center;white-space:normal}.match-meter.active #shot-readiness{color:#963f23}

/* Match play gives the court the room; the model studio keeps its workbench. */
.view-tools{display:flex;gap:7px;pointer-events:auto}
body.match-mode .intro{display:none}
body.match-mode .topbar{height:62px}
body.match-mode main{padding:14px 2.4% 12px}
body.match-mode .mode-tabs{height:34px;margin-bottom:14px}
body.match-mode .workspace{grid-template-columns:minmax(0,1fr) 260px;gap:15px}
body.match-mode .viewport{height:calc(100dvh - 152px);min-height:570px;max-height:1050px}
body.match-mode .inspector{padding:20px 18px 14px}
body.match-mode .viewport-bottom{padding:42px 24px 24px}
body.match-mode .shot-feedback strong{font-size:24px}
body.match-mode .bottom-bar{padding-top:12px}
.team-score.your-team span::before{content:'●';font-size:7px;margin-right:6px;color:#fff2c9}
.court-command{position:absolute;bottom:24px;right:24px;max-width:48%;padding:10px 13px;background:#17362fe8;color:#fff2d7;border:1px solid #e7e6c833;border-radius:5px;font-size:9px;line-height:1.7;letter-spacing:.6px;pointer-events:none;text-align:center}
.court-shot{position:absolute;z-index:4;color:#fff6df;pointer-events:none;filter:drop-shadow(0 2px 4px #152a26aa);text-align:center}
.court-shot>span{display:block;font-size:9px;letter-spacing:.8px;font-weight:bold;background:#20372ee8;padding:5px 7px;border-radius:3px;margin-bottom:7px;max-width:106px}
.court-shot>div{height:88px;width:12px;margin:auto;background:#18382ef2;border:2px solid #fff2d7;border-radius:5px;position:relative}
.court-shot i{position:absolute;left:0;right:0;background:#a4ed99;bottom:42%;height:16%}
.court-shot b{position:absolute;height:3px;left:-5px;right:-5px;background:#fff8e7;bottom:0}
.court-shot small{font-size:8px;font-weight:bold;letter-spacing:.7px;display:block;margin-top:7px}
.court-shot.sweet small{color:#bdf7a6}.court-shot.sweet>div{box-shadow:0 0 12px #b4f291bb}
body.focus-court .topbar,body.focus-court .intro,body.focus-court .mode-tabs,body.focus-court .inspector,body.focus-court .bottom-bar,body.focus-court .timeline{display:none}
body.focus-court main{padding:10px;max-width:none}
body.focus-court .workspace{grid-template-columns:1fr}
body.focus-court .viewport{height:calc(100dvh - 20px);min-height:350px;max-height:none}
@media(max-width:1100px){body.match-mode .workspace{grid-template-columns:minmax(0,1fr) 235px}.match-hud{gap:14px;padding:10px 16px}.team-score span{font-size:8px}.court-command{font-size:8px}}
@media(max-width:760px){body.match-mode main{padding:12px}.view-tools{gap:4px}.view-tools .glass-button{padding:9px;font-size:9px}body.match-mode .workspace{grid-template-columns:1fr}body.match-mode .viewport{height:67dvh;min-height:470px}body.match-mode .inspector{display:block}body.match-mode .match-controls{grid-template-columns:1fr 1fr}body.match-mode .viewport-bottom{padding:40px 17px 52px}body.match-mode .shot-feedback strong{font-size:21px}.court-command{bottom:12px;left:17px;right:17px;max-width:none;font-size:8px;padding:7px}.court-shot>div{height:70px}body.focus-court .viewport{height:calc(100dvh - 20px)}}

body.match-mode .inspector{background:#183532;border-color:#38524a;color:#f0efdb;box-shadow:0 10px 30px #132b2514}
body.match-mode .panel-copy,body.match-mode .match-controls span,body.match-mode .match-tip,body.match-mode .text-button{color:#bac9b9}
body.match-mode .match-controls kbd{color:#edf0d8;background:#28473f;border-color:#52685b}
body.match-mode .match-tip{border-color:#496052}
body.match-mode .match-roster div{background:#244238;color:#f1edda}
body.match-mode .match-roster small,body.match-mode .match-meter>span{color:#adc5b1}
body.match-mode #shot-readiness{color:#cfe5c0}
body.match-mode .match-meter.active #shot-readiness{color:#d5fca7}
body.match-mode .match-meter>div{background:#3e5948}
body.match-mode .small-tag{color:#bfd0b8;border-color:#526a58}
body.match-mode .viewport{border:1px solid #46675b;box-shadow:0 12px 38px #17352d25}
.match-hud{border:1px solid #8ca58455;background:#122e2bee;box-shadow:0 7px 24px #102f2b44;backdrop-filter:blur(12px)}
.match-callout{border:1px solid #b3c6a63b;background:#16372fe8}

.release-toast{position:absolute;z-index:5;transform:translate(-50%,-100%);padding:7px 12px;border-radius:4px;background:#17362eef;border:1px solid #e9e3c58c;font-size:12px;font-weight:900;letter-spacing:1px;color:#fff1c9;white-space:nowrap;pointer-events:none;box-shadow:0 4px 20px #14312755}
.release-toast.excellent{color:#163a29;background:#ceff9a;border-color:#f2ffd7;box-shadow:0 0 25px #c9fd9255}
.score-burst{position:absolute;left:50%;top:20%;transform:translateX(-50%) rotate(-2deg);z-index:5;padding:13px 22px 16px;border-left:4px solid #f8a271;background:#14342fee;color:#fff4d9;pointer-events:none;box-shadow:0 8px 35px #183a3244;max-width:85%;white-space:nowrap}
.score-burst>span{font-size:8px;letter-spacing:2px;color:#bdd5b8}
.score-burst>div{display:flex;align-items:center;gap:20px;margin:5px 0}.score-burst strong{font-style:italic;font-size:28px;letter-spacing:-1px;font-weight:900}.score-burst b{font-size:38px;color:#ffb47f;line-height:1}.score-burst small{font-size:10px;color:#cbdcc2;letter-spacing:.6px}.score-burst.team-teal{border-color:#7dd8c7}.score-burst.team-teal b{color:#9fead3}
.court-shot em{position:absolute;left:-1px;right:-1px;background:#ddff9e;box-shadow:0 0 7px #caff8c99}
@media(max-width:760px){.score-burst{top:31%;padding:10px 15px}.score-burst strong{font-size:22px}.score-burst b{font-size:30px}.score-burst>div{gap:12px}.release-toast{font-size:9px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){.score-burst{transform:translateX(-50%)}}

.match-callout.glass-callout{font-size:19px;font-weight:900;letter-spacing:3px;border:2px solid #f8d38a;background:#193d35f2;color:#fff0b8;padding:14px 24px}

/* A persistent, separate burst gauge; shot timing keeps its own vertical meter. */
.court-energy{position:absolute;left:24px;bottom:104px;width:138px;padding:9px 11px 10px;background:#15372fe8;color:#e8efda;border:1px solid #d5e6c742;border-radius:6px;pointer-events:none;font-size:9px;box-shadow:0 3px 12px #15291b18}.court-energy>div{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.court-energy span{font-size:8px;letter-spacing:.7px;font-weight:700}.court-energy>div>b{font-size:9px;font-variant-numeric:tabular-nums}.court-energy>i{display:block;height:5px;background:#cfdec230;border-radius:3px;overflow:hidden}.court-energy>i>b{display:block;height:100%;width:100%;background:#b4d7a5;border-radius:3px;transition:width .09s linear,background .2s}.court-energy.active{border-color:#c9e8aa88}.court-energy.low>i>b{background:#f5bc72}.court-energy.low span{color:#f5cf98}@media(max-width:600px){.court-energy{left:17px;bottom:120px;width:130px;padding:8px 10px}}

/* Play-first layout: instructions and key editing live in one modal. */
.workspace{display:block}.viewport,.match-mode .viewport{width:100%;height:clamp(540px,calc(100dvh - 230px),1100px)}.court-toolbar{display:flex;align-items:center;gap:20px;margin:-5px 0 14px}.court-toolbar .dark-button{padding:11px 16px}.court-toolbar .text-button{padding:10px 0}.court-toolbar #mute-audio{margin-left:auto}#developer-tools[hidden]{display:none!important}#controls-dialog{width:min(620px,calc(100vw - 28px));max-height:88dvh;overflow:auto;padding:28px;border:1px solid #c8cbbb;border-radius:12px;background:#f3f0e7;color:#253b33;box-shadow:0 24px 100px #061a1955}#controls-dialog::backdrop{background:#102b2777;backdrop-filter:blur(5px)}#controls-dialog h2{font-size:25px;margin:0}.binding-list{display:grid;gap:0;margin:18px 0 12px}.binding-list>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid #d5dacd;font-size:12px}.binding-list button{min-width:112px;padding:8px 12px;border:1px solid #bac7b5;border-radius:5px;background:#e5eadd;color:#254437;font-size:11px;font-weight:700}.binding-list button:hover{background:#d7e4cc}.binding-notice{font-size:11px;line-height:1.6;min-height:35px;color:#667261;margin:10px 0 3px}.mouse-controls{font-size:11px;line-height:1.9;background:#e3e9db;border-radius:6px;padding:13px 15px}.control-tips,.player-options{border-top:1px solid #cdd4c3;padding:14px 0;margin-top:10px}.control-tips summary,.player-options summary{cursor:pointer;font-size:12px;font-weight:700}.control-tips .panel-copy,.control-tips .match-tip{color:#5b695b}.control-tips .section-rule{display:none}.control-tips .match-meter{padding:10px;background:#dae3d2;border-radius:5px}.control-tips .match-meter>span,.control-tips .match-meter small{color:#46634b}.player-options .player-heading{margin-top:18px}.controls-online-note{font-size:11px;color:#776b43}#controls-dialog .field-label{color:#61725f}#controls-dialog .select-wrap select{color:#253b33;background:#e6eadd}#controls-dialog .match-roster{color:#273f34}.bottom-bar{justify-content:flex-start}@media(max-width:600px){.court-toolbar{gap:16px;flex-wrap:wrap;margin-bottom:12px}.court-toolbar .dark-button{font-size:10px;padding:11px 12px}.court-toolbar .text-button{font-size:10px}.viewport,.match-mode .viewport{height:calc(100dvh - 190px);min-height:520px}#controls-dialog{padding:20px}.binding-list>div{font-size:11px}.binding-list button{min-width:102px}.mode-tabs{gap:25px}.court-toolbar #mute-audio{margin-left:auto}}
body.match-mode #controls-dialog .player-heading{display:flex}body.match-mode #controls-dialog .team-row{display:flex}
.intro{display:none}.topbar{height:62px}main{padding:12px 2.4% 10px;max-width:none}.mode-tabs{height:42px;margin-bottom:14px}.court-toolbar>button{width:auto;white-space:nowrap;flex:0 0 auto}.court-toolbar #reset-ball{margin-left:0}.court-toolbar .text-button{color:#405b4e}@media(max-width:600px){main{padding:10px 12px}.mode-caption{display:none}.court-toolbar{gap:12px}.viewport,.match-mode .viewport{height:calc(100dvh - 215px)}}
body.match-mode .court-toolbar .text-button{color:#405b4e}body.match-mode .viewport,body:not(.match-mode) .viewport{height:calc(100dvh - 205px);min-height:480px}.view-tools{display:flex;align-items:stretch;gap:6px}.view-tools button{white-space:nowrap}.view-tools .glass-button{padding:10px 11px}.view-tools #camera-button span{margin:0 5px}#controls-dialog .dialog-heading{position:sticky;top:-21px;background:#f3f0e7;z-index:2;padding:7px 0 10px}.court-energy>div>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){body.match-mode .viewport,body:not(.match-mode) .viewport{height:calc(100dvh - 215px);min-height:480px}.viewport-top{left:16px;right:16px}}

/* The court browser uses its own artwork; the game canvas stays inside play. */
.court-toolbar #reset-ball{width:auto;margin-top:0;padding:10px 0}.practice-mode .shot-stats{position:absolute;right:24px;bottom:78px}@media(max-width:600px){.practice-mode .viewport-bottom{padding:40px 17px 52px}.practice-mode .shot-stats{right:17px;bottom:80px}}
.game-entry{display:none}body.entry-mode{background:#0a211e;color:#f4efdc}body.entry-mode:before{content:'';position:fixed;inset:0;z-index:-1;background:#0a211e url('../assets/images/menu-hero-v2.webp') 65% center/cover no-repeat}body.entry-mode:after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#081c1bf5 0%,#0b2520d9 27%,#102a234f 58%,#081a160a 100%)}body.entry-mode .topbar{background:#0a201d6b;border-color:#d7ddbc24}body.entry-mode .wordmark{color:#f6f0df}body.entry-mode .status-pill,body.entry-mode .build-label{color:#bbcbb6}body.entry-mode .text-button{color:#d3e0cb}body.entry-mode .playsible-back{color:#d3e0cb}body.entry-mode main{padding:0}body.entry-mode main>:not(#entry){display:none!important}body.entry-mode #entry{display:block}.game-entry{min-height:calc(100dvh - 62px);padding:46px 5.5vw 48px}.entry-copy{width:min(520px,100%)}.entry-copy .eyebrow{color:#b5cab2;letter-spacing:2px;margin-bottom:14px}.entry-copy h1{font-size:clamp(66px,6.5vw,96px);line-height:.94;letter-spacing:-4px;font-weight:700;margin:0 0 20px}.entry-copy h1 em{font-family:Georgia,serif;font-weight:400;color:#efbd81}.entry-lead{font-size:15px;line-height:1.7;color:#d0dac6;margin:0 0 24px}.entry-copy .field-label{color:#a9c1a6;font-size:9px}.entry-copy #player-name{width:100%;height:41px;background:#112f2bd9;border:1px solid #809e7f66;color:#fff3df;padding:10px 12px;border-radius:4px;margin:7px 0 14px}.entry-create{display:grid;grid-template-columns:1fr 1fr;gap:11px}.entry-create button{display:grid;grid-template-columns:1fr auto;gap:7px;padding:15px;text-align:left;font-size:13px;min-height:77px}.entry-create button small{grid-column:1/-1;font-weight:400;color:#e3e4cf;font-size:10px}.entry-create .dark-button{background:#244c41;border:1px solid #a9c49c66}.entry-create button:hover{filter:brightness(1.1)}.entry-ai{font-size:11px;line-height:1.7;color:#b8cab1;margin:11px 0 16px}.entry-copy #join-form{display:flex;gap:10px;margin:0 0 21px}.entry-copy #room-code{height:38px;background:#102e29cc;border:1px solid #6b8b7366;min-width:0;flex:1;color:#fff3df;padding:9px 12px;border-radius:4px;text-transform:uppercase}.entry-copy #join-form .dark-button{padding:10px 16px;background:#294b40}.entry-public-games{border-top:1px solid #b7c8a733;padding-top:14px}.browse-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.entry-public-games h2{font-size:15px;letter-spacing:.2px;margin:0}.entry-public-games .text-button{font-size:10px}.entry-public-games .empty{color:#bacbb2;font-size:11px;line-height:1.7;margin:14px 0}.entry-public-games .room-row{width:100%;display:block;text-align:left;background:#13362edd;border:1px solid #84a37d55;color:#f4efda;padding:13px 14px;margin:10px 0;border-radius:5px;font-size:11px;line-height:1.6}.entry-public-games .room-row:not(:disabled):hover{background:#2d5643}.entry-public-games .room-row:disabled{opacity:.62}.entry-public-games .server-label{color:#8fa88f;font-size:9px;margin:7px 0 0}.entry-practice{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:18px 0 8px;margin-top:10px;background:none;color:#efdcba;font-family:Georgia,serif;font-style:italic;font-size:21px}.entry-practice span{font-family:Arial,sans-serif;font-style:normal;font-size:10px;color:#bacfb3}.entry-copy #entry-controls{padding:8px 0;font-size:10px}.playsible-back{font-size:11px;white-space:nowrap;color:#5b7062;margin-right:18px}.topbar .wordmark{margin-right:auto}.topbar .top-right{margin-left:auto}.lobby-notice{position:fixed;bottom:0;left:0;right:0;z-index:100;margin:0;padding:9px 15px;text-align:center;font-size:11px;background:#102b28ed;color:#f3e2ba;pointer-events:none}.lobby-notice:empty{display:none}.invite-copy{display:flex;gap:8px}.invite-copy input{flex:1;min-width:0}.invite-copy button{flex-shrink:0;padding:11px;font-size:10px}body.entry-mode #rooms-dialog{background:#f3f0e7;color:#253b33}body.entry-mode #rooms-dialog .text-button{color:#46634d}#entry-resume-room{margin:5px 0 20px}#public-games-nav{white-space:nowrap}@media(max-width:750px){body.entry-mode:before{background-position:72% center}body.entry-mode:after{background:linear-gradient(90deg,#081c1bf0,#0d251ed9 70%,#0d251ea3)}.game-entry{padding:32px 22px 45px}.entry-copy{width:min(520px,100%)}.entry-copy h1{font-size:68px}.entry-lead{font-size:13px}.entry-create{gap:9px}.entry-create button{font-size:12px;padding:13px 12px}.entry-ai{font-size:10px}.entry-practice{font-size:19px}.topbar{gap:8px}.playsible-back{font-size:10px;margin-right:4px}.topbar .wordmark{font-size:18px;gap:6px}.topbar .top-right{gap:10px}.topbar #network-status,.topbar .build-label{display:none}.topbar #public-games-nav{font-size:9px}.topbar #open-rooms{font-size:9px;padding:11px 10px;gap:8px}.brand-divider,.lab-word{display:none}.entry-copy #join-form .dark-button{font-size:10px}.invite-copy{flex-direction:column}.invite-copy button{align-self:flex-start}}@media(max-width:420px){.topbar .wordmark{font-size:16px}.brand-ball{width:25px;height:25px;font-size:26px}.playsible-back{font-size:9px}.topbar .top-right{gap:9px}.topbar #open-rooms span{display:none}.game-entry{padding-left:18px;padding-right:18px}}
/* Paint art directly on the body so an opaque page background cannot hide it. */
body.entry-mode{background:#0a211e linear-gradient(90deg,#081c1bf2 0%,#0b2520d9 27%,#102a234f 58%,#081a160a 100%) fixed;background-image:linear-gradient(90deg,#081c1bf2 0%,#0b2520d9 27%,#102a234f 58%,#081a160a 100%),url('../assets/images/menu-hero-v2.webp');background-position:center,65% center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}body.entry-mode:before,body.entry-mode:after{display:none}.entry-public-games .empty{background:#14352bd9;border:1px solid #809d7555;border-radius:5px;padding:13px 14px;color:#c5d7bd}@media(max-width:750px){body.entry-mode{background-image:linear-gradient(90deg,#081c1bf0,#0d251ed4 70%,#0d251eaf),url('../assets/images/menu-hero-v2.webp');background-position:center,72% center}}
.room-public-switch{display:flex;align-items:center;gap:12px;padding:14px 0;margin:10px 0 18px;border-block:1px solid #ccd5c4;cursor:pointer}.room-public-switch input{width:20px;height:20px;accent-color:#ce5b35}.room-public-switch b{display:block;font-size:13px}.room-public-switch small{display:block;margin-top:5px;font-size:11px;color:#65785e}.entry-create #entry-practice{display:grid;padding:15px;font-family:Arial,sans-serif;font-style:normal;min-height:77px;font-size:13px;margin:0;background:#244c41;color:#fff1d9}.entry-create #entry-practice>span{font-size:13px}.entry-create #entry-practice small{font-family:Arial,sans-serif;font-style:normal;font-size:10px}.entry-create #entry-practice:hover{filter:brightness(1.1)}

/* Readable team intentions and earned showtime, kept separate from shot timing. */
.teamwork-meter{position:absolute;left:24px;bottom:163px;width:190px;padding:9px 11px;background:#17372fe8;border:1px solid #a8c7a44a;border-radius:6px;color:#edf2dc;pointer-events:none}.teamwork-meter>div{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.7px}.teamwork-meter>i{display:block;height:4px;margin:6px 0;background:#d9e6ca25;border-radius:4px;overflow:hidden}.teamwork-meter>i>b{display:block;height:100%;width:0;background:#badb97;transition:width .15s}.teamwork-meter small{display:block;font-size:8px;color:#c3d3b6}.teamwork-meter.active{border-color:#f3bd67;background:#473621ec}.teamwork-meter.active>i>b{background:#ffd68e}.teammate-cue{position:absolute;transform:translate(-50%,-100%);max-width:175px;padding:6px 9px;border:1px solid #b5d7a984;border-radius:7px;background:#193d32ee;color:#edf8d7;font-size:10px;line-height:1.35;pointer-events:none;text-align:center;box-shadow:0 3px 12px #102a2433}.defense-cue{position:absolute;left:50%;top:122px;transform:translateX(-50%);max-width:65%;background:#183e35ed;border:1px solid #c6e6b765;border-radius:5px;padding:8px 12px;color:#e7f6d2;font-size:9px;letter-spacing:1px;pointer-events:none;text-align:center}.score-burst.showtime{border-color:#f3cb88;box-shadow:0 0 30px #ffce752e}.score-burst.showtime strong{color:#ffda96}#review-dialog{width:min(650px,calc(100vw - 28px));max-height:88dvh;overflow:auto;padding:26px;border:1px solid #b8c8b2;border-radius:12px;background:#f3f0e7;color:#253b33}#review-dialog::backdrop{background:#102b2777;backdrop-filter:blur(5px)}#review-dialog h2{margin:0;font-family:Georgia,serif;font-size:30px}#review-dialog h3{font-size:14px;margin-top:24px}.review-table{width:100%;border-collapse:collapse;font-size:12px}.review-table th{text-align:left;font-size:9px;letter-spacing:1px;color:#71806c}.review-table td,.review-table th{padding:11px 7px;border-bottom:1px solid #d0d7c7}.review-shots{padding-left:20px;font-size:11px;line-height:1.7}.review-shots li{padding:4px 0}@media(max-width:600px){.teamwork-meter{left:164px;bottom:120px;width:calc(100% - 181px);padding:8px}.teamwork-meter small{font-size:7px}.teamwork-meter>div{font-size:7px}.defense-cue{top:115px;font-size:8px;padding:6px 8px}.teammate-cue{max-width:140px;font-size:9px}.court-toolbar{gap:12px;row-gap:2px}#review-dialog{padding:20px}.review-table td{padding:9px 5px}}

/* Independent audio mix. The toolbar retains quick music/all toggles. */
.court-toolbar #music-toggle{margin-left:auto}.court-toolbar #mute-audio{margin-left:0}.audio-settings{border-top:1px solid #cdd4c3;border-bottom:1px solid #cdd4c3;padding:14px 0;margin:18px 0 14px}.audio-settings summary{cursor:pointer;font-size:12px;font-weight:700}.audio-track{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:15px 0 13px}.audio-track>b{font-size:13px}.audio-track>span{font-size:10px;color:#6c7a65;grid-column:1}.audio-track button{grid-row:1/3;grid-column:2;align-self:center;padding:10px 12px;font-size:10px}.audio-toggles{display:flex;gap:15px;flex-wrap:wrap;margin:0 0 15px}.audio-toggles label{display:flex;align-items:center;gap:6px;font-size:11px}.audio-toggles input{accent-color:#c85c35;width:16px;height:16px;margin:0}.audio-volumes{display:grid;gap:13px;margin:0 0 16px}.audio-volumes label{display:grid;grid-template-columns:65px minmax(0,1fr) 36px;gap:12px;align-items:center;font-size:11px}.audio-volumes input{width:100%;padding:0;accent-color:#c85c35}.audio-volumes output{text-align:right;color:#65765f;font-size:10px}.audio-credit{font-size:9px;line-height:1.8;color:#72806a;margin:13px 0 0}.audio-credit a{text-decoration:underline;text-underline-offset:2px}@media(max-width:600px){.audio-toggles{gap:12px}.audio-track{grid-template-columns:minmax(0,1fr) auto}.audio-track>b{font-size:12px}.audio-track button{padding:9px;font-size:9px}.audio-volumes label{grid-template-columns:57px minmax(0,1fr) 32px;gap:8px}.court-toolbar #music-toggle{margin-left:auto}.court-toolbar #mute-audio{margin-left:0}}
#controls-dialog .audio-settings .text-button{color:#5b705c}

/* The current song and skip control stay one click away during play. */
.music-player{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0;max-width:380px;padding:0 12px;border:1px solid #c6cfbf;border-radius:7px;background:#e4e9dd}.music-track-quick{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#61725e}.court-toolbar .music-player #music-toggle{margin-left:0}.music-player button{white-space:nowrap}.court-toolbar:has(.music-player) #mute-audio{margin-left:0}
@media(max-width:760px){.court-toolbar{flex-wrap:wrap;gap:10px 16px}.music-player{flex:1 1 220px;max-width:none;gap:10px}.music-track-quick{flex:1;max-width:none}.court-toolbar:has(.music-player) #mute-audio{flex:0 0 auto}}