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

:root {
  --title-color: var(--color-timberman);
  --timberman-frame: #21130f;
  --timberman-frame-highlight: rgba(251, 191, 36, 0.3);
  --timberman-canvas-shadow: rgba(2, 6, 23, 0.38);
  --timberman-background-top: #132b27;
  --timberman-background-bottom: #315b3e;
  --timberman-mist: rgba(186, 230, 190, 0.12);
  --timberman-moon: rgba(254, 240, 195, 0.85);
  --timberman-tree-silhouette: rgba(7, 34, 29, 0.68);
}

.timberman-board[data-visual-theme='arcade'] {
  --timberman-frame: #24081e;
  --timberman-background-top: #2b0f2c;
  --timberman-background-bottom: #5a1f4a;
  --timberman-mist: rgba(255, 143, 216, 0.12);
  --timberman-moon: rgba(255, 216, 240, 0.85);
  --timberman-tree-silhouette: rgba(23, 7, 20, 0.68);
}

.timberman-board[data-visual-theme='midnight'] {
  --timberman-frame: #0d1420;
  --timberman-background-top: #101927;
  --timberman-background-bottom: #23344a;
  --timberman-mist: rgba(186, 210, 230, 0.12);
  --timberman-moon: rgba(240, 246, 254, 0.85);
  --timberman-tree-silhouette: rgba(7, 15, 26, 0.68);
}

.timberman-board[data-visual-theme='daylight'] {
  --timberman-frame: #2c1d10;
  --timberman-background-top: #4a3320;
  --timberman-background-bottom: #8a5a2c;
  --timberman-mist: rgba(255, 227, 168, 0.14);
  --timberman-moon: rgba(255, 249, 230, 0.85);
  --timberman-tree-silhouette: rgba(28, 18, 10, 0.68);
}

.timberman-board[data-visual-theme='amber'] {
  --timberman-frame: #1f1404;
  --timberman-background-top: #3a2708;
  --timberman-background-bottom: #6b4a12;
  --timberman-mist: rgba(255, 207, 138, 0.14);
  --timberman-moon: rgba(255, 240, 200, 0.85);
  --timberman-tree-silhouette: rgba(20, 13, 3, 0.68);
}

.timberman-board {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: var(--timberman-frame);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px var(--timberman-frame-highlight),
    inset 0 0 1.5rem rgb(0 0 0 / 44%),
    var(--game-board-shadow);
  touch-action: manipulation;
  user-select: none;
}

.timberman-canvas {
  display: block;
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  box-shadow: 0 0.8rem 2rem var(--timberman-canvas-shadow);
  filter: saturate(1.04) contrast(1.03);
  touch-action: manipulation;
  user-select: none;
}