@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#12161c;--panel:#262c35;--line:#38414d;--text:#f4f7fb;--muted:#abb6c3;--cyan:#76d5f1;--green:#78e09e;--yellow:#ffcc65;--red:#ff7886}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;font-weight:800}a{color:inherit;text-decoration:none}a:hover{color:var(--cyan)}.topbar{position:relative;z-index:10;background:#121a24;border-bottom:1px solid #354252}.nav-inner{max-width:1440px;min-height:74px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:10px 28px}.brand img{width:175px;max-height:52px;object-fit:contain;object-position:left}.topbar nav{display:flex;align-items:center;gap:28px}.topbar nav a{font-size:11px;font-weight:800;letter-spacing:1.3px;color:#c5d1df}.topbar nav a:hover{color:white}#userNav{display:flex;align-items:center;gap:10px}#userNav span{font-size:11px;font-weight:700}.quiet,.nav-cta{padding:12px 18px;color:#fff;border-radius:3px}.quiet{background:#293849;border:1px solid #50627a}.nav-cta{background:#348e66}.hero{height:560px;position:relative;background:#1a2c3d;overflow:hidden}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(10,21,30,.12),rgba(10,21,30,.08)),url('metropoly-portal-city.svg');background-size:cover;background-position:center 47%;filter:saturate(1.2)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0b1825f7 0%,#0b1825e8 25%,#0b182580 55%,#0b18254a 100%),linear-gradient(0deg,#12161c 0%,transparent 35%)}.hero-inner{max-width:1440px;margin:auto;position:relative;z-index:1;height:100%;padding:55px 54px;display:flex;justify-content:space-between;align-items:center}.game-summary{max-width:670px}.crumb{font-size:10px;letter-spacing:1.3px;color:#aabac9;font-weight:700;margin-bottom:33px}.crumb span{color:var(--cyan);padding:0 8px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:900;color:var(--cyan)}.live{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 13px var(--green);margin-right:8px}.hero-logo{width:240px;height:70px;object-fit:contain;object-position:left;margin:8px 0 5px}.hero h1{font:900 clamp(48px,5vw,75px)/.93 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;margin:6px 0 16px}.hero h1 span{color:var(--cyan)}.hero-description{max-width:500px;font-size:15px;line-height:1.7;color:#e3eaf2}.badges{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 25px;color:#d8e4ef;font-size:10px;font-weight:800;letter-spacing:.5px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.primary{padding:16px 25px;background:#2f9b62;color:white;border-radius:3px;box-shadow:0 5px 0 #1e6a44}.primary:hover{background:#38b773}.secondary{padding:16px 22px;border:1px solid #71899c;background:#30465b99;border-radius:3px;font-weight:800;font-size:12px}.footnote{font-size:11px;color:#b3c2d1;margin-top:22px}.hero-rating{align-self:flex-end;display:flex;gap:10px;align-items:center;margin-bottom:35px;padding:10px;background:#111b26bb;border:1px solid #ffffff22}.hero-rating strong{background:#b9e2f5;color:#17283a;font-size:30px;padding:8px}.hero-rating span{font-weight:900;letter-spacing:1px}.hero-rating small{font-size:9px;color:#adc3d4}.main-content{max-width:1360px;margin:auto;padding:0 28px}.section{padding:54px 0 12px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-title h2{font-size:28px;margin:7px 0 0;letter-spacing:-.6px}.section-title .eyebrow{margin:0}.muted{font-size:10px;color:#a9b6c4;font-weight:800;letter-spacing:1.1px}.gallery-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px;height:355px}.gallery-main,.gallery-tile{position:relative;overflow:hidden;background:#2a3744}.gallery-main img,.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.gallery-main:hover img,.gallery-tile:hover img{transform:scale(1.035)}.gallery-side{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-height:0}.gallery-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#07111de9,transparent);padding:38px 18px 16px;font-weight:900;letter-spacing:1.3px}.gallery-label small{display:block;font-size:9px;color:#c0d5e5;margin-top:4px}.gallery-promo{display:flex;flex-direction:column;justify-content:space-between;padding:16px 20px;background:linear-gradient(125deg,#4c273c,#203e57 60%,#1b4939);overflow:hidden}.promo-kicker{font-size:10px;letter-spacing:1.4px;color:#e8c7e4}.gallery-promo strong{font:900 36px/.88 'Barlow Condensed',Impact,sans-serif}.gallery-promo em{font-style:normal;color:var(--yellow)}.gallery-promo>span:last-child{font-size:9px;letter-spacing:1.5px;color:#c7d2e0}.caption{color:#91a0b0;font-size:11px}.description-panel{display:grid;grid-template-columns:145px minmax(250px,1fr) 240px;gap:24px;background:#292e36;padding:22px;border:1px solid #343d47}.cover{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;background:linear-gradient(145deg,#2a5675,#1a2537);min-height:170px;padding:12px}.cover img{width:100%;object-fit:contain}.cover span{font-size:9px;color:#b9e7fa;font-weight:900}.description-text h3{font-size:17px;margin:4px 0 10px}.description-text p{color:#d1d7df;line-height:1.65;font-size:13px}.description-text a{color:var(--cyan);font-weight:800;font-size:11px}.facts{display:grid;gap:14px;border-left:1px solid #48515d;padding-left:22px}.facts div{display:grid;gap:5px}.facts small{font-size:10px;color:#a4b3c2;font-weight:800}.facts strong{font-size:12px}.district-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.district-card{background:#252e38;border:1px solid #384758;overflow:hidden}.district-card img{display:block;width:100%;height:185px;object-fit:cover}.district-body{padding:23px}.tag{font-size:10px;font-weight:900;letter-spacing:1px}.tag.blue{color:var(--cyan)}.tag.green{color:var(--green)}.tag.yellow{color:var(--yellow)}.district-body h3{font:900 31px 'Barlow Condensed',Impact,sans-serif;margin:12px 0 8px}.district-body p,.feature-grid p,.news-grid p{color:#b7c3cf;line-height:1.65}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.feature-grid article{background:#252b34;padding:24px;border-top:3px solid #5a7b95}.feature-icon{display:inline-grid;place-items:center;font-size:30px;width:52px;height:52px;background:#162638;border-radius:8px}.feature-icon.cyan{color:var(--cyan)}.feature-icon.green{color:var(--green)}.feature-icon.yellow{color:var(--yellow)}.feature-icon.red{color:var(--red)}.feature-grid h3{font-size:13px;letter-spacing:1px}.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.news-grid article{background:#262e38;padding:28px;border:1px solid #3b4655}.news-grid h3{font-size:20px}.studio{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,#192f42,#1c433b);padding:38px 45px;margin:54px 0 35px;border-left:5px solid var(--green)}.studio h2{font:900 55px/.9 'Barlow Condensed',Impact,sans-serif;margin:16px 0}.studio h2 span{color:var(--cyan)}.studio p:last-child{color:#b6c8d8}footer{max-width:1360px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:30px 28px;color:#9faebb;font-size:10px;letter-spacing:1px;border-top:1px solid #343d48}footer img{width:150px;max-height:48px;object-fit:contain}dialog{border:1px solid #526c81;background:#202a36;color:white;width:min(460px,94vw);border-radius:9px;padding:30px}dialog::backdrop{background:#05080edb}dialog h2{font-size:27px}dialog label:not(.spawn){display:block;margin:15px 0;color:#c9d7e6;font-size:13px}dialog input:not([type=radio]){display:block;width:100%;margin-top:7px;padding:12px;background:#101a27;border:1px solid #52647a;border-radius:4px;color:white}fieldset{border:1px solid #42566c;margin:18px 0;padding:12px}legend{font-size:12px;color:#a7d7f2}.spawn{display:block;padding:12px;background:#29394d;margin:8px 0}.spawn small{display:block;color:#b1c5d4;padding-left:24px}#submitAccount{width:100%;padding:14px;background:#2e9e68;color:#fff;border-radius:4px}.textButton{background:transparent;color:#a6dfff;width:100%;margin-top:12px;padding:12px}.close{float:right;background:transparent;color:#fff;padding:4px}#formError{color:#ffb2a6;font-size:13px}@media(max-width:900px){.topbar nav{gap:12px}.hero-inner{padding:40px 28px}.hero-rating{display:none}.description-panel{grid-template-columns:125px 1fr}.facts{grid-column:1/-1;border-left:0;border-top:1px solid #48515d;padding:15px 0 0;grid-template-columns:repeat(4,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.topbar nav{display:none}.nav-inner{padding:10px 16px}.brand img{width:130px}.hero{height:auto;min-height:590px}.hero-inner{padding:48px 22px}.hero h1{font-size:56px}.hero-logo{width:190px}.main-content{padding:0 15px}.gallery-grid{height:auto;grid-template-columns:1fr}.gallery-main{height:240px}.gallery-side{grid-template-columns:1fr 1fr;grid-template-rows:160px}.gallery-promo strong{font-size:27px}.description-panel{grid-template-columns:1fr}.cover{min-height:130px}.cover img{max-width:180px}.facts{grid-template-columns:1fr 1fr}.district-grid,.news-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.studio{padding:26px;display:block}.studio h2{font-size:43px}footer{flex-wrap:wrap}}

:root{--bg:#101c29;--panel:#243448;--cyan:#9be7ff;--green:#7df68d;--yellow:#ffe071;--red:#ff7e73}
body{background:linear-gradient(#102133,#0d1826 650px,#111924 1200px)}
.topbar{background:#0c1d2fe8;border-bottom:1px solid #ffffff26;box-shadow:0 6px 24px #08111b45}
.nav-inner{max-width:1540px;min-height:80px}
.brand img{width:195px;max-height:62px;filter:drop-shadow(0 4px 5px #0006)}
.topbar nav a{color:#e4f2fb}
.nav-cta{background:linear-gradient(180deg,#9dff62,#44c947);color:#123223;box-shadow:0 3px 0 #1d6f34}
.quiet{background:#f3f9fc14}
.hero{height:660px;background:#5baee3}
.hero-image{background-image:url('metropoly-mainmenu-hero.webp');background-size:cover;background-position:center 52%;filter:saturate(1.2) contrast(1.02);transform:scale(1.012)}
.hero-overlay{background:linear-gradient(90deg,#081b30f7 0%,#08203be8 22%,#0a2b4da8 39%,#092c4866 57%,#05152615 82%),linear-gradient(0deg,#0b1c30dd 0%,transparent 30%,#07152b1f 85%)}
.hero-inner{max-width:1540px;padding:62px 60px}
.game-summary{max-width:700px;padding:20px 10px 25px 0}
.crumb{color:#d4f0ff;margin-bottom:22px}
.eyebrow{color:#8deaff}
.hero .eyebrow{background:#08273ab5;display:inline-flex;align-items:center;border:1px solid #7edcf67d;border-radius:3px;padding:10px 13px;letter-spacing:1.6px}
.hero-logo{width:305px;height:105px;margin:10px 0 8px;filter:drop-shadow(0 7px 5px #06111ba8)}
.hero h1{font-size:clamp(64px,6.6vw,102px);line-height:.87;text-shadow:0 5px 24px #061a30a8;margin:4px 0 22px}
.hero h1 span{color:#ffe27b}
.hero-description{font-size:16px;font-weight:600;color:#f1f8ff;max-width:510px;text-shadow:0 2px 5px #0019}
.badges{margin:23px 0 29px;gap:10px}
.badges span{padding:9px 11px;background:#08253cc7;border:1px solid #d1f3ff45;border-radius:4px;color:#e5f6ff}
.primary{background:linear-gradient(180deg,#a0fa58,#42cc3d);color:#12361d;border:2px solid #d8ff8b;box-shadow:0 5px 0 #1b7334,0 10px 24px #071e2b6b;font-size:14px}
.primary:hover{background:linear-gradient(180deg,#bbff7d,#5eea54)}
.secondary{background:#122e48cc;border:1px solid #b9eaff;color:#f0faff}
.footnote{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#e6f4fb}
.hero-rating{background:#09263bb8;border:1px solid #ffffff66;padding:15px 20px;backdrop-filter:blur(6px)}
.rating-dot{width:13px;height:13px;background:#8afa73;border-radius:50%;box-shadow:0 0 15px #9fff80}
.world-strip{display:flex;justify-content:space-around;align-items:center;gap:12px;padding:19px 24px;background:linear-gradient(90deg,#70d9f4,#a6edbf 48%,#ffe58a);color:#11334c;font-size:11px;font-weight:900;letter-spacing:1.2px;flex-wrap:wrap;box-shadow:0 4px 20px #05101c66}
.main-content{max-width:1440px}
.section{padding-top:64px}
.section-title h2{font-size:34px}
.gallery-grid{height:430px;gap:16px}
.gallery-main,.gallery-tile{border-radius:7px;border:1px solid #90c8e15c;box-shadow:0 10px 30px #0005}
.gallery-main img{object-position:center 52%}
.gallery-label{font-size:15px}
.gallery-promo{background:linear-gradient(125deg,#a93551,#743d7e 40%,#205f8c 70%,#167e71);border:1px solid #ffffff45;border-radius:7px}
.gallery-promo strong{font-size:47px}
.description-panel{background:#1c3046;border:1px solid #597b9c;border-radius:7px}
.district-card{background:#1c3046;border-color:#476d87;border-radius:7px}
.district-card img{height:220px}
.district-card:first-child{border-top:4px solid #6dd9ff}.district-card:last-child{border-top:4px solid #75e58d}
.feature-grid article{background:#20334a;border-radius:6px}
.feature-grid article:nth-child(1){border-top-color:#7bdafa}.feature-grid article:nth-child(2){border-top-color:#7af09e}.feature-grid article:nth-child(3){border-top-color:#ffcf68}.feature-grid article:nth-child(4){border-top-color:#ff7c7c}
.news-grid article{background:#22354a;border-color:#4a6988;border-radius:6px}
.studio{background:linear-gradient(105deg,#1e4563,#246b66 55%,#4a5139);border-color:#a8f57b}
@media(max-width:900px){.hero-inner{padding:42px 28px}.hero h1{font-size:75px}.hero-rating{display:none}}
@media(max-width:650px){.hero{height:auto;min-height:675px}.hero-inner{padding:42px 22px}.hero-overlay{background:linear-gradient(90deg,#07192cf5,#092a44e0 60%,#09283d8a),linear-gradient(0deg,#0b1c30ee,transparent 55%)}.hero-image{background-position:61% center}.hero h1{font-size:65px}.hero-logo{width:245px}.gallery-grid{height:auto}.world-strip{justify-content:center;gap:14px}.world-strip span{font-size:9px}}

/* 2026-10 portal patch: one official logo (topbar only) and polished account actions */
.hero-studio-label{display:inline-flex;align-items:center;gap:9px;margin:18px 0 8px;padding:10px 13px;border:1px solid rgba(164,227,244,.35);border-radius:4px;background:rgba(9,27,41,.52);color:#eaf7ff;font-size:11px;font-weight:900;letter-spacing:1.8px;backdrop-filter:blur(8px)}
.hero-studio-dot{width:7px;height:7px;border-radius:50%;background:#9df78c;box-shadow:0 0 11px #9df78c}.hero-studio-separator{color:#92b8c8}
#userNav{display:flex;align-items:center;gap:10px;flex-shrink:0}#userNav .metro-user-profile{display:flex;align-items:center;gap:10px;padding:5px 15px 5px 6px;border:1px solid rgba(168,207,230,.22);border-radius:6px;background:rgba(255,255,255,.045);min-width:0}#userNav .metro-user-avatar{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:6px;background:linear-gradient(135deg,#65c8ec,#5ca77a);color:#071827;font-size:16px;font-weight:900}#userNav .metro-user-details{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:180px}#userNav .metro-user-details small{font-size:9px;letter-spacing:1.3px;color:#91b0c5;font-weight:800}#userNav .metro-user-details strong{font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#userNav .metro-nav-play{padding:12px 16px;border:1px solid #b4f2ae;border-radius:5px;background:linear-gradient(180deg,#a5ef65,#4bc958);color:#10301c;white-space:nowrap;font-size:11px;font-weight:900;letter-spacing:.7px;box-shadow:0 3px 0 #247b3a}#userNav .metro-nav-play:hover{filter:brightness(1.12)}#userNav .metro-nav-logout{padding:12px 15px;border:1px solid #6d8298;border-radius:5px;background:rgba(25,38,54,.9);color:#e8f3fa;font-size:11px;font-weight:900;letter-spacing:.7px;white-space:nowrap}#userNav .metro-nav-logout:hover{border-color:#ff9191;color:#ffb1b1;background:#462833}
@media(max-width:850px){#userNav .metro-user-details{max-width:105px}#userNav .metro-user-profile{padding-right:8px}#userNav .metro-nav-play,#userNav .metro-nav-logout{padding:10px}}
@media(max-width:520px){#userNav{gap:5px}#userNav .metro-user-details small{display:none}#userNav .metro-user-avatar{width:26px;height:26px;font-size:12px}#userNav .metro-user-profile{gap:5px;padding:4px}#userNav .metro-user-details{max-width:75px}#userNav .metro-nav-play,#userNav .metro-nav-logout{font-size:9px;padding:9px 6px;letter-spacing:0}.hero-studio-label{font-size:9px;letter-spacing:1px}}