/* Hex: the 11×11 rhombus itself is the board. Wood lives in the hexagonal tiles, the
   classic red/blue goal bands hug the edge cells, and the shared warm-paper shell,
   invitation card and controls stay unchanged. */
.hex-wrap {
  --hex-tile: #e9cc93;
  --hex-tile-hover: #f3dcae;
  --hex-groove: #c8a461;
  --hex-red: #b23a2b;
  --hex-red-deep: #8e2e22;
  --hex-blue: #3f5e70;
  --hex-blue-deep: #2c4452;
  --hex-band-h: #b8452f;
  --hex-band-v: #476678;
  --hex-paper: #f6f1e6;
  position: relative;
  align-self: start;
  width: 100%;
  aspect-ratio: auto;
  padding: 2.6% 2.4%;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hex-wrap::before, .hex-wrap::after { display: none; }
.hex-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.815;
  user-select: none;
  -webkit-user-select: none;
}
.hex-edges {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .10)) drop-shadow(0 10px 22px rgba(60, 40, 10, .14));
}
.hex-bands { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.hex-bands .hex-edge { fill: none; }
.hex-corner { stroke-width: 0; }
.hex-edge-h { stroke: var(--hex-band-h); fill: var(--hex-band-h); }
.hex-edge-v { stroke: var(--hex-band-v); fill: var(--hex-band-v); }
/* Blue's own view transposes the board, so the horizontal edges become Blue's goal. */
.hex-edges.is-blue-view .hex-edge-h { stroke: var(--hex-band-v); fill: var(--hex-band-v); }
.hex-edges.is-blue-view .hex-edge-v { stroke: var(--hex-band-h); fill: var(--hex-band-h); }
.hex-cell {
  position: absolute;
  z-index: 1;
  /* Slightly overlap neighboring clipped cells so subpixel antialiasing cannot
     expose the page background as white seams between the tiles. */
  width: calc(6.25% + 1px);
  height: calc(11.76% + 1px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--hex-groove);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.hex-cell::before {
  position: absolute;
  inset: 1.5px;
  content: '';
  background: var(--hex-tile);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex-cell.can-play { cursor: pointer; }
.hex-cell.can-play:hover::before { background: var(--hex-tile-hover); }
.hex-cell:focus-visible::before { background: var(--hex-tile-hover); }
.hex-cell:focus-visible { z-index: 2; outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 8px; }
.hex-stone {
  position: relative;
  z-index: 1;
  display: block;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.hex-stone.red { background: var(--hex-red); box-shadow: inset 0 0 0 1.5px var(--hex-red-deep); }
.hex-stone.blue { background: var(--hex-blue); box-shadow: inset 0 0 0 1.5px var(--hex-blue-deep); }
.hex-cell.is-last .hex-stone::after { position: absolute; inset: 39%; content: ''; border-radius: 50%; background: var(--hex-paper); }
.hex-cell.is-preview .hex-stone { opacity: .72; outline: 2px dashed var(--hex-paper); outline-offset: -4px; }
.hex-cell.is-win .hex-stone.red { box-shadow: 0 0 0 2px var(--hex-paper), 0 0 0 3.5px var(--hex-red-deep), inset 0 0 0 1.5px var(--hex-red-deep); }
.hex-cell.is-win .hex-stone.blue { box-shadow: 0 0 0 2px var(--hex-paper), 0 0 0 3.5px var(--hex-blue-deep), inset 0 0 0 1.5px var(--hex-blue-deep); }

/* The rhombus is shorter than the square boards, so the invitation card overlaps only its
   lower band and hangs below it; the board keeps the same geometry before and during play. */
:root[data-game="hex"] .board-area { --invite-top: calc(100% - 84px); --invite-bottom: auto; --invite-reserve: 196px; }

/* Swap opening is a one-turn decision: accent weight on the left, Undo and Resign stay together on the right. */
:root[data-game="hex"] .game-tools { justify-content: flex-start; gap: 4px; }
:root[data-game="hex"] #undo-button { margin-left: auto; }
:root[data-game="hex"] .game-tools .tool-button:last-child { margin-left: 0; }
#hex-swap { color: var(--accent-deep); }
#hex-swap:hover:not(:disabled) { background: var(--accent-soft); }
#hex-swap:disabled { color: var(--muted); }

@media (max-width: 520px) {
  /* Without a frame the board can use the full viewport width; cells stay ≥ 18px at 320px. */
  .hex-wrap { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; padding: 2.8% 2.6%; }
  .hex-cell::before { inset: 1px; }
  :root[data-game="hex"] .board-area { --invite-top: calc(100% - 64px); --invite-reserve: 226px; }
}
@media (prefers-reduced-motion: reduce) { .hex-cell, .hex-stone { animation: none; transition: none; } }

:root:not([data-game="hex"]) .only-hex { display: none !important; }
:root[data-game="hex"] .only-gomoku { display: none !important; }

:root[data-game="hex"] .player-chip .side-pip { width: 20px; height: 20px; }
:root[data-game="hex"] .side-pip[data-color="red"] { background: #b23a2b; box-shadow: inset 0 0 0 1.5px #8e2e22; }
:root[data-game="hex"] .side-pip[data-color="blue"] { background: #3f5e70; box-shadow: inset 0 0 0 1.5px #2c4452; }
:root[data-game="hex"] .player-chip.is-turn .side-pip { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--ink); }

/* Opening guidance is a caption under the game-action row (where Swap opening lives), so the
   row keeps its place when the note appears at the opening and clears after the next placement. */
.hex-note { width: var(--col); margin: 0 0 2px; color: var(--muted); font: 14px/1.5 var(--sans); text-align: center; }