/* A brighter companion to Ember's cover art. Layout and game content stay in
   styles.css / spotlights.css; this layer owns the website's visual theme. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/baloo-2-latin.woff2") format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/fonts/nunito-latin.woff2") format("woff2")}
:root{color-scheme:light;--bg:#fff9eb;--panel:#fffef8;--ivory:#18364c;--muted:#425c69;--gold:#87601c;--line:#b9cebf;--font:"Baloo 2","Trebuchet MS",sans-serif;--body:Nunito,"Trebuchet MS",sans-serif;--green:#207544;--blue:#13628c;--purple:#6b3faa;--sun:#ffcf43}
body{font-family:var(--body);font-weight:600;background:var(--bg);color:var(--ivory)}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;letter-spacing:-.4px}
h1 em,h2 em{font-style:normal;font-weight:800;color:var(--green)}
p{line-height:1.75}button{font-family:var(--body)}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
::selection{background:#fbd14e;color:#18364c}
.skip-link{background:var(--sun);color:var(--ivory);border:2px solid var(--ivory);border-radius:14px;font-weight:900}
.site-header{background:#e6f7ff;border-bottom:3px solid #aacde0}
.desktop-nav{color:#234a61;font-size:15px;font-weight:800;gap:28px}
.desktop-nav a:hover,footer a:hover{color:#783ca6}
.button{border-radius:17px;border-width:2px;font-family:var(--body);font-size:15px;font-weight:900;letter-spacing:0;box-shadow:0 4px 0 #244763;transition:background .18s,transform .18s,box-shadow .18s}
.button-gold{background:#ffd348;color:#243a4b;border-color:#85561b;box-shadow:0 4px 0 #85561b,inset 0 2px 0 #fff3ac}
.button-gold:hover{background:#ffe178;box-shadow:0 6px 0 #85561b,inset 0 2px 0 #fff3ac}
.button-outline{background:#d5edff;color:#244763;border-color:#2a648d;box-shadow:0 4px 0 #2a648d,inset 0 2px 0 #f7fdff}
.button-outline:hover{background:#e6e0ff;box-shadow:0 6px 0 #2a648d,inset 0 2px 0 #fff}
.button:active{transform:translateY(2px);box-shadow:0 1px 0 #244763}
.button-small{font-size:13px;border-radius:13px}
.menu-toggle{color:#244763;border-radius:12px;background:#fff9eb;border:2px solid #aacde0;padding:8px}
.menu-toggle span{height:2px;width:20px;margin:5px 0}
.mobile-nav{background:#e6f7ff;border-bottom:3px solid #aacde0;color:#244763;font-weight:800}
.hero-new-art{background:var(--bg)}
.hero-new-art .art-shade{background:linear-gradient(0deg,#fff9eb,transparent 14%)}
.hero-new-art .hero-content{margin:0 auto;padding-top:8px;padding-bottom:58px;gap:6%}
.hero-new-art h1{font-family:var(--font);font-size:clamp(46px,4.7vw,72px);font-weight:800;line-height:1.05;letter-spacing:-1px;text-shadow:0 3px 0 #fff}
.hero-new-art h1 em{color:var(--green);font-style:normal;font-weight:800}
.eyebrow,.hero-new-art .eyebrow{color:var(--blue);font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:1.8px}
.small-diamond{background:#e7a825}
.hero-new-art .hero-game{color:var(--purple);font-size:12px;font-weight:900;letter-spacing:1px}
.hero-new-art .hero-description{color:var(--muted);font-size:16px}
.hero-new-art .hero-note{color:#4c665a;font-size:12px}
.hero-note>span{background:#29834a}.hero-note b{color:#4c665a}
.hero-new-art .hero-bottom{color:#325e70;font-weight:900;font-size:11px;letter-spacing:1px}
.hero-bottom a span{color:var(--green)}
.world-strip{background:#dff1b9;color:#2f5b32;border-block:2px solid #a4c981;font-size:12px;font-weight:900;letter-spacing:1px;min-height:76px}
.world-strip i{color:#528b3e;font-size:12px}
h2{font-weight:800;line-height:1.07;letter-spacing:-.5px}h2 em{color:var(--green)}
.section-intro>p:last-child{font-size:16px}
.gameplay-gallery{gap:28px}
.gallery-open{background:#fff;border:2px solid #9dbeb0;border-radius:20px;padding:8px;overflow:hidden;box-shadow:0 5px 0 #cfdecb}
.gallery-open img{border-radius:11px}
.gallery-open>span{background:#fff8df;color:#234a61;border:2px solid #244763;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:0}
.gallery-open:hover>span{background:var(--sun);color:#18364c}
.gameplay-gallery h3{font:800 28px/1.15 var(--font);color:#234a61}
.gameplay-gallery figcaption p{font-size:14px;color:var(--muted)}
.gallery-note{color:#51655c;font-size:12px}
.feature-number{font:800 19px/1 var(--font);color:var(--purple)}
.world-details h3{font:800 28px/1.15 var(--font);color:var(--green)}
.world-details p{font-size:15px;color:var(--muted)}
.commanders-section{background:#ecf7ff;border-block:2px solid #bedce9}
.spotlight-intro>p{font-size:16px;color:var(--muted)}
.hero-rule{background:#fff7dc;border:2px solid #dfc179;border-radius:25px;box-shadow:0 6px 0 #d5e4e9;padding:32px}
.rule-number{font:800 88px/1 var(--font);color:#986015;letter-spacing:-2px;border-right:2px solid #e5cb90}
.rule-number>span{font:900 11px/1.5 var(--body);color:#745019;letter-spacing:1px}
.hero-rule h3{font:800 30px/1.12 var(--font);color:#234a61}
.hero-rule p{font-size:15px;color:#4b5d63}
.hero-rule strong{color:#18364c;font-weight:900}
.rule-key span{font-size:12px;color:#345a44;font-weight:800}
.rule-key i{width:7px;height:7px;background:#2e8a4c}.rule-key span:last-child i{background:#9d6320}
.roster-instruction{font-size:11px;color:#355b77;font-weight:900;letter-spacing:1px}
.roster-tabs{background:#fffef8;border:2px solid #97b9ce;border-radius:20px;overflow:hidden;box-shadow:0 5px 0 #c7dce9}
.roster-tabs button{font-size:14px;font-weight:900;color:#30566c;border-right-color:#c3d8e6;min-height:74px;padding:15px 5px}
.roster-tabs button span{font:800 12px/1 var(--body);color:#5f6682}
.roster-tabs button[aria-selected=true]{background:#ffdb70;color:#4d381c;box-shadow:inset 0 -5px 0 #e3a833}
.roster-tabs button[aria-selected=true] span{color:#77511b}
.roster-tabs button:hover:not([aria-selected=true]){background:#e3dcff;color:#4b3473}
.roster-tabs button:focus-visible{outline-offset:-5px}
.spotlight-portrait{background:radial-gradient(ellipse at center,#fff6bf 0%,#d4ecff80 48%,transparent 72%)}
.spotlight-portrait img{filter:drop-shadow(0 10px 7px #3e62702a)}
.spotlight-index{font:800 105px/1 var(--font);color:#c1ddef}
.allocation{background:#fffef8;border:2px solid #b0cbd9;border-radius:22px;box-shadow:0 5px 0 #d7e6ef}
.allocation h4{font:800 24px/1.15 var(--font);color:#234a61}
.allocation-heading>span{color:#79591e;font-size:10px;font-weight:900;letter-spacing:0}
.stat-row{font-size:13px;color:#476373;gap:7px 15px}
.stat-row strong{font-size:14px;color:#234a61;font-weight:900}
.stat-track{height:7px;background:#e1eaf0;border-radius:8px;overflow:hidden}
.stat-track i{border-radius:8px;background:#59a855}
.stat-row:nth-child(3n) .stat-track i{background:#7383dd}.stat-row:nth-child(3n + 1) .stat-track i{background:#eeae37}
.skill-preview{border:2px solid #a6c1d4;border-radius:20px;background:#fffef8;overflow:hidden;box-shadow:0 5px 0 #d7e6ef}
.skill-preview strong{font-size:10px;font-weight:900;color:#315c79;letter-spacing:1px}
.skill-preview p{font-size:13px;color:#425c69}
.video-start{font-family:var(--body);font-weight:900;font-size:14px;color:#fff9eb}
.video-start>span:first-child{background:#ffcf43;color:#244763;border:2px solid #fff4b6;box-shadow:0 4px 0 #85561b}
.video-start:hover>span:first-child{background:#ffe785}
.spotlight-guide>.eyebrow{font-size:11px;letter-spacing:1.1px;color:var(--purple)}
.spotlight-guide>h3{font:800 clamp(38px,3.8vw,54px)/1.04 var(--font);color:#244763;letter-spacing:-.5px}
.hero-strategy{color:#3c5c70;font-size:17px;font-weight:700}
.ability-block{border-left:4px solid #5aab60;padding-left:20px}
.ability-block.active{border-left-color:#9c75cc}
.ability-kind{font-size:10px;color:#257341;font-weight:900;letter-spacing:1px}
.active .ability-kind{color:#6b3faa}
.ability-block h4{font:800 30px/1.12 var(--font);color:#244763}
.ability-block p{font-size:15px;color:#425c69}
.cooldown{border:1px solid #d6bce5;background:#f3e9ff;color:#653792;font-size:12px;font-weight:900;border-radius:10px;padding:7px 11px}
.field-guide{border-top:2px solid #c2dbe7}
.field-guide>.eyebrow{font-size:11px;color:#266044;letter-spacing:1px}
.field-guide h5{font-family:var(--body);font-size:16px;font-weight:900;color:#244763}
.field-guide p{font-size:15px;color:#425c69}
.tactical-note{background:#fff5d6;border:2px solid #e0c88d;border-radius:18px}
.tactical-note>span{color:#80581a;font-size:10px;font-weight:900;letter-spacing:1px}
.tactical-note p{color:#4e5d60;font-size:14px}
.text-link{color:#176189;font-weight:900;font-size:14px;border-bottom:2px solid #7ca9bc;border-radius:0;letter-spacing:0}
.text-link:hover{color:#6b3faa;border-bottom-color:#6b3faa}
.balance-note{color:#526c7a;font-size:12px;border-color:#b7d0df}
.community-symbol{border:2px solid #b292d0;border-radius:16px;background:#eaddff;box-shadow:4px 4px 0 #d9cbeb}
.community-symbol svg{color:#70439e}
.community-section>p:not(.eyebrow):not(.discord-note){font-size:16px;color:#425c69}
.community-section h2{font-weight:800}
.discord-note{font-size:13px;color:#52675d}
.faq-section{border-color:#c1d3bc}
.faq-list details{border-color:#c1d3bc}
summary{font-size:16px;font-weight:900;color:#234a61;padding-block:24px}
summary span{color:#287845;font-size:24px}
details p{font-size:15px;color:#425c69}
.final-cta{background:#e0f1bb;border-block:2px solid #acd084}
.final-cta h2{font-weight:800;color:#244763}
footer{color:#425c69;background:#fff9eb}
footer .footer-brand{color:#285b41;font-size:15px;font-weight:900;letter-spacing:1px}
footer .footer-brand span{font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:3px}
footer>div{font-size:13px;font-weight:900}footer small{font-size:11px}
.screenshot-dialog{background:#fff9eb;color:#18364c;border:3px solid #8fb4c7;border-radius:20px;box-shadow:0 14px 60px #18364c55}
.screenshot-dialog::backdrop{background:#18364ce0}
.dialog-close{color:#234a61;background:#ffdc73;border:2px solid #85561b;border-radius:10px;font-weight:900}
.screenshot-dialog p{font-size:14px}
.toast{background:#fff9eb;color:#234a61;border:2px solid #b5c9ac;border-radius:16px;box-shadow:0 5px 0 #8ca582;font-size:14px}
@media(max-width:1050px){.desktop-nav{gap:17px;font-size:14px}.hero-new-art .hero-buttons .button{font-size:14px;padding:16px 18px}.roster-tabs button{font-size:13px}}
@media(max-width:760px){
 .button-small{font-size:12px;padding:10px 14px}.header-actions{gap:10px}
 .hero-new-art .art-shade{background:linear-gradient(0deg,#fff9eb,transparent 13%)}
 .hero-new-art .hero-content{padding:25px 6vw 38px}
 .hero-new-art h1{font-size:49px;letter-spacing:-.8px;line-height:1.04}
 .hero-new-art .eyebrow{font-size:10px;letter-spacing:1.5px}
 .hero-new-art .hero-game{font-size:11px;letter-spacing:.8px;margin-top:23px}
 .hero-new-art .hero-description{font-size:16px}
 .hero-new-art .hero-buttons{gap:12px}
 .hero-new-art .hero-buttons .button{font-size:14px;padding:16px 18px}
 .hero-new-art .hero-note{font-size:11px}
 .world-strip{font-size:10px;letter-spacing:.6px;gap:15px}
 .section-intro>p:last-child,.spotlight-intro>p{font-size:15px}
 h2{font-size:42px;letter-spacing:-.5px}
 .gameplay-gallery h3{font-size:27px}.gameplay-gallery figcaption p{font-size:14px}
 .gallery-open{border-radius:16px;padding:5px}.gallery-open img{border-radius:9px}.gallery-open>span{font-size:10px;padding:6px 8px;right:10px;bottom:10px}
 .world-details h3{font-size:27px}.world-details p{font-size:15px}
 .feature-number{top:25px}.world-details article{padding-left:42px}
 .hero-rule{padding:24px}.rule-number{border-right:0;border-bottom:2px solid #e5cb90;font-size:78px;gap:24px}
 .rule-number>span{font-size:11px}.hero-rule h3{font-size:29px}.hero-rule p{font-size:14px}
 .roster-tabs{border-radius:18px}.roster-tabs button{font-size:13px;min-height:69px;border-bottom-color:#c3d8e6}
 .roster-instruction{font-size:10px}.roster-tabs button span{font-size:10px}
 .spotlight-guide>h3{font-size:42px}.spotlight-guide>.eyebrow{font-size:10px}
 .hero-strategy{font-size:16px}.spotlight-index{font-size:86px}
 .allocation h4{font-size:24px}.allocation-heading>span{font-size:9px}
 .ability-block p,.field-guide p{font-size:15px}.ability-block h4{font-size:30px}.ability-kind{font-size:9px}
 .skill-preview p{font-size:13px}.skill-preview strong{font-size:10px}
 .tactical-note p{font-size:14px}.balance-note{font-size:12px}
 .community-section>p:not(.eyebrow):not(.discord-note){font-size:16px}
 .community-actions{gap:22px}.faq-section h2{font-size:42px}.final-cta h2{font-size:44px}
 footer>div{gap:14px;font-size:12px}footer .footer-brand{font-size:13px}
}
@media(max-width:380px){.hero-new-art h1{font-size:43px}.hero-new-art .hero-content{padding-inline:20px}.hero-new-art .hero-buttons .button{font-size:13px;padding:15px 16px}.hero-rule{padding:20px}.rule-number{font-size:68px;gap:18px}.allocation{padding:20px 17px}.allocation h4{font-size:21px}.spotlight-guide>h3{font-size:38px}.roster-tabs button{font-size:12px}.hero-new-art .hero-game{font-size:10px}.hero-new-art .hero-note{flex-wrap:wrap;gap:7px}}