@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: #f3f4ef;
  background: #101714;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #101714;
  --panel: #171f1b;
  --panel-soft: #1d2722;
  --border: #2b3831;
  --muted: #8e9b93;
  --green: #a8e0b5;
  --green-strong: #6fc384;
  --yellow: #f7c95a;
  --pass-route-color: #ff2b8a;
}

* { box-sizing: border-box; }
body { min-width: 360px; min-height: 100vh; margin: 0; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 1680px; min-height: 100vh; margin: auto; padding: 0 34px; }
.topbar { height: 76px; display: flex; align-items: center; border-bottom: 1px solid #27312c; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #f4f5f0; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -.9px; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--green); color: #17251b; font-size: 17px; font-style: italic; font-weight: 800; }
.brand-dot { color: var(--green-strong); }
.session-info { display: flex; align-items: center; gap: 10px; margin-left: 48px; font-size: 12px; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-strong); box-shadow: 0 0 10px #6fc38488; }
.session-divider { color: #59655e; }
.muted { color: var(--muted); font-weight: 400; }
.share-button { margin-left: auto; border: 1px solid var(--border); border-radius: 8px; background: transparent; padding: 9px 13px; font-size: 12px; font-weight: 600; cursor: pointer; }
.share-button:hover { border-color: #526458; background: #1c2520; }
.share-button span { margin-right: 5px; font-size: 15px; }
.workspace { display: grid; grid-template-columns: 260px minmax(460px, 1fr) 295px; gap: 18px; padding-top: 22px; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.roster-panel, .plays-panel { display: flex; flex-direction: column; padding: 22px 18px 18px; }
.roster-panel.is-drop-target { border-color: var(--green-strong); background: #1b2b21; box-shadow: 0 0 0 2px #6fc38444, inset 0 0 0 1px #6fc38433; }
.roster-panel.is-drop-target .roster-list { border-radius: 8px; background: #203126; }
.panel-heading, .board-heading { display: flex; align-items: center; justify-content: space-between; }
.board-heading-tools { display: grid; justify-items: end; gap: 7px; }
.field-view-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.field-view-picker { display: inline-flex; gap: 2px; border: 1px solid #35443a; border-radius: 7px; background: #111814; padding: 3px; }
.field-view-picker button { border: 0; border-radius: 5px; background: transparent; padding: 6px 8px; color: #aab7ad; font-size: 9px; white-space: nowrap; cursor: pointer; }
.field-view-picker button:hover { background: #1c2820; color: #edf2ed; }
.field-view-picker button.is-active { background: #294533; color: var(--green); box-shadow: inset 0 0 0 1px #496b50; }
.field-zoom-controls { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; min-height: 31px; align-items: center; gap: 3px; border: 1px solid #35443a; border-radius: 7px; background: #111814eF; padding: 3px; }
.field-zoom-controls button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #d3ded5; font-size: 17px; line-height: 1; cursor: pointer; }
.field-zoom-controls button:hover:not(:disabled) { background: #203126; color: var(--green); }
.field-zoom-controls button:disabled { color: #657269; cursor: not-allowed; }
.field-zoom-controls span { min-width: 37px; color: #aab7ad; font-size: 9px; font-family: "DM Mono", monospace; text-align: center; }
.eyebrow { margin: 0 0 6px; color: #84948a; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: 1.5px; }
h1, h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.45px; }
.count-badge { border: 1px solid #35513d; border-radius: 20px; background: #1b3021; padding: 5px 9px; color: var(--green); font-family: "DM Mono", monospace; font-size: 10px; }
.panel-description { margin: 7px 0 17px; color: var(--muted); font-size: 11px; }
.roster-list { display: flex; max-height: 440px; flex-direction: column; gap: 6px; overflow-y: auto; }
.roster-row { display: flex; min-height: 42px; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 7px; padding: 5px 7px; transition: background .15s, border-color .15s; cursor: grab; }
.roster-row:hover { border-color: #303d35; background: #1c2520; }
.roster-row.is-on-field { border-color: #344c3b; background: #1b2a20; }
.roster-row.is-dragging { opacity: .45; }
.position-tag { display: grid; max-width: 66px; min-width: 34px; height: 28px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 5px; background: #26372b; padding: 0 4px; color: #a9d5ad; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.player-name { overflow: hidden; color: #e1e7e1; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.player-number { margin-left: auto; color: #718078; font-family: "DM Mono", monospace; font-size: 10px; }
.roster-field-toggle, .starter-toggle, .remove-player { width: 23px; height: 23px; flex: 0 0 23px; border: 0; border-radius: 5px; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; }
.roster-field-toggle { color: var(--green); }
.roster-field-toggle:hover:not(:disabled) { background: #2a3e30; }
.roster-field-toggle:disabled { color: #59655e; cursor: not-allowed; }
.starter-toggle { color: #718078; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700; }
.starter-toggle:hover { background: #383323; color: #f7c95a; }
.starter-toggle.is-starter { background: #383323; color: #f7c95a; }
.remove-player { color: #7e8b83; font-size: 17px; opacity: 0; }
.roster-row:hover .remove-player, .remove-player:focus-visible { opacity: 1; }
.remove-player:hover { background: #482a29; color: #ffaaa1; }
.add-player-button { display: flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; border: 1px dashed #405047; border-radius: 7px; background: transparent; color: #c4d1c7; font-size: 11px; font-weight: 600; cursor: pointer; }
.add-player-button:hover { border-color: var(--green-strong); background: #1c2820; color: var(--green); }
.add-player-button span { font-size: 15px; }
.roster-note { display: flex; gap: 8px; margin-top: auto; padding: 17px 2px 0; color: #87948b; font-size: 10px; line-height: 1.55; }
.note-icon { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border: 1px solid #647369; border-radius: 50%; font-family: Georgia, serif; font-size: 9px; font-style: italic; }
.board-panel { display: flex; min-height: 635px; flex-direction: column; padding: 22px 20px 14px; }
.board-heading { margin-bottom: 17px; }
.board-legend { display: flex; gap: 15px; color: #a4b0a8; font-size: 10px; }
.board-legend span { display: flex; align-items: center; gap: 6px; }
.legend-player { width: 8px; height: 8px; border-radius: 50%; background: #e45151; }
.legend-route { width: 15px; border-top: 2px dashed var(--yellow); }
.legend-pass { width: 15px; border-top: 3px solid var(--pass-route-color); }
.field-wrap { position: relative; display: flex; width: 100%; max-width: 1067px; aspect-ratio: 1000 / 520; min-height: 0; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; }
.field { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; }
.field, .field * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.field:focus-visible, .route-library-canvas:focus-visible { outline: 2px solid var(--green-strong); outline-offset: 2px; }
.field.is-drop-target { outline: 2px dashed var(--green-strong); outline-offset: -8px; }
.field.is-pannable { cursor: grab; touch-action: none; }
.field.is-panning { cursor: grabbing; }
.yard-lines line { stroke: #eff8ef; stroke-opacity: .24; stroke-width: 1; }
.yard-lines .line-of-scrimmage { stroke: #f7c95a; stroke-dasharray: 5 5; stroke-opacity: .8; stroke-width: 1.5; }
.yardage-stripes rect:nth-child(odd) { fill: #1c4938; }
.yardage-stripes rect:nth-child(even) { fill: #245a45; }
.yardage-labels text { fill: #f3f7f2; stroke: #173d2d; stroke-width: 2px; paint-order: stroke; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; text-anchor: middle; }
.field-yardage-numbers text { fill: #eaf3eb; fill-opacity: .82; stroke: #173d2d; stroke-width: 3px; paint-order: stroke; font-family: "DM Mono", monospace; font-size: 18px; font-weight: 700; text-anchor: middle; }
.hash-marks path { fill: none; stroke: #eff8ef; stroke-opacity: .38; stroke-width: 1.5; }
.endzone-label { fill: #a8c3af; font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-anchor: middle; }
.los-label { fill: #ffdb81; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .8px; }
.direction-label text { fill: #cfddd2; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .7px; }
.direction-label line { stroke: #d8e4dc; stroke-width: 1.5; }
.field-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; color: #93a198; font-size: 10px; }
.field-footer #field-status { color: #b2c9b8; text-align: right; }
.keyboard-hint { margin-right: 5px; color: #889b8d; font-family: "DM Mono", monospace; font-size: 9px; }
.player-token { cursor: grab; touch-action: none; }
.player-token:active { cursor: grabbing; }
.player-token .token-circle { fill: #e45151; stroke: #ffd1d1; stroke-width: 2; }
.player-token .token-number { fill: #fff; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.player-token .token-position { fill: #f4fff3; stroke: #153420; stroke-width: 2.5px; paint-order: stroke; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; text-anchor: middle; }
.player-token.dragging .token-circle { fill: #f7c95a; }
.route-path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 6; }
.route-path.is-running { animation: route-draw 1.1s ease-out both; }
.route-label { fill: #fff2c5; font-family: "DM Mono", monospace; font-size: 8px; }
@keyframes route-draw { from { stroke-dashoffset: 100; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
.play-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #34463a; border-radius: 8px; color: var(--green); font-size: 20px; }
.play-tabs { display: flex; gap: 4px; margin: 17px 0 12px; border-radius: 7px; background: #111814; padding: 4px; }
.play-tab { flex: 1; border: 0; border-radius: 5px; background: transparent; padding: 8px 3px; color: #88958d; font-size: 10px; font-weight: 600; cursor: pointer; }
.play-tab:hover { color: #dbe4dc; }
.play-tab.is-active { background: #2a3930; color: #d9f0dc; box-shadow: 0 1px 2px #0004; }
.play-list { display: flex; flex-direction: column; gap: 7px; }
.play-card { display: flex; align-items: center; gap: 10px; border: 1px solid #2a3730; border-radius: 8px; background: #1b241f; padding: 10px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.play-card:hover:not(:disabled) { border-color: #526c58; background: #202c24; }
.play-card.is-selected { border-color: #6d9b74; background: #203126; box-shadow: inset 0 0 0 1px #6d9b7433; }
.play-card:disabled { opacity: .42; cursor: not-allowed; }
.play-symbol { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; background: #26372b; color: #c4e4c6; font-family: "DM Mono", monospace; font-size: 13px; }
.play-card[data-type="pass"] .play-symbol { background: #2e2d25; color: #efd991; }
.play-card-copy { min-width: 0; }
.play-name { color: #e5ebe5; font-size: 11px; font-weight: 700; }
.play-meta { margin-top: 4px; color: #8e9b93; font-size: 9px; }
.play-status { margin-left: auto; color: #6fc384; font-size: 12px; }
.play-card:disabled .play-status { color: #ba8e73; }
.selected-play { min-height: 57px; margin-top: auto; padding-top: 14px; }
.selected-play-title { margin: 0 0 5px; color: #e3ede4; font-size: 11px; font-weight: 700; }
.selected-play-detail { margin: 0; color: #8f9b93; font-size: 10px; line-height: 1.45; }
.simulate-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 7px; background: var(--green); color: #18251b; font-size: 11px; font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; }
.simulate-button:hover:not(:disabled) { transform: translateY(-1px); background: #b9ecc3; }
.simulate-button:disabled { background: #37433b; color: #819087; cursor: not-allowed; }
.simulate-button span { font-size: 10px; }
.plays-footnote { margin: 9px 0 0; color: #839087; font-size: 9px; text-align: center; }
.app-footer { display: flex; justify-content: space-between; padding: 18px 2px; color: #abb8ae; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .45px; }
.player-dialog { width: min(520px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; border: 1px solid #394a3f; border-radius: 12px; background: #171f1b; padding: 22px; color: #f3f4ef; box-shadow: 0 18px 70px #0009; }
.player-dialog::backdrop { background: #070c09bb; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.dialog-close { width: 29px; height: 29px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: #aab5ad; font-size: 20px; line-height: 1; cursor: pointer; }
.player-dialog label { display: block; margin: 12px 0 6px; color: #b6c2b9; font-size: 11px; font-weight: 600; }
.player-dialog input, .player-dialog select { width: 100%; border: 1px solid #39473f; border-radius: 6px; outline: none; background: #111814; padding: 10px; color: #edf2ed; font-size: 12px; }
.player-dialog input:focus, .player-dialog select:focus { border-color: var(--green-strong); }
.player-dialog select option { background: #171f1b; }
.dialog-error { min-height: 14px; margin: 8px 0; color: #ff9f91; font-size: 10px; }
.dialog-submit { margin-top: 7px; }
.delete-game-warning { margin: 0; color: #b6c2b9; font-size: 12px; line-height: 1.6; }
.delete-game-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.delete-game-actions .delete-play-button { padding: 8px 12px; font-size: 11px; }
.starter-options { display: grid; gap: 3px; margin: 14px 0 8px; border: 1px solid #303d35; border-radius: 7px; padding: 9px 11px 8px; }
.starter-options legend { padding: 0 5px; color: #c4d1c7; font-size: 11px; font-weight: 700; }
.starter-options legend span { color: var(--muted); font-size: 9px; font-weight: 400; }
.player-dialog .starter-options .starter-option { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: #c5d0c7; font-size: 11px; cursor: pointer; }
.player-dialog .starter-options input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--green-strong); }
.starter-options p { margin: 3px 0 0; color: #87948b; font-size: 9px; line-height: 1.45; }
.advanced-game-options > label:not(.starter-option) { margin: 7px 0 5px; }
.advanced-game-options > select { margin-bottom: 5px; }
.formation-route-controls { display: grid; gap: 8px; margin: 8px 0 11px; }
.formation-route-option { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.player-dialog .formation-route-option > label { margin: 0; color: #b6c2b9; font-size: 10px; }
.route-combobox { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px auto; align-items: center; gap: 4px; }
.player-dialog .formation-route-input { width: 100%; min-width: 0; padding: 8px; }
.player-dialog .formation-route-input:disabled { opacity: .9; background: #24271e; color: #f7c95a; cursor: not-allowed; }
.route-dropdown-toggle { height: 33px; border: 1px solid #39473f; border-radius: 6px; background: #111814; color: #c4d1c7; cursor: pointer; }
.route-dropdown-toggle:hover:not(:disabled) { border-color: var(--green-strong); color: var(--green); }
.route-dropdown-toggle:disabled { opacity: .45; cursor: not-allowed; }
.route-block-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #39473f; border-radius: 6px; background: #111814; padding: 5px; color: #9ba99f; font-size: 9px; white-space: nowrap; cursor: pointer; }
.route-block-toggle svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-block-toggle:hover { border-color: #806f3e; color: #f7c95a; }
.route-block-toggle.is-active { border-color: #806f3e; background: #383323; color: #f7c95a; }
.route-suggestions { position: absolute; z-index: 5; top: calc(100% + 3px); right: 0; left: 0; max-height: 160px; overflow-y: auto; border: 1px solid #43564a; border-radius: 6px; background: #111814; box-shadow: 0 8px 24px #0009; }
.route-suggestion { display: block; width: 100%; border: 0; border-bottom: 1px solid #27332c; background: transparent; padding: 8px 9px; color: #dce7dd; font-size: 10px; text-align: left; cursor: pointer; }
.route-suggestion:hover, .route-suggestion:focus-visible { background: #203126; color: var(--green); outline: none; }
.route-suggestions-empty { margin: 0; padding: 9px; color: #87948b; font-size: 9px; }
.empty-roster { padding: 18px 5px; color: #89958d; font-size: 11px; text-align: center; }

.team-tabs { display: flex; gap: 4px; margin: 12px 0 2px; border-radius: 7px; background: #111814; padding: 4px; }
.team-tab { flex: 1; border: 0; border-radius: 5px; background: transparent; padding: 8px; color: #89958d; font-size: 10px; font-weight: 700; cursor: pointer; }
.team-tab.is-active { background: #2a3930; color: #d9f0dc; }
.team-tab[data-team="defense"].is-active { background: #462d2b; color: #ffd0ca; }
.defense-position-tag { background: #432b29; color: #ffc5be; }
.legend-defense { width: 8px; height: 8px; border: 1px solid #f0f3f0; border-radius: 50%; background: #090b0a; }
.player-token .token-circle { transition: fill .15s; }
.player-token.is-defense .token-circle { fill: #090b0a; stroke: #f0f3f0; }
.player-token.is-defense .token-number { fill: #fff; }
.player-token.is-selected .token-circle { stroke: #ffe08a; stroke-width: 3.5; }
.player-token.is-selected .token-position { fill: #ffe08a; }
.player-token.is-moving .token-circle { filter: drop-shadow(0 0 5px #fff8); }
.route-defense { stroke: #ff8c82; }
.route-path.route-pass { stroke: var(--pass-route-color); }
.zone-area { stroke-width: 2; stroke-dasharray: 7 5; }
.zone-defense { fill: #ff6f61; fill-opacity: .15; stroke: #ff8c82; }
.zone-offense { fill: #f7c95a; fill-opacity: .14; stroke: #f7c95a; }
.zone-label { fill: #fff3d2; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; text-anchor: middle; }
.zone-preview { fill: none; stroke-width: 2; stroke-dasharray: 4 4; }
.zone-preview-defense { stroke: #ff8c82; }
.zone-preview-offense { stroke: #f7c95a; }
.zone-vertex { stroke: #101714; stroke-width: 2; }
.zone-vertex-defense { fill: #ff8c82; }
.zone-vertex-offense { fill: #f7c95a; }
.create-play-button { border: 1px solid #3f5945; border-radius: 7px; background: #203126; padding: 8px 10px; color: #c9eccd; font-size: 10px; font-weight: 700; cursor: pointer; }
.create-play-button:hover { border-color: var(--green-strong); background: #293d2f; }
.custom-play-badge { margin-left: auto; border-radius: 10px; background: #303126; padding: 3px 6px; color: #e7d693; font-family: "DM Mono", monospace; font-size: 8px; }
.selected-play { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.selected-play-copy { min-width: 0; }
.delete-play-button { flex: 0 0 auto; border: 1px solid #583737; border-radius: 5px; background: #2e2020; padding: 6px 8px; color: #f3aaa2; font-size: 9px; cursor: pointer; }
.delete-play-button:hover { background: #482a29; }
.action-editor { margin: 0 0 12px; border: 1px solid #2b3831; border-radius: 9px; background: #141b17; padding: 11px 12px; }
.action-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.action-editor-heading h2 { font-size: 13px; }
.editor-hint { max-width: 390px; margin: 0; color: #98a59c; font-size: 9px; text-align: right; }
.action-editor-controls { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(125px, 1.1fr) minmax(125px, .9fr) minmax(120px, .7fr); align-items: end; gap: 8px; margin-top: 10px; }
.action-editor-controls label, .speed-control { display: flex; flex-direction: column; gap: 6px; color: #aab7ad; font-size: 10px; font-weight: 600; }
.action-editor-controls select, .speed-control select { width: 100%; border: 1px solid #39473f; border-radius: 6px; outline: none; background: #111814; padding: 9px 10px; color: #edf2ed; font-size: 11px; }
.action-editor-controls select:focus, .speed-control select:focus { border-color: var(--green-strong); }
.waypoint-tools { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 30px; }
.waypoint-tools span { min-width: 0; overflow-x: auto; color: #aab7ad; font-family: "DM Mono", monospace; font-size: 9px; line-height: 1.5; white-space: nowrap; }
.waypoint-tools button { border: 1px solid #39473f; border-radius: 6px; background: #1b241f; padding: 8px; color: #c2cec4; font-size: 9px; white-space: nowrap; cursor: pointer; }
.waypoint-tools button:hover:not(:disabled) { border-color: #66806b; }
.waypoint-tools button:disabled { opacity: .45; cursor: not-allowed; }
.simulation-controls { display: flex; align-items: center; gap: 9px; margin-top: 12px; border: 1px solid #2b3831; border-radius: 8px; background: #141b17; padding: 9px 11px; }
.transport-button { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border: 1px solid #39473f; border-radius: 6px; background: #1e2922; color: #d6e5d9; font-size: 10px; cursor: pointer; }
.transport-button:hover { border-color: var(--green-strong); color: var(--green); }
.timeline { min-width: 60px; flex: 1; accent-color: var(--green-strong); cursor: pointer; }
.time-display { min-width: 48px; color: #bcc8bf; font-family: "DM Mono", monospace; font-size: 10px; text-align: right; }
.speed-control { flex-direction: row; align-items: center; gap: 7px; white-space: nowrap; }
.speed-control select { width: 72px; padding: 7px; }
.player-dialog input:focus, .player-dialog select:focus { border-color: var(--green-strong); }
.play-card[data-type="custom"] .play-symbol { color: #f4d97b; }

.section-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.section-tab { border: 1px solid transparent; border-radius: 7px; background: transparent; padding: 8px 11px; color: #9aa79e; font-size: 11px; font-weight: 700; cursor: pointer; }
.section-tab:hover { border-color: #39473f; color: #e2ece4; }
.section-tab.is-active { border-color: #3b5943; background: #203126; color: var(--green); }
[hidden] { display: none !important; }
.offensive-formations-section { display: grid; grid-template-columns: minmax(230px, .36fr) minmax(0, 1fr); align-items: start; gap: 18px; padding-top: 22px; }
.formation-library-list, .formation-editor-panel { min-width: 0; padding: 22px 18px 18px; }
.formation-library-list { display: flex; flex-direction: column; }
.formation-library-list .panel-heading { gap: 10px; }
.formation-library-list .panel-heading h1 { font-size: 17px; }
.formation-editor-panel .board-heading { margin-bottom: 14px; }
.formation-editor-grid { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.28fr); align-items: start; gap: 16px; }
.formation-editor-controls { display: grid; min-width: 0; gap: 9px; }
.formation-editor-controls > label { display: flex; flex-direction: column; gap: 6px; color: #aab7ad; font-size: 10px; font-weight: 600; }
.formation-editor-controls input, .formation-editor-controls select { width: 100%; min-width: 0; border: 1px solid #39473f; border-radius: 6px; outline: none; background: #111814; padding: 8px 9px; color: #edf2ed; font-size: 10px; }
.formation-editor-controls input:focus, .formation-editor-controls select:focus { border-color: var(--green-strong); }
.formation-editor-controls input:disabled { background: #1d2722; color: #a8b5aa; opacity: 1; }
.formation-roster-count { margin: 0; color: #8e9b93; font-size: 9px; }
.formation-fixed-positions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.formation-fixed-positions label { display: grid; gap: 4px; color: #91a195; font-size: 9px; font-weight: 700; }
.formation-fixed-positions input { text-align: center; }
.formation-position-fields { display: grid; gap: 7px; }
.formation-slot-row { display: grid; grid-template-columns: 59px minmax(88px, 1fr) auto; align-items: center; gap: 6px; }
.formation-slot-row > label { color: #aab7ad; font-size: 9px; font-weight: 600; }
.formation-rb-side { display: flex; gap: 3px; }
.formation-rb-side button { border: 1px solid #39473f; border-radius: 5px; background: #111814; padding: 6px 7px; color: #aab7ad; font-size: 9px; cursor: pointer; }
.formation-rb-side button:hover:not(:disabled), .formation-rb-side button.is-active { border-color: #6c8a70; background: #203126; color: var(--green); }
.formation-rb-side button:disabled { opacity: .45; cursor: not-allowed; }
.formation-i-hint { margin: 0; color: #e2c876; font-size: 9px; line-height: 1.45; }
.formation-editor-actions { display: flex; gap: 8px; }
.formation-editor-actions .simulate-button { min-height: 37px; }
.formation-status { min-height: 14px; margin: 0; color: #aab7ad; font-size: 9px; }
.formation-field-panel h3 { margin: 0 0 8px; color: #b8c5ba; font-size: 11px; }
.formation-field-wrap { display: flex; min-width: 0; align-items: center; border: 1px solid #2b3831; border-radius: 8px; background: #141b17; }
.formation-field-wrap .field { width: 100%; max-height: none; overflow: hidden; }
.formation-preview-token { pointer-events: none; }
.formation-preview-token.player-token { pointer-events: auto; cursor: grab; touch-action: none; }
.formation-preview-token.player-token:active { cursor: grabbing; }
.formation-preview-token .token-circle { fill: #e45151; stroke: #ffd1d1; stroke-width: 2; }
.formation-preview-token .token-position { fill: #fff; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.route-library-section { display: grid; grid-template-columns: minmax(230px, .36fr) minmax(0, 1fr); align-items: stretch; gap: 18px; padding-top: 22px; }
.route-library-list, .route-editor-panel { min-width: 0; display: flex; flex-direction: column; padding: 22px 18px 18px; }
.route-library-list { min-height: 0; }
.route-library-list .panel-heading { gap: 10px; }
.route-library-list .panel-heading h1 { font-size: 17px; }
.standard-route-list { display: grid; min-height: 0; flex: 1 1 0; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 7px; overflow-y: auto; }
.standard-route-card { display: flex; width: 100%; align-items: center; gap: 9px; border: 1px solid #2b3831; border-radius: 7px; background: #141b17; padding: 10px; text-align: left; cursor: pointer; }
.standard-route-card:hover { border-color: #536c59; background: #1c2820; }
.standard-route-card.is-selected { border-color: var(--green-strong); background: #203126; }
.standard-route-symbol { color: var(--yellow); font-size: 19px; }
.standard-route-card.is-pass .standard-route-symbol { color: var(--pass-route-color); }
.standard-route-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.standard-route-card-name { overflow: hidden; color: #e3ebe4; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.standard-route-card-type { color: var(--muted); font-size: 9px; }
.route-library-list .empty-roster { margin: 0; }
.route-editor-panel { min-height: 0; }
.route-editor-panel .board-heading { margin-bottom: 12px; }
.standard-route-editor-grid { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.28fr); align-items: start; gap: 16px; }
.standard-route-controls { min-width: 0; }
.standard-route-form { display: grid; grid-template-columns: 1fr; align-items: end; gap: 10px; }
.standard-route-form label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #aab7ad; font-size: 10px; font-weight: 600; }
.standard-route-form input, .standard-route-form select { width: 100%; min-width: 0; border: 1px solid #39473f; border-radius: 6px; outline: none; background: #111814; padding: 9px 10px; color: #edf2ed; font-size: 11px; }
.standard-route-form input:focus, .standard-route-form select:focus { border-color: var(--green-strong); }
.standard-route-save { min-height: 36px; white-space: nowrap; }
.standard-route-comment { margin-top: 12px; }
.standard-route-comment label { display: flex; flex-direction: column; gap: 6px; color: #aab7ad; font-size: 10px; font-weight: 600; }
.standard-route-comment textarea { width: 100%; min-height: 78px; resize: vertical; border: 1px solid #39473f; border-radius: 6px; outline: none; background: #111814; padding: 9px 10px; color: #edf2ed; font: inherit; font-size: 11px; line-height: 1.45; }
.standard-route-comment textarea:focus { border-color: var(--green-strong); }
.standard-route-comment textarea[readonly] { color: #aab7ad; }
.standard-route-comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.standard-route-comment-actions span { margin-right: auto; color: var(--muted); font-size: 9px; font-family: "DM Mono", monospace; }
.route-error { min-height: 14px; margin: 4px 0 8px; }
.route-canvas-wrap { display: flex; width: 100%; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #2b3831; border-radius: 8px; background: #141b17; }
.route-library-canvas { display: block; width: 100%; max-height: 611px; cursor: crosshair; touch-action: none; }
.route-library-canvas .standard-route-origin .token-circle { vector-effect: non-scaling-stroke; }
.route-library-canvas .player-token { cursor: grab; }
.route-library-canvas .player-token:active { cursor: grabbing; }
.route-library-canvas.is-drawing { outline: 2px dashed var(--green-strong); outline-offset: -8px; }
.standard-route-path { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 6; pointer-events: none; }
.standard-route-path.is-pass { stroke: var(--pass-route-color); }
.standard-route-point { fill: #f7c95a; stroke: #17251b; stroke-width: 2; pointer-events: none; }
.standard-route-start { fill: #a8e0b5; }
.standard-route-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.waypoint-button { border: 1px solid #39473f; border-radius: 6px; background: #1b241f; padding: 8px; color: #c2cec4; font-size: 9px; white-space: nowrap; cursor: pointer; }
.waypoint-button:hover:not(:disabled) { border-color: #66806b; }
.waypoint-button:disabled { opacity: .45; cursor: not-allowed; }
.simulate-button:disabled, .delete-play-button:disabled { opacity: .45; cursor: not-allowed; }
.route-library-status { min-height: 16px; margin: 10px 0 0; color: #9ba99f; font-size: 10px; }

@media (min-width: 1450px) {
  .workspace { grid-template-columns: 280px minmax(520px, 1fr) 320px; gap: 20px; padding-top: 28px; }
  .board-panel { min-height: 690px; }
  .field { max-height: 555px; }
  .route-library-section { gap: 20px; padding-top: 28px; }
}
@media (max-width: 1120px) {
  .app-shell { padding: 0 20px; }
  .workspace { grid-template-columns: 230px minmax(420px, 1fr); }
  .plays-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(300px, 1.3fr) minmax(200px, .8fr); align-items: center; column-gap: 18px; }
  .plays-panel .panel-heading { grid-column: 1; }
  .play-tabs { grid-column: 1; margin: 13px 0 0; }
  .play-list { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; }
  .selected-play { grid-column: 3; grid-row: 1; min-height: 0; margin: 0; padding: 0; }
  .simulate-button, .plays-footnote { grid-column: 3; }
  .simulate-button { grid-row: 2; }
  .plays-footnote { grid-row: 3; }
  .roster-note { margin-top: 25px; }
  .action-editor-controls { grid-template-columns: 1fr 1fr; }
  .route-library-section { grid-template-columns: minmax(0, 1fr); }
  .standard-route-list { flex: 0 1 auto; max-height: 160px; }
  .offensive-formations-section { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { padding: 0 13px; }
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 7px; padding: 8px 0; }
  .session-info { gap: 7px; margin-left: 17px; font-size: 10px; }
  .session-info .muted, .session-divider { display: none; }
  .section-nav { width: 100%; justify-content: flex-end; }
  .section-tab { padding: 7px 10px; }
  .share-button { padding: 8px 9px; font-size: 10px; }
  .workspace { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; }
  .board-panel { grid-row: 1; min-height: 0; padding: 17px 13px 12px; }
  .board-heading { align-items: flex-start; gap: 10px; }
  .board-heading-tools { min-width: 0; justify-items: end; }
  .field-view-controls { width: 100%; }
  .field-view-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-view-picker button { padding: 6px 5px; }
  .field { max-height: none; }
  .board-legend { gap: 8px; font-size: 9px; }
  .roster-panel { grid-row: 2; padding: 17px 14px; }
  .roster-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .roster-note { margin-top: 15px; }
  .remove-player { opacity: 1; }
  .plays-panel { grid-column: auto; display: flex; padding: 17px 14px; }
  .plays-panel .panel-heading { width: 100%; }
  .play-tabs { width: 100%; margin: 14px 0 11px; }
  .play-list { width: 100%; display: flex; }
  .selected-play { width: 100%; min-height: auto; margin-top: 15px; padding-top: 0; padding-bottom: 12px; }
  .simulate-button, .plays-footnote { width: 100%; }
  .field-footer { font-size: 9px; }
  .board-legend { flex-wrap: wrap; justify-content: flex-end; }
  .action-editor { padding: 11px; }
  .action-editor-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .editor-hint { text-align: left; }
  .action-editor-controls { grid-template-columns: 1fr; }
  .waypoint-tools { grid-template-columns: minmax(0, 1fr) auto auto; }
  .simulation-controls { flex-wrap: wrap; }
  .timeline { order: 2; min-width: 100%; }
  .time-display { margin-left: auto; }
  .route-library-section { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; }
  .offensive-formations-section { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; }
  .formation-library-list, .formation-editor-panel { padding: 17px 14px; }
  .formation-editor-grid { grid-template-columns: 1fr; }
  .formation-field-panel { grid-row: 1; }
  .route-library-list { min-height: 0; padding: 17px 14px; }
  .standard-route-list { grid-template-columns: 1fr 1fr; max-height: 220px; }
  .route-editor-panel { min-height: 0; padding: 17px 13px 12px; }
  .standard-route-editor-grid { grid-template-columns: 1fr; }
  .route-canvas-wrap { grid-row: 1; }
  .standard-route-form { grid-template-columns: 1fr 1fr; }
  .standard-route-save { grid-column: 1 / -1; }
  .standard-route-tools { justify-content: stretch; }
  .standard-route-tools .waypoint-button { flex: 1 1 auto; }
}

[hidden] { display: none !important; }
.auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); padding: 30px; }
.auth-brand { margin-bottom: 30px; }
.auth-card h1 { margin-bottom: 8px; }
.auth-description { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
#login-form { display: grid; gap: 14px; }
#login-form label { display: grid; gap: 7px; color: #c4d1c7; font-size: 12px; }
#login-form input { width: 100%; border: 1px solid var(--border); border-radius: 7px; background: #111814; padding: 11px 12px; color: #f3f4ef; }
#login-form input:focus { outline: 2px solid #6fc384; outline-offset: 1px; }
#login-button { min-height: 40px; margin-top: 5px; }
.auth-status { min-height: 18px; margin: 14px 0 0; color: #ffaaa1; font-size: 12px; line-height: 1.5; }
.auth-signout { margin-top: 8px; }
.account-controls { display: flex; align-items: center; gap: 9px; margin-left: auto; }
#account-email { max-width: 180px; overflow: hidden; color: #b7c2ba; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { border: 1px solid #35513d; border-radius: 20px; background: #1b3021; padding: 4px 8px; color: var(--green); font-size: 9px; white-space: nowrap; }
.role-badge-viewer { border-color: #3a4651; background: #202a32; color: #b7c5d0; }
@media (max-width: 900px) {
  .account-controls { margin-left: auto; }
  #account-email { display: none; }
}