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

:root {
  --title-color: var(--color-coup);
}

/* ── Board container ───────────────────────────────────────────────────── */
.coup-board {
  --coup-ink: #120f13;
  --coup-paper: #eadab8;
  --coup-wax: #7f2633;
  --coup-gold: #d4a34a;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.3vw, 1rem);
  padding: clamp(0.65rem, 1.4vw, 1.15rem);
  border: 0.3rem solid #2a2020;
  outline: 1px solid rgb(212 163 74 / 58%);
  outline-offset: -0.62rem;
  background:
    radial-gradient(circle at 50% 45%, rgb(112 31 38 / 34%), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 5.7rem, rgb(255 232 174 / 4%) 5.8rem 5.9rem),
    linear-gradient(135deg, #282027, var(--coup-ink) 62%, #21161a);
  box-shadow:
    inset 0 0 0 0.17rem rgb(0 0 0 / 48%),
    inset 0 0 3rem rgb(0 0 0 / 46%),
    0 1rem 2rem rgb(0 0 0 / 28%);
  overflow-y: auto;
}

.coup-board[data-visual-theme='arcade'] {
  --coup-ink: #1a0f1c;
  --coup-paper: #f4d8ea;
  --coup-wax: #ff4fd8;
  --coup-gold: #ff9fe8;
}

.coup-board[data-visual-theme='midnight'] {
  --coup-ink: #0a1420;
  --coup-paper: #d8e8f4;
  --coup-wax: #38bdf8;
  --coup-gold: #7dd3fc;
}

.coup-board[data-visual-theme='daylight'] {
  --coup-ink: #241a33;
  --coup-paper: #f1e9fb;
  --coup-wax: #7c3aed;
  --coup-gold: #c4a4f7;
}

.coup-board[data-visual-theme='amber'] {
  --coup-ink: #1c1204;
  --coup-paper: #f4e3c4;
  --coup-wax: #fbbf24;
  --coup-gold: #f2c96b;
}

/* ── Player area ───────────────────────────────────────────────────────── */
.coup-players {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  justify-content: center;
}

.coup-player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  gap: 0.38rem;
  padding: 0.55rem;
  border: 1px solid rgb(234 218 184 / 27%);
  border-radius: 0.3rem;
  background: linear-gradient(145deg, rgb(49 39 43 / 96%), rgb(25 19 24 / 97%));
  box-shadow:
    inset 0 0 0 0.12rem rgb(0 0 0 / 42%),
    0 0.4rem 0.8rem rgb(0 0 0 / 26%);
  min-width: clamp(7.1rem, 12vw, 9.6rem);
  transition:
    border-color var(--ease-ui),
    translate var(--ease-ui),
    box-shadow var(--ease-ui);
}

.coup-player.is-current {
  border-color: var(--coup-gold);
  box-shadow:
    inset 0 0 0 0.12rem rgb(255 232 174 / 12%),
    0 0 0 1px rgb(212 163 74 / 45%),
    0 0.45rem 1rem rgb(0 0 0 / 30%);
  translate: 0 -0.12rem;
}

.coup-player.is-eliminated {
  opacity: 0.4;
}

.coup-player-label {
  color: var(--coup-paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.coup-cards {
  display: flex;
  gap: 0.32rem;
}

.coup-card {
  position: relative;
  width: clamp(2.85rem, 5vw, 3.8rem);
  height: clamp(4.2rem, 7vw, 5.35rem);
  border: 1px solid rgb(40 24 20 / 75%);
  border-radius: 0.18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #f6ebcf, var(--coup-paper));
  box-shadow:
    inset 0 0 0 0.13rem rgb(94 53 35 / 18%),
    0 0.22rem 0.34rem rgb(0 0 0 / 30%);
  color: #3a251f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.57rem, 0.9vw, 0.72rem);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-xxs);
  line-height: 1.2;
  overflow-wrap: anywhere;
  user-select: none;
}

.coup-card.is-hidden {
  border-color: #2e141b;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 21%,
      rgb(238 201 129 / 38%) 22% 24%,
      transparent 25%
    ),
    linear-gradient(45deg, transparent 46%, rgb(238 201 129 / 12%) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgb(238 201 129 / 12%) 47% 53%, transparent 54%),
    linear-gradient(135deg, #8a303b, #421826);
  box-shadow:
    inset 0 0 0 0.16rem rgb(255 227 170 / 17%),
    inset 0 0 0 0.32rem rgb(31 9 15 / 33%),
    0 0.22rem 0.34rem rgb(0 0 0 / 34%);
  color: rgb(255 233 184 / 58%);
  font-size: 1.1rem;
}

.coup-card.is-dead {
  background: linear-gradient(135deg, #4b4541, #252124);
  color: rgb(234 218 184 / 54%);
  opacity: 0.45;
  text-decoration: line-through;
}

.coup-card.is-alive {
  background: linear-gradient(135deg, #fff5d8, #ddc89d);
}

/* Role colours: border accent only (no extra token needed) */
.coup-card.role-duke {
  border-top: 0.25rem solid #c68a2d;
  color: #875210;
}
.coup-card.role-assassin {
  border-top: 0.25rem solid #9a2c33;
  color: #702127;
}
.coup-card.role-captain {
  border-top: 0.25rem solid #36658a;
  color: #244762;
}
.coup-card.role-ambassador {
  border-top: 0.25rem solid #487c57;
  color: #31553d;
}
.coup-card.role-contessa {
  border-top: 0.25rem solid #784c82;
  color: #57365e;
}

.coup-card.is-dead.role-duke,
.coup-card.is-dead.role-assassin,
.coup-card.is-dead.role-captain,
.coup-card.is-dead.role-ambassador,
.coup-card.is-dead.role-contessa {
  color: var(--card-ink-muted);
  border-top-color: var(--line);
}

/* ── Coins ─────────────────────────────────────────────────────────────── */
.coup-coins {
  color: #f0c15e;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.coup-eliminated {
  font-size: var(--font-size-xs);
  color: var(--danger);
  font-weight: var(--font-weight-bold);
}

/* ── Center felt (status + actions) ───────────────────────────────────── */
.coup-felt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.5vw, 1rem);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  border: 1px solid rgb(234 218 184 / 12%);
  background: radial-gradient(circle at 50% 50%, rgb(116 35 45 / 20%), transparent 53%);
}

.coup-status {
  max-width: 38rem;
  color: var(--coup-paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.8rem, 1.25vw, 1rem);
  text-align: center;
  min-height: 1.5rem;
}

/* ── Action buttons ────────────────────────────────────────────────────── */
.coup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  max-width: 600px;
}

.coup-btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(234 218 184 / 46%);
  border-radius: 0.24rem;
  background: linear-gradient(#42343a, #241d25);
  box-shadow:
    inset 0 1px rgb(255 244 210 / 10%),
    0 0.2rem 0.4rem rgb(0 0 0 / 28%);
  color: var(--coup-paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  cursor: pointer;
  transition:
    filter var(--ease-ui),
    translate var(--ease-ui);
}

.coup-btn:not(:disabled):hover,
.coup-btn:not(:disabled):focus-visible {
  filter: brightness(1.18);
  translate: 0 -1px;
}

.coup-btn.is-primary {
  border-color: #c49347;
  background: linear-gradient(#9a3440, #5a1f2b);
  color: #fff1cb;
}

.coup-btn.is-primary:hover {
  opacity: 0.88;
}

.coup-btn.is-danger {
  border-color: #d76c63;
  background: linear-gradient(#9c3034, #53171e);
  color: #fff3db;
}

.coup-btn.is-danger:hover {
  opacity: 0.88;
}

.coup-exchange-hint {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgb(234 218 184 / 72%);
  margin-bottom: var(--spacing-xs);
}

.coup-action--income {
  border-color: rgb(212 163 74 / 72%);
}
.coup-action--foreignAid {
  border-color: rgb(184 207 218 / 62%);
}
.coup-action--tax {
  border-color: rgb(198 138 45 / 72%);
}
.coup-action--steal {
  border-color: rgb(93 144 180 / 70%);
}
.coup-action--exchange {
  border-color: rgb(102 151 115 / 70%);
}

@media (max-height: 500px) and (orientation: landscape) {
  .coup-board {
    gap: 0.38rem;
    padding: 0.48rem;
    border-width: 0.22rem;
  }
  .coup-players {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  .coup-player {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.35rem 0.22rem;
  }
  .coup-card {
    width: 2.25rem;
    height: 3.55rem;
    font-size: 0.53rem;
  }
  .coup-cards {
    gap: 0.18rem;
  }
  .coup-player-label,
  .coup-coins {
    font-size: 0.62rem;
  }
  .coup-felt {
    gap: 0.38rem;
    padding: 0.34rem;
  }
  .coup-status {
    min-height: 1rem;
    font-size: 0.72rem;
  }
  .coup-actions {
    gap: 0.28rem;
  }
  .coup-btn {
    min-height: 2.45rem;
    padding: 0.32rem 0.46rem;
    font-size: 0.66rem;
  }
}