:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#19312b;background:#f5f7f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{cursor:pointer}button{border:1px solid #dce3de;background:#fff;color:#243d34;border-radius:10px;min-height:44px;padding:0 16px;font-size:14px;font-weight:550}button:hover{background:#edf2ed}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #78a659;outline-offset:3px}header{height:88px;padding:0 36px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #e2e7e3}.brand{display:flex;align-items:center;gap:12px;font-size:25px;letter-spacing:-1px;font-weight:650}.mark{width:36px;height:36px;display:grid;place-items:center;background:#183e33;color:#c9ef9d;border-radius:11px;font-size:24px}.beta{font-size:10px;letter-spacing:2px;font-weight:600;color:#78877c;margin-left:4px}.header-right{display:flex;gap:8px;align-items:center}.header-right>span{font-size:13px;color:#7a867f;margin-right:15px}#save{background:#183e33;color:#fff;border-color:#183e33}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;max-width:1600px;margin:auto;padding:35px 32px;gap:32px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:650;color:#718476}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}#title{border:none;background:none;font-size:27px;letter-spacing:-.8px;font-weight:550;margin-top:9px;width:100%;color:#19312b;max-width:420px}.history{display:flex;gap:6px}.history button{padding:0 13px}.history button:first-child,.history button:nth-child(2){font-size:24px}.pitch-wrap{border-radius:16px;overflow:hidden;box-shadow:0 20px 36px -25px #14372988;background:#1b5144;padding:10px}#pitch{display:block;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:visible}.pitch-caption{display:flex;justify-content:space-between;color:#c6d9ce;font-size:11px;letter-spacing:.6px;padding:9px 13px 12px}.pitch-caption span{display:flex;align-items:center;gap:8px}.team-dot,.mini-dot{width:8px;height:8px;border-radius:50%;background:#d2eea3;display:inline-block}.away,.coral{background:#ebaa94}.interaction{display:flex;justify-content:space-between;font-size:13px;color:#6c7e73;margin-top:23px;gap:16px}.key{background:#e5ece6;padding:3px 7px;border-radius:5px;margin-left:5px}aside{border-left:1px solid #dfe6df;padding:10px 0 0 28px}h2{font-size:21px;letter-spacing:-.6px;font-weight:550;margin:14px 0 9px}.intro{font-size:14px;line-height:1.6;color:#718076;margin:0 0 29px}label{font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}select{width:100%;border:1px solid #dce4dc;border-radius:10px;background:#fff;color:#304537;padding:13px 10px;font-size:14px;min-height:46px}.setting{margin-bottom:22px}.divider{height:1px;background:#dfe6df;margin:27px 0}.help{font-size:13px;line-height:1.7;color:#718076}.insight{background:#e9efe6;border:1px solid #dde6d7;border-radius:12px;padding:18px;margin-top:25px}.insight p{font-size:14px;line-height:1.65;margin:10px 0 0;color:#52654c}.bottom-note{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:13px;line-height:1.6}.bottom-note p span{color:#849084}.small-mark{font-size:26px;color:#7a966a}#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#183e33;color:#fff;padding:12px 22px;border-radius:12px;box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;transition:opacity .2s;font-size:14px}.player{cursor:pointer}.player text{pointer-events:none;font-weight:700;font-size:2.05px;fill:#17392c}.player .hit{fill:transparent}.player.selected .ring{stroke:#fff;stroke-width:.45;stroke-dasharray:1 1;fill:none}.player .ring{fill:none;stroke:none}.player:focus{outline:none}.player:focus-visible .ring{stroke:#fff;stroke-width:.5}#ball{cursor:crosshair}@media(min-width:1400px){main{padding-top:50px}}@media(max-width:1100px){header{padding:0 24px;height:76px}main{padding:26px 20px;gap:22px;grid-template-columns:minmax(0,1fr) 240px}aside{padding-left:22px}.header-right>span{display:none}#title{font-size:24px}.pitch-caption{font-size:9px;padding:8px 2px}.interaction{font-size:12px}}@media(max-width:760px){main{display:flex;flex-direction:column;padding:22px 14px}.brand{font-size:22px}.beta{display:none}header{padding:0 16px}.header-right button{padding:0 12px}aside{border-left:0;border-top:1px solid #dfe6df;padding:24px 6px}.history button{padding:0 10px}#title{font-size:21px}.board-heading{gap:8px}.pitch-caption span:nth-child(2){display:none}.interaction{line-height:1.6}.bottom-note{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.board-heading{flex-wrap:wrap;gap:16px}.history{flex-wrap:wrap;align-items:center;justify-content:flex-end}.history select{width:auto;min-height:44px;padding:8px 28px 8px 10px;font-size:13px}.pitch-wrap{padding:0 10px 10px}.sideline{margin:0 -10px;background:#184638}.sideline-head,.sideline-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;text-align:center}.sideline-head{background:#e4e8e5;color:#526158;font-size:13px;font-weight:600;line-height:30px}.sideline-controls{padding:9px 10px 7px}.sideline-group{display:flex;justify-content:center;gap:7px}.sideline-group button{width:46px;height:44px;min-height:44px;padding:8px;border:1px solid #ffffff35;background:#ffffff08;color:#d7e5db;border-radius:8px}.sideline-group button:hover{background:#ffffff20}.sideline-group button[aria-pressed="true"]{background:#d0efa4;border-color:#d0efa4;color:#17392c}.sideline-group svg{display:block;width:28px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pass-status{font-size:13px;color:#63796a;margin:15px 0 0}.interaction{margin-top:12px}@media(max-width:600px){.sideline-head,.sideline-controls{grid-template-columns:1fr 1.5fr .35fr}.sideline-head{font-size:12px}.sideline-group{gap:4px}.sideline-controls{padding-left:4px;padding-right:4px}.history{justify-content:flex-start}.board-heading{margin-bottom:16px}}

@media(max-width:600px){.sideline-head,.sideline-controls{grid-template-columns:1fr 1.5fr .65fr}}

.block-settings{margin:24px 0;border-top:1px solid #dfe6df;padding-top:22px}.block-ranges{display:flex;gap:8px;margin-top:12px}.block-ranges label{display:block;flex:1;font-size:13px;min-width:0}.block-ranges select{margin-top:8px;padding-left:6px;font-size:13px}#setBlock{width:100%;background:#183e33;color:white;margin-top:4px}

/* Compact working layout with a persistent right-edge settings handle. */
header{height:64px;padding:0 24px}main{position:relative;max-width:none;padding:20px 42px 20px 24px;gap:24px;grid-template-columns:minmax(0,1fr) 250px}.board-heading{margin-bottom:14px;gap:10px}#title{font-size:24px}.history{gap:5px}.history button{padding:0 10px}aside{padding:0 0 0 18px;max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}aside>.eyebrow{margin:0 0 14px}aside .setting{margin-bottom:12px}aside label{font-size:14px;margin-bottom:6px}aside select{padding:8px;min-height:44px;font-size:14px}aside .divider{margin:14px 0}aside .help{font-size:12px;line-height:1.4;margin:6px 0 10px}aside #tacticHelp{display:none}aside .block-settings{margin:14px 0;padding-top:12px}aside .block-settings>.help{display:none}aside .block-ranges{margin-top:10px}aside .block-ranges label{font-size:13px}aside .block-ranges select{font-size:13px}aside .insight{margin-top:10px;padding:10px;font-size:13px}aside .insight p{font-size:13px}aside summary{cursor:pointer;min-height:24px}#panelToggle{position:absolute;right:2px;top:20px;width:36px;min-height:52px;padding:0;font-size:28px;z-index:5;border-radius:9px;background:#e7eee7;color:#244536}.settings-collapsed main{grid-template-columns:minmax(0,1fr)}#settingsPanel[hidden]{display:none}.settings-collapsed #pitch{max-height:calc(100dvh - 270px);min-height:260px}.pitch-wrap{box-shadow:0 12px 25px -20px #14372988}.pass-status{margin-top:9px}.interaction{margin-top:8px}@media(min-width:1400px){main{padding-top:20px}}@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 230px;gap:14px;padding-left:14px}aside{padding-left:12px}.history{justify-content:flex-start}}@media(max-width:760px){main{display:grid;grid-template-columns:minmax(0,1fr);padding-right:42px}aside{position:absolute;right:42px;top:20px;z-index:4;width:min(280px,calc(100vw - 70px));background:#f5f7f5;box-shadow:-10px 6px 30px #153c3326;border:1px solid #dfe6df;border-radius:12px;padding:16px;max-height:calc(100dvh - 110px)}.settings-collapsed #pitch{max-height:none;min-height:0}}

.formation-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.formation-row .mini-dot{width:6px;height:6px}.formation-row label{font-size:13px}

#panelToggle{position:fixed;top:50%;transform:translateY(-50%);right:2px}
#toolbarToggle{display:block;margin:10px auto 0;min-height:44px;background:transparent;font-size:12px;color:#526b5c}
#defaultSettings{width:100%;margin-top:12px;font-size:13px;background:transparent}
#topToolbar[hidden],#boardToolbar[hidden]{display:none}
.toolbar-collapsed aside{max-height:calc(100dvh - 40px)}
.toolbar-collapsed #pitch{max-height:calc(100dvh - 230px);min-height:0}

.top-sideline{margin:0 -10px;padding:10px;background:#184638}.top-sideline .history{justify-content:center}.top-sideline button,.top-sideline select{font-size:12px}.pitch-wrap>.sideline{border-top:1px solid #ffffff25}.goal-controls{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.goal-controls button{font-size:12px;background:transparent}#playerLabel{width:100%;min-height:44px;border:1px solid #dce4dc;border-radius:8px;padding:8px}#labelMode{margin-bottom:10px}#showCrowding,#demoStart{width:100%;margin:6px 0}#showCrowding[aria-pressed="true"]{background:#d0efa4}#demoPanel{padding:12px;background:#e7eee7;border-radius:10px;font-size:13px;line-height:1.5}#demoPanel button{padding:0 10px;margin:3px}#demoPanel[hidden]{display:none}

.pitch-wrap{position:relative}.goal-controls{position:absolute;left:0;right:0;top:48%;z-index:2;pointer-events:none}.goal-controls button{pointer-events:auto;writing-mode:vertical-rl;min-height:100px;padding:8px 3px;font-size:10px;background:#e7eee7dd;border-radius:6px;max-width:24px}

.goal-controls button{width:40px;max-width:40px;min-height:116px}.player text{font-size:1.65px}

.sideline{display:flex;flex-direction:column}.sideline-controls{order:0}.sideline-head{order:1}.top-sideline{display:grid;grid-template-columns:minmax(75px,1fr) auto minmax(75px,1fr);align-items:center;gap:8px}.top-sideline>span{color:#d6e7dc;font-size:11px;padding:0 7px}.top-sideline>span:last-child{text-align:right}.top-sideline .history{gap:4px}.top-sideline button{padding:0 8px}#swapAttacker{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px}#swapAttacker span{font-size:23px;line-height:23px}#swapAttacker small{font-size:10px}#controlsTour{width:100%;margin:6px 0;background:#d0efa4}#tourDialog{max-width:480px;width:calc(100vw - 28px);max-height:90dvh;overflow:auto;border:0;border-radius:18px;padding:22px;color:#19312b;background:#f5f7f5}#tourDialog::backdrop{background:#102a2877}.tour-heading,.tour-nav{display:flex;justify-content:space-between;align-items:center}#tourPicture{width:100%;background:#1b5144;border-radius:12px}#tourDescription,#tourTry{line-height:1.55;font-size:15px}#tourTry{padding:12px;background:#e5eddf;border-radius:10px}.tour-dot{animation:tourMove 4s ease-in-out infinite alternate}@keyframes tourMove{to{transform:translate(65px,-25px)}}@media(max-width:1000px){.top-sideline{grid-template-columns:1fr 1fr}.top-sideline .history{grid-column:1 / -1;grid-row:2}.top-sideline>span:last-child{grid-column:2;grid-row:1}}

/* Fade without resizing the board or moving the pieces. */
.top-sideline,.pitch-wrap>.sideline{transition:opacity .4s ease}
.sidelines-idle .top-sideline,.sidelines-idle .pitch-wrap>.sideline{opacity:.12}
.top-sideline:has(:focus-visible),.pitch-wrap>.sideline:has(:focus-visible){opacity:1}
#panelToggle{width:44px;z-index:6}
@media(prefers-reduced-motion:reduce){.top-sideline,.pitch-wrap>.sideline{transition:none}}

#panelToggle{width:22px;min-height:48px;font-size:22px;border-radius:6px;padding:0}

/* Retract sidelines within a stable frame; give their height to the pitch. */
.pitch-wrap{display:flex;flex-direction:column;height:var(--board-height,calc(100dvh - 230px));padding-bottom:0}
#pitch,.settings-collapsed #pitch,.toolbar-collapsed #pitch{flex:1 1 0;height:0;min-height:0;max-height:none;width:100%}
.top-sideline,.pitch-wrap>.sideline{flex:0 0 auto;max-height:160px;overflow:hidden;transition:max-height .3s ease,padding .3s ease,opacity .2s ease}
.sidelines-idle .top-sideline,.sidelines-idle .pitch-wrap>.sideline{max-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;pointer-events:none}
.sideline-reveal{display:none;position:absolute;left:0;right:0;width:100%;height:18px;min-height:18px;border:0;border-radius:0;padding:0;line-height:18px;background:#18463888;color:#d0efa4;z-index:3;touch-action:none;font-size:17px}
.reveal-top{top:0}.reveal-bottom{bottom:0}.sidelines-idle .sideline-reveal{display:block}
@media(prefers-reduced-motion:reduce){.top-sideline,.pitch-wrap>.sideline{transition:none}}

#sequenceControls{padding:10px 12px;margin-top:8px;border:1px solid #d4dfcc;background:#edf3e6;border-radius:10px;font-size:13px}#sequenceControls[hidden]{display:none}#sequenceControls>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}#sequenceControls button{font-size:12px}#makePass,#continueSupport{background:#183e33;color:white}

#multiControls{padding:10px 12px;margin-top:8px;background:#edf3e6;border:1px solid #d4dfcc;border-radius:10px;font-size:13px}#multiControls[hidden]{display:none}#multiHint{margin:0 0 8px}#multiControls button{margin-right:6px}#multiPass[aria-pressed="true"]{background:#d0efa4}

#playMulti.field-play{position:absolute;z-index:4;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#d0efa4;color:#183e33;border:2px solid #fff;box-shadow:0 2px 8px #0003;font-size:20px}#playMulti[hidden]{display:none}#playMulti:disabled{opacity:.45}

.playback-group button{width:auto;min-width:60px;padding:0 12px;font-size:13px;white-space:nowrap}.playback-group{gap:8px}

/* Persistent, compact sidelines; fit the frame to the pitch on taller screens. */
.top-sideline,.pitch-wrap>.sideline{transition:none;max-height:none;opacity:1;pointer-events:auto}
.top-sideline{padding-top:6px;padding-bottom:6px}
.sideline-controls{padding-top:6px;padding-bottom:6px}
.sideline-head{padding-top:3px;padding-bottom:3px}

.crowding-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.crowding-tools button{flex:1;font-size:12px;padding:8px}#freeDesign[aria-pressed="true"]{background:#d0efa4;color:#183e33}.playback-group{flex-wrap:wrap}#tutorial{max-width:640px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;border:0;border-radius:18px;padding:24px;color:#183e33}#tutorial::backdrop{background:#102a2877}#tutorialClose{float:right}#tutorial p,#tutorial li{font-size:15px;line-height:1.55}#tutorial li{margin-bottom:12px}

#demoPanel{position:fixed;z-index:30;box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;padding:14px;background:#f2f7ed;border:1px solid #b8cbb0;box-shadow:0 12px 32px #102a2833;border-radius:12px}#demoText{margin:0 0 10px}#demoPanel button{min-height:44px}#demoNext{background:#183e33;color:white}

.settings-collapsed main{padding-left:10px;padding-right:28px;gap:12px}.settings-collapsed .pitch-wrap{padding-left:0;padding-right:0}

/* Clip SVG artwork to its own row, never over the controls. */
#pitch{overflow:hidden}
.pitch-wrap>.top-sideline,.pitch-wrap>.sideline{margin-left:0;margin-right:0;position:relative;z-index:1}
.pitch-wrap{padding-left:0;padding-right:0}

/* Tablet workspace: one header row, persistent sidelines, overlay settings. */
@media (min-width:600px) and (max-width:1400px){
 #topToolbar{height:60px;padding:6px 12px;gap:12px}
 #topToolbar .brand{font-size:20px;gap:7px;flex-shrink:0}
 #topToolbar .beta,#topToolbar #saveStatus,#topToolbar .eyebrow{display:none}
 #topToolbar #boardToolbar{margin:0;flex:1;min-width:0;display:block}
 #topToolbar #boardToolbar>div{width:100%}
 #topToolbar #title{font-size:19px;margin:0;width:100%;max-width:none;min-height:44px}
 #topToolbar .header-right{flex-shrink:0;gap:6px}
 #topToolbar .header-right button{padding:0 10px}
 main,.settings-collapsed main{display:block;padding:8px 28px 8px 8px}
 #settingsPanel{position:absolute;right:28px;top:8px;z-index:8;width:270px;max-height:calc(100dvh - 82px);padding:16px;background:#f5f7f5;border:1px solid #dfe6df;border-radius:12px;box-shadow:-8px 8px 28px #153c3333;overflow-y:auto}
 #panelToggle{z-index:9}
}

.demo-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}#demoPanel .demo-actions button{margin:0;padding:0 8px;white-space:nowrap;font-size:12px}#demoExit{flex:1}
#lockPositions[aria-pressed="true"]{background:#d0efa4}#playbookDialog{width:min(560px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid #b8cbb0;border-radius:14px;padding:20px;color:#183e33;background:#f2f7ed}#playbookDialog::backdrop{background:#102a2866}.play-heading,.play-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.play-heading{justify-content:space-between}.play-actions{margin:12px 0}#playbookDialog label{display:block;margin:10px 0}#playbookDialog input,#playbookDialog select{display:block;width:100%;box-sizing:border-box;padding:8px}#playbookDialog h2{margin:0}#playBar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:50;background:#f2f7ed;border:1px solid #b8cbb0;border-radius:10px;padding:8px 12px;box-shadow:0 4px 20px #102a2844;display:flex;align-items:center;gap:12px;max-width:90vw}#playBar[hidden]{display:none}

/* Keep the coaching controls together; narrow screens scroll this row instead of wrapping a lone button. */
.sideline-controls{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto;justify-content:space-between}
.sideline-controls .sideline-group{display:flex;flex-wrap:nowrap!important;flex:0 0 auto;gap:6px}
.sideline-controls button{white-space:nowrap;flex-shrink:0}
#passSpeed[hidden],#speedDone[hidden]{display:none!important}#playerSpeed{width:132px;min-width:110px}#slowMotion{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:0 8px}#slowMotion[aria-pressed="true"]{background:#d0efa4}
@media(max-width:900px){.sideline-controls .sideline-group{gap:4px}.sideline-controls button{padding-left:7px;padding-right:7px;font-size:12px}}

#playMulti{background:#d0efa4;color:#183e33;font-size:20px;width:44px;padding:0}#playMulti[hidden]{display:none!important}
@media(max-width:900px){
 .sideline-controls{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;overflow:visible}
 .sideline-controls>.sideline-group:first-child{grid-column:1;grid-row:1;justify-self:start}
 .sideline-controls>.sideline-group:last-child{grid-column:2;grid-row:1;justify-self:end}
 .sideline-controls>.playback-group{grid-column:1 / -1;grid-row:2;justify-self:center;justify-content:center}
 .sideline-head{display:none}
}