/* METROPOLY five-step account onboarding - scoped to portal dialog */
#accountDialog.metro-onboarding{width:min(720px,calc(100vw - 30px));max-width:720px;max-height:92vh;overflow:auto;background:linear-gradient(155deg,#172738,#0b1523);color:#f7fbff;border:1px solid #46627b;border-radius:22px;box-shadow:0 25px 100px #000b;padding:0}
.metro-onboarding #accountForm{padding:32px 38px 25px;display:block}
.metro-onboarding .onboard-brand{font-weight:900;letter-spacing:.2em;font-size:12px;color:#78e1ff;margin-bottom:24px}
.metro-onboarding .onboard-brand span{color:#fff}
.metro-onboarding .reg-progress{display:flex;gap:7px;margin:0 0 24px}
.metro-onboarding .progress-dot{height:5px;border-radius:12px;background:#32475b;flex:1;transition:background .2s}
.metro-onboarding .progress-dot.active{background:#50c6ed}
.metro-onboarding .onboard-kicker{color:#74d6f9;font-size:11px;font-weight:900;letter-spacing:.18em}
.metro-onboarding #formTitle{font-size:clamp(25px,4vw,35px);margin:9px 0}
.metro-onboarding .onboard-desc{color:#a7bbce;margin:0 0 25px}
.metro-onboarding label{display:block;color:#e9f1fa;font-size:14px;margin-bottom:16px}
.metro-onboarding input:not([type=radio]),.metro-onboarding select{width:100%;box-sizing:border-box;margin-top:9px;padding:15px;border-radius:9px;border:1px solid #50647a;background:#101d2c;color:white;font-size:16px}
.metro-onboarding input:focus,.metro-onboarding select:focus{outline:2px solid #54c8eb}
.metro-onboarding .reg-hint{color:#a5b7c8;font-size:12px;line-height:1.6}
.metro-onboarding .reg-actions{display:flex;gap:12px;margin-top:20px}
.metro-onboarding #submitAccount{flex:1;border:0;border-radius:9px;background:#51a979;color:#fff;font-weight:900;min-height:52px;cursor:pointer}
.metro-onboarding #regBack{padding:0 22px;border:1px solid #496077;border-radius:9px;background:#1a2a3b;color:white;cursor:pointer}
.metro-onboarding #formError{color:#ffaaa9;min-height:19px}
.metro-onboarding .textButton{display:block;margin:18px auto 0}
.metro-onboarding .local-disclaimer{text-align:center;color:#8198ae;font-size:10px;letter-spacing:.08em;margin-top:22px}
.metro-onboarding .avatar-studio{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.metro-onboarding .avatar-preview{background:radial-gradient(circle at 50% 35%,#304b60,#0e1927);border:1px solid #40586c;border-radius:15px;display:flex;flex-direction:column;align-items:center;padding:10px}
.metro-onboarding #avatarPreview{height:260px;max-width:100%}
.metro-onboarding .avatar-preview small{font-size:10px;letter-spacing:.12em;color:#91b5c9}
.metro-onboarding .color-options{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 15px}
.metro-onboarding .swatch{width:30px;height:30px;border:2px solid #506278;border-radius:50%;cursor:pointer}
.metro-onboarding .swatch.selected{outline:2px solid #7ee5ff;outline-offset:2px}
.metro-onboarding .district-card{display:flex;align-items:center;gap:14px;border:1px solid #496077;background:#213247;padding:18px;border-radius:12px;cursor:pointer}
.metro-onboarding .district-card:has(input:checked){border-color:#65d2f5;background:#28465a}
.metro-onboarding .district-card input{accent-color:#65d2f5}
.metro-onboarding .district-card strong{display:block;font-size:17px;margin-bottom:7px}
.metro-onboarding .district-card small{color:#a8c0d3;line-height:1.5;display:block}
.metro-onboarding [hidden]{display:none!important}
@media(max-width:620px){.metro-onboarding #accountForm{padding:25px 18px}.metro-onboarding .avatar-studio{grid-template-columns:1fr}.metro-onboarding #avatarPreview{height:200px}}

.metro-onboarding #avatar3d{width:100%;height:290px;min-height:290px;touch-action:none}.metro-onboarding #avatar3d canvas{display:block;width:100%!important;height:100%!important;border-radius:10px}

/* METROPOLY immersive character studio — only registration character step */
#accountDialog.metro-onboarding.creator-active{position:fixed;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#0b1421!important}
.metro-onboarding.creator-active::backdrop{background:#050b14}
.metro-onboarding.creator-active #accountForm{height:100%;box-sizing:border-box;padding:0!important;display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-rows:58px 0 1fr 82px;position:relative}
.metro-onboarding.creator-active .onboard-brand{grid-column:1/3;grid-row:1;z-index:8;align-self:center;margin:0 0 0 28px}
.metro-onboarding.creator-active .reg-progress{grid-column:2;grid-row:1;z-index:8;align-self:center;margin:0 70px 0 0}
.metro-onboarding.creator-active #stepLabel,.metro-onboarding.creator-active #formTitle,.metro-onboarding.creator-active #stepDescription,.metro-onboarding.creator-active #switchMode,.metro-onboarding.creator-active .local-disclaimer{display:none}
.metro-onboarding.creator-active #regSteps{grid-column:1/3;grid-row:2/5;min-height:0;position:relative}
.metro-onboarding.creator-active .reg-step[data-step="3"]{display:block;height:100%}
.metro-onboarding.creator-active .avatar-studio{display:block;height:100%;position:relative;background:radial-gradient(ellipse at 48% 40%,#34475a 0%,#192b3c 35%,#0b1523 82%)}
.metro-onboarding.creator-active .avatar-preview{position:absolute;inset:0;border:0;border-radius:0;background:transparent;padding:0;display:block}
.metro-onboarding.creator-active #avatar3d{height:100%!important;min-height:0;width:100%}
.metro-onboarding.creator-active #avatar3d canvas{border-radius:0!important}
.metro-onboarding.creator-active .avatar-preview small{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);color:#a7c4d5;pointer-events:none;white-space:nowrap}
.metro-onboarding.creator-active .creator-tabs{position:absolute;top:10px;left:22px;z-index:4;display:flex;gap:5px}
.metro-onboarding .creator-tabs{display:none}
.metro-onboarding.creator-active .creator-tabs{display:flex}
.metro-onboarding .creator-tab{border:1px solid #547089;background:#152437;color:#d2e1ed;padding:13px 24px;font-weight:900;letter-spacing:.09em;cursor:pointer;transform:skew(-10deg)}
.metro-onboarding .creator-tab.active{background:#4b9ed4;color:white;border-color:#7bd2ff}
.metro-onboarding.creator-active .avatar-controls{position:absolute;right:25px;top:75px;width:310px;max-height:calc(100% - 180px);overflow:auto;box-sizing:border-box;z-index:5;padding:24px;background:linear-gradient(145deg,#172b40ee,#0e1b2eee);border:1px solid #53718c;border-radius:16px;box-shadow:0 18px 55px #0008;backdrop-filter:blur(16px)}
.metro-onboarding .creator-control-title{font-size:13px;font-weight:900;letter-spacing:.14em;margin-bottom:24px;color:#8ccee9}.metro-onboarding .creator-control-title span{float:right;color:#fff}
.metro-onboarding.creator-active .reg-actions{position:absolute;bottom:0;right:0;left:0;height:78px;margin:0;z-index:7;padding:12px 28px;box-sizing:border-box;background:#0a1422e8;border-top:1px solid #34495c}
.metro-onboarding.creator-active #submitAccount{flex:0 0 240px;margin-left:auto}
.metro-onboarding.creator-active #regBack{min-width:120px}
.metro-onboarding.creator-active #formError{position:absolute;bottom:80px;right:25px;z-index:9}
.metro-onboarding.creator-active #closeDialog{z-index:12;position:fixed;right:20px;top:14px}
.metro-onboarding .creator-face-options[hidden],.metro-onboarding .creator-body-options[hidden]{display:none!important}
@media(max-width:750px){.metro-onboarding.creator-active #accountForm{grid-template-columns:1fr}.metro-onboarding.creator-active .avatar-controls{right:10px;top:auto;bottom:88px;width:min(310px,calc(100vw - 20px));max-height:35vh;padding:14px}.metro-onboarding.creator-active .creator-tabs{top:8px;left:8px}.metro-onboarding .creator-tab{padding:10px}.metro-onboarding.creator-active .reg-progress{display:none}.metro-onboarding.creator-active .onboard-brand{display:none}.metro-onboarding.creator-active #submitAccount{flex-basis:170px}}

/* Immersive studio: preserve original site navigation within dialog top layer */
.metro-onboarding.creator-active .creator-portal-nav{position:absolute;top:0;left:0;right:0;height:76px;z-index:9;display:flex;align-items:center;gap:clamp(20px,3vw,70px);padding:0 68px 0 28px;box-sizing:border-box;background:linear-gradient(90deg,#09121ff5,#0e2032f0);border-bottom:1px solid #ffffff25;box-shadow:0 10px 28px #0005}
.creator-portal-nav{display:none}.creator-portal-brand img{width:160px;max-height:55px;object-fit:contain}.creator-portal-nav nav{display:flex;gap:clamp(12px,2vw,36px);flex:1;justify-content:center}.creator-portal-nav nav a{font-size:12px;letter-spacing:.13em;font-weight:900;color:#c4d7e7;text-decoration:none}.creator-portal-nav nav a:hover{color:#76dcff}.creator-portal-profile{display:flex;align-items:center;gap:9px;color:#fff;font-weight:900;font-size:12px;white-space:nowrap}.creator-profile-icon{display:grid;place-items:center;width:35px;height:35px;background:#24516a;border-radius:50%;color:#8de7ff}.creator-portal-badge{font-size:9px;color:#89b5d1;letter-spacing:.1em}
.metro-onboarding.creator-active .onboard-brand,.metro-onboarding.creator-active .reg-progress{display:none!important}.metro-onboarding.creator-active #closeDialog{top:87px;right:22px;z-index:15}.metro-onboarding.creator-active .creator-tabs{top:92px;left:32px}.metro-onboarding.creator-active .creator-scene-title{display:block;position:absolute;top:152px;left:35px;z-index:4;pointer-events:none}.creator-scene-title{display:none}.creator-scene-title small{color:#72c7f1;letter-spacing:.22em;font-size:11px;font-weight:900}.creator-scene-title h2{font-size:clamp(22px,2.2vw,36px);margin:8px 0;color:#f3f9ff;letter-spacing:.04em;text-shadow:0 4px 25px #0008}.creator-scene-title span{font-size:11px;color:#aec5d8;letter-spacing:.12em}.metro-onboarding.creator-active .avatar-studio{background:radial-gradient(ellipse at 48% 76%,#385d75 0%,transparent 43%),radial-gradient(ellipse at 52% 35%,#2b506b 0%,#142a40 48%,#081320 100%)}.metro-onboarding.creator-active .avatar-studio:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#091827 0%,transparent 22%),repeating-linear-gradient(90deg,transparent 0 110px,#a1cbe006 111px 112px);z-index:1}.metro-onboarding.creator-active .avatar-studio:after{content:'';position:absolute;left:24%;right:24%;bottom:76px;height:140px;border-radius:50%;background:radial-gradient(ellipse,#7ed7fa2a,transparent 65%);pointer-events:none}.metro-onboarding.creator-active .avatar-controls{top:180px;right:35px;width:300px;background:#101e2be8}.metro-onboarding.creator-active .avatar-preview small{bottom:100px;z-index:3}.metro-onboarding.creator-active .reg-actions{background:#091422f5}.metro-onboarding.creator-active #avatar3d{position:relative;z-index:2}.metro-onboarding.creator-active .creator-wardrobe:not([hidden]){position:absolute;display:block;top:175px;left:32px;width:295px;max-height:calc(100% - 280px);overflow-y:auto;z-index:6;padding:18px;background:#0c1b2be8;border:1px solid #63809a66;border-radius:14px;box-shadow:0 15px 55px #0008;backdrop-filter:blur(14px)}.creator-wardrobe[hidden]{display:none!important}.wardrobe-title{font-weight:900;font-size:13px;letter-spacing:.12em;color:#d8f1ff;margin-bottom:16px}.wardrobe-title small{display:block;margin-top:7px;font-size:10px;color:#81a9c2}.wardrobe-list{display:grid;gap:10px}.wardrobe-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;background:#192c40;color:white;border:1px solid #3a5770;border-radius:10px;cursor:pointer}.wardrobe-item:hover,.wardrobe-item.selected{border-color:#6bc9ff;background:#23445d}.wardrobe-figure{width:50px;height:62px;display:grid;place-items:center;background:linear-gradient(155deg,#5b7790,#26394c);border-radius:8px;font-size:32px;color:#cdeaff}.wardrobe-copy{flex:1}.wardrobe-copy strong{display:block;font-size:12px;letter-spacing:.08em}.wardrobe-copy small{display:block;margin-top:5px;font-size:11px;color:#a9c1d3}.wardrobe-check{opacity:0;color:#9dffc8}.wardrobe-item.selected .wardrobe-check{opacity:1}.wardrobe-tip{font-size:11px;color:#aac6d7;line-height:1.6;margin-top:18px}.metro-onboarding.creator-active .creator-outfit-select{display:none}
@media(max-width:1000px){.creator-portal-nav nav{display:none}.creator-portal-profile{margin-left:auto}.creator-portal-badge{display:none}.metro-onboarding.creator-active .creator-wardrobe:not([hidden]){width:240px;left:12px}.metro-onboarding.creator-active .avatar-controls{right:12px;width:235px}.metro-onboarding.creator-active .creator-scene-title{display:none}}
@media(max-width:600px){.metro-onboarding.creator-active .creator-portal-nav{height:65px;padding:0 45px 0 12px}.creator-portal-brand img{width:110px}.metro-onboarding.creator-active .creator-tabs{top:75px;left:10px}.metro-onboarding.creator-active .creator-wardrobe:not([hidden]){top:auto;bottom:88px;width:calc(100% - 20px);max-height:30vh}.metro-onboarding.creator-active .avatar-controls{bottom:88px;top:auto;max-height:30vh;width:calc(100% - 20px)}.metro-onboarding.creator-active #closeDialog{top:75px}}