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

:root {
  --title-color: var(--color-minigolf);
}
.minigolf-board {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.5rem, 1.8vmin, 1.1rem);
  border: clamp(5px, 0.9vmin, 9px) solid #59402e;
  border-radius: 2.2rem 2.2rem 1rem 1rem;
  background:
    linear-gradient(165deg, transparent 0 72%, #172d3a 72%),
    repeating-linear-gradient(90deg, #243c49 0 46px, #1b303c 46px 50px);
  box-shadow:
    inset 0 0 0 3px #c9a76a,
    inset 0 0 30px #071017aa,
    0 18px 38px #05090c88;

  /* Canvas palette tokens: read at runtime by MinigolfDOMRenderer via
     getComputedStyle (see src/games/minigolf/MinigolfDOMRenderer.ts) so the 4 app
     color themes can recolor the green/terrain/obstacles. Authentic (no
     [data-visual-theme]) keeps the original values. Ball color is never themed. */
  --minigolf-grass-start: #286b46;
  --minigolf-grass-mid: #4f9b61;
  --minigolf-grass-end: #1e5b3d;
  --minigolf-stripe: #e8f4c8;
  --minigolf-water: #287b9c;
  --minigolf-water-ripple: #8bd6dc;
  --minigolf-obstacle-base: #7f6750;
  --minigolf-obstacle-top: #bd9b6d;
  --minigolf-obstacle-border: #403127;
}

.minigolf-board[data-visual-theme='arcade'] {
  --minigolf-grass-start: #5c1f66;
  --minigolf-grass-mid: #a238c9;
  --minigolf-grass-end: #341046;
  --minigolf-stripe: #ffd8f4;
  --minigolf-water: #7a2f8a;
  --minigolf-water-ripple: #ffb3ec;
  --minigolf-obstacle-base: #4a1a52;
  --minigolf-obstacle-top: #e660b2;
  --minigolf-obstacle-border: #1c0a22;
}

.minigolf-board[data-visual-theme='midnight'] {
  --minigolf-grass-start: #14304f;
  --minigolf-grass-mid: #24384f;
  --minigolf-grass-end: #0a1420;
  --minigolf-stripe: #d6ecff;
  --minigolf-water: #1c5c78;
  --minigolf-water-ripple: #38bdf8;
  --minigolf-obstacle-base: #1c2c3e;
  --minigolf-obstacle-top: #477897;
  --minigolf-obstacle-border: #070d17;
}

.minigolf-board[data-visual-theme='daylight'] {
  --minigolf-grass-start: #6a5a94;
  --minigolf-grass-mid: #9c8cd8;
  --minigolf-grass-end: #4a3d6e;
  --minigolf-stripe: #f3e8ff;
  --minigolf-water: #7c3aed;
  --minigolf-water-ripple: #c4b5fd;
  --minigolf-obstacle-base: #5a4c78;
  --minigolf-obstacle-top: #a78bfa;
  --minigolf-obstacle-border: #2c2440;
}

.minigolf-board[data-visual-theme='amber'] {
  --minigolf-grass-start: #6a4a1c;
  --minigolf-grass-mid: #8a5a1e;
  --minigolf-grass-end: #402a10;
  --minigolf-stripe: #ffe1a3;
  --minigolf-water: #8a5a1e;
  --minigolf-water-ripple: #fbbf24;
  --minigolf-obstacle-base: #402a10;
  --minigolf-obstacle-top: #e5a836;
  --minigolf-obstacle-border: #1f1408;
}
.minigolf-board::before {
  content: '';
  position: absolute;
  inset: 4% 3% auto;
  height: 24%;
  opacity: 0.48;
  background: linear-gradient(
    90deg,
    transparent 2%,
    #ffcf6c 2% 3%,
    transparent 3% 13%,
    #ffcf6c 13% 14%,
    transparent 14% 28%,
    #ffcf6c 28% 29%,
    transparent 29%
  );
  clip-path: polygon(
    0 80%,
    8% 48%,
    15% 69%,
    22% 15%,
    31% 62%,
    41% 38%,
    49% 75%,
    58% 20%,
    67% 64%,
    76% 43%,
    85% 72%,
    92% 28%,
    100% 80%,
    100% 100%,
    0 100%
  );
}
.minigolf-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 80 / 46;
  border: 4px solid #d2b16f;
  border-radius: 2rem;
  background: #397e54;
  box-shadow:
    inset 0 0 22px #0d2d1daa,
    0 10px 26px #050b0daa;
  touch-action: none;
  cursor: crosshair;
}
@media (max-height: 500px) and (orientation: landscape) {
  .minigolf-board {
    padding: 0.3rem;
    border-width: 4px;
    border-radius: 1rem;
  }
  .minigolf-canvas {
    border-width: 3px;
    border-radius: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .minigolf-canvas {
    scroll-behavior: auto;
  }
}