html,body,#root{width:100%;height:100%;margin:0}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #559cff;--color-primary-dark: #1e54b8;--color-button-hover-shadow: #559cffcc;--color-background: #0e0e11;--color-panel-background: #141419e6;--color-text: #f5f5f5;--color-button-bg: #3a3a3a}.home{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;background:#0e0e11;color:var(--color-text)}.home button{padding:12px 24px;font-size:1rem;cursor:pointer}canvas{cursor:crosshair}body:has(canvas:focus) canvas{cursor:none}.click-to-play{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:500;color:var(--color-text);background:var(--color-panel-background);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;z-index:10}.pause-menu{position:fixed;inset:0;z-index:20;background:var(--color-panel-background);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;color:var(--color-text)}.pause-overlay{position:fixed;inset:0;z-index:20;background:var(--color-panel-background);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.pause-panel{width:380px;padding:32px;background:#141419e6;border-radius:18px;box-shadow:0 30px 60px #0009,inset 0 0 0 2px #ffffff0d;transform:rotateX(4deg)}.pause-title{text-align:center;margin-bottom:24px;font-size:2.4rem;font-weight:900;letter-spacing:2px;color:var(--color-primary);text-shadow:0 3px 0 var(--color-primary-dark),0 8px 20px var(--color-panel-background)}.pause-setting{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;color:var(--color-text);font-weight:600}.pause-setting input[type=range]{appearance:none;height:8px;border-radius:6px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-dark))}.pause-setting input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:6px;background:var(--color-text);cursor:pointer}.pause-actions{display:flex;flex-direction:column;gap:12px}.btn{padding:14px;border-radius:10px;border:none;font-size:1rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.btn.primary{background:var(--color-primary);color:#1b1b1b;box-shadow:0 6px 0 var(--color-primary-dark)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--color-primary-dark)}.btn{background:var(--color-button-bg);color:var(--color-text)}.btn.ghost{background:transparent;color:#ccc}.keybind-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.keybind{padding:8px 12px;border-radius:6px;font-weight:700;background:#333;color:var(--color-text);border:none;cursor:pointer}.keybind.waiting{background:var(--color-primary);color:#1b1b1b;animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.hud{position:fixed;inset:0;pointer-events:none;z-index:5}.hud-move{position:absolute;bottom:32px;left:32px;display:flex;flex-direction:row;align-items:end;gap:6px}.key-row{display:flex;justify-content:center;gap:6px}.key{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#141419d9;border-radius:6px;font-weight:800;font-size:.85rem;color:var(--color-primary);box-shadow:0 4px #0009,inset 0 0 0 1px #ffffff0d}.key.wide{min-width:72px}.hud-extra{display:flex;gap:8px;margin-top:6px}.hud-menu{position:absolute;top:24px;right:32px;display:flex;align-items:center;gap:8px;background:#141419d9;padding:8px 12px;border-radius:8px;box-shadow:0 6px #0009}.hud-keys{display:flex;flex-direction:column;gap:6px}.mouseG{border-radius:8px 0 0;width:40px}.mouseR{border-radius:0 8px 0 0;width:40px}.mouseBody{border-radius:0 0 8px 8px;width:80px;height:55px}.hud-label{color:var(--color-text);font-weight:600;font-size:.85rem}.hud-mouse{display:flex}.key.active{background:var(--color-primary);color:#1b1b1b;box-shadow:0 4px 0 var(--color-primary-dark),0 0 12px var(--color-button-hover-shadow)}.hud-status{position:absolute;bottom:32px;right:32px;display:flex;gap:12px}.status{font-size:1.6rem;opacity:.25;transform:scale(.9);transition:all .15s ease}.status.on{opacity:1;transform:scale(1.1)}.crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#fffc;pointer-events:none;z-index:6}canvas{touch-action:none}.mobile-controls{position:fixed;inset:0;z-index:15;pointer-events:none}.look-zone{position:absolute;top:0;right:0;width:55%;height:100%;pointer-events:auto;touch-action:none}.joy-zone{position:absolute;left:18px;bottom:18px;width:140px;height:140px;pointer-events:auto;touch-action:none}.joy-base{width:100%;height:100%;border-radius:999px;background:#14141940;border:1px solid rgba(255,255,255,.15)}.touch-buttons{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;pointer-events:auto}.touch-btn{width:88px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#14141959;color:#fff;font-weight:800;touch-action:none}.touch-top{position:absolute;top:14px;right:14px;pointer-events:auto;z-index:16}.touch-btn.small{width:74px;height:38px;font-size:.85rem;border-radius:10px}.touch-btn.active{outline:2px solid rgba(255,255,255,.55);background:#0000008c}@media(max-width:768px){.pause-panel{width:min(92vw,380px);padding:22px}.joy-zone{width:130px;height:130px}.touch-btn{width:84px;height:42px}}@media(max-width:420px){.joy-zone{width:118px;height:118px}.touch-btn{width:78px;height:40px}}