@font-face { font-family: Oxanium; src: url('assets/fonts/oxanium.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; background: #030e14; font-family: Oxanium, system-ui, sans-serif; }
.stage { position: relative; width: min(100vw, 56.25dvh); aspect-ratio: 9 / 16; overflow: hidden; background: #086578; box-shadow: 0 0 90px #0c56642b; }
canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; color: #dcf9f9; background: #073c4b; font-size: 14px; }
#loading[hidden] { display: none; }
.hint { position: absolute; bottom: 9px; left: 0; right: 0; color: #d6f4f3b8; text-align: center; font-size: 10px; letter-spacing: .08em; pointer-events: none; text-shadow: 0 1px 5px #032b35; animation: fade-hint 1s 8s forwards; }
.hint span { margin-left: 10px; opacity: .65; }
@keyframes fade-hint { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.image-button { position: absolute; border: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.image-button:focus-visible { outline: 2px solid #d4fff6; outline-offset: -4px; }
.pause-button { left: 86.85%; top: 2.1%; width: 11.1%; height: 6.25%; }
.sound-button { left: 3.7%; width: 11.1%; height: 6.25%; }
.fire-button { left: 39.26%; top: 85.52%; width: 21.48%; height: 11.67%; }
#pause-screen { position: absolute; inset: 0; background: #031f39a6; backdrop-filter: blur(7px); display: grid; place-items: center; }
#pause-screen[hidden], #tilt[hidden] { display: none; }
.pause-card { text-align: center; width: 66%; color: #e9fff6; border: 1px solid #81e4d080; padding: 30px 20px; border-radius: 48% 42% 46% 40% / 25% 30% 26% 30%; background: radial-gradient(ellipse at top, #278f9499, #052c41ed); box-shadow: inset 0 0 25px #76e4d626, 0 15px 50px #00192380; }
.eyebrow { letter-spacing: .22em; font-size: 10px; color: #a6dfd9; }
h1 { font-weight: 500; margin: 15px 0 22px; }
#resume, #tilt { border: 1px solid #9ce8d875; border-radius: 22px; color: #edfff4; background: #125663e8; padding: 10px 22px; cursor: pointer; font: inherit; }
#tilt { position: absolute; bottom: 4.5%; left: 4%; font-size: 10px; padding: 9px 12px; max-width: 31%; }
#motion-status { position: absolute; bottom: 1%; left: 4%; width: 31%; color: #e0f5ef; font-size: 9px; margin: 0; pointer-events: none; }
@media (pointer: coarse) { .hint { display: none; } }