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

:root {
  --title-color: var(--color-azul);
  /* The five Azul tile colours. */
  --azul-c0: #2563eb; /* blue */
  --azul-c1: #eab308; /* yellow */
  --azul-c2: #dc2626; /* red */
  --azul-c3: #1f2937; /* black */
  --azul-c4: #e5e7eb; /* white */
  --azul-cobalt: #174e77;
  --azul-clay: #b76f45;
  --azul-paper: #f4ebce;
}

.azul-board {
  --azul-board-hi: #1c4e62;
  --azul-board-mid: #123846;
  --azul-board-lo: #0d2936;
  --azul-board-border: #d7b15d;
  --azul-factory-hi: #f3e9cb;
  --azul-factory-mid: #9d7b48;
  --azul-factory-lo: #3b4c50;
  --azul-factory-border: #e3c370;
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.8vw, 0.65rem);
  min-height: 0;
  padding: clamp(0.35rem, 1vw, 0.75rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgb(255 244 207 / 5%) 0 1px, transparent 1px 1.2rem),
    linear-gradient(145deg, var(--azul-board-hi), var(--azul-board-mid) 54%, var(--azul-board-lo));
  border: 0.18rem solid var(--azul-board-border);
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(3 22 31 / 46%),
    inset 0 0 0 0.13rem rgb(255 237 175 / 30%);
}

.azul-board[data-visual-theme='arcade'] {
  --azul-board-hi: #4a1a44;
  --azul-board-mid: #2e102b;
  --azul-board-lo: #1a0919;
  --azul-board-border: #ff4fd8;
  --azul-factory-hi: #ffe1f7;
  --azul-factory-mid: #c65fa8;
  --azul-factory-lo: #3b1c37;
  --azul-factory-border: #ff8fe3;
}

.azul-board[data-visual-theme='midnight'] {
  --azul-board-hi: #1b3a52;
  --azul-board-mid: #10283b;
  --azul-board-lo: #0a1a27;
  --azul-board-border: #38bdf8;
  --azul-factory-hi: #e3f2fd;
  --azul-factory-mid: #4f8fb0;
  --azul-factory-lo: #1c3244;
  --azul-factory-border: #7fd4fb;
}

.azul-board[data-visual-theme='daylight'] {
  --azul-board-hi: #3c2a63;
  --azul-board-mid: #2a1d47;
  --azul-board-lo: #19112c;
  --azul-board-border: #7c3aed;
  --azul-factory-hi: #f1e9ff;
  --azul-factory-mid: #9d81c9;
  --azul-factory-lo: #372a54;
  --azul-factory-border: #b79bf0;
}

.azul-board[data-visual-theme='amber'] {
  --azul-board-hi: #5e3d10;
  --azul-board-mid: #3a2708;
  --azul-board-lo: #241705;
  --azul-board-border: #fbbf24;
  --azul-factory-hi: #ffedc2;
  --azul-factory-mid: #b98946;
  --azul-factory-lo: #40331a;
  --azul-factory-border: #f5cd6e;
}

/* ── Factories + centre ─────────────────────────────────────────────── */
.azul-factories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  align-items: center;
}

.azul-factory {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.18rem;
  padding: 0.3rem;
  background: radial-gradient(
    circle,
    var(--azul-factory-hi) 0 58%,
    var(--azul-factory-mid) 60% 66%,
    var(--azul-factory-lo) 68%
  );
  border: 0.12rem solid var(--azul-factory-border);
  border-radius: 50%;
}

.azul-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: var(--spacing-xs);
  background: rgb(8 37 45 / 54%);
  border: 1px dashed rgb(235 208 136 / 52%);
  border-radius: var(--border-radius-md);
}

.azul-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff6d6;
  background: linear-gradient(145deg, #d27283, #99344d);
  border-radius: var(--border-radius-sm);
}

/* ── Tiles ──────────────────────────────────────────────────────────── */
.azul-tile {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0.12rem solid rgb(255 247 216 / 55%);
  border-radius: 0.25rem;
  box-shadow:
    inset 0.13rem 0.14rem 0.2rem rgb(255 255 255 / 42%),
    inset -0.15rem -0.18rem 0.22rem rgb(0 0 0 / 30%),
    0 0.12rem 0.16rem rgb(0 0 0 / 28%);
  cursor: pointer;
}

.azul-tile:disabled {
  cursor: default;
}

.azul-tile--empty {
  background: rgb(228 211 162 / 12%);
  border-style: dashed;
  border-color: var(--line);
  box-shadow: none;
}

.azul-tile--c0 {
  background: radial-gradient(circle at 30% 24%, #9bd9f1, #267aad 48%, #124576);
}
.azul-tile--c1 {
  background: radial-gradient(circle at 30% 24%, #fff1a1, #e1ac2f 48%, #a66516);
}
.azul-tile--c2 {
  background: radial-gradient(circle at 30% 24%, #ffb0a0, #d24d40 48%, #852631);
}
.azul-tile--c3 {
  background: radial-gradient(circle at 30% 24%, #7891a2, #2a4358 48%, #132737);
}
.azul-tile--c4 {
  background: radial-gradient(circle at 30% 24%, #fffdf2, #e5ddbf 52%, #9f977d);
}

.azul-tile.is-selected {
  outline: 0.18rem solid #ffe58b;
  outline-offset: 1px;
  transform: scale(1.08);
}

/* ── Player boards ──────────────────────────────────────────────────── */
.azul-players {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.azul-player {
  --seat-accent: var(--color-azul);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.35rem;
  background: linear-gradient(135deg, rgb(255 247 219 / 18%), transparent 40%), #e4d8b4;
  border: 0.15rem solid #9b7342;
  border-radius: 0.6rem;
  box-shadow: 0 0.25rem 0.45rem rgb(0 0 0 / 28%);
}

.azul-player.is-active {
  border-color: #fff0a3;
  box-shadow:
    0 0 0 0.16rem var(--seat-accent),
    0 0.25rem 0.45rem rgb(0 0 0 / 28%);
}

.azul-player-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: #254454;
}

.azul-player-name {
  color: var(--seat-accent);
}

.azul-player-score {
  font-variant-numeric: tabular-nums;
}

.azul-player-main {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

/* Pattern lines: right-aligned rows of slots. */
.azul-patterns {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.azul-pattern-row {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  padding: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: default;
}

.azul-pattern-row.is-target {
  border-color: #c47831;
  background: rgb(222 170 77 / 24%);
  cursor: pointer;
}

.azul-slot {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgb(78 78 65 / 45%);
  border-radius: var(--border-radius-sm);
  background: rgb(78 93 85 / 16%);
}

/* The wall: fixed colour grid, faint until tiled. */
.azul-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgb(72 80 72 / 52%);
  background: rgb(72 92 86 / 16%);
  border-radius: var(--border-radius-sm);
}

.azul-wall-cell {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--border-radius-sm);
  opacity: 0.18;
  filter: grayscale(0.3);
}

.azul-wall-cell.is-filled {
  opacity: 1;
  filter: none;
  box-shadow: var(--shadow-xs);
}

/* Floor line. */
.azul-floor {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px var(--spacing-xs);
  font-size: 0.8rem;
  color: #46616a;
  background: rgb(93 110 96 / 10%);
  border: 1px dashed rgb(82 90 75 / 52%);
  border-radius: var(--border-radius-sm);
  cursor: default;
}

.azul-floor.is-target {
  border-color: #c47831;
  border-style: solid;
  background: rgb(222 170 77 / 24%);
  cursor: pointer;
}

.azul-floor.has-tiles {
  color: var(--azul-cobalt);
  font-weight: 700;
}

@media (min-width: 768px) and (max-height: 520px) {
  .azul-board {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .azul-factories {
    flex-wrap: nowrap;
    gap: 0.28rem;
  }

  .azul-factory {
    gap: 0.1rem;
    padding: 0.18rem;
  }

  .azul-center {
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0.2rem;
  }

  .azul-marker,
  .azul-tile,
  .azul-slot,
  .azul-wall-cell {
    width: 0.95rem;
    height: 0.95rem;
  }

  .azul-players {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  .azul-player {
    min-width: 0;
    flex: 1 1 0;
    gap: 0.12rem;
    padding: 0.22rem;
  }

  .azul-player-head,
  .azul-floor {
    font-size: 0.62rem;
  }

  .azul-player-main {
    gap: 0.25rem;
  }

  .azul-patterns {
    gap: 0.1rem;
  }

  .azul-pattern-row,
  .azul-wall {
    gap: 0.1rem;
    padding: 0.1rem;
  }
}