:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #10213b;
  --muted: #5b6677;
  --navy: #0b1f3a;
  --navy-2: #17365f;
  --gold: #f4b41f;
  --gold-soft: #fff3cf;
  --floor: #f5e1bd;
  --line: #9b6331;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --border: #d9e0e8;
  --good: #1f6a45;
  --good-soft: #eaf7ef;
  --danger: #9d2b2b;
  --shadow: 0 18px 50px rgba(11, 31, 58, .10);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #eef2f6; color: var(--ink); }
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 56px; }
.page-header { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.page-header h1 { margin: 3px 0 8px; font-size: clamp(2rem, 5vw, 3.5rem); line-height: .98; letter-spacing: -.04em; }
.eyebrow, .meta-label { margin: 0 0 7px; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: var(--navy-2); }
.lede { margin: 0; max-width: 820px; color: var(--muted); line-height: 1.6; }
.prototype-badge { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #b77a00; border-radius: 999px; background: var(--gold-soft); font-size: .78rem; font-weight: 800; }

.play-management-card, .board-mode-card, .authoring-card, .board-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.play-management-card, .board-mode-card, .authoring-card { margin-bottom: 16px; }
.play-management__head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px 12px; }
.play-management__head h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.85rem); }
.save-state { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .76rem; font-weight: 800; }
.play-management__row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: 14px; align-items: end; padding: 0 22px 18px; }
.play-title-field { display: grid; gap: 6px; font-size: .75rem; font-weight: 800; color: var(--muted); }
.play-title-field input, .share-link-fallback input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--ink); font: inherit; }
.play-title-field input[readonly] { background: var(--surface-2); }
.play-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.play-actions button, .saved-play__actions button { min-height: 42px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--ink); font-weight: 800; cursor: pointer; }
.play-actions button.primary { background: var(--navy); color: white; border-color: var(--navy); }
.play-actions button:disabled { opacity: .45; cursor: not-allowed; }
.play-library { display: grid; gap: 8px; padding: 0 22px 18px; }
.saved-play { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfd; }
.saved-play > div:first-child { display: grid; gap: 2px; min-width: 0; }
.saved-play strong { overflow-wrap: anywhere; }
.saved-play span { color: var(--muted); font-size: .75rem; }
.saved-play__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.play-library-empty, .share-link-fallback { margin: 0 22px 18px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: .84rem; }
.share-link-fallback label { display: grid; gap: 6px; font-weight: 800; color: var(--ink); }
.board-mode-card__head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px 12px; }
.board-mode-card__head h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.85rem); }
.board-mode-lock { color: var(--muted); font-size: .76rem; font-weight: 800; }
.board-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 22px 18px; }
.board-mode-grid > div { display: grid; gap: 6px; }
.board-mode-label { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.board-choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.board-choice-group button { min-height: 42px; padding: 8px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.board-choice-group button[aria-pressed="true"] { background: var(--navy); color: white; }
.board-choice-group button:disabled { opacity: .5; cursor: not-allowed; }
.board-mode-note { margin: -4px 22px 18px; padding: 11px 12px; border: 1px solid #e8c86f; border-radius: 12px; background: var(--gold-soft); color: #5e4a19; font-size: .84rem; line-height: 1.45; }

.authoring-card__head, .board-card__top { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.authoring-card__head h2, .board-card__top h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.authoring-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.authoring-actions button { min-height: 42px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--ink); font-weight: 750; cursor: pointer; }
.authoring-actions button:hover { border-color: #7e91a8; }

.author-toolbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 14px 16px; background: #f7f9fb; }
.author-toolbar--defense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mode-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: white; }
.mode-switch { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mode-switch button, .together-toggle { min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--navy); color: white; }
.together-toggle { border-color: var(--border); background: white; }
.together-toggle[aria-pressed="true"] { border-color: #7f3f98; background: #f2e8f7; color: #622c77; }
.together-toggle:disabled { opacity: .45; cursor: not-allowed; }
.author-toolbar button { display: grid; gap: 3px; min-height: 76px; padding: 10px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: white; color: var(--ink); cursor: pointer; }
.author-toolbar button strong { font-size: .92rem; }
.author-toolbar button span { color: var(--muted); font-size: .69rem; line-height: 1.35; }
.author-toolbar button[aria-pressed="true"] { border-color: var(--navy); background: #eaf0f8; box-shadow: inset 0 0 0 1px var(--navy); }
.author-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.author-instruction { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--gold-soft); }
.author-instruction strong { flex: 0 0 auto; }
.author-instruction span { color: #5e4a19; line-height: 1.45; }

.status { padding: 8px 11px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.status--good { background: var(--good-soft); color: var(--good); }
.status--bad { background: #fdecec; color: var(--danger); }

.workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); }
.court-panel { padding: 18px; min-width: 0; background: #f9fafc; }
.coach-court { width: 100%; display: block; border-radius: 16px; background: var(--floor); border: 1px solid #d5bb91; touch-action: none; user-select: none; }
.coach-court--half { max-height: 690px; aspect-ratio: 1 / 1; }
.coach-court--full { max-height: 920px; aspect-ratio: 50 / 94; margin-inline: auto; }
.court-floor { fill: var(--floor); stroke: var(--line); stroke-width: 3; }
.court-line { fill: none; stroke: var(--line); stroke-width: 3; }
.court-rim { fill: none; stroke: #bf4c2c; stroke-width: 4; }
.court-paint { fill: rgba(255,255,255,.14); }

.player-token { cursor: pointer; touch-action: none; }
.player-token circle { fill: var(--navy); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.player-token text { fill: #fff; font-size: 18px; font-weight: 850; pointer-events: none; }
.player-token.is-dragging { cursor: grabbing; }
.player-token.is-selected circle { stroke: var(--gold); stroke-width: 7; }
.player-token.has-ball circle { filter: drop-shadow(0 0 5px rgba(244,180,31,.78)); }
.defender-token circle { fill: #fff; stroke: #7d2530; stroke-width: 4; }
.defender-token text { fill: #7d2530; font-size: 14px; font-weight: 900; }
.defender-token.is-selected circle { stroke: var(--gold); stroke-width: 7; }

.ball-marker circle { fill: #dc752b; stroke: #73340b; stroke-width: 2; }
.ball-marker path { fill: none; stroke: #73340b; stroke-width: 1.5; }

.action-path { fill: none; stroke-width: 5; stroke-linecap: round; }
.action-path--pass { stroke: #9a5d00; stroke-dasharray: 11 10; }
.action-path--move { stroke: var(--navy-2); }
.action-path--dribble { stroke: #3f5675; }
.action-path--shot { stroke: #bf4c2c; stroke-width: 4; }
#coach-pass-arrow path { fill: #9a5d00; }
#coach-move-arrow path { fill: var(--navy-2); }
#coach-dribble-arrow path { fill: #3f5675; }
#coach-shot-arrow path { fill: #bf4c2c; }

.screen-notation line { stroke: #6a2f8e; stroke-width: 5; stroke-linecap: round; }
.screen-notation__bar { stroke-width: 7 !important; }
.handoff-notation path { fill: none; stroke: #0a6f6b; stroke-width: 4; stroke-linecap: round; }
.handoff-mark line { stroke: #0a6f6b; stroke-width: 4; stroke-linecap: round; }
.defensive-notation line { stroke: #7d2530; stroke-width: 5; stroke-linecap: round; }
.defensive-notation text, .defense-switch text { fill: #7d2530; font-size: 12px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.defense-switch line { stroke: #7d2530; stroke-width: 4; stroke-dasharray: 8 6; }
#coach-defense-arrow path { fill: #7d2530; }

.legend { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; margin-top: 12px; color: var(--muted); font-size: .83rem; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-player { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: white; }
.legend-defender { display: inline-grid; place-items: center; width: 28px; height: 24px; border-radius: 50%; border: 2px solid #7d2530; background: white; color: #7d2530; font-size: .72rem; }
.legend-defense { color: #7d2530; font-size: 1.05rem; }
.legend-pass, .legend-move, .legend-dribble { position: relative; display: inline-block; width: 36px; height: 8px; border-top: 3px solid var(--navy-2); }
.legend-pass { border-top-style: dashed; border-color: #9a5d00; }
.legend-dribble { border-top-style: wavy; border-color: #3f5675; transform: skewY(-4deg); }
.legend-pass::after, .legend-move::after, .legend-dribble::after { content: ""; position: absolute; right: -1px; top: -6px; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: inherit; }
.legend-pass::after { color: #9a5d00; }
.legend-dribble::after { color: #3f5675; }
.legend-screen, .legend-shot, .legend-handoff { display: inline-grid; place-items: center; width: 25px; height: 25px; font-weight: 900; }
.legend-screen { color: #6a2f8e; border-bottom: 4px solid #6a2f8e; }
.legend-shot { color: #bf4c2c; font-size: 1.25rem; }
.legend-handoff { color: #0a6f6b; font-size: 1.35rem; }
.legend-ball { width: 17px; height: 17px; border-radius: 50%; background: #dc752b; border: 1px solid #73340b; }

.control-panel { padding: 22px; border-left: 1px solid var(--border); display: grid; align-content: start; gap: 24px; }
.timeline { display: grid; gap: 7px; max-height: 330px; overflow: auto; padding-right: 2px; }
.timeline button { min-height: 42px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--ink); font-weight: 700; cursor: pointer; }
.timeline button[aria-pressed="true"] { border-color: var(--navy); background: #eaf0f8; }
.coach-read, .state-readout, .assignment-readout { padding: 14px; border-radius: 13px; }
.coach-read { background: var(--gold-soft); border: 1px solid #e8c86f; }
.coach-read p:last-child { margin: 0; line-height: 1.5; }
.state-readout { display: grid; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.state-readout span { color: var(--muted); font-size: .82rem; }
.assignment-readout { background: #fff7f8; border: 1px solid #e7cbd0; }
.assignment-readout > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.assignment-readout span { color: #6d3d45; font-size: .82rem; }

.transport { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--border); background: white; }
.transport button { min-height: 44px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--ink); font-weight: 800; cursor: pointer; }
.transport button.primary { background: var(--navy); color: white; border-color: var(--navy); }
.transport button:disabled { opacity: .45; cursor: not-allowed; }
.transport__spacer { flex: 1 1 24px; }

.text-equivalent { padding: 14px 22px 20px; border-top: 1px solid var(--border); background: #fbfcfd; }
.text-equivalent p { margin: 5px 0 0; color: var(--muted); line-height: 1.55; }

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.proof-grid article { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.72); }
.proof-grid span { color: var(--muted); font-size: .82rem; line-height: 1.45; }

@media (max-width: 960px) {
  .author-toolbar, .author-toolbar--defense { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 20px, 760px); padding-top: 20px; }
  .page-header, .board-card__top, .authoring-card__head, .play-management__head, .board-mode-card__head { align-items: flex-start; }
  .prototype-badge, .status { max-width: 160px; text-align: center; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel { border-left: 0; border-top: 1px solid var(--border); padding: 18px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .play-management__head, .play-management__row { grid-template-columns: 1fr; }
  .board-mode-card__head { display: grid; }
  .board-mode-grid { grid-template-columns: 1fr; }
  .play-management__head { display: grid; }
  .play-actions { justify-content: stretch; }
  .play-actions button { flex: 1 1 46%; }
  .saved-play { align-items: flex-start; flex-direction: column; }
  .saved-play__actions { width: 100%; }
  .saved-play__actions button { flex: 1 1 50%; }
  .author-toolbar, .author-toolbar--defense { grid-template-columns: repeat(2, 1fr); }
  .mode-row { align-items: stretch; flex-direction: column; }
  .mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .together-toggle { width: 100%; }
  .authoring-card__head { display: grid; }
  .authoring-actions { width: 100%; }
  .authoring-actions button { flex: 1 1 46%; }
  .author-instruction { align-items: flex-start; }
}

@media (max-width: 520px) {
  .page-header { display: grid; }
  .prototype-badge { justify-self: start; }
  .board-card__top { display: grid; }
  .status { justify-self: start; }
  .court-panel { padding: 10px; }
  .coach-court--full { max-height: none; }
  .control-panel { padding: 15px; }
  .transport { position: sticky; bottom: 0; z-index: 5; padding: 10px; box-shadow: 0 -8px 24px rgba(11,31,58,.08); }
  .transport button { flex: 1 1 calc(33% - 8px); min-width: 96px; }
  .transport__spacer { display: none; }
  .proof-grid { grid-template-columns: 1fr; }
  .legend { gap: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}