/* =============================================================
   GAME: Hex
   ============================================================= */
.board-hex {
  --hx-red: #ff4466;
  --hx-blue: #3d9dff;
  --hx-glow: #e040fb;
  width: min(100%, 680px);
  padding: 6px; background: #140a1f; border-radius: 16px;
  box-shadow: 0 0 0 2px var(--hx-glow), 0 0 26px rgba(224, 64, 251, .3);
}
.board-hex svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.hx-edge { fill: none; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.hx-edge.p1 { stroke: var(--hx-red); filter: drop-shadow(0 0 4px rgba(255, 68, 102, .8)); }
.hx-edge.p2 { stroke: var(--hx-blue); filter: drop-shadow(0 0 4px rgba(61, 157, 255, .8)); }
.hx-coord { font: 700 11px var(--font-body); fill: var(--muted); pointer-events: none; }

.hx-hex { fill: url(#hx-tile); stroke: #170a24; stroke-width: 1.5; transition: fill .15s; }
.hx-stone, .hx-shadow, .hx-facet, .hx-shine { pointer-events: none; opacity: 0; }
.hx-stone, .hx-facet { transform-box: fill-box; transform-origin: center; }
.hx-stone { fill: transparent; transition: fill .2s, opacity .2s; }
.hx-shadow { fill: rgba(0, 0, 0, .5); }
.hx-facet { stroke: rgba(255, 255, 255, .55); stroke-width: .7; stroke-linejoin: round; }
.hx-shine { fill: #fff; }
.hx-cell { cursor: default; }
.hx-cell:focus { outline: none; }
.hx-cell:focus-visible .hx-hex { stroke: var(--focus); stroke-width: 3; }

.hx-turn-1 .hx-cell.empty, .hx-turn-2 .hx-cell.empty { cursor: pointer; }
.hx-turn-1 .hx-cell.empty:hover .hx-hex, .hx-turn-2 .hx-cell.empty:hover .hx-hex { fill: #43215f; }
.hx-turn-1 .hx-cell.empty:hover .hx-stone { fill: var(--hx-red); opacity: .35; }
.hx-turn-2 .hx-cell.empty:hover .hx-stone { fill: var(--hx-blue); opacity: .35; }

/* placed gems: dark body with lit centre, a pale hexagonal table facet and a specular glint */
.hx-cell.p1 .hx-stone, .hx-cell.p2 .hx-stone, .hx-cell.p1 .hx-shadow, .hx-cell.p2 .hx-shadow { opacity: 1; }
.hx-cell.p1 .hx-facet, .hx-cell.p2 .hx-facet { opacity: .85; }
.hx-cell.p1 .hx-shine, .hx-cell.p2 .hx-shine { opacity: .75; }
.hx-cell.p1 .hx-stone { fill: url(#hx-gem1); stroke: #ff8aa0; stroke-width: .8; }
.hx-cell.p2 .hx-stone { fill: url(#hx-gem2); stroke: #8cc6ff; stroke-width: .8; }
.hx-cell.p1 .hx-facet { fill: url(#hx-facet1); }
.hx-cell.p2 .hx-facet { fill: url(#hx-facet2); }
.hx-cell.p1 .hx-hex { fill: #3a1424; }
.hx-cell.p2 .hx-hex { fill: #10284a; }
.hx-cell.p1 .hx-stone, .hx-cell.p2 .hx-stone, .hx-cell.p1 .hx-facet, .hx-cell.p2 .hx-facet { animation: hx-set .22s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes hx-set { from { transform: scale(.4); } }
.hx-cell.last .hx-stone { stroke: #fff; stroke-width: 2.2; }
.hx-cell.dim .hx-stone, .hx-cell.dim .hx-facet { opacity: .5; }
.hx-cell.dim .hx-shine { opacity: .3; }
.hx-cell.win .hx-hex { fill: #5a2d80; }
.hx-cell.win .hx-stone { stroke: #fff; stroke-width: 1.6; }
.hx-cell.win.p1 .hx-hex { fill: #6a1a3a; }
.hx-cell.win.p2 .hx-hex { fill: #163f7a; }

/* winning chain: a bright line that draws through the gems and keeps glowing */
.hx-path { fill: none; stroke: transparent; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hx-path.on { stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hx-draw .7s cubic-bezier(.4, 0, .2, 1) .1s forwards, hx-glow 1s ease-in-out .8s infinite alternate; }
.hx-path.on.p1 { filter: drop-shadow(0 0 3px var(--hx-red)) drop-shadow(0 0 7px var(--hx-red)); }
.hx-path.on.p2 { filter: drop-shadow(0 0 3px var(--hx-blue)) drop-shadow(0 0 7px var(--hx-blue)); }
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
@keyframes hx-glow { from { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: 0; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hx-path.on { stroke-dashoffset: 0; } }

.hx-dot.p1 { background: var(--hx-red, #ff4466); }
.hx-dot.p2 { background: var(--hx-blue, #3d9dff); }
.hx-goal { color: var(--muted); font-size: .8em; }