@import url('../global.css');

:root {
  --title-color: var(--color-hex);
  --hex-basalt: #1d282b;
  --hex-slate: #304448;
  --hex-copper: #bf6946;
  --hex-turquoise: #3d9694;
  --hex-rim: #c99a5b;
}

.hex-board[data-visual-theme='arcade'] {
  --hex-basalt: #240f2b;
  --hex-slate: #401a4a;
  --hex-rim: #e660b2;
}

.hex-board[data-visual-theme='midnight'] {
  --hex-basalt: #0d1420;
  --hex-slate: #1c2c40;
  --hex-rim: #91a9c4;
}

.hex-board[data-visual-theme='daylight'] {
  --hex-basalt: #2c1d10;
  --hex-slate: #4a3320;
  --hex-rim: #d4a754;
}

.hex-board[data-visual-theme='amber'] {
  --hex-basalt: #1f1404;
  --hex-slate: #3a2708;
  --hex-rim: #e5a836;
}

.hex-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  container-type: inline-size;
  gap: clamp(0.12rem, 0.45vw, 0.35rem);
  padding: clamp(0.4rem, 1.2vw, 0.8rem);
  background:
    radial-gradient(circle at 18% 14%, rgb(156 199 192 / 15%), transparent 30%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 0.55rem), #131d20;
  border: 0.18rem solid var(--hex-rim);
  border-radius: 0.9rem;
  box-shadow:
    0 0.8rem 1.5rem rgb(3 11 12 / 50%),
    inset 0 0 0 0.14rem rgb(239 202 135 / 14%);
}

.hex-cell {
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 32% 24%, rgb(154 193 188 / 12%), transparent 42%),
    linear-gradient(135deg, var(--hex-slate), var(--hex-basalt));
  color: var(--text-color);
  font: inherit;
  font-size: clamp(0.8rem, 8cqw, 3rem);
  font-weight: 800;
  cursor: pointer;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  text-shadow: 0 0.1em 0 rgb(0 0 0 / 25%);
  transition:
    filter 0.14s ease,
    transform 0.14s ease;
}

.hex-cell:disabled {
  cursor: default;
}

.hex-cell.is-seat-0 {
  background:
    radial-gradient(circle at 34% 25%, rgb(255 215 167 / 60%) 0 9%, transparent 10%),
    linear-gradient(135deg, #d68159, var(--hex-copper) 58%, #713928);
  color: #fff0c8;
  text-shadow:
    0 0.1em 0 #743829,
    0 0.15em 0.18em rgb(37 13 9 / 34%);
}

.hex-cell.is-seat-1 {
  background:
    radial-gradient(circle at 34% 25%, rgb(206 247 233 / 54%) 0 9%, transparent 10%),
    linear-gradient(135deg, #5bb9b2, var(--hex-turquoise) 58%, #1f545a);
  color: #edfff6;
  text-shadow:
    0 0.1em 0 #24595b,
    0 0.15em 0.18em rgb(8 35 37 / 35%);
}

.hex-cell:not(:disabled):hover,
.hex-cell:not(:disabled):focus-visible {
  filter: brightness(1.24);
  outline: 0.12rem solid var(--hex-rim);
  outline-offset: -0.12rem;
  transform: scale(1.025);
}