/* Ink terrain and characters. The Solvekoban page shell lives in style.css. */
.game-page {
  --ink-tile-base: #eef1e9;
  --ink-grass-image: url('assets/ink-grass-wash.svg');
}
.game-page .board-frame {
  --tile-gap: 1px;
  --board-padding: 3px;
  --board-border: 1px;
  --board-grid-inset: calc(2 * (var(--board-padding) + var(--board-border)) - var(--tile-gap));
}
.game-page .board {
  --tile-gap: inherit;
  gap: var(--tile-gap);
  padding: var(--board-padding);
  border: var(--board-border) solid #b5b5b5;
  border-radius: 6px;
  background: #c0c0c0;
  filter: none;
  isolation: isolate;
  overflow: hidden;
}
@supports (width: round(down, 10px, 1px)) {
  .game-page .board-frame { container-type: inline-size; }
  .game-page .board {
    /* Quantize the whole cell pitch; all grid gaps then share the same pixel phase. */
    --tile-pitch: max(2px, round(down, calc((100cqw - var(--board-grid-inset)) / var(--columns)), 1px));
    --tile-size: calc(var(--tile-pitch) - var(--tile-gap));
    width: calc(var(--columns) * var(--tile-pitch) + var(--board-grid-inset));
    margin-inline: auto;
    grid-template-columns: repeat(var(--columns), var(--tile-size));
    grid-auto-rows: var(--tile-size);
  }
  @media (max-width: 760px), (max-height: 560px) and (max-width: 1100px) {
    .game-page .board-frame {
      --total-inset: calc(var(--frame-insets) + var(--board-grid-inset));
      width: min(100%, calc((100cqh - var(--total-inset)) * var(--board-ratio, 1.25) + var(--total-inset)));
    }
  }
}
.board .tile {
  border: 0;
  border-radius: 1px;
  background: var(--ink-tile-base);
  color: #333333;
  overflow: visible;
}
.terrain-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.board .tile:not([data-terrain="#"]):not([data-terrain="I"]) .terrain-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-grass-image) center / contain no-repeat;
}
.road-art { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; }
.road-art path { fill: none; stroke: #eeeeee; stroke-width: 48; stroke-linecap: round; }
.tile[data-terrain="I"] .road-art { opacity: .5; }
.mountain-art { position: absolute; inset: 0; background: url('assets/ink-selected-mountain-b-no-tree.png') center 70% / 104% 102% no-repeat; }
.ice-art { position: absolute; inset: 0; background: repeating-linear-gradient(145deg, transparent 0 14%, #f7f7f78c 15% 17%, transparent 19% 35%), linear-gradient(35deg, #93939340, #f1f1f166 65%, #b0b0b070); box-shadow: inset 0 0 0 1px #93939350; }
.horse-art { position: absolute; inset: 1%; background: url('assets/ink-color-horse-a.png') center / contain no-repeat; }
.board .tile[data-portal] { color: #535353; }
.portal-art { position: absolute; inset: 6% 18% 3%; border: 4px solid #7c7c7c; border-bottom-width: 7px; border-radius: 48% 49% 13% 11%; transform: rotate(-3deg); background: radial-gradient(ellipse, #efefef 18%, #c4c4c4 74%, #868686); box-shadow: inset 2px 1px 0 #bfbfbf, 1px 1px 1px #5b5b5b42; }
.portal-art::after { content: ''; position: absolute; inset: -4px; border: 1px dashed #4d4d4da0; border-radius: inherit; }
.board .tile-glyph { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: var(--gate-color, #535353); font: 700 clamp(9px, 1.7vw, 18px)/1 var(--serif); text-shadow: 0 1px #fcfcfc; }
.board .piece { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; }
.character-art { position: absolute; inset: -6% 3% 0; background: url('assets/ink-color-bandit-c.png') center / contain no-repeat; filter: drop-shadow(0 1px 1px #f5f5f5); }
.piece:not(.mounted)[data-facing="left"] .character-art,
.piece.mounted[data-facing="right"] .character-art { transform: scaleX(-1); }
.player .character-art { inset: -7% -1% 0; background-image: url('assets/ink-color-swordsman-a.png'); filter: drop-shadow(0 0 2px #fafafa) drop-shadow(0 1px 1px #fafafa); }
.mounted::before { content: ''; position: absolute; inset: 20% -3% -4%; background: url('assets/ink-color-horse-a.png') center / contain no-repeat; }
.mounted .character-art { inset: -20% 8% 30%; }
.board .tile.is-preview { box-shadow: inset 0 0 0 2px #7c7c7c; }
.board .tile.is-destination { outline: 2px solid #575757; outline-offset: -2px; z-index: 6; }
.board .tile:focus-visible { outline: 2px solid #575757; outline-offset: -2px; }
[data-patrol] { --patrol-color: #000000; }
[data-gate="1"] { --gate-color: #262626; --gate-dashes: 4 4; }
[data-gate="2"] { --gate-color: #474747; --gate-dashes: 8 4; }
[data-gate="3"] { --gate-color: #606060; --gate-dashes: 2 3; }
/* One ink stroke per edge, centered on the existing rotated and offset lane. */
.board .patrol-link {
  --patrol-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ink'%3E%3Cstop stop-opacity='.26'/%3E%3Cstop offset='.22' stop-opacity='.56'/%3E%3Cstop offset='.63' stop-opacity='.84'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23000000' d='M.2 9.4 7 8.7 4 8.4 18 7.8 25 8.2Q38 6.7 48 7.5L57 6.8 61 7.3Q72 6.1 82 7L97.5 7.2 93 4.7 88 1 94 2.3 104 5 108 6.8 111 6.9 119.8 9 113 11.5 110 11.6 101 14.5 89 17 91.9 14.4 100.6 11.1Q88 12.2 78 11.4L71 12.3 64 11.6Q54 12.5 47 11.6L39 12.2 33 11.3 22 11.5 15 10.7 6 10.8 9 10.2Z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-width='.62' stroke-linecap='round' d='m2 8 8-.7 9 .1m4 4.9 7-.2 11 .6 9-.5m2-6 10-.2 9 .5 8-.5m14 10.7 9-2.6 5-1.8'/%3E%3C/svg%3E");
  z-index: 3;
  width: calc(100% + var(--tile-gap));
  border: 0;
}
.board .patrol-link::after {
  inset: 0 0 auto;
  width: auto;
  height: clamp(5px, .78vw, 8px);
  border: 0;
  background: var(--patrol-color, #000000);
  -webkit-mask: var(--patrol-brush) center / 100% 100% no-repeat;
  mask: var(--patrol-brush) center / 100% 100% no-repeat;
  transform: translateY(-50%);
}
.board .patrol-jump { z-index: 4; box-shadow: 0 0 0 1px #f7f7f7; }
.board .gate-layer { z-index: 4; }
.board .portal-connection, .board .portal-direction, .board .portal-endpoint { filter: drop-shadow(0 0 1px #f8f8f8); stroke-width: 1.5; opacity: .9; }
.board .portal-connection { stroke-dasharray: var(--gate-dashes, 4 5); }
.board .portal-endpoint { fill: #f1f1f125; }
.legend-icon[data-icon="player"], .legend-icon[data-icon="enemy"], .legend-icon[data-icon="mountain"], .legend-icon[data-icon="horse"] { width: 30px; height: 34px; background: url('assets/ink-color-swordsman-a.png') center / contain no-repeat; border: 0; border-radius: 0; color: transparent; }
.legend-icon[data-icon="enemy"] { background-image: url('assets/ink-color-bandit-c.png'); }
.legend-icon[data-icon="mountain"] { background-image: url('assets/ink-selected-mountain-b-no-tree.png'); }
.legend-icon[data-icon="horse"] { background-image: url('assets/ink-color-horse-a.png'); }
.legend-icon[data-icon="grass"] { background: var(--ink-tile-base) var(--ink-grass-image) center / contain no-repeat; }
.legend-icon[data-icon="road"] { background: url('assets/ink-color-road-c.png') center / cover; }
.game-page .legend { filter: none; }
.game-page .board .tile .piece { position: absolute; z-index: 5; }
.game-page .board .tile .tile-glyph { position: absolute; z-index: 4; }

/* User-selected production art: A swordsman, C bandit, B mountain and ice. */
.ice-art { inset: -5%; background: url('assets/ink-color-ice-a.png') center / 100% 100% no-repeat; box-shadow: none; }
.portal-art { inset: -2%; border: 0; border-radius: 0; transform: none; background: url('assets/ink-color-portal-stone-a.png') center / contain no-repeat; box-shadow: none; }
.portal-art::after { content: none; }
.tile[data-portal="2"] .portal-art { background-image: url('assets/ink-color-portal-wood-b.png'); }
.tile[data-portal="3"] .portal-art { background-image: url('assets/ink-color-portal-diamond-c.png'); }
.mounted::before { content: none; }
.mounted .character-art { inset: -4% -3%; background-image: url('assets/ink-color-mounted-a.png'); }
.legend-icon[data-icon="portal"] { width: 30px; height: 34px; background: url('assets/ink-color-portal-stone-a.png') center / contain no-repeat; border: 0; }
.legend-icon[data-icon="ice"] { background: url('assets/ink-color-ice-a.png') center / cover no-repeat; color: transparent; }