*{box-sizing:border-box}body{margin:0;background:#e9edf1;color:#182737;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #dce2e7;background:white;color:inherit;border-radius:9px;padding:11px 15px;touch-action:manipulation}button:hover{border-color:#8b9caa;background:#f3f6f8}button:focus-visible{outline:3px solid #e7af36;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}.studio{padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border-bottom:1px solid #dce2e7}.studio b{letter-spacing:1px}.studio b span{font-size:11px;background:#ede7d6;padding:4px;color:#75612e}.studio small{display:block;color:#76818b;font-size:12px;margin-top:5px}.devices{display:flex;gap:4px;background:#edf0f3;padding:4px;border-radius:12px}.devices button{border:0;background:transparent;padding:8px 18px}.devices .active{background:#fff;box-shadow:0 2px 5px #0001}main{margin:24px auto;background:#fff;box-shadow:0 15px 65px #15273817;overflow:hidden;transition:max-width .2s;min-height:850px;border-radius:20px}.tablet{max-width:1120px}.phone{max-width:393px}.auto{max-width:1300px}.apphead{padding:18px 26px;border-bottom:1px solid #edf0f3;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;color:#183e32;font-size:33px;display:flex;align-items:center;gap:10px}.brand>span{font-size:14px;line-height:1.1;letter-spacing:2px}.brand small{font-size:8px;color:#8a968f;letter-spacing:2px}.demo{font-size:10px;letter-spacing:1.4px;color:#8a7552}.gamehead{padding:25px 28px 20px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#89949e}h1{font-size:23px;letter-spacing:-.7px;margin:7px 0}h1 span{font-weight:400;color:#9da5ad}p{font-size:13px;color:#77838e;margin:5px 0}.saved{font-size:11px;color:#42806a}.scoreboard{margin:0 26px;background:#102b25;border-radius:14px;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;padding:24px 20px;align-items:center;text-align:center}.team{display:flex;flex-direction:column;gap:8px}.team>span{font-size:9px;letter-spacing:2px;color:#b4c5bf}.team b{font-size:12px;letter-spacing:1px}.team strong{font-size:56px;line-height:1;font-variant-numeric:tabular-nums}.clock button{display:block;margin:auto;background:none;border:0;color:#c5d3cb;padding:5px}.clock #clockDisplay{font-size:35px;color:#f1dca8;font-weight:650;font-variant-numeric:tabular-nums}.clock #period{font-size:10px;letter-spacing:1px}.clock .clocktoggle{background:#ffffff13;margin-top:6px;padding:8px 15px;font-size:11px}.operator{font-size:10px;color:#5c756a;display:flex;justify-content:space-between;margin:12px 28px 20px}.operator span{color:#929ba2}nav{display:flex;padding:0 26px;gap:23px;border-bottom:1px solid #e7ebef}nav button{border:0;border-radius:0;padding:15px 0;font-size:12px;color:#7c8790;background:none;white-space:nowrap}nav .active{border-bottom:3px solid #1e5843;color:#204c3b;font-weight:700}nav span{background:#edf0f3;padding:2px 5px;border-radius:4px}.workspace{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;padding:25px}.panel{border:1px solid #e4e9ed;border-radius:12px;padding:19px}.sectiontitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.sectiontitle h2,h2{font-size:15px;margin:0}.sectiontitle small{font-size:10px;color:#8d979e}.switch{display:flex;gap:5px;margin-bottom:20px}.switch button{flex:1;font-size:12px;background:#f4f6f8;border:0}.switch .active{background:#173f32;color:#fff}.players{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.player{padding:13px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}.player b{font-size:24px}.player span{font-size:10px}.player small{font-size:9px;color:#8c979e}.player.selected{border:2px solid #2f7257;background:#f1f8f3;padding:12px 1px 9px}.subrow{margin:17px 0 0;display:flex;gap:8px}.subrow button{font-size:11px;flex:1}.context{background:#f3f6f5;border-radius:8px;padding:12px;font-size:12px;margin-bottom:15px}.actiongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.actiongrid button{padding:17px 5px;font-weight:700;font-size:13px}.actiongrid button.made{background:#eaf4ed;border-color:#cfe4d5;color:#286243}.actiongrid button.miss{color:#98694d;background:#fcf8f4}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.actions button{font-size:11px;padding:14px 3px}.logpreview{padding:0 25px 25px}.play{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #edf0f2}.play .stamp{font-size:10px;color:#8a969f;width:55px;flex-shrink:0}.play .playbody{flex:1;font-size:12px}.play .playbody small{display:block;color:#929ba3;font-size:10px;margin-top:4px}.play .mark{background:#edf5ef;color:#316349;padding:7px;border-radius:8px;font-size:11px;min-width:30px;text-align:center}.play button{font-size:10px;padding:7px 9px}.empty{padding:25px;text-align:center;color:#95a0a8;font-size:12px}.page{padding:25px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th,td{text-align:right;padding:12px 9px;border-bottom:1px solid #edf0f3}th:first-child,td:first-child{text-align:left}th{font-size:10px;color:#8a969f}tfoot{font-weight:700}.note{font-size:11px;color:#849089;line-height:1.6;margin:15px 0}.court{width:100%;max-height:330px;background:#faf5e9;border-radius:12px;display:block;touch-action:manipulation}.court line,.court path,.court circle,.court rect{stroke:#c4af87;stroke-width:1.5;fill:none}.court .shotmade{fill:#277653;stroke:white;stroke-width:1}.court .shotmiss{stroke:#bd7157;stroke-width:2.5}.court.capture{cursor:crosshair}footer{text-align:center;padding:18px;border-top:1px solid #edf0f3;color:#9ba3aa;font-size:9px}dialog{border:0;border-radius:17px;padding:27px;max-width:480px;width:calc(100% - 30px);box-shadow:0 30px 100px #0004;color:#182737}dialog::backdrop{background:#0f211d88;backdrop-filter:blur(4px)}.close{float:right;border:0;padding:0;font-size:24px}dialog h2{font-size:20px;margin:4px 20px 10px 0}dialog p{margin:10px 0 20px;line-height:1.5}dialog label{display:block;font-size:12px;margin:15px 0 5px}select,input{padding:12px;border:1px solid #d8e0e4;border-radius:8px;width:100%;background:#fff;color:#182737}.primary{background:#20563f;color:#fff;border:0}.primary:hover{background:#17422f;color:#fff}.modalactions{display:flex;gap:8px;margin-top:20px}.modalactions button{flex:1}.danger{color:#ad5147}.subplayers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.subplayers .active{background:#e4f1e9;border-color:#337459}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#193d30;color:white;font-size:12px;padding:14px 22px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}#toast.visible{opacity:1}.phone .workspace{grid-template-columns:1fr;padding:16px;gap:15px}.phone .gamehead{padding:18px}.phone h1{font-size:19px}.phone .saved,.phone .demo,.phone .operator span{display:none}.phone .scoreboard{margin:0 16px;padding:20px 9px}.phone .team b{font-size:10px}.phone .team strong{font-size:43px}.phone #clockDisplay{font-size:29px}.phone nav{gap:20px;padding:0 16px}.phone nav button{font-size:11px}.phone .operator{margin:12px 18px}.phone .panel{padding:15px}.phone .apphead{padding:13px 18px}.phone .page{padding:16px}.phone .logpreview{padding:0 16px 16px}@media(max-width:650px){.studio{padding:12px;flex-wrap:wrap}.studio small{display:none}.studio>button{font-size:10px}.devices{order:3;width:100%;justify-content:center}main{margin:12px auto;border-radius:0;min-height:100vh}.workspace{grid-template-columns:1fr;padding:16px;gap:15px}.gamehead{padding:18px}h1{font-size:19px}.saved,.demo,.operator span{display:none}.scoreboard{margin:0 16px;padding:20px 9px}.team b{font-size:10px}.team strong{font-size:43px}.clock #clockDisplay{font-size:29px}nav{gap:20px;padding:0 16px}nav button{font-size:11px}.operator{margin:12px 18px}.panel{padding:15px}.page{padding:16px}}
main{container-type:inline-size}@container(max-width:650px){.apphead{padding:9px 16px!important}.brand{font-size:24px}.brand>span{font-size:11px}.gamehead{padding:12px 16px!important}.gamehead p,.gamehead .eyebrow{display:none}h1{margin:0;font-size:18px!important}.scoreboard{padding:12px 8px!important}.team{gap:4px}.team strong{font-size:36px!important}.clock #clockDisplay{font-size:27px!important}.clock .clocktoggle{padding:6px 12px;margin-top:0}.operator{margin:8px 18px!important}nav button{padding:12px 0}.workspace{padding:12px!important;gap:10px!important}.panel{padding:12px!important}.switch{margin-bottom:10px}.sectiontitle{margin-bottom:9px}.player{padding:8px 2px 6px;gap:4px}.player.selected{padding:7px 1px 5px}.player b{font-size:21px}.subrow{margin-top:9px}.subrow button{padding:8px}.panel>.note{display:none}.context{padding:8px;margin-bottom:10px}.actiongrid button{padding:13px 5px}.actions{margin-top:10px}.actions button{padding:11px 3px}.logpreview{padding:0 12px 12px!important}}
dialog:has(.sub-board){max-width:660px}.sub-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sub-column{min-width:0}.sub-column h3{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:5px 0 12px}.sub-column h3 span{letter-spacing:0;color:#819187}.sub-list{display:flex;flex-direction:column;gap:8px}.sub-player{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:13px 10px;min-height:64px}.sub-player>b{font-size:22px;width:30px;text-align:center}.sub-player>span:not(.sub-arrow){font-weight:650;font-size:13px;flex:1}.sub-player small{display:block;font-size:10px;font-weight:400;color:#87938d;margin-top:5px}.sub-arrow{color:#7d8c84}.sub-player.pending.incoming{background:#eaf6ee;border:1px solid #4c9367}.sub-player.pending.outgoing{background:#fff4e1;border:1px solid #d6a650}.sub-player.pending small{color:#61724f;font-weight:600}.sub-player.outgoing small{color:#997426}.sub-status{margin-top:18px;padding:12px;border-radius:8px;background:#f0f6f2;font-size:12px;color:#35644a}.sub-status.unbalanced{background:#fff4e1;color:#916622}.sub-hint{font-size:11px!important;margin:14px 0 0!important;line-height:1.6}.sub-empty{padding:12px;font-size:12px}@media(max-width:450px){dialog:has(.sub-board){padding:20px 14px}.sub-board{gap:9px}.sub-player{padding:10px 6px;gap:5px;min-height:65px}.sub-player>b{font-size:19px;width:24px}.sub-player>span:not(.sub-arrow){font-size:12px}.sub-player small{font-size:9px}.sub-column h3{font-size:10px;letter-spacing:.5px}.sub-arrow{font-size:12px}}
/* WBCA score-entry identity: navy, association red, condensed headings. */
:root{--wbca-navy:#1c2431;--wbca-red:#911a1c;--wbca-paper:#fbfbfc;--wbca-border:#e2e3e6}
body{background:#f1f2f4;color:var(--wbca-navy);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.studio{border-bottom-color:var(--wbca-border)}.studio b span{background:#f7e9e9;color:var(--wbca-red)}main{background:var(--wbca-paper);border-radius:10px;box-shadow:0 12px 45px #1c24310e;border:1px solid var(--wbca-border)}.apphead,.phone .apphead{position:relative;display:flex;justify-content:center;background:var(--wbca-navy);border-top:4px solid var(--wbca-red);border-bottom:0;padding:11px 22px!important}.brand{display:flex;flex-direction:column;gap:7px;color:white;font-size:inherit}.logo-card{width:160px;padding:4px;background:white;border-radius:5px}.logo-card img{display:block;width:100%;height:auto}.brand>span{font-family:Inter,sans-serif;font-size:11px;line-height:1.3;letter-spacing:2.2px;font-weight:700}.demo{position:absolute;left:23px;top:50%;transform:translateY(-50%);color:#c2c7cf;font-size:9px;max-width:125px;line-height:1.7}.apphead #help{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:#ffffff0a;border-color:#ffffff30;color:#fff}.gamehead{background:var(--wbca-paper)}h1,h2,dialog h2,.sectiontitle h2{font-family:"Barlow Condensed",sans-serif;color:var(--wbca-navy);font-weight:600;letter-spacing:0}h1{font-size:28px}.sectiontitle h2{font-size:21px}dialog h2{font-size:27px}h1 span{color:#92949b}.eyebrow{color:#8b6668}.saved{color:#637080}.scoreboard{background:var(--wbca-navy);border-radius:8px}.team>span{color:#b7bdc8}.team b{font-weight:600}.team strong{font-family:"Barlow Condensed",sans-serif;font-size:62px;font-weight:600}.clock #clockDisplay{color:white;font-family:"Barlow Condensed",sans-serif;font-size:40px;letter-spacing:1px}.clock button{color:#d4d7df}.clock .clocktoggle{background:#ffffff15;border:1px solid #ffffff12}.operator{color:#667184}.operator span{color:#8b9099}nav{border-bottom-color:var(--wbca-border);background:var(--wbca-paper)}nav .active{border-bottom-color:var(--wbca-red);color:var(--wbca-red)}.panel{border-color:var(--wbca-border);background:white;border-radius:8px}.switch button{background:#f0f1f3;color:#626b77;border-radius:6px}.switch .active{background:var(--wbca-navy);color:white}.player.selected{border-color:var(--wbca-red);background:#fbf0f0}.player b{font-family:"Barlow Condensed",sans-serif;font-size:28px}.player.selected b{color:var(--wbca-red)}.context{background:#f1f2f5;color:#5b6470}.context b{color:var(--wbca-navy)}.actiongrid button.made{background:#edf0f5;border-color:#d7dde6;color:var(--wbca-navy)}.actiongrid button.miss{background:#fbf2f2;border-color:#ead8d9;color:#8b3539}.primary,.primary:hover{background:var(--wbca-red);color:white}.primary:hover{background:#761416}.play .mark{background:#edf0f5;color:var(--wbca-navy)}.play{border-bottom-color:var(--wbca-border)}.logpreview{background:var(--wbca-paper)}.note{color:#7d8490}.court{background:#faf8f3}.court line,.court path,.court circle,.court rect{stroke:#b9b3a6}.court .shotmade{fill:var(--wbca-navy);stroke:white}.court .shotmiss{stroke:var(--wbca-red)}button:focus-visible{outline-color:#bd6265}dialog{border-radius:10px;color:var(--wbca-navy)}dialog::backdrop{background:#1c243180}.sub-player.incoming small{color:#35644a}.sub-status{color:#35644a}#toast{background:var(--wbca-navy)}footer{border-color:var(--wbca-border)}
@container(max-width:650px){.logo-card{width:128px}.brand>span{font-size:9px;letter-spacing:1.8px}.brand{gap:5px}.apphead{padding:9px 16px!important}h1{font-size:23px!important}.sectiontitle h2{font-size:19px}.team strong{font-size:42px!important}.clock #clockDisplay{font-size:32px!important}.player b{font-size:24px}.demo{display:none}.apphead #help{right:16px;padding:8px 12px}}
/* Courtside workspace: both rosters remain visible around the live court. */
.courtside-workspace{display:grid;grid-template-columns:minmax(190px,1fr) minmax(300px,1.5fr) minmax(190px,1fr);gap:16px;padding:20px 25px;align-items:start}.roster-panel{padding:15px}.roster-heading span{font-size:10px;letter-spacing:1.5px;color:#8c6b6d;font-weight:700}.roster-heading h2{font-size:25px;margin:4px 0 12px}.roster-controls{display:flex;flex-direction:column;gap:6px}.roster-controls button{font-size:11px;padding:10px 5px}.roster-label{font-size:9px;letter-spacing:1.1px;color:#808793;display:flex;justify-content:space-between;margin:17px 0 7px}.roster-player{display:flex;align-items:center;width:100%;gap:12px;margin:5px 0;padding:9px 10px;text-align:left;border-radius:6px}.roster-player>b{font-family:'Barlow Condensed',sans-serif;font-size:25px;width:28px;text-align:center}.roster-player>span{font-size:12px;flex:1;font-weight:600}.roster-player small{display:block;font-size:9px;color:#88909a;margin-top:4px;font-weight:400}.roster-player i{font-style:normal;font-size:10px;color:var(--wbca-red)}.roster-player.selected{background:#fbefef;border-color:var(--wbca-red)}.roster-player:disabled{opacity:.6;background:#f6f7f9}.live-court-panel{padding:16px}.live-court-panel .context{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.context>span{font-size:10px;color:#858c96}.court-instruction{font-size:11px;color:#737c88;margin-bottom:10px}.live-court-panel .court{max-height:300px;width:100%}.court .pending-location{stroke:#911a1c;stroke-width:3;fill:#911a1c18}.court .pending-location-center{fill:#911a1c;stroke:white}.shot-type,.shot-result,.free-throws{display:flex;gap:8px;margin-top:10px}.shot-type button{flex:1;padding:9px;font-size:11px;background:#f3f4f6}.shot-type .active{background:#1c2431;color:white;border-color:#1c2431}.shot-result button{flex:1;font-weight:700;padding:14px}.shot-result #inlineMade{background:#1c2431;color:white;border-color:#1c2431}.shot-result #inlineMiss{color:#911a1c;background:#fbefef;border-color:#e2bfc0}.shot-status{font-size:10px;line-height:1.5;min-height:30px;color:#848b95;margin:8px 0}.shot-status button{border:0;padding:0;background:none;color:#911a1c;text-decoration:underline;font-size:10px}.free-throws button{flex:1;font-size:11px;padding:10px}.live-court-panel .actions{margin-top:10px;gap:6px}.live-court-panel .actions button{padding:11px 2px;font-size:10px}.home-roster{grid-column:1;grid-row:1}.live-court-panel{grid-column:2;grid-row:1}.away-roster{grid-column:3;grid-row:1}
@container(max-width:760px){.courtside-workspace{grid-template-columns:1fr 1fr;gap:9px;padding:12px}.home-roster{grid-column:1;grid-row:1}.away-roster{grid-column:2;grid-row:1}.live-court-panel{grid-column:1/-1;grid-row:2}.roster-panel{padding:10px!important}.roster-heading h2{font-size:20px}.roster-player{gap:5px;padding:6px 5px}.roster-player>b{font-size:22px;width:24px}.roster-player>span{font-size:11px}.roster-controls button{font-size:10px}.roster-label{margin-top:12px}.roster-player small{font-size:8px}.roster-player i{display:none}.live-court-panel .court{max-height:310px}}
.stacked-box{background:white;border:1px solid var(--wbca-border);border-radius:8px;margin:20px 0;overflow:hidden}.box-heading{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--wbca-border)}.box-heading span{font-size:10px;letter-spacing:1.5px;color:#8d7172}.box-heading h2{font-size:25px;margin-top:5px}.box-heading>strong{font:600 36px 'Barlow Condensed',sans-serif}.team-metrics{display:grid;grid-template-columns:1fr 1fr;padding:10px 20px;column-gap:35px}.team-metrics>div{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid #eee;font-size:12px}.team-metrics span{color:#747c85}.box-mode{background:#f6f2f3;padding:5px;border-radius:6px}.box-mode .active{background:white;color:#911a1c;box-shadow:0 1px 5px #0001}@container(max-width:650px){.team-metrics{grid-template-columns:1fr}.box-heading{padding:15px}}
.scoreboard .score-timeout,.clock .possession-toggle{background:#ffffff12;border:1px solid #ffffff30;color:white;min-height:44px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;margin-top:6px}.score-timeout span{font-size:11px}.score-timeout small{font-size:10px;color:#c6ccd6}.clock .possession-toggle{width:100%;gap:10px}.possession-toggle span{font-size:8px;letter-spacing:1px}.possession-toggle b{font-size:24px;line-height:24px}.scoreboard .score-timeout:hover,.clock .possession-toggle:hover{background:#ffffff25}.scoreboard .team{justify-content:center}.scoreboard .clock{justify-content:center}
@container(max-width:650px){.scoreboard .score-timeout{padding:7px 9px;gap:3px;flex-direction:column}.score-timeout span{font-size:10px}.score-timeout small{font-size:9px}.clock .possession-toggle{padding:6px;gap:5px}.possession-toggle span{font-size:7px;letter-spacing:.5px}}
/* Compact controls on a light scoreboard. */
.scoreboard{background:#eef1f5;color:#1c2431;border:1px solid #dce1e8;column-gap:14px}.scoreboard .team>span,.scoreboard .clock button{color:#647084}.scoreboard .clock #clockDisplay{color:#1c2431}.scoreboard .team{align-items:center}.scoreboard .score-timeout,.clock .possession-toggle{width:auto;min-height:36px;padding:7px 12px;margin:8px auto 0;background:#fff5df;border-color:#e8d6a5;color:#73561d;gap:7px}.score-timeout small{color:#816c42}.clock .possession-toggle{background:#e8e4f6;border-color:#cfc5ea;color:#594282;max-width:140px}.scoreboard .score-timeout:hover{background:#f9eac9}.clock .possession-toggle:hover{background:#ddd4f0}.scoreboard .clock .clocktoggle{background:#23735c;color:white;border-color:#23735c;padding:8px 15px;border-radius:6px}.scoreboard .clock .clocktoggle:hover{background:#195942}.stat-section-heading{display:block;width:100%;margin:18px 0 12px;padding:10px 12px;background:#f1f2f5;border-radius:5px;color:#596577;font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:1px}.shooting-buttons,.other-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shooting-buttons button,.other-stats button{min-height:52px;font-size:12px;padding:12px 7px}.shooting-buttons .made{background:#eaf4ee;color:#285b43;border-color:#c7ddcf}.shooting-buttons .miss{background:#fbefef;color:#8a393d;border-color:#e8cbd0}.shooting-buttons .chosen{outline:2px solid #911a1c;outline-offset:1px}.live-court-panel .court-instruction{margin-top:18px;line-height:1.6}.court .shot-zone{fill:#7099bf25;stroke:none;pointer-events:none}.timeout-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.timeout-choices button{padding:22px 12px;background:#fff5df;border-color:#e8d6a5;color:#73561d}.timeout-choices b,.timeout-choices span{display:block}.timeout-choices b{font-size:18px}.timeout-choices span{font-size:11px;margin-top:9px}@container(max-width:650px){.scoreboard{column-gap:7px}.scoreboard .score-timeout{padding:7px 9px}.clock .possession-toggle{padding:6px 9px;gap:5px}.scoreboard .clock .clocktoggle{padding:7px 9px;font-size:10px}}
.scoreboard .clock .possession-toggle{color:#594282}
/* Fixed iPad landscape canvas, scaled as a whole to fit the preview window. */
.studio{height:68px;padding:12px 24px;flex-wrap:nowrap}.preview-label{font-size:12px;color:#647084}.studio small{display:block}#ipadPreview{position:relative;margin:16px auto}.ipad-bezel{position:absolute;left:0;top:0;width:1060px;height:804px;padding:18px;background:#20242b;border-radius:30px;transform-origin:top left;box-shadow:0 12px 40px #15273830}.ipad-bezel #device{width:1024px;max-width:none;height:768px;min-height:0;margin:0;border:0;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}.ipad-bezel .apphead{height:48px;min-height:48px;padding:5px 16px!important}.ipad-bezel .brand{flex-direction:row;gap:12px}.ipad-bezel .logo-card{width:90px;padding:2px}.ipad-bezel .brand>span{font-size:9px}.ipad-bezel .demo{font-size:8px}.ipad-bezel .apphead #help{padding:5px 10px}.ipad-bezel .gamehead{padding:8px 18px;height:49px;min-height:49px}.ipad-bezel .gamehead h1{font-size:22px;margin:0}.ipad-bezel .gamehead .eyebrow,.ipad-bezel .gamehead p{display:none}.ipad-bezel .scoreboard{margin:0 14px;padding:8px 18px;min-height:124px}.ipad-bezel .team{gap:3px}.ipad-bezel .team strong{font-size:42px}.ipad-bezel .clock #clockDisplay{font-size:32px;padding:0}.ipad-bezel .clock #period{padding:0}.ipad-bezel .score-timeout,.ipad-bezel .clock .possession-toggle{margin-top:4px;min-height:32px;padding:4px 12px}.ipad-bezel .clock .clocktoggle{margin-top:3px;padding:5px 12px}.ipad-bezel .operator{margin:6px 18px;font-size:9px}.ipad-bezel nav{padding:0 18px;flex-shrink:0}.ipad-bezel nav button{padding:10px 0}.ipad-bezel #view{flex:1;min-height:0;overflow:auto}.ipad-bezel #view:has(.courtside-workspace){overflow:hidden;display:flex;flex-direction:column}.ipad-bezel .courtside-workspace{flex:1;min-height:0;grid-template-columns:252px minmax(0,1fr) 252px;padding:10px 14px;gap:10px;align-items:stretch}.ipad-bezel .roster-panel,.ipad-bezel .live-court-panel{padding:10px;overflow:auto;min-height:0}.ipad-bezel .roster-heading h2{font-size:22px;margin:2px 0 7px}.ipad-bezel .roster-heading span{font-size:9px}.ipad-bezel .roster-controls{flex-direction:row;gap:5px}.ipad-bezel .roster-controls button{flex:1;font-size:10px;padding:8px 3px;min-height:36px}.ipad-bezel .roster-label{margin:10px 0 5px}.ipad-bezel .roster-player{min-height:36px;padding:4px 7px;margin:4px 0;gap:9px}.ipad-bezel .roster-player>b{font-size:22px}.ipad-bezel .roster-player small{margin-top:2px}.ipad-bezel .context{padding:7px 10px;margin-bottom:8px;gap:3px}.ipad-bezel .stat-section-heading{margin:8px 0;padding:7px 10px;font-size:10px}.ipad-bezel .shooting-buttons,.ipad-bezel .other-stats{gap:6px}.ipad-bezel .shooting-buttons button,.ipad-bezel .other-stats button{min-height:44px;padding:9px 4px;font-size:11px}.ipad-bezel .live-court-panel>.note{font-size:9px;line-height:1.4;margin:8px 0}.ipad-bezel .logpreview{display:none}.ipad-bezel footer{padding:5px;flex-shrink:0;font-size:8px}.ipad-bezel .page{padding:14px}.ipad-bezel .live-court-panel .court{max-height:250px}.ipad-bezel .court-instruction{margin-top:10px}.ipad-bezel .shot-status{min-height:0}
.ipad-bezel .scoreboard{min-height:106px}.ipad-bezel .clock{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:8px}.ipad-bezel .clock #period,.ipad-bezel .clock #clockDisplay{grid-column:1/-1}.ipad-bezel .clock .clocktoggle,.ipad-bezel .clock .possession-toggle{margin:4px 0 0;min-height:32px}.ipad-bezel .other-stats{grid-template-columns:repeat(3,1fr)}.ipad-bezel .roster-player{min-height:34px;margin:3px 0;padding:3px 7px}.ipad-bezel .roster-label{margin:7px 0 4px}
.ipad-bezel .gamehead{height:34px;min-height:34px;padding:4px 18px}.ipad-bezel .gamehead h1{font-size:20px}
.ipad-bezel .live-court-panel,.ipad-bezel .roster-panel{padding-bottom:3px}.ipad-bezel .roster-player{margin:2px 0}.ipad-bezel .live-court-panel>.note{margin:5px 0}dialog:has(#shotPopup){max-width:500px;max-height:calc(100vh - 36px);overflow:auto}#shotPopup .court{max-height:min(400px,55vh)}
dialog:has(.shot-followup){max-width:610px;padding:20px 24px}dialog:has(.shot-followup) p{margin:8px 0 12px;font-size:12px}dialog:has(.shot-followup) #shotPopup .court{max-height:min(300px,36vh)}.shot-followup h3{font-size:12px;margin:14px 0 8px}.shot-followup-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.shot-followup-row button{min-height:52px;padding:6px 3px}.shot-followup-row b{display:block;font-size:18px}.shot-followup-row small{display:block;font-size:9px;margin-top:3px}.shot-followup-row button:last-child b{font-size:11px}.shot-followup-row .selected{background:#eaf4ee;border-color:#23735c}.followup-team{font-size:10px;color:#737e8c;margin:9px 0 5px}#shotProgress{font-size:11px;color:#647084;margin-top:12px}dialog:has(.shot-followup) .modalactions{margin-top:12px}
.ipad-bezel .clock{grid-template-columns:auto auto;align-items:center;column-gap:14px}.ipad-bezel .clock #period{grid-column:1/-1;grid-row:1}.ipad-bezel .clock #clockDisplay{grid-column:1;grid-row:2;font-size:38px}.ipad-bezel .clock #clockToggle{grid-column:2;grid-row:2;min-height:46px;min-width:122px;font-size:13px;padding:10px 16px;margin:0}.ipad-bezel .clock #possessionToggle{grid-column:1/-1;grid-row:3;justify-self:center;margin:5px auto 0}.ipad-bezel .score-timeout{flex-direction:column;gap:4px;min-height:42px;padding:6px 12px}
.ipad-bezel .score-edit{font:600 38px/1 'Barlow Condensed',sans-serif;background:transparent;border:1px dashed #b7c1cd;padding:0 10px;min-width:62px;border-radius:6px}.foul-status{display:flex;gap:8px;align-items:center;font-size:9px}.foul-status button{padding:3px 7px;font-size:10px;background:transparent;min-height:25px}.bonus{color:#87909b;font-size:8px;font-weight:600}.bonus.active{background:#f8df9b;color:#71521b;border-radius:4px;padding:4px}.ipad-bezel .score-timeout{min-height:30px;padding:4px 9px;flex-direction:row}.ipad-bezel .roster-player.foul-warning{background:#fff7dd;border-color:#dbbe6c}.ipad-bezel .roster-player.foul-danger{background:#fff0e6;border-color:#d98443}.ipad-bezel .roster-player.fouled-out{background:#fbe4e7;border-color:#b84b59}.roster-player.foul-warning small,.roster-player.foul-danger small,.roster-player.fouled-out small{color:#8e4029;font-weight:600}.score-quick{display:flex;gap:10px}.score-quick button{flex:1;min-height:50px;font-size:20px}.score-gap{margin:0;padding:10px 16px;background:#fff6dd;color:#705821;font-size:11px}
.ipad-bezel .apphead{height:40px;min-height:40px}.ipad-bezel .gamehead{height:30px;min-height:30px}.ipad-bezel .scoreboard{padding-top:4px;padding-bottom:4px}.ipad-bezel .team{gap:2px}

.foul-options{display:flex;gap:8px}.foul-options button{flex:1;min-height:42px;font-size:12px}.foul-options .selected{background:#eaf4ee;border-color:#23735c}dialog:has(.and-one) #shotPopup .court{max-height:min(240px,28vh)}

.court .shotmade{fill:#23834b;stroke:white;stroke-width:2}.court .shotmiss{fill:none;stroke:#c52d35;stroke-width:3;stroke-linecap:round}.court .pending-location.shotmade{fill:#23834b;stroke:white;stroke-width:2}.court .pending-location.shotmiss{fill:none;stroke:#c52d35;stroke-width:4}

.shooting-foul-button{width:100%;margin:0 0 10px;background:#fff4df;border-color:#d9bc76;color:#70501c;min-height:42px;font-weight:600;font-size:12px}

dialog{max-height:calc(100vh - 32px);overflow:auto}.modal-clock-bar{position:sticky;top:-20px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#f0f3f5;border:1px solid #dce2e7;border-radius:8px;padding:10px 12px;margin:4px 28px 18px 0}.modal-clock-bar>div{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}.modal-clock-bar small{grid-column:1/-1;font-size:9px;letter-spacing:1px;color:#657080}.modal-clock-bar strong{font:600 30px/1.2 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}.modal-clock-bar span{font-size:10px;color:#657080}#modalClockToggle{min-height:42px;background:#27745b;color:white;border-color:#27745b;font-size:12px;white-space:nowrap}#modalClockToggle.running{background:#c52d35;color:#fff;border-color:#c52d35}


.play .playbody{line-height:1.6;min-width:0}.play>button{flex-shrink:0}

.score-value-row{position:relative;display:flex;align-items:center;justify-content:center}.score-sync-info{position:absolute;left:calc(100% + 5px);top:2px;border:1px solid #d9bc76;border-radius:50%;background:#fff4df;color:#79551c;font-size:11px;font-weight:700;padding:0;width:24px;height:24px;min-width:24px}.score-sync-info[hidden]{display:none}

/* Side-by-side team comparison, matching the public box score. */
.box-mode{display:flex;width:100%;gap:0;background:#f8f5f5;padding:4px}
.box-mode button{flex:1;border:0;border-radius:2px;background:transparent;color:#796568;padding:12px}
.box-mode button.active{background:white;color:#352426;box-shadow:0 1px 4px #35242612}
.team-comparison{background:white;border:1px solid #e5dfe0;padding:18px 20px;margin:20px 0 12px;box-shadow:0 1px 3px #35242608}
.team-comparison h2{font:600 19px Inter,sans-serif;color:#352426;margin:0 0 20px}
.team-comparison table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;color:#352426}
.team-comparison th,.team-comparison td{padding:10px 16px;border-bottom:1px solid #e8e1e2;background:white;font-variant-numeric:tabular-nums}
.team-comparison thead th{font-weight:500;color:#796568;padding-top:10px;padding-bottom:15px}
.team-comparison tr>*:first-child{text-align:right;width:36%}
.team-comparison tr>*:nth-child(2){text-align:center;width:28%;font-weight:400;color:#796568}
.team-comparison tr>*:last-child{text-align:left;width:36%}
.team-comparison tbody tr:last-child>*{border-bottom:0}

/* Align the three bottom scoreboard controls on a shared baseline. */
.ipad-bezel .scoreboard{align-items:stretch}
.ipad-bezel .scoreboard .clock{grid-template-rows:auto 1fr auto}
.ipad-bezel .clock #possessionToggle{align-self:end;margin-bottom:0}
.ipad-bezel .scoreboard .team .score-timeout{margin-top:auto;margin-bottom:0}

/* ── Public demo shell ─────────────────────────────────────────────────────── */
.studio{position:sticky;top:0;z-index:30;height:auto;min-height:64px;padding:10px 20px;gap:14px;flex-wrap:wrap}
.studio-brand{min-width:0}
.studio-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.studio-actions button{font:600 13px Inter,sans-serif;border:1px solid var(--wbca-border);background:#fff;color:var(--wbca-navy);border-radius:10px;padding:9px 13px;min-height:40px;cursor:pointer}
.studio-actions button:focus-visible,.guide button:focus-visible,.guide a:focus-visible{outline:3px solid #2f6fdb;outline-offset:2px}
.layout-toggle{display:inline-flex;border:1px solid var(--wbca-border);border-radius:10px;overflow:hidden}
.layout-toggle button{border:0!important;border-radius:0!important;min-height:38px!important}
.layout-toggle button[aria-pressed="true"]{background:var(--wbca-navy)!important;color:#fff!important}
.studio-actions .feedback-cta{background:var(--wbca-red);border-color:var(--wbca-red);color:#fff}
.demo-notice{display:flex;gap:10px;align-items:center;justify-content:center;padding:7px 16px;background:#fff6dc;border-bottom:1px solid #f0dfa6;color:#5b4710;font-size:12.5px;line-height:1.4;text-align:left}
.demo-notice b{background:#5b4710;color:#fff6dc;border-radius:5px;padding:2px 7px;font-size:11px;letter-spacing:.8px;flex:none}
.crash-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 16px;background:#fde8e8;color:#7b1414;font-size:13px}
.crash-bar[hidden]{display:none}
.crash-bar button{border:1px solid #d9a3a3;background:#fff;border-radius:8px;padding:7px 12px;font:600 12px Inter,sans-serif;cursor:pointer}
.saved.unsaved{color:#b42318}
.tab-lock{position:fixed;inset:0;z-index:25;background:#14202d99;backdrop-filter:blur(2px);display:grid;place-items:center;padding:16px}
.tab-lock[hidden]{display:none}
.tab-lock-card{background:#fff;border-radius:16px;padding:24px;max-width:420px;box-shadow:0 30px 80px #0005}
.tab-lock-card h2{margin:0 0 8px;font:700 22px "Barlow Condensed",sans-serif}
.tab-lock-card p{line-height:1.5;margin:0 0 18px;font-size:14px}
.tab-lock-card button{width:100%;min-height:46px;border:0;border-radius:11px;background:var(--wbca-navy);color:#fff;font:600 15px Inter,sans-serif;cursor:pointer}
#toast{z-index:60}
dialog #toast{position:fixed}

/* Team crests: fictional stand-ins for school/tenant logos */
.crest{width:30px;height:35px;flex:none}
.crest.small{width:22px;height:26px;display:block;margin:0 auto 2px}
.crest-shield{stroke-width:2}
.crest.home .crest-shield{fill:#1f4f3a;stroke:#d6b25e}
.crest.away .crest-shield{fill:#1d3f73;stroke:#9cc2ea}
.crest-mark{fill:#d6b25e}
.crest-wave{fill:none;stroke:#9cc2ea;stroke-width:2.6;stroke-linecap:round}
.crest-text{font:700 8px Inter,sans-serif;fill:#fff;text-anchor:middle;letter-spacing:.5px}
.roster-heading{display:flex;align-items:flex-start;gap:8px}
.roster-heading .crest{width:22px;height:26px;margin-top:2px}

/* Fit-screen layout: no device frame, natural page scroll */
@media(max-width:700px){
  .studio{padding:10px 16px;position:relative}
  .studio-brand small{display:none!important}
  .studio-actions{width:100%;justify-content:flex-start}
  .studio-actions button{padding:8px 10px;font-size:12.5px}
}
@media(max-width:420px){.layout-toggle{order:5}.studio-actions #reset{margin-left:auto}}

/* Feedback form */
.feedback-form textarea,.feedback-form input:not([type=checkbox]){width:100%;box-sizing:border-box;border:1px solid #c9ced6;border-radius:10px;padding:10px 12px;font:14px/1.45 Inter,sans-serif;color:var(--wbca-navy);background:#fff}
.feedback-form textarea{resize:vertical;min-height:120px}
.feedback-form textarea:focus,.feedback-form input:focus{outline:3px solid #2f6fdb33;border-color:#2f6fdb}
.feedback-form label span{color:#7a838f;font-weight:400}
.feedback-form label .req{color:var(--wbca-red);font-weight:600}
.fb-count{text-align:right;font-size:11px;color:#7a838f;margin-top:3px}
.fb-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.fb-pair{grid-template-columns:1fr}}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-check{display:flex!important;gap:8px;align-items:center;font-size:13px!important;margin-top:16px!important}
.fb-disclose{font-size:12px;color:#5c6672;margin:6px 0 10px!important;line-height:1.45}
.fb-status{font-size:13px;border-radius:9px;min-height:0}
.fb-status.sending,.fb-status.error{padding:9px 12px;margin:6px 0}
.fb-status.sending{background:#eef3fb;color:#1f3f73}
.fb-status.error{background:#fde8e8;color:#8a1616}
#fbSend:disabled{opacity:.6;cursor:progress}

/* ── Instructions drawer ───────────────────────────────────────────────────── */
.guide{max-width:1280px;margin:0 auto;padding:28px 24px 64px;box-sizing:border-box;animation:guideIn .3s cubic-bezier(.2,.8,.2,1)}
.guide[hidden]{display:none}
@keyframes guideIn{from{transform:translateY(12px);opacity:0}}
.g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:6px}
.g-head h2{margin:2px 0 0;font:700 clamp(30px,4vw,44px)/1.02 "Barlow Condensed",sans-serif;outline:none}
.g-eyebrow{font-size:11px;letter-spacing:1.4px;color:var(--wbca-red);font-weight:700}
.g-close,.g-back{min-height:44px;padding:0 18px;border-radius:11px;border:0;background:var(--wbca-navy);color:#fff;font:600 14px Inter,sans-serif;cursor:pointer;flex:none}
.g-intro{font-size:16px;line-height:1.55;margin:8px 0 16px;color:#3c4653;max-width:760px}
.g-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;position:sticky;top:64px;z-index:5;background:#f1f2f4;padding:10px 0}
.g-jump a{font-size:13px;font-weight:600;color:var(--wbca-navy);text-decoration:none;background:#eef0f3;border-radius:999px;padding:6px 11px}
.guide section>h3{grid-column:1/-1;font:700 26px "Barlow Condensed",sans-serif;margin:26px 0 4px;letter-spacing:.3px}
.g-card{background:#fff;border:1px solid var(--wbca-border);border-radius:16px;padding:14px;display:flex;flex-direction:column}
.g-card .g-caps{flex:1}
.g-card header{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.g-card h3{margin:0;font-size:16px}
.g-tag{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;border-radius:6px;padding:3px 7px;background:#eef0f3;color:#4a5361;flex:none}
.g-viewport{position:relative;overflow:hidden;border-radius:10px;background:#20242b}
.g-caps{margin:10px 0 6px;padding-left:22px;font-size:13px;line-height:1.45;color:#5c6672}
.g-caps li{padding:2px 4px;border-radius:6px;transition:background .25s,color .25s}
.g-caps li.on{background:#fff4d6;color:var(--wbca-navy);font-weight:600}
.g-caps li.done{color:#8b94a0}
.g-controls{display:flex;gap:6px}
.g-controls button{flex:1;min-height:36px;border:1px solid var(--wbca-border);background:#fff;border-radius:9px;font:600 12px Inter,sans-serif;cursor:pointer;color:var(--wbca-navy)}
.g-ref dl{margin:0;display:grid;gap:8px}
.g-ref dl>div{background:#fff;border:1px solid var(--wbca-border);border-radius:11px;padding:10px 12px}
.g-ref dt{font-weight:700;font-size:13.5px}
.g-ref dd{margin:3px 0 0;font-size:13px;line-height:1.5;color:#4a5361}
.g-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--wbca-border);font-size:14px;color:#5c6672}
.g-foot p{margin:0}

/* Mini iPad stage used by the animated examples (440×300 design, scaled to fit) */
.m-stage{position:absolute;left:0;top:0;width:440px;height:300px;transform-origin:0 0;background:#f4f5f7;font:9px/1.25 Inter,sans-serif;color:var(--wbca-navy);overflow:hidden;user-select:none}
.m-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:5px 10px;background:#fff;border-bottom:1px solid #e3e5e9}
.m-score>span{display:flex;align-items:center;gap:6px;font-weight:700}
.m-score>span:last-child{justify-content:flex-end}
.m-score b{font:700 20px "Barlow Condensed",sans-serif}
.m-fouls{font-style:normal;font-size:7.5px;color:#6b7480;background:#f0f1f3;border-radius:4px;padding:1px 4px}
.m-clock{display:flex;flex-direction:column;align-items:center}
.m-clock small{font-size:6.5px;letter-spacing:.8px;color:#6b7480}
.m-clock b{font-size:19px}
.m-clockbtn{font-style:normal;background:#23834b;color:#fff;border-radius:5px;padding:2px 8px;font-size:8px;font-weight:600}
.m-ctrls{display:flex;justify-content:space-between;align-items:flex-end;padding:4px 10px;background:#fff;border-bottom:1px solid #e3e5e9}
.m-to{background:#fff4d6;border:1px solid #ecd590;border-radius:5px;padding:2px 6px;font-weight:600;font-size:7.5px}
.m-to small{font-weight:400;color:#6a5a26}
.m-poss{background:#efe9fb;border:1px solid #d6c8f3;border-radius:5px;padding:2px 8px;font-size:7px;color:#4b2e8a}
.m-poss b{font-size:11px}
.m-body{display:none;height:206px}
.m-body.show{display:grid}
.m-body[data-screen="main"]{grid-template-columns:96px 1fr 96px;gap:6px;padding:6px}
.m-roster{display:flex;flex-direction:column;gap:3px}
.m-roster small{font-size:6.5px;letter-spacing:.8px;color:#7a838f;font-weight:700}
.m-chip{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #dfe2e6;border-radius:5px;padding:3px 5px;font-size:7.5px;transition:background .2s,border-color .2s,transform .15s}
.m-chip b{font:700 11px "Barlow Condensed",sans-serif;min-width:12px}
.m-chip.picked{background:#fbeaea;border-color:var(--wbca-red);box-shadow:0 0 0 1px var(--wbca-red)}
.m-chip.off{opacity:.35}
.m-chip.wide{flex:1;justify-content:center;padding:5px}
.m-subchip{justify-content:center;font-weight:600}
.m-pad{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #e3e5e9;border-radius:7px;padding:6px}
.m-btn{display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #dfe2e6;border-radius:5px;padding:4px;font-size:7.5px;font-weight:600;background:#fff;transition:transform .15s}
.m-btn.made{background:#eaf5ee;border-color:#b9dcc6;color:#1d6b3e}
.m-btn.miss{background:#fcecec;border-color:#efc1c3;color:#9d2229}
.m-btn.primary{background:var(--wbca-navy);color:#fff;border-color:var(--wbca-navy);margin-top:6px}
.m-btn.big{flex:1;padding:12px 6px;font-size:9px}
.m-btn.foulbtn{background:#fff4d6;border-color:#ecd590;margin-bottom:4px}
.m-tabs{display:flex;gap:14px;padding:4px 10px;background:#fff;border-top:1px solid #e3e5e9;font-size:8px;color:#6b7480}
.m-tabs .on{color:var(--wbca-red);font-weight:700;box-shadow:0 2px 0 var(--wbca-red)}
.m-logview{padding:6px 10px;align-content:start}
.m-logrows{display:flex;flex-direction:column;gap:4px}
.m-logrow{display:grid;grid-template-columns:38px 22px 1fr auto;gap:5px;align-items:center;background:#fff;border:1px solid #e3e5e9;border-radius:6px;padding:5px 6px;font-size:8px}
.m-logrow small{font-size:6.5px;color:#7a838f}
.m-logrow i{font-style:normal;border:1px solid #dfe2e6;border-radius:4px;padding:2px 6px;font-weight:600}
.m-logrow.edited{animation:rowFlash 1.2s}
@keyframes rowFlash{0%{background:#fff4d6}100%{background:#fff}}
.m-sheet{position:absolute;left:50%;top:14px;width:330px;max-height:272px;overflow:hidden;transform:translate(-50%,320px);background:#fff;border-radius:10px;box-shadow:0 18px 50px #0006;padding:7px 9px 9px;transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:2}
.m-sheet.open{transform:translate(-50%,0)}
.m-stage:has(.m-sheet.open)::after{content:"";position:absolute;inset:0;background:#1c243155;z-index:1}
.m-sheet-clock{display:flex;align-items:center;gap:6px;background:#f2f3f5;border-radius:6px;padding:3px 7px;font-size:7px}
.m-sheet-clock b{font-size:11px}
.m-sheet-clock i{margin-left:auto;font-style:normal;background:#23834b;color:#fff;border-radius:4px;padding:1px 6px}
.m-sheet h4{margin:5px 0 4px;font:700 12px "Barlow Condensed",sans-serif}
.m-court{display:block;width:100%;height:112px;transition:height .3s;background:#faf8f3;border-radius:6px}
.m-court rect,.m-court path,.m-court circle{fill:none;stroke:#b9b3a6;stroke-width:2.5}
.m-court .m-zone{fill:#7099bf25;stroke:none}
.m-court .m-spot{stroke:none}
.m-court .m-made{fill:#23834b;stroke:#fff;stroke-width:3;animation:pop .35s}
.m-court .m-miss{stroke:#c52d35;stroke-width:6;stroke-linecap:round;animation:pop .35s}
@keyframes pop{from{transform-box:fill-box;transform-origin:center;transform:scale(0)}}
.m-rowtitle{font-size:7px;font-weight:700;letter-spacing:.5px;color:#6b7480;margin:5px 0 2px;text-transform:uppercase}
.m-chiprow{display:flex;gap:3px}
.m-chiprow .m-chip{flex:1;flex-direction:column;gap:0;padding:3px 2px;font-size:6.5px}
.m-ftrow{display:flex;gap:6px;margin-top:8px}
.m-subs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-sheet .m-subs>div{display:flex;flex-direction:column;gap:3px}
.m-chip.pending-out{background:#fcecec;border-color:#c52d35}
.m-chip.pending-in{background:#eaf5ee;border-color:#23834b}
.m-field{display:flex;justify-content:space-between;border:1px solid #dfe2e6;border-radius:6px;padding:6px 8px;margin-top:5px;font-size:9px}
.m-field small{color:#6b7480}
.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.25);color:var(--wbca-red)}}
.flash{animation:flashBtn .5s}
@keyframes flashBtn{40%{transform:scale(.94);box-shadow:0 0 0 3px #2f6fdb55}}
.m-finger{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#ffffffcc;border:2px solid #1c2431;box-shadow:0 3px 10px #0004;z-index:5;opacity:0;transition:transform .5s cubic-bezier(.45,0,.2,1),opacity .2s;pointer-events:none}
.m-finger.show{opacity:1}
.m-finger::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #2f6fdb;opacity:0}
.m-finger.tap::after{animation:ripple .5s}
@keyframes ripple{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
.m-toast{position:absolute;left:50%;bottom:30px;transform:translate(-50%,10px);background:var(--wbca-navy);color:#fff;border-radius:7px;padding:5px 10px;font-size:8px;opacity:0;transition:opacity .2s,transform .2s;z-index:4;white-space:nowrap}
.m-toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
  .guide,.m-sheet,.m-finger,.m-chip,.m-toast{animation:none!important;transition:none!important}
  .bump,.flash,.m-court .m-made,.m-court .m-miss,.m-finger.tap::after,.m-logrow.edited{animation:none!important}
}
.fb-check input{width:18px!important;height:18px;margin:0!important;flex:none;padding:0!important}
.m-court.short{height:52px}
.m-court .m-miss{stroke-width:9}
/* Running clock: the Pause control is red */
.scoreboard .clock .clocktoggle.running{background:#c52d35;border-color:#c52d35}
.scoreboard .clock .clocktoggle.running:hover,#modalClockToggle.running:hover{background:#a3232a;border-color:#a3232a}
.m-clockbtn.running,.m-sheet-clock i.running{background:#c52d35}
@media(max-width:700px){.guide{padding:20px 16px 48px}.g-jump{top:0}.g-head .g-close{width:100%}}
/* The header (instructions, feedback, new demo) stays usable above the read-only tab lock */
body.guide-open .tab-lock{display:none}
.play button.trash{display:grid;place-items:center;width:32px;height:32px;padding:0;color:#b42318;border-color:#f1c7c4;background:#fff}
.play button.trash svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.play button.trash:hover{background:#fdecea}
.play>button+button{margin-left:-6px}
.action-toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,10px);display:flex;align-items:center;gap:14px;background:var(--wbca-navy);color:#fff;font-size:13px;padding:10px 10px 10px 18px;border-radius:12px;box-shadow:0 10px 30px #0003;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:61}
.action-toast.visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.action-toast button{border:0;background:#fff;color:var(--wbca-navy);font:700 13px Inter,sans-serif;border-radius:8px;padding:7px 14px;cursor:pointer}

/* Instructions library: search, sections, per-item walkthrough cards */
.g-toolbar{position:sticky;top:64px;z-index:5;background:#f1f2f4;padding:12px 0 10px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.g-toolbar .g-jump{position:static;padding:0;margin:0;background:none}
.g-search{position:relative;flex:1 1 380px;max-width:620px}
.g-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:#6b7480;stroke-width:2;stroke-linecap:round}
.g-search input{width:100%;box-sizing:border-box;height:48px;border:1px solid #c9ced6;border-radius:12px;padding:0 44px;font:15px Inter,sans-serif;color:var(--wbca-navy);background:#fff}
.g-search input:focus{outline:3px solid #2f6fdb33;border-color:#2f6fdb}
.g-search input::-webkit-search-cancel-button{display:none}
.g-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#eef0f3;font-size:18px;cursor:pointer;color:var(--wbca-navy)}
.g-clear[hidden]{display:none}
.g-count{font-size:13px;color:#6b7480;margin:2px 0 0}
.g-section{scroll-margin-top:130px}
.g-section[hidden],.g-card[hidden],.g-empty[hidden]{display:none}
.g-blurb{margin:0 0 14px;color:#5c6672;font-size:14px}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));gap:18px}
.g-sum{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#3c4653}
.g-empty{background:#fff;border:1px dashed #c9ced6;border-radius:14px;padding:22px;margin-top:20px;font-size:14px;color:#4a5361}
@media(max-width:700px){.g-toolbar{top:0}}
/* Mini stage additions */
.m-score>span:first-child::before{content:"MR";font-size:9px}
.m-score>span:last-child::after{content:"LV";font-size:9px}
.m-sync{display:none;font-style:normal;background:#fff4d6;border:1px solid #ecd590;border-radius:4px;padding:0 4px;font-size:8px;font-weight:700;color:#79551c}
.m-sync.show{display:inline-block}
.m-rbtns{display:flex;gap:3px}
.m-rbtns .m-chip{flex:1;padding:3px 2px}
.m-undo{grid-column:1/-1;background:#f2f3f5}
.m-logrow{grid-template-columns:38px 22px 1fr auto auto}
.m-logrow i.m-trash{display:grid;place-items:center;padding:2px 3px;color:#b42318;border-color:#f1c7c4}
.m-logrow i.m-trash svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.m-logrow.removing{animation:rowOut .5s forwards}
@keyframes rowOut{to{opacity:0;transform:translateX(30px)}}
.m-toast i{display:none;font-style:normal;margin-left:8px;background:#fff;color:var(--wbca-navy);border-radius:4px;padding:1px 6px;font-weight:700}
.m-toast.undo i{display:inline-block}
.m-later{margin-top:6px;background:#f2f3f5}
.m-note{font-size:8px;line-height:1.4;margin:5px 0;color:#4a5361}
.m-ftrow .m-btn.primary{margin-top:0}
.m-boxview,.m-shotview{padding:6px 10px;align-content:start;gap:4px;overflow:hidden}
.m-switch{display:flex;gap:4px;font-size:7.5px;font-weight:600}
.m-switch span{border:1px solid #dfe2e6;border-radius:5px;padding:2px 7px;background:#fff}
.m-switch span.on,.m-switch span.picked{background:var(--wbca-navy);color:#fff;border-color:var(--wbca-navy)}
.m-switch .m-filter{margin-left:auto}
.m-boxview table{width:100%;border-collapse:collapse;font-size:7px;margin-top:3px;background:#fff}
.m-boxview th,.m-boxview td{border-bottom:1px solid #eceef1;padding:2px 3px;text-align:right}
.m-boxview th:first-child,.m-boxview td:first-child{text-align:left}
.m-compare td:first-child{text-align:right!important}
.m-compare th{text-align:center!important;color:#6b7480}
.m-compare td:last-child{text-align:left}
.m-shotcourt .m-court{height:160px}
.m-legend{font-size:7px;color:#6b7480}
.m-legend .g{color:#23834b}.m-legend .r{color:#c52d35}

/* Header: brand · one two-sided view switch (centre) · feedback */
.studio{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.studio .studio-actions{justify-self:end}
.view-switch{display:flex;padding:4px;gap:4px;background:#e6e8ec;border-radius:14px;box-shadow:inset 0 1px 2px #0000000f}
.view-switch button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:10px;background:transparent;color:#4a5361;font:600 15px Inter,sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.view-switch button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.view-switch button:hover{color:var(--wbca-navy);background:#ffffff80}
.view-switch button[aria-pressed="true"]{background:var(--wbca-navy);color:#fff;box-shadow:0 2px 6px #1c243140}
.view-switch button:focus-visible{outline:3px solid #2f6fdb;outline-offset:2px}
/* Demo screen bar, directly above the iPad frame */
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;max-width:1060px;margin:14px auto 0;padding:0 16px;box-sizing:border-box}
.demo-bar button{font:600 13px Inter,sans-serif;min-height:40px;padding:0 14px;cursor:pointer;color:var(--wbca-navy)}
.demo-bar .layout-toggle{background:#fff}
.demo-bar .new-demo{border:1px solid #e3b4b4;background:#fff;border-radius:10px;color:#911a1c}
.demo-bar .new-demo:hover{background:#fbeaea}
#demoScreen[hidden]{display:none}
@media(max-width:700px){
  .studio{grid-template-columns:1fr auto;grid-template-areas:"brand actions" "switch switch";row-gap:10px}
  .studio-brand{grid-area:brand}.studio .studio-actions{grid-area:actions;width:auto}.view-switch{grid-area:switch}
  .view-switch button{flex:1;justify-content:center;padding:0 10px;font-size:14px}
}

/* Fit screen: the iPad layout without the frame, sized to the window */
.ipad-bezel.fit-canvas{padding:0;background:none;box-shadow:none;border-radius:14px}
.fit-canvas #device{border:1px solid var(--wbca-border);border-radius:14px;box-shadow:0 8px 30px #15273818}
/* Shooting stats: Made · no foul (wide) | Fouled | Missed · no foul (wide) | Fouled; free throws span below */
.shot-grid{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:6px}
.shot-col{font:700 9px Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;text-align:center;color:#6b7480;padding-bottom:1px}
.shot-col.made{color:#285b43}.shot-col.miss{color:#8a393d}
.shot-grid button{min-height:44px;font-size:12px;font-weight:600;padding:6px 4px;line-height:1.15}
.shot-grid button small{display:block;font-size:10px;font-weight:500;opacity:.85}
.shot-grid .made{background:#eaf4ee;color:#285b43;border-color:#c7ddcf}
.shot-grid .miss{background:#fbefef;color:#8a393d;border-color:#e8cbd0}
.shot-grid .fouled{font-size:11px;border-style:dashed;background:#fff}
.shot-grid .fouled.made{background:#f5faf7}.shot-grid .fouled.miss{background:#fdf7f7}
.shot-grid .ft{grid-column:span 2;min-height:38px}
.foul-switch{background:#fff8e6!important;border-color:#ecd590!important;color:#6a5216!important}
/* Centre panel fits the iPad height with no inner scroll */
.ipad-bezel .live-court-panel .context{flex-direction:row;align-items:baseline;gap:8px;padding:6px 10px;margin-bottom:6px}
.ipad-bezel .live-court-panel .stat-section-heading{margin:6px 0;padding:5px 10px}
.ipad-bezel .shot-grid button{min-height:48px;font-size:13px}
.ipad-bezel .shot-grid .fouled{font-size:11px}
.ipad-bezel .shot-grid .ft{min-height:34px}
.ipad-bezel .other-stats button{min-height:36px;padding:6px 4px}
.ipad-bezel .live-court-panel>.note{display:none}
/* Mini stage: four-column shooting grid like the real app */
.m-shots{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:3px}
.m-shots>i{font-style:normal;font-size:5px;font-weight:700;letter-spacing:.3px;text-align:center}
.m-shots>i.made{color:#1d6b3e}.m-shots>i.miss{color:#9d2229}
.m-shots .m-btn{padding:5px 2px;flex-direction:column;line-height:1.05}
.m-shots .m-btn small{font-size:5.5px;font-weight:500}
.m-shots .fouled{border-style:dashed;font-size:6.5px}
.m-shots .ft{grid-column:span 2;padding:3px}
.m-other{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.m-other .m-btn{padding:3px}
.m-other .m-undo{grid-column:span 3}
.m-switchbtn{margin-top:5px;background:#fff8e6!important;border-color:#ecd590!important;color:#6a5216!important}
.g-tip{background:#fff8e6;border:1px solid #ecd590;border-left:5px solid #c9971c;border-radius:12px;padding:14px 18px;margin:0 0 18px;max-width:900px}
.g-tip b{display:block;font:700 18px "Barlow Condensed",sans-serif;letter-spacing:.3px;color:#5b4710}
.g-tip p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#4a3c12}
.g-tip em{font-style:normal;font-weight:700}
.g-tip-example span{display:inline-block;margin-right:8px;background:#5b4710;color:#fff8e6;border-radius:5px;padding:1px 7px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}