:root{--navy:#151d30;--panel:rgba(18,27,45,.88);--mint:#65d4b3;--gold:#f5d591;--white:#f6f4ed}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a8c6c8;color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}#game{position:fixed;inset:0;width:100%;height:100%;display:block}#boot{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 35%,#344867,#151d30 65%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:opacity .5s}#boot h1{letter-spacing:.28em;margin:4px 0;font-size:22px}#boot p{color:#b9c8d4;font-size:13px}.brand-mark{width:76px;height:76px;border-radius:24px;background:linear-gradient(140deg,#7be3c3,#298f8a);display:grid;place-items:center;color:#102b37;font-weight:900;font-size:48px;box-shadow:0 15px 45px #050b1d88}.loadbar{width:190px;height:4px;background:#35455e;border-radius:9px;overflow:hidden}.loadbar i{display:block;height:100%;width:50%;background:var(--gold);animation:load 1.4s infinite alternate}@keyframes load{to{width:100%}}.hidden{display:none!important}.topbar{position:absolute;top:0;left:0;right:0;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#10182bd9,transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;gap:10px;align-items:center}.brand b{letter-spacing:.17em;font-size:13px}.brand small{display:block;font-size:8px;letter-spacing:.14em;color:#b8c6d2;margin-top:3px}.brand-mark.small{width:36px;height:36px;border-radius:12px;font-size:24px}.wallet{display:flex;align-items:center;gap:12px;background:#111b2bca;padding:8px 10px;border:1px solid #ffffff24;border-radius:12px}.wallet span{color:var(--gold)}button{font:inherit;cursor:pointer;border:0}.wallet button{background:var(--mint);color:#12313a;font-size:12px;font-weight:800;padding:8px 10px;border-radius:8px}.wallet #account-open{background:#293b54;color:#eaf5f4;border:1px solid #ffffff25}.needs,.quest{position:absolute;top:100px;left:20px;width:210px;background:var(--panel);border:1px solid #ffffff20;border-radius:16px;padding:15px;backdrop-filter:blur(12px);box-shadow:0 12px 35px #08101c44}.needs h3{font-size:11px;letter-spacing:.14em;margin:0 0 15px;color:#b8c8d7}.needs h3 span{color:var(--mint);float:right}.need{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:8px;margin:10px 0;font-size:10px;color:#d8e0e7}.need>div{height:6px;border-radius:8px;background:#34445b;overflow:hidden}.need i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#4cbfa5,#b1e5b4)}.quest{top:auto;bottom:104px;left:20px;display:flex;flex-direction:column;gap:6px}.quest span{font-size:9px;color:var(--gold);letter-spacing:.15em}.quest b{font-size:12px}.quest small{font-size:10px;color:#b6c8d4}.actions{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;background:#10182bdc;border:1px solid #ffffff20;border-radius:18px;backdrop-filter:blur(14px)}.actions button{width:62px;height:56px;border-radius:12px;background:#26334b;color:#f5f7f7;font-size:22px;transition:.2s}.actions button:hover{background:#3a526a;transform:translateY(-2px)}.actions small{display:block;font-size:9px;margin-top:2px;color:#c4d0d8}.controls-help{position:absolute;right:18px;bottom:24px;font-size:10px;color:#f7f7f7;text-shadow:0 2px 5px #000;background:#111a2b99;padding:8px 10px;border-radius:8px}.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff9;font-size:23px;text-shadow:0 1px 4px #000}.toast{position:absolute;top:76px;left:50%;transform:translateX(-50%);background:#101a2de8;border:1px solid #ffffff2b;padding:10px 16px;border-radius:12px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.toast.show{opacity:1}.modal{position:absolute;inset:0;background:#050a14aa;display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}.modal section{position:relative;width:min(460px,100%);background:#18253a;border:1px solid #ffffff25;border-radius:22px;padding:28px;box-shadow:0 24px 70px #0008}.modal h2{margin:0 0 8px}.modal p{color:#bfccd8;font-size:13px;line-height:1.6}.modal .close{position:absolute;right:14px;top:12px;background:#ffffff12;color:white;border-radius:8px;width:30px;height:30px;font-size:20px}.modal .primary{background:var(--mint);color:#102b32;font-weight:800;padding:12px 16px;border-radius:10px;margin-top:12px}.modal .option{display:block;width:100%;text-align:left;background:#25354d;color:white;padding:13px;border-radius:10px;margin:8px 0}.mobile-controls{display:none;position:absolute;bottom:100px;left:16px}.mobile-controls button{width:44px;height:44px;border-radius:12px;background:#17253bd9;color:white;margin:3px;border:1px solid #ffffff2a}.mobile-controls>button{margin-left:48px}@media(max-width:650px){.topbar{padding:12px}.needs{top:72px;left:10px;width:165px;padding:11px}.quest{left:10px;bottom:180px;width:165px}.controls-help{display:none}.actions{bottom:10px;gap:4px}.actions button{width:54px;height:51px}.mobile-controls{display:block}.wallet{gap:6px;padding:6px}.wallet button{font-size:10px}.brand b{font-size:11px}}

/* Metaverse upgrade: responsive HUD, compact safe areas, camera zoom controls. */
#game{touch-action:none;outline:none}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.zoom-controls{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;padding:7px;background:rgba(16,24,43,.78);border:1px solid #ffffff26;border-radius:15px;backdrop-filter:blur(12px);z-index:3}.zoom-controls button{width:42px;height:42px;border-radius:11px;background:#65d4b3;color:#102b37;font-size:26px;font-weight:800;line-height:1}.zoom-controls span{font-size:9px;color:#f6f4ed;min-width:30px;text-align:center}.needs,.quest,.actions,.topbar{max-width:calc(100vw - 20px)}.actions{max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}.actions::-webkit-scrollbar{display:none}.mobile-controls{z-index:3;touch-action:none}.mobile-controls button{touch-action:none;user-select:none;-webkit-user-select:none}.modal{z-index:10}.topbar{z-index:4}@media(max-width:650px){.topbar{padding:calc(8px + env(safe-area-inset-top)) 10px 8px}.brand{gap:6px}.brand-mark.small{width:30px;height:30px;border-radius:10px;font-size:20px}.brand small{font-size:7px}.wallet{gap:4px;padding:5px}.wallet button{padding:7px 8px}.needs{top:62px;left:8px;width:min(158px,43vw);padding:9px}.needs h3{font-size:10px;margin-bottom:8px}.need{grid-template-columns:48px 1fr;gap:5px;margin:7px 0;font-size:9px}.quest{left:8px;bottom:156px;width:min(158px,43vw);padding:10px}.quest b{font-size:11px}.actions{bottom:calc(8px + env(safe-area-inset-bottom));gap:3px;padding:5px;border-radius:14px}.actions button{flex:0 0 48px;width:48px;height:46px;font-size:19px}.actions small{font-size:8px}.mobile-controls{bottom:calc(76px + env(safe-area-inset-bottom));left:8px}.mobile-controls button{width:40px;height:40px;margin:2px}.mobile-controls>button{margin-left:44px}.zoom-controls{right:8px;top:48%;gap:5px;padding:5px}.zoom-controls button{width:36px;height:36px;font-size:23px}.crosshair{font-size:20px}}@media(max-height:500px) and (orientation:landscape){.needs{top:58px}.quest{bottom:78px}.actions button{height:40px}.mobile-controls{bottom:65px}.zoom-controls{top:45%}}

/* Player Style Studio V2 */
.style-select{display:block;width:100%;padding:12px;margin:6px 0 14px;border-radius:10px;background:#17243a;color:#f2f6ff;border:1px solid #435675;font:inherit;min-height:44px}.actions button[data-action="style"]{color:#79e1c5}.actions button{touch-action:manipulation}.modal section{max-height:82dvh;overflow:auto}

/* Avatar V4: reliable touch gestures and safe-area spacing */
#game{touch-action:none;user-select:none;-webkit-user-select:none}.zoom-controls span{font-size:11px;min-width:38px}@media(max-width:650px){.zoom-controls{right:max(8px,env(safe-area-inset-right));top:44%}.mobile-controls{left:max(8px,env(safe-area-inset-left))}}