:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; color: #e8edf1; background: #10151c; --blue: #98d7ff; --gold: #f3c97b; --south-color:#98d7ff; --north-color:#9ce0a7; --muted: #a9b6c3; --line: #35414f; --panel: #1a222d; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .42; }
button:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.site-header { margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 16px; border-bottom: 1px solid #27313e; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: flex; align-items: center; gap: 2px; color: var(--blue); border: 1px solid #48576a; border-radius: 10px; padding: 8px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark span { color: var(--gold); font-weight: 400; }
h1 { margin: 0; font-size: 1.125rem; letter-spacing: -.025em; } .brand p { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.header-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.roster-link { display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.roster-question { display:inline-grid; place-items:center; width:19px; height:19px; border:1px solid currentColor; border-radius:50%; font-size:.8rem; line-height:1; }
.roster-inline { margin-top:10px; color:var(--blue); font-size:.875rem; min-height:32px; }
.roster-link:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.local-label { color: var(--muted); font-size: .875rem; margin-right: 12px; }
.button { min-height: 42px; border: 1px solid #405064; background: #25313f; color: #e8edf1; border-radius: 8px; padding: 9px 14px; font-size: .875rem; font-weight: 600; }
.button:hover:not(:disabled) { background: #334356; }
.button.quiet { background: transparent; }
.button.primary { background: var(--blue); color: #0c2130; border-color: var(--blue); }
.button.primary:hover:not(:disabled) { background: #c0e6ff; }
.game-layout { margin: auto; padding: 8px 16px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 440px); gap: 18px 20px; align-items: start; }
.battlefield { min-width: 0; width: 100%; }
.board-heading, .board-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 4px 22px; }
.board-footer { margin-top: 4px; margin-bottom: 0; }
.army-heading { font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.army-heading > span:last-child { color: var(--muted); font-size: .75rem; font-weight: 400; margin-left: 5px; }
.team-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.north { --team: var(--north-color); } .south { --team: var(--south-color); }
.army-blue { --team:#98d7ff; } .army-green { --team:#9ce0a7; } .army-red { --team:#ffaaa2; }
.army-heading { color: var(--team); }
.board-spec { font-size: .75rem; color: var(--muted); }
.board-frame { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto 18px; }
.ranks { display: grid; grid-template-rows: repeat(var(--board-size, 13), 1fr); align-items: center; color: var(--muted); font-size: .75rem; text-align: left; }
.files { grid-column: 2; display: grid; grid-template-columns: repeat(var(--board-size, 13), 1fr); align-items: end; text-align: center; color: var(--muted); font-size: .75rem; }
.board { display: grid; grid-template-columns: repeat(var(--board-size, 13), minmax(0, 1fr)); grid-template-rows: repeat(var(--board-size, 13), minmax(0, 1fr)); aspect-ratio: 1; border: 1px solid #576676; background: #576676; gap: 1px; position: relative; }
.square { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; position: relative; display: flex; justify-content: center; align-items: center; background: #273440; color: #ecf0f4; }
.square.light { background: #303f4c; }
.square.home-north { background: #4c4534; } .square.home-north.light { background: #554d39; }
.square.home-south { background: #25495e; } .square.home-south.light { background: #2c536a; }
.square.island { background: #345c50; } .square.island.light { background: #3d685a; }
.square.edge-top { border-top: 2px solid #90b7a5; } .square.edge-bottom { border-bottom: 2px solid #90b7a5; }
.square.edge-left { border-left: 2px solid #90b7a5; } .square.edge-right { border-right: 2px solid #90b7a5; }
.square.home-north[class*='edge-'] { border-color:var(--north-color); } .square.home-south[class*='edge-'] { border-color:var(--south-color); }
.square:hover { filter: brightness(1.17); }
.square.selected { z-index: 2; }
.square.selected::after { content:''; position:absolute; inset:1px; border:2px solid #f3eedc; z-index:4; pointer-events:none; }
.square.last-action { background-image: linear-gradient(#ffffff16, #ffffff16); }
.token { width: 98%; height: 98%; border-radius: 20%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg,#25384599,#13202a66); color: #ecf3ff; border: 1px solid var(--team); box-shadow: 0 2px 3px #0006; font-weight: 750; line-height: 1; position: relative; z-index: 1; pointer-events:none; }
.sprite-window { position:absolute; inset:0; overflow:hidden; border-radius:inherit; transform:scaleX(var(--facing,1)); }
.unit-sprite { visibility:hidden; position:absolute; inset:0; background-size:var(--attack-grid,200% 200%); background-position:0 0; background-repeat:no-repeat; image-rendering:auto; transform:translate(var(--display-x,0%),var(--display-y,0%)) scale(var(--display-zoom,1)); transform-origin:50% 96.5%; }
.token.soldier { --attack-grid:400% 200%; --motion-grid:800% 200%; --idle-animation:footman-idle; }
.token.soldier .unit-sprite { inset:-50%; }
.death-sprite { visibility:hidden; position:absolute; inset:0 -50%; background-size:400% 200%; background-position:0 0; background-repeat:no-repeat; image-rendering:auto; }
.preview-dying .sprite-window { overflow:visible; }
.preview-dying .unit-letter { visibility:hidden; }
.token.archer { --idle-x-1:.71875%; --idle-x-2:2.08125%; --idle-x-3:2.959375%; }
.token.assassin { --idle-x-1:-.653125%; --idle-x-2:.81875%; --idle-x-3:.0625%; }
.token.rider { --idle-x-2:-2.065625%; }
.token.commander { --idle-x-1:.178125%; --idle-x-2:1.253125%; --idle-x-3:-.403125%; }
.token.defender { --idle-animation:shield-idle; --idle-x-3:.18125%; }
.token.catapult { --idle-x-1:-.1375%; --idle-x-2:-.109375%; --idle-x-3:-.240625%; --idle-y:-.3125%; }
/* One proportional camera for every native state. Expanded attack drawings
   have a 160px transparent border around the existing 320px body camera. */
.token.expanded-motion { --motion-grid:800% 200%; }
.token.expanded-idle { --idle-animation:footman-idle; }
.token.expanded-attack { --attack-grid:400% 200%; }
.token.expanded-attack .unit-sprite { inset:-50%; }
.token:not(.race-unit) .sprite-window { overflow:visible; }
.token.expanded-attack .unit-sprite,.token.soldier .unit-sprite { transform:translate(calc(var(--display-x,0%) / 2),calc(var(--display-y,0%) / 2)) scale(var(--display-zoom,1)); transform-origin:50% 73.25%; }
.token:not(.race-unit) .death-sprite { transform:translate(calc(var(--display-x,0%) / 2),var(--display-y,0%)) scale(var(--display-zoom,1)); transform-origin:50% 96.5%; }
.unit-letter { position:absolute; left:-1px; bottom:-1px; padding:1px 2px; min-width:9px; border-radius:2px; background:#0b1119e6; color:var(--team); font-size:12px; z-index:2; }
.token.portrait { width:160px; height:160px; border-width:2px; }
.token.portrait .unit-letter { font-size:16px; padding:3px 4px; }
.selection-art { margin-top:10px; }
.selection-art[hidden] { display:none; }
.rule-piece { display:grid; grid-template-columns:140px minmax(0,1fr); gap:18px; align-items:start; }
.rule-art .token.portrait { width:140px; height:140px; }
.rule-art { display:grid; gap:8px; justify-items:center; }
.rule-art .button { font-size:.75rem; padding:6px 10px; min-height:32px; }
.animation-hidden { visibility:hidden; }
/* Register the idle poses to the planted front boot/hoof/wheel in 320px cells.
   Individual translate preserves the existing camera scale and facing. */
@keyframes unit-idle {
  0%,100% { background-position:0 0; translate:0 0; }
  25% { background-position:33.333333% 0; translate:calc(var(--idle-x-1,0%) * var(--motion-zoom,1)) var(--idle-y,0%); }
  50% { background-position:66.666667% 0; translate:calc(var(--idle-x-2,0%) * var(--motion-zoom,1)) var(--idle-y,0%); }
  75% { background-position:100% 0; translate:calc(var(--idle-x-3,0%) * var(--motion-zoom,1)) var(--idle-y,0%); }
}
@keyframes footman-idle {
  0%,100% { background-position:0 0; translate:0 0; }
  12.5% { background-position:14.285714% 0; }
  25% { background-position:28.571429% 0; }
  37.5% { background-position:42.857143% 0; }
  50% { background-position:57.142857% 0; }
  62.5% { background-position:71.428571% 0; }
  75% { background-position:85.714286% 0; }
  87.5% { background-position:100% 0; }
}
/* The other shield poses push the whole forearm/stance forward. These two
   retain the ready silhouette while preserving a small drawn movement. */
@keyframes shield-idle {
  0%,100% { background-position:0 0; translate:0 0; }
  50% { background-position:100% 0; translate:var(--idle-x-3) 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .square.selected:not(.command-ally) > .token:not(.race-unit) .motion-sprite,
  #selection-art .token:not(.race-unit):not([data-piece-id=""]) .motion-sprite,
  .art-card[aria-pressed="true"] .token:not(.race-unit) .motion-sprite { animation:var(--idle-animation,unit-idle) 2134ms step-end infinite; animation-delay:var(--idle-delay,0ms); }
}
.art-card .preview-moving .motion-sprite { animation:none; translate:0 0; }
.preview-attacking .sprite-window, .battle-unit .sprite-window { overflow:visible; }
.battle-effects { position:absolute; inset:0; z-index:20; pointer-events:none; overflow:visible; }
.battle-unit, .battle-projectile, .battle-pulse, .battle-spark { position:absolute; display:block; transform:translate(-50%,-50%); pointer-events:none; }
.battle-unit .token { width:100%; height:100%; }
.battle-unit .unit-letter { display:none; }
.battle-unit { z-index:2; }
.battle-casualty { z-index:1; }
.battle-pulse, .battle-projectile, .battle-spark { z-index:3; }
.battle-trail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.battle-trail polyline { stroke:var(--team); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3 7; }
.battle-spark { background:var(--team); border-radius:30%; box-shadow:0 0 6px var(--team); }
.move-impact { border-radius:50%!important; background:transparent!important; border-color:#d1edff99!important; box-shadow:0 0 8px #c0e6ff44!important; }
.battle-pulse { border-radius:25%; background:#fff1ce66; border:2px solid #ffd58c; box-shadow:0 0 10px #ffda9866; }
.blast-impact { background:radial-gradient(circle,#fff2a3,#f78b29aa 40%,#b63b2b66 65%,transparent 75%); border-color:#f9c66a; }
.slash-impact { background:linear-gradient(135deg,transparent 42%,#ffeedacc 46%,#ffba8766 56%,transparent 60%); border-color:#ffb58b; }
.arrow-impact { background:#fff0cc55; border-color:#ffdb95; }
.holy-impact { background:radial-gradient(circle,#fffce9bb,#ffdd6655 60%,transparent 75%); border-color:#fff0a8; }
.charge-impact { background:#d8e6ff44; border-color:#e1edff88; }
.battle-projectile.arrow { color:#ffe4b3; height:auto!important; filter:drop-shadow(0 1px 2px #000); }
.battle-projectile.arrow svg { width:100%; display:block; }
.battle-projectile.stone { border-radius:35%; background:linear-gradient(135deg,#e5dac0,#8e8371); border:2px solid #453d35; box-shadow:0 0 5px #f4b47788; }
.token.commander { border-radius: 25%; border-width: 2px; }
.token.assassin { font-style: italic; }
.token.catapult { border-radius: 14%; border-style: double; border-width: 2px; }
.token.used { opacity: .48; }
.used-mark { position: absolute; right: -4px; bottom: -3px; font-size: .75rem; line-height: 1; background: #14202b; color: #ecf0f4; border-radius: 50%; padding: 1px; }
.square.legal-move::after { content: ''; width: 21%; height: 21%; border-radius: 50%; background: #dcf6ff; position: absolute; box-shadow: 0 0 0 3px #081d2540; }
/* Keep action cues at the tile edges, outside the sprite's silhouette. */
.square.legal-capture::after, .square.legal-shoot::after, .square.hint-attack::before, .square.command-ally::after, .square.command-chosen::after, .legend-capture {
  --corner-length:clamp(5px,18%,11px); --corner-width:2px;
  background:
    linear-gradient(currentColor,currentColor) left top / var(--corner-length) var(--corner-width),
    linear-gradient(currentColor,currentColor) left top / var(--corner-width) var(--corner-length),
    linear-gradient(currentColor,currentColor) right top / var(--corner-length) var(--corner-width),
    linear-gradient(currentColor,currentColor) right top / var(--corner-width) var(--corner-length),
    linear-gradient(currentColor,currentColor) left bottom / var(--corner-length) var(--corner-width),
    linear-gradient(currentColor,currentColor) left bottom / var(--corner-width) var(--corner-length),
    linear-gradient(currentColor,currentColor) right bottom / var(--corner-length) var(--corner-width),
    linear-gradient(currentColor,currentColor) right bottom / var(--corner-width) var(--corner-length);
  background-repeat:no-repeat;
}
.square.legal-capture::after, .square.legal-shoot::after { content:''; position:absolute; inset:1px; color:#ff9b91; z-index:3; pointer-events:none; filter:drop-shadow(0 1px 0 #101820); }
.square.command-ally::after, .square.command-chosen::after { content:''; position:absolute; inset:2px; color:var(--gold); z-index:4; pointer-events:none; filter:drop-shadow(0 1px 1px #101820); }
.square.command-chosen::after { border:0; border-radius:0; --corner-width:3px; --corner-length:30%; }
.square.command-source.selected::after { border-color:#98d7ff; border-style:dashed; }
.square.command-destination.legal-move::after { background:var(--gold); border-radius:2px; transform:rotate(45deg); }
.order-guide { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px 22px; padding:10px 14px; border:1px solid #836b40; border-left:4px solid var(--gold); border-radius:6px; background:#28251e; }
.order-guide strong { color:#ffe1a9; font-size:1rem; }
.order-guide p { margin:4px 0 0; font-size:.875rem; line-height:1.4; color:#e2d6c0; }
.order-guide .button { flex-shrink:0; }
.order-button { border-color:#836b40; color:#ffe1a9; }
.undo-note { grid-column:1 / -1; font-size:.825rem; line-height:1.4; color:var(--muted); margin:8px 0 0; }
.button.danger { background:#873a36; border-color:#d88178; color:#fff; }
@media(max-width:600px) { .order-guide { align-items:flex-start; flex-direction:column; margin-left:0; } }
.square.legal-jump::after { content:''; position:absolute; width:22%; height:22%; border:2px solid #dcf6ff; transform:rotate(45deg); z-index:3; pointer-events:none; }
.square.setup-target { box-shadow: inset 0 0 0 1px #edf7ff55; }
.square.hint-move::after { content: ''; position: absolute; width: 10%; height: 10%; min-width: 3px; min-height: 3px; border-radius: 50%; background: #dce6ef77; z-index: 3; pointer-events: none; }
.square.hint-attack::before { content:''; position:absolute; inset:3px; color:#ffaca36e; --corner-width:1px; z-index:3; pointer-events:none; }
.square.danger-preview { background-image: linear-gradient(#fa9c7040,#fa9c7040); box-shadow: inset 0 0 0 2px #ffb78cc0; }
.board-key { color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: .75rem; }
.legend-move { width: 7px; height: 7px; border-radius: 50%; background: #dcf6ff; }
.legend-capture { width:13px; height:13px; color:#ff9b91; --corner-length:5px; margin-left:6px; }
.game-sidebar { display: grid; gap: 12px; min-width: 0; }
.turn-card { position:relative; padding: 16px; border: 1px solid #405165; border-top: 3px solid var(--team); border-radius: 12px; background: var(--panel); }
.turn-card > .help-button { position:absolute; top:9px; right:9px; }
.turn-card .action-display { margin-right:27px; }
.turn-card.draw { --team: #ced2db; }
.eyebrow { font-size: .75rem; color: var(--muted); font-weight: 600; letter-spacing: .1em; }
h2 { font-size: 1.4rem; font-weight: 600; margin: 9px 0 18px; letter-spacing: -.025em; }
.action-display { display: flex; gap: 14px; align-items: center; }
#actions-left { font-size: 3.4rem; line-height: 1; color: var(--team); font-weight: 600; font-variant-numeric: tabular-nums; }
.action-display strong { font-size: .875rem; font-weight: 500; }
.action-pips { display: flex; gap: 5px; margin-top: 9px; }
.pip { width: 21px; height: 5px; background: var(--team); border-radius: 2px; }.pip.spent { opacity: .18; }
#end-turn { width: 100%; background: var(--team); border-color: var(--team); color: #14212c; }
.undo-button { width: 100%; border: 0; background: transparent; color: var(--muted); margin-top: 5px; }
.turn-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; }
  .turn-card .eyebrow { grid-column:1; }
  .turn-card h2 { grid-column:1; margin:0; font-size:1.2rem; }
  .turn-card .action-display { grid-column:2; grid-row:1 / 3; gap:8px; }
  #actions-left { font-size:2.6rem; }
  .action-pips { margin-top:5px; }
  .turn-card #end-turn, .turn-card #back-setup, .turn-card .undo-button { grid-column:1 / -1; }
  .turn-card .undo-button { margin:0; min-height:30px; padding:4px 10px; }
h3 { font-size: 1rem; font-weight: 600; margin: 8px 0; }
.sidebar-card { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#1a232db3; }
.sidebar-card[hidden] { display:none; }
.selection-content { display:grid; gap:14px; }
.selection-copy { min-width:0; }
.selection-copy h3 { margin:0; font-size:1.2rem; text-align:center; }
.selection-content .selection-art { width:100%; max-width:400px; margin:0 auto; }
#selection-art .token.portrait { width:100%; height:auto; aspect-ratio:1; border:0; border-radius:0; background:transparent; box-shadow:none; }
#selection-art .unit-letter { display:none; }
.selection-panel .selection-position { margin:6px 0 0; text-align:center; font-size:1rem; }
#selection-description:not([hidden]):not(:empty) { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.selection-content p:empty, .selection-content p[hidden] { display:none; }
.selection-panel p { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: 8px 0; }
.piece-rule { display:block; margin:0 0 8px; line-height:1.45; }
.piece-rule:last-child { margin-bottom:0; }
.unit-rules { margin:10px 0; padding-left:20px; font-size:.875rem; line-height:1.55; }
.unit-rules li { padding-left:2px; margin-bottom:9px; }
.unit-rules li:last-child { margin-bottom:0; }
.unit-rules strong { color:#eef4f8; }
.piece-rule strong { color:#e8edf1; font-size:inherit; }
.piece-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.piece-actions .active { background: #d4e8f8; color: #14212c; border-color: #d4e8f8; }
.ability-badge { padding: 6px 9px; border: 1px solid #607285; border-radius: 5px; font-size: .875rem; }
.ability-badge.spent { color: var(--muted); opacity: .65; }
.piece-actions p { margin: 0; }
.piece-actions:empty { display:none; }
.hint-key { color: #bbc4d0; }
.recruit-panel[hidden] { display: none; }
.recruit-panel p { font-size: .875rem; color: var(--muted); line-height: 1.5; margin: 10px 0; }
.recruit-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.recruit-options .button { padding: 8px; text-align: left; }
.recruit-options .active { border-color: var(--blue); color: var(--blue); background: #2c4558; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap:8px; margin-bottom:12px; }
.section-heading h3 { margin:0; }
.section-heading span { color: var(--muted); font-size: .75rem; }
.help-button { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:0; border:1px solid #5e6c7b88; border-radius:50%; background:transparent; color:#9caabb; font:inherit; font-size:.875rem; font-weight:500; line-height:1; cursor:pointer; }
.help-button:hover, .help-button[aria-expanded="true"] { border-color:#9baec4; color:#edf4fc; background:#304154; }
.help-button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.help-popover { position:fixed; inset:auto; margin:0; width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; border:1px solid #64788d; border-radius:10px; background:#202d3b; color:#d2dde9; box-shadow:0 8px 30px #0008; font-size:1rem; line-height:1.55; }
.help-popover > strong { color:#f1f5fa; }
.help-popover p { margin:10px 0 0; }
.help-popover .piece-rule strong { color:#f1f5fa; }
.territory-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; font-size: .875rem; border-bottom: 1px solid #283340; }
.territory-row:last-child { border-bottom:0; padding-bottom:0; }
.territory-row:first-child { padding-top:0; }
.territory-state { color: var(--muted); font-size: .875rem; text-align: right; }.territory-state.north, .territory-state.south { color: var(--team); }
.territory-state.contested { color: #ffa69c; }
.history-panel { color: var(--muted); font-size: .875rem; }.history-panel summary { cursor: pointer; }.history-panel ol { padding-left: 20px; line-height: 1.65; font-size: .75rem; }
.game-message { grid-column: 1 / -1; margin: 0; padding: 11px 14px; border-left: 2px solid #6b8299; background: #1a242f; border-radius: 0 6px 6px 0; color: #d1dee9; font-size: .875rem; line-height: 1.5; }
.game-message.error { border-color: #ff9b91; }
.game-message[hidden] { display:none; }
dialog { width: min(600px, calc(100% - 32px)); max-height: 85vh; overflow: auto; border: 1px solid #536478; border-radius: 14px; background: #1a222d; color: #e8edf1; padding: 26px; box-shadow: 0 16px 70px #0008; }
dialog::backdrop { background: #000a; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 10px; }.dialog-heading h2 { margin: 0; }
dialog p, dialog li { line-height: 1.7; font-size: 1rem; color: #c8d4df; }dialog h3 { margin-top: 22px; }.dialog-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.rule-piece { border-top: 1px solid var(--line); padding: 12px 0; }.rule-piece strong { color: #e8edf1; }.rule-piece p { margin: 7px 0; font-size: .875rem; }
/* Let the board grow with the window; long piece descriptions scroll beside it. */
@media (min-width: 1050px) and (min-height: 600px) { .game-layout { grid-template-columns: minmax(0, calc(100dvh - 104px)) clamp(320px, 28vw, 440px); justify-content: center; } .game-sidebar { max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; padding-bottom: 6px; } }
@media (max-width: 950px) { .site-header { padding: 18px 20px; }.local-label { display: none; }.game-layout { padding: 20px; gap: 20px; grid-template-columns: minmax(0, 1fr) 250px; }.turn-card { padding: 16px; }.board-key { display: none; } }
@media (max-width: 700px) { .site-header { padding: 14px; gap: 12px; }.brand-mark { display: none; }.header-actions { gap: 6px; }.header-actions .button { padding: 8px 10px; font-size: .75rem; }.game-layout { display: flex; flex-direction: column; padding: 16px 10px; gap: 20px; }.battlefield { width: 100%; }.game-sidebar { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; }.turn-card { grid-row: span 2; }.territories-panel { grid-column: 1 / -1; }.history-panel { grid-column: 1 / -1; }.game-message { order: -1; margin: 0; width: 100%; }.token { font-size: clamp(.75rem, 3vw, 1.1rem); border-width: 1px; width: 82%; height: 82%; }.token.commander { border-width: 2px; }.used-mark { font-size: .625rem; }.army-heading > span:last-child { display: none; }.board-heading, .board-footer { margin-left: 20px; }.selection-panel p { font-size: .875rem; }.piece-actions .button { padding: 7px 10px; }.board-frame { grid-template-columns: 18px minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { .token { transition: opacity .14s; } .button { transition: background .14s; } }
@media (max-width: 700px) { .recruit-panel { grid-column: 1 / -1; } .turn-card { grid-row: auto; } }
@media (max-width: 700px) { .square > .token { width:98%; height:98%; border-width:1px; } .square > .token.catapult { border-width:2px; } .unit-letter { font-size:10.5px; } .rule-piece { grid-template-columns:100px minmax(0,1fr); gap:12px; } .rule-art .token.portrait { width:100px; height:100px; } }

/* Separate drawn idle/gait frames keep feet grounded; attacks retain their own sheet. */
.motion-sprite { position:absolute; inset:0; background-size:var(--motion-grid,400% 200%); background-position:0 0; background-repeat:no-repeat; image-rendering:auto; transform:translate(var(--display-x,0%),var(--display-y,0%)) scale(var(--display-zoom,1)); transform-origin:50% 96.5%; }
.preview-attacking .unit-sprite { visibility:visible; }
.preview-attacking .motion-sprite { visibility:hidden; }
.token.opponent { opacity:.76; border-style:dashed; background:#101820a3; }
.token.opponent .sprite-window { filter:saturate(.88) brightness(.94); }
.token.shield-protected { box-shadow:inset 0 0 7px color-mix(in srgb,var(--team) 35%,transparent),0 0 5px color-mix(in srgb,var(--team) 45%,transparent); }
.token.commander { --hero-glow:0 0 9px color-mix(in srgb,var(--team) 40%,transparent); box-shadow:var(--hero-glow),inset 0 0 5px color-mix(in srgb,var(--team) 14%,transparent); }
.token.commander.shield-protected { box-shadow:var(--hero-glow),inset 0 0 7px color-mix(in srgb,var(--team) 35%,transparent); }
.shield-mark { position:absolute; right:-1px; top:-1px; width:clamp(9px,1.2vw,14px); height:clamp(11px,1.4vw,16px); padding:1px; border-radius:3px; color:var(--team); background:#10151ce6; z-index:3; }
.shield-mark svg { display:block; width:100%; height:100%; }
.token.portrait .shield-mark { width:20px; height:24px; padding:2px; }
.protection-note { color:#c7e8fb!important; font-size:.875rem; }
.commander-panel[hidden] { display:none; }
.commander-panel h3 { margin:0 0 12px; font-size:1rem; }
.commander-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.commander-choice { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 8px; border:1px solid #536579; border-radius:10px; background:var(--panel); color:inherit; }
.commander-choice[aria-pressed="true"] { outline:2px solid var(--blue); outline-offset:1px; background:#253644; }
.commander-choice:hover { background:#2c3c4b; }
.commander-choice .token.portrait { width:88px; height:88px; }
.commander-choice strong { font-size:.875rem; }
.commander-choice > span:last-child { font-size:.825rem; line-height:1.35; color:var(--muted); }
@media(max-width:700px) { .commander-panel { grid-column:1 / -1; } }
.square:hover > .token.opponent, .square.selected > .token.opponent, .square.legal-capture > .token.opponent, .square.legal-shoot > .token.opponent { opacity:1; }
.token.rogue-cloaked { opacity:.48; border-style:dotted; background:#19334455; box-shadow:inset 0 0 10px #9ae8fb28; }
.token.rogue-spotted, .square:hover > .token.rogue-spotted, .square.legal-capture > .token.rogue-spotted, .square.legal-shoot > .token.rogue-spotted { opacity:.48; border:1px dotted #c2f4ff; background:#7ad9fa12; box-shadow:0 0 8px #b5ebff55; }
.token.rogue-spotted .sprite-window { filter:grayscale(.6) brightness(1.4); }
.token.rogue-spotted::after { content:''; position:absolute; inset:-2px; border-radius:inherit; border:1px solid #c2f4ff66; pointer-events:none; }
.stealth-note { color:#acd9e5; }
.stealth-echo { position:absolute; inset:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference) {
  .token.assassin { transition:opacity .4s,background .4s,box-shadow .4s; }
  .token.rogue-spotted::after { animation:rogue-shimmer 1.8s ease-in-out infinite; }
  .square > .token.assassin:not(.rogue-cloaked):not(.stealth-echo) { animation:rogue-appear .4s ease-out; }
  .token.stealth-echo { animation:rogue-vanish .42s ease-in forwards; }
}
@keyframes rogue-shimmer { 50% { opacity:.3; box-shadow:0 0 6px #c2f4ff66; } }
@keyframes rogue-appear { from { opacity:0; filter:blur(2px); } }
@keyframes rogue-vanish { to { opacity:0; filter:blur(3px); } }
.square.selected > .token.opponent .sprite-window, .square.legal-capture > .token.opponent .sprite-window, .square.legal-shoot > .token.opponent .sprite-window { filter:none; }
@media(max-width:480px) { .site-header { align-items:flex-start; gap:8px; } .header-actions { max-width:220px; gap:5px; } .header-actions .button { padding:7px 8px; min-height:36px; } }

/* The audio panel floats above the board, without taking space away from it. */
.audio-controls { position:relative; }
.audio-controls > summary { display:flex; align-items:center; list-style:none; cursor:pointer; }
.audio-controls > summary::-webkit-details-marker { display:none; }
.audio-controls[open] > summary { border-color:var(--blue); color:var(--blue); }
.audio-panel { position:absolute; z-index:30; top:calc(100% + 10px); right:0; width:300px; max-width:calc(100vw - 28px); padding:18px; border:1px solid #52667c; border-radius:12px; background:#1a222dfc; box-shadow:0 12px 40px #0009; }
.audio-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.8rem; }
.audio-row + .audio-row { margin-top:18px; }
.audio-row output { color:var(--blue); font-variant-numeric:tabular-nums; }
#music-volume { width:100%; accent-color:var(--blue); margin:12px 0 4px; cursor:pointer; }
#music-volume:focus-visible { outline:2px solid white; outline-offset:4px; }
.music-status { color:var(--muted); font-size:.75rem; line-height:1.4; margin:6px 0 16px; }
.effects-row { border-top:1px solid var(--line); padding-top:14px; }
.music-credit { font-size:.65rem; color:var(--muted); display:block; margin-top:14px; }
@media(max-width:480px) { .audio-panel { position:fixed; top:90px; right:14px; } }

/* Environment art stays behind translucent, consistently legible territory tiles. */
body[data-environment="forest"] { background:#0d1714; --panel:#182720; --line:#354d43; }
body[data-environment="wasteland"] { background:#1a1411; --panel:#2a211b; --line:#5a4634; }
.board { background-image:var(--terrain); background-size:cover; gap:0; border-color:#849080; }
.square { background:rgba(12,24,31,.20); box-shadow:inset -1px -1px 0 #cbdcd53a; }
.square.light { background:rgba(198,212,203,.07); }
.square.home-north, .square.home-north.light { background:color-mix(in srgb,var(--north-color) 25%,transparent); }
.square.home-south, .square.home-south.light { background:color-mix(in srgb,var(--south-color) 25%,transparent); }
.square.island, .square.island.light { background:rgba(83,160,129,.31); }
body[data-environment="forest"] .square.island { background:rgba(117,97,172,.38); border-color:#c1b4e7; }
body[data-environment="wasteland"] .square.island { background:rgba(75,115,105,.45); border-color:#b7c4a7; }
.board .square.occupation-south { border-color:var(--south-color); }
.board .square.occupation-north { border-color:var(--north-color); }
.board .square.occupation-contested { border-color:#edbd82; }
.board .square.aura-south { background-image:linear-gradient(color-mix(in srgb,var(--south-color) 14%,transparent),color-mix(in srgb,var(--south-color) 14%,transparent)); }
.board .square.aura-north { background-image:linear-gradient(color-mix(in srgb,var(--north-color) 14%,transparent),color-mix(in srgb,var(--north-color) 14%,transparent)); }
.board .square.aura-south.aura-north { background-image:linear-gradient(#e5e2c82b,#e5e2c82b); }
.territory-effect { position:absolute; z-index:0; box-sizing:border-box; border:2px solid var(--team); background:linear-gradient(90deg,color-mix(in srgb,var(--team) 12%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--team) 12%,transparent)); box-shadow:inset 0 0 18px color-mix(in srgb,var(--team) 25%,transparent),0 0 10px color-mix(in srgb,var(--team) 22%,transparent); pointer-events:none; }
.territory-effect.contested { --team:#edbd82; border-style:dashed; }
.territory-effect > span { position:absolute; top:4px; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--team); background:#10151ced; border-radius:4px; padding:3px 7px; font-size:clamp(10px,1.1vw,13px); font-weight:650; box-shadow:0 1px 4px #0006; }
.level-options { padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.level-choice { border:1px solid #53616b; border-radius:10px; overflow:hidden; position:relative; cursor:pointer; background:#18232b; }
.level-choice:has(input:checked) { outline:2px solid var(--blue); outline-offset:2px; }
.level-choice input { position:absolute; left:12px; top:12px; width:20px; height:20px; accent-color:#98d7ff; }
.level-choice img { display:block; width:100%; aspect-ratio:2.2; object-fit:cover; }
.level-choice > span { display:block; padding:9px; }
.level-choice strong { font-size:.82rem; }
.level-choice small { display:block; color:var(--muted); font-size:.72rem; margin:5px 0 0; }
#restart-dialog { width:min(650px,calc(100vw - 24px)); }
.track-credits { font-size:.8rem; color:var(--muted); line-height:1.5; margin-top:12px; }
.track-credits summary { cursor:pointer; }
.track-credits ul { padding-left:17px; margin:8px 0; }
.track-credits li { margin:8px 0; }
.track-credits a { color:#a9d8ef; }

body { min-height:100dvh; }
  .turn-card[data-phase="setup"] .eyebrow { grid-column:1 / -1; }
  .turn-card[data-phase="setup"] .action-display { grid-row:2; }
  .turn-card[data-phase="setup"] .action-display strong { display:block; max-width:95px; }

/* Army identity is in the clothing as well as the frame and home territory. */
.crown-mark { width:15px; height:15px; display:block; }
.token.portrait .crown-mark { width:23px; height:23px; }
.army-turn { border:1px solid color-mix(in srgb,currentColor 55%,transparent); border-radius:4px; padding:2px 5px; font-size:.65rem; font-weight:500; white-space:nowrap; }
.color-panel[hidden] { display:none; }
.color-panel h3 { margin:0 0 10px; }
.color-options { display:flex; gap:8px; }
.army-color-choice { flex:1; min-height:38px; border:1px solid #52616f; border-radius:7px; background:var(--panel); color:var(--swatch); font-size:.875rem; }
.army-color-choice::before { content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--swatch); margin-right:7px; }
.army-color-choice[aria-pressed="true"] { border-color:var(--swatch); box-shadow:inset 0 0 0 1px var(--swatch); background:color-mix(in srgb,var(--swatch) 12%,var(--panel)); }
@media(max-width:700px) { .color-panel { grid-column:1 / -1; } .army-turn { font-size:.6rem; padding:1px 3px; } .army-heading { gap:5px; } }

/* Compact cards keep the board primary while retaining the useful piece summary. */
.commander-panel .section-heading h3, .color-panel .section-heading h3 { margin:0; }
.commander-choice .token.portrait { width:72px; height:72px; }
.commander-choice { padding:10px 6px; }
@media(max-width:700px) {
  .game-sidebar { grid-template-columns:minmax(0,1fr); gap:12px; }
  .selection-panel { grid-column:1 / -1; }
  .help-button { width:32px; height:32px; flex-basis:32px; }
}

/* Setup guidance is a checklist, while every previous choice remains editable. */
.section-heading h3 { display:flex; align-items:center; gap:8px; }
.section-heading h3 > span:not(.setup-step-mark) { color:inherit; font-size:inherit; }
.section-heading .setup-step-mark { display:grid; place-items:center; width:24px; height:24px; border:1px solid #576878; border-radius:50%; color:#c5d0dc; font-size:.875rem; flex-shrink:0; }
.setup-step-mark[hidden], .action-display[hidden], #back-setup[hidden], #history-panel[hidden] { display:none; }
.sidebar-card[data-setup-status="active"] { border-color:var(--setup-accent); background:var(--panel); box-shadow:inset 3px 0 var(--setup-accent); }
.sidebar-card[data-setup-status="active"] { background:color-mix(in srgb,var(--setup-accent) 12%,#1a222d); box-shadow:inset 4px 0 var(--setup-accent),0 0 0 2px color-mix(in srgb,var(--setup-accent) 24%,transparent),0 5px 22px #0005; }
.sidebar-card[data-setup-status="upcoming"] { opacity:.48; }
.sidebar-card[data-setup-status="done"] { opacity:.66; }
.sidebar-card[data-setup-status="done"]:is(:hover,:focus-within),.sidebar-card[data-setup-status="upcoming"]:is(:hover,:focus-within) { opacity:1; }
.sidebar-card { transition:opacity .2s,border-color .2s,background .2s,box-shadow .2s; }
.board-stage { position:relative; }
.setup-confirm { position:absolute; z-index:12; top:36%; left:50%; transform:translate(-50%,-50%); display:grid; gap:8px; width:min(300px,78%); padding:22px; border:1px solid var(--ready-accent); border-radius:14px; background:#15202df5; box-shadow:0 12px 45px #0009; }
.setup-confirm[hidden],#turn-card[hidden] { display:none; }
.setup-confirm .button.primary { background:var(--ready-accent); border-color:var(--ready-accent); font-size:1rem; }
.setup-confirm .button.quiet { min-height:34px; border-color:transparent; color:#b8c6d3; font-weight:400; }
.setup-start-dock { position:sticky; z-index:11; top:0; grid-column:1 / -1; width:100%; display:flex; justify-content:flex-end; padding:6px; margin-bottom:8px; border-radius:10px; background:#15202df2; box-shadow:0 3px 12px #0006; }
.setup-start-dock[hidden] { display:none; }
.setup-start-dock #end-turn { width:auto; min-width:145px; min-height:42px; background:#223445; border-color:#60758a; color:#e8f0f7; }
.setup-start-dock #end-turn:hover:not(:disabled),.setup-start-dock #end-turn:focus-visible { background:var(--team); border-color:var(--team); color:#101d28; outline:2px solid var(--team); outline-offset:2px; }
.setup-start-dock #end-turn.setup-ready { background:var(--team); border-color:var(--team); color:#101d28; box-shadow:0 0 0 3px color-mix(in srgb,var(--team) 30%,transparent); }
.roster-help { text-decoration:none; display:inline-grid; place-items:center; flex:none; }
.hero-roster-link { color:var(--blue); font-size:.875rem; }
#selection-panel > .undo-button { margin-top:8px; min-height:30px; padding:4px 8px; background:transparent; border-color:transparent; font-weight:400; font-size:.825rem; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23dbe6ee' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-position:right 11px center !important; background-size:12px 8px !important; background-repeat:no-repeat !important; padding-right:32px !important; }
@media(prefers-reduced-motion:reduce) { .sidebar-card { transition:none; } }
.sidebar-card[data-setup-status="active"] .setup-step-mark { background:var(--setup-accent); border-color:var(--setup-accent); color:#14212c; }
.sidebar-card[data-setup-status="done"] { border-color:#34404c; background:#171f28; }
.sidebar-card[data-setup-status="done"] .setup-step-mark { color:#b7c9d7; border-color:#506577; }
.sidebar-card[data-setup-status="done"] :is(.color-options,.commander-options,.selection-content,.piece-actions) { opacity:.75; }
.sidebar-card[data-setup-status="done"]:is(:hover,:focus-within) :is(.color-options,.commander-options,.selection-content,.piece-actions) { opacity:1; }
.sidebar-card[data-setup-status="active"] .layout-confirm { border-color:var(--setup-accent); color:var(--setup-accent); }
.turn-card[data-phase="setup"] { grid-template-columns:minmax(0,1fr); }
.turn-card[data-phase="setup"] h2 { padding-right:30px; }
.turn-card[data-phase="setup"] #end-turn:not(.setup-ready) { background:transparent; color:#d1dbe5; border-color:#526678; }
.turn-card[data-phase="setup"] #end-turn.setup-ready { box-shadow:0 0 0 2px color-mix(in srgb,var(--team) 25%,transparent); }
.selection-copy h3[hidden] { display:none; }
[hidden], .game-layout[hidden], .match-lobby[hidden], #match-bar[hidden] { display:none !important; }
.match-heading { max-width:1500px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#match-bar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:14px; }
#match-code { font-family:monospace; letter-spacing:.08em; }
#connection-status { margin:0; color:#acb5c1; font-size:13px; }
#connection-status.error { color:#f3b0a6; }
.match-lobby { max-width:1040px; margin:36px auto; padding:24px; }
.match-lobby>p { color:#b7c3ce; line-height:1.6; }
.lobby-options { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(230px,1fr); gap:20px; margin:28px 0; }
.lobby-card { display:flex; flex-direction:column; gap:14px; align-self:start; min-width:0; padding:24px; background:#17232e; border:1px solid #394754; border-radius:12px; }
.lobby-card h3 { margin:0 0 8px; }
.lobby-card input,.lobby-card select { padding:12px; border:1px solid #586778; border-radius:6px; background:#101820; color:#edf4fa; font:inherit; max-width:100%; }
.visually-hidden, .mode-switch input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.match-choice { min-width:0; border:0; border-bottom:1px solid #35414f; margin:0; padding:13px 0; }
.match-choice:first-child { padding-top:0; }
.match-choice:last-child { border-bottom:0; padding-bottom:0; }
.match-choice-heading { display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; gap:12px; font-size:.9rem; font-weight:600; }
.match-picker { position:relative; }
.match-picker .match-picker-help { position:absolute; top:-5px; right:-5px; width:28px; height:28px; min-height:28px; border:0; background:transparent; color:#8f9cab; }
.match-picker .match-picker-help:hover { color:#edf4fc; background:transparent; }
.match-picker .opponent-picker legend { padding-right:32px; }
.mode-switch { display:flex; padding:3px; gap:3px; border:1px solid #405064; border-radius:8px; background:#101820; }
.mode-switch label { position:relative; cursor:pointer; }
.mode-switch span { display:block; padding:7px 11px; min-width:67px; text-align:center; border-radius:5px; color:var(--muted); font-size:.8rem; font-weight:500; }
.mode-switch input:checked + span { color:#102431; background:var(--blue); }
.mode-switch input:focus-visible + span { outline:2px solid #fff; outline-offset:2px; }
.mode-switch label:hover span { color:#fff; }
.mode-switch label:hover input:checked + span { color:#102431; background:#bce5ff; }
.match-picker .mode-switch input { padding:0; border:0; width:1px; height:1px; }
.match-picker .level-choice input { padding:0; width:16px; height:16px; left:8px; top:8px; }
.level-choice:has(input:focus-visible) { outline:2px solid #fff; outline-offset:3px; }
.match-picker-note { margin:0; color:var(--muted); font-size:.8rem; line-height:1.5; }
#restart-options { margin:18px 0; }
#restart-dialog .dialog-actions { margin-top:20px; }
#saved-matches { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.catapult-choices { display:flex; gap:8px; }
.catapult-choices button[aria-pressed=true] { background:var(--south-color); color:#101820; }
/* Rolling clouds are clipped to unseen tiles, above ambient light but below
   square borders, attack markers and units. The veil cannot intercept input. */
.fog-layer { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.fog-layer[hidden] { display:none; }
.board > button.square { z-index:2; }
.board > button.square.selected { z-index:3; }
.board .square.fogged { background-image:linear-gradient(#b6cbd54d,#b6cbd54d); }
.board.has-cloud-fog .square.fogged { background-image:none; }
.board { --terrain-cell:calc(100cqw / var(--board-size,13)); --stone-top:#b7b8a9; --stone-face:#81877d; --stone-foot:#434d47; --stone-joint:#333b3488; --stone-block:calc(var(--terrain-cell) * .5); --stone-tint:#d9ded219; --stone-rim:#e0e1c996; }
body[data-environment="wasteland"] .board { --stone-top:#c4aa80; --stone-face:#9a805c; --stone-foot:#594734; --stone-joint:#51412d88; --stone-block:calc(var(--terrain-cell) * .58); --stone-tint:#dab77619; --stone-rim:#e6cba594; }
body[data-environment="forest"] .board { --stone-top:#b0b797; --stone-face:#7d896b; --stone-foot:#475b44; --stone-joint:#354d3688; --stone-block:calc(var(--terrain-cell) * .54); --stone-tint:#8da16e22; --stone-rim:#d3dec18c; }
.high-ground-layer { position:absolute; inset:0; z-index:0; pointer-events:none; }
.high-ground-step { position:absolute; transform:translateY(calc(-1 * var(--step-rise))); --cap-height:clamp(1.5px,calc(var(--terrain-cell) * .035),4px); }
.high-ground-step::before { content:''; position:absolute; inset:0; transform:translateY(var(--step-wall)); border-radius:1px; background:#17251e22; box-shadow:calc(var(--terrain-cell) * .09) calc(var(--terrain-cell) * .12) calc(var(--terrain-cell) * .1) #101b1680; opacity:var(--terrain-shadow,1); transition:opacity 2.1s linear; }
.high-ground-surface { position:absolute; inset:0; background-image:linear-gradient(var(--stone-tint),var(--stone-tint)),var(--terrain); box-shadow:inset 0 1px 0 var(--stone-rim),inset 1px 0 0 var(--stone-rim),inset -1px 0 0 #29362d88; }
.high-ground-grid { position:absolute; inset:0; clip-path:inset(var(--cap-height)); background-image:linear-gradient(90deg,#e5e0c451 0 1px,transparent 1px),linear-gradient(#e5e0c451 0 1px,transparent 1px); background-size:var(--terrain-cell) var(--terrain-cell); }
.high-ground-face { position:absolute; left:0; right:0; top:100%; height:var(--step-wall); display:flex; flex-direction:column; background:linear-gradient(var(--stone-face),var(--stone-foot)); box-shadow:inset 1px 0 0 #d3d0aa30,inset -1px 0 0 #23312766; }
.high-ground-course { flex:1; background-image:linear-gradient(90deg,var(--stone-joint) 0 1px,transparent 1px); background-size:var(--stone-block) 100%; border-bottom:1px solid var(--stone-joint); }
.high-ground-course:nth-child(even) { background-position-x:calc(var(--stone-block) * .5); }
.high-ground-cap { position:absolute; left:0; right:0; top:calc(100% - var(--cap-height)); height:calc(var(--cap-height) * 2); background:linear-gradient(var(--stone-top),var(--stone-face)); box-shadow:inset 0 1px 0 var(--stone-rim),inset 0 -1px 0 #2c372f77; }
body[data-environment="wasteland"] .high-ground-cap { clip-path:polygon(0 12%,32% 0,64% 10%,100% 0,100% 90%,68% 100%,34% 92%,0 100%); }
body[data-environment="forest"] .high-ground-cap { background-image:linear-gradient(#9eac8266,#536f4622),linear-gradient(var(--stone-top),var(--stone-face)); }
/* Clicks, keyboard focus and action cues sit on the same top plane as units.
   The logical grid itself stays fixed for routes, camera points and fog. */
.board > button.square[data-elevation] { z-index:3; background-color:transparent; background-image:none; border:0; box-shadow:none; pointer-events:none; }
.board > .square[data-elevation="2"] { z-index:4; }
.board > .square[data-elevation].selected { z-index:5; }
.high-ground-hit { position:absolute; inset:0; translate:0 var(--ground-lift); pointer-events:auto; }
.square[data-elevation]::before,.square[data-elevation]::after { translate:0 var(--ground-lift); }
.square[data-elevation]:focus-visible { outline:0; }
.square[data-elevation]:focus-visible > .high-ground-hit { outline:3px solid #fff; outline-offset:3px; }
.square[data-elevation].last-action > .high-ground-hit { background:#ffffff16; }
.square[data-elevation].aura-south > .high-ground-hit { background-image:linear-gradient(color-mix(in srgb,var(--south-color) 14%,transparent),color-mix(in srgb,var(--south-color) 14%,transparent)); }
.square[data-elevation].aura-north > .high-ground-hit { background-image:linear-gradient(color-mix(in srgb,var(--north-color) 14%,transparent),color-mix(in srgb,var(--north-color) 14%,transparent)); }
.square[data-elevation].aura-south.aura-north > .high-ground-hit { background-image:linear-gradient(#e5e2c82b,#e5e2c82b); }
.square[data-elevation].danger-preview > .high-ground-hit { background:#fa9c7040; box-shadow:inset 0 0 0 2px #ffb78cc0; }
.board .square[data-elevation].friendly-fire,.board .square[data-elevation].hero-danger { box-shadow:none; }
.square[data-elevation].friendly-fire > .high-ground-hit { box-shadow:inset 0 0 0 3px #ffb575; }
.square[data-elevation].hero-danger > .high-ground-hit { box-shadow:inset 0 0 0 4px #ff5b62,0 0 0 2px #fff2; }
.square[data-elevation] > .token { top:var(--ground-lift); }
.square[data-elevation] > .remnants-layer { top:var(--ground-lift); bottom:calc(-1 * var(--ground-lift)); }
.high-ground-note { color:#e1d5b3; margin:0 0 8px; }
.remnants-layer { position:absolute; inset:0; z-index:0; opacity:.20; pointer-events:none; overflow:hidden; }
.square:has(>.token)>.remnants-layer { opacity:.12; }
.corpse-sprite { position:absolute; width:68%; height:68%; bottom:-12%; left:calc(16% + var(--remnant-offset)); background-size:400% 200%; background-position:0 0; background-repeat:no-repeat; filter:grayscale(1) sepia(.35); transform:rotate(76deg) scale(.9,.38); }
.corpse-sprite.catapult { transform:rotate(18deg) scale(.9,.42); }
@media (max-width:740px) { .lobby-options { grid-template-columns:1fr; } }
@media (max-width:600px) { .match-lobby { margin:12px auto; padding:18px; } .lobby-card { padding:18px; } .match-heading { padding:8px 14px; } }
@media (min-width:1050px) and (min-height:600px) { .game-layout { grid-template-columns:minmax(0,calc(100dvh - 174px)) clamp(320px,28vw,440px); } .game-sidebar { max-height:calc(100dvh - 144px); } }

/* Opponent settings extend the existing dark game controls. */
.opponent-picker {border:0;padding:0 0 1rem;margin:0 0 .5rem;border-bottom:1px solid #344052;min-width:0}
.opponent-picker legend {font-size:1rem;font-weight:700;margin-bottom:.65rem}
.opponent-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.opponent-options label {position:relative;cursor:pointer}
.opponent-options input {position:absolute;opacity:0}
.opponent-options span {display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.6rem;padding:.55rem;border:1px solid #44516a;border-radius:8px;background:#1b2634;font-size:.9rem}
.opponent-options input:checked+span {border-color:#9bcfff;background:#263f59;color:#e6f4ff}
.opponent-options input:focus-visible+span {outline:3px solid #f3c97b;outline-offset:3px}
.difficulty-options {display:flex;flex-wrap:wrap;gap:1rem;margin-top:.9rem}
.difficulty-options label {display:flex;gap:.5rem;align-items:center;font-size:.9rem}
.difficulty-options select {background:#182433;color:#f1f6fc;border:1px solid #53647c;border-radius:6px;padding:.4rem .6rem;font:inherit}
.opponent-note {font-size:.9rem;color:#c2d0e0;margin:.65rem 0 0;line-height:1.5}
.watch-controls {display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:.5rem auto 1rem;max-width:1600px;padding:0 1rem;font-size:.9rem}
.watch-controls span {color:#c2d0e0}
.opponent-picker [hidden],.watch-controls[hidden] {display:none!important}
@media(max-width:540px) {.opponent-options {grid-template-columns:1fr}.opponent-options span {min-height:2.7rem}.difficulty-options {gap:.7rem}}

/* Readiness belongs to the tile, so it stays fixed during sprite animation.
   Selection and attack targets already have their own, stronger tile cues. */
.square.unit-ready:not(.selected,.command-ally,.legal-capture,.legal-shoot,.legal-move,.legal-jump,.hint-attack)::before { content:''; position:absolute; top:1px; left:1px; width:clamp(5px,14%,9px); height:clamp(5px,14%,9px); border-top:2px solid #f3eedc; border-left:2px solid #f3eedc; z-index:3; pointer-events:none; filter:drop-shadow(1px 1px 0 #101820); }
.square.unit-spent > .token,.square.unit-recruit > .token { opacity:.68; }
.square.unit-spent .used-mark,.square.unit-recruit .used-mark { right:1px; bottom:1px; padding:2px; border:1px solid #abb8c8; font-size:clamp(12px,1vw,16px); z-index:4; }
.board-key,#availability-key { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.legend-ready { display:inline-block; width:9px; height:9px; border-top:2px solid #f3eedc; border-left:2px solid #f3eedc; }
.legend-spent { color:#c5d0dc; }
.board .square.friendly-fire { box-shadow:inset 0 0 0 3px #ffb575; }
.board .square.hero-danger { box-shadow:inset 0 0 0 4px #ff5b62,0 0 0 2px #fff2; z-index:5; }
.square.hero-danger > .token { outline:2px solid #ff5b62; outline-offset:-3px; }
.attack-preview { margin:12px 0 0; padding:10px 12px; border-left:3px solid #9cd5ee; background:#101b28; font-size:.875rem; line-height:1.5; }
.attack-preview.friendly-warning { border-color:#ffb575; color:#ffdab2; }
.attack-preview.hero-warning { border-color:#ff5b62; color:#ffd3d6; background:#38242c; font-weight:600; }
.turn-card[data-phase="play"] #end-turn { background:transparent; border-color:#46596c; color:#d3deea; min-height:36px; padding:6px 12px; font-weight:500; }
.turn-card[data-phase="play"] #end-turn:hover:not(:disabled) { background:#263747; }
.scorecard { font-size:.82rem; color:#c5d4e3; padding-left:12px; border-left:1px solid #46596c; }
.turn-recap h3,.rematch-panel h3 { margin:0; font-size:.94rem; }
.turn-recap p,.rematch-panel p { font-size:.875rem; line-height:1.5; color:#c5d0dc; margin:8px 0; }
.turn-recap summary { font-size:.875rem; cursor:pointer; color:#a9d9f4; }
.turn-recap ul { margin:10px 0 0; padding-left:20px; font-size:.875rem; line-height:1.5; }
.turn-recap li+li { margin-top:6px; }
.rematch-panel { border-color:#67819a; }
.rematch-switch { display:flex; align-items:center; gap:8px; font-size:.875rem; margin:12px 0; cursor:pointer; }
.rematch-switch input { width:18px; height:18px; accent-color:#98d7ff; }
.rematch-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:700px) { .scorecard { width:100%; border:0; padding:0; }.board-footer { align-items:flex-start; }.board-key { justify-content:flex-end; max-width:58%; font-size:12px; }.turn-recap,.rematch-panel { grid-column:1 / -1; } }
.catapult-choices button[aria-pressed=true]:hover:not(:disabled) { background:var(--south-color); color:#101820; }

/* Race sheets use planted-foot crops, independent of the old role cameras. */
.token.race-unit .sprite-window { overflow:visible; }
.token.race-unit .motion-sprite,.token.race-unit .unit-sprite,.token.race-unit .death-sprite { inset:auto; transform:none; animation:none; translate:0 0; }
.battle-unit.stealth-shimmer { opacity:.18; filter:brightness(2) drop-shadow(0 0 4px #bdedff); }
.battle-shockwave { position:absolute; border-radius:50%; border:3px solid #efbc74; box-shadow:0 0 6px #f6d498,0 0 14px #cc713b; pointer-events:none; }
#race-options .button[aria-pressed="true"] { border-color:var(--setup-accent,var(--blue)); background:#334356; }
#race-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#race-options .button:last-child { grid-column:1 / -1; }
@media(prefers-reduced-motion:reduce) { .battle-unit.stealth-shimmer { filter:none; } }
.ent-obstacle { position:absolute; width:92%; height:112%; left:4%; bottom:calc(-2% - var(--ground-lift,0px)); z-index:2; pointer-events:none; filter:drop-shadow(0 2px 2px #0009); }
.ent-obstacle svg { display:block; width:100%; height:100%; }
.unit-roots { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; filter:drop-shadow(0 0 3px #a7ce5b55); }
.root-shadow { stroke:#203521; stroke-width:7; }
.root-vines { stroke:#91b55d; stroke-width:3; }
.rooted .unit-roots { animation:root-rise .5s ease-out,root-breathe 2.6s .5s ease-in-out infinite; transform-origin:50% 95%; }
.roots-note { color:#b8d995; }
.roots-impact { border-color:#a8d577; background:#699d4d55; box-shadow:0 0 15px #9cce7077; }
.battle-tree { position:absolute; display:block; transform:translate(-50%,-50%); pointer-events:none; z-index:3; transform-origin:50% 95%; }
.battle-tree .ent-obstacle { bottom:-2%; }
.battle-projectile.bolt,.battle-projectile.flame { color:#d8e8b9; height:auto!important; filter:drop-shadow(0 1px 2px #000); }
.battle-projectile.bolt svg,.battle-projectile.flame svg,.battle-projectile.glaive svg { width:100%; display:block; }
.battle-projectile.flame { color:#ffe2a1; filter:drop-shadow(-4px 0 3px #ff5d21) drop-shadow(-8px 0 6px #dd3017); }
.battle-projectile.glaive svg { animation:glaive-spin .35s linear infinite; }
@keyframes root-rise { from { opacity:0; scale:.45 .05; } to { opacity:1; scale:1; } }
@keyframes root-breathe { 0%,100% { opacity:.8; } 50% { opacity:1; } }
@keyframes glaive-spin { to { rotate:360deg; } }
@media(prefers-reduced-motion:reduce) { .rooted .unit-roots,.battle-projectile.glaive svg { animation:none; } }

.token.burrowed .sprite-window { opacity:.12; translate:0 24%; scale:.7; }
.token.burrowed::after { content:''; position:absolute; width:65%; height:18%; left:17.5%; bottom:9%; border:2px dashed #96806d; border-radius:50%; background:#322d26aa; }
.battle-pulse.burrow-impact { border:4px dashed #8e7355; background:#73563855; border-radius:50%; scale:1 .3; }
.battle-hook-chain { height:4px!important; width:0; transform-origin:left center; background:repeating-linear-gradient(90deg,#d1d5d0 0 4px,#535b58 4px 7px); border:1px solid #303431; }
.battle-hook,.battle-hook-chain { position:absolute; display:block; pointer-events:none; z-index:3; }
.battle-hook { color:#cad2ce; transform:translate(-50%,-50%); }
.battle-hook svg { width:100%; height:100%; }
.battle-projectile.fireball { width:65px; height:32px; filter:drop-shadow(0 0 6px currentColor); }
/* Shared battle and replay status: these decorations carry no hidden board data. */
.fire-trail {position:absolute;inset:32% 8% 4%;pointer-events:none;z-index:3;opacity:.82;filter:drop-shadow(0 0 5px #ff832a);}
.fire-trail svg {width:100%;height:100%;}
.fire-hazard {box-shadow:inset 0 -5px 9px #ef65284d;}
.token .poison-status,.token .ghoul-status {position:absolute;right:2%;top:6%;font-size:clamp(10px,1.2vw,17px);line-height:1;background:#192516db;border:1px solid #accb71;border-radius:50%;color:#c9ee84;padding:2px;z-index:8;}
.token .ghoul-status {left:1%;right:auto;color:#d5e5ff;border-color:#a9c5ef;background:#142033db;}
.token.poisoned .sprite-window {filter:drop-shadow(0 0 3px #95c34d);}
.poison-note {color:#d8e997;}
.battle-projectile.venom {color:#a4d54e;width:calc(var(--terrain-cell)*.44)!important;}
.battle-projectile.frost {color:#b6e8ff;width:calc(var(--terrain-cell)*.65)!important;}
.battle-pulse.resurrection-impact {border:3px solid #b8ddff;background:#89c4e744;}
.battle-pulse.poison-impact {border:3px solid #b8d764;background:#8fb44544;}
.battle-pulse.fire-impact {border:3px solid #ff9d58;background:#eb733f66;}