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

:root {
  --title-color: var(--color-carcassonne);
  --carc-city: #aa6640;
  --carc-road: #d9c398;
  --carc-field: #789c52;
  --carc-monastery: #7c718a;
  --carc-ink: #253b36;
  --carc-gold: #dbb667;
  --carc-felt: #45695c;
}

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

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

.carc-player {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.15rem 0.6rem;
  border: 1px solid rgb(221 197 132 / 42%);
  border-radius: 2rem;
  background: linear-gradient(145deg, rgb(55 87 75 / 94%), rgb(28 58 51 / 94%));
  color: #f2e6bd;
  font-size: 0.85rem;
  font-weight: 600;
}

.carc-player-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--seat-color);
  box-shadow: 0 0 0.3rem var(--seat-color);
}

.carc-player.is-active {
  border-color: #ffe69a;
  box-shadow:
    0 0 0 0.14rem var(--seat-color),
    0 0 0.6rem rgb(255 216 111 / 32%);
}

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

.carc-board {
  display: grid;
  gap: 2px;
  padding: clamp(0.4rem, 1.1vw, 0.8rem);
  background:
    radial-gradient(circle at 50% 50%, rgb(233 210 150 / 13%), transparent 46%),
    repeating-linear-gradient(135deg, rgb(255 244 212 / 5%) 0 1px, transparent 1px 0.8rem),
    linear-gradient(145deg, var(--carc-felt), var(--carc-ink));
  border: 0.2rem solid var(--carc-gold);
  border-radius: 1rem;
  box-shadow:
    0 0.8rem 1.6rem rgb(4 18 15 / 42%),
    inset 0 0 0 0.13rem rgb(255 234 165 / 28%);
}

.carc-board[data-visual-theme='arcade'] {
  --carc-ink: #2a1229;
  --carc-felt: #7a2f6e;
  --carc-gold: #ff8fe0;
}

.carc-board[data-visual-theme='midnight'] {
  --carc-ink: #0e2130;
  --carc-felt: #1f4d68;
  --carc-gold: #7dd3fc;
}

.carc-board[data-visual-theme='daylight'] {
  --carc-ink: #2c1f42;
  --carc-felt: #5a4184;
  --carc-gold: #c4a4f7;
}

.carc-board[data-visual-theme='amber'] {
  --carc-ink: #2e1c04;
  --carc-felt: #6b4a12;
  --carc-gold: #f2c96b;
}

.carc-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  background: transparent;
}

.carc-cell.is-tile {
  background:
    radial-gradient(circle at 20% 24%, rgb(236 224 154 / 28%) 0 6%, transparent 7%),
    radial-gradient(circle at 76% 72%, rgb(47 86 49 / 22%) 0 5%, transparent 6%), var(--carc-field);
  border: 0.13rem solid #60472c;
  box-shadow:
    inset 0 0 0 0.1rem rgb(255 244 197 / 20%),
    0 0.2rem 0.28rem rgb(0 0 0 / 28%);
  overflow: hidden;
}

.carc-cell.is-last {
  outline: 0.18rem solid #fff0a5;
  outline-offset: -0.18rem;
  box-shadow: 0 0 0.7rem rgb(255 215 102 / 55%);
}

.carc-cell.is-playable {
  cursor: pointer;
  border: 1px dashed rgb(236 218 157 / 42%);
  background: rgb(201 215 170 / 8%);
}

.carc-cell.is-ready {
  border: 0.16rem dashed #ffde78;
  background: rgb(230 184 84 / 24%);
}

/* Edge zones: a plus-shaped strip per side + a centre square. */
.carc-zone {
  position: absolute;
}

.carc-zone--n {
  top: 0;
  left: 30%;
  width: 40%;
  height: 40%;
}

.carc-zone--s {
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 40%;
}

.carc-zone--w {
  left: 0;
  top: 30%;
  width: 40%;
  height: 40%;
}

.carc-zone--e {
  right: 0;
  top: 30%;
  width: 40%;
  height: 40%;
}

.carc-center {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
}

.carc-city {
  background:
    repeating-linear-gradient(
      135deg,
      rgb(255 222 157 / 20%) 0 0.12rem,
      transparent 0.12rem 0.42rem
    ),
    var(--carc-city);
}

.carc-road {
  background: linear-gradient(90deg, #9a805b, var(--carc-road) 33% 67%, #9a805b);
}

.carc-field {
  background:
    repeating-linear-gradient(
      135deg,
      rgb(244 231 159 / 17%) 0 0.12rem,
      transparent 0.12rem 0.42rem
    ),
    var(--carc-field);
}

.carc-monastery {
  background: linear-gradient(145deg, #c7b8a4, var(--carc-monastery));
  border: 1px solid rgb(255 239 185 / 44%);
  border-radius: 0.18rem;
}

/* ─── Meeples ───────────────────────────────────────────────────────────────── */

.carc-meeple {
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  border: 0.12rem solid #fff6d2;
  box-shadow: 0 0.14rem 0.25rem rgb(0 0 0 / 48%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.carc-meeple.carc-zone--n {
  top: 18%;
  left: 50%;
}

.carc-meeple.carc-zone--s {
  top: 82%;
  left: 50%;
}

.carc-meeple.carc-zone--w {
  top: 50%;
  left: 18%;
}

.carc-meeple.carc-zone--e {
  top: 50%;
  left: 82%;
}

.carc-meeple.carc-zone--c {
  top: 50%;
  left: 50%;
}

/* ─── Action panel ──────────────────────────────────────────────────────────── */

.carc-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: var(--spacing-sm);
  min-height: 3.5rem;
}

.carc-hint {
  font-weight: 600;
  color: #f2dfaa;
}

.carc-preview {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
}

.carc-btn {
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgb(241 218 146 / 54%);
  border-radius: 0.55rem;
  background: linear-gradient(145deg, #b07a3e, #71472b);
  color: #fff5ce;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.carc-btn:hover {
  border-color: #fff0a1;
}

.carc-btn--skip {
  color: #eee0bd;
}

.carc-btn--rotate {
  border-color: #e4bd62;
}

@media (min-width: 768px) and (max-height: 520px) {
  .carc-players {
    gap: 0.2rem;
    margin-bottom: 0.25rem;
  }

  .carc-player {
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
  }

  .carc-board {
    width: 100%;
    margin-inline: auto;
    padding: 0.28rem;
  }

  .carc-action {
    min-height: 2.75rem;
    margin-top: 0.25rem;
    gap: 0.35rem;
  }

  .carc-hint {
    font-size: 0.72rem;
  }

  .carc-preview {
    width: 2.5rem;
    height: 2.5rem;
  }
}