@import url('../global.css');
:root {
  --title-color: var(--color-bowling);
}
.bowling-board {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.35rem, 1vw, 0.8rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, #d84c5c33, transparent 32%),
    linear-gradient(145deg, #1b1118, #43252e 55%, #180f15);
  border: 2px solid #8b5235;
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px #140c10,
    inset 0 0 30px #0008,
    0 12px 30px #0005;

  /* Canvas palette tokens: read at runtime by BowlingDOMRenderer via
     getComputedStyle (see src/games/bowling/BowlingDOMRenderer.ts) so the 4 app
     color themes can recolor the lane/gutter. Authentic (no [data-visual-theme])
     keeps the original values. Pin colors are never themed. */
  --bowling-lane-top: #c98745;
  --bowling-lane-bottom: #efc67f;
  --bowling-gutter: #3a1d24;
  --bowling-gutter-dark: #25141a;
  --bowling-lane-marking: #9d642f55;
  --bowling-foul-mark: #6b302e;
}

.bowling-board[data-visual-theme='arcade'] {
  --bowling-lane-top: #5c1f66;
  --bowling-lane-bottom: #e660b2;
  --bowling-gutter: #1c0a2e;
  --bowling-gutter-dark: #160c24;
  --bowling-lane-marking: #ff9becaa;
  --bowling-foul-mark: #7a2f8a;
}

.bowling-board[data-visual-theme='midnight'] {
  --bowling-lane-top: #24384f;
  --bowling-lane-bottom: #91a9c4;
  --bowling-gutter: #0a1420;
  --bowling-gutter-dark: #07131e;
  --bowling-lane-marking: #477897aa;
  --bowling-foul-mark: #2c4a63;
}

.bowling-board[data-visual-theme='daylight'] {
  --bowling-lane-top: #9c8cd8;
  --bowling-lane-bottom: #e8dcff;
  --bowling-gutter: #4a3d6e;
  --bowling-gutter-dark: #3a2f5a;
  --bowling-lane-marking: #a78bfaaa;
  --bowling-foul-mark: #5b3aa0;
}

.bowling-board[data-visual-theme='amber'] {
  --bowling-lane-top: #6a4a1c;
  --bowling-lane-bottom: #fbbf24;
  --bowling-gutter: #241708;
  --bowling-gutter-dark: #1f1408;
  --bowling-lane-marking: #e5a836aa;
  --bowling-foul-mark: #8a5a1e;
}
.bowling-board::before,
.bowling-board::after {
  content: '';
  position: absolute;
  top: 5%;
  width: 10%;
  height: 90%;
  background: repeating-linear-gradient(0deg, #e2ad5c 0 3px, transparent 3px 24px);
  opacity: 0.25;
}
.bowling-board::before {
  left: 2%;
}
.bowling-board::after {
  right: 2%;
}
.bowling-tools {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm);
}

.bowling-hook-btn {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  border: 2px solid #8b5235;
  border-radius: 999px;
  background: linear-gradient(145deg, #1b1118, #43252e 55%, #180f15);
  color: #f8f0de;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.bowling-hook-btn:hover {
  background: linear-gradient(145deg, #241620, #533042 55%, #211219);
}

.bowling-hook-btn.hook-right {
  transform: rotate(18deg);
}

.bowling-hook-btn.hook-left {
  transform: rotate(-18deg);
}

.bowling-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 21/38;
  touch-action: none;
  user-select: none;
  border: 3px solid #d7a05a;
  border-radius: 1rem;
  box-shadow:
    0 0 0 5px #241218,
    0 12px 25px #0008;
}