:root{--bg-color: #e2e8f0;--ui-bg: rgba(255, 255, 255, .95);--accent: #3b82f6;--text: #1e293b;--danger: #ef4444}body{margin:0;padding:0;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-color);cursor:default;touch-action:none;user-select:none;-webkit-user-select:none}#loading-screen{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-color);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity .5s ease-out;pointer-events:none}.spinner{width:40px;height:40px;border:4px solid #cbd5e1;border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#selection-ui{position:absolute;top:0;right:0;bottom:0;left:0;display:none;pointer-events:none;z-index:50}#selection-ui.visible{display:block}#char-name-display{position:absolute;top:60px;left:0;right:0;text-align:center;font-size:32px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:2px;text-shadow:0 2px 10px rgba(255,255,255,.8);pointer-events:none}.selection-bottom-controls{position:absolute;bottom:50px;width:100%;display:flex;justify-content:center;align-items:center;gap:20px;pointer-events:none}.nav-btn{width:50px;height:50px;border-radius:50%;border:1px solid #cbd5e1;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;color:var(--text);pointer-events:auto;box-shadow:0 4px 6px -1px #0000001a;-webkit-tap-highlight-color:transparent}.nav-btn:active{transform:scale(.9);background:#f1f5f9}.nav-btn:hover{border-color:var(--accent);color:var(--accent)}.select-btn{padding:15px 40px;background:var(--accent);color:#fff;border:none;border-radius:30px;font-weight:700;font-size:16px;cursor:pointer;pointer-events:auto;box-shadow:0 10px 15px -3px #3b82f666;transition:transform .1s;letter-spacing:.5px;-webkit-tap-highlight-color:transparent}.select-btn:active{transform:scale(.95)}#ui{position:absolute;top:20px;left:20px;background:var(--ui-bg);padding:20px;border-radius:12px;box-shadow:0 10px 25px -5px #0000001a;z-index:10;width:280px;display:none;pointer-events:auto;max-height:80vh;overflow-y:auto}#ui.visible{display:block}#ui::-webkit-scrollbar{width:6px}#ui::-webkit-scrollbar-track{background:transparent}#ui::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:10px}#ui-toggle{position:absolute;top:20px;left:20px;width:44px;height:44px;background:var(--ui-bg);border-radius:10px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px -1px #0000001a;z-index:11;transition:transform .2s;-webkit-tap-highlight-color:transparent}#ui-toggle.visible{display:flex}#ui-toggle:hover{transform:scale(1.05)}#back-btn{position:absolute;top:20px;left:80px;width:44px;height:44px;background:var(--ui-bg);border-radius:10px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px -1px #0000001a;z-index:12;transition:transform .2s,left .3s;pointer-events:auto;-webkit-tap-highlight-color:transparent}#back-btn.visible{display:flex}#back-btn:active{transform:scale(.95)}#back-btn:hover{transform:scale(1.05)}.control-hint{display:flex;align-items:center;margin-bottom:8px;font-size:13px;color:#475569}.key{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;padding:2px 6px;margin-right:10px;font-weight:700;min-width:20px;text-align:center;color:var(--text);font-size:12px}.settings-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:15px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--text)}#keybindings-list{margin-top:15px;padding-top:15px;border-top:1px solid #e2e8f0}.binding-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:#475569}.bind-btn{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;transition:all .2s;min-width:60px;text-align:center}.bind-btn:hover{border-color:var(--accent);color:var(--accent)}.bind-btn.recording{background:var(--accent);color:#fff;border-color:var(--accent)}.switch{position:relative;display:inline-block;width:34px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.2s;border-radius:20px}.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider{background-color:var(--accent)}input:checked+.slider:before{transform:translate(14px)}#drop-zone-hint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);background:#1e293bb3;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;text-align:center;display:none}#drop-zone-hint.visible{display:block}#mobile-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;display:none}#joystick-wrapper{position:absolute;bottom:50px;left:50px;width:120px;height:120px;background:transparent;border:2px solid rgba(128,128,128,.5);border-radius:50%;display:none;pointer-events:none}#joystick-knob{position:absolute;top:50%;left:50%;width:50px;height:50px;background:#80808080;border-radius:50%;transform:translate(-50%,-50%)}#jump-button{position:absolute;bottom:60px;right:50px;width:80px;height:80px;border:2px solid rgba(128,128,128,.5);border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;pointer-events:auto;color:#80808080;font-size:14px;letter-spacing:.1em;font-weight:600;-webkit-tap-highlight-color:transparent}#jump-button:active{background:#80808033;transform:scale(.95)}@media (max-width: 1024px){#mobile-controls.visible{display:block}#drop-zone-hint,#ui-toggle{display:none!important}#back-btn{left:20px}}