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

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

/* Terrain palette tokens: read at runtime by CrossyroadCanvasRenderer (2D canvas)
   and CrossyroadThreeRenderer (3D floor materials) via getComputedStyle (see
   src/games/crossyroad/CrossyroadCanvasRenderer.ts and CrossyroadThreeRenderer.ts)
   so the 4 app color themes can recolor the grass/road/river/rail scenery.
   Authentic (no [data-visual-theme]) keeps the original values. Car/train/log
   and player colors stay fixed — they signal gameplay state, not scenery. */
.crossyroad-board[data-visual-theme='arcade'] {
  --crossyroad-grass: #4a1440;
  --crossyroad-grass-light: #ff4fd8;
  --crossyroad-road: #24081e;
  --crossyroad-road-edge: #3a0f34;
  --crossyroad-river: #7a1f6a;
  --crossyroad-river-light: #ffb3ec;
  --crossyroad-rail: #5c2350;
  --crossyroad-rail-tie: #170714;
}

.crossyroad-board[data-visual-theme='midnight'] {
  --crossyroad-grass: #123456;
  --crossyroad-grass-light: #38bdf8;
  --crossyroad-road: #0a1729;
  --crossyroad-road-edge: #0b1d3a;
  --crossyroad-river: #123a56;
  --crossyroad-river-light: #7dd3fc;
  --crossyroad-rail: #2c4a63;
  --crossyroad-rail-tie: #050c1a;
}

.crossyroad-board[data-visual-theme='daylight'] {
  --crossyroad-grass: #8a9a3a;
  --crossyroad-grass-light: #d4c754;
  --crossyroad-road: #6b5738;
  --crossyroad-road-edge: #8a7048;
  --crossyroad-river: #3a94b8;
  --crossyroad-river-light: #7ec8e3;
  --crossyroad-rail: #a1835a;
  --crossyroad-rail-tie: #4a3a24;
}

.crossyroad-board[data-visual-theme='amber'] {
  --crossyroad-grass: #6b4a12;
  --crossyroad-grass-light: #fbbf24;
  --crossyroad-road: #241503;
  --crossyroad-road-edge: #402a10;
  --crossyroad-river: #7a4a1a;
  --crossyroad-river-light: #ffb84d;
  --crossyroad-rail: #5a3a0f;
  --crossyroad-rail-tie: #1a1004;
}

.crossyroad-board {
  position: relative;
  width: 100%;
  aspect-ratio: var(--game-board-aspect);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: #0284c7;
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.32),
    0 0 0 1px rgba(134, 239, 172, 0.18);
}

.crossyroad-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}

.crossyroad-board__hint {
  position: absolute;
  inset: 1rem 1rem auto;
  z-index: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}