/* ════════════════════════════════════════════════════════════════════════
   TACTICAL BOARD ("learn plays") — the redesign (22.10.2026), from the Claude Design "Play
   board" file. A wood court (a dark one in the dark theme) with small standing figures:
   offence solid orange without hands, defence outlined with open hands, the ball handler
   with a dashed ring. Under the court a dark bar (play, step, version, speed), a caption card,
   the controls and three plain texts. The court, its lines and the player positions are
   unchanged from the phase engine; only the look is new. Square corners; ink as the action
   colour; orange only for the offence. Reduced motion: no playing, only the step buttons.
   ════════════════════════════════════════════════════════════════════════ */

.tb-wrap {
  --tb-wood-a: #9c7a52;  --tb-wood-b: #7f6040;  --tb-paint: rgba(58, 36, 16, .28);
  --tb-line: rgba(255, 255, 255, .62);  --tb-rim: #e8742a;
  --tb-off: #e8742a;  --tb-ink: #0c1630;  --tb-defbody: #f1ebe0;  --tb-pill-def: #0c1630;  --tb-pill-off: #b8560f;
  --tb-hero: #0c1630;  --tb-ball: #e8742a;
  font-family: var(--ds-font);
  color: var(--ds-ink, #111);
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; background: var(--ds-bg, #e9e4da);
}
html[data-theme="dark"] .tb-wrap, :root:not([data-theme="light"]) .tb-wrap {
  --tb-wood-a: #1f2a40;  --tb-wood-b: #18213a;  --tb-paint: rgba(255, 255, 255, .06);
  --tb-line: rgba(255, 255, 255, .42);
  --tb-ink: #eef2fa;  --tb-defbody: #1b2538;
}
html[data-theme="light"] .tb-wrap { --tb-wood-a: #9c7a52; }

/* ── Head ── */
.tb-head { display: flex; flex-direction: column; gap: 6px; }
.tb-group-k { font: 800 var(--ds-fs-13, 13px) var(--ds-font); color: var(--ds-ink, #111); }
.tb-title { margin: 0; font: 900 var(--ds-fd-56, 56px)/.98 var(--ds-font); letter-spacing: -.03em; }
.tb-hook { margin: 0; font: 500 var(--ds-fs-17, 17px)/1.4 var(--ds-font); color: var(--ds-ink2, #555); }
@media (max-width: 559px) { .tb-wrap { padding: 14px; } .tb-title { font-size: 36px; } .tb-hook { font-size: 15px; } }

/* ── Versions (what the defence does) ── */
.tb-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tb-variants-k { font: 700 var(--ds-fs-13, 13px) var(--ds-font); color: var(--ds-ink2, #555); }
.tb-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ds-line, #d3ccbf); background: var(--ds-card, #f7f4ee); }
.tb-seg-b { min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: var(--ds-ink, #111); font: 800 var(--ds-fs-14, 14px) var(--ds-font); cursor: pointer; }
.tb-seg-b + .tb-seg-b { border-inline-start: 1.5px solid var(--ds-line, #d3ccbf); }
.tb-seg-b.active { background: var(--ds-ink, #0c1630); color: var(--ds-card, #f7f4ee); }
.tb-variants-note { flex-basis: 100%; margin: 0; font: 500 var(--ds-fs-13, 13px)/1.5 var(--ds-font); color: var(--ds-ink2, #555); }

/* ── The court ── */
.tb-courtwrap { position: relative; border: 3px solid var(--tb-hero); background: var(--tb-wood-a); }
.tb-svg { display: block; width: 100%; height: auto; }
.tb-name { font: 800 11px var(--ds-font); paint-order: stroke fill; stroke-width: 7px; stroke-linejoin: round; fill: #fff; }
.tb-name-def { stroke: var(--tb-pill-def); }
.tb-name-off { stroke: var(--tb-pill-off); }
.tb-actor { transform-box: fill-box; }
.tb-g-dark { fill: var(--tb-ink); }
.tb-g-off { fill: var(--tb-off); stroke: var(--tb-ink); stroke-width: 2.2; }
.tb-g-line { fill: var(--tb-defbody); stroke: var(--tb-ink); stroke-width: 2.4; }
.tb-g-leg { fill: none; stroke: var(--tb-ink); stroke-width: 4; stroke-linecap: round; }
.tb-g-arm { fill: none; stroke: var(--tb-ink); stroke-width: 3.2; stroke-linecap: round; }
.tb-g-arm-off { fill: none; stroke: var(--tb-ink); stroke-width: 3; stroke-linecap: round; }
.tb-g-hand { fill: var(--tb-ink); }
.tb-g-ring { fill: none; stroke: var(--tb-off); stroke-width: 2.6; stroke-dasharray: 5 4; }
.tb-ball-c { fill: var(--tb-ball); stroke: #3b2600; stroke-width: 1.8; }
.tb-ball-s { fill: none; stroke: #3b2600; stroke-width: 1.2; }
.tb-ball-dot { opacity: 0; }
.tb-mini { flex: none; background: var(--tb-wood-a); padding: 3px; }

.tb-bigplay {
  position: absolute; inset-inline-start: 50%; inset-block-start: 56%; width: 88px; height: 88px; margin: -44px 0 0 -44px; padding: 0;
  display: grid; place-items: center; border: 6px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--tb-hero); color: #fff; cursor: pointer;
  background-clip: padding-box;
}
.tb-bigplay[hidden] { display: none; }
.tb-bigplay:hover { transform: scale(1.04); }
.tb-bar { display: flex; align-items: center; gap: 0; background: var(--tb-hero); color: #fff; }
.tb-bar > * { padding: 0 18px; min-height: 44px; display: flex; align-items: center; font: 800 var(--ds-fs-14, 14px) var(--ds-font); }
.tb-bar > * + * { border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.tb-bar-n { flex: 1; gap: 10px; }
.tb-bar-n i { width: 8px; height: 8px; border-radius: 50%; background: #9aa5be; }
.tb-bar b { font: 700 18px var(--ds-font-num, var(--ds-font)); }
.tb-bar-s { font-family: var(--ds-font-num, var(--ds-font)); color: var(--tb-off); }
.tb-bar-v { font-weight: 700; color: #d6dceb; }
@media (max-width: 559px) { .tb-bar > * { padding: 0 10px; } .tb-bar-v { display: none; } .tb-bigplay { width: 68px; height: 68px; margin: -34px 0 0 -34px; } }

/* ── The caption ── */
.tb-phase { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 18px; background: var(--ds-card, #f7f4ee); border-top: 3px solid var(--tb-off); }
.tb-phase img { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tb-off); object-fit: cover; }
.tb-phase > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-phase small { font: 700 var(--ds-fs-13, 13px) var(--ds-font); color: var(--ds-ink2, #555); }
.tb-phase p { margin: 0; font: 800 var(--ds-fs-17, 17px)/1.4 var(--ds-font); text-wrap: pretty; }

/* ── Controls ── */
.tb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tb-prog { display: flex; gap: 5px; flex: 1 1 160px; min-width: 120px; }
.tb-prog-b { flex: 1; min-width: 14px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; position: relative; }
.tb-prog-b::after { content: ""; position: absolute; inset-inline: 0; inset-block: 9px; background: color-mix(in srgb, var(--ds-ink, #111) 22%, var(--ds-bg, #e9e4da)); }
.tb-prog-b.on::after { background: var(--tb-off); }
.tb-btns { display: flex; gap: 8px; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; min-width: 52px; padding: 0 16px; border: 1.5px solid var(--ds-ink, #0c1630); border-radius: 0; background: transparent; color: var(--ds-ink, #0c1630); font: 800 var(--ds-fs-15, 15px) var(--ds-font); cursor: pointer; }
.tb-btn:hover:not(:disabled) { background: var(--ds-soft, rgba(0, 0, 0, .06)); }
.tb-btn:disabled { opacity: .4; cursor: default; }
.tb-btn--sq { padding: 0; }
.tb-btn--solid { min-width: 128px; background: var(--tb-hero); border-color: var(--tb-hero); color: #fff; }
.tb-btn--solid:hover:not(:disabled) { background: var(--tb-hero); opacity: .92; }
.tb-btn--solid[hidden], .tb-speed[hidden] { display: none; }
.tb-speed { display: flex; align-items: center; gap: 10px; font: 700 var(--ds-fs-13, 13px) var(--ds-font); color: var(--ds-ink2, #555); }
.tb-seg-b:focus-visible, .tb-btn:focus-visible, .tb-prog-b:focus-visible, .tb-bigplay:focus-visible, .tb-pick:focus-visible, .tb-close:focus-visible { outline: 2px solid var(--ds-ink, #0c1630); outline-offset: 2px; }

.tb-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font: 700 var(--ds-fs-14, 14px) var(--ds-font); }
.tb-legend span { display: inline-flex; align-items: center; gap: 10px; }

/* ── The three plain texts ── */
.tb-block { background: var(--ds-card, #f7f4ee); border-top: 3px solid var(--ds-ink, #0c1630); padding: 16px 20px 18px; }
.tb-block h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font: 900 var(--ds-fs-17, 17px) var(--ds-font); }
.tb-block p { margin: 0; max-width: 78ch; font: 500 var(--ds-fs-16, 16px)/1.75 var(--ds-font); }

/* The honest footnote: the board is a schematic, never tracked positions. */
.tb-note { margin: 0; font: 500 var(--ds-fs-13, 13px)/1.5 var(--ds-font); color: var(--ds-ink2, #555); }

/* ── Modal host (opened from a tactical term in the Professor's text) ── */
.tb-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 12, 22, .6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.tb-dialog { position: relative; width: 100%; max-width: 860px; max-height: 94vh; overflow-y: auto; background: var(--ds-bg, #e9e4da); border: 1.5px solid var(--ds-line, #d3ccbf); }
.tb-close { position: absolute; inset-inline-end: 12px; top: 12px; z-index: 3; min-width: 44px; min-height: 44px; border: 1.5px solid var(--ds-ink, #0c1630); border-radius: 0; background: var(--ds-card, #f7f4ee); color: var(--ds-ink, #0c1630); font: 700 22px/1 var(--ds-font); cursor: pointer; }
.tb-picker { display: flex; flex-direction: column; gap: 12px; padding: 16px 70px 14px 16px; background: var(--ds-card, #f7f4ee); border-bottom: 1.5px solid var(--ds-line, #d3ccbf); }
.tb-group-t { display: block; margin-bottom: 6px; font: 800 var(--ds-fs-13, 13px) var(--ds-font); color: var(--ds-ink2, #555); }
.tb-group-plays { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-pick { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ds-line, #d3ccbf); border-radius: 0; background: transparent; color: var(--ds-ink, #111); font: 800 var(--ds-fs-14, 14px) var(--ds-font); cursor: pointer; }
.tb-pick.active { background: var(--ds-ink, #0c1630); border-color: var(--ds-ink, #0c1630); color: var(--ds-card, #f7f4ee); }
.tb-group + .tb-group { padding-top: 0; border: 0; }
@media (max-width: 559px) { .tb-overlay { align-items: flex-end; padding: 0; } .tb-dialog { max-height: 96vh; } }

/* Tactical terms read as links, distinct from glossary terms: these open the animated board. */
.term-link--play::after { content: " \25B8"; font-size: .85em; opacity: .7; }

/* The figures read better a little larger on the court. */
.tb-fig { transform: scale(1.2); }

/* On a phone the court is drawn smaller, so its labels are drawn larger. */
@media (max-width: 559px) { .tb-name { font-size: 15px; stroke-width: 10px; } }