:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}#app{width:100%;height:100vh;position:relative}canvas{display:block;width:100%;height:100%}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-layer>*{pointer-events:auto}.mode-group{padding:10px;border:1px solid transparent;border-radius:6px;display:flex;flex-direction:column;gap:5px;transition:all .2s;opacity:.6}.mode-group.active-mode{border-color:#ffffff4d;background:#ffffff0d;opacity:1;box-shadow:0 0 10px #00000080}.control-group{display:flex;flex-direction:column;gap:5px}label{font-size:.9em;color:#aaa}input[type=range]{width:100%}button{margin-top:5px;padding:8px 16px;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}button:hover{background-color:#535bf2}button:active{background-color:#4048c9}.value-display{float:right;font-family:monospace;color:#fff}#score-display{margin-bottom:15px;padding:10px;background:#ffd7001a;border:1px solid #ffd700;border-radius:4px;display:flex;justify-content:space-between}#score-display label{color:gold;font-weight:700;font-size:1.2em}#energy-display{margin-bottom:15px;padding:10px;background:#00ff001a;border:1px solid #0f0;border-radius:4px}#energy-display label{display:block;color:#0f0;font-weight:700;font-size:1.2em;margin-bottom:5px}.energy-bar-container{width:100%;height:10px;background:#333}#energyBar{width:100%;height:100%;background:#0f0;transition:width .1s}.top-ui-bar{position:absolute;top:20px;left:20px;right:20px;display:flex;align-items:center;gap:15px;z-index:10}.system-selector{display:flex;gap:8px;background:#0009;padding:8px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.system-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#64646466;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s;color:#fff9;padding:0}.system-btn:hover{background:#64646499;transform:scale(1.05)}.system-btn.active{background:#646cff80;border-color:#646cff;color:#fff;box-shadow:0 0 15px #646cff99}.system-btn[data-mode=WEAPON].active{background:#ff00ff80;border-color:#f0f;box-shadow:0 0 15px #f0f9}.system-btn[data-mode=SHIELD].active{background:#00ffff80;border-color:#0ff;box-shadow:0 0 15px #0ff9}.system-btn svg{width:24px;height:24px}.energy-display-top{flex:1;display:flex;align-items:center;gap:10px;background:#0009;padding:8px 15px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:150px}.energy-bar-container{flex:1;height:12px;background:#fff3;border-radius:6px;overflow:hidden}#energyBar{height:100%;background:linear-gradient(90deg,#0f0,#0f0);transition:width .1s,background-color .2s;border-radius:6px}.energy-value{color:#0f0;font-weight:700;font-size:.9em;min-width:45px;text-align:right}.direction-indicator{width:60px;height:60px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.direction-indicator svg{width:100%;height:100%}.bottom-ui-bar{position:absolute;bottom:20px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:10}.joystick-container{position:relative;width:120px;height:120px}.joystick{width:120px;height:120px;background:#0009;border:2px solid rgba(255,255,255,.3);border-radius:50%;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joystick-knob{width:50px;height:50px;background:#646464cc;border:2px solid rgba(255,255,255,.5);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:grab;transition:transform .1s}.joystick-knob:active{cursor:grabbing}.joystick-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.joystick-label-top,.joystick-label-right,.joystick-label-bottom,.joystick-label-left{position:absolute;color:#ffffff80;font-size:.7em;font-weight:700}.joystick-label-top{top:-20px;left:50%;transform:translate(-50%)}.joystick-label-right{right:-25px;top:50%;transform:translateY(-50%)}.joystick-label-bottom{bottom:-20px;left:50%;transform:translate(-50%)}.joystick-label-left{left:-25px;top:50%;transform:translateY(-50%)}.power-slider-container{display:flex;flex-direction:column;align-items:center;gap:8px;background:#0009;padding:10px 15px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.power-slider-labels{display:flex;flex-direction:row;justify-content:space-between;width:100%;color:#fff9;font-size:.7em;font-weight:700}.power-slider-wrapper{position:relative;width:150px;display:flex;align-items:center;justify-content:center}.power-slider{width:150px;height:8px;-webkit-appearance:none;appearance:none;background:#fff3;border-radius:4px;outline:none}.power-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#ffffffe6;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d}.power-slider::-moz-range-thumb{width:20px;height:20px;background:#ffffffe6;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.power-value-display{position:absolute;top:-25px;left:50%;transform:translate(-50%);color:#fff;font-weight:700;font-size:1em;pointer-events:none;white-space:nowrap}.action-btn-circle{width:80px;height:80px;border-radius:50%;background:#646cffcc;border:3px solid rgba(255,255,255,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000004d;padding:0}.action-btn-circle:hover{transform:scale(1.1);box-shadow:0 6px 20px #0006}.action-btn-circle:active{transform:scale(.95)}.action-btn-circle.weapon-mode{background:#f0fc}.action-btn-circle.shield-mode{background:#0ffc}.action-btn-circle svg{width:32px;height:32px}.score-display{position:absolute;top:50%;right:20px;background:#0009;padding:10px 15px;border-radius:12px;color:gold;font-weight:700;font-size:.9em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:5px;z-index:10}