@import url('../global.css');
:root {
  --title-color: var(--color-santorini);
  --santorini-sea: #1d5f78;
  --santorini-deep: #123a55;
  --santorini-plaster: #eee5c4;
  --santorini-stone: #c8bea0;
  --santorini-sun: #edc15d;
}

.santorini-board[data-visual-theme='arcade'] {
  --santorini-sea: #b23f96;
  --santorini-deep: #3a1030;
  --santorini-plaster: #ffe3f6;
  --santorini-stone: #e3a8d1;
  --santorini-sun: #ff4fd8;
}

.santorini-board[data-visual-theme='midnight'] {
  --santorini-sea: #1c5f8a;
  --santorini-deep: #0b1220;
  --santorini-plaster: #dff1fd;
  --santorini-stone: #7fa7c2;
  --santorini-sun: #38bdf8;
}

.santorini-board[data-visual-theme='daylight'] {
  --santorini-sea: #7c5fc4;
  --santorini-deep: #2b1f4a;
  --santorini-plaster: #f3ecff;
  --santorini-stone: #c3aeea;
  --santorini-sun: #7c3aed;
}

.santorini-board[data-visual-theme='amber'] {
  --santorini-sea: #a16b20;
  --santorini-deep: #2b1a06;
  --santorini-plaster: #fff0d2;
  --santorini-stone: #d8ad6c;
  --santorini-sun: #fbbf24;
}

.santorini-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: clamp(0.18rem, 0.55vw, 0.4rem);
  padding: clamp(0.35rem, 1.1vw, 0.8rem);
  margin: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgb(247 223 153 / 55%), transparent 31%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 0.8rem),
    linear-gradient(145deg, #5b9daf, var(--santorini-sea) 58%, var(--santorini-deep));
  border: 0.2rem solid #d6b864;
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(4 28 45 / 48%),
    inset 0 0 0 0.15rem rgb(255 246 198 / 36%),
    inset 0 -2rem 2.8rem rgb(6 47 69 / 34%);
}
.santorini-cell {
  aspect-ratio: 1;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(89 79 53 / 46%);
  border-radius: clamp(0.2rem, 0.55vw, 0.4rem);
  color: #736540;
  background:
    linear-gradient(135deg, rgb(255 255 241 / 48%), transparent 36%),
    linear-gradient(145deg, var(--santorini-plaster), var(--santorini-stone));
  box-shadow:
    inset 0 0 0 0.12rem rgb(255 252 227 / 34%),
    inset 0 -0.35rem 0.5rem rgb(83 77 54 / 24%),
    0 0.16rem 0.25rem rgb(7 39 52 / 28%);
  font-size: clamp(0.65rem, 1.1vw, 0.9rem);
  font-weight: 700;
  cursor: pointer;
}
.santorini-cell[data-level='1'] {
  background:
    linear-gradient(to top, rgb(197 187 150 / 72%) 0 28%, transparent 28%),
    linear-gradient(135deg, rgb(255 255 241 / 48%), transparent 36%),
    linear-gradient(145deg, var(--santorini-plaster), var(--santorini-stone));
}
.santorini-cell[data-level='2'] {
  background:
    linear-gradient(to top, rgb(173 163 128 / 82%) 0 50%, transparent 50%),
    linear-gradient(135deg, rgb(255 255 241 / 48%), transparent 36%),
    linear-gradient(145deg, var(--santorini-plaster), var(--santorini-stone));
}
.santorini-cell[data-level='3'] {
  background:
    linear-gradient(to top, rgb(123 135 139 / 92%) 0 72%, transparent 72%),
    linear-gradient(135deg, rgb(255 255 241 / 48%), transparent 36%),
    linear-gradient(145deg, var(--santorini-plaster), var(--santorini-stone));
}
.santorini-cell.is-dome {
  color: #ecf4ea;
  background:
    radial-gradient(circle at 50% 72%, #73b9ca 0 30%, transparent 31%),
    linear-gradient(135deg, #eff7ee, #8bc6d2);
  box-shadow:
    inset 0 0 0 0.16rem rgb(255 255 240 / 68%),
    0 0.16rem 0.25rem rgb(7 39 52 / 28%);
}
.santorini-cell.is-p0,
.santorini-cell.is-p1 {
  color: white;
  font-size: clamp(1rem, 3.2vw, 1.75rem);
  text-shadow: 0 0.12rem 0.12rem rgb(0 0 0 / 45%);
}
.santorini-cell.is-p0 {
  color: #164c82;
}
.santorini-cell.is-p1 {
  color: #c7552f;
}
.santorini-cell.is-move-target,
.santorini-cell.is-build-target {
  outline: 0.18rem solid var(--santorini-sun);
  outline-offset: -0.18rem;
  box-shadow: 0 0 0.7rem rgb(255 223 125 / 58%);
}

.santorini-cell[data-level='0']:not(.is-p0):not(.is-p1) {
  color: transparent;
}

@media (min-width: 768px) and (max-height: 520px) {
  .santorini-board {
    width: 100%;
    margin-inline: auto;
    padding: 0.3rem;
  }
}