:root{
  --bg:#03080c;
  --bg2:#071117;
  --panel:#07151c;
  --panel2:#0a1b22;
  --line:#203c47;
  --line2:#315560;
  --text:#eaf2f1;
  --muted:#90a0a4;
  --gold:#d5a85b;
  --gold2:#f0ca78;
  --cyan:#55dce0;
  --cyan2:#8bf6f0;
  --green:#6fda75;
  --red:#ed665b;
  --orange:#e99545;
  --purple:#a881ff;
  --ice:#8fdcff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -150px,rgba(22,100,127,.16),transparent 520px),
    linear-gradient(180deg,#020609,#050d12 42%,#020609);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.section-wrap{width:min(1420px,calc(100% - 38px));margin:0 auto}

/* Header fallback + Roadmap entry */
.roadmap-page .tw-standard-header .nav-roadmap{
  position:relative;
  color:#d7e1f3;
}
.roadmap-page .tw-standard-header .nav-roadmap.active{
  color:#fff4cd !important;
}
.roadmap-page .tw-standard-header .nav-roadmap.active:before{
  content:"";
  position:absolute;
  inset:4px -8px;
  border-radius:14px;
  border:1px solid rgba(246,200,95,.12);
  background:linear-gradient(180deg,rgba(246,200,95,.08),rgba(89,112,190,.05));
  z-index:-1;
}
.roadmap-page .tw-standard-header .nav-roadmap.active:after{
  transform:scaleX(1)!important;
  opacity:1!important;
}
@media(max-width:1510px){
  .roadmap-page .epic-header .menu{gap:10px}
  .roadmap-page .epic-header .menu a{font-size:12.5px}
}
@media(max-width:1410px){
  .roadmap-page .epic-header .menu .nav-dashboard,
  .roadmap-page .epic-header .menu .nav-clips{display:none!important}
}
@media(max-width:1290px){
  .roadmap-page .epic-header .menu .nav-news{display:none!important}
}
@media(max-width:1160px){
  .roadmap-page .epic-header .menu .nav-wiki{display:none!important}
}
@media(max-width:1040px){
  .roadmap-page .epic-header .menu .nav-community,
  .roadmap-page .epic-header .menu .nav-schatzkammer{display:none!important}
}
@media(max-width:820px){
  .roadmap-page .epic-header .menu .nav-roadmap{display:flex!important}
}

/* Hero */
.hero{
  position:relative;
  min-height:740px;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(213,168,91,.18);
  background:
    radial-gradient(circle at 50% 40%,rgba(27,114,123,.18),transparent 35%),
    radial-gradient(circle at 80% 12%,rgba(72,132,255,.10),transparent 30%),
    linear-gradient(180deg,#031016,#03080c 78%);
}
.hero:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,transparent,#03080c);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(90,183,198,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,183,198,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 86%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.24}
.hero-glow-a{width:440px;height:440px;background:#0da2a0;left:-160px;top:80px}
.hero-glow-b{width:380px;height:380px;background:#98752e;right:-120px;top:140px}

.hero-inner{
  position:relative;z-index:2;
  width:min(1120px,calc(100% - 36px));
  margin:0 auto;
  padding:72px 0 92px;
  text-align:center;
}
.classic-mark{
  width:min(390px,74vw);
  margin:0 auto 20px;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(77,212,92,.10));
}
.classic-mark img{width:100%;height:auto}
.eyebrow{
  margin-bottom:14px;
  color:#7dcbd0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.23em;
}
.hero h1{
  margin:0;
  font-family:Cinzel,serif;
  font-size:clamp(49px,7vw,88px);
  line-height:.91;
  letter-spacing:-.045em;
  color:#f0eadc;
  text-shadow:0 10px 35px rgba(0,0,0,.42);
}
.hero h1 span{
  color:#e2b764;
  text-shadow:0 0 28px rgba(213,168,91,.12);
}
.hero-lead{
  max-width:780px;
  margin:24px auto 0;
  color:#a6b5b7;
  font-size:15px;
  line-height:1.75;
}
.hero-status{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  max-width:980px;
  margin:34px auto 0;
  border:1px solid #25434d;
  background:rgba(3,13,18,.68);
  box-shadow:0 18px 50px rgba(0,0,0,.26);
}
.hero-chip{
  min-height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  border-right:1px solid #1e3943;
  transition:.18s ease;
}
.hero-chip:last-child{border-right:0}
.hero-chip small{
  color:#677d83;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.hero-chip strong{
  margin-top:4px;
  color:#d5dfdf;
  font-family:Cinzel,serif;
  font-size:12px;
}
.hero-chip:hover{background:rgba(31,79,88,.18)}
.hero-chip.active:before{
  content:"";
  position:absolute;left:18%;right:18%;top:-1px;height:2px;
  background:#5cdee1;
  box-shadow:0 0 12px rgba(92,222,225,.65);
}
.hero-chip.classic strong{color:#e7c470}
.hero-note{
  max-width:790px;margin:18px auto 0;
  display:flex;gap:10px;align-items:flex-start;justify-content:center;
  color:#65777c;font-size:10px;line-height:1.55;
}
.hero-note span{color:#d0a75c;margin-top:2px}
.hero-note p{margin:0}

/* Overview */
.overview{padding:64px 0 36px}
.overview-head{
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:36px;align-items:end;
}
.section-kicker,.micro{
  display:block;
  color:#62cbd0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
.overview h2,.footer-note h2{
  margin:7px 0 0;
  font-family:Cinzel,serif;
  color:#e1bf77;
  font-size:34px;
}
.overview-head>p{
  margin:0;
  color:#819397;
  font-size:13px;
  line-height:1.7;
}
.overview-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:26px;
}
.overview-card{
  position:relative;
  min-height:124px;
  padding:17px 16px;
  border:1px solid #263f47;
  background:linear-gradient(180deg,#07141a,#051016);
  overflow:hidden;
}
.overview-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#3c777d
}
.overview-card.classic:before{background:#c49b50}
.ov-number{
  display:block;
  color:#38535b;
  font-family:Cinzel,serif;
  font-size:29px;
  font-weight:800;
}
.overview-card strong{
  display:block;margin-top:10px;
  color:#e0e6e4;
  font-family:Cinzel,serif;
  font-size:13px
}
.overview-card small{display:block;margin-top:5px;color:#74868b;font-size:9px}

/* Timeline */
.timeline{
  position:relative;
  padding:48px 0 100px;
}
.timeline-line{
  position:absolute;
  top:48px;bottom:120px;left:50%;
  width:2px;
  background:#17313a;
  transform:translateX(-1px);
}
.timeline-line>span{
  display:block;width:100%;height:0;
  background:linear-gradient(180deg,#56dce0,#d4a65a,#74d279);
  box-shadow:0 0 14px rgba(87,222,224,.28);
  transition:height .12s linear;
}
.milestone{
  position:relative;
  padding:0 0 92px;
}
.milestone-node{
  position:absolute;
  z-index:8;
  left:50%;top:30px;
  transform:translateX(-50%);
  width:46px;height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  border:2px solid #45656d;
  background:#061118;
  box-shadow:0 0 0 7px #03080c,0 0 20px rgba(69,101,109,.2);
}
.milestone-node span{
  color:#e1bb70;
  font-family:Cinzel,serif;
  font-size:11px;
  font-weight:800;
}
.milestone-card{
  width:calc(50% - 46px);
  border:1px solid #294852;
  background:linear-gradient(180deg,#08171e,#051016);
  box-shadow:0 24px 70px rgba(0,0,0,.30);
}
.milestone:nth-of-type(even) .milestone-card{margin-left:auto}
.milestone-card.reverse{margin-left:auto}
.milestone-media{
  height:250px;
  position:relative;
  overflow:hidden;
}
.milestone-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.8)}
.milestone-media:after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)
}
.media-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,10,13,.05),rgba(4,15,20,.94));
}
.pvp-overlay{background:linear-gradient(180deg,rgba(30,8,11,.05),rgba(7,10,18,.95))}
.media-label{
  position:absolute;left:18px;right:18px;bottom:15px;
  display:flex;align-items:end;justify-content:space-between;gap:12px
}
.status{
  display:inline-flex;align-items:center;
  min-height:24px;padding:0 8px;
  border:1px solid;border-radius:4px;
  font-size:8px;font-weight:900;letter-spacing:.09em;
}
.status.work{color:#7ef1ee;border-color:#32797a;background:#0b2b2d}
.status.planned{color:#e7c36f;border-color:#755c31;background:#271e10}
.status.seasonal{color:#f1a254;border-color:#884820;background:#32180d}
.status.ice{color:#a5e1ff;border-color:#437695;background:#112631}
.status.version{color:#bfa4ff;border-color:#6d54a4;background:#1d1632}
.status.reset{color:#ff8178;border-color:#8d3d39;background:#32110f}
.status.classic-status{color:#f0d187;border-color:#816738;background:#251c0e}
.phase-name{
  color:#d8e5e5;
  font-family:Cinzel,serif;
  font-size:11px;
  letter-spacing:.08em;
}
.milestone-content{padding:22px}
.title-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px
}
.title-row h3,.events-head h3,.reset-copy h3,.classic-finale h3{
  margin:6px 0 0;
  color:#e4c379;
  font-family:Cinzel,serif;
  font-size:27px;
  line-height:1.15;
}
.big-icon{font-size:28px;color:#caa557}
.milestone-content>p{
  margin:14px 0 0;
  color:#95a5a8;
  font-size:12px;
  line-height:1.72;
}
.task-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px
}
.task{
  padding:11px 12px;
  border:1px solid #1e3941;
  background:#061218;
}
.task b{display:block;color:#d4dedd;font-size:10px}
.task span{display:block;margin-top:4px;color:#6f8287;font-size:9px;line-height:1.5}
.task.doneish{border-color:#265159}
.inline-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.inline-links a{
  padding:8px 10px;border:1px solid #334b52;background:#071116;
  color:#c6d6d6;font-size:9px;font-weight:700
}
.inline-links a span{color:#d7ad5f}
.feature-stack{display:grid;gap:8px;margin-top:17px}
.feature-stack>div{
  display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;
  padding:11px 12px;border:1px solid #1f3942;background:#061218
}
.feature-stack>div>span{
  width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
  color:#e0b760;border:1px solid #665233;background:#15120d
}
.feature-stack b{display:block;color:#d7dfde;font-size:10px}
.feature-stack small{display:block;margin-top:3px;color:#71858a;font-size:9px;line-height:1.45}
.info-ribbon{
  margin-top:15px;padding:10px 12px;
  border-left:2px solid #d0a459;background:#11130f;
  color:#8f9d93;font-size:9px;line-height:1.55
}
.info-ribbon b{color:#e1bd73}

/* Events */
.events-milestone{padding-top:8px}
.events-head{
  width:min(760px,calc(100% - 60px));
  margin:0 auto 24px;
  text-align:center;
  background:#03080c;
  position:relative;z-index:4;
  padding:0 16px;
}
.events-head h3{font-size:29px}
.events-head p{margin:9px 0 0;color:#798b90;font-size:11px}
.event-grid{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.event-card{
  overflow:hidden;border:1px solid #3c3e37;background:#071218;
  box-shadow:0 24px 70px rgba(0,0,0,.28)
}
.event-card.halloween{border-color:#603718}
.event-card.christmas{border-color:#2d5368}
.event-image{height:280px;position:relative;overflow:hidden}
.event-image img{width:100%;height:100%;object-fit:cover}
.event-gradient{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,#071218 96%)
}
.event-image .status{position:absolute;left:16px;top:16px}
.event-body{position:relative;padding:0 20px 20px;margin-top:-19px;z-index:2}
.event-icon{
  width:43px;height:43px;border-radius:50%;display:grid;place-items:center;
  background:#14110d;border:1px solid #6a4c2b;font-size:21px
}
.christmas .event-icon{border-color:#3c687e;background:#0b1820}
.event-body h4{
  margin:10px 0 0;color:#e8c677;font-family:Cinzel,serif;font-size:24px
}
.event-body p{color:#92a1a4;font-size:11px;line-height:1.65}
.event-body ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.event-body li{
  position:relative;padding-left:17px;color:#829398;font-size:10px;line-height:1.45
}
.event-body li:before{content:"◆";position:absolute;left:0;color:#c98643;font-size:7px;top:3px}
.christmas .event-body li:before{color:#70c9ef}
.limited{
  margin-top:16px;padding:9px 10px;text-align:center;
  border:1px solid #6d3e1f;background:#24130b;color:#e8974e;
  font-size:8px;font-weight:900;letter-spacing:.13em
}
.limited.ice{border-color:#315b70;background:#0e2029;color:#90d8f9}

/* PvP */
.decision-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.decision-list>div{
  display:grid;grid-template-columns:30px 1fr;gap:9px;padding:10px;border:1px solid #2b334d;background:#0a101c
}
.decision-list>div>span{
  color:#a78bdf;font-family:Cinzel,serif;font-size:11px;font-weight:800
}
.decision-list p{margin:0}
.decision-list b{display:block;color:#d2d9df;font-size:9px}
.decision-list small{display:block;color:#737f91;margin-top:3px;font-size:8.5px;line-height:1.4}

/* Reset */
.reset-card{
  width:calc(100% - 150px);
  margin:0 auto;
  position:relative;
  z-index:3;
  border:1px solid #553633;
  background:
    radial-gradient(circle at 50% 0,rgba(178,60,51,.08),transparent 360px),
    linear-gradient(180deg,#100d0e,#090b0d);
  box-shadow:0 30px 90px rgba(0,0,0,.35)
}
.reset-copy{padding:27px 27px 20px;text-align:center}
.reset-copy .status{margin-bottom:13px}
.reset-copy p{
  max-width:820px;margin:14px auto 0;color:#9a9290;font-size:12px;line-height:1.7
}
.reset-columns{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:#2c2624;border-top:1px solid #2c2624;border-bottom:1px solid #2c2624
}
.reset-column{padding:22px;text-align:center;background:#0b1012}
.reset-column.wipe{background:linear-gradient(180deg,#160e0e,#0d1012)}
.reset-column.keep{background:linear-gradient(180deg,#0b1510,#0d1012)}
.reset-column.open{background:linear-gradient(180deg,#10131a,#0d1012)}
.reset-symbol{
  width:42px;height:42px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;font-size:20px
}
.wipe .reset-symbol{color:#ff746b;border:1px solid #713733;background:#24100f}
.keep .reset-symbol{color:#7ed488;border:1px solid #315a38;background:#0e2112}
.open .reset-symbol{color:#b5bfd0;border:1px solid #4a5260;background:#161b23}
.reset-column h4{margin:0 0 12px;font-family:Cinzel,serif;font-size:12px}
.wipe h4{color:#e77d74}.keep h4{color:#88d18f}.open h4{color:#b9c1ce}
.reset-column p{margin:5px 0;color:#7f8c8e;font-size:9px}
.reset-warning{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px 18px;background:#1a110f;border-top:1px solid #4e2d28
}
.reset-warning>span{
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  flex:0 0 auto;border:1px solid #814039;color:#ff776c;background:#2b1110;font-weight:900
}
.reset-warning p{margin:2px 0 0;color:#9b8581;font-size:9px;line-height:1.55}
.reset-warning b{color:#df8a80}

/* Classic finale */
.classic-phase{padding-bottom:20px}
.classic-node{border-color:#8b7140;background:#16130d}
.classic-finale{
  width:calc(100% - 160px);
  min-height:530px;
  margin:0 auto;
  padding:56px 40px 48px;
  position:relative;overflow:hidden;text-align:center;
  border:1px solid #735d33;
  background:
    radial-gradient(circle at 50% 25%,rgba(79,190,89,.13),transparent 210px),
    radial-gradient(circle at 50% 55%,rgba(38,132,169,.11),transparent 360px),
    linear-gradient(180deg,#081711,#071015 55%,#070b0d);
  box-shadow:0 35px 100px rgba(0,0,0,.42)
}
.classic-finale:before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(222,181,92,.13);pointer-events:none
}
.classic-light{
  position:absolute;width:460px;height:460px;left:50%;top:-230px;transform:translateX(-50%);
  border-radius:50%;background:#65db71;filter:blur(100px);opacity:.13
}
.final-logo{
  position:relative;z-index:2;
  width:min(430px,78%);
  margin:0 auto 11px;
  filter:drop-shadow(0 22px 35px rgba(0,0,0,.42))
}
.classic-finale .status{position:relative;z-index:2}
.classic-finale h3{
  position:relative;z-index:2;
  margin-top:18px;
  font-size:36px;
}
.classic-finale p{
  position:relative;z-index:2;
  max-width:840px;margin:15px auto 0;
  color:#99aaa4;font-size:12px;line-height:1.76
}
.classic-slogan{
  position:relative;z-index:2;
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:28px
}
.classic-slogan span{
  padding:9px 12px;border:1px solid #3a4f3c;background:#09120d;
  color:#c7b984;font-size:8px;font-weight:900;letter-spacing:.12em
}

/* Footer */
.footer-note{
  border-top:1px solid rgba(206,162,82,.18);
  background:
    radial-gradient(circle at 15% 50%,rgba(28,109,116,.10),transparent 320px),
    #02070a;
}
.footer-note-inner{
  min-height:250px;display:grid;grid-template-columns:1.3fr .7fr;gap:38px;align-items:center
}
.footer-note h2{font-size:27px}
.footer-note p{margin:0;color:#73868a;font-size:11px;line-height:1.7}

/* Reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:1040px){
  .hero-status{grid-template-columns:repeat(5,1fr)}
  .overview-grid{grid-template-columns:repeat(3,1fr)}
  .timeline-line{left:24px}
  .milestone-node{left:24px}
  .milestone-card,.milestone-card.reverse{
    width:calc(100% - 72px);
    margin-left:72px!important;
  }
  .events-head{margin-left:72px;width:calc(100% - 72px)}
  .event-grid{margin-left:72px}
  .reset-card,.classic-finale{width:calc(100% - 72px);margin-left:72px}
}
@media(max-width:760px){
  .hero{min-height:690px}
  .classic-mark{width:min(315px,80vw)}
  .hero h1{font-size:48px}
  .hero-lead{font-size:13px}
  .hero-status{grid-template-columns:1fr 1fr}
  .hero-chip:nth-child(5){grid-column:1/-1}
  .overview-head{grid-template-columns:1fr}
  .overview-grid{grid-template-columns:1fr 1fr}
  .milestone-card{width:calc(100% - 52px);margin-left:52px!important}
  .timeline-line,.milestone-node{left:14px}
  .milestone-node{width:36px;height:36px}
  .milestone-node span{font-size:9px}
  .task-grid,.decision-list{grid-template-columns:1fr}
  .events-head{margin-left:52px;width:calc(100% - 52px)}
  .event-grid{grid-template-columns:1fr;margin-left:52px}
  .reset-card,.classic-finale{width:calc(100% - 52px);margin-left:52px}
  .reset-columns{grid-template-columns:1fr}
  .footer-note-inner{grid-template-columns:1fr;padding:48px 0}
}
@media(max-width:520px){
  .section-wrap{width:calc(100% - 22px)}
  .hero-inner{width:calc(100% - 22px);padding-top:55px}
  .hero h1{font-size:40px}
  .hero-status{display:grid;grid-template-columns:1fr}
  .hero-chip:nth-child(5){grid-column:auto}
  .overview-grid{grid-template-columns:1fr}
  .timeline{width:calc(100% - 12px)}
  .timeline-line{left:9px}
  .milestone-node{left:9px}
  .milestone-card{width:calc(100% - 38px);margin-left:38px!important}
  .milestone-media{height:205px}
  .milestone-content{padding:17px}
  .title-row h3,.events-head h3,.reset-copy h3,.classic-finale h3{font-size:22px}
  .events-head{margin-left:38px;width:calc(100% - 38px)}
  .event-grid{margin-left:38px}
  .event-image{height:220px}
  .reset-card,.classic-finale{width:calc(100% - 38px);margin-left:38px}
  .classic-finale{padding:40px 18px}
  .footer-note h2{font-size:22px}
}