:root { color-scheme: dark; font-family: "Trebuchet MS", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0d172b; }
body { display: grid; place-items: center; }
#game-shell { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #172440; }
#game, #game canvas { width: 100% !important; height: 100% !important; display: block; }
#touch-controls { position: absolute; inset: auto 0 18px; display: flex; justify-content: space-between; align-items: end; padding: 0 22px; pointer-events: none; z-index: 10; }
#touch-controls > div { display: flex; gap: 12px; }
#touch-controls .sound-pad { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
#touch-controls button { pointer-events: auto; width: 70px; height: 70px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; color: #fff; font: 900 17px/1 inherit; background: rgba(15,30,53,.62); box-shadow: 0 5px 0 rgba(0,0,0,.28); backdrop-filter: blur(5px); touch-action: none; user-select: none; }
#touch-controls button:active, #touch-controls button.active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28); background: rgba(244,80,64,.85); }
#touch-controls .fly { width: 82px; height: 82px; background: rgba(224,57,50,.74); }
#touch-controls .lick { background: rgba(129,65,169,.72); }
#touch-controls .jump { background: rgba(40,115,160,.72); }
#touch-controls .mute { width: 56px; height: 56px; font-size: 24px; background: rgba(15,30,53,.72); }
@media (hover:hover) and (pointer:fine) { #touch-controls { opacity: .15; } #touch-controls:hover { opacity: 1; } }
@media (max-width: 650px) { #touch-controls { bottom: 10px; padding: 0 12px; } #touch-controls button { width: 54px; height: 54px; font-size: 14px; } #touch-controls > div { gap: 7px; } #touch-controls .fly { width: 64px; height: 64px; } #touch-controls .mute { width: 48px; height: 48px; font-size: 21px; } }