@import url('../global.css');
:root {
  --title-color: var(--color-jungle);
  --jungle-canopy: #294b35;
  --jungle-earth: #715034;
  --jungle-river: #27788a;
  --jungle-sun: #ecd176;
}

.jungle-board[data-visual-theme='arcade'] {
  --jungle-canopy: #7a2a6c;
  --jungle-earth: #4a2440;
  --jungle-river: #b03e94;
  --jungle-sun: #ff9ce8;
}

.jungle-board[data-visual-theme='midnight'] {
  --jungle-canopy: #123a55;
  --jungle-earth: #1c2a3a;
  --jungle-river: #1c5b82;
  --jungle-sun: #93d9fb;
}

.jungle-board[data-visual-theme='daylight'] {
  --jungle-canopy: #4a3a80;
  --jungle-earth: #3c2e5c;
  --jungle-river: #6b3fa0;
  --jungle-sun: #c3aeea;
}

.jungle-board[data-visual-theme='amber'] {
  --jungle-canopy: #6b4a12;
  --jungle-earth: #4a3312;
  --jungle-river: #8a5a12;
  --jungle-sun: #fde3a0;
}

.jungle-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 7 / 9;
  max-width: 100%;
  gap: clamp(0.12rem, 0.4vw, 0.28rem);
  padding: clamp(0.25rem, 0.8vw, 0.55rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(255 230 144 / 15%), transparent 30%),
    repeating-linear-gradient(90deg, rgb(56 36 20 / 22%) 0 0.17rem, transparent 0.17rem 0.62rem),
    #55331c;
  border: 0.25rem solid #75451f;
  border-radius: 0.9rem;
  box-shadow:
    0 0.85rem 1.6rem rgb(9 25 13 / 45%),
    inset 0 0 0 0.14rem rgb(228 184 92 / 35%);
}
.jungle-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(47 61 31 / 48%);
  border-radius: clamp(0.12rem, 0.35vw, 0.28rem);
  background:
    radial-gradient(circle at 18% 22%, rgb(215 232 143 / 28%) 0 5%, transparent 6%),
    radial-gradient(circle at 76% 67%, rgb(230 214 125 / 22%) 0 4%, transparent 5%),
    linear-gradient(145deg, #82904d, #526e3d 70%, #395632);
  color: #201b10;
  font: inherit;
  font-size: clamp(1.1rem, 7vw, 3.2rem);
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}
.jungle-cell:hover:not(:disabled),
.jungle-cell.is-selected {
  filter: brightness(1.18) saturate(1.08);
  transform: scale(1.04);
  z-index: 1;
}
.jungle-cell.is-river {
  background:
    repeating-linear-gradient(155deg, rgb(211 247 243 / 24%) 0 0.12rem, transparent 0.12rem 0.6rem),
    linear-gradient(145deg, #49a6af, var(--jungle-river) 65%, #1c5369);
  box-shadow: inset 0 0 0.7rem rgb(10 53 76 / 40%);
}
.jungle-cell.is-trap {
  background:
    repeating-linear-gradient(135deg, transparent 0 0.3rem, rgb(66 46 24 / 36%) 0.3rem 0.42rem),
    linear-gradient(145deg, #b99354, #765b2e);
}
.jungle-cell.is-den-red {
  background:
    radial-gradient(ellipse at 50% 68%, #3f2519 0 23%, transparent 24%),
    linear-gradient(145deg, #b44931, #713324);
}
.jungle-cell.is-den-blue {
  background:
    radial-gradient(ellipse at 50% 68%, #1b3443 0 23%, transparent 24%),
    linear-gradient(145deg, #3b7691, #24485c);
}
.jungle-cell.is-seat-0 {
  text-shadow:
    0 0.12rem 0 #fff1c9,
    0 0.2rem 0.22rem rgb(23 31 12 / 50%);
}
.jungle-cell.is-seat-1 {
  text-shadow:
    0 0.12rem 0 #dff7ef,
    0 0.2rem 0.22rem rgb(23 31 12 / 50%);
}
.jungle-cell.is-selected {
  outline: 0.18rem solid var(--jungle-sun);
  outline-offset: -0.18rem;
  box-shadow: 0 0 0.6rem rgb(255 218 107 / 65%);
}
.jungle-cell:disabled {
  cursor: default;
}
@media (min-width: 768px) {
  .jungle-board {
    gap: 3px;
    padding: 6px;
  }
}

@media (min-width: 768px) and (max-height: 520px) {
  .jungle-board {
    width: 100%;
    height: calc(100dvh - 8rem);
    margin-inline: auto;
    padding: 0.22rem;
  }

  .jungle-cell {
    font-size: 1rem;
  }
}