:root{--bg:#0f172a;--surface:#0a101f9e;--surface-strong:#080d1acc;--stroke:#ffffff14;--stroke-strong:#ffffff29;--accent:#2dd4bf;--accent-soft:#2dd4bf24;--accent-text:#99f6e4;--text:#f8fafc;--text-dim:#94a3b8;--shadow-lg:0 24px 60px #02061773;--shadow-sm:0 10px 30px #0206174d}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;color:var(--text);background:var(--bg);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#app{visibility:visible}#game{cursor:crosshair;width:100%;height:100%;display:block}#app:after{z-index:40;content:"";opacity:0;pointer-events:none;background:#020617;transition:opacity .9s;animation:1.1s .25s backwards boot-reveal;position:fixed;inset:0}@keyframes boot-reveal{0%{opacity:1}to{opacity:0}}body.is-joining-game #app:after{opacity:1;transition-duration:.18s}body.is-game-fade-in #app:after{opacity:0;transition-duration:.9s}.start-screen{--camera-fade-opacity:0;opacity:1;pointer-events:auto;visibility:visible;z-index:20;background:radial-gradient(circle at 50% 45%,#5eead414,#0000 34%),linear-gradient(#02061714,#02061757);place-items:center;padding:24px;transition:opacity .42s,visibility .42s;display:grid;position:fixed;inset:0}.start-screen:before{content:"";opacity:var(--camera-fade-opacity);pointer-events:none;background:#020617;transition:opacity 80ms linear;position:absolute;inset:0}.start-screen.is-hidden{opacity:0;pointer-events:none;visibility:hidden}.start-card{text-align:center;justify-items:center;width:min(640px,100vw - 48px);padding:28px;display:grid;position:relative;transform:translateY(-34vh)}.start-title{filter:drop-shadow(0 22px 42px #0206179e);width:min(560px,82vw);height:auto;animation:1s cubic-bezier(.22,1,.36,1) .6s backwards intro-rise;display:block}@keyframes intro-rise{0%{opacity:0;transform:translateY(18px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}.join-button{border:1px solid var(--stroke-strong);min-height:46px;color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a10208c;border-radius:999px;padding:0 26px;font-size:13px;font-weight:700;transition:border-color .2s,background .2s,box-shadow .2s;animation:.8s 1.3s backwards intro-fade,2.8s ease-in-out 2.4s infinite join-pulse;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}@keyframes intro-fade{0%{opacity:0}to{opacity:1}}@keyframes join-pulse{0%,to{box-shadow:var(--shadow-sm), 0 0 0 0 #2dd4bf47}50%{box-shadow:var(--shadow-sm), 0 0 0 12px #2dd4bf00}}.join-button:hover{box-shadow:var(--shadow-sm), 0 0 28px #2dd4bf2e;background:#0d162ab8;border-color:#2dd4bf8c}.join-button:disabled{cursor:wait;opacity:.72;animation:none}.chat-panel{transition:opacity .6s .35s}.is-starting .chat-panel,.is-starting .interaction-hint,.is-starting .npc-dialogue,.is-starting .music-toggle,.is-starting .fullscreen-toggle{opacity:0;pointer-events:none;transition:opacity .15s}.music-toggle,.fullscreen-toggle{top:max(14px, env(safe-area-inset-top));z-index:35;border:1px solid var(--stroke);color:#e2e8f0;background:var(--surface);width:36px;height:36px;box-shadow:var(--shadow-sm);cursor:pointer;opacity:1;-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);border-radius:999px;place-items:center;padding:0;transition:opacity .5s .5s,border-color .18s,background .18s;display:grid;position:fixed}.music-toggle{right:max(14px, env(safe-area-inset-right))}.fullscreen-toggle{right:calc(max(14px, env(safe-area-inset-right)) + 46px)}.music-toggle.is-hidden,.fullscreen-toggle.is-hidden{display:none}.music-toggle:hover,.fullscreen-toggle:hover{background:var(--surface-strong);border-color:#2dd4bf80}.music-toggle-icon,.fullscreen-toggle-icon{width:16px;height:16px}.music-toggle-icon--off,.music-toggle.is-muted .music-toggle-icon--on{display:none}.music-toggle.is-muted .music-toggle-icon--off{display:block}.fullscreen-toggle-icon--exit,.fullscreen-toggle.is-active .fullscreen-toggle-icon--enter{display:none}.fullscreen-toggle.is-active .fullscreen-toggle-icon--exit{display:block}.mobile-controls{z-index:30;opacity:0;pointer-events:none;transition:opacity .18s;position:fixed;inset:0}.mobile-controls.is-active{opacity:1;pointer-events:none}.mobile-joystick{bottom:max(28px, env(safe-area-inset-bottom));left:max(24px, env(safe-area-inset-left));width:160px;height:160px;box-shadow:var(--shadow-sm), inset 0 1px 0 #ffffff14;pointer-events:auto;touch-action:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:radial-gradient(circle,#5eead429,#0000 36%),#0a101f73;border:1px solid #e2e8f038;border-radius:999px;position:absolute}.mobile-joystick-knob{--stick-x:0px;--stick-y:0px;width:70px;height:70px;box-shadow:var(--shadow-sm);transform:translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));background:linear-gradient(135deg,#f8fafc2e,#2dd4bf33),#0a101fad;border:1px solid #ffffff52;border-radius:999px;position:absolute;top:50%;left:50%}.mobile-interact-button{right:max(22px, env(safe-area-inset-right));bottom:max(44px, env(safe-area-inset-bottom));color:#ccfbf1;min-height:60px;box-shadow:var(--shadow-lg);font:inherit;letter-spacing:.06em;opacity:0;pointer-events:none;text-transform:uppercase;touch-action:manipulation;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0a101fad;border:1px solid #2dd4bf66;border-radius:999px;padding:0 24px;font-size:15px;font-weight:800;transition:opacity .18s,transform .18s;position:absolute;transform:translateY(8px)}.mobile-interact-button.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}body.is-mobile #game{cursor:default;touch-action:none}body.is-mobile .chat-panel,body.is-mobile .music-toggle,body.is-mobile .fullscreen-toggle,body.is-mobile .interaction-hint{display:none}body.is-mobile .npc-dialogue{top:max(18px, env(safe-area-inset-top));grid-template-columns:92px 1fr;gap:12px;width:min(520px,100vw - 28px);padding:12px;bottom:auto;transform:translate(-50%,-14px)}body.is-mobile .npc-dialogue.is-open{transform:translate(-50%)}body.is-mobile .npc-dialogue-image{border-radius:18px;width:92px;height:92px}body.is-mobile .npc-dialogue-text{font-size:14px}body.is-mobile .join-button{bottom:max(48px, env(safe-area-inset-bottom));letter-spacing:.1em;min-height:58px;padding:0 30px;font-size:16px}.interaction-hint{border:1px solid var(--stroke);color:var(--text-dim);background:var(--surface);box-shadow:var(--shadow-sm);pointer-events:none;-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);border-radius:999px;align-items:center;gap:8px;padding:9px 15px;font-size:12px;transition:border-color .16s,background .16s,color .16s,opacity .5s .6s;display:inline-flex;position:fixed;top:18px;left:50%;transform:translate(-50%)}.interaction-hint strong{color:var(--text);font-size:12px;font-weight:600}.interaction-hint.is-active{color:var(--accent-text);background:#14b8a624;border-color:#2dd4bf52}.npc-dialogue{border:1px solid var(--stroke);width:min(620px,100vw - 36px);box-shadow:var(--shadow-lg), inset 0 1px 0 #ffffff0f;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%);background:radial-gradient(circle at 0 0,#5eead41f,#0000 38%),linear-gradient(#0d1426eb,#040814d1);border-radius:24px;grid-template-columns:136px 1fr;gap:18px;padding:16px 18px 16px 16px;transition:opacity .22s,transform .22s;display:grid;position:fixed;bottom:22px;left:50%;transform:translate(-50%,18px)}.npc-dialogue.is-open{opacity:1;pointer-events:auto;transform:translate(-50%)}.npc-dialogue-image{object-fit:cover;width:136px;height:136px;box-shadow:var(--shadow-sm);background:#0206176b;border:1px solid #2dd4bf47;border-radius:20px}.npc-dialogue-copy{align-content:center;gap:8px;min-width:0;padding:4px 0;display:grid}.npc-dialogue-name{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700}.npc-dialogue-text{color:var(--text);margin:0;font-size:15px;line-height:1.55}.chat-panel{border:1px solid var(--stroke);background:var(--surface);width:min(340px,100vw - 32px);box-shadow:var(--shadow-lg), inset 0 1px 0 #ffffff0d;pointer-events:auto;-webkit-backdrop-filter:blur(22px)saturate(140%);backdrop-filter:blur(22px)saturate(140%);border-radius:18px;padding:14px;position:fixed;top:16px;left:16px}.chat-header{color:var(--text);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:12px;padding:0 2px 10px;font-size:12px;font-weight:600;display:flex}.chat-header-meta{align-items:center;gap:8px;display:inline-flex}#connection-status{color:var(--accent);letter-spacing:0;text-transform:none;align-items:center;gap:6px;font-size:11px;font-weight:500;display:inline-flex}#connection-status:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px}.chat-toggle{width:24px;height:24px;color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;padding:0;transition:color .16s,background .16s;display:grid;position:relative}.chat-toggle:hover{color:var(--text);background:#ffffff14}.chat-toggle svg{width:15px;height:15px;transition:transform .22s}.chat-panel.is-collapsed .chat-toggle svg{transform:rotate(180deg)}.chat-panel.has-unread .chat-toggle:after{content:"";background:var(--accent);width:7px;height:7px;box-shadow:0 0 8px var(--accent);border-radius:50%;position:absolute;top:2px;right:2px}.chat-panel.is-collapsed .name-form,.chat-panel.is-collapsed .chat-messages,.chat-panel.is-collapsed .chat-form{display:none}.chat-panel.is-collapsed .chat-header{padding-bottom:0}.name-form{border:1px solid var(--stroke);background:#02061752;border-radius:12px;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:0 0 10px;padding:9px 12px;transition:border-color .16s,box-shadow .16s;display:grid}.name-form label{color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:600}.name-form input{min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:none;font-size:14px;font-weight:600}.name-form:focus-within{border-color:#2dd4bf80;box-shadow:0 0 0 3px #2dd4bf1a}.chat-messages{scrollbar-width:thin;scrollbar-color:#94a3b866 transparent;flex-direction:column;gap:4px;min-height:110px;max-height:200px;padding:2px 8px 10px 2px;display:flex;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:0 0}.chat-messages::-webkit-scrollbar-thumb{background:#94a3b859;border-radius:999px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#94a3b88c}.chat-message{background:#ffffff0b;border-radius:10px;gap:2px;padding:7px 10px;display:grid}.chat-message.is-local{background:var(--accent-soft)}.chat-author{color:#93c5fd;letter-spacing:.02em;font-size:10px;font-weight:700}.chat-message.is-local .chat-author{color:var(--accent)}.chat-text{color:var(--text);overflow-wrap:anywhere;font-size:12.5px;line-height:1.35}.chat-form{grid-template-columns:1fr auto;gap:8px;margin:0;display:grid}.chat-form input,.chat-form button{border:1px solid var(--stroke);height:36px;color:var(--text);font:inherit;border-radius:10px;font-size:13px}.chat-form input{background:#02061766;outline:none;min-width:0;padding:0 12px;transition:border-color .16s,box-shadow .16s}.chat-form input::placeholder{color:var(--text-dim)}.chat-form input:focus{border-color:#2dd4bf80;box-shadow:0 0 0 3px #2dd4bf1a}.chat-form button{border-color:var(--stroke-strong);color:var(--text);cursor:pointer;background:#ffffff0f;padding:0 16px;font-weight:600;transition:background .16s,border-color .16s,transform .12s}.chat-form button:hover{background:#ffffff1a;border-color:#2dd4bf66}.chat-form button:active{transform:scale(.97)}@media (prefers-reduced-motion:reduce){#app:after,.start-title,.join-button{animation:none}}