:root{
  --void:#030814;
  --panel:#071230;
  --panel-2:#0a1a42;
  --panel-3:#0e2254;
  --line:rgba(120,175,255,.16);
  --line-strong:rgba(80,170,255,.34);
  --ice-100:#eaf8ff;
  --ice-300:#8fd4ff;
  --ice-500:#5ab8ff;
  --ice-700:#0b3aa8;
  --cyan:#3da9ff;
  --cyan-soft:rgba(61,169,255,.5);
  --crimson:#ff5a6e;
  --gold:#ffc65c;
  --fire-red:#4db4ff;
  --violet:#7a5cff;
  --text:#e8f2ff;
  --text-dim:#97a9c7;
  --radius:10px;
  --shadow-ice: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(0,0,0,.8);

  /* paleta azul flamejante */
  --bg-deep:#040a1c;
  --flame-600:#0b3aa8;
  --flame-500:#1e6bff;
  --flame-400:#3da9ff;
  --flame-200:#9be7ff;
  --flame-50:#eaf8ff;
  --glow:0 0 24px rgba(61,169,255,.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:500;
  overflow-x:hidden;
  position:relative;
}

/* ---------- background atmosphere ---------- */
.bg-fixed{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% -5%, rgba(61,169,255,.14), transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 10%, rgba(122,92,255,.10), transparent 55%),
    radial-gradient(ellipse 1300px 900px at 50% 105%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(3,8,20,.35) 0%, rgba(3,8,20,.12) 25%, rgba(3,8,20,.12) 65%, rgba(3,8,20,.60) 100%),
    url('imagens/background.png?v=20261003') center center / cover no-repeat fixed;
  background-color:var(--void);
}
.bg-fixed::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,190,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,190,255,.03) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent);
}
canvas#snow{position:fixed; inset:0; z-index:1; pointer-events:none;}

/* ---------- shared ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 20px; position:relative; z-index:2;}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); font-weight:600;
}
a{color:inherit; text-decoration:none;}
.glass{
  background:linear-gradient(180deg, rgba(13,22,48,.75), rgba(5,10,26,.85));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-ice);
}

/* ---------- top strip ---------- */
.topstrip{
  position:relative; z-index:5;
  background:#030814;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--text-dim);
  letter-spacing:.03em;
}
.topstrip .wrap{display:flex; justify-content:space-between; align-items:center; height:34px;}
.topstrip .socials{display:flex; gap:14px;}
.topstrip .socials a{color:var(--text-dim); transition:.2s; font-size:13px;}
.topstrip .socials a:hover{color:var(--cyan);}
.topstrip .clock{font-family:'Inter',sans-serif; color:var(--ice-300);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(4,10,28,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px; height:44px; border-radius:9px;
  background:conic-gradient(from 210deg, #031030, #3da9ff, #031030 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 22px rgba(61,169,255,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  font-family:'Inter',sans-serif; font-weight:900; color:#02102e; font-size:19px;
  flex-shrink:0;
}
.brand-name{font-family:'Inter',sans-serif; font-weight:700; font-size:19px; letter-spacing:.05em; color:var(--ice-100); line-height:1;}
.brand-name span{display:block; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.3em; color:var(--cyan); font-weight:600; margin-top:4px;}

nav.mainmenu{display:flex; align-items:center; gap:2px;}
.mainmenu > .navitem{position:relative;}
.mainmenu > .navitem > a{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; font-size:14.5px; font-weight:600; letter-spacing:.02em;
  color:var(--text); border-radius:7px; transition:.2s;
}
.mainmenu > .navitem > a i{color:var(--fire-red); font-size:13px;}
.mainmenu > .navitem > a:hover, .mainmenu > .navitem.active > a{color:var(--ice-100); background:rgba(61,169,255,.1);}
.mainmenu > .navitem.active > a{box-shadow:inset 0 -2px 0 var(--cyan);}

.hdr-actions{display:flex; align-items:center; gap:10px;}
.hdr-actions .btn-ghost i{color:var(--fire-red);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:7px; font-weight:700; font-size:13.5px;
  letter-spacing:.03em; text-transform:uppercase; cursor:pointer; border:1px solid transparent;
  transition:.2s; white-space:nowrap;
}
.btn-ghost{border-color:var(--line-strong); color:var(--ice-300);}
.btn-ghost:hover{border-color:var(--cyan); color:var(--ice-100); background:rgba(61,169,255,.07);}
.btn-primary{
  background:linear-gradient(180deg,#52b8ff 0%, #2f6bff 55%, #4b36d6 100%);
  border-color:rgba(160,220,255,.45);
  color:#fff;
  text-shadow:0 1px 0 rgba(0,20,90,.5);
  box-shadow:0 6px 18px -6px rgba(30,107,255,.55), inset 0 1px 0 rgba(200,235,255,.5), inset 0 -8px 12px -6px rgba(0,10,60,.45);
}
.btn-primary i{color:#fff;}
.btn-primary:hover{filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 8px 22px -6px rgba(30,107,255,.7), inset 0 1px 0 rgba(200,235,255,.55), inset 0 -8px 12px -6px rgba(0,10,60,.45);}
.burger{display:none; font-size:22px; color:var(--fire-red); background:none; border:none; cursor:pointer;}

/* ---------- hero (home) ---------- */
.hero{
  position:relative; z-index:2;
  padding:76px 0 60px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; left:50%; top:8%; width:1100px; height:520px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(61,169,255,.16), transparent 65%);
  pointer-events:none;
}
.hero .eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;}
.hero .eyebrow::before,.hero .eyebrow::after{content:""; width:34px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan));}
.hero .eyebrow::after{background:linear-gradient(90deg, var(--cyan), transparent);}

.hero h1{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(32px, 5vw, 64px); 
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:0 .28em;
  position:relative;
  opacity:0.82;
}

.hero h1 span{
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* "BORN" - Ouro/Metal ardente */
.hero h1 .born{
  background-image: linear-gradient(180deg, #ffffff 0%, #8fe3ff 35%, #3d7bff 75%, #6a3cff 100%);
  -webkit-text-stroke: 1px rgba(2,10,40,0.7);
  filter: drop-shadow(0 0 15px rgba(30, 107, 255, 0.7)) drop-shadow(0 0 30px rgba(155, 231, 255, 0.45));
}

/* "FOR" - Amarelo/Laranja incandescente */
.hero h1 .for{
  font-size:.42em;
  font-weight:700;
  letter-spacing:.5em;
  padding:0 .1em;
  background-image: linear-gradient(180deg, #fff3c9, #ffc65c);
  -webkit-text-stroke:0;
  text-shadow: 0 0 12px rgba(255, 198, 92, 0.8);
  align-self:center;
  opacity: 0.9;
}

/* "WAR" - Vermelho e Amarelo Flamejante com brilho pulsante */
.hero h1 .war{
  background-image: linear-gradient(180deg, #ffffff 0%, #7ff0ff 28%, #2f7bff 65%, #7a3cff 100%);
  background-size: 100% 200%;
  -webkit-text-stroke: 1.2px rgba(2, 8, 40, 0.85);
  animation: flameGlow 3s ease-in-out infinite alternate;
  filter: 
    drop-shadow(0 0 12px rgba(155, 231, 255, 0.6))
    drop-shadow(0 0 25px rgba(30, 107, 255, 0.7))
    drop-shadow(0 0 45px rgba(11, 58, 168, 0.55));
}

/* Animação suave do fogo */
@keyframes flameGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(155, 231, 255, 0.5)) drop-shadow(0 0 20px rgba(30, 107, 255, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(200, 240, 255, 0.8)) drop-shadow(0 0 35px rgba(30, 107, 255, 0.9));
  }
}

@media (max-width:640px){
  .hero h1{gap:0 .18em;}
  .hero h1 .for{letter-spacing:.35em;}
}

.hero .sub{
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.8);
  max-width:600px; margin:20px auto 0; font-size:16.5px; color:var(--text-dim); line-height:1.7; font-weight:500;
}
.hero .sub b{color:var(--ice-300); font-weight:700;}
.hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
.hero-ctas .btn{padding:14px 28px; font-size:14px;}

/* ---------- page hero (sub pages) ---------- */
.page-hero{position:relative; z-index:2; padding:clamp(90px, 16vh, 170px) 0 28px; text-align:center;}
.page-hero::before{
  content:""; position:absolute; left:50%; top:0; width:900px; height:340px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(61,169,255,.14), transparent 65%); pointer-events:none;
}
.page-hero h1{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(32px,5vw,50px);
  background:linear-gradient(180deg,#ffffff 10%, #bfe9ff 45%, #5aa8ff 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px rgba(2,10,40,.55);
  filter:drop-shadow(0 0 20px rgba(61,169,255,.45));
}
.page-hero p{max-width:560px; margin:14px auto 0; color:var(--text-dim); font-size:15px; line-height:1.7;}
.breadcrumb{display:flex; gap:8px; justify-content:center; align-items:center; font-size:12.5px; color:var(--text-dim); margin-bottom:16px;}
.breadcrumb a{color:var(--ice-500); font-weight:600;}
.breadcrumb i{font-size:9px;}

/* ---------- generic sections ---------- */
.section-head{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.section-head i{color:var(--cyan); font-size:18px;}
.section-head h2{font-family:'Inter',sans-serif; font-size:20px; letter-spacing:.04em; color:var(--ice-100); text-transform:uppercase;}
.section-head .line{flex:1; height:1px; background:linear-gradient(90deg, var(--line-strong), transparent);}

.content-pad{position:relative; z-index:2; padding:10px 0 70px;}

/* ---------- quick link cards (home) ---------- */
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.quick-card{padding:24px 20px; transition:.2s;}
.quick-card:hover{border-color:var(--line-strong); transform:translateY(-3px); background:linear-gradient(180deg, rgba(14,48,120,.6), rgba(5,10,26,.85));}
.quick-card i.qi{font-size:24px; color:var(--cyan); margin-bottom:14px; display:block;}
.quick-card h3{font-size:16.5px; color:var(--ice-100); font-weight:700; margin-bottom:6px;}
.quick-card p{font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:12px;}
.quick-card .go{font-size:12.5px; font-weight:700; color:var(--gold); display:inline-flex; align-items:center; gap:6px;}

/* ---------- info row (home) ---------- */
.info-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px;}
.card{padding:18px;}
.card h4{
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ice-300); margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.card h4 i{color:var(--cyan);}

.status-row{display:flex; align-items:center; gap:12px;}
.status-dot{width:12px; height:12px; border-radius:50%; background:#3fe36a; box-shadow:0 0 12px #3fe36a; flex-shrink:0; animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}
.status-text b{display:block; font-size:16px; color:var(--ice-100); font-weight:700;}
.status-text span{font-size:12px; color:var(--text-dim);}
.status-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.status-grid div{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:7px; padding:10px 12px;}
.status-grid .n{font-family:'Inter',sans-serif; font-weight:700; font-size:17px; color:var(--ice-100);}
.status-grid .l{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}

.rates-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.rates-row:last-child{border-bottom:none;}
.rates-row span:first-child{color:var(--text-dim); display:flex; align-items:center; gap:8px;}
.rates-row b{color:var(--gold); font-family:'Inter',sans-serif; font-size:14.5px;}

.chip-race{margin-bottom:14px;}
.chip-race:last-child{margin-bottom:0;}
.chip-top{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px;}
.chip-top .rname{display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ice-100);}
.chip-dot{width:9px; height:9px; border-radius:2px;}
.chip-icon{width:16px; height:16px; object-fit:contain; border-radius:3px; flex-shrink:0;}
.chip-bar{height:7px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden;}
.chip-fill{height:100%; border-radius:4px;}

.tabs{display:flex; gap:6px; margin-bottom:14px;}
.tabs button{
  flex:1; padding:8px 6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--text-dim); border-radius:6px; cursor:pointer; transition:.2s;
}
.tabs button.active{background:rgba(61,169,255,.14); border-color:var(--cyan); color:var(--cyan);}
.rank-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;}
.rank-row:last-child{border-bottom:none;}
.rank-no{width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:rgba(255,255,255,.06); color:var(--text-dim); flex-shrink:0;}
.rank-row:nth-child(1) .rank-no{background:linear-gradient(180deg,#ffe08a,#c98a1f); color:#2b1a00;}
.rank-row:nth-child(2) .rank-no{background:linear-gradient(180deg,#d9e8f2,#8fa8b8); color:#02102e;}
.rank-row:nth-child(3) .rank-no{background:linear-gradient(180deg,#e4a675,#8a4c1f); color:#2b1400;}
.rank-name{flex:1; color:var(--ice-100); font-weight:600;}
.rank-name small{display:block; color:var(--text-dim); font-weight:500; font-size:11px;}
.rank-val{font-family:'Inter',sans-serif; color:var(--gold); font-weight:700; font-size:12.5px;}

.social-btns{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.social-btns a{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px;
  border:1px solid var(--line); border-radius:8px; font-size:11px; font-weight:700; color:var(--text-dim); transition:.2s;
}
.social-btns a i{font-size:18px;}
.social-btns a:hover{border-color:var(--cyan); color:var(--ice-100); background:rgba(61,169,255,.08);}
.social-btns a.discord:hover i{color:#5865F2;}
.social-btns a.facebook:hover i{color:#1877F2;}
.social-btns a.instagram:hover i{color:#E1306C;}

.cta-band{
  margin-top:20px; padding:34px; text-align:center;
  background:linear-gradient(120deg, rgba(61,169,255,.1), rgba(5,10,26,.9));
}
.cta-band i{font-size:26px; color:var(--cyan); margin-bottom:10px;}
.cta-band h3{font-family:'Inter',sans-serif; font-size:22px; color:var(--ice-100); margin-bottom:8px; letter-spacing:.02em;}
.cta-band p{color:var(--text-dim); font-size:13.5px; margin-bottom:18px;}

/* ---------- guides layout ---------- */
.guides-layout{
  display:grid; 
  grid-template-columns:270px 1fr; 
  gap:26px; 
  align-items:start;
  position:relative;
  z-index:5;
}
.guide-toc{
  position:sticky; 
  top:98px; 
  padding:10px;
  z-index:20;
  pointer-events:auto;
}
.guide-toc a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:7px;
  font-size:13.5px; font-weight:600; color:var(--text-dim); transition:.18s;
  position:relative; z-index:2; cursor:pointer;
}
.guide-toc a i{width:16px; color:var(--ice-500); font-size:13px; pointer-events:none;}
.guide-toc a:hover{background:rgba(61,169,255,.08); color:var(--ice-100);}
.guide-toc a.active{background:rgba(61,169,255,.14); color:var(--cyan);}

.guide-section{scroll-margin-top:110px; padding:26px; margin-bottom:22px; position:relative; z-index:2;}
.guide-section h2{font-family:'Inter',sans-serif; font-size:21px; color:var(--ice-100); letter-spacing:.02em; display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.guide-section h2 i{color:var(--cyan); font-size:19px;}
.guide-section > p.desc{color:var(--text-dim); font-size:13.5px; margin-bottom:18px; line-height:1.7;}

table.info-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.info-table th{
  text-align:left; padding:10px 14px; background:rgba(61,169,255,.08); color:var(--ice-300);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  border-bottom:1px solid var(--line-strong);
}
table.info-table td{padding:11px 14px; border-bottom:1px solid var(--line); color:var(--text);}
table.info-table tr:last-child td{border-bottom:none;}
table.info-table tr:hover td{background:rgba(255,255,255,.02);}
.pill{display:inline-block; padding:2px 9px; border-radius:5px; font-size:11px; font-weight:700; letter-spacing:.03em;}
.pill-gold{background:rgba(255,198,92,.15); color:var(--gold);}
.pill-cyan{background:rgba(61,169,255,.15); color:var(--cyan);}
.pill-crimson{background:rgba(255,90,110,.15); color:var(--crimson);}
.pill-green{background:rgba(63,227,106,.15); color:#5fe38a;}

.rule-list{list-style:none;}
.rule-list li{
  display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.6;
}
.rule-list li:last-child{border-bottom:none;}
.rule-list .rn{
  width:26px; height:26px; border-radius:7px; background:rgba(61,169,255,.12); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0;
}
.rule-list b{color:var(--ice-100);}

.combo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.combo-item{
  display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02);
}
.combo-icon{width:42px; height:42px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#02102e; font-size:17px;}
.combo-item h5{font-size:13.5px; color:var(--ice-100); font-weight:700; margin-bottom:3px;}
.combo-item span{font-size:12px; color:var(--text-dim);}

.callout{
  display:flex; gap:14px; padding:16px 18px; border-radius:9px; border:1px solid var(--line-strong);
  background:rgba(61,169,255,.06); margin-top:16px; font-size:13px; color:var(--text-dim); line-height:1.7;
}
.callout i{color:var(--cyan); font-size:17px; margin-top:2px;}
.callout.warn{background:rgba(255,90,110,.07); border-color:rgba(255,90,110,.4);}
.callout.warn i{color:var(--crimson);}

/* ---------- steps ---------- */
.steps{counter-reset:step;}
.step{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step-no{
  counter-increment:step; flex-shrink:0; width:38px; height:38px; border-radius:9px;
  background:linear-gradient(180deg,#52b8ff,#4b36d6); color:#fff; font-family:'Inter',sans-serif;
  font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.step-no::before{content: counter(step);}
.step-body h5{font-size:15.5px; color:var(--ice-100); font-weight:700; margin-bottom:5px;}
.step-body p{font-size:13.5px; color:var(--text-dim); line-height:1.7;}

/* ---------- download page ---------- */
.dl-hero{padding:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.dl-hero .left{flex:1; min-width:240px;}
.dl-hero h3{font-family:'Inter',sans-serif; font-size:22px; color:var(--ice-100); margin-bottom:8px;}
.dl-hero p{color:var(--text-dim); font-size:13.5px; max-width:420px; line-height:1.7;}
.dl-meta{display:flex; gap:18px; margin-top:14px; flex-wrap:wrap;}
.dl-meta span{font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:7px;}
.dl-meta span i{color:var(--cyan);}
.dl-buttons{display:flex; flex-direction:column; gap:10px; min-width:220px;}
.dl-buttons .btn{width:100%; justify-content:center; padding:14px 20px;}

.req-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.req-col h5{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-300); margin-bottom:12px;}

/* ---------- topup / pricing ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.price-card{padding:22px 18px; text-align:center; position:relative; transition:.2s;}
.price-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.price-card.best{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 18px 40px -18px rgba(61,169,255,.5);}
.price-card .badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#ffe08a,#c98a1f); color:#2b1a00; font-size:10px; font-weight:800;
  padding:4px 12px; border-radius:20px; letter-spacing:.06em; text-transform:uppercase;
}
.price-card .coin-icon{font-size:26px; color:var(--cyan); margin-bottom:10px;}
.price-card h4{font-size:15px; color:var(--ice-100); font-weight:700; margin-bottom:4px;}
.price-card .amt{font-family:'Inter',sans-serif; font-size:24px; color:var(--gold); font-weight:700; margin:10px 0;}
.price-card .amt span{font-size:12px; color:var(--text-dim); font-weight:500; display:block;}
.price-card .btn{width:100%; justify-content:center; margin-top:14px;}

.pay-methods{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px;}
.pay-methods div{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; color:var(--text-dim); font-weight:600;
}
.pay-methods i{color:var(--cyan); font-size:16px;}

/* ---------- community page ---------- */
.social-hero-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.social-hero-card{padding:26px; text-align:center; transition:.2s;}
.social-hero-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.social-hero-card i{font-size:34px; margin-bottom:14px;}
.social-hero-card.discord i{color:#5865F2;}
.social-hero-card.facebook i{color:#1877F2;}
.social-hero-card.instagram i{color:#E1306C;}
.social-hero-card h4{font-size:16.5px; color:var(--ice-100); font-weight:700; margin-bottom:6px;}
.social-hero-card p{font-size:13px; color:var(--text-dim); margin-bottom:16px; line-height:1.6;}
.social-hero-card .btn{width:100%; justify-content:center;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.contact-info-list{display:flex; flex-direction:column; gap:14px;}
.contact-info-item{display:flex; gap:14px; padding:16px; border:1px solid var(--line); border-radius:9px; align-items:center;}
.contact-info-item i{width:38px; height:38px; border-radius:9px; background:rgba(61,169,255,.12); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.contact-info-item h5{font-size:13.5px; color:var(--ice-100); font-weight:700;}
.contact-info-item span{font-size:12.5px; color:var(--text-dim);}

.form-field{margin-bottom:14px;}
.form-field label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ice-300); margin-bottom:7px; font-weight:700;}
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px;
  color:var(--ice-100); font-family:'Inter',sans-serif; font-size:14px; font-weight:500; outline:none; transition:.2s;
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--cyan); background:rgba(61,169,255,.05);}
.form-field textarea{resize:vertical; min-height:110px;}

/* ---------- footer ---------- */
footer{position:relative; z-index:2; border-top:1px solid var(--line); background:rgba(3,8,22,.7); padding:50px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px;}
.foot-brand p{font-size:13px; color:var(--text-dim); margin-top:14px; line-height:1.7; max-width:280px;}
.foot-col h5{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice-300); margin-bottom:14px;}
.foot-col a{display:block; font-size:13.5px; color:var(--text-dim); padding:6px 0; transition:.2s;}
.foot-col a:hover{color:var(--cyan); transform:translateX(3px);}
.foot-bottom{
  border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.foot-bottom p{font-size:11.5px; color:var(--text-dim); line-height:1.7; max-width:640px;}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:.2s;}
.foot-social a:hover{color:#02102e; background:var(--cyan); border-color:var(--cyan);}

/* ---------- music player ---------- */
.music-player{
  position:fixed; left:20px; bottom:20px; z-index:60;
  display:flex; align-items:center; gap:7px;
  padding:6px 12px 6px 6px;
  background:linear-gradient(180deg, rgba(13,22,48,.7), rgba(5,10,26,.78));
  border:1px solid var(--line);
  border-radius:40px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  opacity:.55;
  transition:opacity .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.music-player:hover,
.music-player:focus-within,
.music-player.expanded{
  opacity:1;
  background:linear-gradient(180deg, rgba(13,22,48,.88), rgba(5,10,26,.94));
  border-color:var(--line-strong);
  box-shadow:var(--shadow-ice);
}
.mp-btn{
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#52b8ff,#4b36d6); color:#fff; font-size:11px;
  transition:.2s; flex-shrink:0;
}
.mp-btn:hover{filter:brightness(1.1); transform:translateY(-1px);}
.mp-btn.playing{animation:mp-pulse 2s ease-in-out infinite;}
@keyframes mp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(61,169,255,.45);}
  50%{box-shadow:0 0 0 6px rgba(61,169,255,0);}
}
.mp-mute{
  width:22px; height:22px; background:transparent; color:var(--ice-300);
  border:1px solid var(--line-strong); font-size:10px;
}
.mp-mute:hover{color:var(--cyan); border-color:var(--cyan); background:rgba(61,169,255,.08); transform:none;}

.mp-vol, .mp-label{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .3s ease, opacity .2s ease, margin-left .3s ease;
}
.music-player:hover .mp-vol, .music-player:focus-within .mp-vol, .music-player.expanded .mp-vol{
  max-width:100px; opacity:1; margin-left:2px;
}
.music-player:hover .mp-label, .music-player:focus-within .mp-label, .music-player.expanded .mp-label{
  max-width:130px; opacity:1; margin-left:2px;
}
.mp-vol{display:flex; align-items:center; gap:6px;}
.mp-slider{
  -webkit-appearance:none; appearance:none;
  width:56px; height:3px; border-radius:2px;
  background:rgba(100,180,255,.25); outline:none; cursor:pointer;
}
.mp-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--cyan); cursor:pointer;
  box-shadow:0 0 6px rgba(61,169,255,.75);
}
.mp-slider::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%; border:none;
  background:var(--cyan); cursor:pointer;
  box-shadow:0 0 6px rgba(61,169,255,.75);
}
.mp-label{
  font-family:'Inter',sans-serif;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim);
}
.mp-label i{color:var(--cyan); margin-right:5px;}

/* ---------- banner carousel ---------- */
.carousel{
  position:relative;
  width:100%; max-width:920px;
  margin:14px auto 0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow-ice);
  background:var(--panel);
  aspect-ratio:2172/525;
}
.carousel-track{
  display:flex; width:100%; height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.carousel-slide{flex:0 0 100%; width:100%; height:100%;}
.carousel-slide img{display:block; width:100%; height:100%; object-fit:cover;}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(4,10,28,.55); backdrop-filter:blur(6px);
  color:var(--ice-100); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s; z-index:4; font-size:13px;
}
.carousel-arrow:hover{background:rgba(61,169,255,.28); border-color:var(--cyan); color:#fff;}
.carousel-arrow.prev{left:14px;}
.carousel-arrow.next{right:14px;}
.carousel-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:4;
  display:flex; justify-content:center; gap:8px;
}
.carousel-dot{
  width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.25); cursor:pointer; padding:0; transition:.2s; flex-shrink:0;
}
.carousel-dot.active{background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(61,169,255,.7); width:22px; border-radius:5px;}
@media (max-width:640px){
  .carousel{border-radius:8px;}
  .carousel-arrow{width:30px; height:30px; font-size:11px;}
  .carousel-arrow.prev{left:8px;} .carousel-arrow.next{right:8px;}
  .carousel-dots{bottom:9px;}
}

/* ---------- prevent font-swap layout jump (FOUT) ---------- */
html.fonts-loading body{opacity:0;}
body{transition:opacity .2s ease;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .mainmenu, .hdr-actions .btn-ghost{display:none;}
  .burger{display:block;}
  .quick-grid{grid-template-columns:1fr 1fr;}
  .info-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .guides-layout{grid-template-columns:1fr;}
  .guide-toc{position:relative; top:0; display:flex; flex-wrap:wrap; gap:6px; padding:10px;}
  .guide-toc a{padding:9px 12px;}
  .req-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr 1fr;}
  .social-hero-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .music-player{left:12px; bottom:12px; padding:6px; gap:0;}
  .music-player .mp-vol, .music-player .mp-label{display:none;}
  .music-player.expanded{border-radius:40px; padding:8px 14px 8px 8px; gap:7px;}
  .music-player.expanded .mp-vol{display:flex; max-width:100px; opacity:1;}
  .music-player.expanded .mp-label{display:block; max-width:130px; opacity:1;}
}
@media (max-width:560px){
  .quick-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .combo-grid{grid-template-columns:1fr;}
  .dl-hero{flex-direction:column; align-items:stretch;}
  .foot-grid{grid-template-columns:1fr;}
}

/* ---------- modal / news pop-up ---------- */
.news-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2, 6, 18, 0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.news-modal-content{
  position:relative;
  width:100%;
  max-width:680px;
  max-height:85vh;
  overflow-y:auto;
  padding:30px;
  background:linear-gradient(180deg, rgba(8,22,58,.95), rgba(3,10,28,.98));
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 0 30px rgba(61,169,255,.25), var(--shadow-ice);
  color:var(--text);
}

.news-modal-close{
  position:absolute;
  top:16px;
  right:18px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--text-dim);
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.news-modal-close:hover{
  background:rgba(61,169,255,.2);
  border-color:var(--cyan);
  color:var(--ice-100);
}

.modal-title{
  font-family:'Inter',sans-serif;
  font-size:20px;
  color:var(--ice-100);
  margin-bottom:12px;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:10px;
}

.modal-title i{
  color:var(--cyan);
  font-size:18px;
}

.modal-body{
  font-size:14px;
  line-height:1.7;
  color:var(--text-dim);
}

.modal-body p{
  margin-bottom:12px;
}

.modal-body b{
  color:var(--ice-300);
}

/* ---------- imagem dentro do modal de novidades ---------- */
.modal-img-box{
  width:100%;
  margin:6px 0 16px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7);
  background:rgba(255,255,255,.02);
}
.modal-img-box img{
  display:block;
  width:100%;
  height:auto;
  max-height:340px;
  object-fit:cover;
}

/* ---------- vídeo dentro do modal de novidades ---------- */
.modal-video-box{
  width:100%;
  margin:6px 0 16px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7);
  background:#000;
}
.modal-video-box video{
  display:block;
  width:100%;
  height:auto;
  max-height:380px;
  background:#000;
}


/* ---------- detalhes ---------- */
::selection{background:var(--flame-500); color:#fff;}
html{scrollbar-color:var(--flame-500) #040a1c;}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:#040a1c;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--flame-400), var(--flame-600)); border-radius:6px;}

/* ---------- hero sem texto: libera o fundo (logo) ---------- */
.hero-clear{
  min-height:0;
  padding:10px 0 40px;
  display:flex; align-items:center; justify-content:center;
}
.hero-clear::before{display:none;}
.hero-clear .wrap{width:100%; display:flex; flex-direction:column; align-items:center;}
.hero-logo{
  display:block; width:min(360px, 70vw); height:auto; margin:0 auto 18px;
  filter:drop-shadow(0 0 26px rgba(61,169,255,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.hero-clear .hero-ctas{margin-top:0;}

/* =====================================================
   VERSAO MOBILE
   ===================================================== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{overflow-x:hidden;}
img{max-width:100%;}

/* ---------- tablet e celular (menu hamburguer) ---------- */
@media (max-width:960px){
  .nav{height:64px; gap:12px;}
  .nav > div[aria-hidden="true"]{display:none;}
  .nav .brand{display:none;}
  .hdr-actions{margin-left:auto;}
  .burger{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px;
    border:1px solid var(--line-strong); background:rgba(61,169,255,.08);
    color:var(--ice-100); font-size:20px;
  }
  .burger.is-open{background:rgba(61,169,255,.2); border-color:var(--cyan);}

  /* menu em tela cheia abaixo do cabecalho */
  nav.mainmenu{
    display:none; position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:12px 14px 16px;
    background:rgba(3,8,22,.98); border-bottom:1px solid var(--line-strong);
    box-shadow:0 20px 40px rgba(0,0,0,.6);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  nav.mainmenu.open{display:flex !important; animation:menuIn .18s ease;}
  .mainmenu > .navitem > a{
    padding:14px 16px; font-size:15px; border-radius:10px; min-height:48px;
    display:flex; align-items:center; gap:12px;
  }
  .mainmenu > .navitem > a i{width:22px; text-align:center; font-size:16px;}
  .mainmenu > .navitem.active > a{box-shadow:none; background:rgba(61,169,255,.16); border-left:3px solid var(--cyan);}
}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* ---------- celular ---------- */
@media (max-width:640px){
  .wrap{padding:0 14px;}
  .hdr-actions .btn-primary{padding:10px 14px; font-size:13px; min-height:44px;}

  /* banner: proporcao maior para o texto ficar legivel */
  .carousel{max-width:100%; margin-top:10px;}
  .carousel{aspect-ratio:5/2;}
  .carousel-slide img{object-position:62% center;}

  /* inicio */
  .hero-clear{padding:6px 0 28px;}
  .hero-logo{width:min(250px, 62vw); margin-bottom:16px;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:10px; padding:0 6px;}
  .hero-ctas .btn{width:100%; justify-content:center; padding:15px 20px; min-height:48px;}

  /* paginas internas */
  .page-hero{padding:34px 0 18px;}
  .page-hero h1{font-size:clamp(28px, 9vw, 38px);}
  .page-hero p{font-size:14px; padding:0 4px;}
  .breadcrumb{font-size:12px; justify-content:center; flex-wrap:wrap;}
  .content-pad{padding-top:6px;}

  .section-head{gap:8px; margin:26px 0 14px;}
  .section-head h2{font-size:15px;}
  .section-head i{font-size:15px;}

  .glass, .guide-section{border-radius:12px;}
  .guide-section{padding:16px; margin-bottom:16px;}
  .quick-card{padding:18px;}
  .card{padding:18px;}

  /* botoes maiores para o toque */
  .btn{min-height:46px;}
  .dl-hero{padding:18px;}
  .dl-hero h3{font-size:18px;}
  .dl-meta{flex-direction:column; align-items:flex-start; gap:8px;}
  .price-card .btn, .social-hero-card .btn, .dl-buttons .btn{min-height:48px;}

  /* tabelas e abas com rolagem lateral */
  .guide-section{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.info-table{font-size:12.5px;}
  table.info-table th, table.info-table td{padding:9px 10px;}
  .tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .tabs button{white-space:nowrap; flex:0 0 auto; min-height:42px;}
  .guide-toc{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .guide-toc::-webkit-scrollbar{display:none;}
  .guide-toc a{white-space:nowrap; flex:0 0 auto;}

  /* rodape */
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:12px;}
  .foot-social a{width:42px; height:42px;}

  /* pop-up de novidades */
  .news-modal{padding:10px;}
  .news-modal-content{padding:18px 16px; max-height:90vh; border-radius:12px;}
  .news-modal-close{top:10px; right:10px; width:40px; height:40px;}

  /* desempenho: fundo sem 'fixed' (iOS) e sem blur pesado */
  .bg-fixed{background-attachment:scroll;}
  .glass{backdrop-filter:none; -webkit-backdrop-filter:none;}
  header{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(4,10,28,.96);}
}

/* ---------- celular pequeno ---------- */
@media (max-width:380px){
  .hdr-actions .btn-primary{padding:10px 12px;}
  .hero-logo{width:min(220px, 60vw);}
  .quick-card h3{font-size:16px;}
}

/* ---------- toque: sem efeitos de hover pegajosos ---------- */
@media (hover:none){
  .quick-card:hover, .card:hover, .price-card:hover{transform:none;}
}


/* ---------- Ranking de kills / lider do chip ---------- */
.rank-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.rank-row:last-child{border-bottom:none;}
.rank-pos{width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.06); color:var(--ice-100); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.rank-row:nth-child(1) .rank-pos{background:var(--gold); color:#1a1200;}
.rank-name{flex:1; min-width:0; color:var(--ice-100); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank-name small{display:block; font-weight:500; font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;}
.rank-row b{color:var(--gold); font-family:'Inter',sans-serif; font-size:14.5px;}
.rank-empty{color:var(--text-dim); font-size:13px; padding:14px 0; text-align:center;}
.chip-leader{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin:-4px 0 12px;}
.chip-crown{color:var(--gold); font-size:11px; margin-left:2px;}

.h4-sub{font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-left:6px;}
.chip-crown[hidden]{display:none;}

/* Top Kill em tabela */
.rank-table{width:100%; border-collapse:collapse; font-size:13px;}
.rank-table th{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); text-align:right; padding:0 0 8px; border-bottom:1px solid var(--line);}
.rank-table th:nth-child(1), .rank-table th:nth-child(2){text-align:left;}
.rank-table td{padding:7px 0; border-bottom:1px dashed var(--line); text-align:right; color:var(--ice-100);}
.rank-table tr:last-child td{border-bottom:none;}
.rank-table .rk-pos{width:26px; text-align:left; color:var(--text-dim); font-weight:700;}
.rank-table tbody tr:nth-child(1) .rk-pos{color:var(--gold);}
.rank-table .rk-name{text-align:left; font-weight:700; max-width:150px;}
.rank-table .rk-name span{vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:110px;}
.rank-table .rk-name img{vertical-align:middle; margin-right:4px;}
.rank-table .rk-kill{color:var(--gold); font-weight:800; font-family:'Inter',sans-serif; width:46px;}
.rank-table .rk-death{color:var(--text-dim); width:46px;}

/* Resultado da Chip War */
.chip-result{margin-top:16px; padding-top:12px; border-top:1px dashed var(--line); font-size:13px;}
.chip-result .cr-row{display:flex; gap:6px; padding:3px 0;}
.chip-result .cr-row span{color:var(--text-dim);}
.chip-result b{color:var(--ice-100); font-weight:700;}
.chip-result .cr-win{color:#5be08a;}
.chip-result .cr-lose{color:#ff6b7d;}
.chip-result b.cb-failed{color:#ff6b7d; font-style:italic;}

/* faixa de imagem no topo dos cards (titulo dentro da imagem) */
.card:has(> .card-banner){overflow:hidden;}
.card-banner{
  margin:-18px -18px 0;
  height:52px;
  background:url('imagens/card-top.png?v=20261013') center/cover no-repeat;
  border-bottom:1px solid rgba(90,170,255,.25);
}
.card-banner + h4{
  position:relative; z-index:1;
  margin:-52px -18px 18px; height:52px; padding:0 18px;
  align-items:center; color:#fff; font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8);
}
.card-banner + h4 i{color:var(--cyan); filter:drop-shadow(0 0 4px rgba(0,0,0,.9));}

/* titulo em imagem (Ranking de Kills) */
.card-banner + h4.h4-img{justify-content:center;}
.h4-img img{height:34px; width:auto; max-width:100%; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.8));}

/* jogadores online por raca */
.race-online{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;}
.race-online .ro-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:7px; padding:10px 6px;
}
.race-online img{width:24px; height:24px; display:block;}
.race-online b{font-family:'Inter',sans-serif; font-size:17px; font-weight:700; color:var(--ice-100); line-height:1.1;}
.race-online span{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}

/* quadrado: numero de jogadores + "Online" */
.online-line{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:16px; padding:14px 16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:7px;
}
.online-line i{color:var(--cyan); font-size:18px;}
.online-line .ol-num{font-family:'Inter',sans-serif; font-size:24px; font-weight:700; color:var(--ice-100); line-height:1;}
.online-line .ol-label{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice-300);}
.status-text span:empty{display:none;}

/* imagens individuais das faixas */
.card-banner.cb1{background-image:url('imagens/card-top-1.png?v=20261022');}
.card-banner.cb2{background-image:url('imagens/card-top-2.png?v=20261022');}
.card-banner.cb3{background-image:url('imagens/card-top-3.png?v=20261022');}

/* relogio da Chip War */
.cw-clock{margin-top:16px;}
.cw-title{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.cw-title span{font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ice-100); white-space:nowrap;}
.cw-title::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--ice-300), transparent); opacity:.6;}
.cw-row{display:flex; justify-content:space-between; align-items:center; padding:4px 8px; font-size:13px;}
.cw-row span{color:var(--ice-300);}
.cw-row b{font-variant-numeric:tabular-nums; color:var(--ice-100); font-weight:600;}

/* Status do Servidor: mais respiro, preenche o painel */
.card:has(.online-line){display:flex; flex-direction:column;}
.card:has(.online-line) .status-row{margin-top:6px; margin-bottom:6px; gap:14px;}
.card:has(.online-line) .status-text b{font-size:20px;}
.card:has(.online-line) .status-dot{width:14px; height:14px;}
.online-line{margin-top:22px; padding:22px 16px; gap:14px;}
.online-line i{font-size:24px;}
.online-line .ol-num{font-size:34px;}
.online-line .ol-label{font-size:14px;}
.race-online{flex:1; gap:12px; margin-top:16px; align-items:stretch;}
.race-online .ro-item{justify-content:center; gap:8px; padding:18px 6px;}
.race-online img{width:24px; height:24px;}
.race-online b{font-size:26px;}
.race-online span{font-size:11.5px;}


/* Pacote Diamante (destaque do Top Up) */
.dia-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; margin-bottom:22px; overflow:hidden; border-color:var(--line-strong); box-shadow:0 0 34px rgba(61,169,255,.16);}
.dia-img{position:relative; min-height:300px;}
.dia-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.dia-img::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 60%, rgba(7,18,48,.85));}
.dia-info{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:30px 32px;}
.dia-badge{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#ffd37a; border:1px solid rgba(255,211,122,.4); border-radius:20px; padding:4px 12px; background:rgba(255,211,122,.08);}
.dia-info h3{font-family:'Inter',sans-serif; font-size:28px; color:var(--ice-100); line-height:1.15;}
.dia-info p{color:var(--text-dim); font-size:14px; line-height:1.7; max-width:46ch;}
.dia-info .btn{margin-top:6px;}
@media (max-width:760px){
  .dia-card{grid-template-columns:1fr;}
  .dia-img{min-height:0; aspect-ratio:1/1;}
  .dia-img::after{background:linear-gradient(180deg, transparent 65%, rgba(7,18,48,.85));}
  .dia-info{padding:22px 20px;}
  .dia-info h3{font-size:24px;}
}

/* Pacote Prata: imagem do lado direito */
.dia-card.rev .dia-img{order:2;}
.dia-card.rev .dia-img::after{background:linear-gradient(270deg, transparent 60%, rgba(7,18,48,.85));}
.dia-card.prata{box-shadow:0 0 34px rgba(190,205,230,.14);}
.dia-card.prata .dia-badge{color:#dfe8f7; border-color:rgba(223,232,247,.4); background:rgba(223,232,247,.08);}
@media (max-width:760px){
  .dia-card.rev .dia-img{order:0;}
  .dia-card.rev .dia-img::after{background:linear-gradient(180deg, transparent 65%, rgba(7,18,48,.85));}
}

/* Pacote Bronze */
.dia-card.bronze{box-shadow:0 0 34px rgba(230,140,70,.16);}
.dia-card.bronze .dia-badge{color:#ffb27a; border-color:rgba(255,178,122,.4); background:rgba(255,178,122,.08);}

/* Pacotes: versao compacta (menor altura) */
.dia-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); margin-bottom:16px;}
.dia-img{min-height:0; height:190px;}
.dia-img img{object-position:center 62%;}
.dia-info{gap:8px; padding:18px 28px;}
.dia-info h3{font-size:22px;}
.dia-info p{font-size:13px; line-height:1.55;}
.dia-badge{font-size:10px; padding:3px 10px;}
.dia-info .btn{margin-top:2px; padding-top:8px; padding-bottom:8px;}
@media (max-width:760px){
  .dia-card{grid-template-columns:1fr;}
  .dia-img{height:170px; aspect-ratio:auto;}
  .dia-info{padding:16px 18px;}
  .dia-info h3{font-size:20px;}
}

/* Pacotes: largura menor, centralizados */
.dia-card{max-width:720px; margin-left:auto; margin-right:auto; grid-template-columns:240px minmax(0,1fr);}
.dia-card.rev{grid-template-columns:minmax(0,1fr) 240px;}
.dia-info{padding:18px 24px;}
@media (max-width:760px){
  .dia-card, .dia-card.rev{max-width:none; grid-template-columns:1fr;}
}

/* Pacotes: botao "Ver conteudo" e painel */
.dia-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:2px;}
.dia-actions .btn{margin-top:0;}
.dia-card .btn.js-items{padding-top:8px; padding-bottom:8px;}
.dia-chev{font-size:11px; transition:transform .25s;}
.dia-card.open .dia-chev{transform:rotate(180deg);}
.dia-items{grid-column:1 / -1; padding:16px 24px 20px; border-top:1px solid var(--line); background:rgba(3,8,20,.35);}
.dia-items[hidden]{display:none;}
.dia-items h4{font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-300); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.dia-items h4 i{color:var(--cyan);}
.dia-items ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px;}
.dia-items li{font-size:13.5px; color:var(--ice-100); display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed var(--line);}
.dia-items li i{color:#5be08a; font-size:12px;}
.dia-items li span{margin-left:auto; color:#ffd37a; font-weight:600;}
.dia-items li.dia-empty{grid-column:1 / -1; color:var(--text-dim); border-bottom:0;}
.dia-items li.dia-empty i{color:var(--ice-500);}
@media (max-width:760px){ .dia-items ul{grid-template-columns:1fr;} .dia-items{padding:14px 18px 18px;} }

/* Conteudo do pacote: icones */
.dia-group{margin-bottom:14px;}
.dia-group:last-child{margin-bottom:0;}
.dia-gtitle{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-300); margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.dia-gtitle span{color:#ffd37a; font-size:16px; line-height:1;}
.dia-strips{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.dia-strips img{max-width:100%; height:auto; display:block; border-radius:6px; border:1px solid var(--line);}
.dia-icons{display:flex; flex-wrap:wrap; gap:8px;}
.dia-item{width:62px; height:62px; border:1px solid var(--line-strong); border-radius:7px; background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; transition:border-color .2s, transform .2s;}
.dia-item:hover{border-color:var(--cyan); transform:translateY(-2px);}
.dia-item img{width:60px; height:60px; display:block; border-radius:5px;}

/* tooltip dos itens (hover/toque) */
.dia-item.has-tip{position:relative; cursor:help; outline:none;}
.dia-item .dia-tip{position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%) translateY(-6px); width:auto; height:auto; max-width:min(390px,86vw); border-radius:4px; border:1px solid var(--line-strong); box-shadow:0 10px 30px rgba(0,0,0,.65); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, transform .15s; z-index:50;}
.dia-item.has-tip:hover .dia-tip,.dia-item.has-tip:focus .dia-tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
@media (max-width:760px){ .dia-item .dia-tip{left:auto; right:-10px; transform:translateY(6px);} .dia-item.has-tip:hover .dia-tip,.dia-item.has-tip:focus .dia-tip{transform:translateY(0);} }

/* tooltip centralizado na tela */
#tipBox{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); max-width:min(420px,90vw); max-height:90vh; width:auto; height:auto; border:1px solid var(--line-strong); border-radius:4px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.7); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, transform .15s; z-index:9999;}
#tipBox.show{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}

.dia-price{font-family:'Inter',sans-serif; font-size:26px; font-weight:800; color:#5be08a; line-height:1; letter-spacing:.01em; text-shadow:0 0 16px rgba(91,224,138,.25);}
.dia-price small{font-size:14px; font-weight:700; color:#8fe9ad; margin-right:2px;}
.dia-card.prata .dia-price{color:#dfe8f7; text-shadow:0 0 16px rgba(223,232,247,.25);} .dia-card.prata .dia-price small{color:#b9c6dd;}
.dia-card.bronze .dia-price{color:#ffb27a; text-shadow:0 0 16px rgba(255,178,122,.25);} .dia-card.bronze .dia-price small{color:#e8a06c;}