:root{--cyan:#8fb0bd;--gold:#b08d57;--line:#1d3650;--line2:#26486a;--muted:#8aa3b8;--ink:#dcecf8;--bg:#04060b;--panel:rgba(8,15,28,.86);--green:#5be3a0;--red:#ff5b6b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:#04070d;color:var(--ink);font:15px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 50% -10%,#0f2740 0,#060b14 55%,#03050a 100%);pointer-events:none}
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
a{color:var(--cyan)}main,.nav,footer{position:relative;z-index:1}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;background:linear-gradient(180deg,rgba(3,6,12,.92),rgba(3,6,12,.55));backdrop-filter:blur(8px);border-bottom:1px solid rgba(143,176,189,.12)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;letter-spacing:.26em;font-weight:700;font-size:14px}
.mark{width:18px;height:18px;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 12px var(--cyan),inset 0 0 8px rgba(143,176,189,.4)}
.nav nav{display:flex;align-items:center;gap:22px}.nav nav a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase}.nav nav a:hover{color:#fff}
.btn{display:inline-block;text-decoration:none;color:#fff;border:1px solid var(--cyan);background:linear-gradient(180deg,#1f719a,#12506c);padding:10px 22px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-align:center;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.25);transform:translateY(-1px)}.btn.small{padding:7px 18px}.btn.big{padding:14px 34px;font-size:13px}
.btn.ghost{background:rgba(143,176,189,.07);border-color:rgba(143,176,189,.5)}.btn.off{pointer-events:none;opacity:.4;border-color:#555;background:#222}
.eyebrow{margin:0 0 10px;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:600}
h1,h2,h3{margin:0;font-weight:700}
/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 28px 80px;overflow:hidden}
#hero{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}#hero.on{opacity:1}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,12,.92) 0,rgba(3,6,12,.6) 38%,rgba(3,6,12,0) 66%);pointer-events:none}
.hero-copy{position:relative;max-width:620px;margin-left:max(0px,calc((100vw - 1180px)/2))}
.hero h1{font-size:clamp(40px,7vw,78px);letter-spacing:.14em;color:#fff;text-shadow:0 0 34px rgba(143,176,189,.55);line-height:1.05}
.tag{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin:12px 0 18px;font-size:14px}
.lead{color:#b4c8d9;max-width:660px;font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 30px}
.live{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:13px}.live b{color:#fff;font-size:18px;margin-right:4px}
.scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--cyan);text-decoration:none;font-size:22px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
/* sections */
.sec{max-width:1180px;margin:0 auto;padding:90px 24px 20px}
.head{text-align:center;margin-bottom:34px}.head h2{font-size:clamp(26px,4vw,40px);letter-spacing:.06em;color:#fff}.head .lead{margin:14px auto 0}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
/* pace ruler */
.ruler{position:relative;height:128px;margin:10px 0 34px;max-width:980px;margin-left:auto;margin-right:auto}
.ruler .track{position:absolute;left:3%;right:3%;top:39px;height:2px;background:linear-gradient(90deg,#2a4e73,var(--cyan),var(--gold));box-shadow:0 0 14px rgba(143,176,189,.5)}
.ruler .mk{position:absolute;top:0;transform:translateX(-50%);text-align:center;text-decoration:none;color:var(--ink);width:130px}
.ruler .mk i{display:block;margin:11px auto 10px;width:14px;height:14px;background:#06101c;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 12px var(--cyan);transition:background .2s}
.ruler .mk:hover i{background:var(--cyan)}.ruler .mk b{display:block;height:22px;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.ruler .mk small .pre{display:inline}.ruler .mk small{display:block;color:var(--muted);font-size:11px;line-height:1.3;margin-top:2px}
@media(min-width:821px){.ruler .mk:nth-child(odd) small{margin-top:22px}}@media(max-width:820px){.ruler{margin-top:30px;height:166px}.ruler .mk:nth-child(odd) b{transform:translateY(-15px)}.ruler .mk:nth-child(even) small{margin-top:18px}.ruler:after{top:112px}}   /* the Atlas and Juniper labels collide on a wide screen: stagger every other one */
.ruler .end{position:absolute;bottom:0;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.ruler .l{left:3%}.ruler .r{right:3%}
/* realm cards */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}.cards>*{flex:1 1 320px;max-width:400px}
.realm{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));transition:border-color .2s,transform .7s ease,opacity .7s ease}
.realm:hover{border-color:var(--cyan)}
.realm h3{color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;font-size:19px}
.tick{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--gold);font-size:26px;line-height:1}.tick small{font-size:12px;color:var(--muted);font-family:inherit}
.pace{height:5px;background:#10233a;overflow:hidden}.pace i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 10px var(--cyan)}
.realm dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:2px 0;font-size:13px}.realm dt{color:var(--muted)}.realm dd{margin:0;color:#fff;font-weight:600}
.best{margin:0;color:#b4c8d9;font-size:13px;flex:1}
.meta{display:flex;gap:16px;color:var(--muted);font-size:12px}.meta b{color:var(--ink)}
.dot{position:absolute;top:22px;right:26px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}.dot.off{background:var(--red);box-shadow:0 0 9px var(--red)}
.st{font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;font-weight:600}.st.online{color:var(--green)}.st.starting{color:var(--gold)}.st.down{color:var(--red)}
.note{max-width:760px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:14px}.note b{color:var(--gold)}
/* features */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.f{padding:22px;background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.f .ic{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--cyan);margin-bottom:12px;background:rgba(143,176,189,.06)}.f .ic svg{width:24px;height:24px}
.f h3{font-size:16px;letter-spacing:.04em;color:#fff;margin-bottom:6px}.f p{margin:0;color:#a9bfd0;font-size:14px}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;counter-reset:s}
.steps li{position:relative;padding:22px 18px 18px;border-top:2px solid var(--cyan);background:linear-gradient(180deg,rgba(143,176,189,.07),transparent 70%)}
.steps .n{display:block;font:700 34px/1 ui-monospace,Menlo,monospace;color:rgba(176,141,87,.9);margin-bottom:8px}.steps h3{letter-spacing:.14em;text-transform:uppercase;font-size:15px;color:#fff;margin-bottom:6px}.steps p{margin:0;font-size:13.5px;color:#a9bfd0}
/* gallery */
.gal{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:flex-start}.gal canvas{max-width:100%;background:radial-gradient(ellipse at 50% 40%,rgba(30,70,110,.25),transparent 70%)}
.final{text-align:center;padding-bottom:90px}.final h2{font-size:clamp(28px,4vw,44px);letter-spacing:.08em;color:#fff;margin-bottom:10px}.final .lead{margin:0 auto 26px}
footer{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;padding:26px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.06em;background:rgba(3,6,12,.8)}
@media(max-width:820px){.nav nav a:not(.btn){display:none}.nav{padding:10px 16px}.hero{padding:96px 18px 70px;align-items:flex-start}.hero:before{background:linear-gradient(180deg,rgba(3,6,12,.9) 0,rgba(3,6,12,.55) 55%,rgba(3,6,12,.1))}.hero-copy{margin:0}
 .ruler{height:150px}.ruler .mk{width:76px}.ruler .mk small{font-size:10px}.ruler .mk small .pre{display:none}.ruler:after{content:"1 game day =";position:absolute;left:0;right:0;top:86px;text-align:center;color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.ruler .mk b{font-size:11px;letter-spacing:.04em}.sec{padding-top:64px}}
/* real game footage (update 92) */
.clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:22px}
.fig{margin:0;background:var(--panel);border:1px solid var(--line);position:relative;display:flex;flex-direction:column;min-width:0}.fig.wide{grid-column:1/-1}
.fig .shot{position:relative;background:#02050a;aspect-ratio:16/9;overflow:hidden}.fig .shot img{display:block;width:100%;height:100%;object-fit:cover}.fig.chart .shot{aspect-ratio:960/420}.fig.chart .shot img{object-fit:contain}
.fig .tag{position:absolute;left:10px;top:10px;z-index:2;background:rgba(3,6,12,.82);border:1px solid var(--gold);color:var(--gold);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:3px 8px}
.fig.chart .tag{position:static;align-self:flex-start;border-color:rgba(127,208,232,.7);color:#7fd0e8}
.fig figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}.fig h3{font-size:16px;letter-spacing:.04em;color:#fff}.fig p{margin:0;color:#b4c8d9;font-size:13.5px}
.fig .meta{color:var(--muted);font-size:12px;letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:4px 14px}.fig .meta b{color:var(--ink);font-weight:600}
.sub{font-size:clamp(20px,3vw,28px);letter-spacing:.06em;color:#fff}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll{animation:none}#hero{transition:none}}

/* lore (update 33) */
.lore .lead{font-style:italic;color:var(--gold)}
.chap{display:grid;grid-template-columns:96px 1fr;gap:6px 26px;max-width:860px;margin:0 auto 64px}
.chap .no{font:700 54px/1 ui-monospace,Menlo,monospace;color:rgba(176,141,87,.85);text-align:right;padding-top:4px}
.chap .kick{margin:0;color:var(--cyan);letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.chap h3{font-size:clamp(22px,3vw,30px);letter-spacing:.05em;color:#fff;margin:2px 0 14px}
.chap p{margin:0 0 14px;color:#b9cddd;font-size:16px;line-height:1.75}
.chap p.q{margin:18px 0;padding:6px 0 6px 18px;border-left:3px solid var(--gold);color:#e9f3fb;font-style:italic;font-size:17px}
.chap .art{grid-column:1/-1;margin:0 0 26px;border:1px solid var(--line2);overflow:hidden;position:relative;background:#02050a}
.chap .art img{display:block;width:100%;height:auto}
.chap .art:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(2,5,10,.8);pointer-events:none}
.chap .body{min-width:0}
.peoples{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:10px}
.pcard{position:relative;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--pc);overflow:hidden;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.pcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(1.05)}
.pcard div{padding:12px 16px 16px}.pcard b{display:block;color:var(--pc);letter-spacing:.16em;text-transform:uppercase;font-size:14px;margin-bottom:4px}.pcard span{color:#a9bfd0;font-size:13px;line-height:1.5}
@media(max-width:700px){.chap{grid-template-columns:1fr}.chap .no{text-align:left;font-size:38px}}

/* update 78: Asteria Online brand art */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand{gap:12px;letter-spacing:0}
.brand .mk-img{display:block;width:34px;height:34px}
.brand .bw{display:flex;flex-direction:column;line-height:1}
.brand .bw b{font-size:17px;letter-spacing:.3em;font-weight:500;color:#cfd6dc;margin-right:-.3em}
.brand .bw i{font-style:normal;font-size:9px;letter-spacing:.62em;color:var(--gold);margin-top:4px;font-weight:500}
.hero .keyart{position:absolute;inset:0;background:#05070b url(/img/brand/keyart.jpg) 62% 50%/cover no-repeat;opacity:.85;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.hero:before{background:linear-gradient(90deg,rgba(4,6,11,.9) 0,rgba(4,6,11,.55) 40%,rgba(4,6,11,0) 68%)}
.hero-logo{display:block;width:min(580px,100%);height:auto;margin:0 0 4px -6px}
.hero .tag{text-shadow:none;letter-spacing:.3em;font-size:13px}
footer .fb{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
@media(max-width:820px){.hero:before{background:linear-gradient(180deg,rgba(4,6,11,.88) 0,rgba(4,6,11,.78) 62%,rgba(4,6,11,.2))}.hero-logo{margin-left:-8px}}
/* update 80: the "Watch live" link on a realm card (the read-only TV broadcast, /watch-live of the realm) */
.watchlive{display:inline-block;margin:0 0 0 14px;color:var(--cyan);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px dashed currentColor;padding-bottom:1px}.watchlive:hover{color:#fff}.watchlive:before{content:"\25CF ";color:#ff5470}

/* update 84: realms that are not open yet */
.realm.soon{opacity:.62;filter:saturate(.55)}.realm.soon .btn{pointer-events:none}.realm.soon .st{letter-spacing:.12em;text-transform:uppercase}