@import url('/game_v7.css');
@import url('/game_customize.css');
.opponent-hidden{margin:0;padding:9px 12px;background:#1d3b2e;text-align:center;color:#fff1b5;font-size:11px}.usage-badge{grid-column:2;font-size:9px;line-height:1.4;color:#426847}.chosen .usage-badge{color:#f6df9b}.usage-info{font-size:10px;color:#61745c;margin:12px 0}.usage-info summary{cursor:pointer;min-height:32px;padding:7px 0}.usage-info p{line-height:1.6}.visible-ball{pointer-events:none}.play-card{min-height:72px}
.practice-controls{font-size:11px;line-height:1.5;margin:10px 0;color:#556f50}.practice-controls summary{cursor:pointer;min-height:34px;padding:8px 0}.practice-controls label{display:block;margin:8px 0}.practice-controls input{width:auto;min-height:0;margin-right:7px}.practice-controls select{font-size:12px;min-height:42px}.practice-controls p{font-size:10px}#ballReadout{color:#fff2a3;font-weight:800;white-space:nowrap}.field-bottom{flex-wrap:wrap}
.brand-bar>.feedback-button{font-size:10px;min-width:64px;margin-left:auto;margin-right:8px}#feedbackDialog label{display:block;font-size:11px;margin:12px 0 7px}#feedbackDialog textarea{font:inherit;width:100%;padding:10px;border:1px solid #c8d5c2;border-radius:9px;resize:vertical}#feedbackDialog .feedback-privacy{font-size:10px}#feedbackStatus{font-size:12px}
#gameField{background:#0d2c20}#ballReadout{font-size:11px}

/* One screen at a time. The field, choices and action are the main view. */
.brand-bar{max-width:1000px;padding:6px 12px;gap:8px}
.brand{font-size:10px;gap:8px;letter-spacing:.8px}
.brand-icon{font-size:10px;padding:7px 6px;letter-spacing:2px}
.brand-bar>.feedback-button{font-size:10px;min-width:54px;margin-right:0}
.brand-bar>button{min-height:36px;height:36px}
#game{display:block;max-width:1000px;padding:0 10px 132px;margin:0 auto}
.scoreboard{padding:8px 10px;border-radius:9px 9px 0 0;gap:8px}
.score-team{display:flex;gap:5px;align-items:center;font-size:11px;white-space:nowrap}
.score-team>strong{font-size:18px;line-height:1;font-weight:800;letter-spacing:0}
.score-team>span:nth-child(2){font-size:7px;letter-spacing:0}
.score-team.opponent{justify-content:flex-end}
.score-clock{display:flex;align-items:center;justify-content:center;gap:6px}
.score-clock>span{font-size:8px;letter-spacing:0;white-space:nowrap}
.score-clock strong{font-size:14px;margin:0;line-height:1.2}
#scorePossession{display:none}
.situation{font-size:11px;padding:5px 10px;line-height:1.2;border-radius:0 0 7px 7px}
.game-screen{min-width:0}
.field-stage{position:relative;margin:6px 0 0;border-radius:9px}
.field-top{min-height:25px;padding:5px 9px;letter-spacing:0}
.field-top>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opponent-hidden{position:absolute;right:7px;top:32px;padding:4px 7px;border-radius:5px;font-size:9px;z-index:1;pointer-events:none;background:#123b2ce6}
#gameField{height:clamp(220px,calc(100svh - 470px),540px);min-height:0;max-height:none}
.field-bottom{padding:4px 8px;min-height:31px;gap:6px;flex-wrap:nowrap}
.field-bottom>span:first-child{font-size:8px;letter-spacing:0}
.field-bottom button{min-height:26px;font-size:9px;padding:3px 7px}
.field-legend{display:none}
#ballReadout{font-size:10px;margin-left:auto}
.call-heading{margin:7px 0 5px;min-height:18px}
.call-heading h2{font-size:12px;letter-spacing:0}
.blind-status{font-size:9px}
.play-choices{display:grid;grid-template-columns:none;grid-template-rows:62px;grid-auto-flow:column;grid-auto-columns:104px;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 0 5px}
.play-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:0;padding:7px 8px;scroll-snap-align:start;border-radius:8px}
.play-card svg,.play-card small{display:none}
.play-card strong{font-size:11px;line-height:1.15;overflow-wrap:normal}
.usage-badge{font-size:9px;line-height:1.1;white-space:nowrap}
.play-phase,#playPreview,#playReview{position:fixed;left:8px;right:8px;bottom:calc(55px + env(safe-area-inset-bottom,0px));z-index:11;max-width:984px;margin:0 auto;padding:7px 9px;background:#f8faf2f5;border:1px solid #becfb5;border-radius:10px;box-shadow:0 2px 12px #183b2522;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}
#playPreview h2,#playReview h2{font-size:12px;line-height:1.2;letter-spacing:0;max-width:45%;overflow:hidden;text-overflow:ellipsis}
#playPreview p{display:none}
#playPreview .phase-actions,#playReview .phase-actions{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end}
#playPreview .phase-actions button,#playReview .phase-actions button{min-height:42px;min-width:90px;max-width:160px;padding:8px 13px;font-size:12px;flex:1}
.game-tabs{position:fixed;left:0;right:0;bottom:0;z-index:12;display:flex;justify-content:center;background:#f7f9f1;border-top:1px solid #cad7c0;padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px));gap:6px}
.game-tabs button{flex:1;max-width:320px;min-height:44px;font-size:12px;border-radius:8px;font-weight:650;background:transparent;color:#687b65}
.game-tabs button[aria-selected=true]{background:#dfe9d6;color:#143d2b}
.last-result{padding:8px 10px;margin:7px 0 0;border-radius:7px}
.last-result strong{font-size:13px}
.last-result span{display:block;font-size:10px;line-height:1.4;margin-top:3px}
.reviewing-play #gameField{height:clamp(220px,calc(100svh - 405px),700px)}
.player-peek{font-size:11px;padding:7px 9px;margin:6px 0}
.game-foot{display:none}
#resultsScreen,#toolsScreen{max-width:760px;margin:0 auto;padding:14px 4px 10px}
.empty-state{font-size:13px;color:#67785f;margin:20px 0}
.results-summary{padding:12px;border-radius:9px;background:#e6eddf}
.results-summary strong,.results-summary span{display:block}
.results-summary strong{font-size:16px}
.results-summary span{font-size:11px;margin-top:6px;line-height:1.4;color:#5c7256}
.alternative-plays{margin:12px 0 0;padding:12px;border-radius:9px}
.alternative-plays h2{font-size:15px}
.alternative-plays>p{font-size:10px;line-height:1.4}
.alternative-plays li{padding:10px 4px}
.alternative-plays li p{display:none}
.alternative-plays li small{display:block;margin-top:5px;font-size:10px;line-height:1.45}
.alternative-plays li strong{font-size:13px}
.alternative-plays details{font-size:11px}
.practice-controls{font-size:12px;margin:0;padding:14px;background:#fff;border:1px solid #d3dfcc;border-radius:10px}
.practice-controls h2,.clock-panel h2{font-size:16px;letter-spacing:0}
.practice-controls .practice-switch{display:flex;align-items:center;gap:9px;min-height:44px;margin:6px 0}
.practice-switch input{width:20px;height:20px;min-height:20px;accent-color:#1f523a}
.practice-controls label{margin:10px 0 7px}
.practice-controls select{min-height:44px}
.practice-controls p{font-size:11px;line-height:1.4}
#viewPractice{width:100%;min-height:44px;font-size:12px}
.clock-panel{margin:18px 0}
.clock-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.clock-tools button{min-height:44px;font-size:12px;flex:1}
.clock-tools>span{flex-basis:100%;font-size:11px}
.usage-info{font-size:11px;margin:12px 0}
.usage-info summary{min-height:44px;padding:12px 0}
.usage-info p{font-size:11px;line-height:1.6}
.setup{margin:8px auto;padding:12px 16px}
.setup h1{font-size:34px;margin:10px 0}
.setup .intro{font-size:13px;line-height:1.4;margin:8px 0 16px}
.setup .eyebrow{display:none}
.setup-foot{margin-top:16px}
.selected-team{padding:14px;gap:12px}
.selected-team .team-badge{width:46px;height:46px;font-size:16px}
.selected-team strong{font-size:18px}
.opponent-label{margin-top:12px}
.setup-note{margin:12px 0;font-size:10px}
@media(min-width:800px){
  #playScreen{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.8fr);gap:0 14px;align-items:start}
  #playScreen .field-stage{grid-column:1;grid-row:1/4}
  #playScreen .playbook{grid-column:2;grid-row:1}
  #playScreen .last-result{grid-column:2;grid-row:2;margin-top:8px}
  #playScreen .player-peek{grid-column:1;grid-row:4}
  .play-choices{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .play-card{min-height:62px}
  .call-heading{margin-top:8px}
  #gameField{height:clamp(350px,calc(100svh - 260px),680px)}
  .reviewing-play #playScreen{display:block;max-width:760px;margin:auto}
  .reviewing-play #gameField{height:clamp(350px,calc(100svh - 290px),700px)}
}
@media(max-width:360px){.score-clock{gap:3px}.score-clock>span{font-size:7px}.play-choices{grid-auto-columns:98px}#gameField{height:clamp(200px,calc(100svh - 450px),480px)}}

.playback-speed{min-width:44px;min-height:44px;padding:5px 8px;font-weight:800;font-variant-numeric:tabular-nums}
#retryRankings{min-height:44px}
.loading-state{display:flex;align-items:center;gap:12px;margin:12px 0;padding:14px;border:1px solid #c7d6bc;border-radius:10px;background:#e7eedf;color:#21432d}
.loading-state strong,.loading-state span:not(.loading-spinner){display:block}
.loading-state strong{font-size:14px}.loading-state div>span{font-size:11px;margin-top:4px;line-height:1.4;color:#58704e}
.loading-state button{margin-left:auto;min-height:44px;min-width:64px;font-size:12px}
.loading-spinner{flex:0 0 20px;width:20px;height:20px;border:2px solid #afc5a5;border-top-color:#245a38;border-radius:50%;animation:loading-turn 1s linear infinite}
@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;border-top-color:#245a38}}
.loading-state div{min-width:0;flex:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.analysis-tabs,.analysis-sides{display:flex;gap:5px;margin:10px 0}
.analysis-tabs button,.analysis-sides button{flex:1;min-height:44px;font-size:12px;padding:7px;border-radius:8px;background:#e8eedf;color:#4e6749}
.analysis-tabs button[aria-selected=true],.analysis-sides button[aria-pressed=true]{background:#234e36;color:#fff}
.analysis-label{font-size:10px;color:#61775b;line-height:1.4;margin:8px 0}
.analysis-roster{display:grid;gap:5px;margin:8px 0}
.analysis-player{display:flex;align-items:center;gap:9px;width:100%;min-height:60px;padding:8px 9px;border:1px solid #d4dfcb;border-radius:9px;background:#fff;text-align:left}
.analysis-player>span:nth-child(2){flex:1;min-width:0}.analysis-player strong{font-size:12px;overflow-wrap:anywhere}
.analysis-player small{display:block;font-size:10px;line-height:1.4;margin-top:3px;color:#667b5f}
.analysis-jersey{display:grid;place-items:center;min-width:32px;height:32px;border-radius:7px;background:#e6eddd;font-size:12px;font-weight:750}
.analysis-stat{font-size:15px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.analysis-stat small{font-weight:400}.player-analysis h2,#swapComparison h2{font-size:18px;line-height:1.3;margin:10px 0 5px;letter-spacing:0}
.player-analysis>p,#swapOriginal,#swapStatus,#swapComparisonNote{font-size:12px;line-height:1.5;margin:8px 0;color:#556e4f}
.analysis-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}
.analysis-metrics>div{padding:10px;border-radius:9px;background:#e6eddd;min-width:0}.analysis-metrics dt{font-size:10px;color:#5c7254;line-height:1.3}
.analysis-metrics dd{font-size:16px;font-weight:750;margin:5px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#resultsPlayersPanel input,#resultsSwapPanel input{width:100%;min-height:44px;font-size:13px}
.player-analysis>.primary,#runPlayerSwap{width:100%;min-height:44px;font-size:12px}
.player-analysis details,#resultsSwapPanel details{font-size:11px;line-height:1.5;color:#64795d;margin:12px 0}.player-analysis summary,#resultsSwapPanel summary{min-height:44px;padding:12px 0;cursor:pointer}
.swap-candidates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
.swap-candidate{min-height:65px;min-width:0;padding:9px;text-align:left;border:1px solid #cfdbbf;background:#fff;border-radius:9px}
.swap-candidate strong{display:block;font-size:12px;line-height:1.3;overflow-wrap:anywhere}.swap-candidate small{display:block;font-size:10px;margin-top:5px;color:#667b5f}
.swap-candidate[aria-pressed=true]{border-color:#245438;box-shadow:inset 0 0 0 1px #245438;background:#e6efdb}
.swap-path-chart{display:flex;gap:12px;align-items:center;min-width:0;margin:12px 0}.swap-path-chart svg{width:min(55%,220px);height:auto;flex-shrink:0}.swap-path-chart p{font-size:10px;line-height:1.8;color:#61765a}
.results-summary{padding:9px 10px}.results-summary strong{font-size:14px}.results-summary span{font-size:10px;line-height:1.4}
@media(min-width:800px){.analysis-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
#swapField{display:block;width:100%;max-height:360px;touch-action:manipulation;margin:8px 0 12px;border-radius:10px}
#swapField [role=button]{cursor:pointer}#swapField [role=button]:focus{outline:none}#swapField [role=button]:focus rect{stroke:#fff;stroke-width:3}
.player-peek>button{display:block;min-height:44px;font-size:12px;margin-top:7px;padding:8px 14px;background:#234e36;color:#fff;border-radius:8px}
.research-badge{font-size:11px;line-height:1.4;background:#fff0d0;border:1px solid #dfbc71;color:#604919;padding:9px;border-radius:8px;margin:10px 0}
#swapDraws,#swapDataUsed,#swapValidation{font-size:11px;line-height:1.55;color:#5e7255;margin:9px 0}
#swapOutcomeBox .analysis-metrics dd{font-size:15px}
.swap-verdict{font-size:15px;font-weight:750;margin:9px 0;color:#423b25}
.swap-explanation{font-size:12px;line-height:1.5;color:#52694c;margin:10px 0}
.outcome-cards{grid-template-columns:minmax(0,1fr)}
.outcome-cards>div{padding:11px 12px}.outcome-cards dt{font-size:12px;font-weight:650}
.outcome-cards small{display:block;font-size:11px;line-height:1.5;color:#52694c;margin-top:6px}
.practice-extra{margin:8px 0;font-size:12px;color:#52694c}.practice-extra>summary{min-height:44px;padding:12px 3px;cursor:pointer}
.practice-extra p{font-size:11px;line-height:1.5}
#game[data-screen="tools"] #playPreview,#game[data-screen="tools"] #playReview{display:none}
@media(min-width:600px){.outcome-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}