:root{color-scheme:dark;font-family:Segoe UI,Roboto,sans-serif;line-height:1.5;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;overflow:hidden;background:#000;touch-action:none;overscroll-behavior:none;position:fixed;top:0;right:0;bottom:0;left:0}#root{position:relative}canvas{display:block;width:100%!important;height:100%!important}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left))}.hud-health{display:flex;align-items:center;gap:10px}.health-bar-bg{width:180px;height:14px;background:#0009;border-radius:7px;border:2px solid rgba(255,255,255,.2);overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.health-bar-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#f39c12,#2ecc71);border-radius:5px;transition:width .3s ease}.health-text{font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);min-width:28px}.hud-coins{display:flex;align-items:center;gap:8px;background:#00000080;padding:6px 14px;border-radius:20px;border:2px solid rgba(255,215,0,.4);font-size:16px;font-weight:700;color:gold;text-shadow:0 1px 3px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .15s ease}.coin-icon{width:18px;height:18px;background:radial-gradient(circle at 40% 40%,gold,#b8860b);border-radius:50%;border:1px solid #DAA520}.hud-crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#ffffffb3;text-shadow:0 0 4px rgba(0,0,0,.8);font-weight:300;line-height:1}.hud-bottom{position:absolute;bottom:calc(16px + var(--safe-bottom));left:50%;transform:translate(-50%)}.hud-inventory{display:flex;gap:4px;background:#00000080;padding:6px;border-radius:10px;border:2px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.inventory-slot{width:52px;height:52px;background:#ffffff14;border-radius:6px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;position:relative;transition:background .15s ease}.inventory-slot:hover{background:#ffffff26}.slot-key{position:absolute;bottom:2px;right:4px;font-size:9px;color:#fff6;font-weight:700}.hud-tip{position:absolute;bottom:calc(80px + var(--safe-bottom));left:50%;transform:translate(-50%);font-size:12px;color:#ffffff80;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;animation:fadeIn 1s ease .5s both}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.touch-controls{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:auto;touch-action:none}.joystick-zone{position:absolute;bottom:calc(36px + var(--safe-bottom));left:calc(28px + var(--safe-left));width:130px;height:130px;pointer-events:auto}.joystick-base{width:130px;height:130px;background:#ffffff1a;border-radius:50%;border:3px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.joystick-knob{width:52px;height:52px;background:radial-gradient(circle at 40% 40%,#fff9,#ffffff4d);border-radius:50%;border:2px solid rgba(255,255,255,.7);transition:transform .04s ease-out;box-shadow:0 0 12px #ffffff26}.touch-jump-btn{position:absolute;bottom:calc(48px + var(--safe-bottom));right:calc(28px + var(--safe-right));width:80px;height:80px;border-radius:50%;background:#ffffff1f;border:3px solid rgba(255,255,255,.3);color:#ffffffbf;font-size:14px;font-weight:700;text-transform:uppercase;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .1s ease,transform .1s ease}.touch-jump-btn:active{background:#ffffff59;transform:scale(.9)}@media(max-width:768px){.hud-top{padding:calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left))}.health-bar-bg{width:130px;height:12px}.health-text{font-size:13px}.hud-coins{padding:5px 12px;font-size:14px;gap:6px}.coin-icon{width:15px;height:15px}.hud-crosshair{font-size:22px}.hud-tip{bottom:calc(175px + var(--safe-bottom));font-size:11px;white-space:normal;text-align:center;max-width:65%;line-height:1.4;padding:0 12px}.joystick-zone{bottom:calc(28px + var(--safe-bottom));left:calc(16px + var(--safe-left));width:120px;height:120px}.joystick-base{width:120px;height:120px}.joystick-knob{width:48px;height:48px}.touch-jump-btn{bottom:calc(40px + var(--safe-bottom));right:calc(20px + var(--safe-right));width:72px;height:72px}.touch-jump-btn svg{width:24px;height:24px}}@media(max-width:480px){.hud-top{padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left))}.health-bar-bg{width:100px;height:10px}.health-text{font-size:12px;min-width:24px}.hud-coins{padding:4px 10px;font-size:13px;gap:5px}.coin-icon{width:13px;height:13px}.hud-crosshair{font-size:20px}.hud-tip{bottom:calc(155px + var(--safe-bottom));font-size:10px;max-width:75%}.joystick-zone{bottom:calc(20px + var(--safe-bottom));left:calc(10px + var(--safe-left));width:105px;height:105px}.joystick-base{width:105px;height:105px}.joystick-knob{width:42px;height:42px}.touch-jump-btn{bottom:calc(30px + var(--safe-bottom));right:calc(14px + var(--safe-right));width:65px;height:65px}.touch-jump-btn svg{width:22px;height:22px}}@media(max-height:500px)and (orientation:landscape){.hud-top{padding-top:calc(6px + var(--safe-top))}.health-bar-bg{width:100px;height:8px}.health-text{font-size:11px}.hud-coins{padding:3px 8px;font-size:12px}.coin-icon{width:12px;height:12px}.hud-tip{display:none}.joystick-zone{bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left));width:90px;height:90px}.joystick-base{width:90px;height:90px}.joystick-knob{width:36px;height:36px}.touch-jump-btn{bottom:calc(16px + var(--safe-bottom));right:calc(12px + var(--safe-right));width:56px;height:56px}.touch-jump-btn svg{width:20px;height:20px}}