:root{--nav:#17202b;--ink:#17202b;--muted:#66727a;--chrome:#edf1ef;--panel:#fff;--line:#d7dfdc;--field:#16865e;--field2:#0f6d4c;--orange:#10b981;--orange2:#059669;--red:#E63950;--cyan:#3157C8;--yellow:#ffd350;--blue:#76c9ef;--shadow:0 16px 50px rgba(23,32,43,.14)}
*{box-sizing:border-box}html{background:#dfe5e2}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 0,rgba(49,87,200,.1),transparent 28rem),linear-gradient(135deg,#e9eeeb,#dbe3df);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}.app{width:min(100%,1180px);min-height:100vh;margin:auto;background:var(--chrome);box-shadow:var(--shadow)}
.masthead{position:sticky;top:0;z-index:40;color:#fff;background:var(--nav);padding:max(12px,env(safe-area-inset-top)) clamp(12px,2.5vw,26px) 0}.brandbar,.playbar,.head-actions,.tabs,.toolbar-head,.selected-status,.read-picker,.tools,.quick-actions,.run-row,.speed,.switch-row,.coach-action,.coach-buttons,.grade-head,.dialog-actions,.dialog-title{display:flex;align-items:center}.brandbar,.playbar,.toolbar-head,.switch-row,.coach-action,.grade-head,.dialog-title{justify-content:space-between}.brandbar{min-height:46px}.brand{display:flex;align-items:center;min-width:0}.brand-logo{display:block;width:clamp(136px,18vw,176px);height:auto;padding:4px 7px;border-radius:9px;background:#F7F9FC}.head-actions{gap:4px}.head-btn{min-width:42px;height:42px;border:0;border-radius:12px;color:white;background:transparent;font-weight:850}.head-btn:hover,.head-btn:focus-visible{background:rgba(255,255,255,.1)}.head-btn:disabled{opacity:.32;cursor:default}.head-btn.labeled{padding:0 13px;background:rgba(255,255,255,.09)}.head-links{display:flex;align-items:center;gap:4px}.head-menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:42px;height:42px;margin-left:auto;border:0;border-radius:12px;background:rgba(255,255,255,.09)}.head-menu-toggle span{display:block;width:20px;height:2px;margin:2px 0;border-radius:1px;background:#fff}
.playbar{gap:16px;padding:8px 0 12px}.play-name-wrap{min-width:0;display:flex;flex-direction:column}.play-name-wrap span{color:#aeb9d6;font-size:.69rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.play-name-wrap input{width:min(55vw,440px);border:0;border-bottom:1px solid transparent;padding:2px 0;color:#fff;background:transparent;font-size:1.18rem;font-weight:850;letter-spacing:-.02em}.play-name-wrap input:focus{outline:0;border-color:rgba(255,255,255,.5)}.start-over{min-height:42px;border:1px solid rgba(255,255,255,.23);border-radius:12px;padding:0 13px;color:#ffd7dc;background:transparent;font-size:.74rem;font-weight:800}.start-over:hover,.start-over:focus-visible{border-color:var(--red);background:rgba(230,57,80,.12)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr)}.tab{min-height:46px;border:0;border-bottom:3px solid transparent;color:#9eaaaa;background:transparent;font-size:.8rem;font-weight:800}.tab[aria-selected=true]{color:#fff;border-color:var(--orange)}.tab:focus-visible{outline:2px solid white;outline-offset:-4px}.app[data-mode=defense] .tab[aria-selected=true]{border-color:var(--blue)}
.settings-panel{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px;padding:12px clamp(12px,2.5vw,26px);border-bottom:1px solid var(--line);background:#f7f9f8;transition:.2s}.settings-panel[hidden]{display:none}.settings-panel label{color:#728084;font-size:.66rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.settings-panel select{width:100%;min-height:43px;margin-top:4px;border:1px solid var(--line);border-radius:11px;padding:0 30px 0 10px;color:var(--ink);background:white;font-size:.76rem;font-weight:760;text-transform:none;letter-spacing:0}
.workspace{padding:12px clamp(10px,2.5vw,24px) 24px}.toolbar-card,.panel{border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:0 5px 18px rgba(19,32,37,.06)}.toolbar-card{padding:8px}.toolbar-head{gap:10px;padding:2px 4px 8px}.selected-status{gap:8px;min-width:0;color:#4e5c61;font-size:.73rem;font-weight:760}.selected-status i{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,106,44,.15)}.app[data-mode=defense] .selected-status i{background:var(--blue);box-shadow:0 0 0 4px rgba(118,201,239,.18)}.read-picker{gap:3px;padding:3px;border-radius:10px;background:#edf1ef}.read-picker button{min-height:34px;border:0;border-radius:8px;padding:0 9px;color:#687579;background:transparent;font-size:.65rem;font-weight:800}.read-picker button[aria-pressed=true]{color:var(--ink);background:white;box-shadow:0 2px 5px rgba(19,32,37,.1)}.read-picker button[data-read="1"][aria-pressed=true]{color:#c8222d}.read-picker button[data-read="2"][aria-pressed=true]{color:#087f8a}.app[data-mode=defense] .read-picker,.app[data-mode=qb] .read-picker{display:none}
.tools{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.tool{min-height:55px;border:1px solid transparent;border-radius:12px;padding:7px 4px 5px;color:#576468;background:transparent;transition:.15s}.tool:hover{background:#f2f5f3}.tool:active{transform:scale(.97)}.tool[aria-pressed=true]{color:#fff;background:var(--orange);box-shadow:0 5px 12px rgba(242,106,44,.26)}.app[data-mode=defense] .tool[aria-pressed=true]{background:#2e637d;box-shadow:0 5px 12px rgba(46,99,125,.26)}.tool b{display:block;height:20px;font-size:1rem;line-height:20px}.tool span{display:block;margin-top:3px;font-size:.62rem;font-weight:820}
.editor-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(290px,.9fr);grid-template-areas:"settings settings" "tools tools" "field controls" "quick controls";gap:13px;margin-top:12px}.editor-grid>*{min-width:0}.settings-panel{grid-area:settings}.tools-run-wrap{grid-area:tools;display:flex;gap:13px}.toolbar-card{flex:1;min-width:0}.run-panel{flex:0 0 230px;display:flex;flex-direction:column}.run-panel .run-row{flex-direction:column;gap:8px}.run-panel .speed{justify-content:center}.run-panel .primary{width:100%}.field-column{grid-area:field}.quick-actions{grid-area:quick;margin-top:0}.control-column{grid-area:controls;display:flex;flex-direction:column;gap:10px}.field-wrap{max-width:680px;margin:auto}.field{position:relative;overflow:hidden;aspect-ratio:10/13.6;border:3px solid #fff;border-radius:22px;background:var(--field);box-shadow:0 9px 25px rgba(10,77,51,.22),inset 0 0 0 1px rgba(0,0,0,.12);touch-action:none;user-select:none}.field::before{content:"";position:absolute;inset:12% 0 5%;opacity:.64;background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent 18%,transparent 82%,rgba(0,0,0,.1)),repeating-linear-gradient(to bottom,transparent 0 19.3%,rgba(255,255,255,.4) 19.3% 20%)}.end-zone{position:absolute;inset:0 0 auto;height:12%;display:grid;place-items:center;color:rgba(255,255,255,.35);background:var(--field2);border-bottom:2px solid rgba(255,255,255,.78);font-size:.72rem;font-weight:900;letter-spacing:.35em;text-indent:.35em}.end-zone-near{inset:auto 0 0;height:5%;display:flex;align-items:center;justify-content:center;padding:0;border-top:2px solid rgba(255,255,255,.78);border-bottom:0}.field-hashes{position:absolute;inset:12% 0 5%;opacity:.45;background:repeating-linear-gradient(to bottom,transparent 0 9.6%,rgba(255,255,255,.75) 9.6% 10%);clip-path:polygon(31% 0,36% 0,36% 100%,31% 100%,31% 0,64% 0,69% 0,69% 100%,64% 100%,64% 0)}.los{position:absolute;z-index:2;left:4%;right:4%;top:68%;border-top:3px solid rgba(255,255,255,.92)}.los span{position:absolute;top:-23px;left:8px;padding:3px 7px;border-radius:7px;color:var(--field2);background:white;font-size:.56rem;font-weight:900;letter-spacing:.07em}#routeLayer{position:absolute;z-index:4;inset:0;width:100%;height:100%;overflow:visible}.route{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));pointer-events:stroke}.route.read1{stroke:var(--red);stroke-width:3.3}.route.read2{stroke:var(--cyan);stroke-width:3.3}.route.motion,.route.fake,.route.reverse{stroke:var(--yellow);stroke-dasharray:7 5}.route.handoff{stroke:#ffad78;stroke-dasharray:3 4}.route.defense{stroke:var(--blue);stroke-dasharray:6 4}.route.draft{opacity:.8;stroke-dasharray:5 4;pointer-events:none}.route.selected-route{filter:drop-shadow(0 0 3px #fff);stroke-width:4}.app[data-mode=qb] .route:not(.read1):not(.read2){opacity:.18}
.player{position:absolute;z-index:7;width:38px;height:38px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.96);border-radius:50%;color:white;background:#f26a2c;box-shadow:0 4px 9px rgba(0,0,0,.28);font-size:.67rem;font-weight:900;transform:translate(-50%,-50%);touch-action:none;transition:box-shadow .15s,opacity .15s}.player[data-color=black]{background:#13191c}.player[data-color=yellow]{color:#263037;background:#ffd849}.player[data-color=blue]{background:#3157c8}.player[data-color=red]{background:#e63950}.player[data-color=purple]{background:#7b4bc4}.player[data-color=green]{background:#26a85a}.player[data-color=orange]{background:#f26a2c}.player.defense{background:#2e4552}.player.selected{box-shadow:0 0 0 5px #fff,0 0 0 9px rgba(242,106,44,.88),0 8px 14px rgba(0,0,0,.3)}.app[data-mode=defense] .player.selected{box-shadow:0 0 0 5px #fff,0 0 0 9px rgba(118,201,239,.88),0 8px 14px rgba(0,0,0,.3)}.app[data-mode=qb] .player:not([data-label=QB]){opacity:.68}.read-badge{position:absolute;z-index:8;padding:4px 7px;border-radius:999px;color:white;background:var(--red);box-shadow:0 3px 8px rgba(0,0,0,.25);font-size:.56rem;font-weight:900;transform:translate(-50%,-50%);pointer-events:none}.read-badge.read2{color:#073039;background:var(--cyan)}.field-legend{position:absolute;z-index:9;left:10px;bottom:9px;display:flex;gap:6px}.field-legend span{padding:5px 7px;border-radius:8px;color:white;background:rgba(7,24,18,.72);backdrop-filter:blur(4px);font-size:.58rem;font-weight:800}.field-legend i{display:inline-block;width:12px;height:3px;margin-right:4px;border-radius:3px;vertical-align:middle}.field-legend .r1{background:var(--red)}.field-legend .r2{background:var(--cyan)}.empty-help{position:absolute;z-index:3;left:50%;top:44%;width:min(78%,320px);display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid rgba(255,255,255,.25);border-radius:13px;color:white;background:rgba(7,38,27,.54);backdrop-filter:blur(5px);text-align:center;transform:translate(-50%,-50%);pointer-events:none}.empty-help strong{font-size:.82rem}.empty-help span{color:rgba(255,255,255,.78);font-size:.69rem;line-height:1.35}.empty-help[hidden]{display:none}
.play-ball{position:absolute;z-index:10;width:18px;height:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.9);border-radius:55%;color:#fff;background:#8c4b24;box-shadow:0 2px 5px rgba(0,0,0,.35);font-size:.55rem;line-height:1;transform:translate(-50%,-50%);pointer-events:none}.play-ball[hidden]{display:none}.route.pass{stroke:var(--red);stroke-width:3;stroke-dasharray:2 5}.field-legend .pass{height:0;border-top:3px dotted var(--red);background:transparent}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:0}.quick-actions button{min-height:45px;border:1px solid var(--line);border-radius:12px;color:#445257;background:white;font-size:.7rem;font-weight:800}.quick-actions button:hover{background:#f7f9f8}.quick-actions span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:3px;border-radius:9px;color:white;background:#6c797c;font-size:.6rem}
.panel{padding:13px}.panel-title{margin-bottom:10px;color:#657276;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.run-row{gap:7px}.primary{flex:1;min-height:49px;border:0;border-radius:13px;color:white;background:var(--orange);box-shadow:0 6px 13px rgba(242,106,44,.25);font-weight:900}.primary:hover{background:var(--orange2)}.primary:disabled{opacity:.45;cursor:default}.speed{gap:3px;padding:3px;border-radius:12px;background:#edf1ef}.speed button{min-width:40px;height:41px;border:0;border-radius:9px;padding:0 7px;color:#687579;background:transparent;font-size:.68rem;font-weight:820}.speed button[aria-pressed=true]{color:var(--ink);background:white;box-shadow:0 2px 5px rgba(19,32,37,.1)}.switch-row{gap:12px;margin-top:11px;color:#536065}.switch-row span{display:flex;flex-direction:column}.switch-row strong{font-size:.74rem}.switch-row small{margin-top:2px;color:#7a8689;font-size:.62rem}.switch-row input{position:absolute;opacity:0}.switch-row i{width:42px;height:25px;flex:0 0 auto;padding:3px;border-radius:16px;background:#bdc7c3;transition:.2s}.switch-row i::after{content:"";display:block;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.2s}.switch-row input:checked+i{background:#1e7e59}.switch-row input:checked+i::after{transform:translateX(17px)}.coach-action{width:100%;min-height:56px;gap:10px;border:1px solid #dce3df;border-radius:13px;padding:9px 11px;color:var(--ink);background:#f6f8f7;text-align:left}.coach-action span{display:flex;flex-direction:column}.coach-action strong{font-size:.78rem}.coach-action small{margin-top:2px;color:#738084;font-size:.63rem}.coach-action b{color:var(--orange);font-size:1.25rem}.coach-action:hover{border-color:#f0a27e;background:#fff8f5}.coach-buttons{gap:7px;margin-top:8px}.coach-buttons button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:11px;color:#455258;background:white;font-size:.69rem;font-weight:820}.coach-buttons button:first-child{color:white;background:#17282d;border-color:#17282d}
.grade-panel{overflow:hidden}.grade-head{gap:10px}.grade-head>div{display:flex;flex-direction:column}.grade-head span{color:#748084;font-size:.58rem;font-weight:900;letter-spacing:.09em}.grade-head strong{font-size:2.1rem;line-height:1}.grade-head p{max-width:190px;margin:0;color:#5f6d71;font-size:.67rem;line-height:1.35}.grade-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:12px;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--line)}.grade-grid div{display:flex;flex-direction:column;padding:9px;background:#f8faf9}.grade-grid span{color:#788488;font-size:.58rem}.grade-grid strong{margin-top:2px;font-size:.7rem}.coaching-copy{margin-top:11px}.coaching-copy strong{font-size:.7rem}.coaching-copy p{margin:4px 0 0;color:#657276;font-size:.67rem;line-height:1.4}
dialog{width:min(calc(100% - 28px),450px);border:0;border-radius:20px;padding:0;background:transparent}dialog::backdrop{background:rgba(4,14,15,.65);backdrop-filter:blur(3px)}.dialog-card{border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:20px;background:white;box-shadow:0 24px 70px rgba(0,0,0,.28);text-align:center}.dialog-icon{display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:14px;color:#b54624;background:#fff0e9;font-size:1.4rem}.dialog-card h2{margin:10px 0 6px;font-size:1.1rem}.dialog-card p{margin:0;color:#667377;font-size:.76rem;line-height:1.5}.dialog-actions{gap:8px;margin-top:16px}.dialog-actions button{flex:1;min-height:45px;border:1px solid var(--line);border-radius:12px;background:white;font-weight:800}.dialog-actions .danger{color:white;border-color:#c9472f;background:#c9472f}.plays-card{text-align:left}.dialog-title span{color:#7b878a;font-size:.61rem;font-weight:900;letter-spacing:.09em}.dialog-title h2{margin:1px 0}.dialog-title button{width:40px;height:40px;border:0;border-radius:11px;color:#4f5d61;background:#eef2f0;font-size:1.4rem}.saved-plays{display:flex;flex-direction:column;gap:7px;max-height:52vh;margin-top:14px;overflow:auto}.saved-empty{padding:26px 10px;color:#778386;text-align:center;font-size:.76rem}.saved-item{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}.saved-item strong,.saved-item small{display:block}.saved-item strong{font-size:.76rem}.saved-item small{margin-top:2px;color:#7a8689;font-size:.61rem}.saved-item button{min-height:37px;border:0;border-radius:9px;padding:0 10px;font-size:.66rem;font-weight:800}.saved-item .load{color:white;background:#1b3035}.saved-item .delete{color:#a23d2b;background:#fff0ea}.toast{position:fixed;z-index:80;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));max-width:calc(100vw - 30px);padding:11px 15px;border-radius:12px;color:white;background:#142025;box-shadow:0 8px 25px rgba(0,0,0,.25);font-size:.75rem;font-weight:760;transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.beat-defense-action{margin-bottom:8px;border-color:#efb08f;background:#fff8f3}.defense-plan{margin:0 0 10px;padding:12px;border:1px solid #f0d0bd;border-radius:13px;background:linear-gradient(145deg,#fff9f5,#f7fbf9)}.defense-plan[hidden]{display:none}.defense-plan-head{display:flex;flex-direction:column}.defense-plan-head span,.defense-plan-grid span,.defense-plan-cue span{color:#8b6a59;font-size:.56rem;font-weight:900;letter-spacing:.08em}.defense-plan-head strong{margin-top:3px;font-size:.86rem}.defense-plan>p,.defense-plan-cue p{margin:7px 0 0;color:#59666a;font-size:.68rem;line-height:1.42}.defense-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.defense-plan-grid div{display:flex;flex-direction:column;padding:8px;border-radius:9px;background:#fff}.defense-plan-grid div:first-child{border-left:4px solid var(--red)}.defense-plan-grid div:last-child{border-left:4px solid var(--cyan)}.defense-plan-grid strong{margin-top:3px;font-size:.67rem}.defense-plan-cue{margin-top:9px}.defense-plan>button{width:100%;min-height:41px;margin-top:10px;border:0;border-radius:10px;color:#fff;background:#17282d;font-size:.68rem;font-weight:850}.read-picker button[data-read="1"]{color:#fff;background:var(--red);box-shadow:0 2px 7px rgba(255,57,69,.3)}.read-picker button[data-read="2"]{color:#06353b;background:var(--cyan);box-shadow:0 2px 7px rgba(40,216,232,.3)}.read-picker button[data-read="1"][aria-pressed=true],.read-picker button[data-read="2"][aria-pressed=true]{outline:3px solid #142126;outline-offset:1px}.player.offense[data-read="1"]::after,.player.offense[data-read="2"]::after{content:attr(data-read-label);position:absolute;right:-9px;top:-9px;width:21px;height:21px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:var(--red);box-shadow:0 2px 6px rgba(0,0,0,.35);font-size:.66rem;font-weight:950;line-height:1}.player.offense[data-read="2"]::after{color:#073039;background:var(--cyan)}.route-hit{fill:none;stroke:transparent;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:stroke}.route.defense.man{stroke:#76c9ef;stroke-dasharray:none}.route.defense.zone{stroke:#76c9ef;stroke-dasharray:7 5}.route.defense.blitz{stroke:#ff9b45;stroke-width:3.4;stroke-dasharray:none;filter:drop-shadow(0 0 2px rgba(255,155,69,.75))}.route.defense.spy{stroke:#d5f2ff;stroke-dasharray:2 4}.app[data-mode=qb][data-qb-focus="1"] .route:not(.read1),.app[data-mode=qb][data-qb-focus="2"] .route:not(.read2),.app[data-mode=qb][data-qb-focus=coverage] .route:not(.defense),.app[data-mode=qb][data-qb-focus=blitz] .route:not(.blitz){opacity:.06}.app[data-mode=qb][data-qb-focus="1"] .route.read1,.app[data-mode=qb][data-qb-focus="2"] .route.read2,.app[data-mode=qb][data-qb-focus=coverage] .route.defense,.app[data-mode=qb][data-qb-focus=blitz] .route.blitz{opacity:1}
@media(max-width:820px){.editor-grid{display:flex;flex-direction:column;grid-template-areas:none;gap:10px}.editor-grid>.field-column{order:1}.editor-grid>.tools-run-wrap{order:2;flex-direction:column}.editor-grid>.settings-panel{order:3}.editor-grid>.quick-actions{order:4}.editor-grid>.control-column{order:5;display:grid;grid-template-columns:1fr 1fr}.grade-panel{grid-column:1/-1}.field-wrap{max-width:590px}.tools{grid-template-columns:repeat(8,minmax(48px,1fr));overflow-x:auto}.masthead{position:relative}}
@media(max-width:540px){.workspace{padding:9px}.settings-panel{padding:9px}.play-name-wrap input{width:57vw}.head-btn{min-width:38px}.start-over{padding:0 10px}.toolbar-head{align-items:flex-start;flex-direction:column}.read-picker{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.read-picker button{padding:0 5px}.tools{margin:0 -2px;padding-bottom:2px}.tool{min-width:53px}.editor-grid{margin-top:9px}.field{border-radius:18px}.player{width:34px;height:34px;font-size:.61rem}.control-column{display:flex}.quick-actions{grid-template-columns:1fr 1fr}.grade-head p{max-width:150px}.los span{font-size:.5rem}.brandbar{position:relative}.head-menu-toggle{display:flex}.head-links{position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:50;display:none;flex-direction:column;align-items:stretch;gap:3px;padding:8px;border-radius:14px;background:#1a2631;box-shadow:0 16px 40px rgba(0,0,0,.35)}.head-links.open{display:flex}.head-links:not(.open){display:none}.head-links:not(.open) .head-btn.labeled{display:none}.head-links .head-btn.labeled{display:flex;width:100%;justify-content:flex-start;height:auto;padding:10px 13px;border-radius:10px;color:#fff;text-decoration:none;background:rgba(255,255,255,.07)}.head-links .head-btn.labeled:hover{background:rgba(255,255,255,.12)}}
@media(max-width:360px){.brand span:last-child{display:none}.tabs .tab{font-size:.72rem}.settings-panel{grid-template-columns:1fr}.field-legend{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Keep formation choices on the field so coaches can build without scrolling. */
.settings-panel{grid-template-columns:2fr repeat(2,1fr)}
.end-zone{z-index:10;color:inherit;font-size:inherit;letter-spacing:0;text-indent:0}
.field-selector{width:min(56%,300px);display:flex;flex-direction:column;color:rgba(255,255,255,.5);font-size:.48rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.field-selector select{width:100%;min-height:28px;margin-top:2px;border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:0 28px 0 10px;color:rgba(255,255,255,.92);background:rgba(6,45,32,.34);backdrop-filter:blur(2px);font-size:.64rem;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none}
.field-selector-offense{display:grid;grid-template-columns:auto minmax(150px,1fr);align-items:center;gap:8px;width:min(68%,360px);white-space:nowrap}
.field-selector-offense select{margin-top:0}
.field-selector select option{color:#12291f;background:#fff}
.field-selector select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.field-selector-offense select:focus-visible{outline-color:var(--yellow)}
@media(max-width:540px){.field-selector{width:72%;font-size:.45rem}.field-selector select{min-height:24px;margin-top:2px;font-size:.6rem}.field-selector-offense{display:block;width:64%}.field-selector-offense select{margin-top:0}.field-selector-offense{font-size:0}}

.matchup-action{margin-bottom:8px;color:#fff;border-color:#173e3d;background:linear-gradient(135deg,#102b2c,#1d5550)}.matchup-action b{color:var(--cyan)}.matchup-action:hover{color:#fff;border-color:#2a746b;background:linear-gradient(135deg,#143637,#23645c)}
.rule-card .dialog-icon{color:#a02930;background:#ffecee}.rule-card .rule-close{color:#fff;border-color:#183335;background:#183335}
dialog.matchup-dialog{width:min(calc(100% - 24px),760px);max-height:94vh}.matchup-card{max-height:90vh;overflow:auto;padding:18px;text-align:left}.matchup-title{align-items:flex-start}.matchup-title h2{margin:1px 0 2px;font-size:1.2rem}.matchup-title p{font-size:.7rem}.matchup-title>button{flex:0 0 auto}.matchup-side{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:15px;padding:4px;border-radius:13px;background:#edf2ef}.matchup-side button{min-height:43px;border:0;border-radius:10px;color:#697578;background:transparent;font-size:.72rem;font-weight:850}.matchup-side button[aria-selected=true]{color:white;background:#183335;box-shadow:0 3px 8px rgba(13,36,36,.18)}
.matchup-context{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;margin-top:10px}.matchup-context>div,.matchup-context label{display:flex;min-height:61px;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:#f9fbfa}.matchup-context span,.matchup-context label,.matchup-section-head span,.matchup-results-head span,.matchup-shell span,.personnel-fit span,.matchup-read-grid span,.matchup-cue span{color:#748185;font-size:.56rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.matchup-context strong{margin-top:3px;font-size:.8rem}.matchup-context select{width:100%;margin-top:4px;border:0;color:var(--ink);background:transparent;font-size:.75rem;font-weight:800}.matchup-context select:focus{outline:2px solid #2c7770;border-radius:5px}
.matchup-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:16px 2px 8px}.matchup-section-head>div{display:flex;flex-direction:column}.matchup-section-head strong{margin-top:3px;font-size:.75rem}.matchup-section-head small{color:#7b878a;font-size:.6rem}.matchup-players{display:grid;grid-template-columns:1fr 1fr;gap:6px}.matchup-player{border:1px solid var(--line);border-radius:12px;background:#fff}.matchup-player[open]{grid-column:span 2;border-color:#aac9c4;box-shadow:0 5px 14px rgba(20,55,52,.08)}.matchup-player summary{display:flex;min-height:57px;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;cursor:pointer;list-style:none}.matchup-player summary::-webkit-details-marker{display:none}.matchup-player summary>div{display:flex;min-width:0;align-items:center;gap:9px}.matchup-player summary b{display:grid;width:34px;height:34px;flex:0 0 auto;place-items:center;border-radius:50%;color:white;background:#1c4544;font-size:.66rem}.matchup-player summary span{min-width:0}.matchup-player summary strong,.matchup-player summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matchup-player summary strong{font-size:.7rem}.matchup-player summary small{max-width:190px;margin-top:2px;color:#7b878a;font-size:.58rem}.matchup-player summary i{color:#7c898b;font-style:normal}.matchup-player[open] summary i{transform:rotate(180deg)}.matchup-player-editor{padding:0 10px 11px}.matchup-player-editor input{width:100%;min-height:40px;border:1px solid var(--line);border-radius:9px;padding:0 10px;color:var(--ink);background:#fafcfb;font-size:.7rem}.strength-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.strength-chips button{min-height:32px;border:1px solid #d8e2df;border-radius:999px;padding:0 9px;color:#5c6a6d;background:#f4f7f5;font-size:.61rem;font-weight:780}.strength-chips button[aria-pressed=true]{color:#fff;border-color:#276a63;background:#276a63}.build-matchups{width:100%;min-height:48px;margin-top:11px;border:0;border-radius:12px;color:white;background:var(--orange);box-shadow:0 6px 14px rgba(242,106,44,.22);font-size:.76rem;font-weight:900}.build-matchups:hover{background:var(--orange2)}
.matchup-results{margin-top:14px}.matchup-empty{display:flex;min-height:86px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #bdc9c5;border-radius:13px;color:#667477;background:#f8faf9;text-align:center}.matchup-empty strong{font-size:.73rem}.matchup-empty span{margin-top:4px;font-size:.63rem}.matchup-results-head{display:flex;align-items:end;justify-content:space-between;margin:0 2px 8px}.matchup-results-head>span,.matchup-results-head>strong{display:block}.matchup-results-head strong{font-size:.72rem}.matchup-call{position:relative;margin-top:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.matchup-call.best{border-color:#ec9a70;box-shadow:0 7px 18px rgba(111,55,29,.09)}.matchup-call-top{display:flex;align-items:center;justify-content:space-between}.matchup-call-top b{color:#966042;font-size:.56rem;letter-spacing:.08em}.matchup-call-top span{padding:4px 7px;border-radius:999px;color:#1d6159;background:#e7f3f0;font-size:.58rem;font-weight:900}.matchup-call h3{margin:5px 0 0;font-size:.92rem}.matchup-shell{display:flex;align-items:center;justify-content:space-between;margin-top:8px;border-radius:9px;padding:7px 9px;background:#f1f5f3}.matchup-shell strong{font-size:.68rem}.matchup-call>p{margin:9px 0;color:#5e6b6f;font-size:.68rem;line-height:1.4}.personnel-fit{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;border-left:4px solid #2d766e;padding:7px 9px;background:#f4f8f7}.personnel-fit span{grid-row:span 2}.personnel-fit strong{font-size:.68rem}.personnel-fit small{color:#6d797c;font-size:.59rem}.matchup-read-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.matchup-read-grid div{display:flex;min-height:52px;flex-direction:column;justify-content:center;border-radius:9px;padding:7px 9px;background:#f8faf9}.matchup-read-grid div:first-child{border-left:4px solid var(--red)}.matchup-read-grid div:last-child{border-left:4px solid var(--cyan)}.matchup-read-grid strong{margin-top:3px;font-size:.62rem;line-height:1.25}.matchup-cue{display:flex;flex-direction:column;margin-top:8px}.matchup-cue strong{margin-top:3px;color:#536165;font-size:.64rem;line-height:1.35}.matchup-call>button{width:100%;min-height:42px;margin-top:10px;border:0;border-radius:10px;color:#fff;background:#183335;font-size:.68rem;font-weight:850}.matchup-call>button:hover{background:#24504e}
@media(max-width:540px){dialog.matchup-dialog{width:calc(100% - 14px)}.matchup-card{padding:13px}.matchup-context{grid-template-columns:1fr 1fr}.matchup-players{grid-template-columns:1fr}.matchup-player[open]{grid-column:span 1}.matchup-section-head{align-items:flex-start;flex-direction:column;gap:3px}.matchup-player summary small{max-width:220px}.matchup-read-grid{grid-template-columns:1fr}}

/* FlagChalk production identity */
.read-picker button[data-read="1"]{color:#fff;box-shadow:0 2px 7px rgba(230,57,80,.3)}
.read-picker button[data-read="2"]{color:#fff;box-shadow:0 2px 7px rgba(49,87,200,.3)}
.player.offense[data-read="2"]::after{color:#fff}
.primary,.build-matchups{box-shadow:0 6px 14px rgba(49,87,200,.24)}
@media(max-width:360px){.brand-logo{width:124px;padding:3px 6px}}

/* Keep every editor action visible on phones, including Erase. */
@media(max-width:540px){.tools{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}.tool{min-width:0}}

/* Matchup IQ: separate opponent scouting from your own personnel. */
.opponent-section-head{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.opponent-players .matchup-player[open]{border-color:rgba(230,57,80,.42);box-shadow:0 5px 14px rgba(230,57,80,.08)}
.opponent-players .matchup-player summary b{background:var(--red)}
.opponent-fit{margin-top:6px;border-left-color:var(--red);background:#fff5f7}

/* Coach IQ play optimizer */
.improve-action{margin-bottom:8px;color:#fff;border-color:#3157C8;background:linear-gradient(135deg,#24479f,#3157C8)}.improve-action b{color:#fff4ad}.improve-action:hover{color:#fff;border-color:#4169d5;background:linear-gradient(135deg,#294fae,#3a62cd)}
dialog.improve-dialog{width:min(calc(100% - 24px),680px);max-height:94vh}.improve-card{max-height:90vh;overflow:auto;padding:18px;text-align:left}.improve-title{align-items:flex-start}.improve-title h2{margin:1px 0 2px;font-size:1.2rem}.improve-title p{font-size:.7rem}.improve-title>button{flex:0 0 auto}.improve-summary{display:flex;flex-direction:column;margin-top:14px;border-radius:12px;padding:11px 13px;color:#fff;background:#101B3A}.improve-summary strong{font-size:.78rem}.improve-summary span{margin-top:3px;color:#cbd4ee;font-size:.63rem}.improve-list{display:flex;flex-direction:column;gap:7px;margin-top:9px}.improve-item{border:1px solid #c9d5f0;border-radius:13px;padding:11px;background:#f7f9ff}.improve-item.keep{border-color:var(--line);background:#f8faf9}.improve-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.improve-item-head>div{display:flex;align-items:center;gap:9px;min-width:0}.improve-item-head b{display:grid;width:36px;height:36px;flex:0 0 auto;place-items:center;border-radius:50%;color:#fff;background:#3157C8;font-size:.64rem}.improve-item-head span{display:flex;min-width:0;flex-direction:column}.improve-item-head small{color:#778498;font-size:.54rem;font-weight:900;letter-spacing:.08em}.improve-item-head strong{margin-top:2px;font-size:.73rem}.improve-item-head button{min-height:35px;border:0;border-radius:9px;padding:0 12px;color:#fff;background:#183335;font-size:.64rem;font-weight:850}.improve-item-head button:disabled{color:#77827f;background:#e5eae7;cursor:default}.improve-item>p{margin:8px 0;color:#5e6b73;font-size:.67rem;line-height:1.42}.improve-timing{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dce4f4;padding-top:8px}.improve-timing span{color:#778498;font-size:.54rem;font-weight:900;letter-spacing:.08em}.improve-timing strong{font-size:.64rem}.improve-footer{position:sticky;bottom:-18px;display:grid;grid-template-columns:1fr 1.25fr;gap:7px;margin:12px -18px -18px;padding:11px 18px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}.improve-footer button{min-height:45px;border:1px solid var(--line);border-radius:11px;color:#4d5b61;background:#fff;font-size:.68rem;font-weight:850}.improve-footer .apply-all{color:#fff;border-color:#3157C8;background:#3157C8}.improve-footer .apply-all:disabled{opacity:.45;cursor:default}
@media(max-width:540px){dialog.improve-dialog{width:calc(100% - 14px)}.improve-card{padding:13px}.improve-footer{bottom:-13px;margin:10px -13px -13px;padding:10px 13px calc(10px + env(safe-area-inset-bottom));grid-template-columns:1fr}.improve-footer .apply-all{grid-row:1}}

/* First-visit quick start */
dialog.tutorial-dialog{width:min(calc(100% - 24px),440px)}
.tutorial-card{padding:22px;text-align:center}
.tutorial-progress{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.tutorial-progress i{width:26px;height:4px;border-radius:99px;background:#d9e0ec}
.tutorial-progress i.is-active{background:#3157c8}
.tutorial-kicker{display:block;color:#3157c8;font-size:.64rem;font-weight:900;letter-spacing:.13em}
.tutorial-icon{display:grid;width:58px;height:58px;margin:14px auto 12px;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(145deg,#214293,#3157c8);font-size:1.55rem;box-shadow:0 10px 24px rgba(49,87,200,.25)}
.tutorial-card h2{margin:0;color:#101b3a;font-size:1.3rem}
.tutorial-card>p{min-height:66px;margin:9px auto 18px;color:#536171;font-size:.88rem;line-height:1.5}
.tutorial-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px}
.tutorial-actions button{min-height:46px;border:1px solid #ccd5e4;border-radius:11px;color:#536171;background:#fff;font-size:.8rem;font-weight:850}
.tutorial-actions #nextTutorial{color:#fff;border-color:#3157c8;background:#3157c8}
@media(max-width:540px){dialog.tutorial-dialog{width:calc(100% - 20px)}.tutorial-card{padding:19px}.tutorial-card>p{font-size:.84rem}}

/* Defensive strategy: simulate a scout offense without replacing the defensive call. */
.defense-scout{display:none;margin-top:12px;border:1px solid #b7d7e8;border-radius:13px;padding:11px;background:linear-gradient(145deg,#f2f9fd,#eef3ff)}.app[data-mode=defense] .defense-scout{display:block}.defense-scout-copy{display:flex;flex-direction:column}.defense-scout-copy span,.scout-preview span{color:#537185;font-size:.56rem;font-weight:900;letter-spacing:.08em}.defense-scout-copy strong{margin-top:3px;font-size:.76rem}.defense-scout-copy small{margin-top:3px;color:#697980;font-size:.62rem;line-height:1.35}.defense-scout>button{width:100%;min-height:42px;margin-top:9px;border:0;border-radius:10px;color:#fff;background:#3157C8;font-size:.68rem;font-weight:900}.defense-scout>button:hover{background:#2747A8}
dialog.scout-dialog{width:min(calc(100% - 24px),620px);max-height:94vh}.scout-card{max-height:90vh;overflow:auto;padding:18px;text-align:left}.scout-title{align-items:flex-start}.scout-title h2{margin:1px 0 2px;font-size:1.2rem}.scout-title p{font-size:.7rem}.scout-title>button{flex:0 0 auto}.scout-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.scout-controls label{color:#6d7a80;font-size:.58rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.scout-controls select{width:100%;min-height:44px;margin-top:4px;border:1px solid var(--line);border-radius:11px;padding:0 30px 0 10px;color:var(--ink);background:#fff;font-size:.72rem;font-weight:800;text-transform:none;letter-spacing:0}.scout-preview{margin-top:10px;border:1px solid #cbd8ef;border-radius:13px;padding:12px;background:linear-gradient(145deg,#f7f9ff,#f3f8fa)}.scout-preview>div:first-child{display:flex;flex-direction:column}.scout-preview strong{margin-top:3px;font-size:.8rem}.scout-preview p{margin:8px 0 0;color:#5f6d74;font-size:.69rem;line-height:1.45}.scout-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.scout-tags span{padding:5px 8px;border-radius:999px;color:#3157C8;background:#e7edff;letter-spacing:0}.scout-footer{display:grid;grid-template-columns:1fr 1.7fr;gap:7px;margin-top:12px}.scout-footer button{min-height:46px;border:1px solid var(--line);border-radius:11px;color:#4e5c62;background:#fff;font-size:.69rem;font-weight:850}.scout-footer .run-scout{color:#fff;border-color:#3157C8;background:#3157C8}.scout-footer .run-scout:hover{background:#2747A8}
@media(max-width:540px){dialog.scout-dialog{width:calc(100% - 14px)}.scout-card{padding:13px}.scout-controls{grid-template-columns:1fr}.scout-footer{grid-template-columns:1fr}.scout-footer .run-scout{grid-row:1}}

/* QB View: All Routes is truly unfiltered and mobile controls stay usable. */
.app[data-mode=qb][data-qb-focus=all] .route{opacity:1}
.app[data-mode=qb][data-qb-focus=coverage] .route.blitz{opacity:.06}
@media(max-width:540px){.app[data-mode=qb] .tools{grid-template-columns:repeat(5,minmax(0,1fr))}.app[data-mode=qb] .tool{padding-inline:2px}.app[data-mode=qb] .tool span{font-size:.56rem}}
/* Route/RPO and editor-history refinements */
.toolbar-controls,.history-actions{display:flex;align-items:center}.toolbar-controls{gap:7px}.history-actions{gap:3px;padding:3px;border-radius:10px;background:#edf1ef}.history-actions button{min-width:54px;min-height:34px;border:0;border-radius:8px;padding:3px 8px;color:#48565a;background:transparent;font-size:.62rem;font-weight:820}.history-actions button:hover,.history-actions button:focus-visible{background:#fff}.history-actions button:disabled{opacity:.34;cursor:default}.history-actions b{margin-right:3px;font-size:.88rem}.tools{grid-template-columns:repeat(9,1fr)}.route.rpo{stroke:#b8f252;stroke-width:3;stroke-dasharray:10 3 2 3}
@media(max-width:820px){.tools{grid-template-columns:repeat(9,minmax(48px,1fr))}}
@media(max-width:540px){.toolbar-head{align-items:stretch}.toolbar-controls{justify-content:space-between;width:100%}.read-picker{flex:1}.history-actions{flex:0 0 auto}.history-actions button{min-width:44px;padding:3px 5px}.history-actions span{display:none}.tools{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Route library preserves free drawing while making standard concepts one tap. */
.route-presets{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:thin}.route-presets[hidden]{display:none}.route-presets button{min-height:36px;flex:0 0 auto;border:1px solid #cfd9d5;border-radius:10px;padding:0 11px;color:#536065;background:#fff;font-size:.62rem;font-weight:850;white-space:nowrap}.route-presets button:hover,.route-presets button:focus-visible{border-color:#3157c8}.route-presets button[aria-pressed=true]{color:#fff;border-color:#3157c8;background:#3157c8}
@media(max-width:540px){.tools{display:flex;gap:6px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:thin}.tool{min-width:62px;flex:0 0 62px}.route-presets{margin-top:5px}.route-presets button{min-height:34px;padding:0 10px}.toolbar-card{position:sticky;top:116px;z-index:30}}

/* Custom formation builder */
.formation-builder{display:flex;max-width:680px;align-items:center;gap:12px;margin:0 auto 9px;border:1px solid #cfd9d5;border-radius:15px;padding:9px 10px;background:#fff;box-shadow:0 4px 14px rgba(19,32,37,.06)}.formation-builder[hidden]{display:none}.formation-builder-copy{display:flex;min-width:138px;flex-direction:column}.formation-builder-copy strong{font-size:.72rem}.formation-builder-copy span{margin-top:2px;color:#748084;font-size:.59rem}.formation-palette{display:grid;min-width:0;flex:1;grid-auto-flow:column;grid-auto-columns:minmax(42px,1fr);gap:6px;overflow-x:auto;padding:2px}.formation-chip,.formation-drag-ghost{display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;color:#fff;background:#f26a2c;box-shadow:0 0 0 1px rgba(20,33,38,.16),0 4px 8px rgba(20,33,38,.18);font-size:.62rem;font-weight:950}.formation-chip{position:relative;justify-self:center;touch-action:none}.formation-chip:active{cursor:grabbing;transform:scale(.95)}.formation-chip.placed::after{content:"✓";position:absolute;right:-5px;top:-5px;width:16px;height:16px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:#173c3d;font-size:.52rem}.formation-chip[data-color=black],.formation-drag-ghost[data-color=black]{background:#13191c}.formation-chip[data-color=yellow],.formation-drag-ghost[data-color=yellow]{color:#263037;background:#ffd849}.formation-chip[data-color=blue],.formation-drag-ghost[data-color=blue]{background:#3157c8}.formation-chip[data-color=purple],.formation-drag-ghost[data-color=purple]{background:#7b4bc4}.formation-chip[data-color=green],.formation-drag-ghost[data-color=green]{background:#26a85a}.formation-chip[data-color=orange],.formation-drag-ghost[data-color=orange]{background:#f26a2c}.formation-chip[data-color=red],.formation-drag-ghost[data-color=red]{background:#e63950}.formation-drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 5px rgba(255,255,255,.75),0 12px 25px rgba(0,0,0,.3)}.formation-drag-ghost[hidden]{display:none}

/* Perspective Field View */
.field-view-wrap{max-width:680px;margin:auto}.field-view-wrap[hidden]{display:none}.field-view{position:relative;overflow:hidden;aspect-ratio:10/12.8;border:3px solid #fff;border-radius:22px;background:linear-gradient(to bottom,#65a9d5 0 24%,#143d2e 24% 100%);box-shadow:0 9px 25px rgba(10,40,51,.24),inset 0 0 0 1px rgba(0,0,0,.16);isolation:isolate}.field-view::before{content:"";position:absolute;z-index:0;inset:20% -38% -8%;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent 24%),repeating-linear-gradient(to bottom,transparent 0 8.6%,rgba(255,255,255,.5) 8.6% 9.1%),linear-gradient(90deg,#176b46,#208259 50%,#176b46)}.field-view::after{content:"";position:absolute;z-index:0;left:0;right:0;top:21%;height:8%;background:linear-gradient(to bottom,rgba(17,34,48,.55),rgba(17,34,48,.08));clip-path:polygon(0 35%,35% 55%,50% 45%,67% 57%,100% 28%,100% 100%,0 100%)}.field-view-heading{position:absolute;z-index:6;left:11px;right:11px;top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.42);border-radius:11px;color:#fff;background:rgba(11,27,50,.76);backdrop-filter:blur(5px)}.field-view-heading span{font-size:.56rem;font-weight:900;letter-spacing:.12em}.field-view-heading strong{overflow:hidden;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.field-view-los{position:absolute;z-index:2;left:14%;right:14%;top:71%;border-top:4px solid #67b6ff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}.field-view-los span{position:absolute;left:50%;top:-23px;padding:3px 7px;border-radius:7px;color:#0d2942;background:rgba(255,255,255,.92);font-size:.5rem;font-weight:900;letter-spacing:.06em;transform:translateX(-50%);white-space:nowrap}.field-view-route-layer{position:absolute;z-index:3;inset:0;width:100%;height:100%;overflow:visible}.field-view-route{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}.field-view-player{position:absolute;z-index:5;width:39px;height:39px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.96);border-radius:50%;color:#fff;background:#e63950;box-shadow:0 6px 12px rgba(0,0,0,.38);font-size:.64rem;font-weight:950;transform:translate(-50%,-50%) scale(var(--player-scale));transform-origin:center bottom}.field-view-player[data-color=black]{background:#13191c}.field-view-player[data-color=yellow]{color:#263037;background:#ffd849}.field-view-player[data-color=blue]{background:#3157c8}.field-view-player[data-color=purple]{background:#7b4bc4}.field-view-player[data-color=green]{background:#26a85a}.field-view-player[data-color=orange]{background:#e63950}.field-view-player.defense{background:#263c53}.field-view-ball{z-index:7}.field-view-caption{position:absolute;z-index:6;left:50%;bottom:10px;width:max-content;max-width:calc(100% - 24px);padding:7px 10px;border-radius:9px;color:#fff;background:rgba(11,27,50,.76);font-size:.59rem;font-weight:760;text-align:center;transform:translateX(-50%)}
@media(max-width:540px){.formation-builder{align-items:stretch;flex-direction:column;gap:7px}.formation-builder-copy{min-width:0}.formation-builder-copy span{font-size:.62rem}.formation-palette{width:100%;grid-auto-columns:minmax(38px,1fr)}.formation-chip{width:39px;height:39px}.field-view{border-radius:18px}.field-view-heading{left:8px;right:8px;top:8px}.field-view-player{width:34px;height:34px;font-size:.58rem}.field-view-caption{font-size:.56rem}}
.formation-chip[data-color=orange],.formation-drag-ghost[data-color=orange],.field-view-player[data-color=orange]{background:#f26a2c}

/* Video-game play simulation */
.field-view{aspect-ratio:10/12.2;background:linear-gradient(#61a8db 0 21%,#163f31 21% 100%);box-shadow:0 14px 35px rgba(5,24,36,.3),inset 0 0 0 1px rgba(0,0,0,.2)}
.field-view::before{inset:20% -44% -7%;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:repeating-linear-gradient(to bottom,transparent 0 8.2%,rgba(255,255,255,.58) 8.2% 8.8%),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 9.7%,rgba(255,255,255,.13) 9.7% 10%),linear-gradient(90deg,#0e6b42,#238554 50%,#0e6b42)}
.field-view::after{top:16%;height:10%;clip-path:polygon(0 37%,22% 48%,39% 33%,55% 49%,72% 31%,100% 46%,100% 100%,0 100%);background:linear-gradient(to bottom,#20354b,#15293a)}
.field-view-heading{z-index:110;align-items:stretch;padding:8px 10px;background:rgba(8,20,39,.84)}
.field-view-heading>div:first-child{display:flex;min-width:0;flex-direction:column}.field-view-heading>div:first-child strong{margin-top:2px}
.simulation-hud{display:flex;flex:0 0 auto;align-items:flex-end;flex-direction:column;justify-content:center}
.simulation-hud b{position:relative;padding-left:11px;color:#dfffe9;font-size:.57rem;letter-spacing:.09em}.simulation-hud b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;background:#7bea9c;box-shadow:0 0 8px #7bea9c;transform:translateY(-50%)}
.simulation-hud small{margin-top:2px;color:#bed0df;font-size:.48rem;font-weight:850;letter-spacing:.06em}
.field-view.is-playing .simulation-hud b{color:#fff1b8}.field-view.is-playing .simulation-hud b::before{background:#ffd04c;box-shadow:0 0 10px #ffd04c;animation:sim-pulse .72s infinite}
.field-view-stadium{position:absolute;z-index:1;left:0;right:0;top:17%;height:8%;display:flex;align-items:flex-end;justify-content:space-around;padding:0 8%;background:linear-gradient(to bottom,transparent,rgba(3,14,27,.25));clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.field-view-stadium i{width:12%;height:34%;border-radius:50% 50% 0 0;background:repeating-linear-gradient(90deg,#e8edf1 0 2px,#ef654d 2px 4px,#263c68 4px 6px);opacity:.76}
.field-view-endzone{position:absolute;z-index:2;left:38%;right:38%;top:21.2%;height:8%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);background:#122a53;border:1px solid rgba(255,255,255,.38);font-size:.54rem;font-weight:950;letter-spacing:.16em;transform:perspective(140px) rotateX(61deg);transform-origin:top}
.field-view-los{z-index:4;top:71%;border-color:#63b9ff;box-shadow:0 -1px 0 rgba(255,255,255,.65)}
.field-view-route-layer{z-index:5;transition:opacity .2s}.field-view.is-playing .field-view-route-layer{opacity:.24}
.field-view-route{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.field-view-player{width:54px;height:88px;border:0;border-radius:0;color:inherit;background:transparent!important;box-shadow:none;font-size:inherit;transform:translate(-50%,-100%) scale(var(--player-scale));transform-origin:center bottom;pointer-events:none;will-change:left,top,transform;--jersey:#f7f9fc;--jersey-dark:#d8e0e8;--shorts:#17264b;--number:#17264b;--belt:#f26a2c;--pos-color:#f26a2c}
.field-view-player.defense{--jersey:#244b88;--jersey-dark:#173766;--shorts:#eef3f8;--number:#fff;--belt:#f1c232;--pos-color:#244b88}
.field-view-player[data-color=black]{--pos-color:#13191c}.field-view-player[data-color=yellow]{--pos-color:#e8bd16}.field-view-player[data-color=blue]{--pos-color:#3157c8}.field-view-player[data-color=purple]{--pos-color:#7b4bc4}.field-view-player[data-color=green]{--pos-color:#26a85a}.field-view-player[data-color=orange]{--pos-color:#f26a2c}
.field-avatar{position:absolute;left:50%;bottom:17px;width:46px;height:68px;display:block;transform:translateX(-50%) scale(var(--age-scale));transform-origin:center bottom;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.avatar-shadow{position:absolute;left:6px;right:6px;bottom:-3px;height:8px;border-radius:50%;background:rgba(0,0,0,.27);filter:blur(2px)}
.avatar-head{position:absolute;z-index:8;left:17px;top:0;width:13px;height:15px;border-radius:48% 48% 44% 44%;background:var(--skin);box-shadow:inset 0 -2px 0 rgba(80,36,18,.13)}
.avatar-head em{position:absolute;left:0;right:0;top:-1px;height:6px;border-radius:60% 60% 28% 28%;background:#35241e}
.field-view-player.female .avatar-head em{height:8px;border-radius:60% 60% 40% 40%}.field-view-player.female .avatar-head::after{content:"";position:absolute;right:-5px;top:3px;width:7px;height:11px;border-radius:60%;background:#35241e;transform:rotate(-16deg)}
.avatar-neck{position:absolute;z-index:5;left:20px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--skin)}
.avatar-jersey{position:absolute;z-index:6;left:9px;top:16px;width:28px;height:27px;border-radius:7px 7px 4px 4px;background:linear-gradient(90deg,var(--jersey-dark),var(--jersey) 22% 78%,var(--jersey-dark));box-shadow:inset 0 2px 0 rgba(255,255,255,.28)}
.avatar-jersey b{position:absolute;inset:5px 0 auto;color:var(--number);font-size:12px;font-style:normal;font-weight:950;line-height:1;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.14)}
.avatar-arm{position:absolute;z-index:3;top:19px;width:7px;height:25px;border-radius:6px;background:linear-gradient(to bottom,var(--jersey-dark) 0 28%,var(--skin) 28% 100%);transform-origin:50% 4px}.avatar-arm-left{left:5px;transform:rotate(8deg)}.avatar-arm-right{right:5px;transform:rotate(-8deg)}
.avatar-shorts{position:absolute;z-index:5;left:11px;top:40px;width:24px;height:13px;border-radius:2px 2px 5px 5px;background:var(--shorts);clip-path:polygon(0 0,100% 0,92% 100%,58% 100%,50% 54%,42% 100%,8% 100%)}
.avatar-leg{position:absolute;z-index:2;top:49px;width:7px;height:18px;border-radius:5px;background:linear-gradient(to bottom,var(--skin) 0 68%,#e8edf1 68% 83%,#15213b 83% 100%);transform-origin:50% 1px}.avatar-leg-left{left:13px;transform:rotate(2deg)}.avatar-leg-right{right:13px;transform:rotate(-2deg)}
.avatar-belt{position:absolute;z-index:9;left:8px;top:38px;width:30px;height:4px;border-radius:3px;background:var(--belt);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.avatar-flag{position:absolute;top:1px;width:5px;height:19px;border-radius:1px 1px 3px 3px;background:var(--belt);box-shadow:0 1px 2px rgba(0,0,0,.22)}.avatar-flag-left{left:-4px;transform:rotate(7deg)}.avatar-flag-right{right:-4px;transform:rotate(-7deg)}
.field-player-label{position:absolute;left:50%;bottom:0;min-width:27px;padding:2px 5px;border:1px solid rgba(255,255,255,.82);border-radius:999px;color:#fff;background:var(--pos-color);box-shadow:0 2px 5px rgba(0,0,0,.28);font-size:.48rem;font-weight:950;line-height:1.1;text-align:center;transform:translateX(-50%)}
.field-view-player.is-running .field-avatar{animation:avatar-bob .28s infinite alternate ease-in-out}.field-view-player.is-running .avatar-leg-left{animation:leg-left .34s infinite alternate}.field-view-player.is-running .avatar-leg-right{animation:leg-right .34s infinite alternate}.field-view-player.is-running .avatar-arm-left{animation:arm-left .34s infinite alternate}.field-view-player.is-running .avatar-arm-right{animation:arm-right .34s infinite alternate}.field-view-player.is-running .avatar-flag-left{animation:flag-wave-left .22s infinite alternate}.field-view-player.is-running .avatar-flag-right{animation:flag-wave-right .22s infinite alternate}
.field-view-ball{z-index:130;width:14px;height:9px;display:block;border:1px solid #f1d1a9;border-radius:50%;color:transparent;background:#7c3f1d;box-shadow:0 2px 5px rgba(0,0,0,.5)}.field-view-ball::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:5px;border-left:1px solid #fff;border-right:1px solid #fff}
.field-view-caption{z-index:120;bottom:9px;background:rgba(8,20,39,.82);backdrop-filter:blur(5px)}
@keyframes sim-pulse{50%{opacity:.35;transform:translateY(-50%) scale(.75)}}
@keyframes avatar-bob{to{transform:translateX(-50%) translateY(-2px) scale(var(--age-scale))}}
@keyframes leg-left{to{transform:rotate(-25deg)}}@keyframes leg-right{to{transform:rotate(25deg)}}
@keyframes arm-left{to{transform:rotate(-22deg)}}@keyframes arm-right{to{transform:rotate(22deg)}}
@keyframes flag-wave-left{to{transform:rotate(24deg) translateX(-2px)}}@keyframes flag-wave-right{to{transform:rotate(-24deg) translateX(2px)}}
@media(max-width:540px){.field-view{aspect-ratio:10/12.7}.field-view-heading{align-items:flex-start;padding:7px 8px}.simulation-hud small{max-width:120px;text-align:right}.field-view-player{width:48px;height:81px}.field-avatar{bottom:15px;transform:translateX(-50%) scale(calc(var(--age-scale) * .88))}.field-player-label{bottom:1px}.field-view-caption{font-size:.56rem}}
@media(prefers-reduced-motion:reduce){.field-view-player.is-running .field-avatar,.field-view-player.is-running .avatar-leg,.field-view-player.is-running .avatar-arm,.field-view-player.is-running .avatar-flag{animation:none}}

/* Modern dimensional simulation players */
.field-view-player{width:62px;height:94px;perspective:240px}
.field-avatar{bottom:15px;width:62px;height:76px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.34))}
.avatar-model{position:absolute;z-index:3;left:50%;bottom:0;width:62px;height:62px;display:block;overflow:hidden;transform:translateX(-50%) scaleY(1.08);transform-origin:50% 82%;backface-visibility:visible;will-change:transform}
.avatar-sprite{position:absolute;left:calc(var(--sprite-column) * -100%);top:calc(var(--sprite-row) * -100%);width:300%;height:200%;max-width:none;user-select:none;pointer-events:none}
.avatar-number{position:absolute;z-index:4;left:50%;top:26%;min-width:13px;color:#17264b;font-size:9px;font-style:normal;font-weight:950;line-height:1;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.55);transform:translateX(-50%)}
.field-view-player.defense .avatar-number{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.7)}
.field-avatar>.avatar-shadow{z-index:1;left:8px;right:8px;bottom:-2px;height:9px;background:rgba(0,0,0,.36);filter:blur(3px)}
.field-player-label{z-index:6;bottom:-1px;padding:3px 6px;border-color:rgba(255,255,255,.9);font-size:.5rem}
.field-view-player.is-running .field-avatar{animation:modern-run-bob .23s infinite alternate ease-in-out}
.field-view-player.is-running .avatar-model{filter:drop-shadow(0 3px 2px rgba(0,0,0,.22))}
.field-view.is-playing::before{filter:saturate(1.13) brightness(1.04)}
@keyframes modern-run-bob{from{transform:translateX(-50%) scale(var(--age-scale)) translateY(0)}to{transform:translateX(-50%) scale(var(--age-scale)) translateY(-3px)}}
@media(max-width:540px){.field-view-player{width:53px;height:84px}.field-avatar{width:54px;height:68px;bottom:14px}.avatar-model{width:54px;height:54px}.avatar-number{font-size:8px}.field-view-player.is-running .field-avatar{animation-name:modern-run-bob}}

/* Four-frame running cycle: offense faces upfield, defense faces the offense. */
.avatar-sprite{position:absolute;inset:0;width:100%;height:100%;display:block;background-image:url("player-run-atlas.png");background-repeat:no-repeat;background-size:400% 600%;background-position-x:0%;background-position-y:var(--sprite-y);will-change:background-position}
.field-view-player.is-running .field-avatar{animation:none}
.field-view-player.is-running .avatar-sprite{animation:player-run-cycle var(--run-cycle-duration,.48s) linear infinite}
.field-view-player.defense .avatar-model{filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}

/* Editable defensive responsibility overlays */
.zone-area{fill:#c8d0d6;fill-opacity:.35;stroke:#9aa5ad;stroke-width:1.4;stroke-opacity:.82;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.zone-area.is-custom{fill-opacity:.42;stroke-width:1.8}
.zone-area.is-expanded{stroke-dasharray:7 3}
.app[data-mode=offense] .zone-area{fill-opacity:.2;stroke-opacity:.5}
.app[data-mode=diagram] .zone-area{fill-opacity:.26;stroke-opacity:.62}
.app .player.defense,.app .player.defense[data-color]{background:#8a949e;color:#fff}

@keyframes player-run-cycle{0%,24.99%{background-position-x:0%}25%,49.99%{background-position-x:33.3333%}50%,74.99%{background-position-x:66.6667%}75%,100%{background-position-x:100%}}
@media(max-width:540px){.field-view-player.is-running .field-avatar{animation:none}}

/* Low field-level camera, directional profiles, and a tighter action rail. */
.field-view{background:linear-gradient(#61a8db 0 29%,#163f31 29% 100%)}
.field-view::before{inset:27% -58% -5%;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.field-view::after{top:24%;height:8%}
.field-view-stadium{top:25%;height:6%}
.field-view-endzone{left:43%;right:43%;top:28.2%;height:5%;font-size:.44rem;transform:perspective(180px) rotateX(72deg)}
.field-view-los{top:67%}
.avatar-sprite-forward{background-image:url("player-run-atlas.png")}
.avatar-sprite-side{opacity:0;background-image:url("player-run-side-atlas.png");transform-origin:center}
.field-view-player.is-running .avatar-sprite-forward,.field-view-player.is-running .avatar-sprite-side{animation:player-run-cycle var(--run-cycle-duration,.48s) linear infinite}
.toolbar-card{padding:6px}.toolbar-head{padding-bottom:5px}.tools{gap:3px}.tool{min-height:43px;border-radius:9px;padding:4px 2px 3px}.tool b{height:15px;font-size:.82rem;line-height:15px}.tool span{margin-top:2px;font-size:.55rem}
@media(max-width:540px){.tools{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.tool{min-width:0;min-height:42px}.tool span{font-size:.53rem}}

/* JavaScript advances each planted stride frame so limb motion remains visible at every playback speed. */
.field-view-player.is-running .avatar-sprite{animation:none!important}

/* Console-style QB camera: a low, landscape field plate with real foreground depth. */
.field-view-wrap{max-width:980px}
.field-view{aspect-ratio:16/10;background:#176a3d url("field-stadium-bg-v4.png") center 50%/145% auto no-repeat;box-shadow:0 16px 38px rgba(5,24,36,.34),inset 0 0 0 1px rgba(0,0,0,.18)}
.field-view::before{inset:0;clip-path:none;background:linear-gradient(180deg,rgba(7,21,38,.03) 25%,transparent 54%,rgba(3,18,11,.18) 100%);pointer-events:none}
.field-view::after,.field-view-stadium,.field-view-endzone{display:none}
.field-view-los{left:12%;right:12%;top:69%;border-top-width:3px;opacity:.9}
.field-view-heading{left:12px;right:12px;top:10px;max-width:calc(100% - 24px)}
.field-view-player{filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.field-view.is-playing .field-view-route-layer{opacity:.18}
@media(max-width:540px){.field-view{aspect-ratio:16/10;border-radius:15px;background-size:165% auto}.field-view-los{left:7%;right:7%}.field-view-heading{left:6px;right:6px;top:6px;padding:6px 7px}.field-view-heading span{font-size:.48rem}.field-view-heading strong{font-size:.6rem}.simulation-hud b{font-size:.5rem}.simulation-hud small{font-size:.43rem}.field-view-player{width:46px;height:67px}.field-avatar{width:47px;height:59px;bottom:8px}.avatar-model{width:47px;height:47px}.field-player-label{bottom:-1px}.field-view-caption{bottom:5px;padding:5px 7px}}

/* Throw-result feedback: the selected window and the actual catch or turnover. */
.field-view-player.is-pass-target .field-player-label{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 14px 5px rgba(93,211,255,.82)}
.field-view-player.made-catch .field-avatar{filter:drop-shadow(0 0 8px #67f5a0) drop-shadow(0 4px 3px rgba(0,0,0,.28))}
.field-view-player.made-interception .field-avatar{filter:drop-shadow(0 0 9px #ff554f) drop-shadow(0 4px 3px rgba(0,0,0,.28))}
.field-view-player.made-catch .field-player-label{background:#16894d}.field-view-player.made-interception .field-player-label{background:#c92431}

/* FlagChalk AI Coach */
.ai-coach-action{margin-bottom:8px;color:#fff;border-color:#233f73;background:linear-gradient(135deg,#101b3a,#3157c8)}
.ai-coach-action b{color:#ffd350}.ai-coach-action:hover{color:#fff;border-color:#4569d0;background:linear-gradient(135deg,#16244a,#3d64d4)}
dialog.ai-coach-dialog{width:min(calc(100% - 24px),860px);max-height:95vh}
.ai-coach-card{max-height:92vh;overflow:auto;padding:18px;text-align:left;background:#f7f9fc}
.ai-coach-title{align-items:flex-start}.ai-coach-title h2{margin:1px 0 3px;font-size:1.35rem}.ai-coach-title p{max-width:560px;font-size:.875rem;line-height:1.4}.ai-coach-title>button{flex:0 0 auto}
.ai-coach-context{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.ai-coach-context label,.ai-coach-context>div{display:flex;min-height:64px;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:#fff;color:#687579;font-size:.75rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.ai-coach-context select{width:100%;margin-top:5px;border:0;color:var(--ink);background:transparent;font-size:.875rem;font-weight:850}.ai-coach-context span{font-size:.75rem}.ai-coach-context strong{margin-top:5px;color:var(--ink);font-size:.875rem;text-transform:none;letter-spacing:0}
.ai-coach-prompts{display:flex;gap:7px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.ai-coach-prompts button{min-height:38px;flex:0 0 auto;border:1px solid #cbd6e8;border-radius:999px;padding:0 12px;color:#29488f;background:#fff;font-size:.78rem;font-weight:820}
.ai-coach-prompts button:hover,.ai-coach-prompts button:focus-visible{color:#fff;border-color:#3157c8;background:#3157c8}
.ai-coach-chat{display:flex;min-height:250px;max-height:43vh;flex-direction:column;gap:10px;margin-top:11px;overflow:auto;border:1px solid #d4ddec;border-radius:15px;padding:13px;background:#eef2f8}
.ai-message{max-width:88%;border-radius:14px;padding:11px 13px;box-shadow:0 2px 6px rgba(16,27,58,.06)}.ai-message span{display:block;margin-bottom:4px;font-size:.7rem;font-weight:950;letter-spacing:.07em;text-transform:uppercase}.ai-message p{margin:0;font-size:.875rem;line-height:1.5;white-space:pre-wrap}
.ai-message.coach{align-self:flex-start;border:1px solid #d7e0ef;color:#1d2a45;background:#fff}.ai-message.coach span{color:#3157c8}.ai-message.user{align-self:flex-end;color:#fff;background:#101b3a}.ai-message.user span{color:#aabbe9}
.ai-coach-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.ai-coach-form textarea{min-height:64px;resize:vertical;border:1px solid #cbd5e3;border-radius:13px;padding:10px 12px;color:var(--ink);background:#fff;font:inherit;font-size:.875rem;line-height:1.4}.ai-coach-form textarea:focus{outline:3px solid rgba(49,87,200,.18);border-color:#3157c8}
.ai-coach-submit{display:flex;flex-direction:column;gap:5px}.ai-coach-submit button{min-width:112px;min-height:30px;border:1px solid #3157c8;border-radius:10px;color:#3157c8;background:#fff;font-size:.78rem;font-weight:850}.ai-coach-submit button[type=submit]{flex:1;color:#fff;background:#3157c8}.ai-coach-submit button.is-listening{color:#fff;border-color:#e63950;background:#e63950}
.ai-coach-actions{display:flex;gap:8px;margin-top:9px}.ai-coach-actions button{min-height:42px;flex:1;border:1px solid #243f78;border-radius:11px;color:#fff;background:#101b3a;font-size:.8rem;font-weight:850}.ai-coach-actions button:last-child{color:#29488f;background:#fff}.ai-coach-actions button[hidden]{display:none}
@media(max-width:540px){dialog.ai-coach-dialog{width:calc(100% - 12px)}.ai-coach-card{padding:13px}.ai-coach-context{grid-template-columns:1fr}.ai-coach-title p{font-size:.8rem}.ai-coach-chat{min-height:230px;max-height:42vh;padding:10px}.ai-message{max-width:94%}.ai-message p{font-size:.82rem}.ai-coach-form{grid-template-columns:1fr}.ai-coach-submit{flex-direction:row}.ai-coach-submit button{min-height:42px;flex:1}.ai-coach-actions{flex-direction:column}}

/* Always-visible edit history */
.quick-actions{grid-template-columns:repeat(6,1fr)}
.quick-actions button:disabled{opacity:.38;cursor:default}
.quick-actions .quick-history{color:#29488f;border-color:#cbd6e8;background:#f7f9ff}
@media(max-width:540px){.quick-actions{grid-template-columns:repeat(3,1fr)}.quick-actions .quick-history{font-size:.75rem}}

/* The entire simulation surface is the playback control. */
.field-view{cursor:pointer;touch-action:manipulation}
.field-view.is-paused{box-shadow:0 16px 38px rgba(5,24,36,.34),inset 0 0 0 3px rgba(255,214,64,.82)}
.field-view:focus-visible{outline:3px solid #6be4ff;outline-offset:3px}

/* ============================================================
   UI POLISH LAYER (presentation only — no logic, IDs, or hooks touched)
   1. Bigger field presence, desktop + mobile
   2. Refined color palette / depth
   ============================================================ */
:root{
  --nav:#17202B;--ink:#17202B;--muted:#66727A;
  --chrome:#F3F6FB;--panel:#FFFFFF;--line:#DCE3EF;
  --field:#16865E;--field2:#0F6D4C;
  --orange:#2F5BD6;--orange2:#2447AE;
  --red:#E2334C;--cyan:#0FA3B1;--yellow:#FFD24D;--blue:#7CD0F5;
  --shadow:0 24px 60px rgba(23,32,43,.18)
}
html{background:#E4E9F2}
body{background:
  radial-gradient(1200px 520px at 8% -10%,rgba(47,91,214,.14),transparent 70%),
  radial-gradient(900px 500px at 100% 0,rgba(15,163,177,.10),transparent 70%),
  linear-gradient(160deg,#EEF2F8,#DFE6F1)}
.app{width:min(100%,1440px);border-radius:0}
@media(min-width:1200px){.app{border-radius:22px;margin-block:14px;min-height:calc(100vh - 28px);overflow:clip}}
.masthead{background:linear-gradient(180deg,#202B38,var(--nav));box-shadow:0 10px 28px rgba(23,32,43,.18)}
.tab[aria-selected=true]{border-color:#4C7BFF;color:#fff}
.settings-panel{background:#F7F9FD}
.toolbar-card,.panel{border-radius:20px;box-shadow:0 10px 28px rgba(15,26,51,.07)}

/* --- Field gets the stage --- */
@media(min-width:821px){.editor-grid{grid-template-columns:minmax(0,2.15fr) minmax(288px,.8fr);gap:18px}}
@media(max-width:820px){.editor-grid{grid-template-columns:minmax(0,1fr)}}
.field-wrap{max-width:none;width:100%}
.field,.field-view{border-radius:24px;border-width:4px;box-shadow:0 26px 60px rgba(8,45,31,.30),inset 0 0 0 1px rgba(0,0,0,.14)}
@media(min-width:821px){
  .field-column{position:sticky;top:14px;align-self:start}
  .field{aspect-ratio:10/12}
}
@media(min-width:1200px){
  .editor-grid{grid-template-columns:minmax(0,2.5fr) minmax(300px,.72fr)}
}
@media(max-width:820px){
  .field-wrap{max-width:none}
  .editor-grid{gap:14px}
  .workspace{padding-inline:clamp(8px,2vw,16px)}
}
@media(max-width:540px){
  .workspace{padding:8px 8px 22px}
  .field,.field-view{border-radius:18px;border-width:3px}
  .field{aspect-ratio:10/12.2}
  .editor-grid{margin-top:9px}
  .control-column{gap:9px}
}
/* Simulation surface matches the editor field weight */
.field-view-wrap{width:100%}
.field-legend span{background:rgba(6,26,18,.66)}
@media(min-width:821px){
  /* keep the whole field visible while staying as large as the viewport allows */
  .field-wrap{max-width:min(100%,calc((100vh - 132px) * 10 / 12))}
}

/* ============================================================
   UNIFIED CONTROL SYSTEM
   Field-first hierarchy, complete controls, mint + charcoal actions
   ============================================================ */
:root{
  --nav:#17202B;--ink:#17202B;--muted:#66727A;
  --chrome:#F3F6F5;--panel:#FFFFFF;--line:#D7DFDC;
  --field:#16865E;--field2:#0F6D4C;
  --orange:#10B981;--orange2:#059669;
  --control-soft:#F3F6F5;--control-hover:#E8EFEC;
  --shadow:0 18px 48px rgba(23,32,43,.12)
}
html{background:var(--chrome)}
body{color:var(--ink);background:var(--chrome);font-family:"Manrope",ui-sans-serif,system-ui,sans-serif}
button,input,select{font-family:inherit}
.app{width:min(100%,1600px);background:var(--chrome);box-shadow:none}
.masthead{position:relative;padding:10px clamp(14px,2vw,24px) 0;color:var(--ink);background:var(--panel);border-bottom:1px solid var(--line);box-shadow:none}
.brandbar{min-height:42px}.brand-logo{width:clamp(124px,14vw,154px);padding:2px 4px;background:transparent}
.head-btn{height:38px;min-width:38px;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:var(--control-soft)}
.head-btn:hover,.head-btn:focus-visible{background:var(--control-hover)}
.head-btn.labeled{color:#fff;border-color:var(--orange2);background:var(--orange)}
.head-btn.labeled:hover,.head-btn.labeled:focus-visible{background:var(--orange2)}
.playbar{padding:5px 0 8px}.play-name-wrap span{color:var(--orange2)}
.play-name-wrap input{color:var(--ink);font-family:"Sora",ui-sans-serif,sans-serif;font-size:1.05rem;letter-spacing:0;border:1px solid var(--line);border-radius:10px;background:var(--control-soft);padding:8px 64px 8px 12px;min-height:42px}
.play-name-wrap input:hover{border-color:var(--orange2)}
.play-name-wrap input:focus{border-color:var(--orange);background:var(--panel);box-shadow:0 0 0 3px rgba(183,243,0,.18)}
.play-name-wrap{position:relative}
.play-name-wrap::after{content:"✎";position:absolute;right:12px;bottom:11px;color:var(--muted);font-size:.95rem;pointer-events:none}
.play-name-wrap .ai-name-btn{position:absolute;right:34px;bottom:8px;z-index:2;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;color:#14200B;background:var(--orange);font-size:.9rem;line-height:1;box-shadow:0 0 0 2px var(--panel),0 2px 5px rgba(0,0,0,.2)}
.play-name-wrap .ai-name-btn:hover,.play-name-wrap .ai-name-btn:focus-visible{background:var(--orange2);transform:scale(1.05)}
.play-name-wrap .ai-name-btn[disabled]{opacity:.55;cursor:default;transform:none}
.start-over{min-height:38px;color:#9F3040;border-color:#E7C8CD;background:#FFF7F8}
.start-over:hover,.start-over:focus-visible{color:#7F1D2D;border-color:var(--red);background:#FDECEF}
.tabs{max-width:560px}.tab{min-height:40px;color:var(--muted)}
.tab[aria-selected=true],.app[data-mode=defense] .tab[aria-selected=true]{color:var(--ink);border-color:var(--orange)}
.tab:focus-visible{outline-color:var(--orange)}
.rail-title,.panel-title{font-family:"Sora",ui-sans-serif,sans-serif;color:var(--ink);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.workspace{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr) minmax(270px,300px);grid-template-rows:auto auto 1fr;gap:12px;padding:14px}
.settings-panel{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 12px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--panel)}
.settings-panel .rail-title{grid-column:1/-1;margin-bottom:2px}
.settings-panel label{color:var(--muted);font-size:.6rem;letter-spacing:.06em}
.settings-panel select{min-height:39px;margin-top:4px;border-radius:8px;background:var(--control-soft);font-size:.7rem}
.settings-panel label:first-of-type,.settings-panel label:last-of-type{grid-column:1/-1}
.settings-panel[hidden]+.tools-run-wrap .toolbar-card{margin-top:0;border-radius:12px}
.tools-run-wrap{grid-column:1;grid-row:1;align-self:start;margin-top:0}.toolbar-card{padding:12px 14px 14px;border:1px solid var(--line);border-radius:12px;box-shadow:none}
.toolbar-card>.rail-title{margin-bottom:10px}

.toolbar-head{align-items:stretch;flex-direction:column;gap:8px;padding:0 0 10px}
.selected-status{min-height:32px;padding:6px 8px;border-radius:8px;background:var(--control-soft)}
.selected-status i{background:var(--orange);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
.toolbar-controls{width:100%;align-items:stretch;flex-direction:column;gap:6px}
.read-picker{display:grid;width:100%;grid-template-columns:repeat(3,1fr);background:var(--control-soft)}
.read-picker button{padding:0 4px}
.read-picker button[data-read="1"],.read-picker button[data-read="2"]{color:var(--ink);background:transparent;box-shadow:none}
.read-picker button[data-read="1"][aria-pressed=true]{color:#fff;background:var(--red);outline:0}
.read-picker button[data-read="2"][aria-pressed=true]{color:#fff;background:#0F9F9A;outline:0}
.history-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;background:var(--control-soft)}
.history-actions button{min-width:0}.history-actions span{display:inline}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tool{min-height:52px;border-color:transparent;border-radius:8px;background:var(--control-soft)}
.tool:hover{background:var(--control-hover)}
.tool[aria-pressed=true],.app[data-mode=defense] .tool[aria-pressed=true]{color:#fff;background:var(--nav);box-shadow:none}
.route-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px;padding:0;overflow:visible}
.route-presets button{min-height:34px;width:100%;padding:0 6px;border-color:var(--line);border-radius:8px;background:var(--panel);white-space:normal}
.route-presets button:hover,.route-presets button:focus-visible{border-color:var(--orange)}
.route-presets button[aria-pressed=true]{color:#fff;border-color:var(--orange2);background:var(--orange)}
.editor-grid{display:contents}
.field-column{grid-column:2;grid-row:1/4;align-self:start;min-width:0;position:sticky;top:14px}
.tools-run-wrap{grid-column:1;grid-row:1}
.quick-actions{grid-column:1;grid-row:2;grid-template-columns:repeat(3,1fr)}
.control-column{grid-column:3;grid-row:1;min-width:0;gap:9px}
.run-panel{grid-column:3;grid-row:2;align-self:start;margin-top:-12px}
.save-play-btn{width:100%;min-height:42px;margin-top:2px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--control-soft);font-weight:850;font-size:.8rem}
.save-play-btn:hover,.save-play-btn:focus-visible{border-color:var(--orange);background:#F7FCFA}
.formation-builder{max-width:none;border-radius:10px;box-shadow:none}
.field-wrap,.field-view-wrap{max-width:min(100%,calc((100vh - 132px) * 10 / 12))}
.field,.field-view{border-radius:14px;border-width:4px;box-shadow:0 14px 34px rgba(8,45,31,.22),inset 0 0 0 1px rgba(0,0,0,.12)}
.quick-actions button,.coach-buttons button,.dialog-actions button,.scout-footer button,.improve-footer button{border-radius:8px;background:var(--control-soft)}
.quick-actions button:hover,.coach-buttons button:hover{background:var(--control-hover)}
.panel{padding:13px;border-radius:12px;box-shadow:none}
.panel-title{margin-bottom:9px}
.primary,.build-matchups,.tutorial-actions #nextTutorial,.defense-scout>button,.scout-footer .run-scout,.improve-footer .apply-all{color:#fff;border-color:var(--orange2);background:var(--orange);box-shadow:none}
.primary:hover,.build-matchups:hover,.tutorial-actions #nextTutorial:hover,.defense-scout>button:hover,.scout-footer .run-scout:hover{background:var(--orange2)}
.speed,.history-actions{border:1px solid var(--line)}
.speed button[aria-pressed=true]{color:#fff;background:var(--nav);box-shadow:none}
.switch-row input:checked+i{background:var(--orange)}
.coach-panel{background:var(--panel)}
.coach-action,.improve-action,.ai-coach-action,.beat-defense-action,.matchup-action{min-height:52px;margin-bottom:6px;color:var(--ink);border-color:var(--line);border-radius:9px;background:var(--panel);box-shadow:none}
.coach-action:hover,.improve-action:hover,.ai-coach-action:hover,.beat-defense-action:hover,.matchup-action:hover{color:var(--ink);border-color:var(--orange);background:#F7FCFA}
.coach-action b,.improve-action b,.ai-coach-action b,.beat-defense-action b,.matchup-action b{color:var(--orange2)}
.coach-action small{color:var(--muted)}
.coach-action:first-of-type{color:#fff;border-color:var(--nav);background:var(--nav)}
.coach-action:first-of-type small{color:#DDE5E2}.coach-action:first-of-type b{color:var(--orange)}
.coach-buttons button:first-child{color:#fff;border-color:var(--nav);background:var(--nav)}
.defense-plan>button,.matchup-call>button,.saved-item .load,.rule-card .rule-close{background:var(--nav)}
.improve-summary,.ai-message.user{background:var(--nav)}
.tutorial-progress i.is-active,.tutorial-icon{background:var(--orange)}
.tutorial-kicker{color:var(--orange2)}
.tutorial-card h2{color:var(--ink)}
.zone-area{fill:#C8D0D6;fill-opacity:.35;stroke:#9AA5AD}
.app .player.defense,.app .player.defense[data-color]{background:#8A949E;color:#fff}
@media(min-width:1200px){.app{margin-block:0;min-height:100vh;border-radius:0;overflow:visible}}
@media(max-width:1040px) and (min-width:821px){
  .workspace{grid-template-columns:205px minmax(0,1fr) 250px;padding:10px;gap:9px}
  .coach-action{padding:8px}.coach-action small{display:none}
}
@media(max-width:820px){
  .workspace{display:flex;flex-direction:column;padding:10px;gap:10px}
  .editor-grid{display:contents}
  .field-column{display:contents;position:static}
  .field-wrap{order:1;max-width:680px;width:100%}
  .field-view-wrap{order:1;max-width:680px;width:100%}
  .formation-builder{order:0;width:100%;max-width:680px}
  .tools-run-wrap{order:2;width:100%;max-width:680px}
  .toolbar-card{width:100%;margin-top:0;margin-bottom:-10px;border-bottom:0;border-radius:12px 12px 0 0}
  .run-panel{order:2;width:100%;max-width:680px;margin-top:0;border-top:0;border-radius:0 0 12px 12px}
  .settings-panel{order:3;display:grid;grid-template-columns:2fr repeat(3,1fr);width:100%;max-width:680px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:12px}
  .settings-panel[hidden]+.tools-run-wrap .toolbar-card{margin-bottom:0;border-bottom:1px solid var(--line);border-radius:12px}
  .settings-panel label:first-of-type,.settings-panel label:last-of-type{grid-column:auto}
  .quick-actions{order:4;width:100%;max-width:680px}

  .control-column{order:5;display:grid;grid-template-columns:1fr 1fr;width:100%}
  .grade-panel{grid-column:1/-1}
  .tools{grid-template-columns:repeat(9,minmax(60px,1fr));overflow-x:auto}
  .route-presets{display:flex;max-height:none;overflow-x:auto}
  .route-presets button{width:auto;min-width:84px}
}
@media(max-width:540px){
  .masthead{padding-inline:12px}.tabs{max-width:none}
  .workspace{padding:8px}
  .settings-panel{grid-template-columns:1fr 1fr;padding:11px}
  .settings-panel label:first-of-type,.settings-panel label:last-of-type{grid-column:1/-1}
  .toolbar-card{position:static;padding:8px}
  .toolbar-card>.rail-title{margin-bottom:5px}
  .toolbar-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding-bottom:6px}
  .selected-status{min-height:28px;padding:4px 7px;font-size:.64rem}
  .tools{display:flex}.tool{min-width:62px;flex:0 0 62px}
  .toolbar-controls{width:auto;flex-direction:row}.read-picker{width:auto;min-width:164px;flex:0 1 auto}.history-actions{width:auto;grid-template-columns:repeat(2,38px)}
  .read-picker button{min-height:28px;font-size:.58rem}.history-actions button{min-height:28px}
  .tools{gap:4px;padding-bottom:3px}.tool{min-width:56px;min-height:42px;flex-basis:56px}
  .route-presets{margin-top:4px}.route-presets button{min-height:30px;min-width:76px;font-size:.61rem}
  .history-actions span{display:none}
  .control-column{display:flex}
  .quick-actions{grid-template-columns:repeat(3,1fr)}
  .field,.field-view{border-radius:12px}
}
:root .play-file-menu { position: relative; }
:root .play-file-menu summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
:root .play-file-menu summary::-webkit-details-marker { display: none; }
:root .play-file-menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 100; display: grid; gap: 6px; min-width: 170px; padding: 8px; background: #1b2532; border: 1px solid #465566; border-radius: 10px; box-shadow: 0 8px 24px #0006; }
:root .play-file-menu-items .head-btn { width: 100%; justify-content: flex-start; white-space: nowrap; }

/* Gridiron Heritage: deep slate operations shell with restrained emerald signal. */
:root{
  --nav:#0F172A;--ink:#F8FAF7;--muted:#94A3B8;
  --chrome:#111827;--panel:#1E293B;--line:#3A4A5F;
  --field:#177245;--field2:#0D5735;
  --orange:#22C55E;--orange2:#16A34A;
  --control-soft:#273549;--control-hover:#33445A;
  --shadow:0 18px 48px rgba(2,6,23,.36)
}
html,body{background:var(--chrome)}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;background-image:linear-gradient(rgba(34,197,94,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.022) 1px,transparent 1px);background-size:32px 32px}
button,input,select{letter-spacing:0}
.app{background:transparent}
.masthead{color:var(--ink);background:var(--nav);border-bottom-color:#334155;box-shadow:0 10px 28px rgba(2,6,23,.3)}
.brand-logo{padding:0;border:0;border-radius:0;background:transparent}
.head-btn{color:var(--ink);border-color:var(--line);background:var(--control-soft)}
.head-btn:hover,.head-btn:focus-visible{border-color:rgba(34,197,94,.65);background:var(--control-hover)}
.head-btn.labeled{color:#071A10;border-color:var(--orange);background:var(--orange)}
.head-btn.labeled:hover,.head-btn.labeled:focus-visible{background:var(--orange2)}
.play-name-wrap span{color:var(--orange)}.play-name-wrap input{color:var(--ink)}
.start-over{color:#FDA4AF;border-color:#713442;background:#311D27}
.tabs{max-width:620px}.tab{color:#94A3B8}.tab[aria-selected=true],.app[data-mode=defense] .tab[aria-selected=true]{color:var(--orange);border-color:var(--orange)}
.workspace{background:transparent}
.settings-panel,.toolbar-card,.panel,.formation-builder{color:var(--ink);border-color:var(--line);background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.rail-title,.panel-title{color:var(--orange);letter-spacing:.12em}
.settings-panel label,.selected-status,.coach-action small,.switch-row,.switch-row small,.grade-head p,.coaching-copy p{color:var(--muted)}
.settings-panel select,.read-picker,.selected-status,.tool,.speed,.history-actions,.quick-actions button,.coach-buttons button{color:var(--ink);border-color:var(--line);background:var(--control-soft)}
.settings-panel select{color-scheme:dark}
.read-picker button,.speed button,.history-actions button,.tool{color:#CBD5E1}
.read-picker button[aria-pressed=true],.speed button[aria-pressed=true]{color:var(--ink);background:#405168}
.tool:hover,.quick-actions button:hover,.coach-buttons button:hover{background:var(--control-hover)}
.tool[aria-pressed=true],.app[data-mode=defense] .tool[aria-pressed=true]{color:#071A10;border-color:var(--orange);background:var(--orange);box-shadow:0 5px 14px rgba(34,197,94,.2)}
.route-presets button{color:#CBD5E1;border-color:var(--line);background:var(--control-soft)}
.route-presets button[aria-pressed=true]{color:#071A10;border-color:var(--orange);background:var(--orange)}
.primary,.build-matchups,.tutorial-actions #nextTutorial,.defense-scout>button,.scout-footer .run-scout,.improve-footer .apply-all{color:#071A10;border-color:var(--orange);background:var(--orange);box-shadow:0 6px 16px rgba(34,197,94,.18)}
.primary:hover,.build-matchups:hover,.tutorial-actions #nextTutorial:hover,.defense-scout>button:hover,.scout-footer .run-scout:hover{background:var(--orange2)}
.coach-action,.improve-action,.ai-coach-action,.beat-defense-action,.matchup-action{color:var(--ink);border-color:var(--line);background:var(--control-soft)}
.coach-action:hover,.improve-action:hover,.ai-coach-action:hover,.beat-defense-action:hover,.matchup-action:hover{color:var(--ink);border-color:var(--orange);background:#314155}
.coach-action:first-of-type,.coach-buttons button:first-child{color:#071A10;border-color:var(--orange);background:var(--orange)}
.coach-action:first-of-type small{color:#164E2D}.coach-action b,.improve-action b,.ai-coach-action b,.beat-defense-action b,.matchup-action b{color:var(--orange)}
.field,.field-view{border-color:#F1F5F9;box-shadow:0 0 0 1px rgba(34,197,94,.16),0 20px 46px rgba(2,6,23,.48)}
.field::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.012) 3px 4px)}
.zone-area{fill:#D7DCE0;fill-opacity:.34;stroke:#B8C0C5}
.app .player.defense,.app .player.defense[data-color]{background:#7E878D;color:#fff}
.quick-actions button{border-radius:6px}.panel,.settings-panel,.toolbar-card{border-radius:7px}
.formation-builder{border-radius:7px}
.play-file-menu-items{background:#1E293B!important;border-color:#475569!important}
dialog::backdrop{background:rgba(2,6,23,.82)}
.dialog-card{color:#F8FAF7;background:#1E293B;border-color:#475569}
.dialog-card p,.dialog-title span,.saved-empty{color:#AAB7C7}.dialog-title button,.dialog-actions button{color:#F8FAF7;background:#273549;border-color:#475569}
.saved-item{border-color:#475569;background:#273549}.saved-item small{color:#AAB7C7}.saved-item .load{color:#071A10;background:var(--orange)}.saved-item .delete{color:#FDA4AF;background:#3A202A}
.toast{background:#0F172A;border:1px solid rgba(34,197,94,.35)}
@media(max-width:820px){.toolbar-card{border-radius:7px 7px 0 0}.run-panel{border-radius:0 0 7px 7px}.settings-panel{border-radius:7px}}

/* Mobile touch polish: no pull-to-refresh mid-draw, no tap flash. */
html,body{overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent}
button,a,[role=button],summary,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* AI play namer is now a sparkle icon inside the play-name subject box. */

/* Mobile shell: the parent app already owns navigation and branding. Keep the
   embedded designer header focused on play actions instead of repeating them. */
@media (max-width:540px){
  .masthead{padding:8px 10px 0}
  .brandbar{min-height:40px}
  .brandbar .brand,.head-menu-toggle,.head-links{display:none!important}
  .head-actions{width:100%;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.25fr) 42px;gap:7px}
  .head-btn{height:40px;min-width:0;border-radius:7px}
  .head-btn.labeled{padding:0 10px;font-size:.76rem}
  .play-file-menu{min-width:0}
  .play-file-menu>summary{width:100%;justify-content:center}
  #settingsBtn{font-size:1.15rem}
  .playbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 8px;padding:10px 0 8px}
  .play-name-wrap{grid-column:1/-1;width:100%}
  .play-name-wrap input{width:100%;min-height:46px;font-size:1.12rem;padding-right:64px}
  .start-over{min-height:40px;border-radius:7px;padding:0 11px;font-size:.68rem;grid-column:2}
  .tabs{margin-top:1px}
  .tab{min-height:43px;font-size:.66rem}
}

/* Canonical offense palette — QB black, center yellow, receivers red/green,
   backs & slots blue/orange. Every surface (field tokens, formation chips,
   drag ghost, simulation players) uses the exact same values so a saved play
   prints and imports with identical colors. */
.player[data-color=black],.formation-chip[data-color=black],.formation-drag-ghost[data-color=black],.field-view-player[data-color=black]{color:#fff;background:#13191c}
.player[data-color=yellow],.formation-chip[data-color=yellow],.formation-drag-ghost[data-color=yellow],.field-view-player[data-color=yellow]{color:#263037;background:#ffd849}
.player[data-color=red],.formation-chip[data-color=red],.formation-drag-ghost[data-color=red],.field-view-player[data-color=red]{color:#fff;background:#e63950}
.player[data-color=green],.formation-chip[data-color=green],.formation-drag-ghost[data-color=green],.field-view-player[data-color=green]{color:#fff;background:#26a85a}
.player[data-color=blue],.formation-chip[data-color=blue],.formation-drag-ghost[data-color=blue],.field-view-player[data-color=blue]{color:#fff;background:#3157c8}
.player[data-color=orange],.formation-chip[data-color=orange],.formation-drag-ghost[data-color=orange],.field-view-player[data-color=orange]{color:#fff;background:#f26a2c}
.player[data-color=purple],.formation-chip[data-color=purple],.formation-drag-ghost[data-color=purple],.field-view-player[data-color=purple]{color:#fff;background:#7b4bc4}
.field-view-player[data-color=black]{--pos-color:#13191c}
.field-view-player[data-color=yellow]{--pos-color:#ffd849}
.field-view-player[data-color=red]{--pos-color:#e63950}
.field-view-player[data-color=green]{--pos-color:#26a85a}
.field-view-player[data-color=blue]{--pos-color:#3157c8}
.field-view-player[data-color=orange]{--pos-color:#f26a2c}
.field-view-player[data-color=purple]{--pos-color:#7b4bc4}
.player.defense,.field-view-player.defense,.defense[data-color]{color:#fff;background:#7E878D}


/* ============================================================
   SHARED READ COLOR SYSTEM (matches wristbands, call sheets, Pro Concepts)
   ============================================================ */
:root{--red:#E63950;--cyan:#3157C8}
.route.read-suggested{stroke-dasharray:7 5}
.read-badge.suggested{opacity:.86}
.game-meta{display:flex;align-items:center;gap:10px;margin-left:auto}
.game-meta label{display:flex;flex-direction:column;color:rgba(255,255,255,.55);font-size:.52rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.game-meta select{min-height:30px;margin-top:2px;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:0 24px 0 9px;color:rgba(255,255,255,.92);background:rgba(255,255,255,.07);font-size:.68rem;font-weight:700}
.game-meta select option{color:#12291f;background:#fff}
.game-meta select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media(max-width:540px){.game-meta{gap:6px}.game-meta label{font-size:.46rem}.game-meta select{min-height:27px;font-size:.6rem;padding:0 20px 0 7px}}
@media(max-width:820px){.game-meta{grid-column:1/-1;justify-content:flex-start;margin-left:0}}

/* Embedded in the main app: the app already owns branding and navigation,
   so the designer header shrinks to the play bar only. */
.embedded .brandbar{display:none!important}
.playbar .play-file-menu{position:relative}
.playbar .play-file-menu>summary{height:38px;font-size:.74rem}
.playbar .play-file-menu-items{left:0;right:auto}
@media(max-width:540px){
  .playbar{grid-template-columns:auto 1fr auto}
  .playbar .play-file-menu{grid-column:1}
  .playbar .play-file-menu>summary{height:40px;font-size:.72rem;padding:0 10px}
  .game-meta{grid-column:1/-1;order:5}
  .start-over{grid-column:3}
}

.cadence-block{margin-top:10px;display:flex;flex-direction:column;gap:4px}.cadence-field{color:#8a97a6;font-size:.63rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.cadence-block input{width:100%;min-height:40px;border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:0 10px;color:#fff;background:rgba(255,255,255,.07);font-size:.8rem;font-weight:750}.cadence-block input:focus{outline:0;border-color:var(--yellow)}.cadence-block small{color:#8a97a6;font-size:.6rem;font-weight:650;line-height:1.3}.cadence-word{position:fixed;z-index:60;left:50%;top:18%;transform:translate(-50%,-50%) scale(.9);padding:10px 20px;border-radius:14px;color:#fff;background:rgba(9,26,18,.88);box-shadow:0 10px 26px rgba(0,0,0,.34);font-size:1.5rem;font-weight:900;letter-spacing:.12em;opacity:0;transition:opacity .12s,transform .12s;pointer-events:none}.cadence-word.show{opacity:1;transform:translate(-50%,-50%) scale(1)}