/* game.css - letterboxed 16:9 canvas, integer-scaled by render.js, overlay on top, FCP footer. Readable at 360px. */
:root { --bg: #0b0a08; --fg: #d8d2c4; --muted: #8d867a; --accent: #f0c24a; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; font: 14px/1.4 system-ui, sans-serif; }
#game { position: relative; width: 100vw; max-width: calc((100dvh - 38px) * 16 / 9); aspect-ratio: 16 / 9; max-height: calc(100dvh - 38px); flex: 0 0 auto; margin-bottom: 38px; background: #000; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#overlay > * { pointer-events: auto; }
/* portrait phones: the game box is full width (360px wide -> ~202px tall); the rest is letterbox, footer sits under it */
.fcp { position: fixed; left: 0; right: 0; bottom: 0; padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); background: rgba(11, 10, 8, 0.82); color: var(--muted); font-size: 10px; line-height: 1.3; text-align: center; max-height: 3.4em; overflow: hidden; z-index: 5; }
.fcp p { margin: 0; }
.fcp a { color: var(--muted); }
.fcp:hover, .fcp:focus-within { max-height: none; overflow: visible; }
@media (max-width: 480px) { .fcp { font-size: 9px; } }
@media (min-width: 900px) and (min-aspect-ratio: 16/9) { #game { width: auto; height: calc(100dvh - 38px); } }
noscript { color: var(--fg); padding: 16px; }