header{gap:25px}header nav{gap:19px}.header-right{gap:10px}.profile-button{max-width:170px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:10px 13px;border:1px solid #686085;border-radius:6px;background:#26213d}.inbox-button{font-size:25px;position:relative;padding:5px 9px}.inbox-button b{position:absolute;right:0;top:0;min-width:16px;padding:2px 4px;background:#ef32ab;font-size:10px;border-radius:10px}.social-shell p{color:#b9c2df}.social-shell h2{margin-bottom:12px}.social-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #343a5a;padding-bottom:13px;margin-bottom:22px}.social-tabs button{border-radius:6px;padding:9px 13px;color:#afb9d9}.social-tabs button.active{background:#36265b;color:#e4cbff}.social-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}.social-toolbar input{flex:1;min-width:0}.social-toolbar small{font-size:10px;color:#949fbd;max-width:65%}.social-intro,.avatar-editor,.player-card{display:grid;grid-template-columns:150px 1fr;gap:25px;align-items:center;margin:22px 0}.social-intro svg{width:130px;height:165px}.social-intro ul{padding-left:20px;line-height:2;color:#d6dcf1}.avatar-stage{display:grid;place-items:center;min-height:210px;background:radial-gradient(ellipse at bottom,#704cc055,#122038 70%);border:1px solid #57417e;border-radius:12px}.avatar-stage svg{width:130px;height:175px;filter:drop-shadow(5px 7px 0 #0002)}.avatar-fields{display:grid;gap:14px}.avatar-colours{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.avatar-colours label{font-size:10px}.avatar-colours input{width:100%;height:35px;padding:3px}.social-shell label{display:grid;gap:7px;margin-bottom:14px}.social-shell label small{font-size:10px;color:#a7b2d1;line-height:1.5}.social-shell input,.social-shell textarea,.social-shell select{width:100%;background:#141b32;color:#f0f4ff;border:1px solid #42486a;border-radius:6px;padding:11px}.social-shell textarea{resize:vertical}.social-shell .wallet-choice{margin:7px 0}.people-list{display:grid;gap:8px}.person-card{display:flex;gap:13px;align-items:center;width:100%;text-align:left;border:1px solid #343f60;background:#172039;border-radius:10px;padding:9px 13px}.person-card>span:nth-child(2){flex:1;min-width:0}.person-card strong{display:block;font-size:14px;color:#f4f4ff}.person-card small{display:block;color:#a5b2d2;font-size:11px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:350px}.person-card em{font-style:normal;font-size:8px;letter-spacing:1px;color:#ffd885;margin-left:7px}.mini-avatar svg{display:block;width:40px;height:50px}.presence-dot{width:7px;height:7px;border-radius:50%;background:#58617a}.presence-dot.online{background:#3ef0ae;box-shadow:0 0 10px #3ef0ae66}.social-empty{text-align:center;border:1px dashed #3e4968;border-radius:9px;padding:30px 20px;color:#aebbd8;line-height:1.7}.unread-count{background:#a338d3;border-radius:10px;padding:3px 7px;font-size:10px}.message-list{display:flex;flex-direction:column;gap:10px;max-height:42dvh;min-height:180px;overflow:auto;padding:14px 5px;margin:12px 0;background:#10182b;border-radius:10px}.message{align-self:flex-start;max-width:85%;background:#29314d;padding:10px 13px;border-radius:12px 12px 12px 2px;margin-inline:8px}.message.mine{align-self:flex-end;background:#423064;border-radius:12px 12px 2px 12px}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#f0efff}.message time{display:block;font-size:9px;color:#bdc3d9;margin-top:7px}#socialStatus{position:absolute;bottom:74px;left:24px;pointer-events:none;max-width:calc(100% - 100px);padding:6px 10px;background:#15203ad9;color:#cbdaf1;border-radius:5px;font-size:10px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.social-shell button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1100px){header{gap:17px;padding-inline:18px}header nav{gap:13px}.brand{font-size:22px}}
@media(max-width:760px){header{height:auto;min-height:108px;flex-wrap:wrap;padding:12px;gap:12px}header nav{order:3;width:100%;height:30px;justify-content:space-between}header .header-right{gap:4px}.profile-button{max-width:130px;font-size:11px}#socialStatus{bottom:70px;left:12px;font-size:9px}.social-toolbar{flex-wrap:wrap}.avatar-editor,.player-card{grid-template-columns:105px 1fr;gap:14px}.avatar-stage{min-height:180px}.avatar-stage svg{width:100px}.avatar-colours{grid-template-columns:repeat(2,1fr)}.social-intro{grid-template-columns:90px 1fr;gap:14px}.social-intro svg{width:90px}.social-intro ul{font-size:11px}.person-card small{max-width:190px}}

/* Keep the city canvas full-size, with only the requested map controls. */
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header{flex-shrink:0}
main{position:relative;isolation:isolate;height:auto;min-height:0;flex:1;min-width:0;--chat-width:clamp(320px,30vw,410px)}
#world{min-width:0;min-height:0}
.world-top{justify-content:flex-end}
.occupancy-controls{top:24px;left:24px;right:80px}
.world-bottom{justify-content:flex-end}
header nav .nav{display:block;white-space:nowrap}
@media(max-width:760px){header nav{margin-left:0;gap:10px}header nav .nav{font-size:11px}.occupancy-controls{top:16px;left:12px;right:64px}.world-top{top:16px;right:12px}.world-bottom{left:12px;right:12px;bottom:16px}}

/* Translucent chat overlays the full-width city; controls move into the clear area. */
#socialPanel[hidden]{display:none}
#socialPanel{position:absolute;z-index:7;inset:0 0 0 auto;width:var(--chat-width);min-width:0;display:flex;flex-direction:column;background:rgb(12 18 35 / 52%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-left:1px solid #c5ceef40;box-shadow:-8px 0 24px #0002;overflow:hidden;color:#f5f6ff;text-shadow:0 1px 3px #0009}
.social-panel-bar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:10px 18px;border-bottom:1px solid #303954;color:#b9a5db;font-size:10px;letter-spacing:2px}
#closeSocialPanel{font-size:25px;line-height:1;width:34px;height:34px;border-radius:6px;color:#e9e3ff}
#closeSocialPanel:hover{background:#36265b}
#socialPanelBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px;flex:1}
#socialPanelTitle{font-size:23px;overflow-wrap:anywhere;outline:none}
#socialPanel .eyebrow{display:none}
#socialPanel .social-tabs{gap:3px;margin-bottom:16px}
#socialPanel .social-tabs button{padding:8px;font-size:11px}
#socialPanel .social-toolbar{flex-wrap:wrap}
#socialPanel .social-intro,#socialPanel .avatar-editor,#socialPanel .player-card{grid-template-columns:1fr;gap:14px}
#socialPanel .social-intro>div{display:none}
#socialPanel .avatar-stage{min-height:155px}
#socialPanel .avatar-stage svg{height:140px}
#socialPanel .social-shell p{font-size:13px;line-height:1.6}
#socialPanel .message-list{max-height:calc(100dvh - 450px);min-height:150px}
#socialPanel .social-toolbar small{max-width:60%}
#socialPanel .person-card{padding:9px;gap:9px}
#socialPanel .person-card strong{overflow-wrap:anywhere}
@media(max-width:700px){
 #socialPanel{inset:auto 0 0;height:48%;width:100%;border-left:0;border-top:1px solid #c5ceef40}
 #socialPanelBody{padding:12px 16px}
 .social-panel-bar{padding:3px 12px}
 #socialPanel .message-list{max-height:22dvh;min-height:100px}
 #socialPanelTitle{font-size:19px;margin-top:0}
}

.world-top{z-index:6}
#environmentPanel{position:absolute;top:46px;right:0;width:min(270px,calc(100vw - 24px));padding:18px;background:#151c32f5;border:1px solid #565174;border-radius:9px;box-shadow:0 12px 35px #0004;pointer-events:auto;max-height:calc(100dvh - 230px);overflow-y:auto}
#environmentPanel strong{display:block;font-size:14px;margin-bottom:16px}
#environmentPanel label{margin-top:14px}
#environmentPanel select{font-size:12px;padding:10px}
#environmentPanel small,#environmentPanel p{color:#aebbd8;font-size:10px;line-height:1.5}
#environmentPanel small{display:block;margin-top:8px}
#environmentPanel p{margin-bottom:0}

#socialPanel .social-panel-bar{background:#10182b20;border-bottom-color:#c5ceef40;color:#e4d5ff}
#socialPanel .social-shell p,#socialPanel .social-empty,#socialPanel .social-tabs button,#socialPanel label{color:#eef0ff}
#socialPanel .message-list{background:transparent}
#socialPanel .person-card{background:rgb(20 29 51 / 55%);border-color:#b0bce740}
#socialPanel .message{background:rgb(27 37 61 / 64%)}
#socialPanel .message.mine{background:rgb(66 40 101 / 70%)}
#socialPanel input,#socialPanel textarea,#socialPanel select{background:rgb(14 22 41 / 66%);border-color:#a5b7db66}
#socialPanel option{background:#141b32}
#socialPanel .notice{background:rgb(29 34 65 / 58%);color:#eef0ff}
#socialPanel .social-empty{background:#10182b25;border-color:#c5ceef55}
#socialPanel .person-card small,#socialPanel .social-toolbar small,#socialPanel .subtle{color:#e0e6fa!important}
#socialPanel .social-tabs{border-bottom-color:#c5ceef40}
#socialPanel .social-tabs button.active{background:#714da86b;color:#fff}
@media(min-width:701px){
 main:has(#socialPanel:not([hidden])) .world-top,main:has(#socialPanel:not([hidden])) .world-bottom{right:calc(var(--chat-width) + 24px)}
 main:has(#socialPanel:not([hidden])) .view-controls{right:calc(var(--chat-width) + 24px)}
 main:has(#socialPanel:not([hidden])) #inspector{right:calc(var(--chat-width) + 22px)}
 main:has(#socialPanel:not([hidden])) .occupancy-controls{right:calc(var(--chat-width) + 80px)}
}
@media(max-width:700px){
 main:has(#socialPanel:not([hidden])) .world-bottom{bottom:calc(48% + 16px)}
 main:has(#socialPanel:not([hidden])) .view-controls{bottom:calc(48% + 68px)}
 main:has(#socialPanel:not([hidden])) #inspector{max-height:calc(52% - 90px)}
}

/* In phone landscape, keep weather clear of the camera toolbar. */
@media (pointer:coarse) and (max-height:500px){
 header{height:56px;min-height:56px;padding-inline:16px;gap:18px}
 .view-controls{display:flex;align-items:center;right:12px;bottom:12px}
 .view-controls span{width:1px;height:24px;margin:0 3px}
 .view-controls button{width:34px;height:32px}
 .world-top{top:12px;right:12px}
 .occupancy-controls{top:12px;left:12px;right:64px}
 .world-bottom{bottom:12px;left:12px}
}

.avatar-hat-picker{min-width:0;margin:12px 0;padding:12px;border:1px solid #45466c;border-radius:12px}.avatar-hat-picker legend{padding:0 6px;font-weight:700}.avatar-hat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.avatar-hat-grid button{min-width:0;min-height:88px;padding:6px;border:1px solid #545675;border-radius:10px;background:#21243c;color:#f1f3ff;font-size:12px}.avatar-hat-grid svg{display:block;width:100%;height:64px}.avatar-hat-grid button[aria-pressed=true]{border-color:#00d9ff;background:#214458;box-shadow:inset 0 0 0 1px #00d9ff}.avatar-hat-grid button:focus-visible{outline:2px solid #00d9ff;outline-offset:2px}#avatarHatPicker[hidden]{display:none}
.invite-share{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}.invite-share a,.invite-share button{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:10px}.invite-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.invite-stats>div{display:grid;gap:6px;border:1px solid #576681;border-radius:10px;padding:14px}.invite-stats strong{font-size:25px;color:#a4ec89}.invite-stats small{font-size:11px}#friendInviteLink{width:100%;min-width:0;margin-top:8px}#inviteFriend{margin:8px 0 20px}#inviteFriendContent [data-status]{font-size:12px;color:#bdebc1}
.car-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.car-swatch{min-width:0;min-height:52px;padding:8px 2px;border:2px solid transparent;border-top:14px solid var(--swatch);background:#172238;color:white;border-radius:8px;font-size:.76rem}.car-swatch[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px}.car-palette{margin-top:16px}.car-palette summary{cursor:pointer;min-height:44px;padding:10px;background:#ffffff0c;border-radius:8px}.reward-car-style{display:block!important}.reward-car-style fieldset{margin:12px 0;padding:12px;min-width:0;border:1px solid #ffffff30;border-radius:12px}.reward-car-style input[type=file]{max-width:100%;font-size:16px}.reward-car-style input[type=color]{width:100%;height:44px}.reward-car-style [data-wrap-preview] img{max-width:100%;max-height:110px;object-fit:contain;border-radius:8px;margin-top:10px}.reward-car-style small{display:block;line-height:1.5}.reward-car-style [data-car-status]{font-size:.85rem;line-height:1.5}