.hex-game {
  --hex-coral: #ff9caa;
  --hex-mint: #9cf5d7;
  display: grid;
  justify-items: center;
  gap: clamp(12px, 3vw, 24px);
  min-width: 0;
  padding-block: 8px;
}

.hex-goals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.hex-goal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #4e405e;
  border-radius: 8px;
  color: #ddd7ef;
  background: #1a172b;
  font-size: .75rem;
  font-weight: 700;
}

.hex-goal.is-yours { border-color: currentColor; }
.hex-goal[data-player="1"] { color: var(--hex-coral); }
.hex-goal[data-player="2"] { color: var(--hex-mint); }
.hex-goal-mark { width: 9px; height: 9px; flex: 0 0 auto; background: currentColor; }
.hex-goal[data-player="1"] .hex-goal-mark { border-radius: 50%; }
.hex-goal[data-player="2"] .hex-goal-mark { transform: rotate(45deg); }

.hex-board {
  position: relative;
  isolation: isolate;
  width: min(100%, 33rem);
  aspect-ratio: 10 / 6.350853;
  direction: ltr;
}

.hex-cell {
  --hex-shape: polygon(50% 1%, 98% 25.5%, 98% 74.5%, 50% 99%, 2% 74.5%, 2% 25.5%);
  position: absolute;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 10%;
  height: 18.1818%;
  padding: 0;
  border: 0;
  clip-path: var(--hex-shape);
  background: #594b75;
  touch-action: manipulation;
}

.hex-cell::before {
  position: absolute;
  inset: 2px;
  clip-path: var(--hex-shape);
  background: #261f3d;
  content: '';
}

.hex-cell[data-column-edge="true"] { background: #b87590; }
.hex-cell[data-row-edge="true"] { background: #65a6a2; }
.hex-cell[data-row-edge="true"][data-column-edge="true"] { background: linear-gradient(135deg, #65a6a2 50%, #b87590 50%); }
.hex-cell[data-player="1"]::before { background: #82465e; }
.hex-cell[data-player="2"]::before { background: #2b6d62; }
.hex-cell[data-player="1"]::after, .hex-cell[data-player="2"]::after {
  z-index: 1;
  width: 36%;
  aspect-ratio: 1;
  content: '';
}
.hex-cell[data-player="1"]::after { background: var(--hex-coral); border-radius: 50%; }
.hex-cell[data-player="2"]::after { background: var(--hex-mint); transform: rotate(45deg); }
.hex-cell.is-last { background: #fbecff; }
.hex-cell.is-path { background: #fff0ab; }
.hex-cell[aria-disabled="true"] { cursor: default; }
.hex-cell[aria-disabled="false"]:hover::before { background: #4d3b69; }
.hex-cell:focus-visible { outline: none; background: white; z-index: 2; }
.hex-cell:focus-visible::before { inset: 3px; }