.midnight .compact-hero.world-tour{position:relative;isolation:isolate;min-height:640px;background:#041528;overflow:hidden}
.midnight .world-tour .midnight-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.midnight .world-tour:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,#02112255,transparent 42%,transparent 75%,#031425aa)}
.midnight .world-tour #join-title{position:absolute;top:7%;left:0;padding:0 6%;width:100%;font-weight:900;font-size:clamp(36px,5vw,58px)!important;line-height:1.12;letter-spacing:-1.4px;text-shadow:0 3px 22px #001324b3;text-wrap:initial}
.hero-names{position:absolute;inset:0;pointer-events:none}
.hero-name{position:absolute;max-width:44%;padding:5px 8px;background:#03182ded;border:1px solid #72e7ff;border-radius:6px;color:#fff;font:700 13px/1.25 system-ui,sans-serif;text-align:center;box-shadow:0 3px 14px #00101e88;transform:translateX(-50%)}
.hero-name.us{left:23%;top:60%}.hero-name.kr{left:48%;top:65%}.hero-name.vn{left:69%;top:55%;max-width:43%}.hero-name.fr{left:88%;top:68%}
.mobile-hub.midnight button.hero-join{position:absolute;bottom:22px;left:6%;width:88%;min-height:56px;background:linear-gradient(110deg,#69f5fc,#02cfe8);color:#002638;border:1px solid #8bf8ff;border-radius:30px;box-shadow:0 7px 25px #00dfff44;font-size:20px;font-weight:800}
.midnight .join-surface{scroll-margin-top:82px}
.midnight .world-tour #join-title{font-style:italic;font-weight:1000;transform:skewY(-3deg);transform-origin:left center;filter:drop-shadow(0 4px 0 #001a38);text-shadow:0 2px 14px #00142e;letter-spacing:-1.7px}
.midnight .world-tour #join-title .slogan-line{display:block;color:#f6fbff;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;line-height:1.15}
.world-tour .slogan-second{margin-top:5px}
.midnight .world-tour #join-title .slogan-line em,.midnight .world-tour #join-title .slogan-second:not(:has(em)){color:#46e9ff;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;text-shadow:0 2px 0 #087b9d,0 3px 20px #0adfff30}
.midnight .world-tour .hero-name{color:#fff!important;letter-spacing:0!important;text-transform:none!important;font-style:italic;font-weight:800;font-size:14px;line-height:1.2;white-space:nowrap;border-radius:3px;padding:5px 9px;background:#001322f5;border-color:#5adfff;transform:translate(-50%,-100%) skewX(-10deg);text-shadow:0 1px 3px #000}
.midnight .flag-picker{position:relative;display:flex;align-items:center}
.midnight .flag-picker .language-flag{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:15px;object-fit:cover;pointer-events:none;border-radius:2px;z-index:1}
.mobile-hub.midnight .flag-picker select{padding-left:42px!important;max-width:145px;min-width:126px;color:#fff;background:#092039;border-radius:22px}
@media(max-width:959px){
 .mobile-hub.midnight main{padding:0;margin:0 auto;max-width:640px}
 .mobile-hub.midnight #join:not([hidden]){padding:0!important;margin:0!important;border-radius:0!important;display:block!important;max-width:none}
 .mobile-hub.midnight #join[hidden]{display:none!important}
 .midnight .compact-hero.world-tour{border-radius:0;height:calc(100svh - 146px - env(safe-area-inset-bottom));min-height:420px}
 .midnight .world-tour .midnight-art{object-fit:cover}
 .midnight .world-tour #join-title{font-size:clamp(34px,10.5vw,64px)!important;top:7%;padding:0 6%;line-height:1.15}
 .midnight .join-surface{margin:20px 14px 0!important}
 .mobile-hub.midnight #profile-form input,.mobile-hub.midnight #profile-form select{background:#0b253e!important;color:#f2f8ff!important;border:1px solid #7396b5!important}
 .mobile-hub.midnight main>.app-screen:not(#join){margin:16px}
}
@media(max-width:360px){.hero-name{font-size:12px;padding:4px 5px}.midnight .world-tour #join-title{font-size:clamp(30px,10.5vw,38px)!important}}
