@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap";#btn-mute{z-index:9999;color:#fff;cursor:pointer;background:#0000008c;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:16px;line-height:1;transition:opacity .2s;display:flex;position:fixed;top:8px;left:8px}body{color:#e0e0e0;padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background-color:#000;margin:0;font-family:Outfit,sans-serif;overflow:hidden}#game-container{background-color:#000;width:100%;height:100%;position:fixed;top:0;left:0}canvas{image-rendering:pixelated;width:100%;height:100%;display:block}#hud{pointer-events:none;text-shadow:2px 2px #000;position:absolute;top:20px;left:20px}.hp-row{align-items:center;gap:6px;margin-bottom:5px;display:flex}.hp-label{letter-spacing:1px;color:#fff9;flex-shrink:0;width:36px;font-size:10px;font-weight:700}.hp-bar{background:#ffffff14;border:1px solid #fff3;width:160px;height:8px;overflow:hidden}.hp-fill{height:100%;transition:width .2s}.hp-fill.cyan{background:linear-gradient(90deg,#0ff,#08f);box-shadow:0 0 8px #0ff}.hp-fill.orange{background:linear-gradient(90deg,#fa0,#f60);box-shadow:0 0 8px #fa0}#flight-energy-bar{pointer-events:none;background:#ffffff0f;border:1px solid #0ff6;flex-direction:column-reverse;width:12px;height:160px;display:flex;position:absolute;top:50%;left:12px;overflow:hidden;transform:translateY(-50%)}#flight-energy-fill{background:linear-gradient(#08f,#0ff);width:100%;height:100%;transition:height .2s;box-shadow:0 0 8px #0ff}#status-text{color:#0ff;letter-spacing:1px;font-size:14px;font-weight:700}#weapon-text{color:#888;letter-spacing:.5px;margin-top:4px;font-size:11px;font-weight:700;transition:color .1s}#controls-hint{text-align:center;color:#ffffff80;pointer-events:none;width:100%;font-size:12px;position:absolute;bottom:20px}#virtual-controls{pointer-events:none;width:100%;height:100%;display:none;position:absolute;top:0;left:0}#joystick-zone{pointer-events:auto;width:150px;height:150px;position:absolute;bottom:50px;left:50px}#joystick-base{background:#ffffff1a;border:2px solid #00ffff4d;border-radius:50%;width:120px;height:120px;position:relative;top:15px;left:15px}#joystick-knob{background:#00ffff80;border:2px solid #0ff;border-radius:50%;width:60px;height:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #0ff}#action-zone{pointer-events:none;width:180px;height:240px;position:absolute;bottom:7%;right:20px}#btn-eject{pointer-events:auto;position:absolute;top:0;right:0}#btn-shoot{pointer-events:auto;position:absolute;top:76px;right:0}#btn-jump{pointer-events:auto;position:absolute;bottom:0;right:90px}.touch-btn{color:#0ff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff1a;border:2px solid #00ffff80;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:14px;font-weight:700;display:flex}.touch-btn:active{background:#0ff3;transform:scale(.95)}#btn-eject{font-size:9px;color:#fa0!important;border-color:#fa0!important;width:56px!important;height:56px!important}#btn-shield{pointer-events:auto;font-size:9px;position:absolute;top:164px;right:0;color:#4af!important;border-color:#4af!important;width:56px!important;height:56px!important}#start-overlay{z-index:99999;cursor:pointer;background:#000000e0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#start-content{text-align:center}#start-title{color:#0ff;letter-spacing:4px;text-shadow:0 0 20px #0ff;margin-bottom:24px;font-size:32px;font-weight:700}#start-tap{color:#ffffffb3;letter-spacing:2px;font-size:16px;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}#orientation-warning{z-index:9999;text-align:center;background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.warning-content{padding:20px}.rotate-icon{margin-bottom:20px;font-size:50px;animation:2s linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (pointer:coarse){#virtual-controls{display:block}#controls-hint{display:none}}@media screen and (orientation:portrait){#orientation-warning{display:flex}}