:root {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #0b1725;
  --surface-2: #101e2e;
  --surface-3: #15283a;
  --line: rgba(218, 234, 246, 0.11);
  --line-strong: rgba(218, 234, 246, 0.22);
  --text: #f2f7fb;
  --muted: #91a4b5;
  --lime: #baff37;
  --green: #66df8f;
  --cyan: #44d4e6;
  --orange: #ffb45b;
  --red: #ff746d;
  --radius: 14px;
  --header-h: 56px;
  --action-h: 66px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --option-bg: #ffffff;
  --option-text: #101915;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 50% -30%, #17324b 0, var(--bg) 52%); }
button, select, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
select, input {
  min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--text); background: #14241f; outline: none;
}
select option,
select optgroup { color: var(--option-text); background-color: var(--option-bg); }
select option:checked { color: #06110e; background-color: #d3ff5c; }
select option:hover { color: #06110e; background-color: #e9ffc0; }
select option:disabled { color: #6e7772; background-color: #edf0ee; }
select:disabled { color: #84928b; background-color: #1a2823; }
select:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.match-header {
  position: relative; z-index: 5; height: var(--header-h); display: grid; grid-template-columns: 1fr minmax(420px, .8fr) 1fr;
  align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(5, 14, 27, .96);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(186,255,55,.75); border-radius: 10px 10px 4px 10px; color: #07111f; background: linear-gradient(145deg,#d5ff63,var(--lime)); box-shadow: 0 0 18px rgba(186,255,55,.16); font-size: 11px; font-weight: 950; transform: skew(-3deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.header-score { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; gap: 14px; padding: 6px 12px; border-inline: 1px solid rgba(224,239,231,.07); border-radius: 10px; background: rgba(255,255,255,.018); }
.header-team { min-width: 0; }
.header-team span { display: block; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.header-team strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.header-team.opponent { text-align: right; }
.score-center { text-align: center; }
.score-center p { margin: 0 0 2px; color: #a8b9b1; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.score { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 27px; font-weight: 950; line-height: 1; }
.score i { color: #60736a; font-style: normal; font-weight: 300; }
.header-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-button, .button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 800; }
.audio-controls { display:flex; min-width:0; align-items:center; gap:2px; padding:2px; border:1px solid var(--line-strong); border-radius:9px; background:rgba(255,255,255,.035); }
.sound-controls { display: flex; min-width: 132px; align-items: center; gap: 5px; padding-right: 5px; }
.sound-controls .sound-toggle { min-width: 72px; border: 0; color: var(--lime); background: transparent; }
.sound-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.sound-toggle svg { width:17px; height:17px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sound-toggle .sound-muted-mark { display:none; }.sound-toggle.is-muted .sound-muted-mark { display:block; }
.sound-toggle.is-muted { color: var(--muted); }
.sound-volume { width: 52px; min-height: 0; height: 4px; padding: 0; border: 0; border-radius: 99px; accent-color: var(--lime); background: #314253; }
.sound-volume:disabled { opacity: .4; }
.music-toggle { display: inline-flex; min-width:72px; align-items: center; justify-content:center; gap: 6px; border:0; color: var(--cyan); background:transparent; }
.music-toggle svg { width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle.is-muted { color: var(--muted); }
.music-toggle.is-unavailable { border-style: dashed; color: #718491; }
.button-primary { min-height: 42px; padding-inline: 25px; border-color: var(--lime); color: #07110e; background: var(--lime); }
.button-online { border-color: rgba(211,255,92,.5); color: var(--lime); }
.button-rematch { border-color: var(--lime); color: #07110e; background: var(--lime); box-shadow: 0 0 18px rgba(184,255,31,.18); }
.button-rematch:disabled { color: var(--lime); background: rgba(184,255,31,.08); box-shadow: none; }
.button-secondary:hover, .icon-button:hover { background: rgba(255,255,255,.1); }
.status-badge { display:none; padding: 5px 8px; border: 1px solid currentColor; border-radius: 99px; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.status-badge.drawing { color: var(--orange); }.status-badge.winning { color: var(--green); }.status-badge.losing { color: var(--red); }

.match-center {
  width: min(100%, 1780px); height: calc(100vh - var(--header-h)); min-height: 620px; margin: 0 auto; padding: 8px;
  display: grid; grid-template-columns: minmax(220px, 18%) minmax(590px, 1fr) minmax(250px, 20%);
  grid-template-rows: minmax(0, 1fr) clamp(204px, 27vh, 224px); gap: 7px;
}
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(10, 24, 37, .95); box-shadow: 0 12px 38px rgba(0,0,0,.2); }
.section-kicker { margin: 0 0 3px; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.03em; }
.panel-heading.compact { min-height: 48px; }

.intelligence-panel { grid-column: 1; grid-row: 1; display: flex; min-height: 0; flex-direction: column; padding: 10px; overflow-y: auto; scrollbar-width: thin; }
.intelligence-panel .panel-heading h1 { font-size: 16px; }
.intelligence-report { display: grid; gap: var(--space-2); }
.intelligence-group { min-width: 0; padding: 10px 8px; border-top: 1px solid rgba(224,239,231,.075); }
.intelligence-report .intelligence-group:first-child { border-top: 0; }
.intelligence-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.intelligence-heading > span { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.intelligence-heading > strong { font-size: 12px; font-weight: 900; }
.intelligence-group > small { display: block; margin-top: 3px; color: #91a59c; font-size: 8px; line-height: 1.4; }
.comparison-list { display: grid; gap: 1px; margin-top: 7px; }
.comparison-list article, .energy-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 5px 0; }
.comparison-list span, .energy-label { color: #9aada4; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.comparison-list strong { color: #f5faf7; font-size: 13px; font-variant-numeric: tabular-nums; }
.energy-group { margin-top: auto; border-top-color: rgba(81,208,135,.22); }
.intelligence-panel:has(.intelligence-report[hidden]) .energy-group { margin-top: 14px; }
.energy-title { margin-bottom: 3px; }
.energy-stat { display: grid; grid-template-columns: 35px minmax(0,1fr) 28px; gap: 8px; width: 100%; padding: 5px 0; }
.energy-label { width: 35px; white-space: nowrap; }
.energy-progress { display: block; width: 100%; min-width: 0; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.energy-progress b { display: block; width: 100%; height: 100%; background: var(--green); transition: width 400ms ease; }
.energy-value { width: 28px; color: #f5faf7; font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.stat-column-labels { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 6px; padding: 6px 7px 3px; color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.stat-column-labels span:first-child { grid-column: 1; color: var(--lime); text-align: center; }.stat-column-labels span:last-child { grid-column: 3; color: var(--cyan); text-align: center; }
.match-stat-list { display: grid; gap: 1px; }
.match-stat { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 6px; align-items: center; min-height: 29px; padding: 4px 7px; border-bottom: 1px solid rgba(218,234,246,.055); }
.match-stat > span { overflow: hidden; color: #9db0bf; font-size: 8px; font-weight: 750; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.match-stat strong { color: var(--lime); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }.match-stat strong:last-child { color: var(--cyan); }
.match-stat[data-metric="possession"] strong, .match-stat[data-metric="chances"] strong { font-size: 15px; }
.period-chip { display: flex; gap: 6px; align-items: baseline; padding: 6px 8px; border-radius: 7px; background: rgba(0,0,0,.2); }
.period-chip span { color: var(--muted); font-size: 7px; text-transform: uppercase; }.period-chip strong { color: var(--lime); font-size: 12px; }
.tactic-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; min-width: 0; }
.tactic-summary div { min-width: 0; padding: 5px 7px; border-radius: 7px; background: rgba(255,255,255,.035); }
.tactic-summary span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.tactic-summary strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tactic-summary span, .tactic-summary strong { display: block; }
.tactical-console { grid-column: 1 / -1; grid-row: 2; padding: 6px 10px; background: rgba(7,17,31,.99); transition: border-color 160ms ease; }
.console-header { display: grid; min-height: 30px; grid-template-columns: auto auto minmax(320px,1fr) auto auto; gap: 8px; align-items: center; }
.console-identity h2 { margin: 0; font-size: 14px; }.console-identity { min-width: 92px; }
.console-status { min-width: 140px; text-align: right; }.console-status span, .console-status strong { display: block; }.console-status span { color: var(--muted); font-size: 7px; }.console-status strong { margin-top: 2px; color: var(--lime); font-size: 8px; letter-spacing: .08em; }
.edit-tactics { min-height: 31px; white-space: nowrap; }
.console-workspace { margin-top: 3px; }
.tactics-form { display: grid; grid-template-columns: .95fr 1.08fr 1fr; grid-template-rows: minmax(0,1fr) 48px; gap: 4px 6px; min-width: 0; }
.mode-observe .console-workspace { display: none; }.mode-observe .edit-tactics { color: var(--lime); }
body.mode-observe .match-center { grid-template-rows: minmax(0,1fr) 48px; }
body.mode-observe .tactical-console { padding-block: 5px; }
.tactical-section { min-width: 0; margin: 0; padding: 2px 5px 1px; border: 1px solid var(--line); border-radius: 8px; background: rgba(3,11,21,.32); }
.tactical-section legend { padding: 0 4px; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.attack-section { border-color: rgba(211,255,92,.18); }.attack-section legend { color: var(--lime); }.defence-section { border-color: rgba(81,208,135,.18); }.defence-section legend { color: var(--green); }.transition-section { border-color: rgba(255,180,91,.2); }.transition-section legend { color: var(--orange); }.card-section { border-color: rgba(151,129,255,.24); }.card-section legend { color: #c6b9ff; }
.field { display: block; min-width: 0; margin-bottom: 0; }.field > span { display: block; margin-bottom: 0; color: #d4e0e9; font-size: 8px; font-weight: 750; line-height: 1.1; }.field select, .field input { width: 100%; min-height: 21px; padding-inline: 7px; font-size: 9px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.console-action { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 3px 4px 3px 7px; border: 1px solid rgba(186,255,55,.22); border-radius: 8px; background: rgba(186,255,55,.035); }
.action-copy span, .action-copy strong { display: block; }.action-copy span { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: .13em; }.action-copy strong { margin-top: 2px; font-size: 10px; }
.console-buttons { display: flex; justify-content: flex-end; gap: 5px; }.console-buttons .button { min-height: 30px; }.console-buttons .lock-decision { min-width: 138px; min-height: 38px; }
.tactical-console[data-console-state="PLAYBACK"] { border-color: rgba(211,255,92,.36); }.tactical-console[data-console-state="WAITING_OPPONENT"] { border-color: rgba(255,180,91,.35); }.tactical-console[data-console-state="LOCKED"] .console-status strong, .tactical-console[data-console-state="WAITING_OPPONENT"] .console-status strong { color: var(--orange); }
.choice-source { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
.choice-button, .card-choice { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(218,234,246,.18); border-radius: 6px; color: #f0f5f8; background: rgba(255,255,255,.025); font-weight: 500; letter-spacing: .02em; }
.choice-button { min-height: 32px; padding: 4px 6px; font-size: 10px; line-height: 1.22; }
.choice-button:hover, .card-choice:hover { border-color: rgba(186,255,55,.45); background: rgba(186,255,55,.055); }
.choice-button[aria-pressed="true"], .card-choice[aria-pressed="true"] { border-color: var(--lime); color: #07111f; background: var(--lime); box-shadow: 0 0 0 1px rgba(186,255,55,.15); }
.choice-button:disabled, .card-choice:disabled { cursor: not-allowed; opacity: .42; }
.tactic-icon { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-section { display: grid; min-height: 0; padding: 2px 5px; }
.card-section legend span { color: var(--muted); font-weight: 700; letter-spacing: .03em; }
.card-choice-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.card-choice { min-height: 50px; padding: 5px 7px; font-size: 9.5px; line-height: 1.24; text-align: left; }
.card-choice .tactic-icon { flex-basis: 17px; width: 17px; height: 17px; }
.card-choice span { overflow: visible; text-wrap: balance; }
.card-choice small { display: none; }
.card-choice[data-category="DEFENSIVE"] { border-color: rgba(68,212,230,.22); }.card-choice[data-category="DEFENSIVE"][aria-pressed="true"] { border-color: var(--cyan); color: #06151d; background: var(--cyan); }
.card-select-fallback .card-choice-grid { display: none; }.card-select-fallback .card-source { position: static !important; width: 100% !important; height: auto !important; min-height: 30px !important; clip: auto; }
.card-plan-feedback { margin-top: 8px; padding: 9px; border: 1px solid rgba(151,129,255,.32); border-radius: 8px; background: rgba(151,129,255,.07); }
.card-plan-feedback strong { color: #c6b9ff; font-size: 10px; letter-spacing: .08em; }
.card-plan-feedback ul { margin: 5px 0 0; padding-left: 16px; color: #dbe7ef; font-size: 9px; line-height: 1.35; }

.pitch-column { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; padding: 7px; background: #091a20; }
.pitch-toolbar, .pitch-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pitch-toolbar { min-height: 32px; }.pitch-toolbar h2 { margin: 0; font-size: 16px; }
.visualizer-legend { display: flex; gap: 12px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.visualizer-legend span { display: flex; align-items: center; gap: 5px; }.visualizer-legend i { width: 8px; height: 8px; border-radius: 50%; }.legend-player { background: var(--lime); }.legend-opponent { background: var(--cyan); }
.visualizer-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 10px; background: #091a20; }
.playback-period-window { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
body.playback-active .pitch-column { z-index: 4; border-color: rgba(211,255,92,.42); box-shadow: 0 16px 45px rgba(0,0,0,.3); }
body.playback-active .reading-panel, body.playback-active .intelligence-report { opacity: .32; pointer-events: none; }
body.playback-active .tactical-console { border-color: rgba(211,255,92,.36); }
body.playback-active #replay-event { display: none; }
#match-pitch { display: block; width: auto; height: 100%; max-width: 100%; aspect-ratio: 1000 / 640; border: 1px solid rgba(186,255,55,.24); border-radius: 9px; background: #174c31; }
.pitch-grass rect { fill: #174c31; }.pitch-lines { fill: none; stroke: rgba(250,255,252,.62); stroke-width: 2; vector-effect: non-scaling-stroke; }.pitch-lines .pitch-dot { fill: rgba(255,255,255,.72); stroke: none; }
.block-guide line { stroke-width: 2; stroke-dasharray: 10 9; opacity: .42; }.player-block line { stroke: var(--lime); }.opponent-block line { stroke: var(--cyan); }
.team-markers circle { stroke-width: 3; vector-effect: non-scaling-stroke; transition: cx 620ms ease-in-out, cy 620ms ease-in-out, stroke-width 180ms ease; }.player-markers circle { fill: var(--lime); stroke: #142b20; }.opponent-markers circle { fill: var(--cyan); stroke: #10313a; }.team-markers circle:first-of-type { fill-opacity: .72; stroke-dasharray: 3 2; }.team-markers.has-possession circle { stroke-width: 5; }.team-markers circle.local-action { stroke-width: 7; }.team-markers circle.ball-owner { stroke: #fff; stroke-width: 8; filter: drop-shadow(0 0 7px rgba(255,255,255,.72)); }
.team-markers text { fill: #07111f; font-size: 12px; font-weight: 950; text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: x 620ms ease-in-out, y 620ms ease-in-out; }
.movement-path { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 9; opacity: .85; marker-end: url(#movement-arrow); }.movement-path.opponent-possession { stroke: var(--cyan); }.movement-path.goal-shot { stroke: #fff; stroke-width: 7; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(255,255,255,.65)); }.pitch-column marker path { fill: var(--lime); }
.active-runner { fill: none; stroke: var(--lime); stroke-width: 4; opacity: 0; transition: cx 620ms ease, cy 620ms ease, opacity 180ms ease; }.active-runner.is-active { opacity: .8; }.active-runner.opponent-possession { stroke: var(--cyan); }
.match-ball { fill: #f7f8ef; stroke: #152a22; stroke-width: 3; opacity: 0; transition: cx 620ms ease, cy 620ms ease, opacity 180ms ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,.38)); }.match-ball.has-possession { opacity: 1; }
.goal-signal { opacity: 0; pointer-events: none; }.goal-signal circle { fill: none; stroke: var(--orange); stroke-width: 6; }.goal-signal.show { animation: goal-pulse 1500ms ease-out both; }.goal-lights circle { fill: var(--lime); opacity: 0; filter: drop-shadow(0 0 9px var(--lime)); }.goal-lights.show circle { animation: goal-light-blink 220ms steps(2,end) 5; }.goal-lights.show circle:nth-child(even) { animation-delay: 110ms; }.visualizer-stage.goal-scored { animation: goal-field-flash 1100ms ease-out; }.visualizer-stage.chance-suspense:not(.goal-scored) { animation: chance-breath 920ms ease-in-out infinite alternate; }
.visualizer-overlay { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 2px; max-width: calc(100% - 20px); padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(4,16,12,.86); }.visualizer-overlay strong { color: var(--lime); font-size: 9px; text-transform: uppercase; }.visualizer-overlay span { overflow: hidden; color: #c7d5ce; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { position: absolute; z-index: 2; display: grid; place-items: center; gap: 3px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,18,14,.86); pointer-events: none; }.empty-state strong { color: var(--lime); font-size: 15px; }.empty-state span { color: var(--muted); font-size: 9px; }
.pass-screen { position: absolute; inset: 0; z-index: 4; padding: 30px; place-content: center; text-align: center; background: #071712; }.pass-screen:not([hidden]) { display: grid; }.pass-screen h2 { margin-bottom: 5px; }.pass-screen p { color: var(--muted); }
.pitch-footer { min-height: 25px; padding-top: 3px; color: var(--muted); font-size: 8px; }.replay-button { min-height: 24px; }

.reading-panel { grid-column: 3; grid-row: 1; display: flex; min-height: 0; flex-direction: column; padding: 10px; overflow: hidden; }
.period-report { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.period-score { color: var(--lime); font-size: 18px; }.reading-empty { margin-top: 10px; padding: 14px 10px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.subheading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.subheading h3 { margin: 0; font-size: 11px; }.subheading small { color: var(--muted); font-size: 8px; }
.reading-section { margin-top: 8px; padding: 8px; border-left: 2px solid rgba(218,234,246,.16); background: rgba(255,255,255,.018); }
.coach-signal { border-left: 3px solid var(--lime); background: rgba(186,255,55,.055); }
.match-observation { border-left-color: var(--cyan); }.next-action { border-left-color: var(--orange); }
.reading-section p { margin: 6px 0 0; color: #c5d2dc; font-size: 9px; line-height: 1.45; }
.coach-signal ul, .tactical-explanations ol { display: grid; gap: 6px; margin: 7px 0 0; padding: 0; list-style: none; }.coach-signal li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; }.coach-signal li > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #07111f; background: var(--lime); font-size: 8px; font-weight: 950; }.coach-signal strong, .tactical-explanations p { margin: 0; color: #edf5fa; font-size: 9px; line-height: 1.45; }.coach-signal li small, .tactical-explanations li small, .tactical-explanations time { color: #8297a7; font-size: 7px; }.tactical-explanations li > div { display: flex; justify-content: space-between; }.tactical-explanations li > div strong { color: var(--lime); font-size: 8px; }
.timeline { min-height: 0; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }.event-scroll { max-height: 150px; overflow-y: auto; scrollbar-width: thin; }.timeline ol { margin: 5px 0 0; padding: 0; list-style: none; }.event { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 5px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 8px; }.event time { color: var(--lime); }.event strong { display: block; }.event small { color: var(--muted); }.event-result, .event-replay { padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 7px; }.no-events { padding: 8px 0; color: var(--muted); font-size: 9px; }
.expanded-data { margin-top: 8px; border-top: 1px solid var(--line); }.expanded-data summary, .developer-panel summary { padding: 9px 0; color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }.metric-labels { display: flex; justify-content: space-between; font-size: 8px; }.possession-track { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #30443a; }.possession-track i { display: block; width: 50%; height: 100%; background: var(--lime); }.routes { margin-top: 7px; }.routes > span { color: var(--muted); font-size: 7px; text-transform: uppercase; }.route-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 5px; }.route-grid div { padding: 5px 2px; border-radius: 5px; text-align: center; background: rgba(211,255,92,.05); }.route-grid span, .route-grid strong { display: block; font-size: 7px; }.route-grid strong { color: var(--lime); font-size: 11px; }
.button-danger { border-color: rgba(255,90,90,.55); color: #ff9a9a; background: rgba(255,70,70,.08); }.online-match-presence { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }.online-match-presence.connected { color: var(--green); }.online-match-presence.disconnected { color: var(--orange); }.online-match-presence.abandoned { color: var(--red); }
.engine-identity { margin: 8px 0 0; }.engine-identity div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }.engine-identity dt { color: var(--muted); }.engine-identity dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }

.app-dialog { width: min(480px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 22px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--text); background: var(--surface-2); box-shadow: 0 24px 80px rgba(0,0,0,.55); }.app-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }.wide-dialog { width: min(820px, calc(100% - 28px)); }.dialog-close { float: right; border: 0; color: var(--text); background: transparent; font-size: 24px; }.new-match-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.new-match-controls label span, .history-head label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }.new-match-controls select { width: 100%; }.new-match-controls .button { align-self: end; }.developer-panel { margin-top: 15px; border-top: 1px solid var(--line); }.developer-toggle { display: flex; gap: 7px; align-items: center; margin-bottom: 8px; font-size: 10px; }.developer-toggle input { min-height: 0; }.current-seed { display: flex; justify-content: space-between; padding: 8px; border-radius: 7px; background: rgba(0,0,0,.2); font-size: 9px; }.current-seed code { color: var(--lime); }
.profile-create { display: flex; align-items: end; gap: 8px; }.compact-field { flex: 1; }.profile-empty { padding: 16px 0; color: var(--muted); font-size: 11px; }.profile-stats { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin: 15px 0; }.profile-stat { padding: 9px; border: 1px solid var(--line); border-radius: 7px; }.profile-stat span { display: block; color: var(--muted); font-size: 8px; }.profile-stat strong { font-size: 15px; }.history-head { display: flex; align-items: center; justify-content: space-between; }.history-table-wrap { overflow-x: auto; }.history-table { width: 100%; border-collapse: collapse; }.history-table th, .history-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; }.history-table th { color: var(--muted); text-transform: uppercase; }.head-to-head-summary { margin: 8px 0; padding: 8px; border-left: 2px solid var(--lime); background: rgba(211,255,92,.04); font-size: 10px; }
.toast { position: fixed; right: 16px; bottom: calc(clamp(204px, 27vh, 224px) + 16px); z-index: 20; max-width: 360px; padding: 10px 13px; border-radius: 8px; color: #07110e; background: var(--lime); font-size: 10px; font-weight: 800; opacity: 0; transform: translateY(8px); pointer-events: none; transition: 180ms ease; }.toast.show { opacity: 1; transform: none; }.toast.error { color: white; background: var(--red); }
@keyframes goal-pulse { 0% { opacity: 0; transform: scale(.45); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes goal-light-blink { 0%,100% { opacity: .08; } 50% { opacity: 1; } }
@keyframes goal-field-flash { 0%,100% { box-shadow: inset 0 0 0 rgba(186,255,55,0); } 35% { box-shadow: inset 0 0 70px rgba(186,255,55,.32); } }
@keyframes chance-breath { from { box-shadow: inset 0 0 12px rgba(255,179,71,.04); } to { box-shadow: inset 0 0 58px rgba(255,179,71,.2); } }

@media (max-height: 800px) and (min-width: 901px) {
  .intelligence-panel { padding: 8px; }
  .intelligence-panel .panel-heading.compact { min-height: 37px; }
  .intelligence-report { gap: 1px; }
  .intelligence-group { padding: 5px 6px; }
  .comparison-list { grid-template-columns: 1fr 1fr; gap: 0 8px; margin-top: 3px; }
  .comparison-list article, .energy-stat { padding: 3px 0; }
  .possession-track { margin-top: 3px; }
  .routes { margin-top: 3px; }.route-grid { margin-top: 2px; }.route-grid div { padding-block: 2px; }
  .energy-group { display: block; }
  .energy-group .intelligence-heading { margin-bottom: 2px; }
  .tactical-console { padding: 5px 9px; }
  .console-workspace { margin-top: 2px; }
}

@media (min-height: 850px) and (min-width: 901px) {
  .intelligence-panel { overflow-y: hidden; }
}

.dialog-intro { color: var(--muted); font-size: 11px; line-height: 1.55; }
.build-badge { padding: 4px 7px; border: 1px solid rgba(184,255,31,.35); border-radius: 999px; color: var(--lime); font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.beta-gate, .onboarding-dialog, .feedback-dialog { width: min(520px, calc(100% - 28px)); }
.beta-gate::backdrop, .onboarding-dialog::backdrop, .feedback-dialog::backdrop { background: rgba(3,9,17,.94); backdrop-filter: blur(8px); }
.beta-form { display: grid; gap: 12px; margin-top: 18px; }
.beta-form input, .beta-form textarea, .beta-form select { width: 100%; }
.text-button { border: 0; color: var(--cyan); background: transparent; cursor: pointer; }
.form-error { min-height: 16px; margin: 0; color: var(--red); font-size: 10px; }
.onboarding-steps { display: grid; gap: 14px; padding: 0; list-style: none; counter-reset: onboarding; }
.onboarding-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; counter-increment: onboarding; }
.onboarding-steps li::before { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); content: counter(onboarding); }
.onboarding-steps span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.feedback-score { display: block; margin: 12px 0; color: var(--lime); font-size: 28px; }
.feedback-choice { display: flex; gap: 18px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.feedback-choice legend { padding: 0 5px; color: var(--muted); font-size: 9px; }
.feedback-choice label { display: flex; gap: 5px; align-items: center; }
.feedback-choice input { width: auto; min-height: 0; }
.beta-rematch { width: 100%; margin-top: 12px; }
.online-entry-actions { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.online-join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding-top: 15px; border-top: 1px solid var(--line); }
.online-join-row .field { margin: 0; }.online-message { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.room-code-card { display: grid; gap: 8px; padding: 16px; border: 1px solid rgba(211,255,92,.22); border-radius: 12px; background: rgba(211,255,92,.04); text-align: center; }
.room-code-card > span { color: var(--muted); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }.room-code-card > strong { color: var(--lime); font-size: 29px; letter-spacing: .12em; }.room-code-card input { width: 100%; text-align: center; }
.lobby-players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 16px 0; }.lobby-players article { display: grid; min-height: 105px; place-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; text-align: center; background: rgba(255,255,255,.025); }.lobby-players article span { color: var(--muted); font-size: 8px; }.lobby-players article strong { margin: 5px 0; font-size: 15px; }.lobby-players article small { color: var(--muted); font-size: 9px; }.lobby-players article small.connected, #online-opponent-presence.connected { color: var(--green); }.lobby-players > b { color: var(--muted); font-size: 10px; }.future-online-action { width: 100%; }

@media (max-width: 1100px) {
  .match-center { grid-template-columns: 210px minmax(500px,1fr) 235px; padding: 7px; gap: 6px; }
  .match-header { padding-inline: 12px; }
  .console-header { grid-template-columns: auto auto minmax(260px,1fr) auto; }.console-status { display: none; }
  .tactics-form { grid-template-columns: 1fr 1.15fr 1fr .9fr; }
}
@media (max-width: 900px) {
  body { overflow: auto; }.match-header { grid-template-columns: 1fr auto; }.header-score { order: 3; grid-column: 1 / -1; }.match-header { height: auto; min-height: var(--header-h); padding-block: 8px; }
  .match-center { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; }
  .intelligence-panel, .pitch-column, .reading-panel, .tactical-console { grid-column: 1; grid-row: auto; }
  .pitch-column { min-height: 500px; order: 1; }.intelligence-panel { max-height: none; order: 2; }.reading-panel { max-height: none; order: 3; }.tactical-console { order: 4; }
  .console-header { grid-template-columns: auto auto 1fr auto; }.tactic-summary { grid-column: 1 / -1; grid-row: 2; }.console-status { display: block; }.console-workspace { grid-template-columns: 1fr; }.tactics-form { grid-template-columns: 1fr 1fr; }.console-action { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 720px) {
  .tactics-form { grid-template-columns: 1fr; grid-template-rows: auto; align-items: start; }
  .tactical-editor-column .choice-button { min-height: 44px; font-size: 10.5px; }
  .card-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .card-choice { min-height: 64px; font-size: 10px; }
  .decision-status { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
  .decision-state, .card-lifecycle { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
  .decision-state svg, .card-lifecycle svg { width: 38px; height: 38px; flex: 0 0 38px; }
  .decision-state span, .decision-state strong, .decision-state small, .card-lifecycle strong, .card-lifecycle span { display: block; }
  .decision-divider { height: 1px; margin: 10px 0; background: var(--line); }
}
@media (max-width: 560px) {
  .match-header { grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-inline:10px; }
  .brand { min-width:0; }.brand img { width:min(180px,100%); max-width:100%; }
  .brand small, .status-badge { display: none; }.header-actions { gap: 4px; }.header-actions .header-popover-group { flex:0 0 38px; }.header-actions .button-rematch { max-width: 118px; padding-inline: 9px; font-size: 9px; }.icon-button { padding-inline: 8px; }.audio-controls { padding:1px; }.sound-controls { min-width: 36px; width: 36px; padding: 0; border: 0; }.sound-controls .sound-toggle { min-width: 36px; width: 36px; overflow: hidden; padding-inline: 7px; }.sound-toggle .sound-label { display:none; }.sound-volume { display: none; }.music-toggle { min-width:36px; width: 36px; padding: 0; justify-content: center; }.music-toggle .music-label { display: none; }.header-score { grid-template-columns: 1fr 90px 1fr; }.score { font-size: 24px; }
  .pitch-column { min-height: 360px; }.visualizer-legend { display: none; }.new-match-controls { grid-template-columns: 1fr; }.profile-stats { grid-template-columns: repeat(3,1fr); }
  .console-header { grid-template-columns: 1fr auto; }.console-header .period-chip, .console-status { display: none; }.tactic-summary { grid-template-columns: 1fr; }.tactics-form { grid-template-columns: 1fr; }.console-buttons .button { flex: 1; }.profile-create, .history-head { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }.goal-signal.show { animation: none; opacity: 1; } }
.online-history-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.online-history-panel .history-head small { color: var(--muted); font-size: 9px; }
.online-result-WIN { color: var(--green); }.online-result-LOSS { color: var(--red); }.online-result-DRAW, .online-result-ABANDONED { color: var(--muted); }

.operations-dialog { width:min(760px,calc(100vw - 28px)); max-height:min(780px,calc(100vh - 28px)); overflow:auto; }
.operations-identity { display:flex; align-items:center; justify-content:space-between; margin:14px 0; padding:12px 14px; border:1px solid rgba(184,255,31,.28); border-radius:9px; background:rgba(184,255,31,.055); }
.operations-identity span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.operations-identity strong { color:var(--lime); }
.player-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.player-search-form .field { margin:0; }
.operations-section-head { display:flex; align-items:center; justify-content:space-between; margin:22px 0 9px; border-bottom:1px solid var(--line); }
.operations-section-head h3 { margin:0 0 8px; font-size:14px; }
.operations-list { display:grid; gap:8px; }
.operations-empty { padding:16px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); text-align:center; }
.operations-card,.operation-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 13px; border:1px solid #29455a; border-radius:9px; background:linear-gradient(180deg,#0d2233,#091824); }
.operations-card h4,.operation-card strong { display:block; margin:0 0 3px; color:var(--text); font-size:13px; }
.operation-card span { display:block; color:var(--cyan); font-size:10px; }
.operations-card p,.operation-card p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.operations-card .challenge-result { margin-top:5px; color:var(--cyan); font-weight:800; }
.operations-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.operations-actions .button { min-height:34px; padding:7px 10px; font-size:9px; }
.challenge-status { display:inline-block; margin-left:6px; color:var(--lime); font-size:8px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:640px) {
  .player-search-form,.operations-card,.operation-card { grid-template-columns:1fr; }
  .operations-actions { justify-content:flex-start; }
}

/* Football SmartPlay V4 — approved local-AI presentation layer. */
@media (min-width: 901px) {
  :root { --header-h: 66px; }
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body { background: radial-gradient(circle at 50% -30%,#142d43 0,#04101d 48%); }
  .match-header { height:var(--header-h); grid-template-columns:minmax(250px,1fr) minmax(380px,440px) minmax(400px,1fr); gap:14px; padding:0 18px; border-bottom-color:#1f3548; background:linear-gradient(180deg,#06111f,#030b15); }
  .brand { min-width:0; gap:18px; }.brand img { width:230px; max-height:48px; object-fit:contain; object-position:left center; }.brand > i { width:1px; height:35px; background:#314354; }.brand > span { color:#eef3f6; font-size:13px; white-space:nowrap; }
  .header-score { align-self:stretch; grid-template-columns:1fr 128px 1fr; border:1px solid #20384b; border-top:0; border-radius:0 0 11px 11px; background:linear-gradient(180deg,rgba(11,28,44,.98),rgba(6,18,30,.96)); box-shadow:0 10px 30px rgba(0,0,0,.3); }
  .header-team strong { font-size:12px; }.score-center p { font-size:7px; }.score { font-size:30px; }
  .header-actions { gap:7px; }.header-actions .button,.header-actions .icon-button { min-height:36px; border-color:#2b4154; background:#0b1826; }.header-actions .audio-controls .icon-button { border:0; background:transparent; }.header-actions .button-online { border-color:#6d942d; color:var(--lime); }
  .header-actions .button-rematch { border-color:var(--lime); color:#07110e; background:linear-gradient(180deg,#caff43,#9bea19); box-shadow:0 0 18px rgba(184,255,31,.2); }
  .header-actions .button-rematch:hover:not(:disabled) { border-color:#dcff8e; background:linear-gradient(180deg,#d8ff70,#acfa25); }
  .header-actions .button-rematch:disabled { border-color:rgba(184,255,31,.45); color:var(--lime); background:rgba(184,255,31,.08); box-shadow:none; }
  .header-actions:has(.button-rematch:not([hidden])) .button-online { display:none; }
  .match-center { width:100%; height:calc(100vh - var(--header-h)); min-height:0; padding:9px 10px 10px; grid-template-columns:minmax(245px,.77fr) minmax(620px,2.2fr) minmax(270px,.88fr); grid-template-rows:minmax(0,1fr) 88px; gap:9px; }
  body.mode-observe .match-center,body.mode-decision .match-center { grid-template-rows:minmax(0,1fr) 88px; }
  .panel { border-color:#263e52; border-radius:9px; background:linear-gradient(180deg,rgba(7,20,34,.985),rgba(4,14,25,.99)); }
  .intelligence-panel,.reading-panel { padding:10px 12px; }.panel-heading.compact { min-height:55px; border-bottom:1px solid rgba(218,234,246,.08); }.panel-heading h1,.panel-heading h2 { font-size:17px; }
  .pitch-column { padding:8px; border-color:#2b465a; background:linear-gradient(180deg,#081824,#06131e); }.pitch-toolbar { min-height:48px; padding:0 5px; }.pitch-toolbar h2 { font-size:17px; }.pitch-footer { min-height:25px; }
  .visualizer-stage { border-radius:9px; background:#0a1a20; }
  #match-pitch { width:100%; height:100%; border-color:rgba(92,166,94,.92); background:radial-gradient(ellipse at 22% 30%,rgba(223,215,150,.09),transparent 31%),radial-gradient(ellipse at 78% 70%,rgba(4,25,10,.18),transparent 35%),linear-gradient(180deg,rgba(28,105,42,.08),rgba(3,48,18,.18)),url('/assets/football-grass-texture-v1.webp') center/cover no-repeat,#245f28; box-shadow:inset 0 0 74px rgba(1,20,8,.5),0 9px 22px rgba(0,0,0,.3); filter:saturate(.9) contrast(1.06) brightness(.91); }
  .pitch-grass rect { fill:transparent; }.pitch-lines { stroke:rgba(245,246,225,.74); }.team-markers circle { filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
  .visualizer-overlay { padding:8px 10px; border-color:#29475b; background:rgba(3,14,21,.9); }.empty-state { background:rgba(3,14,21,.9); }
  .reading-section { padding:9px; }.reading-section p,.coach-signal strong,.tactical-explanations p { font-size:9px; }.event { min-height:28px; }

  .tactical-console { position:relative; z-index:8; grid-column:1/-1; grid-row:2; padding:8px 10px; overflow:visible; background:linear-gradient(90deg,#071421,#091a29); }
  .console-header { min-height:70px; grid-template-columns:165px 40px minmax(0,1fr) auto auto; gap:8px; }
  .console-identity { min-width:0; padding-right:10px; border-right:1px solid #294055; }.console-identity h2 { font-size:12px; }.console-identity .section-kicker { margin-bottom:5px; }
  .period-chip { width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid rgba(184,255,31,.42); border-radius:50%; }.period-chip span { display:none; }.period-chip strong { font-size:10px; }
  .tactic-summary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.tactic-summary div { position:relative; min-height:48px; padding:10px 11px 7px; border:1px solid #29455a; background:linear-gradient(180deg,#0d2233,#091824); }.tactic-summary div::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--lime),transparent 76%); }.tactic-summary div:nth-child(2)::before { background:linear-gradient(90deg,var(--cyan),transparent 76%); }.tactic-summary div:nth-child(3)::before { background:linear-gradient(90deg,#4edfd5,transparent 76%); }.tactic-summary div:nth-child(4)::before { background:linear-gradient(90deg,#bd86ff,transparent 76%); }.tactic-summary span { margin-bottom:4px; font-size:7px; font-weight:900; }.tactic-summary strong { font-size:9px; }.tactic-summary .card-summary span { color:#bd86ff; }
  .console-header > .button { min-height:43px; padding-inline:15px; }.console-header #decision-toggle { color:var(--cyan); }.edit-tactics { border-color:#6e9b28; color:var(--lime); background:#0c1c24; }

  .tactical-editor-backdrop { position:fixed; inset:0; z-index:29; background:rgba(1,7,13,.68); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; }
  .console-workspace { position:fixed; z-index:30; left:0; right:0; bottom:0; height:86vh; min-height:680px; max-height:780px; margin:0; overflow:hidden; border:1px solid #35536b; border-radius:15px 15px 0 0; background:radial-gradient(circle at 50% 0,rgba(31,69,94,.16),transparent 42%),linear-gradient(180deg,#0b1c2d,#06131f); box-shadow:0 -22px 70px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.06); transform:translateY(calc(100% + 16px)); transition:transform .24s ease; display:grid; grid-template-rows:72px minmax(0,1fr); }
  .console-workspace::before { content:""; position:absolute; z-index:2; top:12px; left:50%; width:48px; height:4px; transform:translateX(-50%); border-radius:4px; background:#6e8394; opacity:.72; }
  body.mode-decision .tactical-editor-backdrop { opacity:1; pointer-events:auto; }
  body.mode-decision .console-workspace { display:grid; transform:translateY(0); }
  body.mode-observe .console-workspace { display:grid; transform:translateY(calc(100% + 16px)); }
  .tactical-editor-header { display:flex; align-items:center; gap:13px; padding:20px 22px 10px; border-bottom:1px solid #294359; background:rgba(4,14,24,.5); }.tactical-editor-header h2 { margin:3px 0 0; font-size:17px; }.tactical-editor-header .section-kicker { margin:0; }
  .editor-title-icon { width:38px; height:38px; display:grid; flex:0 0 38px; place-items:center; color:var(--lime); border:1px solid rgba(184,255,31,.38); border-radius:7px; background:rgba(184,255,31,.06); }.editor-title-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .close-tactics-editor { margin-left:auto; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:6px; color:#becbd5; background:transparent; font-size:25px; }
  .tactics-form { min-height:0; padding:12px 18px 0; display:grid; grid-template-columns:1.15fr 1.18fr .9fr .64fr; grid-template-rows:minmax(0,1fr) 66px; gap:11px; }
  .tactical-editor-column,.decision-status { min-width:0; min-height:0; padding:11px 12px; overflow:hidden; border:1px solid #36536a; border-radius:8px; background:linear-gradient(180deg,rgba(15,35,52,.88),rgba(7,22,34,.8)); }
  .tactical-editor-column h3,.decision-status h3 { min-height:22px; margin:0 0 10px; display:flex; align-items:center; gap:8px; color:var(--lime); font-size:11px; letter-spacing:.075em; text-transform:uppercase; }.tactical-editor-column h3 > span,.decision-status h3 > span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#071006; background:var(--lime); font-size:10px; }.defence-editor h3 { color:var(--cyan); }.defence-editor h3 > span,.transition-editor h3 > span { color:#03121b; background:var(--cyan); }.transition-editor h3 { color:#54ded9; }.decision-status h3 { color:#bd86ff; }.decision-status h3 > span { color:#160925; background:#bd86ff; }
  .tactical-section { margin:0; padding:0; border:0; border-radius:0; background:transparent; }.tactical-section + .tactical-section { margin-top:6px; }.tactical-section legend:not(.sr-only) { margin:0 0 4px; padding:0; color:#a9bac7; font-size:8px; }
  .tactical-editor-column .field { margin-bottom:7px; }.tactical-editor-column .field > span { margin-bottom:5px; color:#b7d1dc; font-size:9px; font-weight:550; letter-spacing:.055em; text-transform:uppercase; }.formation-field { display:grid; grid-template-columns:minmax(112px,1fr) minmax(125px,.85fr); align-items:center; gap:9px; }.formation-field > span { margin:0!important; }.formation-field select { position:static!important; width:100%!important; height:37px!important; min-height:37px!important; clip:auto!important; padding:0 10px; border-color:#55728a; color:#f2f6f8; background:#0b1f2f; font-size:11px; font-weight:500; }
  .tactical-editor-column .choice-grid { gap:7px; }.tactical-editor-column .choice-button { height:57px; padding:6px 5px; flex-direction:column; gap:4px; border-color:#49667d; color:#f0f5f8; background:linear-gradient(180deg,#102a3e,#091925); font-size:10.5px; font-weight:500; letter-spacing:.02em; line-height:1.24; }.tactical-editor-column .choice-button .tactic-icon { width:27px; height:27px; flex-basis:27px; }.tactical-editor-column .choice-button[aria-pressed="true"] { border-color:#d8ff79; color:#071006; background:linear-gradient(180deg,#c8ff39,#91e600); box-shadow:0 0 16px rgba(184,255,31,.13); }
  .card-section { display:block; }.card-choice-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.card-choice { height:96px; padding:7px 6px; flex-direction:column; gap:4px; border-color:#4a6980; color:#f0f5f8; background:linear-gradient(180deg,#102a3e,#091925); font-size:10.2px; font-weight:500; letter-spacing:.02em; line-height:1.26; text-align:center; }.card-choice .tactic-icon { width:24px; height:24px; flex-basis:24px; }.tactical-editor-column .card-choice small { display:-webkit-box; overflow:hidden; color:#a9bbc8; font-size:7px; font-weight:400; line-height:1.2; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.card-choice[aria-pressed="true"] small { color:#263414; }.card-choice[aria-pressed="true"],.card-choice[data-category="DEFENSIVE"][aria-pressed="true"] { border-color:var(--lime); color:#071006; background:linear-gradient(180deg,#c8ff39,#91e600); box-shadow:0 0 15px rgba(184,255,31,.14); }
  .transition-editor .field { margin-bottom:14px; }.transition-editor .choice-button { height:76px; font-size:10.3px; }.transition-editor .choice-button .tactic-icon { width:31px; height:31px; flex-basis:31px; }
  .decision-status { display:flex; flex-direction:column; }.decision-state { min-height:87px; margin-top:31px; padding:11px; display:flex; align-items:center; gap:11px; border:1px solid #395269; border-radius:8px; background:linear-gradient(135deg,rgba(17,42,58,.86),rgba(8,25,38,.86)); }.decision-state svg { width:45px; height:45px; flex:0 0 45px; fill:none; stroke:var(--lime); stroke-width:1.7; }.decision-state span,.decision-state strong,.decision-state small { display:block; }.decision-state span { color:var(--lime); font-size:11px; font-weight:900; }.decision-state strong { margin-top:3px; color:#d4e0e7; font-size:8px; }.decision-state small { margin-top:4px; color:#9fb0bc; font-size:8px; line-height:1.3; }.decision-divider { height:1px; margin:30px 8px 23px; background:#345067; }.card-lifecycle { min-height:88px; padding:12px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #60438a; border-radius:8px; color:#c796ff; background:linear-gradient(135deg,rgba(80,42,120,.22),rgba(25,18,54,.52)); }.card-lifecycle svg { width:43px; height:43px; flex:0 0 43px; padding:7px; border:1px solid #8061aa; border-radius:50%; fill:currentColor; }.card-lifecycle strong,.card-lifecycle span { display:block; }.card-lifecycle strong { font-size:11px; }.card-lifecycle span { margin-top:4px; color:#c9b8dc; font-size:8px; line-height:1.3; }
  .console-action { grid-column:1/-1; min-width:0; margin:0 -18px; padding:9px 21px 12px; display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid #294359; border-radius:0; background:#06111c; }.console-action .button { height:45px; padding:0 24px; border-radius:7px; font-size:10px; font-weight:900; }.restore-tactics { min-width:145px; }.cancel-tactics { min-width:170px; }.console-buttons { gap:11px; }.console-buttons .lock-decision { min-width:245px; min-height:45px; border-color:var(--lime); color:#071006; background:linear-gradient(#caff3e,#93e600); box-shadow:0 0 18px rgba(184,255,31,.13); }
  .toast { bottom:105px; }
}

@media (min-width:901px) and (max-width:1500px) {
  .brand > i,.brand > span { display:none; }
  .brand img { width:210px; }
}

@media (min-width:901px) and (max-width:1180px) {
  .match-header { grid-template-columns:170px minmax(360px,1fr) auto; gap:9px; padding-inline:10px; }
  .brand img { width:160px; }
  .sound-volume,.sound-label,.music-label { display:none; }
  .sound-controls { min-width:34px; width:34px; padding:0; }
  .sound-controls .sound-toggle,.music-toggle { min-width:34px; width:34px; padding:0; }
  .audio-controls { flex:0 0 auto; }
  .header-actions { gap:4px; }
  .header-actions .button,.header-actions .icon-button { padding-inline:8px; font-size:9px; }
}

@media (min-width: 1650px) {
  .match-center { grid-template-columns:minmax(280px,.76fr) minmax(760px,2.35fr) minmax(310px,.89fr); }
  .brand img { width:250px; }.brand > span { font-size:15px; }.tactic-summary strong { font-size:10px; }
  .card-choice-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Match Center V5 — stable shell only. Internal panels and game visuals remain unchanged. */
.app-shell { min-width:0; min-height:0; }
.header-popover-group { position:relative; min-width:0; }
.header-icon-button { display:grid; width:38px; min-width:38px; padding:0; place-items:center; }
.header-icon-button svg { width:19px; height:19px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.header-popover { position:absolute; z-index:45; top:calc(100% + 9px); right:0; min-width:220px; padding:10px; border:1px solid #35536a; border-radius:10px; background:linear-gradient(180deg,#102538,#071521); box-shadow:0 18px 45px rgba(0,0,0,.52); }
.header-popover::before { content:""; position:absolute; top:-5px; right:13px; width:8px; height:8px; border-top:1px solid #35536a; border-left:1px solid #35536a; background:#102538; transform:rotate(45deg); }
.audio-popover { width:250px; }
.audio-popover .audio-controls { display:grid; gap:9px; padding:0; border:0; background:transparent; }
.audio-popover .sound-controls { display:grid; grid-template-columns:82px minmax(0,1fr); min-width:0; gap:8px; padding:0; }
.audio-popover .sound-controls .sound-toggle,.audio-popover .music-toggle { min-width:0; width:82px; min-height:34px; padding:0 7px; border:1px solid #2b465a; background:#091b29; }
.audio-popover .sound-volume { width:100%; align-self:center; }
.music-volume-setting { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.match-menu-popover { display:grid; min-width:180px; padding:6px; }
.menu-action { min-height:38px; padding:0 11px; border:0; border-radius:6px; color:#eaf2f6; background:transparent; font-size:10px; font-weight:800; text-align:left; }
.menu-action:hover,.menu-action:focus-visible { color:var(--lime); background:rgba(184,255,31,.08); outline:none; }
.header-icon-button:focus-visible,.card-summary-button:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.card-summary { position:relative; }
.card-summary-actions { display:grid; min-width:0; grid-template-columns:1fr; gap:2px; }
.card-summary-button { min-width:0; min-height:17px; padding:0 6px; overflow:hidden; border:1px solid rgba(189,134,255,.32); border-radius:5px; color:#d3adff; background:rgba(128,75,190,.08); font-size:7.5px; font-weight:800; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.card-summary-popover { position:absolute; z-index:18; right:0; bottom:calc(100% + 7px); width:max-content; min-width:190px; max-width:270px; padding:9px 11px; border:1px solid #60438a; border-radius:8px; background:#130e24; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.card-summary-popover > strong { color:#d7b2ff; font-size:9px; }.card-summary-popover ul { display:grid; gap:4px; margin:6px 0 0; padding-left:15px; color:#e9ddf5; font-size:9px; }

@media (min-width:901px) {
  :root { --header-h:58px; --plan-bar-h:68px; }
  html,body { width:100%; height:100%; overflow:hidden; }
  .app-shell { width:100%; height:100vh; display:grid; grid-template-rows:var(--header-h) minmax(0,1fr) var(--plan-bar-h); overflow:hidden; }
  .match-header { position:relative; z-index:20; width:100%; height:auto; min-width:0; display:grid; grid-template-columns:minmax(210px,1fr) minmax(360px,440px) minmax(220px,1fr); grid-row:1; gap:12px; padding:0 14px; }
  .brand { min-width:0; justify-self:start; }.brand img { width:210px; max-width:100%; }.brand > i,.brand > span { display:none; }
  .header-score { width:100%; min-width:0; justify-self:center; align-self:stretch; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:8px; padding-inline:10px; }
  .header-team { min-width:0; }.header-team strong { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.header-team.opponent { min-width:0; }
  .score { font-size:28px; }.score-center p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-actions { min-width:0; justify-self:end; gap:7px; }.header-actions .button-rematch { min-height:38px; }
  .match-center { width:100%; height:auto; min-width:0; min-height:0; display:grid; grid-row:2; grid-template-columns:clamp(245px,19vw,280px) minmax(0,1fr) clamp(285px,21vw,320px); grid-template-rows:minmax(0,1fr); gap:10px; padding:9px 10px; overflow:hidden; }
  body.mode-observe .match-center,body.mode-decision .match-center { grid-template-rows:minmax(0,1fr); }
  .intelligence-panel,.pitch-column,.reading-panel { min-width:0; min-height:0; grid-row:1; }
  .intelligence-panel { grid-column:1; }.pitch-column { grid-column:2; }.reading-panel { grid-column:3; }
  .pitch-column { width:100%; height:100%; }
  .app-shell > .tactical-console { position:relative; z-index:12; width:auto; min-width:0; min-height:0; grid-column:1; grid-row:3; margin:0 10px 9px; padding:5px 9px; overflow:visible; }
  .console-header { width:100%; min-width:0; min-height:0; height:53px; display:grid; grid-template-columns:150px 36px minmax(0,1fr) auto auto; gap:7px; }
  .console-identity { min-width:0; }.console-identity h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tactic-summary { min-width:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr) minmax(150px,.85fr); gap:6px; }
  .tactic-summary div { min-width:0; min-height:42px; padding:8px 9px 6px; overflow:visible; }
  .tactic-summary .card-summary { padding-block:5px; }
  .tactic-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .console-header > .button { min-height:39px; padding-inline:13px; }
  body.playback-active .app-shell { --plan-bar-h:52px; }
  body.playback-active .app-shell > .tactical-console { margin-bottom:6px; padding-block:3px; }
  body.playback-active .console-header { height:42px; grid-template-columns:120px 30px minmax(0,1fr) auto; }
  body.playback-active .console-identity h2 { font-size:10px; }.playback-active .period-chip { width:28px; height:28px; }
  body.playback-active .tactic-summary div { min-height:34px; padding:5px 8px 4px; border-color:rgba(41,69,90,.72); }
  body.playback-active .tactic-summary span { margin-bottom:2px; }.playback-active .tactic-summary strong { font-size:8px; }
  body.playback-active #edit-tactics,body.playback-active #decision-toggle { display:none!important; }
  .toast { bottom:calc(var(--plan-bar-h) + 15px); }
}

@media (min-width:901px) and (max-width:1180px) {
  .match-header { grid-template-columns:170px minmax(350px,1fr) 96px; gap:8px; padding-inline:9px; }
  .brand img { width:160px; }
  .match-center { grid-template-columns:220px minmax(0,1fr) 245px; gap:7px; padding-inline:7px; }
  .console-identity { display:none; }.console-header { grid-template-columns:34px minmax(0,1fr) auto auto; }
}

@media (max-width:900px) {
  .app-shell { min-height:100vh; display:flex; flex-direction:column; }
  .app-shell > .tactical-console { order:3; }
  .header-popover { position:fixed; top:62px; right:8px; }
  .match-center { order:2; }.match-header { order:1; }
}

/* Tactical Editor clipping fix — header, scrollable body, and footer own real rows. */
@media (min-width:901px) {
  body.mode-decision .app-shell > .tactical-console { z-index:31; }
  .console-workspace {
    height:min(100vh,780px);
    min-height:0;
    max-height:none;
    grid-template-rows:72px minmax(0,1fr) 66px;
  }
  .console-workspace > .tactics-form {
    min-height:0;
    overflow:visible;
    grid-template-rows:minmax(0,1fr);
  }
  .console-workspace .tactical-editor-column,
  .console-workspace .decision-status { overflow:visible; }
  .console-workspace .card-choice-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .console-workspace .card-choice { font-size:10.5px; }
  .console-workspace .card-choice small { font-size:7.4px; }
  .console-workspace .card-choice:disabled {
    opacity:.78;
    color:#d7e1e7;
    border-color:#3d5b70;
    background:linear-gradient(180deg,#0e2536,#091925);
  }
  .console-workspace .card-choice:disabled small { color:#9fb2bf; }
  .console-workspace > .console-action {
    grid-row:3;
    margin:0;
  }
}

/* Short desktop viewports: preserve the complete 4x2 editor above its footer. */
@media (min-width:901px) and (max-height:700px) {
  .console-workspace { grid-template-rows:60px minmax(0,1fr) 58px; }
  .tactical-editor-header { padding:14px 14px 6px; }
  .tactical-editor-header h2 { font-size:15px; }
  .editor-title-icon { width:32px; height:32px; flex-basis:32px; }
  .editor-title-icon svg { width:21px; height:21px; }
  .tactics-form { padding:7px 10px 0; gap:7px; }
  .tactical-editor-column,
  .decision-status { padding:7px 9px; }
  .tactical-editor-column h3,
  .decision-status h3 { min-height:18px; margin-bottom:5px; font-size:10px; }
  .tactical-editor-column h3 > span,
  .decision-status h3 > span { width:18px; height:18px; font-size:9px; }
  .tactical-section + .tactical-section { margin-top:3px; }
  .tactical-section legend:not(.sr-only) { margin-bottom:2px; }
  .tactical-editor-column .field { margin-bottom:3px; }
  .tactical-editor-column .field > span { margin-bottom:2px; font-size:8px; }
  .formation-field select { height:31px!important; min-height:31px!important; }
  .tactical-editor-column .choice-grid { gap:5px; }
  .tactical-editor-column .choice-button { height:45px; padding:3px 4px; gap:2px; font-size:9.5px; }
  .tactical-editor-column .choice-button .tactic-icon { width:21px; height:21px; flex-basis:21px; }
  .card-choice-grid { gap:5px; }
  .console-workspace .card-choice { height:73px; padding:4px; gap:2px; font-size:9.5px; line-height:1.16; }
  .card-choice .tactic-icon { width:20px; height:20px; flex-basis:20px; }
  .console-workspace .card-choice small { font-size:6.7px; line-height:1.12; }
  .transition-editor .field { margin-bottom:7px; }
  .transition-editor .choice-button { height:61px; font-size:9.5px; }
  .transition-editor .choice-button .tactic-icon { width:26px; height:26px; flex-basis:26px; }
  .decision-state { min-height:72px; margin-top:10px; padding:8px; gap:8px; }
  .decision-state svg { width:38px; height:38px; flex-basis:38px; }
  .decision-divider { margin:12px 7px; }
  .card-lifecycle { min-height:72px; padding:8px; gap:8px; }
  .card-lifecycle svg { width:36px; height:36px; flex-basis:36px; }
  .card-plan-feedback { margin-top:8px; padding:8px; }
  .console-action { padding:7px 12px 9px; }
  .console-action .button { height:41px; }
}