:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090617; }
body { display: grid; place-items: center; font-family: system-ui, sans-serif; touch-action: manipulation; }
#shell { position: relative; width: min(100vw, calc(100vh * .5625)); aspect-ratio: 9 / 16; }
#game { display: block; width: 100%; height: 100%; cursor: pointer; image-rendering: auto; }
#brand-link { position: absolute; top: 12.5%; right: 3%; z-index: 2; padding: 8px 13px; border: 1px solid #bf9bed; border-radius: 999px; background: #20143bcc; color: #fff1c8; font-size: clamp(8px, 2vw, 13px); font-weight: 800; letter-spacing: .05em; text-decoration: none; box-shadow: 0 2px 10px #0008; }
#brand-link:hover, #brand-link:focus-visible { background: #4c3181; outline: 2px solid #ffe29c; outline-offset: 2px; }
#touch-controls { position: absolute; right: 2%; bottom: 2%; display: flex; gap: 8px; }
#touch-controls button { width: 42px; height: 42px; border: 1px solid #8d79c9; border-radius: 50%; background: #201846d9; color: #fff; font-size: 22px; box-shadow: 0 2px 10px #0008; }
#touch-controls button:active { transform: scale(.92); background: #51339a; }
@media (hover: hover) and (pointer: fine) { #touch-controls { opacity: .6; } #touch-controls:hover { opacity: 1; } }