:root{
  color-scheme:dark;
  --bg:#080D14;
  --surface:#101924;
  --surface2:#142230;
  --surface3:#192C3C;
  --line:#24394A;
  --line-hi:#38556A;
  --text:#FFFFFF;
  --soft:#DCE9F2;
  --muted:#A6B8C8;
  --violet:#29A8DF;
  --violet2:#0074B5;
  --amber:#29A8DF;
  --mint:#63D9B1;
  --rose:#F08088;
  --accent:#29A8DF;
  --accent-hover:#52BCEC;
  --accent-dark:#0074B5;
  --max:1440px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;min-width:320px;
  font:14px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:absolute;inset:0 0 auto;
  height:720px;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse at 78% 28%,#0B426329,transparent 45%),
    linear-gradient(90deg,#24506A14 1px,transparent 1px);
  background-size:auto,88px 88px;
}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.46;cursor:not-allowed}
a{color:inherit;text-decoration:none}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;
}
::selection{background:#145A83;color:white}
.wrap{width:min(calc(100% - 72px),var(--max));margin-inline:auto}
.skip{
  position:fixed;top:-70px;left:10px;z-index:200;
  background:var(--accent);color:#07131D;padding:12px 16px;
}
.skip:focus{top:10px}

/* Navigation / Official branding */
.nav{
  height:83px;position:sticky;top:0;z-index:60;
  background:#080D14F5;border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.nav-inner{display:flex;align-items:center;gap:26px;height:100%}
.brand{
  display:inline-flex;flex:none;align-items:center;
  max-width:100%;min-height:50px;position:relative;
}
.brand-logo{
  display:block;width:204px;height:49px;max-width:100%;
  object-fit:contain;object-position:left center;
  font-size:0;color:transparent;overflow:hidden;
}
.footer-brand .brand-logo{width:184px;height:46px}
.brand.logo-failed::before{
  content:"";display:block;width:38px;height:38px;
  border:1px solid var(--line-hi);border-radius:10px;
  background:#142230;
}
.brand.logo-failed .brand-logo{display:none}
.navlinks{display:flex;align-items:center;gap:30px;margin-left:auto}
.navlinks a{
  font-size:11px;letter-spacing:.08em;color:#A6B8C8;
  font-weight:760;white-space:nowrap;transition:color .2s;
}
.navlinks a:hover{color:var(--accent)}
.wallet{
  display:flex;align-items:center;gap:11px;margin-left:4px;
  border:1px solid #28516A;background:#112334;
  padding:8px 14px;border-radius:9px;min-width:124px;
}
.coin{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;border:1px solid #278ABB;
  background:#123F5B;color:#66CBF4;font-size:19px;
}
.wallet small{
  display:block;font-size:9px;letter-spacing:.14em;
  color:#A6B8C8;text-transform:uppercase;font-weight:780;
}
.wallet b{
  display:block;font-variant-numeric:tabular-nums;
  color:#66CBF4;font-size:17px;line-height:1.22;
}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 17px;
  border:1px solid var(--accent);border-radius:8px;
  background:var(--accent);color:#07131D;
  font-size:11px;font-weight:850;letter-spacing:.05em;
  white-space:nowrap;transition:background .2s,transform .2s;
}
.nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* Hero */
.hero{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:clamp(35px,5vw,88px);align-items:center;
  min-height:620px;padding-top:72px;padding-bottom:78px;
}
.hero-copy{max-width:770px}
.kicker,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;letter-spacing:.19em;
  font-weight:820;font-size:10px;color:var(--accent);
}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.hero h1{
  font-weight:810;font-size:clamp(39px,4.2vw,66px);
  line-height:1.12;letter-spacing:-.047em;
  max-width:770px;margin:22px 0 23px;
  color:#FFFFFF;overflow-wrap:normal;
}
.hero h1 .h1-accent{color:var(--accent)}
.hero h1 .brand-gradient{
  display:inline;color:var(--accent);
  background:none;-webkit-text-fill-color:currentColor;
}
.hero-desc{
  max-width:580px;font-size:15px;line-height:1.95;
  color:#B2C4D1;margin:0 0 29px;
}
.hero-desc strong{color:#FFFFFF;font-weight:760}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;justify-content:center;align-items:center;
  gap:12px;min-height:48px;padding:12px 21px;
  border:1px solid transparent;border-radius:8px;
  font-size:11px;letter-spacing:.065em;font-weight:900;
  transition:transform .18s,background .18s,border-color .18s;
}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn-main{
  color:#07131D;background:var(--accent);
  border-color:var(--accent);
}
.btn-main:hover:not(:disabled){background:var(--accent-hover)}
.btn-outline{
  background:#142230;color:#F0F7FC;border-color:#38556A;
}
.btn-outline:hover:not(:disabled){
  background:#1B3347;border-color:#4E7893;
}
.btn-quiet{
  background:#172838;border-color:#38556A;color:#E1EDF5;
}
.hero-foot{
  display:flex;flex-wrap:wrap;gap:17px 23px;
  margin-top:26px;color:#A6B8C8;font-size:11px;font-weight:650;
}
.hero-foot span{display:inline-flex;align-items:center;gap:7px}
.tick{font-weight:900;color:var(--mint)}

/* Banner */
.banner-wrap{
  position:relative;width:100%;max-width:522px;
  justify-self:end;aspect-ratio:1;padding:10px;
  border:1px solid #286184;background:#101D2B;
  border-radius:16px;box-shadow:0 30px 75px #0009;
}
.banner-stage{
  position:relative;width:100%;height:100%;
  overflow:hidden;border-radius:9px;
  background:
    repeating-linear-gradient(0deg,transparent 0 35px,#214054 36px),
    repeating-linear-gradient(90deg,transparent 0 35px,#214054 36px),
    #102334;
}
.banner-stage::before{
  content:"";position:absolute;z-index:0;
  width:76%;aspect-ratio:1;
  border:1px solid #286184;border-radius:50%;
  left:12%;top:12%;
  box-shadow:0 0 0 38px #29A8DF0D,0 0 0 76px #29A8DF08;
}
.banner-stage::after{
  content:"";position:absolute;left:50%;top:50%;
  width:60px;height:60px;border:1px solid #368BB7;
  transform:translate(-50%,-50%) rotate(45deg);z-index:0;
}
.banner-stage img{
  position:absolute;z-index:2;inset:0;
  width:100%;height:100%;display:block;object-fit:cover;
  font-size:0;color:transparent;
}
.banner-stage img.asset-failed{visibility:hidden}
.banner-stamp{
  position:absolute;z-index:3;bottom:-15px;left:-17px;
  border:1px solid #286184;border-radius:9px;
  padding:13px 17px;background:#101B27;
  box-shadow:0 15px 35px #0008;
}
.banner-stamp small{
  color:#92BFD7;font-size:9px;
  letter-spacing:.15em;font-weight:850;
}
.banner-stamp b{
  display:block;color:#FFFFFF;font-size:13px;
  letter-spacing:.04em;margin-top:2px;
}
.lightbead{display:none}

/* Feature ribbon */
.product-ribbon{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:11px;
  background:#101924;margin-bottom:87px;overflow:hidden;
}
.ribbon-item{
  display:flex;align-items:center;gap:14px;
  padding:17px 22px;min-width:0;
}
.ribbon-item:not(:last-child){border-right:1px solid var(--line)}
.ribbon-index{
  color:var(--accent);font-size:12px;
  font-weight:880;letter-spacing:.06em;
}
.ribbon-item strong{display:block;font-size:12px;letter-spacing:.02em}
.ribbon-item span:last-child{
  display:block;color:var(--muted);font-size:10px;
}

/* Command Center */
.section-title{
  display:flex;justify-content:space-between;
  align-items:end;gap:28px;margin-bottom:28px;
}
.section-title h2{
  font-size:clamp(27px,2.8vw,39px);
  font-weight:800;letter-spacing:-.038em;
  line-height:1.17;margin:10px 0 0;
}
.section-title h2 span{color:var(--accent)!important}
.section-title p{
  font-size:12px;color:var(--muted);
  max-width:380px;line-height:1.75;margin:0;
}
.arena-section{padding:0 0 100px}
.game-grid{
  display:grid;
  grid-template-columns:minmax(258px,.94fr) minmax(380px,1.7fr) minmax(258px,.94fr);
  gap:13px;align-items:start;
}
.panel{
  min-width:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
}
.battle-panel{
  background:#101D2B;border-color:#315B76;
}
.panel-top{
  display:flex;justify-content:space-between;
  align-items:center;gap:8px;
  padding:20px 19px 16px;border-bottom:1px solid var(--line);
}
.panel-top h3{
  font-size:16px;font-weight:800;
  letter-spacing:-.02em;margin:5px 0 0;
}
.panel-content{padding:20px 19px}
.small-label{
  color:#9FB5C5;font-size:9px;
  letter-spacing:.15em;font-weight:820;text-transform:uppercase;
}
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.stat-item{
  background:#152433;border:1px solid #294155;
  border-radius:9px;padding:11px 12px;
}
.stat-item span{
  color:#A6B8C8;display:block;
  font-size:9px;letter-spacing:.06em;
}
.stat-item b{
  font-size:16px;letter-spacing:-.02em;font-weight:780;
  font-variant-numeric:tabular-nums;display:block;margin-top:3px;
}
.stat-item b.emph{color:var(--accent)}
.subline{height:1px;background:var(--line);margin:20px 0}
.upgrade-list{display:grid;gap:7px}
.upgrade{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 10px 10px 12px;
  background:#152230;border:1px solid #294155;border-radius:9px;
}
.upgrade strong{display:block;font-size:11px;font-weight:750}
.upgrade small{
  display:block;font-size:9px;color:#A6B8C8;margin-top:1px;
}
.upgrade .ud{min-width:0}
.level{color:var(--accent);font-size:9px;white-space:nowrap}
.buy{
  flex:none;font-size:10px;font-weight:860;
  min-width:67px;border-radius:6px;
  border:1px solid #247CAB;background:#123D58;
  color:#87D8FB;padding:8px;
}
.buy:hover:not(:disabled){background:#155476}
.hint{
  margin-top:17px;padding:13px 14px;
  border:1px solid #285575;border-left:2px solid var(--accent);
  border-radius:5px;background:#112D40;
  color:#BFD6E6;font-size:11px;line-height:1.7;
}
.hint strong{color:var(--accent)}

/* Battle */
.battle-head{
  display:flex;justify-content:space-between;
  align-items:start;gap:8px;padding:23px 23px 17px;
}
.battle-head .stage{
  font-size:30px;font-weight:840;
  line-height:1.1;letter-spacing:-.04em;margin:6px 0;
}
.battle-head p{font-size:11px;color:#A6B8C8;margin:0}
.live-badge{
  font-size:9px;letter-spacing:.12em;font-weight:860;
  color:#C4D5E2;background:#1B3040;
  border:1px solid #37566C;border-radius:6px;padding:7px 10px;
}
.live-badge.running{
  color:#9FE6C9;border-color:#407B63;
  background:#18372D;animation:livepulse 1.8s infinite;
}
.live-badge.win{
  color:#78D5FF;border-color:#217FB0;background:#123D58;
}
.live-badge.loss{
  color:#F3A399;border-color:#965B54;background:#381F1D;
}
@keyframes livepulse{50%{box-shadow:0 0 15px #32B3EA30}}

.battleground{
  position:relative;display:flex;justify-content:space-around;
  align-items:center;gap:5px;min-height:292px;
  margin:0 13px;overflow:hidden;
  border:1px solid #315B76;border-radius:9px;
  background:#14283A;
}
.battleground::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,#39718B26 1px,transparent 1px),
    linear-gradient(90deg,#39718B26 1px,transparent 1px);
  background-size:32px 32px;
  transform:perspective(270px) rotateX(38deg) scale(1.4);
  opacity:.64;mask-image:linear-gradient(transparent,#000);
}
.battleground::after{
  content:"";position:absolute;bottom:13px;left:15%;
  width:70%;height:20px;background:#29A8DF20;
  filter:blur(20px);border-radius:100%;
}
.combatant{
  position:relative;z-index:1;
  width:42%;min-width:0;text-align:center;
}
.combatant .entity{
  position:relative;width:112px;height:112px;
  margin:0 auto 10px;display:grid;place-items:center;
  filter:drop-shadow(0 13px 14px #0009);
}
.combatant .entity::before{
  content:"";position:absolute;inset:10px;
  border:1px solid #4A94BA70;border-radius:20px;
  transform:rotate(45deg);background:#1C496530;
}
.combatant.enemy .entity::before{
  border-color:#BC6F7670;background:#673B4530;
}
.entity svg{width:100%;height:100%;overflow:visible}
.combatant .ename{
  font-size:11px;font-weight:800;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden;letter-spacing:.04em;
}
.combatant .health{
  height:7px;margin:12px 3px 5px;
  border:1px solid #31536B;background:#060D14;
  border-radius:99px;overflow:hidden;
}
.combatant .health>div{
  height:100%;width:100%;background:#63D9B1;
  transition:width .12s;
}
.combatant.enemy .health>div{background:#E37F86}
.hp-label{
  font-size:10px;color:#B8CFDD;
  font-variant-numeric:tabular-nums;
}
.versus{
  position:relative;z-index:1;color:#7FB5D5;
  font-size:12px;font-weight:850;letter-spacing:.14em;
}
.combatant.hit .entity{animation:shake .18s}
@keyframes shake{
  25%{transform:translateX(-8px)}
  75%{transform:translateX(7px)}
}
.floating-damage{
  position:absolute;z-index:5;top:30%;left:64%;
  font-size:20px;font-weight:940;color:#59C8F6;
  text-shadow:0 2px 5px #000;
  pointer-events:none;animation:rise .9s forwards;
}
.floating-damage.crit{font-size:26px;color:#FFFFFF}
@keyframes rise{
  to{opacity:0;transform:translateY(-60px) scale(1.1)}
}
.action-row{
  display:flex;gap:8px;padding:17px 23px 8px;align-items:center;
}
.action-row .btn-main{flex:1}
.action-row .btn{padding:12px 10px}
.speed-select{
  min-height:48px;min-width:65px;
  background:#1B3040;color:#EDF7FD;
  border:1px solid #42637B;border-radius:7px;
  padding:8px 7px;font-weight:780;
}
.status{
  padding:8px 23px 14px;font-size:11px;
  color:#A6B8C8;min-height:44px;
}
.overdrive-wrap{padding:0 23px 19px}
.overdrive-head{
  display:flex;justify-content:space-between;gap:8px;
  align-items:center;color:#B5C8D6;
  font-size:10px;font-weight:790;margin-bottom:9px;
}
.overdrive-head b{color:var(--accent)}
.chargebar{
  width:100%;height:6px;border-radius:99px;
  background:#233B4C;overflow:hidden;margin-bottom:10px;
}
.chargebar div{
  height:100%;background:var(--accent);transition:width .14s;
}
.overdrive-btn{
  width:100%;border:1px solid #286184;
  border-radius:7px;background:#15374E;padding:10px;
  color:#9DDAF5;font-weight:860;font-size:10px;
  letter-spacing:.04em;
}
.overdrive-btn.ready{
  color:#07131D;background:var(--accent);border-color:var(--accent);
}
.metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--line);background:#0C1722;
}
.metric{text-align:center;padding:16px 5px}
.metric:not(:last-child){border-right:1px solid var(--line)}
.metric span{
  display:block;font-size:9px;color:#9CB2C2;
  letter-spacing:.07em;text-transform:uppercase;font-weight:770;
}
.metric b{
  display:block;margin-top:4px;
  font-size:clamp(16px,2vw,22px);font-weight:840;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.telemetry{padding:19px 23px 23px}
.telemetry-heading{
  display:flex;justify-content:space-between;
  align-items:center;gap:10px;margin-bottom:12px;
}
.telemetry-heading h4{
  font-size:12px;letter-spacing:.02em;margin:0;
}
.telemetry-heading small{
  font-size:9px;letter-spacing:.09em;color:#9CB2C2;
}
.spark-frame{
  height:98px;border:1px solid #29465C;
  border-radius:7px;background:#0B1722;
  padding:9px;overflow:hidden;
}
.spark-frame svg{display:block;width:100%;height:100%}
.telemetry-legend{
  display:flex;gap:7px;align-items:center;
  margin-top:8px;color:#A6B8C8;font-size:10px;
}
.dot{
  height:6px;width:6px;flex:none;
  border-radius:50%;background:var(--accent);
}
.log{
  min-height:122px;max-height:150px;overflow:auto;
  border:1px solid #29465C;border-radius:7px;
  background:#0A1520;padding:10px 12px;
  color:#B8CCDA;
  font:10px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;
  scrollbar-width:thin;
}
.log div{border-bottom:1px solid #22394A;padding:1px 0}
.log .good{color:#80E0BD}
.log .bad{color:#F2A296}

/* Loadout */
.mod-list{display:grid;gap:8px}
.mod{
  display:flex;gap:10px;align-items:start;cursor:pointer;
  background:#152433;border:1px solid #29465C;
  padding:11px;border-radius:8px;
  transition:background .18s,border-color .18s;
}
.mod:hover{border-color:#378DBB}
.mod:has(input:checked){
  background:#16384F;border-color:#29A8DF;
}
.mod input{
  appearance:none;flex:none;width:17px;height:17px;
  border-radius:4px;background:#0C1925;
  border:1px solid #51758D;position:relative;
  margin:3px 0 0;cursor:pointer;
}
.mod input:checked{
  background:var(--accent);border-color:var(--accent);
}
.mod input:checked::after{
  content:"✓";position:absolute;top:-4px;left:3px;
  color:#07131D;font-size:14px;font-weight:900;
}
.mod:has(input:disabled){cursor:not-allowed;opacity:.65}
.mod .mod-content{min-width:0;flex:1}
.mod b{display:block;font-size:11px;font-weight:780}
.mod small{
  display:block;margin-top:3px;font-size:10px;
  line-height:1.65;color:#A6B8C8;
}
.mod-counter{
  font-size:10px;color:var(--accent);font-weight:870;
}
.full-button{
  width:100%;border:1px solid #38556A;
  border-radius:7px;background:#1B3040;
  padding:11px 12px;color:#E3EFF7;
  font-size:10px;letter-spacing:.05em;font-weight:860;
}
.full-button:hover:not(:disabled){background:#25475D}
.progress-list{display:grid;gap:12px}
.pr{
  display:flex;justify-content:space-between;gap:8px;font-size:11px;
}
.pr span{color:#A6B8C8}
.pr b{color:#FFFFFF;font-variant-numeric:tabular-nums}
.boss-strip{
  padding:13px 14px;border-radius:8px;
  border:1px solid #75505A;background:#281C29;margin-top:17px;
}
.boss-strip strong{
  font-size:10px;color:#F0A2AC;letter-spacing:.05em;
}
.boss-strip p{
  font-size:10px;color:#D0AEB5;line-height:1.75;margin:5px 0 0;
}
.side-actions{display:grid;gap:8px;margin-top:17px}
.diff-box{
  margin-top:17px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;border:1px solid #29465C;
  border-radius:8px;background:#152433;padding:10px;
}
.diff-box label{font-size:10px;font-weight:820}
.diff-box select{
  max-width:130px;border:1px solid #42637B;
  border-radius:5px;background:#213A4C;
  color:#EDF7FD;padding:7px;font-size:10px;
}

/* SEO / informational content */
.about{
  border-top:1px solid var(--line);
  background:#0C1520;padding:85px 0;
}
.about-grid{
  display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(35px,6vw,100px);align-items:start;
}
.about h2{
  font-size:clamp(34px,3.6vw,50px);
  letter-spacing:-.05em;line-height:1.09;margin:13px 0 28px;
}
.about h2 span{color:var(--accent)!important}
.about p{
  font-size:13px;line-height:2;color:#AEBFCC;margin:0 0 18px;
}
.about b{color:#FFFFFF}
.feature-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.feature{
  background:#142230;border:1px solid #294155;
  padding:22px;min-height:182px;border-radius:10px;
}
.feature-icon{
  color:var(--accent);font-size:24px;margin-bottom:17px;
}
.feature h3{
  font-size:14px;margin:0 0 7px;letter-spacing:-.01em;
}
.feature p{
  font-size:11px;line-height:1.75;color:#A6B8C8;margin:0;
}
.guide{padding:88px 0}
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;
}
.step{
  border:1px solid var(--line);border-radius:10px;
  padding:25px;background:#101924;
}
.step .stepno{
  font-size:29px;line-height:1;font-weight:850;
  color:var(--accent);letter-spacing:-.04em;
}
.step h3{font-size:15px;margin:19px 0 9px}
.step p{
  font-size:12px;color:#A6B8C8;margin:0;line-height:1.85;
}
.controls-guide{
  margin-top:14px;border:1px solid #29465C;
  border-left:3px solid var(--accent);
  border-radius:8px;background:#142230;
  padding:22px 25px;display:flex;
  align-items:center;justify-content:space-between;gap:25px;
}
.controls-guide h3{margin:9px 0 6px;font-size:17px}
.controls-guide p{
  font-size:12px;color:#A6B8C8;line-height:1.85;
  margin:0;max-width:870px;
}
.controls-guide strong{color:#FFFFFF}
.controls-guide>.btn{flex:none;white-space:nowrap}
.faq{padding:0 0 95px}
.faq-grid{
  display:grid;grid-template-columns:.65fr 1.35fr;gap:60px;
}
.faq h2{
  font-size:clamp(30px,3vw,44px);
  line-height:1.2;letter-spacing:-.04em;margin:12px 0;
}
.faq .faq-intro{font-size:12px;color:#A6B8C8}
.faq-list{display:grid;gap:9px}
.faq-list details{
  border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#121F2C;
}
.faq-list summary{
  list-style:none;display:flex;
  justify-content:space-between;align-items:center;
  gap:10px;cursor:pointer;font-size:12px;
  font-weight:800;padding:17px 18px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";color:var(--accent);font-size:18px;line-height:1;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{
  color:#A6B8C8;font-size:12px;
  line-height:1.9;padding:0 18px 18px;margin:0;
}
.footer{
  background:#080D14;border-top:1px solid var(--line);
  padding:34px 0 39px;
}
.footer-inner{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:24px;
}
.footer p{font-size:11px;color:#A6B8C8;margin:7px 0}
.disclaimer{
  display:block;max-width:720px;
  font-size:10px;line-height:1.8;
  color:#8FA6B8;margin-top:10px;
}
.footer-links{
  display:flex;gap:23px;color:#A6B8C8;
  font-weight:800;font-size:10px;letter-spacing:.06em;
}
.footer-links a:hover{color:var(--accent)}
.toast{
  position:fixed;z-index:100;bottom:20px;right:20px;
  max-width:min(90vw,380px);padding:13px 18px;
  border-radius:9px;border:1px solid #2988B8;
  background:#132838;box-shadow:0 17px 45px #0009;
  color:white;font-size:12px;opacity:0;
  transform:translateY(13px);pointer-events:none;
  transition:.2s;
}
.toast.show{transform:translateY(0);opacity:1}

/* Responsive */
@media(max-width:1260px){
  .navlinks{gap:17px}
  .nav-cta{display:none}
  .game-grid{grid-template-columns:280px minmax(0,1fr)}
  .battle-panel{grid-column:2;grid-row:1/span 2}
  .right-panel{grid-column:1;grid-row:2}
  .hero{gap:45px}
  .hero h1{font-size:clamp(37px,4vw,55px)}
}
@media(max-width:920px){
  .wrap{width:min(calc(100% - 40px),var(--max))}
  .navlinks{display:none}
  .wallet{margin-left:auto}
  .nav-cta{display:inline-flex}
  .hero{
    grid-template-columns:1fr;min-height:0;
    padding-top:64px;padding-bottom:60px;gap:44px;
  }
  .hero h1{
    max-width:780px;font-size:clamp(39px,5.7vw,60px);
  }
  .banner-wrap{justify-self:start;max-width:560px}
  .product-ribbon{margin-bottom:65px}
  .game-grid{grid-template-columns:1fr 1fr}
  .battle-panel{grid-column:1/-1;grid-row:1}
  .left-panel{grid-column:1;grid-row:2}
  .right-panel{grid-column:2;grid-row:2}
  .about-grid{grid-template-columns:1fr;gap:25px}
  .faq-grid{gap:30px}
}
@media(max-width:620px){
  .wrap{width:min(calc(100% - 30px),var(--max))}
  .nav{height:70px}
  .nav-inner{gap:8px}
  .brand-logo{width:142px;height:42px}
  .nav-cta{display:none}
  .wallet{min-width:95px;padding:6px 9px;gap:7px}
  .coin{width:26px;height:26px;font-size:15px}
  .wallet b{font-size:14px}
  .wallet small{font-size:8px}
  .hero{padding-top:40px;padding-bottom:48px;gap:34px}
  .hero h1{
    font-size:clamp(33px,8.5vw,48px);
    line-height:1.16;letter-spacing:-.042em;margin:17px 0;
  }
  .hero-desc{
    font-size:13px;line-height:1.9;margin-bottom:22px;
  }
  .hero-actions .btn{
    flex:1;min-height:45px;padding-inline:12px;font-size:10px;
  }
  .hero-foot{
    margin-top:20px;gap:10px 14px;font-size:10px;
  }
  .banner-wrap{max-width:430px;border-radius:12px;padding:7px}
  .banner-stage{border-radius:7px}
  .banner-stamp{
    left:-3px;bottom:-11px;padding:9px 12px;
  }
  .banner-stamp small{font-size:8px}
  .banner-stamp b{font-size:11px}
  .product-ribbon{grid-template-columns:1fr;margin-bottom:63px}
  .ribbon-item{padding:12px 17px}
  .ribbon-item:not(:last-child){
    border-right:0;border-bottom:1px solid var(--line);
  }
  .section-title{display:block}
  .section-title p{margin-top:11px}
  .arena-section{padding-bottom:69px}
  .game-grid{grid-template-columns:1fr}
  .battle-panel{grid-column:1;grid-row:1}
  .left-panel{grid-column:1;grid-row:2}
  .right-panel{grid-column:1;grid-row:3}
  .battle-head{padding:19px 15px 14px}
  .battleground{min-height:250px;margin:0 10px}
  .combatant .entity{width:83px;height:83px}
  .combatant .ename{font-size:10px}
  .action-row{padding:14px 12px 8px;gap:7px}
  .action-row .btn{padding:11px 8px;font-size:10px}
  .speed-select{min-width:53px;font-size:11px}
  .status{padding:8px 13px 13px}
  .overdrive-wrap{padding:0 13px 15px}
  .telemetry{padding:16px 13px}
  .about{padding:65px 0}
  .feature{min-height:170px;padding:17px}
  .guide{padding:65px 0}
  .steps{grid-template-columns:1fr}
  .controls-guide{
    flex-direction:column;align-items:flex-start;padding:19px;
  }
  .controls-guide>.btn{width:100%}
  .faq-grid{grid-template-columns:1fr;gap:20px}
  .faq{padding-bottom:65px}
  .footer-links{gap:14px}
}
@media(max-width:365px){
  .brand-logo{width:118px}
  .hero h1{font-size:32px}
  .action-row{flex-wrap:wrap}
  .action-row .btn-main{min-width:55%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}