*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100dvh;overflow:hidden}body{-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;background:#0e1430;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.game-canvas{width:100%;height:100%;display:block;position:fixed;inset:0}canvas{display:block}.start-menu{background:linear-gradient(#87ceeb 0%,#b8e2f2 55%,#7cb342 55.5%,#5a8f2f 100%);flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:24px;display:flex;position:fixed;inset:0}.start-menu h1{color:#fff;text-shadow:0 4px #00000040;letter-spacing:2px;font-size:clamp(40px,9vw,72px)}.start-menu .play-button{color:#fff;cursor:pointer;background:#43a047;border:none;border-radius:14px;padding:18px 64px;font-size:clamp(22px,5vw,32px);font-weight:700;transition:transform 60ms;box-shadow:0 6px #2e7031}.start-menu .play-button:active{transform:translateY(4px);box-shadow:0 2px #2e7031}.start-menu .play-button.secondary{background:#1e88c7;padding:14px 40px;font-size:clamp(17px,4vw,24px);box-shadow:0 6px #14608d}.start-menu .play-button.secondary:active{box-shadow:0 2px #14608d}.start-menu .hints{color:#333;background:#ffffffd9;border-radius:12px;max-width:420px;padding:14px 20px;font-size:15px;line-height:1.55}.mp-panel{color:#fff;background:#141c30e0;border-radius:16px;flex-direction:column;gap:12px;width:min(360px,88vw);padding:22px;display:flex}.mp-label{opacity:.85;font-size:14px}.mp-input{color:#fff;background:#ffffff1a;border:2px solid #ffffff40;border-radius:10px;outline:none;width:100%;padding:11px 14px;font-size:18px}.mp-input:focus{border-color:#ffd24a}.mp-input::placeholder{color:#ffffff73}.mp-code-input{text-transform:uppercase;letter-spacing:3px;font-weight:700}.mp-join-row{gap:8px;display:flex}.mp-join-row .menu-button{flex-shrink:0}.mp-divider{text-align:center;opacity:.65;font-size:14px}.mp-error{color:#ffb3a9;text-align:center;font-size:14px;line-height:1.45}.mp-back{color:#fff;cursor:pointer;background:#0000004d;border:none;border-radius:10px;padding:10px 24px;font-size:16px;font-weight:600}.room-code{top:calc(max(8px, env(safe-area-inset-top)) + 22px);color:#fff;letter-spacing:1px;text-shadow:0 1px 2px #0009;z-index:10;pointer-events:none;font-size:13px;font-weight:700;position:fixed;left:8px}.connection-error-message{text-align:center;max-width:min(420px,86vw);font-size:16px;font-weight:400;line-height:1.5}.menu-button.secondary{background:#1e88c7;box-shadow:0 4px #14608d}.menu-button.secondary:active{box-shadow:0 2px #14608d}.loading-overlay{color:#fff;text-shadow:0 2px #0003;z-index:30;background:#87ceeb;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:22px;font-weight:600;display:flex;position:fixed;inset:0}.loading-bar{background:#fff6;border-radius:7px;width:min(320px,70vw);height:14px;overflow:hidden}.loading-bar-fill{background:#43a047;height:100%;transition:width .15s}.crosshair{pointer-events:none;z-index:10;width:18px;height:18px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";mix-blend-mode:difference;background:#ffffffd9;position:absolute}.crosshair:before{width:2px;height:100%;top:0;left:50%;transform:translate(-50%)}.crosshair:after{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}.fps-counter{top:max(8px, env(safe-area-inset-top));color:#fff;text-shadow:0 1px 2px #0009;z-index:10;pointer-events:none;font-size:13px;font-weight:600;position:fixed;left:8px}.hotbar{left:50%;bottom:max(10px, env(safe-area-inset-bottom));z-index:20;background:#00000059;border-radius:10px;gap:6px;padding:6px;display:flex;position:fixed;transform:translate(-50%)}.hotbar-slot{cursor:pointer;background:#00000040;border:3px solid #ffffff59;border-radius:8px;justify-content:center;align-items:center;width:52px;height:52px;padding:0;display:flex}.hotbar-slot.selected{background:#fff3;border-color:#fff}.hotbar-slot canvas{width:38px;height:38px;image-rendering:pixelated}@media (width<=700px){.hotbar-slot{width:44px;height:44px}.hotbar-slot canvas{width:32px;height:32px}}.star-counter{top:max(8px, env(safe-area-inset-top));color:#fff;text-shadow:0 1px 2px #00000080;z-index:10;pointer-events:none;background:#0006;border-radius:20px;padding:6px 16px;font-size:18px;font-weight:700;position:fixed;left:50%;transform:translate(-50%)}.pause-button{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));color:#fff;z-index:20;background:#00000059;border:2px solid #ffffff80;border-radius:10px;width:44px;height:44px;font-size:18px;position:fixed}.pause-overlay{z-index:25;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pause-panel{color:#fff;background:#141c30eb;border-radius:16px;flex-direction:column;align-items:stretch;gap:14px;width:min(340px,86vw);padding:24px;display:flex}.pause-panel h2{text-align:center;margin-bottom:4px;font-size:26px}.menu-button{color:#fff;cursor:pointer;background:#43a047;border:none;border-radius:10px;padding:12px 20px;font-size:18px;font-weight:700;box-shadow:0 4px #2e7031}.menu-button:active{transform:translateY(2px);box-shadow:0 2px #2e7031}.menu-button.danger{background:#d84335;box-shadow:0 4px #96261c}.menu-button.danger:active{box-shadow:0 2px #96261c}.settings-panel{flex-direction:column;gap:14px;width:100%;display:flex}.quality-row{flex-direction:column;gap:8px;display:flex}.quality-label{opacity:.85;font-size:14px}.quality-options{gap:6px;display:flex}.quality-option{color:#fff;cursor:pointer;background:#ffffff14;border:2px solid #ffffff40;border-radius:8px;flex:1;padding:9px 4px;font-size:14px;font-weight:600}.quality-option.active{background:#ffd24a33;border-color:#ffd24a}.pause-hint{opacity:.85;text-align:center;font-size:14px;line-height:1.5}.pause-invite{flex-direction:column;gap:6px;margin-bottom:8px;display:flex}.pause-invite-link{color:#ffd24a;word-break:break-all;-webkit-user-select:text;user-select:text;cursor:text;background:#00000059;border-radius:10px;margin:0;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.35}.celebration-overlay{z-index:26;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.celebration-panel{color:#fff;text-align:center;background:linear-gradient(#2b3a6b 0%,#1a2447 100%);border-radius:18px;flex-direction:column;align-items:center;gap:12px;width:min(380px,88vw);padding:28px 24px;animation:.4s cubic-bezier(.2,1.6,.4,1) celebration-pop;display:flex}.celebration-stars{letter-spacing:6px;font-size:34px;animation:1.2s ease-in-out infinite celebration-bounce}@keyframes celebration-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes celebration-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.quality-toast{top:calc(max(8px, env(safe-area-inset-top)) + 52px);color:#fff;text-align:center;z-index:27;pointer-events:none;background:#000000bf;border-radius:10px;max-width:88vw;padding:10px 18px;font-size:14px;position:fixed;left:50%;transform:translate(-50%)}.touch-look-zone{z-index:5;touch-action:none;position:fixed;inset:0}.touch-joystick-zone{z-index:6;touch-action:none;width:45%;height:60%;position:fixed;bottom:0;left:0}.joystick-base{pointer-events:none;z-index:7;background:#ffffff26;border:2px solid #fff6;border-radius:50%;width:120px;height:120px;position:fixed;transform:translate(-50%,-50%)}.joystick-knob{pointer-events:none;z-index:8;background:#ffffff8c;border-radius:50%;width:56px;height:56px;position:fixed;transform:translate(-50%,-50%)}.jump-button{right:max(18px, env(safe-area-inset-right));bottom:calc(max(10px, env(safe-area-inset-bottom)) + 78px);color:#fff;z-index:20;touch-action:none;background:#00000059;border:3px solid #ffffff80;border-radius:50%;width:76px;height:76px;font-size:30px;position:fixed}.jump-button:active{background:#ffffff4d}.break-progress{pointer-events:none;z-index:9;animation:.15s ease-out .12s backwards break-appear;position:fixed;transform:translate(-50%,-50%)}@keyframes break-appear{0%{opacity:0;scale:.7}to{opacity:1;scale:1}}.break-progress-track{fill:none;stroke:#0006;stroke-width:6px}.break-progress-fill{fill:none;stroke:#fff;stroke-width:6px;stroke-linecap:round;transform-origin:50%;animation-name:break-fill;animation-timing-function:linear;animation-fill-mode:forwards;transform:rotate(-90deg)}@keyframes break-fill{0%{stroke-dashoffset:var(--circumference)}to{stroke-dashoffset:0}}.touch-hint,.game-hint{top:calc(max(8px, env(safe-area-inset-top)) + 24px);color:#fff;text-align:center;text-shadow:0 1px 2px #000000b3;z-index:10;pointer-events:none;opacity:.9;font-size:13px;line-height:1.5;position:fixed;left:50%;transform:translate(-50%)}