:root{--gold:#d7b674;--gold-light:#f5dfab;--ink:#090d12;--text:#e4e2dc;--muted:#aaaeb5;--border:#76613e;--display:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:radial-gradient(ellipse at 50% 55%,#18202a 0,transparent 60%),var(--ink);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1320px,calc(100% - 80px));margin:auto}.header{position:relative;z-index:10;background:linear-gradient(180deg,#12171c,#080b0f);border-top:2px solid #846943;border-bottom:1px solid var(--border)}.header-inner{max-width:1420px;margin:auto;min-height:100px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{position:relative;align-self:flex-start;height:100px;width:260px;flex-shrink:0}.brand img{position:absolute;top:0;width:260px;height:150px;z-index:2}nav{display:flex;align-items:center;gap:clamp(20px,3.2vw,52px)}nav a{font-family:var(--display);font-size:16px;text-transform:uppercase;white-space:nowrap;padding:32px 0;position:relative;transition:color .2s}nav a:hover,nav a.active{color:var(--gold-light)}nav a.active:after{content:'◆';position:absolute;bottom:-13px;left:calc(50% - 6px);font-size:13px;color:var(--gold);text-shadow:0 0 14px #f3b659}.menu-toggle{display:none}.hero{position:relative;min-height:530px;overflow:hidden;isolation:isolate}.hero-art,.hero-shade{position:absolute;inset:0;z-index:-1}.hero-art{background:url('../images/hero.png') 60% 43%/cover no-repeat}.hero-shade{background:linear-gradient(90deg,rgba(3,8,15,.84) 0%,rgba(3,8,15,.5) 34%,transparent 64%),linear-gradient(0deg,#0b1018 0%,transparent 30%)}.hero-content{padding:82px 0 48px}.eyebrow{font-family:var(--display);color:var(--gold-light);font-size:15px;text-transform:uppercase;letter-spacing:5px;margin:0 0 20px}.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(48px,5.5vw,84px);line-height:1.08;letter-spacing:1px;margin:0 0 16px;color:#f0d4a2;text-shadow:0 3px 2px #201308,0 7px 24px #000}.hero-caption{font-family:var(--display);font-size:25px;margin:0 0 29px;text-shadow:0 2px 8px #000}.gold-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:11px 31px;background:linear-gradient(180deg,#6e4c24,#382410);border:1px solid #d6ae5e;box-shadow:inset 0 0 0 3px #372913,inset 0 0 0 4px #a08247,0 4px 20px #0008;color:#f8e6bc;font-family:var(--display);font-size:16px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;transition:filter .2s,transform .2s}.gold-button:hover{filter:brightness(1.25);transform:translateY(-2px)}.hero-foot{display:flex;align-items:center;gap:12px;font-size:14px;color:#bbb8ae;margin-top:32px}.diamond{color:var(--gold)}.brand-strip{display:flex;align-items:center;justify-content:center;gap:22px;min-height:48px;text-transform:uppercase;letter-spacing:4px;font:15px var(--display);padding:12px 20px;color:var(--gold-light);border-block:1px solid var(--border);background:linear-gradient(90deg,#121922,#241f15,#121922)}.main-content{padding:32px 0 48px}.overview{display:grid;grid-template-columns: 5fr 8fr;gap:24px}.panel{background:linear-gradient(130deg,#131921eb,#090d12f5);border:1px solid var(--border);position:relative;padding:22px;box-shadow:inset 0 0 0 4px #0a0d12,0 12px 40px #0003}.panel:before,.panel:after{content:'';position:absolute;width:13px;height:13px;border:2px solid #cfb27c;pointer-events:none}.panel:before{top:-1px;left:-1px;border-right:0;border-bottom:0}.panel:after{bottom:-1px;right:-1px;border-left:0;border-top:0}h2{margin:0 0 18px;font:700 clamp(23px,2.1vw,31px)/1.3 var(--display);color:var(--gold-light);text-transform:uppercase}.heading-mark{display:inline-block;font-size:40px;vertical-align:middle;line-height:1;margin-right:12px;color:var(--gold)}dl{margin:0;border:1px solid #594b35;background:#10161cb3}.stat-row{display:grid;grid-template-columns:1fr 1.08fr;padding:10px 16px;border-bottom:1px solid #ffffff12;gap:15px;font-size:16px}.stat-row:last-child{border-bottom:0}dt{display:flex;gap:15px;align-items:center;color:#c1c6cc}dd{margin:0;font-weight:600}.stat-icon{width:22px;text-align:center;font-size:22px;color:var(--gold);line-height:1}.panel-note{font-size:13px;color:var(--muted);margin:14px 0 0}.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:14px}.milestone{position:relative;border:1px solid #b59155;min-height:276px;background:#10151a;overflow:visible}.milestone-art{position:absolute;inset:0;background-size:auto 100%;background-repeat:no-repeat;overflow:hidden;opacity:.85}.milestone-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#070a0e 2%,#090d12c9 35%,transparent 85%)}.milestone-badge{position:absolute;z-index:1;top:-20px;left:calc(50% - 22px);width:44px;height:44px;border:1px solid #c2a26a;border-radius:50%;text-align:center;line-height:42px;color:var(--gold-light);background:linear-gradient(#40301b,#101014);font:22px/42px var(--display);box-shadow:0 0 0 4px #10151a}.milestone-body{position:relative;z-index:1;text-align:center;padding:155px 10px 16px}h3{margin:0 0 6px;font:700 clamp(20px,1.9vw,27px)/1.25 var(--display);text-transform:uppercase;color:var(--gold-light)}.milestone-body p{margin:0;font-family:var(--display);font-size:16px}.milestone-date{display:block;margin-top:13px;color:#aab0b8;font-size:13px}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.support-grid .panel{padding:28px 30px}.support-grid h2{text-transform:none;margin-bottom:10px}.support-grid p:not(.eyebrow){color:#bac0c7;margin:0 0 22px}.support-grid .eyebrow{font:13px Arial,sans-serif;letter-spacing:2px;margin-bottom:12px}.availability{display:inline-block;border:1px solid #6c593b;background:#30271a;padding:10px 18px;color:#d5c099}.support-grid p.small{font-size:13px;margin:16px 0 0}.community-actions{display:flex;gap:12px;flex-wrap:wrap}.outline-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;min-width:106px;padding:8px 16px;border:1px solid #806940;color:var(--gold-light);font-size:15px}.outline-button:hover{background:#d7b67415}.outline-button small{font-size:12px;color:#a2a5a9}.unavailable{color:#aaa49a;background:#ffffff03}footer{border-top:1px solid #59472c;background:#070a0e;padding:26px 0 16px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-inner strong{font:21px var(--display);color:var(--gold-light)}.footer-inner p{font-size:14px;color:#9299a2;margin:4px 0}.footer-inner a{font-size:14px;color:var(--gold)}.demo-note{text-align:center;font-size:12px;color:#737a83;margin:24px 20px 0}a:focus-visible,button:focus-visible{outline:3px solid #f6d795;outline-offset:5px}section[id]{scroll-margin-top:25px}@media(min-width:1600px){.hero{min-height:590px}.hero-content{padding-top:100px}.hero-art{background-position:60% 40%}}@media(max-width:1100px){.header-inner{padding:0 24px}.brand,.brand img{width:220px}.brand img{height:127px}nav{gap:22px}nav a{font-size:14px}.container{width:calc(100% - 48px)}.overview{grid-template-columns:1fr}.timeline{gap:22px}.milestone{min-height:285px}.hero-art{background-position:60% center}.hero h1{font-size:64px}}@media(max-width:760px){.header-inner{min-height:78px;padding:0 20px}.brand{height:78px;width:180px}.brand img{width:180px;height:104px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid #8e764e;background:#111821;padding:10px}.menu-toggle span{width:22px;height:2px;background:var(--gold)}nav{display:none;position:absolute;top:78px;left:0;right:0;padding:32px 24px 18px;background:#0b1018;border-bottom:1px solid var(--border);flex-direction:column;gap:0;align-items:stretch}nav.open{display:flex}nav a{padding:12px 10px;font-size:16px}nav a.active:after{display:none}.container{width:calc(100% - 32px)}.hero{min-height:535px}.hero-art{background-position:66% center;opacity:.8}.hero-shade{background:linear-gradient(90deg,#050a12dc,#050a1266),linear-gradient(0deg,#0b1018,transparent 65%)}.hero-content{padding:88px 0 40px}.hero h1{font-size:clamp(44px,11vw,62px)}.hero-caption{font-size:21px}.eyebrow{font-size:13px;letter-spacing:3px}.hero-foot{max-width:280px;font-size:13px}.brand-strip{gap:10px;letter-spacing:1px;font-size:12px}.brand-strip span:first-child,.brand-strip span:last-child{display:none}.main-content{padding:24px 0 32px}.panel{padding:18px}h2{font-size:25px}.heading-mark{font-size:32px;margin-right:8px}.timeline{grid-template-columns:1fr;gap:28px}.milestone{min-height:220px}.milestone-art{background-size:cover;background-position:50% 35%!important}.milestone-body{padding-top:116px;padding-bottom:22px}.milestone h3{font-size:28px}.milestone-body p{font-size:17px}.support-grid{grid-template-columns:1fr}.support-grid .panel{padding:24px 20px}.stat-row{padding:10px 12px;gap:10px}.footer-inner{align-items:flex-start;flex-direction:column}.gold-button{font-size:14px}.community-actions{gap:8px}.outline-button{min-width:95px}html{scroll-padding-top:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Readable layout when browser text is enlarged. */
@media(min-width:761px) and (max-width:1100px){nav{flex-wrap:wrap;justify-content:flex-end;row-gap:0}nav a{padding:12px 0}}

/* MU Season 6: Vietnamese-safe typography, persistent navigation and a warmer game interface. */
:root{--gold:#e6b85f;--gold-light:#ffe2a0;--ember:#ff7040;--blood:#a91f19;--display:"Segoe UI",Tahoma,Arial,sans-serif}
html{scroll-padding-top:112px}
body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;background:radial-gradient(ellipse at 80% 22%,#55150c25 0,transparent 40%),radial-gradient(ellipse at 8% 70%,#6e200e19 0,transparent 38%),#080b10}
.header{position:sticky;top:0;z-index:100;box-shadow:0 12px 32px #0009,0 1px #e2a94e30}
.header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#d66a2c,#ffe09a,#d66a2c,transparent);opacity:.72}
.header-inner{min-height:96px}
.brand{height:96px}
.header-inner,.brand,.brand img{transition:min-height .24s ease,height .24s ease,width .24s ease,filter .3s,transform .3s}
.header.is-scrolled .header-inner{min-height:96px}
.header.is-scrolled .brand{height:96px;width:164px}
.header.is-scrolled .brand img{width:164px;height:95px}
.brand img{filter:drop-shadow(0 4px 16px #e2a94e27);transition:width .24s ease,height .24s ease,filter .3s,transform .3s}
.brand:hover img{filter:drop-shadow(0 0 18px #ffc65b91);transform:translateY(2px)}
nav{gap:clamp(18px,2.7vw,42px)}
nav a{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.8px;padding:30px 0;transition:color .22s,text-shadow .22s}
nav a:hover,nav a.active{color:#fff0c7;text-shadow:0 0 13px #ffb13d88}
nav a.active:after{bottom:-12px;color:var(--gold-light);text-shadow:0 0 14px #ff9f35,0 0 25px #fa561e}
.hero{min-height:550px}
.hero-art{filter:saturate(1.08) contrast(1.04)}
.hero-shade{background:linear-gradient(90deg,#05080ee8 0%,#090d16b8 35%,#120b0866 65%,#180b0640),linear-gradient(0deg,#0b1018 0%,transparent 38%),linear-gradient(90deg,#a627160d,transparent 70%)}
.eyebrow{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;font-size:12px;letter-spacing:3px}
.hero h1{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:900;letter-spacing:.2px;line-height:1.04;color:#ffe0a0;text-shadow:0 2px 1px #281306,0 6px 26px #000,0 0 28px #dc702733}
.hero-caption{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:600;font-size:20px;letter-spacing:0;text-shadow:0 2px 10px #000}
.gold-button{position:relative;isolation:isolate;overflow:hidden;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.9px;border-color:#f0c56f;background:linear-gradient(180deg,#81541f,#40250f);box-shadow:inset 0 0 0 3px #372913,inset 0 0 0 4px #b88c45,0 6px 26px #000a,0 0 20px #ec8c3024;transition:transform .25s,filter .25s,box-shadow .25s}
.download .gold-button{cursor:pointer}.download-notice{margin:12px 0 0;color:var(--gold-light);font-size:13px}
.gold-button:before,.outline-button:before{content:"";position:absolute;z-index:1;top:-70%;bottom:-70%;left:-42%;width:28%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,#fff9,transparent);transition:left .65s ease;pointer-events:none}
.gold-button:hover{filter:brightness(1.18);transform:translateY(-3px);box-shadow:inset 0 0 0 3px #372913,inset 0 0 0 4px #ffe1a0,0 9px 32px #000b,0 0 30px #ff9b3f77}
.gold-button:hover:before,.outline-button:hover:before{left:125%}
.hero-foot{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:13px}
.brand-strip{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:2.5px;background:linear-gradient(90deg,#111821,#21150f 50%,#111821);border-color:#9c7038}
.main-content{padding-top:38px}
.panel{border-color:#8b6738;background:linear-gradient(135deg,#151a20f2,#0b0e13fa);box-shadow:inset 0 0 0 4px #0a0d12,0 14px 42px #0005;transition:border-color .28s,box-shadow .28s,background .28s,transform .28s}
.panel:hover{border-color:#d3a858;box-shadow:inset 0 0 0 4px #0a0d12,0 18px 48px #0008,0 0 24px #d9873030;background:linear-gradient(135deg,#191d23f5,#0c1016fc)}
h2{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;letter-spacing:.2px;color:#ffdda0}
.heading-mark{color:#f0bd5c;text-shadow:0 0 18px #f08a2c69}
.stat-row{font-family:"Segoe UI",Tahoma,Arial,sans-serif;transition:background .2s,color .2s}
.stat-row:hover{background:linear-gradient(90deg,#d28a2b16,transparent);color:#fff1d0}
.stat-icon{color:#e9b65b;text-shadow:0 0 12px #d27d3180}
.timeline{gap:16px}
.milestone{--edge-angle:0deg;isolation:isolate;overflow:hidden;border-color:#a68046;background:#10151a;transition:transform .3s,border-color .3s,box-shadow .3s}
.milestone:before{content:"";position:absolute;z-index:3;inset:0;padding:1px;opacity:0;pointer-events:none;background:conic-gradient(from var(--edge-angle),transparent 0 66%,#ff562d 73%,#fff0a9 78%,#ffb33d 83%,transparent 91%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 8px #ff7935);transition:opacity .2s}
.milestone:hover,.milestone:focus-within{transform:translateY(-6px);border-color:#f1c572;box-shadow:0 14px 38px #000b,0 0 30px #f2752f43}
.milestone:hover:before,.milestone:focus-within:before{opacity:1;animation:fire-edge 1.9s linear infinite}
.milestone-art{transition:transform .55s,filter .4s;filter:saturate(.86)}
.milestone:hover .milestone-art{transform:scale(1.055);filter:saturate(1.15) brightness(1.1)}
.milestone-art:after{background:linear-gradient(0deg,#070a0e 2%,#090d12ce 38%,#090d1233 78%,transparent)}
.milestone-badge{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;border-color:#dfb762;box-shadow:0 0 0 4px #10151a,0 0 22px #e98c3c38;transition:box-shadow .25s,transform .25s}
.milestone:hover .milestone-badge{transform:scale(1.08);box-shadow:0 0 0 4px #10151a,0 0 24px #ffb44c88}
.milestone-body p{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;font-weight:600}
h3{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;letter-spacing:.35px;color:#ffe0a0}
.milestone-date{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.support-grid .eyebrow{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800}
.outline-button{position:relative;isolation:isolate;overflow:hidden;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:700;border-color:#9a7743;background:linear-gradient(140deg,#191b1c,#101318);transition:transform .22s,border-color .22s,box-shadow .22s,color .22s}
.outline-button:hover{transform:translateY(-3px);border-color:#efc56c;background:linear-gradient(140deg,#302319,#13171c);box-shadow:0 8px 25px #0008,0 0 20px #e7933e3d;color:#fff0c4}
.outline-button small{position:relative;z-index:2}
.footer-inner strong{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-weight:800;color:#ffe0a0}
.footer-inner p,.footer-inner a,.demo-note{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.footer-inner a:hover{color:#fff0c4;text-shadow:0 0 14px #ffab43}
a:focus-visible,button:focus-visible{outline:2px solid #ffe39a;outline-offset:4px;box-shadow:0 0 0 5px #f28b2a33}
@property --edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fire-edge{to{--edge-angle:360deg}}
@media(max-width:1100px){.header-inner{min-height:88px}.brand{height:88px}.brand img{height:127px}nav a{font-size:11px}}
@media(max-width:760px){html{scroll-padding-top:86px}.header{position:sticky;top:0}.header-inner{min-height:74px}.brand{height:74px}.brand img{height:104px}.header.is-scrolled .header-inner{min-height:74px}.header.is-scrolled .brand{height:74px;width:128px}.header.is-scrolled .brand img{width:128px;height:74px}.menu-toggle{position:relative;z-index:12}.menu-toggle:hover{border-color:#eab957;box-shadow:0 0 18px #f2983838}.header nav{z-index:11;top:74px}.hero-content{padding-top:80px}.hero h1{font-size:clamp(42px,10vw,62px);line-height:1.08}.hero-caption{font-size:18px}.brand-strip{letter-spacing:1.3px}.milestone:hover,.milestone:focus-within{transform:none}.panel:hover{transform:none}section[id]{scroll-margin-top:88px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Roadmap cards: keep the floating milestone badges outside the frame without clipping; reserve space above the cards and crop artwork inside its own layer. */
.timeline{padding-top:28px}
.milestone{overflow:visible}
.milestone-art{background-size:cover;background-position:center center}
@media(max-width:760px){.timeline{padding-top:26px}.milestone-art{background-size:cover;background-position:center 38%!important}}