/* Hex Bridge board */
.bg-tray[data-game="hexbridge"] { --tint: 70, 120, 170; --edge-rgb: 30, 60, 100; padding: clamp(18px, 4vw, 30px) clamp(14px, 3vw, 24px); }
.hx-board { position: relative; width: 100%; }
.hx-edges { position: absolute; inset: -3.5% -2.5%; width: 105%; height: 107%; overflow: visible; pointer-events: none; }
.hx-edges polyline { fill: none; stroke-width: 7; stroke-linecap: round; }
.hx-edges .e1 { stroke: #3D6BE0; }
.hx-edges .e2 { stroke: #E5484D; }
.hx-cell { position: absolute; width: calc(100% / var(--cols)); aspect-ratio: 1 / 1.1547; margin: 0; padding: 0; border: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, rgba(255, 255, 255, .92), rgba(225, 233, 246, .9)); transition: filter .15s, transform .15s; }
.hx-cell.alt { background: linear-gradient(170deg, rgba(246, 249, 255, .95), rgba(214, 224, 242, .9)); }
.hx-cell::after { content: ''; position: absolute; inset: 7%; clip-path: inherit; background: inherit; filter: brightness(1.03); z-index: 0; }
.hx-board::before { content: ''; }
.hx-cell .pc { width: 74%; z-index: 1; }
.my-turn .hx-cell.can { cursor: pointer; }
.my-turn .hx-cell.can:hover { filter: brightness(.94) saturate(1.4); }
.hx-cell.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
.hx-cell.win .pc { animation: hx-win 1s ease-in-out infinite alternate; }
.hx-cell.last .pc { outline: 3px solid rgba(245, 197, 66, .9); outline-offset: 1px; }
@keyframes hx-win { to { filter: brightness(1.35) drop-shadow(0 0 6px #fff); } }
:root[data-theme="dark"] .hx-cell { background: linear-gradient(170deg, rgba(60, 80, 120, .95), rgba(40, 56, 92, .95)); }
:root[data-theme="dark"] .hx-cell.alt { background: linear-gradient(170deg, rgba(70, 92, 136, .95), rgba(46, 64, 102, .95)); }