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

:root {
  --title-color: var(--color-konane);
  --konane-light: #d9c69a;
  --konane-dark: #344e4b;
  --konane-basalt: #172a2b;
  --konane-coral: #d47a59;
  --konane-shell: #f5ecd8;
}

.konane-board[data-visual-theme='arcade'] {
  --konane-basalt: #2c0f26;
  --konane-coral: #ff4fd8;
}

.konane-board[data-visual-theme='midnight'] {
  --konane-basalt: #0e1f30;
  --konane-coral: #38bdf8;
}

.konane-board[data-visual-theme='daylight'] {
  --konane-basalt: #3c2670;
  --konane-coral: #7c3aed;
}

.konane-board[data-visual-theme='amber'] {
  --konane-basalt: #2c1c05;
  --konane-coral: #fbbf24;
}

.konane-board {
  display: grid;
  grid-template-columns: repeat(var(--konane-size, 8), 1fr);
  grid-template-rows: repeat(var(--konane-size, 8), minmax(0, 1fr));
  gap: 0;
  /* Square board sized by the shared .game-board mechanic (width:100% +
     aspect-ratio + flex shrink). No per-game dvh cap: it over-subtracted the
     shell reserve and left a bottom gap. */
  place-content: center;
  padding: clamp(0.28rem, 0.8vw, 0.55rem);
  background:
    radial-gradient(circle at 18% 16%, rgb(110 170 153 / 20%), transparent 31%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 0.55rem),
    var(--konane-basalt);
  border: 0.18rem solid var(--konane-coral);
  border-radius: 0.82rem;
  box-shadow:
    0 0.75rem 1.5rem rgb(4 18 18 / 48%),
    inset 0 0 0 0.14rem rgb(255 211 151 / 15%);
  overflow: hidden;
}

.konane-cell {
  position: relative;
  min-height: 0;
  aspect-ratio: auto;
  border: none;
  background: linear-gradient(135deg, rgb(255 247 205 / 18%), transparent 60%), var(--konane-light);
  cursor: pointer;
}
.konane-cell.is-dark {
  background: linear-gradient(135deg, rgb(167 218 193 / 10%), transparent 60%), var(--konane-dark);
}
.konane-cell:disabled {
  cursor: default;
}

.konane-cell.is-seat-0::after,
.konane-cell.is-seat-1::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  box-shadow:
    inset 0 -0.15rem 0.24rem rgb(0 0 0 / 48%),
    0 0.12rem 0.18rem rgb(0 0 0 / 28%);
}
.konane-cell.is-seat-0::after {
  background:
    radial-gradient(circle at 34% 26%, rgb(188 222 213 / 35%) 0 9%, transparent 10%),
    radial-gradient(circle, #31484a, #142226 66%); /* volcanic stone */
}
.konane-cell.is-seat-1::after {
  background:
    radial-gradient(circle at 34% 26%, #fff 0 9%, transparent 10%),
    radial-gradient(circle, var(--konane-shell), #cbb992 67%); /* shell stone */
}

.konane-cell.is-selected::after {
  box-shadow: 0 0 0 0.18rem var(--konane-coral);
}
.konane-cell.is-target {
  box-shadow: inset 0 0 0 0.18rem rgb(230 175 103 / 82%);
}

.konane-cell:not(:disabled):hover,
.konane-cell:not(:disabled):focus-visible {
  outline: 0.14rem solid var(--konane-coral);
  outline-offset: -0.14rem;
}

@media (min-width: 768px) and (max-height: 520px) {
  .konane-board {
    width: 100%;
    margin-inline: auto;
  }
}