/* NUVYTERA City — responsive unobtrusive gameplay layer.
   Walkable 3D and Society chat remain the primary canvas. */
#metroUi{position:fixed;inset:0;z-index:80;pointer-events:none;color:#e8f6ff;
 font-family:Inter,'Space Grotesk',sans-serif;font-size:12px;line-height:1.4}
#metroUi *,#metroUi *:before,#metroUi *:after{box-sizing:border-box}
#metroUi button{font:inherit;cursor:pointer;border:1px solid #ffffff24;color:#eaf8ff;
 background:linear-gradient(145deg,#152636ef,#0a1726f2);border-radius:9px;padding:9px 13px;
 font-weight:650;letter-spacing:.05em;transition:background .15s,border-color .15s,transform .15s}
#metroUi button:hover{border-color:#70ecca88;background:#1d3648}
#metroUi button:active{transform:scale(.97)}
#metroUi button:focus-visible{outline:2px solid #70ecca;outline-offset:2px}
#metroIdentity{position:absolute;top:18px;left:65px;display:flex;align-items:center;gap:9px;
 padding:9px 12px;border:1px solid #9adfef24;border-radius:9px;background:#071525bd;
 backdrop-filter:blur(12px);letter-spacing:.08em}
#metroIdentity b{font-size:12px;letter-spacing:.13em}
#metroIdentity i{color:#8ef7d7;font-style:normal}
#metroIdentity small{font-size:8px;color:#83a0b2;letter-spacing:.11em}
#metroTopRight{position:absolute;top:18px;right:19px;pointer-events:auto;display:flex;flex-direction:column;align-items:end;gap:8px}
#metroMapToggle{font-size:10px;padding:8px 11px!important}
#metroMapWrap{padding:7px;border:1px solid #80dcca33;border-radius:12px;background:#071322e8;box-shadow:0 16px 35px #0005}
#metroMapWrap[hidden]{display:none}
#metroMap{display:block;width:170px;height:170px;border-radius:7px;cursor:crosshair;background:#0a1623}
#metroDistrict{display:block;margin:7px 3px 2px;font-size:9px;letter-spacing:.16em;color:#99f5d9;text-align:center}
#metroActions{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);pointer-events:auto;
 display:flex;gap:5px;padding:6px;border:1px solid #a7e8e92a;border-radius:13px;
 background:#071320e9;box-shadow:0 12px 40px #0008;backdrop-filter:blur(20px)}
#metroActions button{white-space:nowrap;font-size:10px;padding:11px 12px}
#metroVitals{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
 display:flex;align-items:center;justify-content:center;gap:13px;background:#06111deb;border:1px solid #7cdec330;
 border-radius:8px;padding:7px 13px;color:#92aaba;font-size:10px;white-space:nowrap}
#metroVitals b{color:#f0faff;font-size:13px}
#metroCredits{color:#a9f2cf}
#metroPrompt{position:absolute;left:50%;top:15%;transform:translate(-50%,-12px);border:1px solid #9ef2dc66;
 border-radius:10px;padding:12px 18px;background:#071a29ec;max-width:80vw;color:#b9ffe2;
 letter-spacing:.07em;font-size:11px;opacity:0;transition:opacity .16s,transform .16s;box-shadow:0 8px 40px #0006}
#metroPrompt.active{transform:translate(-50%,0);opacity:1}
#metroHint{position:absolute;bottom:138px;left:50%;transform:translateX(-50%);
 font-size:9px;letter-spacing:.12em;color:#bed3d9c9;white-space:nowrap;text-shadow:0 1px 6px #000}
#metroFeed{position:absolute;top:72px;left:19px;display:flex;align-items:center;gap:12px;
 padding:8px 11px;border-radius:9px;background:#0a1928bb;border:1px solid #91d8e124;
 max-width:420px;color:#9bb6c4;font-size:10px;letter-spacing:.035em}
#metroFeed b{color:#93efd3;letter-spacing:.08em;font-size:9px}
#metroPanel{position:absolute;right:18px;top:260px;max-height:min(66vh,630px);width:min(365px,calc(100vw - 30px));
 background:#081725f5;border:1px solid #a3ddd94a;border-radius:14px;box-shadow:0 25px 70px #000b;
 overflow:hidden;pointer-events:auto;backdrop-filter:blur(20px)}
#metroPanel[hidden]{display:none}
.metroPanelHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;
 border-bottom:1px solid #ffffff19;background:#14293a}
#metroPanelTitle{font-size:12px;margin:0;letter-spacing:.11em;font-weight:750}
#metroPanelClose{padding:5px 9px!important}
#metroPanelBody{padding:14px;max-height:calc(min(66vh,630px) - 52px);overflow-y:auto;display:flex;flex-direction:column;gap:8px}
#metroPanelBody button.metroChoice{width:100%;text-align:left;letter-spacing:.045em;font-size:11px;padding:11px 13px}
#metroPanelBody .metroMuted{color:#abc0cc;font-size:11px;line-height:1.6;margin:3px 0 10px}
#metroPanelBody .metroBalance{color:#a6f5d3;font-size:13px;font-weight:700;margin:4px 0}
.metroShopRow{display:flex;align-items:center;gap:9px;border-bottom:1px solid #ffffff16;padding:7px 0}
.metroShopRow strong{font-weight:650;flex:1}
.metroShopRow small{font-size:10px;color:#9feacf;white-space:nowrap}
.metroShopRow button{font-size:9px!important;padding:7px 10px!important}
.metroHelpLine{font-size:11px;color:#d7edfa;margin:4px 0}
#metroUi .metroAccent{color:#a5f0d3}
body.minimal #metroUi{opacity:.02}
body.minimal #metroUi:hover{opacity:1}
@media(max-width:1100px){
 #metroIdentity small{display:none}
 #metroFeed{max-width:300px;top:62px}
 #metroPanel{top:230px}
 #metroActions button{font-size:9px;padding:9px}
 #metroMap{width:140px;height:140px}
}
@media(max-width:680px){
 #metroIdentity{top:10px;left:43px;padding:7px 9px}
 #metroIdentity b{font-size:10px}
 #metroTopRight{right:8px;top:9px}
 #metroMap{width:108px;height:108px}
 #metroMapWrap{padding:5px}
 #metroDistrict{font-size:7px;margin:4px 1px}
 #metroFeed{left:8px;top:49px;max-width:min(240px,calc(100vw - 150px));
 font-size:8px;align-items:start;gap:4px;flex-direction:column;padding:5px 8px}
 #metroFeed b{font-size:8px}
 #metroActions{bottom:calc(env(safe-area-inset-bottom) + 91px);left:50%;max-width:calc(100vw - 12px);
 width:max-content;padding:4px;gap:2px;border-radius:10px;flex-wrap:wrap;justify-content:center}
 #metroActions button{font-size:8px;padding:8px 9px}
 #metroVitals{bottom:calc(env(safe-area-inset-bottom) + 49px);padding:6px 9px;font-size:8px;gap:7px}
 #metroVitals b{font-size:11px}
 #metroMode{max-width:105px;overflow:hidden;text-overflow:ellipsis}
 #metroHint{bottom:calc(env(safe-area-inset-bottom) + 172px);font-size:7.5px;max-width:95vw;
 text-align:center;white-space:normal;background:#081724a3;padding:4px 7px;border-radius:5px}
 #metroPrompt{top:24%;font-size:10px;max-width:88vw}
 #metroPanel{top:auto;bottom:calc(env(safe-area-inset-bottom) + 205px);right:6px;max-height:43vh;width:min(320px,calc(100vw - 12px))}
 #metroPanelBody{max-height:calc(43vh - 52px)}
 #metroUi #metroActions button:nth-child(7){display:none}
}
@media(max-width:380px){
 #metroMap{width:92px;height:92px}
 #metroActions button{font-size:7.5px;padding:7px 6px}
 #metroFeed{max-width:185px}
}

#metroCamera{position:fixed;top:18px;left:50%;transform:translateX(-50%);pointer-events:auto;font-size:10px!important}
@media(max-width:680px){#metroCamera{top:112px;left:8px;transform:none;font-size:8px!important;padding:7px!important}}
.living-hud{position:fixed;left:20px;top:110px;z-index:85;display:flex;gap:8px;align-items:center;max-width:calc(100vw - 245px);font:11px system-ui;color:#203c33;background:#f1f2e9ed;border:1px solid #657c6466;border-radius:9px;padding:8px;pointer-events:auto}.living-hud[hidden]{display:none}.living-hud a{color:#245949;text-decoration:none;font-weight:750}.living-hud button{border:0;border-radius:5px;padding:5px;color:#245949;background:#dce5da;font-size:10px}.living-hud span{font-size:10px}.living-messages{max-height:200px;overflow:auto}#metroPanelBody form{display:grid;gap:8px}#metroPanelBody input,#metroPanelBody textarea{padding:10px;border-radius:7px;border:1px solid #718477;background:#eef1e8;color:#203c33;font:12px system-ui}#metroPanelBody a{display:block;color:#a6f0d5;padding:8px 0}@media(max-width:680px){.living-hud{left:8px;top:151px;max-width:calc(100vw - 16px);flex-wrap:wrap;gap:5px;font-size:9px}.living-hud span{font-size:9px}}

body.creator-city #metroCredits{display:none}
@media(max-width:680px){
 .visitor-hud{z-index:82}
 #metroActions{bottom:calc(env(safe-area-inset-bottom) + 240px);flex-wrap:nowrap;width:auto}
 #metroActions #metroDrive,#metroActions #metroCycle,#metroActions #metroPowers{display:none}
 #metroActions #metroGuide{display:block}
 .visitor-actions button{display:none}
 .visitor-actions #actionJump,.visitor-actions #actionSkate{display:block}
 body.creator-city .visitor-speed,body.creator-city .visitor-hint{display:none}
}
@media(max-width:680px){
 body.creator-city #metroFeed,body.creator-city #metroHint,body.creator-city .bottom-actions{display:none}
 body.creator-city #metroTopRight{top:55px}
 body.creator-city .living-hud{top:101px;flex-wrap:nowrap;gap:4px;font-size:8px;padding:6px}
 body.creator-city .living-hud button,body.creator-city .living-hud span{font-size:8px}
 body.creator-city #metroCamera{top:57px}
 body.creator-city #metroActions{bottom:52px}
 #metroUi #metroActions #metroGuide{display:block}
 body.creator-city #metroVitals{bottom:12px}
 body.creator-city #metroPrompt{top:160px;padding:8px;font-size:9px}
}
/* Visual reset: the world is the interface. */
#metroTopRight{display:none!important}
body.creator-city #metroFeed,body.creator-city #metroHint,body.creator-city #metroVitals,body.creator-city .visitor-speed,body.creator-city .visitor-hint,body.creator-city .bottom-actions{display:none!important}
body.creator-city #metroIdentity{top:25px;left:75px;background:transparent;border:0;padding:0;backdrop-filter:none;text-shadow:0 1px 5px #0005}
body.creator-city #metroIdentity small{display:none}
body.creator-city #metroCamera{top:auto;bottom:26px;left:auto;right:28px;transform:none;background:#faf8f1ee;color:#263128;border:1px solid #c7cbbe;font-size:9px!important;box-shadow:none}
body.creator-city #metroActions{bottom:24px;background:#fbfaf3f2;border:1px solid #dbdcd0;box-shadow:0 5px 18px #0001;border-radius:30px;padding:5px 8px;gap:4px;backdrop-filter:none}
body.creator-city #metroActions button{display:none;background:transparent;color:#293c32;border:0;padding:9px 15px;font-size:10px;letter-spacing:.12em}
body.creator-city #metroActions #metroStore,body.creator-city #metroActions #metroGuide,body.creator-city #metroActions button:last-child{display:block}
body.creator-city .living-hud{top:58px;left:75px;background:transparent;border:0;padding:0;color:#dee7dc;font-size:10px;text-shadow:0 1px 4px #0007}
body.creator-city .living-hud a,body.creator-city .living-hud button{display:none}
body.creator-city #metroPanel{background:#fbfaf5f7;color:#25352c;border:1px solid #dfdfd2;backdrop-filter:blur(15px);box-shadow:0 15px 60px #0002;top:105px;right:28px;width:340px;max-height:70vh;border-radius:15px}
body.creator-city .metroPanelHeader{background:transparent;border-bottom:1px solid #deded1;padding:20px}
body.creator-city #metroPanelTitle{font-size:13px;letter-spacing:.06em;font-weight:600}
body.creator-city #metroPanelBody{max-height:calc(70vh - 60px);padding:18px;gap:9px;font-size:12px;line-height:1.7}
body.creator-city #metroPanel button{color:#293b31;background:#eeeee4;border:1px solid #dcdfd3;border-radius:7px;padding:10px 13px;letter-spacing:0;font-size:12px;font-weight:500;text-align:left}
body.creator-city #metroPanel a{color:#426550}
body.creator-city #metroPrompt{background:#f9f8f1e8;border:0;color:#34493c;box-shadow:0 5px 20px #0001;border-radius:30px;top:auto;bottom:90px;font-size:10px;padding:9px 15px;letter-spacing:.03em}
body.creator-city #veil{opacity:.12}
@media(max-width:680px){body.creator-city #metroIdentity{top:22px;left:57px}body.creator-city .living-hud{top:48px;left:58px}body.creator-city #metroCamera{bottom:80px;right:12px}body.creator-city #metroActions{bottom:18px;max-width:95vw}body.creator-city #metroPanel{top:auto;bottom:80px;left:10px;right:10px;width:auto;max-height:60vh}body.creator-city #metroPanelBody{max-height:calc(60vh - 60px)}body.creator-city #metroPrompt{top:auto;bottom:135px}}
body.creator-city .visitor-actions{display:none!important}
#metroLeave{position:fixed;top:80px;right:24px;z-index:35;padding:12px 18px;border:1px solid #d8dece;border-radius:24px;background:#fbfaf3;color:#263b30;cursor:pointer;pointer-events:auto}
#metroLeave[hidden]{display:none!important}
body.creator-city #metroPanel input,body.creator-city #metroPanel select,body.creator-city #metroPanel textarea{box-sizing:border-box;max-width:100%;background:#fafbf6;color:#233b36;border:1px solid #acbdb3;border-radius:6px;padding:8px;font:inherit}
body.creator-city #metroPanel label{display:block;color:#304e45}
body.creator-city:not(.resident-chat-open) #dialogBubble{display:none!important}