:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e3e7e5;
  background: #36393a;
  font-synthesis: none;
  --muted: #a2a9a7;
  --line: #ffffff12;
  --blue: #86b7d1;
  --red: #cf9690;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #d3dfd2; outline-offset: 5px; }
.topbar { height: 76px; flex: 0 0 76px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #2d3031; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: #d3dfd2; font-size: 13px; letter-spacing: 2px; }
.brand svg { width: 29px; height: 29px; fill: currentColor; }
.brand strong { color: #e7eae7; font-weight: 500; }
.page-label { display: flex; align-items: center; gap: 9px; color: #bdc5c1; font-size: 12px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #afc4ae; }
.version { margin-left: 7px; padding: 3px 6px; border: 1px solid #68716a; border-radius: 3px; color: #c4cec5; font-size: 10px; font-variant-numeric: tabular-nums; }
.data-link { text-decoration: none; color: var(--muted); display: flex; align-items: center; gap: 9px; font-size: 12px; }
.data-link:hover { color: #edf1e9; }
.data-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
main { flex: 1; min-height: 0; display: flex; }
.arena { position: relative; flex: 1; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #444849 0, #393d3e 48%, #333637 100%); }
.map-heading { position: absolute; top: 30px; left: 36px; z-index: 2; pointer-events: none; }
.eyebrow { margin: 0 0 10px; font-size: 10px; letter-spacing: 2.4px; color: #a3afa8; font-weight: 600; }
h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 450; letter-spacing: -.6px; }
.map-meta { margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.map-meta span { padding: 0 6px; color: #6e7773; }
.view-controls { position: absolute; top: 32px; right: 36px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.view-button { display: flex; align-items: center; gap: 7px; padding: 9px 11px; color: #a7b0ac; background: #303435; border: 1px solid #ffffff16; border-radius: 5px; font-size: 11px; transition: background .15s, color .15s; }
.view-button:hover { background: #454b49; color: #edf1e9; }
.view-button.active { background: #454f49; border-color: #7e91804a; color: #d4e1d3; }
.view-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.hash { font-size: 16px; line-height: 16px; font-weight: 300; }
.map-viewport { position: absolute; inset: 104px 20px 54px; }
#map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.board-shadow { fill: #181c1b; opacity: .44; }
.board-edge { fill: #262b2b; stroke: #747b76; stroke-width: .8; }
.cell { fill: var(--tile, #666b6a); stroke: var(--tile-line, #3d4342); stroke-width: 1.15; stroke-linejoin: round; outline: none; cursor: pointer; transition: fill .12s; }
.cell.alternate { fill: var(--tile-alternate, #636867); }
.cell[data-side="blue"] { fill: var(--tile-blue, #4e768b); stroke: var(--tile-blue-line, #354c58); }
.cell[data-side="blue"].alternate { fill: var(--tile-blue-alternate, #4a7185); }
.cell[data-side="red"] { fill: var(--tile-red, #916562); stroke: var(--tile-red-line, #654946); }
.cell[data-side="red"].alternate { fill: var(--tile-red-alternate, #8c605e); }
.zones-hidden .cell { fill: var(--tile, #666b6a); stroke: var(--tile-line, #3d4342); }
.zones-hidden .cell.alternate { fill: var(--tile-alternate, #636867); }
.bench-edge { fill: #242b2d; stroke: #53646a; stroke-width: .8; pointer-events: none; }
.cell.bench-cell { stroke-width: 1.5; }
.cell.bench-cell[data-side="blue"] { fill: var(--bench-blue, #3d5662); stroke: #7a9caf; }
.cell.bench-cell[data-side="red"] { fill: var(--bench-red, #624a48); stroke: #b48b84; }
.cell:hover, .cell:focus-visible, .cell.bench-cell:hover, .cell.bench-cell:focus-visible { fill: var(--tile-hover, #919a94); stroke: var(--tile-hover-line, #d5ded3); stroke-width: 1.8; }
.cell.mirrored, .cell.bench-cell.mirrored { stroke: #e0d6ac; stroke-width: 2; stroke-dasharray: 4 3; }
.cell.selected, .cell.bench-cell.selected { fill: var(--tile-selected, #a5ae99); stroke: var(--tile-selected-line, #e2ead5); stroke-width: 2.5; }
.cell-label { fill: #e1e5df; font-size: 11px; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0; pointer-events: none; }
.ids-visible .cell-label { opacity: .8; }
.bench-number { fill: #c4cfcf; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; opacity: .65; pointer-events: none; }
.ids-visible .bench-number { opacity: 0; }
.occupied-label, .ids-visible .occupied-label { opacity: 0; }
.placing-unit .cell.legal-drop { stroke: #94b8c5; stroke-width: 1.6; }
.placing-unit .cell.drop-valid { fill: #7c9c8c; stroke: #d9edba; stroke-width: 2.7; }
.placing-unit .cell.drop-invalid { stroke: #f0a79c; stroke-width: 2.7; }
.unit { cursor: grab; outline: none; touch-action: none; }
.unit-hit-area { fill: transparent; pointer-events: all; }
.unit-art, .unit-name { pointer-events: none; }
.unit-art { filter: drop-shadow(0 2px 2px #1119); }
.unit-name { fill: #e9e8c6; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; opacity: 0; }
.unit:hover .unit-name, .unit:focus-visible .unit-name, .placing-unit .unit-name { opacity: 1; }
.dragging-unit, .dragging-unit .unit { cursor: grabbing; }
.unit.dragging .unit-art { filter: drop-shadow(0 7px 4px #1118); }
.team-marker text { fill: currentColor; font-size: 10px; letter-spacing: 1.8px; font-weight: 550; }
.team-marker path { fill: currentColor; }
.team-one { color: #94bbcc; }
.team-two { color: #d2a29b; }
#bench-labels { pointer-events: none; }
.selection-readout { position: absolute; bottom: 22px; left: 36px; display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 11px; color: #aeb9b2; }
.selection-readout.has-selection { color: #d3dcd4; }
.readout-symbol { color: #b4c0b3; font-size: 21px; line-height: 20px; }
#clear-selection { color: #d0d9d0; background: #ffffff0d; border: 1px solid #ffffff12; border-radius: 3px; width: 24px; height: 24px; font-size: 16px; padding: 0; margin-left: 3px; }
#clear-selection[hidden] { display: none; }
.map-note { position: absolute; bottom: 25px; right: 36px; margin: 0; color: #8c9791; font-size: 11px; }
.bottombar { min-height: 74px; flex: 0 0 auto; padding: 20px 36px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #2d3031; }
.legend { display: flex; align-items: center; gap: 32px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #d6dcd8; }
.legend-item b { font-weight: 400; color: #929e97; margin-left: 7px; }
.swatch { width: 11px; height: 11px; display: inline-block; transform: rotate(45deg) scaleY(.85); border: 1px solid #ffffff26; border-radius: 1px; }
.swatch.blue { background: #6592a8; }
.swatch.neutral { background: #747d76; }
.swatch.red { background: #b17e76; }
.footer-note { display: flex; gap: 9px; align-items: center; font-size: 11px; color: #a3aea7; }
.symmetry-icon { font-size: 19px; color: #bac8b9; }
.noscript { position: fixed; top: 45%; left: 0; right: 0; text-align: center; }
@media (max-width: 850px) {
  .topbar { padding: 0 22px; height: 65px; flex-basis: 65px; }
  .map-heading { top: 24px; left: 22px; }
  h1 { font-size: 21px; }
  .view-controls { top: 118px; left: 22px; right: auto; }
  .map-viewport { inset: 165px 8px 62px; }
  .map-note { display: none; }
  .selection-readout { left: 22px; right: 22px; bottom: 22px; }
  .bottombar { padding: 18px 22px; min-height: 70px; }
  .legend { gap: 22px; }
  .footer-note { display: none; }
  .brand { font-size: 11px; letter-spacing: 1.3px; gap: 9px; }
  .page-label { font-size: 11px; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 18px; }
  .brand svg { width: 24px; height: 24px; }
  .page-label { display: none; }
  .data-link { font-size: 11px; }
  .map-heading { left: 20px; }
  h1 { font-size: 24px; }
  .map-meta { font-size: 10px; }
  .view-controls { left: 20px; gap: 8px; }
  .view-button { padding: 10px 12px; font-size: 11px; }
  .map-viewport { inset: 170px 1px 74px; }
  .selection-readout { left: 20px; font-size: 10px; line-height: 1.7; }
  .legend { width: 100%; justify-content: space-between; gap: 8px; }
  .legend-item { gap: 8px; font-size: 10px; }
  .legend-item b { display: block; margin: 5px 0 0; font-size: 10px; }
  .bottombar { padding: 17px 20px; }
  .team-marker text { font-size: 15px; letter-spacing: 1.2px; }
  .cell-label { font-size: 18px; }
}
@media (max-height: 650px) and (min-width: 700px) {
  .topbar { height: 54px; flex-basis: 54px; }
  .map-heading { top: 18px; }
  .eyebrow { margin-bottom: 5px; }
  h1 { font-size: 20px; }
  .map-meta { margin-top: 6px; }
  .view-controls { top: 20px; left: auto; right: 25px; }
  .map-viewport { inset: 85px 20px 43px; }
  .bottombar { min-height: 55px; padding-top: 12px; padding-bottom: 12px; }
  .selection-readout { bottom: 12px; }
  .map-note { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }