html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#050607;color:#f2eee4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}*{box-sizing:border-box}#app,#scene{width:100%;height:100%}#app{position:fixed;inset:0;height:100dvh;overflow:hidden}#scene{display:block;outline:none;touch-action:none}.hud{position:fixed;top:18px;left:18px;width:min(360px,calc(100vw - 36px));padding:14px 14px 12px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#0a0c0db3;box-shadow:0 18px 50px #0000005c;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-user-select:none;user-select:none}.hud__top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}h1{margin:0;font-size:16px;line-height:1.15;font-weight:700;letter-spacing:0}p{margin:5px 0 0;color:#f2eee4ad;font-size:12px;line-height:1.35}.key-grid{display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(2,22px);gap:4px}.key-grid span{display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:5px;background:#ffffff14;color:#fffc;font-size:11px;font-weight:700;line-height:1}.key-grid span:first-child{grid-column:2}.key-grid span:nth-child(2){grid-row:2;grid-column:1}.key-grid span:nth-child(3){grid-row:2;grid-column:2}.key-grid span:nth-child(4){grid-row:2;grid-column:3}.slider{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center;margin-top:14px;color:#f2eee4d6;font-size:12px;font-weight:650}.slider input{width:100%;accent-color:#f4cc69}.combat-status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.combat-status div{display:grid;gap:3px;min-width:0;padding:8px 9px;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:#ffffff0f}.combat-status span{color:#f2eee48f;font-size:10px;font-weight:700;line-height:1;text-transform:uppercase}.combat-status strong{color:#ffe18a;font-size:14px;line-height:1;white-space:nowrap}.crosshair{position:fixed;left:50%;top:50%;width:22px;height:22px;translate:-50% -50%;pointer-events:none}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffeeafe6;box-shadow:0 0 12px #ffc34ea6}.crosshair:before{left:10px;top:0;width:2px;height:22px}.crosshair:after{left:0;top:10px;width:22px;height:2px}.message{position:fixed;left:50%;bottom:28px;translate:-50% 0;width:min(520px,calc(100vw - 36px));padding:10px 14px;border:1px solid rgba(255,224,138,.28);border-radius:8px;background:#090a09b8;color:#fff1c6eb;font-size:13px;font-weight:650;line-height:1.25;text-align:center;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.message.is-muted{opacity:0;transform:translateY(8px)}.mobile-controls{position:fixed;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:0;z-index:4;display:none;grid-template-columns:minmax(142px,188px) auto;gap:18px;align-items:end;justify-content:space-between;padding:0 calc(env(safe-area-inset-right,0px) + 18px) 0 calc(env(safe-area-inset-left,0px) + 18px);pointer-events:none}.mobile-stick,.mobile-actions,.mobile-action{pointer-events:auto;touch-action:none}.mobile-stick{display:grid;place-items:center;width:156px;aspect-ratio:1;border-radius:50%}.mobile-stick__ring{position:relative;width:116px;aspect-ratio:1;border:1px solid rgba(172,238,223,.28);border-radius:50%;background:radial-gradient(circle,rgba(172,238,223,.18) 0 22%,transparent 24%),#060c0d80;box-shadow:inset 0 0 22px #7ecebe24,0 12px 30px #00000047;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mobile-stick__thumb{--stick-x: 0px;--stick-y: 0px;position:absolute;top:50%;left:50%;width:52px;aspect-ratio:1;border:1px solid rgba(255,241,198,.42);border-radius:50%;background:linear-gradient(180deg,#ffe89df2,#a6d2bfe0);box-shadow:0 8px 18px #00000052;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));transition:transform 90ms ease}.mobile-stick.is-active .mobile-stick__thumb{transition:none}.mobile-actions{display:grid;grid-template-columns:64px 82px;gap:12px;align-items:end}.mobile-action{display:grid;place-items:center;min-width:0;padding:0;border:1px solid rgba(255,241,198,.34);border-radius:50%;color:#fff4cf;font:inherit;font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:0;box-shadow:0 14px 34px #00000052;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-action:active{transform:translateY(1px) scale(.98)}.mobile-action--secondary{width:64px;aspect-ratio:1;background:#121f21b8}.mobile-action--primary{width:82px;aspect-ratio:1;background:linear-gradient(180deg,#dd432af0,#741819e6)}@media(pointer:coarse),(max-width:820px){.mobile-controls{display:grid}.slider{display:none}}@media(max-width:560px){.hud{top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);width:min(320px,calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));padding:10px}.hud__top{grid-template-columns:1fr}.key-grid{display:none}h1{font-size:14px}p{font-size:11px}.slider{grid-template-columns:64px 1fr;margin-top:10px}.combat-status{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}.combat-status div{padding:7px 8px}.combat-status strong{font-size:13px}.message{bottom:calc(env(safe-area-inset-bottom,0px) + 156px);width:min(360px,calc(100vw - 24px))}.mobile-controls{grid-template-columns:142px auto;gap:12px;padding-right:calc(env(safe-area-inset-right,0px) + 12px);padding-left:calc(env(safe-area-inset-left,0px) + 12px)}.mobile-stick{width:138px}.mobile-stick__ring{width:104px}.mobile-stick__thumb{width:48px}}@media(max-height:520px)and (orientation:landscape){.hud{width:min(260px,calc(100vw - 24px));padding:8px}.hud__top{grid-template-columns:1fr}.key-grid,.hud p,.slider{display:none}h1{font-size:13px;line-height:1.1}.combat-status{gap:5px;margin-top:8px}.combat-status div{padding:6px 7px}.combat-status span{font-size:9px}.combat-status strong{font-size:13px}.message{bottom:calc(env(safe-area-inset-bottom,0px) + 116px);width:min(420px,calc(100vw - 180px));padding:8px 12px;font-size:12px}.mobile-stick{width:124px}.mobile-stick__ring{width:94px}.mobile-stick__thumb{width:44px}}