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

:root {
  --title-color: var(--color-sequence);
  /* Green felt card table with printed card faces and casino chips. */
  --seq-felt: #0f4d34;
  --seq-felt-dark: #0a3624;
  --seq-card-face: #f4ecd8;
  --seq-card-edge: #c9bb98;
}

/* ─── Players strip ───────────────────────────────────────────────────────── */

.seq-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.seq-player {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.seq-player-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--seat-color);
}

.seq-player.is-active {
  border-color: var(--seat-color);
  box-shadow: 0 0 0 2px var(--seat-color);
}

/* ─── Board ───────────────────────────────────────────────────────────────── */

.seq-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: var(--spacing-xs);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 3px, transparent 3px 6px),
    var(--seq-felt);
  border: 6px solid var(--seq-felt-dark);
  border-radius: var(--border-radius-lg);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.seq-board[data-visual-theme='arcade'] {
  --seq-felt: #6e1f5e;
  --seq-felt-dark: #3a0f30;
}

.seq-board[data-visual-theme='midnight'] {
  --seq-felt: #144a66;
  --seq-felt-dark: #0a2638;
}

.seq-board[data-visual-theme='daylight'] {
  --seq-felt: #5423a8;
  --seq-felt-dark: #2c1258;
}

.seq-board[data-visual-theme='amber'] {
  --seq-felt: #7a5410;
  --seq-felt-dark: #402a08;
}

.seq-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--seq-card-edge);
  border-radius: 3px;
  background: var(--seq-card-face);
  color: var(--text-color);
  font: inherit;
  cursor: default;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.seq-cell:not(:disabled) {
  cursor: pointer;
}

.seq-cell.is-free {
  background: linear-gradient(160deg, #fff6e0, var(--seq-card-face));
}

.seq-cell-label {
  font-size: clamp(0.45rem, 1.4vw, 0.85rem);
  font-weight: 700;
  line-height: 1;
  color: #4a3d28;
  pointer-events: none;
}

.seq-cell-label.is-red {
  color: var(--danger);
}

.seq-cell.is-free .seq-cell-label {
  color: var(--color-sequence);
}

/* Chip sits on top of the card label. */
.seq-chip {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: transform 0.12s ease;
}

.seq-chip.is-on {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.4);
  transform: scale(1);
}

.seq-cell.is-last .seq-chip.is-on {
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 25%),
    0 0 0 2px var(--accent);
}

.seq-cell.is-locked {
  border-color: var(--color-sequence);
}

/* Highlight the cells the selected card can act on. */
.seq-cell.is-target {
  border-color: var(--color-sequence);
  box-shadow: inset 0 0 0 2px var(--color-sequence);
}

.seq-cell.is-removable {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}

/* ─── Hand ────────────────────────────────────────────────────────────────── */

.seq-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.seq-card {
  min-width: 2.4rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--seq-card-edge);
  border-radius: var(--border-radius-md);
  background: linear-gradient(160deg, #fff6e0 0%, var(--seq-card-face) 100%);
  color: #4a3d28;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.12s ease,
    border-color 0.12s ease;
}

.seq-card.is-red {
  color: var(--danger);
}

.seq-card.is-wild {
  border-color: var(--color-sequence);
}

.seq-card.is-remove {
  border-style: dashed;
}

.seq-card.is-selected {
  border-color: var(--color-sequence);
  box-shadow: 0 0 0 2px var(--color-sequence);
  transform: translateY(-4px);
}

.seq-card:disabled {
  opacity: 0.45;
  cursor: default;
}