@font-face{font-family:Cinzel;font-style:normal;font-weight:400 900;font-display:swap;src:url("/intro/assets/cinzel-latin-v1.woff2") format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url("/intro/assets/manrope-latin-v1.woff2") format("woff2")}
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;color:#e9e8e3;background:#080e15;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}body{margin:0}a{color:inherit}button,select{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;z-index:10;left:20px;top:12px;padding:12px 18px;background:#f2d4a2;color:#1a1a1a;transform:translateY(-180%)}.skip-link:focus{transform:none}
.intro{position:relative;isolation:isolate;min-height:800px;min-height:max(800px,100svh);overflow:hidden}
.intro-heading{position:absolute;z-index:3;top:26px;left:50%;transform:translateX(-50%);width:min(90%,620px);text-align:center;pointer-events:none}
.brand{display:block;width:280px;height:140px;object-fit:contain;margin:0 auto 13px}
h1{margin:0;font:500 clamp(25px,2.5vw,37px)/1.2 Cinzel,Georgia,serif;letter-spacing:.035em}
.intro-heading p{margin:12px 0 0;font-size:12px;letter-spacing:.08em;color:#d0d8e0}
.language{position:absolute;z-index:4;top:30px;right:35px}
.language select{background:#0b1016b3;color:#c5cbd2;border:1px solid #64717d55;border-radius:3px;padding:10px 26px 10px 12px;font-size:10px;letter-spacing:.1em;min-height:36px}
.worlds{display:grid;grid-template-columns:1fr 1fr;min-height:inherit}
.world{--accent:#b4e0f4;--accent-rgb:147,204,227;position:relative;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:255px 35px 125px;overflow:hidden;outline-offset:-6px}
.world-new{--accent:#f0c996;--accent-rgb:219,172,120;background-color:#191410;background-image:linear-gradient(180deg,#17110ad4 0%,#17110a70 26%,#17110ab3 49%,#17110ad1 75%,#0e0e0ef0 100%),url("/intro/assets/old-school-background-v1.webp");background-size:cover;background-position:60% center}
.world-old{background-color:#08121c;background-image:linear-gradient(180deg,#04121dc7 0%,#04121d66 26%,#04121db3 49%,#04121dce 75%,#050c13ed 100%),url("/intro/assets/remastered-background-v1.webp");background-size:cover;background-position:center}
.world::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(var(--accent-rgb),.08),transparent 67%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.world::after{content:"";position:absolute;inset:25px;border:1px solid rgba(var(--accent-rgb),.10);border-radius:2px;pointer-events:none;mask-image:linear-gradient(transparent 13%,#000 30%,#000 70%,transparent 95%)}
.world-content{position:relative;z-index:1;width:100%;max-width:580px;text-shadow:0 2px 3px #000,0 0 12px #000d;transition:transform .4s ease}
.world-content::before{content:"";position:absolute;z-index:-1;inset:35px -22px -24px;background:radial-gradient(ellipse at center,#04070bab 0%,#04070b66 52%,transparent 74%);pointer-events:none}
.world-edition{display:inline-block;color:var(--accent);font-size:10px;letter-spacing:.35em;border:1px solid rgba(var(--accent-rgb),.33);padding:6px 11px 6px 15px;border-radius:2px;margin-bottom:23px}
.world-eyebrow{margin:0 0 13px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.26em}
h2{margin:0;color:#f0efeb;font:600 clamp(30px,3.65vw,56px)/1.18 Cinzel,Georgia,serif;letter-spacing:-.025em}
.world-spec{margin:20px 0 19px;color:var(--accent);font-size:16px;letter-spacing:.04em}
.world-platforms{margin:-7px 0 20px;font-size:12px;letter-spacing:.05em;color:#eef4f8}
.world-new .world-platforms{color:#f4e6d4}
.world-description{max-width:355px;min-height:60px;margin:0 auto;color:#eff4f8;font-size:14px;font-weight:500;line-height:1.75}
.world-new .world-description{color:#f5eee5}
.world-status{display:flex;justify-content:center;align-items:center;gap:8px;margin:23px 0 24px;font-size:9px;letter-spacing:.17em;color:var(--accent);min-height:78px}
.world-launch{display:inline-flex;gap:17px;width:300px;max-width:100%;padding:10px 14px;text-align:left;border:1px solid #dbac785c;border-radius:4px;background:linear-gradient(135deg,#21170ee8,#100d0be0);box-shadow:0 3px 16px #0005}
.launch-countdown{display:grid;justify-items:center;flex:none;min-width:47px;max-width:95px;gap:3px}
.launch-countdown[hidden]{display:none}
.launch-value{font:700 32px/1 Manrope,Arial,sans-serif;font-variant-numeric:tabular-nums;color:#ffe1ad;letter-spacing:0}
.launch-unit{font-size:9px;line-height:1.4;letter-spacing:.1em;text-align:center}
.launch-details{border-left:1px solid #dbac7847;padding-left:17px;min-width:0}
.launch-countdown[hidden]+.launch-details{border:0;padding-left:0}
.launch-label{display:block;font-size:9px;letter-spacing:.16em;margin-bottom:7px}
.launch-date{display:block;font-size:13px;font-weight:700;line-height:1.45;letter-spacing:0;color:#fff4e3}
.intro-heading{text-shadow:0 2px 4px #000,0 0 14px #000c}
.status-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}
.world-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;width:300px;max-width:100%;min-height:64px;padding:13px 19px;border:1px solid #8ac5df;border-radius:5px;background:linear-gradient(150deg,#365e79 0%,#193d58 48%,#10293d 100%);box-shadow:0 8px 24px #0005,inset 0 1px 0 #d1f0ff40,inset 0 -2px 0 #0615227a;color:#f4fbff;font-size:13px;font-weight:700;letter-spacing:.01em;text-shadow:0 1px 2px #0008;transition:background .25s,border-color .25s,box-shadow .25s,transform .15s}
.world-button::before{content:"";position:absolute;inset:4px;border:1px solid #b3def01c;border-radius:2px;pointer-events:none}
.world-button>span:first-child{position:relative;flex:1;min-width:0;text-align:left;line-height:1.4}
.world-button>span:last-child{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #d1f0ff4a;border-radius:50%;background:#9bcfe51a;font-size:20px;font-weight:400;line-height:1;transition:transform .2s,background .2s}
.world-new .world-button{border-color:#dfb277;background:linear-gradient(150deg,#8c6435 0%,#674521 48%,#412b19 100%);box-shadow:0 8px 24px #0005,inset 0 1px 0 #ffe4b840,inset 0 -2px 0 #2113068a;color:#fff6e6}
.world-new .world-button::before{border-color:#f6dcb124}
.world-new .world-button>span:last-child{border-color:#f4d4a34a;background:#e1b3731c}
.world:hover::before,.world:focus-visible::before{opacity:1}
@media(hover:hover){.world:hover .world-content{transform:translateY(-5px)}}
.world:hover .world-button,.world:focus-visible .world-button{background:linear-gradient(150deg,#467a96,#235574 60%,#173c55);border-color:#c1e9fa;box-shadow:0 10px 30px #0006,0 0 18px #80c1df1c,inset 0 1px 0 #d1f0ff55}
.world-new:hover .world-button,.world-new:focus-visible .world-button{background:linear-gradient(150deg,#a67a42,#80592b 60%,#563a20);border-color:#ffe0ac;box-shadow:0 10px 30px #0006,0 0 18px #d8ab6b1c,inset 0 1px 0 #ffe4b855}
.world:hover .world-button>span:last-child,.world:focus-visible .world-button>span:last-child{transform:translateX(2px);background:#ffffff1c}
.world:active .world-button{transform:translateY(2px);box-shadow:0 3px 12px #0005,inset 0 2px 5px #0005}
.world:focus-visible .world-button{outline:2px solid var(--accent);outline-offset:4px}
.world:focus-visible{outline:2px solid var(--accent)}
.world-divider{position:absolute;z-index:2;left:50%;top:245px;bottom:110px;width:1px;background:linear-gradient(transparent,#a18b623f 18%,#c4ab7570 50%,#a18b623f 82%,transparent);pointer-events:none}
.world-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:11px Georgia,serif;letter-spacing:.02em;color:#bda67c;padding:12px 6px;background:#141617;border:1px solid #7b70403d;clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%)}
.intro-footer{position:absolute;z-index:3;bottom:29px;left:0;width:100%;display:flex;justify-content:center;gap:20px;padding:0 18px;color:#777e86;font-size:10px;letter-spacing:.08em}
@media(min-width:1800px){.world{padding-top:290px}.intro-heading{top:45px}.brand{width:310px;height:155px}h2{font-size:68px}.world-description{font-size:16px;max-width:385px}.world-button{width:320px;min-height:68px}}
@media(max-width:1000px) and (min-width:721px){.world{padding-inline:22px}h2{font-size:clamp(26px,3.7vw,37px)}.world-description{font-size:13px;max-width:300px}.world::after{inset:14px}.language{right:22px}.world-button{width:280px}}
@media(max-width:720px){.intro{min-height:100svh}.intro-heading{position:relative;left:auto;transform:none;top:auto;width:100%;padding:49px 20px 28px;background:#0b131d}.brand{width:230px;height:115px;margin-bottom:10px}h1{font-size:29px}.intro-heading p{font-size:11px}.language{top:14px;right:14px}.language select{font-size:9px;padding:7px 20px 7px 8px;min-height:32px}.worlds{grid-template-columns:1fr;min-height:0}.world{padding:39px 25px 43px}.world-content{max-width:450px}.world-content::before{content:"";position:absolute;z-index:-1;inset:35px -22px -24px;background:radial-gradient(ellipse at center,#04070bab 0%,#04070b66 52%,transparent 74%);pointer-events:none}
.world-edition{margin-bottom:17px}.world-eyebrow{font-size:9px}.world::after{inset:12px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}h2{font-size:clamp(25px,7.1vw,40px)}.world-description{font-size:13px;min-height:0;max-width:340px}.world-spec{font-size:15px;margin:16px 0}.world-status{margin:20px 0}.world-old .world-status{min-height:16px}.world-content::before{inset:30px -15px -20px}.world-button{width:300px;min-height:62px;padding-inline:17px;gap:16px;font-size:12px}.world-old{border-top:1px solid #719aaf3f}.world-divider{display:none}.intro-footer{position:relative;bottom:auto;padding:25px 15px;gap:12px;font-size:9px;background:#0e0e0e}.world:hover .world-content{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.world:hover .world-content{transform:none}}

/* Each world regains color independently; the shared emblem is outside these layers. */
.world{filter:grayscale(1);transition:filter .65s cubic-bezier(.22,.61,.36,1)}
.world:focus-visible,.world:active{filter:grayscale(0)}
.world-divider{filter:grayscale(1)}
@media(hover:hover){.world:hover{filter:grayscale(0)}}
.intro-heading p{font-weight:500;letter-spacing:.055em}
.world-eyebrow{font-weight:700;letter-spacing:.2em}
.world-spec{font-weight:600}
.world-button{font-weight:700;font-size:13px}
.launch-date{font-size:12px}
@media(max-width:720px){.world-button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.world{transition:none}}

/* Warm embers / cool frost stay below all copy and never intercept clicks. */
.world-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.world::before{background:radial-gradient(ellipse 180px 210px at var(--light-x,50%) var(--light-y,55%),rgba(var(--accent-rgb),.095),transparent 100%),radial-gradient(ellipse at 50% 100%,rgba(var(--accent-rgb),.09),transparent 60%)}
.world::after{transition:border-color .5s}
.world-button{overflow:hidden}
.world-button::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fff2 50%,transparent 65%);transform:translateX(-130%)}
@keyframes world-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media(hover:hover){.world:hover::after{border-color:rgba(var(--accent-rgb),.3)}.world:hover .world-button::after{animation:world-sheen 1.2s ease both}}
.world:focus-visible::after{border-color:rgba(var(--accent-rgb),.3)}
.world:focus-visible .world-button::after{animation:world-sheen 1.2s ease both}
.language select{background:#111c;color:#d1d1d1;border-color:#65656555}
.intro-heading p{color:#d6d6d6}.intro-footer{color:#979797}
@media(max-width:720px){.intro-heading{background:#101010}}
@media(prefers-reduced-motion:reduce){.world-particles{display:none}.world-button::after{animation:none!important}.world::after{transition:none}}
/* Useful, visible MU Online copy remains readable at every viewport. */
.world-description{min-height:74px}
.language-fallback{display:flex;justify-content:center;gap:24px;padding:18px;background:#101010;font-size:12px;color:#ddd}
.language-fallback a{padding:8px;text-underline-offset:4px}
@media(max-width:720px){.world-description{min-height:0}}