@font-face { font-family: EggTales; src: url('../res/Wiescher.ttf') format('truetype'); font-display: swap; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #162322; }
body { color: #fff0cc; font-family: system-ui, sans-serif; }
canvas { display: block; touch-action: none; -webkit-tap-highlight-color: transparent; }
#boot { position: fixed; inset: 0; display: grid; align-content: center; justify-items: center; gap: 18px; background: #162322; z-index: 20; }
#boot strong { font-family: EggTales, sans-serif; font-size: 64px; }
#controls { position: fixed; bottom: max(8px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 20px; background: #10201bd9; color: #fff0cc; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: .8; }
#toast { position: fixed; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 16px 24px; border-radius: 14px; background: #172c28f5; box-shadow: 0 4px 30px #0006; max-width: min(420px, 80vw); text-align: center; z-index: 30; }
@media (pointer: coarse) { #controls { display: none; } }