/* Tailwind — per-game styles. Everything else comes from ../shared/chrome.css
   and ../shared/tokens.css: the palette, the Inter face, the page chrome, the
   canvas wrapper and the splash behaviour all live there.

   splash-desktop.jpg is 1520x1200, exactly the ratio of the 760x600 frame, so
   cover-sizing crops nothing at all. splash-mobile.jpg is 1170x2532; on that
   aspect a cover crop leaves 82% of the width safe, and the wordmark measures
   76%, so it does not clip on a narrow phone. */
body.mode-desktop .splash { background-image: url('./splash-desktop.jpg?v=1'); }
body.mode-mobile  .splash { background-image: url('./splash-mobile.jpg?v=1'); }

#game { display: block; touch-action: none; cursor: grab; }
#game:active { cursor: grabbing; }