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

/* =============================================================================
   Teeko — a polished slate slab rather than a flat grid: veined dark stone
   squares under a brass frame, with the two colours cast as glossy glass
   marbles (amber vs deep jade) instead of plain colour discs.
   ========================================================================== */

:root {
  --title-color: var(--color-teeko);
  --teeko-slate: #2a2f36;
  --teeko-slate-dark: #1b1e23;
  --teeko-vein: rgba(255, 255, 255, 0.05);
}

/* Color theme overrides (see src/shared/ui/visualTheme.ts): recolor the slate slab;
   the amber/jade marble tokens (var(--color-teeko)/var(--accent)) stay untouched. */
.teeko-board[data-visual-theme='arcade'] {
  --teeko-slate: #3a1444;
  --teeko-slate-dark: #220a2b;
  --teeko-vein: rgba(255, 160, 235, 0.1);
}

.teeko-board[data-visual-theme='midnight'] {
  --teeko-slate: #16283f;
  --teeko-slate-dark: #0b1826;
  --teeko-vein: rgba(159, 228, 255, 0.08);
}

.teeko-board[data-visual-theme='daylight'] {
  --teeko-slate: #d9d0f2;
  --teeko-slate-dark: #c1b5e8;
  --teeko-vein: rgba(60, 30, 110, 0.08);
}

.teeko-board[data-visual-theme='amber'] {
  --teeko-slate: #3a2a10;
  --teeko-slate-dark: #241a09;
  --teeko-vein: rgba(255, 225, 163, 0.08);
}

.teeko-board {
  display: grid;
  grid-template-columns: repeat(var(--teeko-size, 5), 1fr);
  grid-template-rows: repeat(var(--teeko-size, 5), 1fr);
  gap: 4px;
  aspect-ratio: 1;
  place-content: center;
  padding: var(--spacing-sm);
  background: linear-gradient(155deg, #8a6a2e, #5c4415);
  border: 3px solid color-mix(in srgb, black 35%, #5c4415);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    var(--shadow);
}

.teeko-cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: var(--border-radius-sm);
  background:
    repeating-linear-gradient(115deg, var(--teeko-vein) 0 1px, transparent 1px 22px),
    linear-gradient(155deg, var(--teeko-slate), var(--teeko-slate-dark));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

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

/* Marbles: a bright specular highlight over a deep saturated core. */
.teeko-cell.is-seat-0::after,
.teeko-cell.is-seat-1::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    0 2px 3px rgba(0, 0, 0, 0.5);
}
.teeko-cell.is-seat-0::after {
  background: radial-gradient(
    circle at 32% 28%,
    #ffe8b0,
    var(--color-teeko) 60%,
    color-mix(in srgb, black 30%, var(--color-teeko))
  );
}
.teeko-cell.is-seat-1::after {
  background: radial-gradient(
    circle at 32% 28%,
    #c8f5e6,
    var(--accent) 60%,
    color-mix(in srgb, black 30%, var(--accent))
  );
}

.teeko-cell.is-selected {
  box-shadow: 0 0 0 3px var(--color-teeko) inset;
}
.teeko-cell.is-target {
  background: color-mix(in srgb, var(--color-teeko) 30%, var(--teeko-slate));
}