:root{--pink: #ff6b9d;--purple: #9b5cff;--bg: #0a0a14;--text: #e8e9f2;--muted: #9497b0}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.glass{background:#10121e8c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,107,157,.22);border-radius:16px;box-shadow:0 8px 32px #00000073,inset 0 1px #ffffff0f}.auth-screen{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 45% at 25% 20%,rgba(155,92,255,.18),transparent),radial-gradient(ellipse 55% 40% at 75% 80%,rgba(255,107,157,.14),transparent),var(--bg);padding:20px}.auth-card{width:min(380px,100%);padding:40px 32px 32px;text-align:center}.logo{margin:0;font-size:56px;font-weight:800;letter-spacing:.18em;background:linear-gradient(100deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,107,157,.35))}.tagline{color:var(--muted);margin:6px 0 26px;font-size:14px}.auth-tabs{display:flex;gap:8px;margin-bottom:20px}.auth-tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:14px}.auth-tabs button.active{color:var(--text);border-color:#9b5cff80;background:#9b5cff1f}form{display:flex;flex-direction:column;gap:12px}input{padding:13px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0a0a1499;color:var(--text);font:inherit;font-size:15px;outline:none}input:focus{border-color:var(--pink);box-shadow:0 0 0 3px #ff6b9d26}.btn-primary{padding:13px 18px;border:none;border-radius:10px;background:linear-gradient(100deg,var(--pink),var(--purple));color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:filter .15s}.btn-primary:hover:not(:disabled){filter:brightness(1.15)}.btn-primary:disabled{opacity:.55;cursor:default}.auth-error{color:#ff7a7a;font-size:13px;margin:0}.auth-info{color:#7ae0a8;font-size:13px;margin:0}.loading-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse 60% 45% at 25% 20%,rgba(155,92,255,.18),transparent),radial-gradient(ellipse 55% 40% at 75% 80%,rgba(255,107,157,.14),transparent),var(--bg)}.loading-bar{width:min(320px,70vw);height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}.loading-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 0 12px #ff6b9d99;transition:width .2s ease-out}.loading-label{color:var(--muted);font-size:13px;margin:0}.game{position:fixed;top:0;right:0;bottom:0;left:0}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;padding:10px 16px;display:flex;align-items:center;gap:16px;font-size:14px}.hud-player{font-weight:600;color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-stat{display:flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums}.hud-icon.pink{color:var(--pink)}.hud-icon.purple{color:var(--purple)}.hud-actions{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;display:flex;gap:8px}.btn-ghost{padding:10px 18px;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid rgba(155,92,255,.35);border-radius:12px;background:#10121e8c}.btn-ghost:hover{border-color:var(--purple)}.npc-hint{position:absolute;bottom:110px;left:50%;transform:translate(-50%);padding:12px 22px;color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;animation:hint-pop .25s ease-out}@keyframes hint-pop{0%{opacity:0;transform:translate(-50%) translateY(8px)}}.dialogue-panel,.jobs-panel{position:absolute;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:min(400px,calc(100vw - 28px));max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;padding:18px;gap:12px}.dialogue-header{display:flex;align-items:center;justify-content:space-between}.dialogue-header h2{margin:0;font-size:18px;background:linear-gradient(100deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}.btn-close{border:none;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}.dialogue-messages{flex:1;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}.dialogue-hint{color:var(--muted);font-size:13px;text-align:center;margin:auto 0}.bubble{max-width:85%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap}.bubble-player{align-self:flex-end;background:linear-gradient(100deg,#ff6b9d47,#9b5cff47);border:1px solid rgba(255,107,157,.3)}.bubble-npc{align-self:flex-start;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.bubble-system{align-self:center;color:#ff7a7a;font-size:12px;background:transparent}.typing{color:var(--muted);letter-spacing:3px}.dialogue-input{display:flex;flex-direction:row;gap:8px}.dialogue-input input{flex:1}.dialogue-input .btn-primary{padding:0 18px}.btn-end{border:1px solid rgba(155,92,255,.4);background:#9b5cff1a;color:var(--text);padding:11px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.btn-end:hover:not(:disabled){background:#9b5cff38}.jobs-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px}.job-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08)}.job-info{display:flex;flex-direction:column;gap:3px;font-size:14px}.job-meta{color:var(--muted);font-size:12px}.job-status{color:var(--pink);font-size:12px;font-weight:600}.job-card .btn-primary,.job-card .btn-ghost{padding:9px 14px;font-size:13px;white-space:nowrap}.quest-tracker{position:absolute;top:max(64px,calc(env(safe-area-inset-top) + 50px));right:14px;width:min(280px,calc(100vw - 28px));padding:12px 16px;border-color:#3ee0ff47}.quest-tracker-title{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pink);text-transform:uppercase}.quest-tracker-hint{font-size:13px;color:var(--text);margin-top:4px;font-style:italic;line-height:1.4}.quest-tracker-step{font-size:11px;color:var(--muted);margin-top:6px}.friends-panel{position:absolute;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:min(360px,calc(100vw - 28px));max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;padding:18px;gap:12px}.friends-status{font-size:12px;color:var(--muted);margin:-4px 0 0}.friends-list{overflow-y:auto;display:flex;flex-direction:column;gap:4px}.friends-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:10px;margin-bottom:2px}.friend-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:#ffffff0a;font-size:14px}.friend-row.muted{opacity:.6;font-size:12px}.friend-name{display:flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot.online{background:#4ade80;box-shadow:0 0 8px #4ade80b3}.dot.offline{background:#555a70}.friend-actions{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}.btn-mini{border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text);border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.btn-mini.accept{border-color:#4ade8080;color:#4ade80}.btn-mini.decline{border-color:#ff7a7a66;color:#ff9a9a}.btn-mini.join{border-color:#9b5cff80;background:#9b5cff26}.btn-action{border:1px solid rgba(62,224,255,.5);background:#3ee0ff1f;color:var(--text);padding:11px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.btn-action:hover:not(:disabled){background:#3ee0ff38}.fade-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:#000;opacity:0;pointer-events:none;transition:opacity .5s ease}.fade-overlay.on{opacity:1;pointer-events:all}.toast-stack{position:absolute;top:70px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:12;pointer-events:none}.toast{padding:11px 20px;font-size:14px;font-weight:600;color:var(--text);animation:toast-pop .3s ease-out;white-space:nowrap}@keyframes toast-pop{0%{opacity:0;transform:translateY(-8px)}}.joystick{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:26px;width:120px;height:120px;border-radius:50%;background:#10121e66;border:1px solid rgba(155,92,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:none}.joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:linear-gradient(120deg,#ff6b9dbf,#9b5cffbf);box-shadow:0 0 18px #ff6b9d73;pointer-events:none}.intro-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#05050ad1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.intro-panel{max-width:520px;text-align:center;display:flex;flex-direction:column;gap:34px}.intro-text{font-size:21px;line-height:1.65;color:var(--text);margin:0;min-height:4.2em}.intro-nav{display:flex;align-items:center;justify-content:space-between;gap:14px}.intro-nav .btn-primary,.intro-nav .btn-ghost{min-width:110px;min-height:46px}.intro-dots{display:flex;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:#fff3}.dot.active{background:var(--pink)}.panel-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:14}.quest-pill{position:absolute;top:74px;left:14px;min-width:48px;min-height:44px;padding:8px 14px;color:var(--purple);font:inherit;font-size:16px;font-weight:700;cursor:pointer;border-radius:22px}.quest-collapse{position:absolute;top:4px;right:8px;border:none;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;min-width:34px;min-height:30px}.dialogue-tabs{margin-bottom:0}.shop-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:140px}.job-desc{color:var(--text);font-size:13px;opacity:.85}.job-tool.owned{color:#7ae0a8;font-size:12px;font-weight:600}.job-tool.missing{color:#ffcf6b;font-size:12px;font-weight:600}.tool-hint{font-size:12px}.swipe-handle{display:none}.creator-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#06060cb8;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.creator{width:min(640px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}.creator-body{display:flex;gap:20px}.creator-preview{flex:0 0 280px;display:flex;flex-direction:column;gap:10px}.creator-preview canvas{width:280px;height:340px;border-radius:14px;background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(155,92,255,.16),transparent),#0a0a148c}.creator-model-picker{display:flex;align-items:center;justify-content:space-between;gap:8px}.creator-model-picker span{font-weight:700;font-size:16px}.creator-model-picker em{color:var(--muted);font-style:normal;margin-left:6px}.creator-model-picker .btn-ghost{min-width:44px;min-height:44px;font-size:20px}.creator-zones{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.creator-zone.disabled{opacity:.35}.creator-zone-label{font-size:13px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}.creator-swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:34px;height:34px;min-width:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0}.swatch.selected{border-color:var(--pink);box-shadow:0 0 10px #ff6b9d99}.creator-save{width:100%;min-height:48px}@media (max-width: 720px),(pointer: coarse) and (max-height: 500px){.hud{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));padding:8px 12px;gap:10px;font-size:13px}.hud-actions{top:auto;left:auto;right:max(12px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 74px);flex-direction:column;gap:10px}.hud-actions .btn-ghost{min-width:64px;min-height:44px;padding:10px 14px;font-size:13px}.npc-hint{left:auto;right:max(12px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 24px);transform:none;min-height:44px;max-width:60vw}.quest-tracker{top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:max(10px,env(safe-area-inset-right));left:auto;max-width:46vw;font-size:12px}.joystick{left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px}.dialogue-panel,.jobs-panel,.friends-panel{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:none}.panel-backdrop{z-index:22;background:#05050a73}.swipe-handle{display:block;position:absolute;top:6px;left:50%;transform:translate(-50%);width:44px;height:4px;border-radius:2px;background:#ffffff40}.quest-pill{top:calc(max(10px,env(safe-area-inset-top)) + 54px);left:auto;right:max(10px,env(safe-area-inset-right))}.toast-stack{left:max(12px,env(safe-area-inset-left));right:auto;transform:none;align-items:flex-start;max-width:62vw;z-index:32}.toast{white-space:normal;text-align:left;font-size:13px}.npc-hint{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 286px);max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-card .btn-primary,.job-card .btn-ghost{min-height:44px}.btn-mini{min-width:44px;min-height:44px}.auth-tabs button{min-height:44px}.quest-collapse{min-width:44px;min-height:44px}.btn-close{min-width:48px;min-height:48px;font-size:22px}.dialogue-input input,.dialogue-input .btn-primary,.btn-end,.btn-action{min-height:44px}.creator-body{flex-direction:column}.creator-preview{flex:none;align-items:center}.swatch{width:44px;height:44px;min-width:44px}.toast-stack{top:calc(max(10px,env(safe-area-inset-top)) + 52px)}}