:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0f22; color: #f4efe1; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; touch-action: none; }
body { display: flex; flex-direction: column; height: 100dvh; }
.stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: #0d0f22; }
canvas { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #1b1f3a; outline: none; }

/* Touch controls float over the bottom of the canvas on coarse-pointer devices. */
.touch { position: absolute; left: 0; right: 0; bottom: 0; display: none; justify-content: space-between; align-items: flex-end; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; }
.touch .cluster { display: flex; gap: 10px; align-items: center; }
.touch button { pointer-events: auto; width: 58px; height: 58px; border-radius: 50%; font: 700 20px ui-monospace, Menlo, monospace; color: #f4efe1; background: rgba(27, 31, 58, 0.72); border: 2px solid rgba(245, 197, 66, 0.85); box-shadow: 0 2px 0 rgba(13, 15, 34, 0.8); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.touch button.wide { width: 78px; border-radius: 29px; font-size: 13px; letter-spacing: 1px; }
.touch button:active { background: rgba(47, 163, 139, 0.85); }
@media (pointer: coarse) { .touch { display: flex; } }

.fallback { position: absolute; left: 0; right: 0; top: 40%; text-align: center; padding: 24px; }
.fallback a { color: #f5c542; }

.site-footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 11px; letter-spacing: 0.04em; color: #8d97b8; background: #0d0f22; border-top: 1px solid #1b1f3a; touch-action: auto; }
.site-footer a { color: #f4efe1; text-decoration: none; border-bottom: 1px solid #5a6480; white-space: nowrap; }
.site-footer a:hover { color: #f5c542; border-color: #f5c542; }
.site-footer .sep { color: #5a6480; }
@media (pointer: coarse) { .site-footer { padding-bottom: 8px; } }