@import url('../global.css');
:root {
  --title-color: var(--color-billiards);
}
.billiards-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, #e2b66b22, transparent 35%),
    linear-gradient(145deg, #140d09, #3c2415 55%, #120b08);
  border: 2px solid #80502d;
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 4px #160d08,
    inset 0 0 28px #0009,
    0 12px 30px #0005;

  /* Canvas palette tokens: read at runtime by BilliardsDOMRenderer via
     getComputedStyle (see src/games/billiards/BilliardsDOMRenderer.ts) so the 4
     app color themes can recolor the felt/rail. Authentic (no [data-visual-theme])
     keeps the original values. Ball colors are never themed. */
  --billiards-felt-start: #24765a;
  --billiards-felt-end: #0d4838;
  --billiards-rail: #d1ae68;
  --billiards-pocket-rim: #8f6435;
}

.billiards-board[data-visual-theme='arcade'] {
  --billiards-felt-start: #5c1f66;
  --billiards-felt-end: #250c30;
  --billiards-rail: #e660b2;
  --billiards-pocket-rim: #7a2f8a;
}

.billiards-board[data-visual-theme='midnight'] {
  --billiards-felt-start: #24384f;
  --billiards-felt-end: #0a1420;
  --billiards-rail: #91a9c4;
  --billiards-pocket-rim: #2c4a63;
}

.billiards-board[data-visual-theme='daylight'] {
  --billiards-felt-start: #6a5a94;
  --billiards-felt-end: #362d54;
  --billiards-rail: #a78bfa;
  --billiards-pocket-rim: #5b3aa0;
}

.billiards-board[data-visual-theme='amber'] {
  --billiards-felt-start: #6a4a1c;
  --billiards-felt-end: #26190a;
  --billiards-rail: #e5a836;
  --billiards-pocket-rim: #8a5a1e;
}
.billiards-board::before {
  content: 'LUDORA BILLIARDS CLUB';
  position: absolute;
  top: 4%;
  color: #d8b87555;
  font: 800 clamp(0.65rem, 1.5vw, 1rem) serif;
  letter-spacing: 0.35em;
}
.billiards-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 40/21;
  touch-action: none;
  user-select: none;
  border: clamp(8px, 1.3vw, 16px) solid #6b3d20;
  border-radius: 1.1rem;
  box-shadow:
    inset 0 0 0 4px #bd8c4d,
    0 0 0 4px #1d1009,
    0 15px 25px #0009;
}