/* Shared chrome for every game: the picture fills the width of the screen and the touch controls
   float over the page beneath it. Colours are variables so a game restyles its controls by
   overriding them, and [data-theme="night"] (set by theme.js) swaps the whole set. A game that
   overrides the day values must override the night values too or its buttons stay day-coloured
   after dark.
   --bg is the page the picture sits on: on a tall phone the engine leaves a margin above and below
   the canvas, and that margin is --bg, so it must be a colour from the game's own palette. */
:root { --bg: #0f1220; --btn: #3a3f5c; --btn-shadow: #22253a; --act: #f7b731; --act-shadow: #b8841c; --btn-ink: #fff; --ctrl-pad: 16px; }
:root[data-theme="night"] { --bg: #06070f; --btn: #23263b; --btn-shadow: #111320; --act: #e0a324; --act-shadow: #8f6612; }
html, body { margin: 0; height: 100%; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; font-family: 'Grandstander', system-ui, sans-serif; font-weight: 800; }
body { background: var(--bg); transition: background .8s; }
#stage { position: fixed; inset: 0; overflow: hidden; }
/* The engine sets width/height/top; it needs the canvas out of flow so the leftover page shows
   through below the picture, where the buttons live. */
#stage canvas { display: block; position: absolute; left: 0; }

/* pointer-events stay off the strip itself so a tap on the page beside a button still reaches the
   picture underneath (tapping the picture = action). */
#controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--ctrl-pad) calc(var(--ctrl-pad) + env(safe-area-inset-bottom)); box-sizing: border-box; }
#controls .grp { display: flex; gap: 14px; }
#controls button { pointer-events: auto; -webkit-tap-highlight-color: transparent; border: 0; border-radius: 26px; width: 92px; height: 84px; font-size: 42px; color: var(--btn-ink); background: var(--btn); box-shadow: 0 6px 0 var(--btn-shadow); cursor: pointer; touch-action: none; display: flex; align-items: center; justify-content: center; transition: background .8s, box-shadow .8s; }
#controls button.act { background: var(--act); box-shadow: 0 6px 0 var(--act-shadow); width: 124px; font-size: 48px; }
#controls button.down { transform: translateY(5px); box-shadow: 0 1px 0 var(--btn-shadow); }
#controls button.act.down { box-shadow: 0 1px 0 var(--act-shadow); }
/* Narrow phones: three buttons plus gaps have to clear 360px of viewport. */
@media (max-width: 430px) { :root { --ctrl-pad: 10px; } #controls .grp { gap: 10px; } #controls button { width: 78px; height: 74px; font-size: 36px; border-radius: 22px; } #controls button.act { width: 104px; font-size: 42px; } }
/* Landscape: the picture reaches the bottom edge, so the buttons sit on top of it and shrink to
   cover as little of it as possible. */
@media (max-height: 520px) { #controls button { width: 76px; height: 68px; font-size: 32px; border-radius: 20px; } #controls button.act { width: 100px; font-size: 38px; } }