:root{color-scheme:dark;--bg:#090d0e;--surface:#121819;--ink:#f3f3eb;--muted:#adb6b5;--line:#2b3738;--signal:#65eed8;--noise:#ff8956;--max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6}
a{color:inherit;text-decoration:none}
button,summary{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
p{color:var(--muted);margin:0 0 24px}
h1,h2,h3,h4{line-height:1.05;margin:0;text-wrap:balance}
h2{font-size:clamp(2.3rem,5vw,4.7rem);letter-spacing:-.045em}
h3{font-size:1.65rem;letter-spacing:-.025em}
h4{font-size:1rem;letter-spacing:.025em}
ul{padding-left:20px}
figure{margin:0}
section{scroll-margin-top:80px}
.wrap{width:min(var(--max),calc(100% - 80px));margin-inline:auto}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--signal);margin-bottom:22px}
.muted{color:var(--muted)}
.signal{color:var(--signal)}
.noise{color:var(--noise)}
.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--signal);color:var(--bg);padding:12px}
.skip:focus{top:10px}
.nav{position:sticky;top:0;z-index:20;background:rgba(9,13,14,.97);border-bottom:1px solid var(--line)}
.nav-inner{height:78px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:12px;font-size:1.2rem;font-weight:900;letter-spacing:.04em}
.brand img{width:32px;height:32px;object-fit:contain}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:.875rem}
.nav-links a:hover,footer a:hover{color:var(--signal)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:52px;padding:14px 25px;background:var(--signal);color:#071514;border:1px solid var(--signal);font-size:.875rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;transition:background .2s,transform .2s}
.button:hover{background:#a1ffee;transform:translateY(-2px)}
.button.outline{background:transparent;color:var(--ink);border-color:#718583}
.button.outline:hover{background:#233331}
.nav .button{min-height:44px;padding:10px 20px;font-size:.75rem}
.hero{padding:70px 0 0;overflow:hidden}
.hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;padding-bottom:42px}
.hero h1{font-size:clamp(4.8rem,11vw,9.3rem);font-weight:900;letter-spacing:-.07em;line-height:.86}
.faction-line{font-size:clamp(1.2rem,2.7vw,2rem);font-weight:700;letter-spacing:.18em;margin:26px 0 0}
.faction-line b{color:#667577;margin-inline:12px;font-weight:400}
.hero-copy{max-width:365px;padding-bottom:3px}
.hero-copy>p{font-size:1.25rem;line-height:1.45;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-copy .actions{gap:12px}
.hero-copy .button{padding:13px 18px}
.hero-media{position:relative;border:1px solid #4b4236;background:#201710}
.hero-media>img{width:100%;aspect-ratio:16/8.2;object-fit:cover;object-position:center}
.capture-tag{position:absolute;bottom:20px;left:20px;background:#090d0ee8;border:1px solid #4e5d59;padding:7px 12px;font:12px ui-monospace,monospace;letter-spacing:.08em;color:#e0e8e5}
.hero-footer{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.hero-footer span:first-child{color:var(--signal)}
.section{padding:110px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:42px}
.section-head p{max-width:390px;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.split h2{margin-bottom:28px}
.media-frame{border:1px solid var(--line);background:#171515}
.media-frame img{width:100%}
.media-frame figcaption{padding:12px 16px;font-size:.8rem;color:var(--muted)}
.band{background:#101617;border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{border-top:1px solid #435251;padding-top:16px}
.step .number{font:14px ui-monospace,monospace;color:var(--signal)}
.step h3{display:inline;margin-left:14px;font-size:1.25rem}
.step p{font-size:1rem;margin:12px 0 20px}
.step img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.role{position:relative;background:var(--surface);border:1px solid var(--line);padding:28px;overflow:hidden}
.role .eyebrow{margin-bottom:10px}
.role h3{font-size:2rem}
.role-art{height:260px;display:flex;align-items:center;justify-content:center;margin:28px -10px}
.role-art img{height:100%;width:100%;object-fit:contain}
.role-art.wide img{height:auto;max-height:100%;object-fit:cover;border:1px solid #405552}
.role-lead{color:var(--ink);font-size:1.1rem;min-height:60px}
.ability{border-top:1px solid var(--line);padding:18px 0 0;margin-top:18px}
.ability p{font-size:.92rem;line-height:1.55;margin:8px 0 0}
.badge{display:inline-block;font:12px ui-monospace,monospace;border:1px solid #756343;background:#30281a;color:#ffd18e;padding:4px 8px;margin-top:14px}
.role small{display:block;color:var(--muted);font-size:.8rem;margin-top:18px}
.unit-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#111718;border:1px solid var(--line);padding:30px}
.unit-pair img{height:190px;width:100%;object-fit:contain}
.unit-pair figcaption{text-align:center;font:13px ui-monospace,monospace;letter-spacing:.1em;margin-top:15px}
.terrain-image{margin-top:36px}
.terrain-image img{width:100%;aspect-ratio:16/7;object-fit:cover}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{border:1px solid var(--line);padding:7px 12px;font-size:.85rem;color:#d1d8d5}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:38px 0 60px}
.stage{border-top:2px solid #364b48;padding-top:16px}
.stage span{font:12px ui-monospace,monospace;color:var(--signal)}
.stage img{width:100%;aspect-ratio:1.2;object-fit:cover;margin:14px 0}
.stage h3{font-size:.95rem;line-height:1.3;letter-spacing:.03em}
.evolutions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.evolution{border:1px solid var(--line);padding:28px;background:#111718}
.evolution img{height:190px;width:100%;object-fit:contain;margin:5px 0 28px}
.evolution h3{font-size:1.4rem}
.big-stat{font-size:3.2rem;line-height:1.2;letter-spacing:-.04em;color:var(--signal);font-weight:800;margin:14px 0 4px}
.evolution p{font-size:1rem;margin-bottom:0}
.cost{margin:26px 0 0;text-align:center;font-size:.9rem}
.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}
.upgrade{border-top:1px solid var(--signal);padding:22px 0}
.upgrade h3{font-size:1rem;letter-spacing:.06em}
.upgrade strong{display:block;font-size:2.7rem;letter-spacing:-.04em;line-height:1.3;margin:15px 0;color:var(--signal)}
.upgrade strong span{color:#647673}
.upgrade p{font-size:.9rem}
.factions{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.faction{background:#101b1c;border-top:3px solid var(--signal);padding:35px}
.faction.enemy{background:#211712;border-color:var(--noise)}
.faction h3{font-size:3.7rem;letter-spacing:-.04em}
.faction>p{margin-top:20px}
.faction-assets{display:flex;align-items:flex-end;gap:5%;margin:30px 0 12px}
.faction-assets img{width:50%;height:220px;object-fit:contain}
.faction-assets img:nth-child(2){width:28%;height:130px}
.faction-assets img:nth-child(3){width:17%;height:95px}
.glossary{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.glossary article{padding:24px 0;border-top:1px solid var(--line)}
.glossary img{height:110px;width:100%;object-fit:contain;margin-bottom:22px}
.glossary h3{font-size:1.1rem}
.glossary p{font-size:.9rem;margin:10px 0 0}
.combat{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.combat figure:first-child{grid-column:1/-1}
.combat img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.combat figure:first-child img{aspect-ratio:16/7}
.combat figcaption{padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.combat h3{font-size:1.2rem}
.combat p{font-size:.9rem;margin:0;max-width:330px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery a{display:block;border:1px solid var(--line);background:var(--surface)}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .2s}
.gallery a:hover img{filter:brightness(1.12)}
.gallery figcaption{padding:12px 15px;font-size:.85rem}
.ranking{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center}
.ranking h2{margin-bottom:24px}
.ranking p{max-width:600px}
.ranking-side{border-left:1px solid var(--line);padding-left:50px}
.ranking-side strong{display:block;font-size:2rem;margin:15px 0}
.download{text-align:center;background:#172222;border-block:1px solid #38534f}
.download h2{font-size:clamp(3.4rem,8vw,7rem)}
.download>div>p{max-width:620px;margin:28px auto}
.download .actions{justify-content:center}
.release-details{font-size:.9rem;margin-top:24px;color:var(--muted)}
.release-details p{margin:8px 0}
.faq{max-width:850px;margin-inline:auto}
.faq h2{margin-bottom:38px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;position:relative;padding:23px 40px 23px 0;font-size:1.12rem;font-weight:600}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:8px;color:var(--signal);font-size:1.4rem}
details[open] summary:after{content:'−'}
details p{font-size:1rem;padding-right:25px}
footer{border-top:1px solid var(--line);padding:45px 0}
footer .wrap{display:flex;gap:35px;justify-content:space-between;flex-wrap:wrap}
footer p,footer a{font-size:.85rem}
footer p{margin:0}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
.note{font-size:.85rem;max-width:720px;margin-top:25px}
.back-top{display:inline-block;margin-top:20px;color:var(--signal)}
[hidden]{display:none!important}
@media(min-width:1450px){.hero-media>img{aspect-ratio:16/7.3}
}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}
.nav-inner{gap:22px}
.nav-links{gap:20px}
.hero-top{gap:30px}
.hero-copy{max-width:310px}
.hero-copy>p{font-size:1.1rem}
.hero-copy .button{padding:12px;font-size:.73rem}
.roles{gap:14px}
.role{padding:20px}
.role-art{height:220px}
.role h3{font-size:1.6rem}
.split{gap:35px}
.section{padding:80px 0}
.glossary{grid-template-columns:repeat(3,1fr)}
.stages{gap:10px}
.faction h3{font-size:3rem}
}
@media(max-width:720px){.wrap{width:calc(100% - 36px)}
.nav-inner{height:66px;justify-content:space-between;gap:12px}
.brand{font-size:1rem;gap:8px}
.brand img{width:27px;height:27px}
.nav-links{display:none}
.nav .button{font-size:.7rem;padding:10px 13px}
.hero{padding-top:43px}
.hero-top{display:block;padding-bottom:30px}
.hero .eyebrow{font-size:.72rem;letter-spacing:.09em}
.hero h1{font-size:clamp(4.5rem,17vw,7rem)}
.faction-line{font-size:1.2rem;margin-top:20px}
.hero-copy{max-width:none;margin-top:28px}
.hero-copy>p{font-size:1.15rem;max-width:340px;margin-bottom:22px}
.hero-copy .button{padding:14px 18px;font-size:.8rem}
.hero-media{margin-inline:-18px;border-inline:0}
.hero-media>img{aspect-ratio:4/3;object-position:48% center}
.capture-tag{bottom:12px;left:12px;font-size:10px;max-width:calc(100% - 24px)}
.hero-footer{font-size:.75rem;flex-wrap:wrap;gap:6px}
.section{padding:64px 0}
.section-head{display:block;margin-bottom:30px}
.section-head p{margin-top:22px}
.split,.roles,.evolutions,.factions,.ranking{grid-template-columns:1fr;gap:30px}
.split .media-frame{order:2}
.steps{grid-template-columns:repeat(2,1fr);gap:24px 15px}
.step h3{font-size:1rem;margin-left:8px}
.step p{font-size:.9rem;line-height:1.5}
.role{padding:26px}
.role h3{font-size:2.2rem}
.role-art{height:255px}
.role-lead{min-height:0}
.stages{grid-template-columns:repeat(2,1fr);gap:24px 16px}
.stage:last-child{grid-column:1/-1;max-width:50%}
.stage img{aspect-ratio:1.5}
.evolution{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-items:center}
.evolution img{grid-row:1/5;height:170px;margin:0}
.evolution p{font-size:.9rem}
.big-stat{font-size:2.7rem;margin:8px 0}
.cost{text-align:left}
.upgrade-grid{grid-template-columns:1fr;gap:8px}
.upgrade{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.upgrade strong{margin:0;font-size:2.4rem;grid-row:1/3;grid-column:2}
.upgrade p{margin:0}
.faction{padding:26px}
.faction-assets img{height:170px}
.glossary{grid-template-columns:repeat(2,1fr);gap:20px}
.combat{gap:32px;grid-template-columns:1fr}
.combat figure:first-child{grid-column:auto}
.combat figure:first-child img,.combat img{aspect-ratio:16/10}
.combat figcaption{display:block}
.combat p{margin-top:10px}
.gallery{grid-template-columns:repeat(2,1fr);gap:14px}
.gallery figcaption{font-size:.8rem;padding:10px}
.ranking-side{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}
.download .actions{flex-direction:column;align-items:stretch}
.download .actions a{width:100%}
.terrain-image img{aspect-ratio:4/3}
.unit-pair img{height:150px}
footer .wrap{gap:24px}
footer nav{gap:15px}
.note{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}
}

/* Keep identity, both CTAs and a substantial game frame together on phone screens. */
@media(max-width:720px){.hero{padding-top:25px}
.hero h1{font-size:clamp(3.3rem,13vw,5.5rem)}
.hero .eyebrow{margin-bottom:15px}
.faction-line{margin-top:13px;font-size:1rem}
.hero-copy{margin-top:20px}
.hero-copy>p{font-size:1rem;line-height:1.4;margin-bottom:16px}
.hero-copy>p br{display:none}
.hero-copy>p br:after{content:' '}
.hero-top{padding-bottom:22px}
.hero-media>img{aspect-ratio:16/10}
.hero-copy .button{min-height:48px;padding:12px 16px}
.hero-footer{padding:14px 0}
}

.mobile-cross-nav{display:none}

@media(max-width:720px){.mobile-cross-nav{display:flex;justify-content:center;gap:32px;border-top:1px solid var(--line);font-size:14px}
.mobile-cross-nav a{display:flex;align-items:center;min-height:40px}
.mobile-cross-nav [aria-current]{color:var(--signal)}
html{scroll-padding-top:118px}
.capture-tag{font-size:12px;letter-spacing:.035em}
.hero .eyebrow{font-size:12px}
.nav .button{font-size:12px}
}