/* Layout: one dark stage, the game canvas centred at an integer pixel scale, touch pad overlaid on phones. */
:root{
  --night:#0b0810; --ink:#120c14; --stone:#8f817a; --cape:#4a4680; --moon:#f5d98b; --clay:#c27a3a;
  --pixel:'Silkscreen', 'Courier New', monospace; --body:'Pixelify Sans', 'Trebuchet MS', sans-serif;
  color-scheme:dark;
}
html,body{height:100%;background:var(--night);color:var(--moon)}
body{margin:0;overflow:hidden;padding-block:0;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));box-sizing:border-box;font-family:var(--body);-webkit-user-select:none;user-select:none;touch-action:none}
#stage{position:relative;width:100%;height:100%;display:grid;place-items:center}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--ink);outline:none;max-width:100%;box-shadow:0 0 0 1px #241b2c, 0 20px 60px #00000080}
#game:focus-visible{box-shadow:0 0 0 2px var(--cape)}
#pad{position:absolute;inset:0;pointer-events:none;display:none}
body.touch #pad{display:block}
.grp{position:absolute;bottom:max(14px, env(safe-area-inset-bottom, 0px));display:grid;gap:8px;pointer-events:auto}
.dpad{left:max(18px, env(safe-area-inset-left, 0px));grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px)}
.acts{right:max(18px, env(safe-area-inset-right, 0px));grid-template-columns:repeat(2,62px);grid-template-rows:repeat(2,52px)}
.tops{top:max(10px, env(safe-area-inset-top, 0px));bottom:auto;right:max(18px, env(safe-area-inset-right, 0px));grid-auto-flow:column;grid-auto-columns:52px;grid-template-rows:34px}
#pad button{font:700 11px var(--pixel);letter-spacing:.06em;color:#f5d98bcc;background:#1c1524b8;border:1px solid #4a468099;border-radius:10px;touch-action:none;padding:0}
#pad button.on{background:#4a4680d0;color:#fff2c4}
.dpad [data-act=up]{grid-column:2;grid-row:1}
.dpad [data-act=left]{grid-column:1;grid-row:2}
.dpad [data-act=down]{grid-column:2;grid-row:2}
.dpad [data-act=right]{grid-column:3;grid-row:2}
@media (prefers-reduced-motion: reduce){ #game{scroll-behavior:auto} }