:root{color-scheme:dark;--bg:#15111d;--panel:#1d1828;--ink:#f8f0e6;--muted:#cdc2d0;--gold:#ecc38c;--line:#ffffff20;--heading:Georgia,"Times New Roman",serif;--sans:system-ui,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.skip{position:absolute;z-index:4;top:.5rem;left:.5rem;padding:.65rem 1rem;background:var(--bg);transform:translateY(-150%)}
.skip:focus{transform:none}
.top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem clamp(1.15rem,5.5vw,5rem);border-bottom:1px solid var(--line);min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;font:700 1.22rem/1 var(--heading);white-space:nowrap}
.brand-sub{display:block;margin-top:.38rem;color:var(--gold);font:700 .59rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase}
.top nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.8rem,2.8vw,2rem);font-size:.85rem}
.top nav a:hover{color:var(--gold)}
.nav-cta{padding:.52rem .76rem;border:1px solid #ecc38c55;color:var(--gold)}
.wrap{width:min(1136px,calc(100% - 2 * clamp(1.15rem,5.5vw,5rem)));margin-inline:auto}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(590px,80svh,880px);background:#1e1830 url("assets/castle.svg") center/cover no-repeat}
.hero::before,.alpha-page::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,#15111dee 0%,#15111dd0 31%,#15111d20 68%),linear-gradient(0deg,#15111dd9,transparent 30%)}
.hero-content{padding-block:4rem 6rem}
.eyebrow{margin:0 0 1rem;color:var(--gold);font-size:.72rem;font-weight:750;letter-spacing:.22em;text-transform:uppercase}
.mark{margin-right:.38rem}
h1,h2{margin:0;font-family:var(--heading);font-weight:500;line-height:.92;letter-spacing:-.05em}
h1{font-size:clamp(4rem,11vw,9rem)}
h1 span{color:var(--gold)}
h2{font-size:clamp(2.8rem,6.5vw,5.2rem)}
.title-detail{color:var(--gold);font:700 clamp(.9rem,2vw,1.35rem)/1 var(--heading);margin:1.2rem 0}
.lead,.intro{max-width:36rem;color:var(--muted);font-size:clamp(1rem,1.65vw,1.22rem)}
.lead{max-width:30rem;margin:1.6rem 0 2rem}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.3rem;padding:.8rem 1.05rem;background:var(--gold);color:#211523;font-weight:750;min-height:44px}
.button:hover{background:#ffe0ab}
.art-credit{position:absolute;right:clamp(1rem,5vw,5rem);bottom:1rem;color:#f2e1ed;font-size:.75rem;text-shadow:0 1px 5px #000}
.world-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem clamp(1.15rem,5vw,4.4rem);padding:1rem;background:#201b2c;border-block:1px solid var(--line);font-size:.86rem;font-weight:650}
.world-band i{font-style:normal;margin-right:.35rem;font-size:1rem}
.fire{color:#ffae8e}.water{color:#a8dfff}.wind{color:#b9e9b8}.light{color:#ffe1a4}.dark{color:#ddc2ff}
.section{padding-block:clamp(3.75rem,9vw,7.5rem)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,7vw,6rem);align-items:start}
.split .intro{margin-top:0}
.battle-inner .intro{margin-top:1.4rem}
.modes{margin:1.6rem 0 0}
.modes div{border-top:1px solid var(--line);padding:.9rem 0}
.modes dt{color:var(--gold);font-weight:700}
.modes dd{margin:.18rem 0 0;color:var(--muted)}
.battle{overflow:hidden;border-block:1px solid var(--line);background:radial-gradient(ellipse at 90% 85%,#442e4c,#1b1726 65%)}
.battle-inner{align-items:center}
.board{position:relative;aspect-ratio:1.45;isolation:isolate;display:grid;place-items:center}
.board::before{content:"";position:absolute;inset:10% 16%;transform:rotate(-25deg) skew(22deg,3deg);background:repeating-linear-gradient(90deg,#ecc38c56 0 1px,transparent 1px 16.66%),repeating-linear-gradient(0deg,#ecc38c56 0 1px,transparent 1px 16.66%),#2e223a;border:1px solid #ecc38c55;box-shadow:0 18px 0 #120e1d,0 25px 30px #100b17}
.cell{position:absolute;width:14%;height:18%;transform:rotate(-25deg) skew(22deg,3deg);border:1px solid #a8dfff99;background:#a8dfff40}
.cell.one{top:50%;left:28%}.cell.two{top:43%;left:42%}.cell.three{top:36%;left:56%;border-color:#ecc38c;background:#ecc38c60}.cell.four{top:22%;left:64%;border-color:#ffc1b1;background:#ffc1b145}
.board-label{position:absolute;bottom:-.9rem;right:0;color:var(--muted);font-size:.75rem}
.alpha-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.foot{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-block:1.6rem;color:var(--muted);font-size:.85rem}
.alpha-page{position:relative;isolation:isolate;min-height:72vh;background:#1e1830 url("assets/castle.svg") center/cover no-repeat}
.alpha-page .section{padding-block:clamp(4rem,11vw,8rem)}
.alpha-page h1{font-size:clamp(3rem,9vw,7rem)}
.alpha-status{max-width:32rem;margin-bottom:1.6rem}
@media(max-width:700px){.top{flex-wrap:wrap;gap:.85rem}.top nav{justify-content:flex-start;flex-wrap:wrap}.hero{min-height:600px;background-position:62% center}.hero::before,.alpha-page::before{background:linear-gradient(90deg,#15111df0,#15111db8 60%,#15111d63)}.split{grid-template-columns:1fr}.board{width:min(420px,95%);margin-inline:auto}.alpha-cta{align-items:flex-start;flex-direction:column}.foot{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}