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

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

.towerdefense-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  padding: clamp(0.35rem, 1vw, 0.75rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgb(216 170 79 / 18%), transparent 35%),
    linear-gradient(145deg, #17130f, #2f2419 58%, #16120e);
  border: 2px solid #6d4c2d;
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px #1a140f,
    inset 0 0 26px rgb(0 0 0 / 55%),
    0 10px 28px rgb(0 0 0 / 30%);

  /* Canvas palette tokens: read at runtime by TowerdefenseDOMRenderer via
     getComputedStyle (see src/games/towerdefense/TowerdefenseDOMRenderer.ts) so the
     4 app color themes can recolor the terrain/path. Authentic (no [data-visual-theme])
     keeps the original values. Tower and enemy sprite colors are never themed. */
  --towerdefense-grass-start: #234c3a;
  --towerdefense-grass-mid: #457055;
  --towerdefense-grass-end: #183c32;
  --towerdefense-speckle: #e0c885;
  --towerdefense-path-base: #5b402b;
  --towerdefense-path-top: #c4a56c;
  --towerdefense-path-dash: #edd49b66;
  --towerdefense-shed-wall: #b98949;
  --towerdefense-shed-window: #39271f;
}

.towerdefense-board[data-visual-theme='arcade'] {
  --towerdefense-grass-start: #341046;
  --towerdefense-grass-mid: #5c1f66;
  --towerdefense-grass-end: #1c0a2e;
  --towerdefense-speckle: #ff9bec;
  --towerdefense-path-base: #4a1a52;
  --towerdefense-path-top: #e660b2;
  --towerdefense-path-dash: #ffb3ec66;
  --towerdefense-shed-wall: #7a2f8a;
  --towerdefense-shed-window: #1c0a22;
}

.towerdefense-board[data-visual-theme='midnight'] {
  --towerdefense-grass-start: #14202f;
  --towerdefense-grass-mid: #24384f;
  --towerdefense-grass-end: #0a1420;
  --towerdefense-speckle: #91a9c4;
  --towerdefense-path-base: #1c2c3e;
  --towerdefense-path-top: #477897;
  --towerdefense-path-dash: #9fe4ff66;
  --towerdefense-shed-wall: #2c4a63;
  --towerdefense-shed-window: #070d17;
}

.towerdefense-board[data-visual-theme='daylight'] {
  --towerdefense-grass-start: #6a5a94;
  --towerdefense-grass-mid: #9c8cd8;
  --towerdefense-grass-end: #4a3d6e;
  --towerdefense-speckle: #e8dcff;
  --towerdefense-path-base: #5a4c78;
  --towerdefense-path-top: #a78bfa;
  --towerdefense-path-dash: #c4b5fd66;
  --towerdefense-shed-wall: #7c3aed;
  --towerdefense-shed-window: #2c2440;
}

.towerdefense-board[data-visual-theme='amber'] {
  --towerdefense-grass-start: #402a10;
  --towerdefense-grass-mid: #6a4a1c;
  --towerdefense-grass-end: #241708;
  --towerdefense-speckle: #ffe1a3;
  --towerdefense-path-base: #402a10;
  --towerdefense-path-top: #e5a836;
  --towerdefense-path-dash: #fbbf2466;
  --towerdefense-shed-wall: #8a5a1e;
  --towerdefense-shed-window: #1f1408;
}

.towerdefense-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 20 / 11;
  touch-action: manipulation;
  user-select: none;
  border: 2px solid #ad7e45;
  border-radius: calc(var(--border-radius-lg) - 0.25rem);
  box-shadow:
    inset 0 0 32px rgb(0 0 0 / 28%),
    0 0 0 3px #20170f;
}

.towerdefense-controls {
  display: grid;
  gap: clamp(0.35rem, 1vh, 0.65rem);
  align-content: center;
}

.towerdefense-controls button {
  width: clamp(3.25rem, 6vw, 4.5rem);
  min-height: 48px;
  padding: 0.45rem;
  color: #f6dfad;
  font:
    800 clamp(0.82rem, 1.8vw, 1rem) / 1 system-ui,
    sans-serif;
  cursor: pointer;
  background: linear-gradient(145deg, #4a3523, #241912);
  border: 2px solid #80603d;
  border-radius: 0.75rem;
  box-shadow:
    inset 0 1px #d4ad6a55,
    0 3px 0 #100b08;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    filter 120ms ease;
}

.towerdefense-controls button:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.towerdefense-controls button.is-selected {
  color: #1f1710;
  background: linear-gradient(145deg, #f0cf83, #b57938);
  border-color: #ffe2a0;
  box-shadow:
    inset 0 1px #fff3c8,
    0 0 0 2px #51341e,
    0 3px 0 #100b08;
}
.towerdefense-controls button:disabled {
  cursor: default;
  filter: saturate(0.4);
  opacity: 0.6;
}
.towerdefense-wave {
  color: #e7fff2 !important;
  background: linear-gradient(145deg, #396e50, #173527) !important;
  border-color: #74ae80 !important;
}

@media (max-height: 430px) {
  .towerdefense-board {
    padding: 0.3rem;
  }
  .towerdefense-controls button {
    min-height: 44px;
  }
}