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

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

body {
  background:
    radial-gradient(circle at 50% 18%, rgba(108, 187, 214, 0.2), transparent 34%),
    linear-gradient(160deg, #102b3c 0%, #071923 58%, #061219 100%);
}

.curling-board {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(8px, 1.5vw, 20px);
  background: linear-gradient(145deg, #264b60, #0e2838 65%, #091b26);
  border: 1px solid rgba(174, 224, 240, 0.34);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 18px 44px rgba(1, 12, 18, 0.42);

  /* Canvas palette tokens: read at runtime by CurlingDOMRenderer via
     getComputedStyle (see src/games/curling/CurlingDOMRenderer.ts) so the 4 app
     color themes can recolor the ice sheet/house. Authentic (no [data-visual-theme])
     keeps the original values. Stone colors are never themed. */
  --curling-ice-top: #f9fdff;
  --curling-ice-mid: #dff3f8;
  --curling-ice-bottom: #f7fcfd;
  --curling-hack: #16354a;
  --curling-hogline: #2e6682;
  --curling-house-outer: #23659a;
  --curling-house-white: #f7fbfc;
  --curling-house-button: #c94343;
  --curling-club-text: #17384d;
}

.curling-board[data-visual-theme='arcade'] {
  --curling-ice-top: #2a1638;
  --curling-ice-mid: #3a1d4a;
  --curling-ice-bottom: #24132e;
  --curling-hack: #4a1a52;
  --curling-hogline: #a238c9;
  --curling-house-outer: #e660b2;
  --curling-house-white: #ffd8f4;
  --curling-house-button: #7a2f8a;
  --curling-club-text: #ffb3ec;
}

.curling-board[data-visual-theme='midnight'] {
  --curling-ice-top: #0e1c2c;
  --curling-ice-mid: #16283c;
  --curling-ice-bottom: #0a1622;
  --curling-hack: #101b2c;
  --curling-hogline: #38bdf8;
  --curling-house-outer: #477897;
  --curling-house-white: #d6ecff;
  --curling-house-button: #2c4a63;
  --curling-club-text: #9fd8ff;
}

.curling-board[data-visual-theme='daylight'] {
  --curling-ice-top: #f3e8ff;
  --curling-ice-mid: #e3d4fb;
  --curling-ice-bottom: #ede1fb;
  --curling-hack: #5a4c78;
  --curling-hogline: #a78bfa;
  --curling-house-outer: #7c3aed;
  --curling-house-white: #f3e8ff;
  --curling-house-button: #5b3aa0;
  --curling-club-text: #4c2f8c;
}

.curling-board[data-visual-theme='amber'] {
  --curling-ice-top: #2a1706;
  --curling-ice-mid: #402a10;
  --curling-ice-bottom: #241708;
  --curling-hack: #402a10;
  --curling-hogline: #e5a836;
  --curling-house-outer: #fbbf24;
  --curling-house-white: #ffe1a3;
  --curling-house-button: #8a5a1e;
  --curling-club-text: #ffe1a3;
}

.curling-board::before,
.curling-board::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.curling-board::before {
  inset: 5px 12%;
  border-top: 4px solid #b88a48;
  border-bottom: 4px solid #b88a48;
  opacity: 0.75;
}
.curling-board::after {
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 84px,
    rgba(255, 255, 255, 0.025) 84px 86px
  );
}

.curling-sheet {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 15 / 7;
  border: clamp(5px, 0.7vw, 10px) solid #d9e5e9;
  border-radius: 7px;
  box-shadow:
    0 7px 20px rgba(0, 13, 20, 0.42),
    inset 0 0 20px rgba(61, 151, 182, 0.18);
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.curling-tools {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm);
}

.curling-turn-btn {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  border: 1px solid rgba(174, 224, 240, 0.34);
  border-radius: 999px;
  background: linear-gradient(145deg, #264b60, #0e2838 65%, #091b26);
  color: #f7fbfc;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.curling-turn-btn:hover {
  background: linear-gradient(145deg, #2e5a72, #123449 65%, #0c222f);
}

.curling-turn-btn.is-out {
  transform: scaleX(-1);
}

@media (max-height: 520px) {
  .curling-board {
    padding: 6px 10px;
  }
  .curling-sheet {
    position: absolute;
    width: auto;
    height: calc(100% - 12px);
    max-width: calc(100% - 20px);
  }
}