/* ==========================================================================
   Tower Tock — only what's unique to this game.
   Shared game styles are in /assets/css/game-shell.css.
   ========================================================================== */

/* 2:3 board that always fits on screen */
.game[data-game="tower-tock"] {
  --game-color: var(--cat-casual);   /* color of the score bar */
  max-width: max(280px, min(460px, calc((100svh - 190px) / 1.5)));
}
.game[data-game="tower-tock"] .game__stage { aspect-ratio: 2 / 3; cursor: pointer; touch-action: manipulation; }
.game[data-game="tower-tock"] .game-overlay { cursor: auto; }

/* Board colors (read by game.js) */
#tower { display: block; width: 100%; height: 100%; --tt-bg: #FBF7F0; --tt-grid: rgb(27 42 65 / 0.12); --tt-line: #1B2A41; --tt-text: #1B2A41; }
[data-theme="dark"] #tower { --tt-bg: #1D2940; --tt-grid: rgb(244 236 221 / 0.1); --tt-line: #0B111B; --tt-text: #F4ECDD; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tower { --tt-bg: #1D2940; --tt-grid: rgb(244 236 221 / 0.1); --tt-line: #0B111B; --tt-text: #F4ECDD; }
}