html,body,#root{width:100%;height:100%;background:#000;overflow:hidden}canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}@font-face{font-family:BrunoAce;src:url(/fonts/BrunoAce-Regular.ttf) format("truetype");font-weight:400}.holo-overlay{position:fixed;inset:0;background:#000a14bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-family:BrunoAce;z-index:999;transition:opacity .6s ease}.fade-out{opacity:0}.holo-panel{border:1px solid rgba(0,255,255,.4);padding:3rem;width:90%;max-width:500px;text-align:center;color:#0ff;background:#00ffff0d;box-shadow:0 0 30px #0ff6,inset 0 0 30px #0ff3;border-radius:12px;animation:holoFlicker 3s infinite alternate}.holo-title{letter-spacing:2px;margin-bottom:2rem;font-weight:300}.row{display:flex;justify-content:center}.key{width:60px;height:60px;margin:6px;border:1px solid rgba(0,255,255,.5);display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:18px;box-shadow:0 0 15px #00ffff4d;animation:keyPulse 1.5s infinite ease-in-out}.holo-caption{margin-top:1rem;font-size:14px;opacity:.8;letter-spacing:2px}.holo-start{margin-top:2rem;font-size:12px;letter-spacing:3px;opacity:.6;animation:pulseText 2s infinite}.joystick-demo{width:120px;height:120px;border:1px solid rgba(0,255,255,.6);border-radius:50%;margin:0 auto;position:relative;box-shadow:0 0 20px #0ff6}.stick{width:50px;height:50px;background:#00ffffb3;border-radius:50%;position:absolute;top:35px;left:35px;animation:moveStick 3s infinite ease-in-out;box-shadow:0 0 20px #0ffc}@keyframes keyPulse{0%{box-shadow:0 0 10px #0ff3}50%{box-shadow:0 0 25px #0ff9}to{box-shadow:0 0 10px #0ff3}}@keyframes moveStick{0%{transform:translate(0)}25%{transform:translate(20px)}50%{transform:translate(-20px)}75%{transform:translateY(-20px)}to{transform:translate(0)}}@keyframes pulseText{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}@keyframes holoFlicker{0%{opacity:.95}to{opacity:1}}