/* ============ Striker Coin — site oficial ============ */
:root{
  --bg:#070b1a; --bg2:#0b1226; --panel:#0f1832; --panel2:#131f40; --line:rgba(251,191,36,.38);
  --gold:#fbbf24; --gold2:#f59e0b; --gold-txt:#fde68a; --txt:#e8ecf6; --mut:#9aa6c2;
  --roxo:#7c3aed; --azul:#2563eb;
  --c0:#b6c2cf; --c1:#4ade80; --c2:#38bdf8; --c3:#c084fc; --c4:#fbbf24; --c5:#fb7185;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--txt);font:600 16px/1.6 Nunito,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.gold{background:linear-gradient(180deg,#fff3b0,#fbbf24 55%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent}
.c0{color:var(--c0)}.c1{color:var(--c1)}.c2{color:var(--c2)}.c3{color:var(--c3)}.c4{color:var(--c4)}.c5{color:var(--c5)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:14px;font-weight:900;cursor:pointer;transition:transform .15s,filter .15s;border:0}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn svg{width:22px;height:22px;fill:currentColor;flex:none}
.btn span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn b{font:400 20px 'Lilita One',sans-serif;letter-spacing:.5px}
.btn small{font-size:12px;font-weight:800;opacity:.8}
.btn-gold{background:linear-gradient(180deg,#ffe27a,#fbbf24 50%,#e08a00);color:#3a2300;box-shadow:0 6px 0 #a35f00,0 10px 30px rgba(251,191,36,.35)}
.btn-ghost{background:linear-gradient(180deg,rgba(37,99,235,.35),rgba(15,24,50,.8));color:#fff;border:2px solid var(--line);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn-big{padding:14px 26px}
.btn-sm{padding:9px 18px;font:400 16px 'Lilita One',sans-serif;box-shadow:0 4px 0 #a35f00}

/* ---------- topo ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:66px;display:flex;align-items:center;gap:24px;padding:0 24px;
  background:rgba(7,11,26,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-brand span{display:flex;flex-direction:column;line-height:.9}
.nav-brand b{font:400 22px 'Lilita One',sans-serif;letter-spacing:1px}
.nav-brand i{font:400 13px 'Lilita One',sans-serif;font-style:normal;color:var(--gold);letter-spacing:4px}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{padding:8px 13px;border-radius:10px;font-weight:800;color:#cdd5e8;font-size:15px}
.nav-links a:hover{background:rgba(251,191,36,.12);color:var(--gold-txt)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:3px}
.lang button{border:0;background:none;color:var(--mut);font:900 12px Nunito;padding:5px 8px;border-radius:7px;cursor:pointer}
.lang button.on{background:var(--gold);color:#3a2300}
.nav-menu{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.nav-menu span{width:20px;height:2px;background:#fff;border-radius:2px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;padding:110px 24px 30px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url(img/hero.jpg) center/cover no-repeat;z-index:-2;transform:scale(1.03)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,11,26,.94) 0%,rgba(7,11,26,.78) 38%,rgba(7,11,26,.25) 70%,rgba(7,11,26,.55) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero-in{max-width:1220px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.tag{display:inline-block;padding:7px 14px;border-radius:99px;background:rgba(251,191,36,.12);border:1px solid var(--line);color:var(--gold-txt);font-weight:800;font-size:14px;margin-bottom:18px}
.hero h1{font:400 clamp(42px,6.2vw,78px)/1.02 'Lilita One',sans-serif;letter-spacing:.5px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.lead{font-size:19px;color:#d6dcec;max-width:560px;margin:20px 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px}
.hero-phone{position:relative;display:flex;justify-content:center}
.phone{width:270px;aspect-ratio:375/812;border-radius:38px;padding:9px;background:linear-gradient(160deg,#2b3555,#0c1124);box-shadow:0 0 0 2px rgba(251,191,36,.45),0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(124,58,237,.35);overflow:hidden}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:30px}
.hero-phone .phone{transform:rotate(4deg);animation:flutua 6s ease-in-out infinite}
@keyframes flutua{50%{transform:rotate(4deg) translateY(-12px)}}
.float-card{position:absolute;width:118px;padding:6px 6px 10px;border-radius:16px;text-align:center;background:linear-gradient(180deg,#5b1430,#1d0b1c);border:2px solid var(--c5);box-shadow:0 0 30px rgba(251,113,133,.45),0 16px 30px rgba(0,0,0,.5)}
.float-card img{border-radius:11px;width:100%}
.float-card b{display:block;font:400 17px 'Lilita One',sans-serif;margin-top:4px}
.float-card small{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.mitico{color:var(--c5)}
.fc1{left:2%;top:12%;transform:rotate(-8deg);animation:flutua2 5s ease-in-out infinite}
.fc2{right:0;bottom:8%;transform:rotate(7deg);animation:flutua3 5.5s ease-in-out infinite}
@keyframes flutua2{50%{transform:rotate(-8deg) translateY(-10px)}}
@keyframes flutua3{50%{transform:rotate(7deg) translateY(-10px)}}
.float-coin{position:absolute;right:16%;top:6%;font:400 30px 'Lilita One',sans-serif;color:var(--gold-txt);text-shadow:0 3px 0 #a35f00,0 0 20px rgba(251,191,36,.7);animation:flutua3 3.4s ease-in-out infinite}
.badges{list-style:none;max-width:1220px;width:100%;margin:46px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.badges li{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:rgba(15,24,50,.75);border:1px solid rgba(251,191,36,.25);font-weight:800;font-size:14px}
.badges b{font-size:18px}

/* ---------- seções ---------- */
.sec{padding:90px 24px;max-width:1260px;margin:0 auto;position:relative}
.sec-alt{max-width:none;background:radial-gradient(circle at 15% 0%,rgba(124,58,237,.16),transparent 45%),radial-gradient(circle at 90% 100%,rgba(37,99,235,.14),transparent 45%),var(--bg2);border-top:1px solid rgba(251,191,36,.15);border-bottom:1px solid rgba(251,191,36,.15)}
.sec-alt>*{max-width:1212px;margin-left:auto;margin-right:auto}
.kicker{display:block;text-align:center;color:var(--gold);font-weight:900;letter-spacing:4px;font-size:13px;margin-bottom:6px}
.titulo{font:400 clamp(32px,4.4vw,48px)/1.1 'Lilita One',sans-serif;text-align:center;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:16px}
.titulo::before,.titulo::after{content:"◇";color:var(--gold);font-size:.5em;flex:none;
  padding:0 0 0 0;background:linear-gradient(90deg,transparent,var(--gold)) left center/60px 2px no-repeat;padding-left:66px}
.titulo::after{background:linear-gradient(270deg,transparent,var(--gold)) right center/60px 2px no-repeat;padding:0 66px 0 0}
.titulo-left{justify-content:flex-start}
.titulo-left::before,.titulo-left::after{display:none}
.titulo-sm{font:400 30px 'Lilita One',sans-serif;text-align:center;margin:60px 0 22px}
.sub{text-align:center;color:var(--mut);max-width:700px;margin:0 auto 40px;font-size:17px}

/* cartões com borda dourada */
.feat,.rar,.pack,.est,.tk-card,.torneio,.shot-frame,.faq details{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line);border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.feat{padding:14px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.feat:hover{transform:translateY(-6px);border-color:var(--gold)}
.feat-h{font:400 20px 'Lilita One',sans-serif;text-align:center;margin-bottom:10px}
.feat img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.feat p{color:#c9d2e6;font-size:15px;margin:12px 4px;flex:1}
.more{color:var(--gold);font-weight:900;font-size:13px;letter-spacing:1px;text-align:center}

/* gameplay */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:34px}
.split-rev{grid-template-columns:.9fr 1.1fr}
.split-rev .shot-frame{order:2}
.shot-frame{padding:8px;overflow:hidden}
.shot-frame img{border-radius:13px;width:100%}
.shot-frame{overflow:visible}
.shot-tag{position:absolute;top:-15px;right:20px;z-index:2;padding:5px 14px;border-radius:99px;background:linear-gradient(180deg,#f43f5e,#be123c);font-weight:900;font-size:13px;border:2px solid #fecdd3;box-shadow:0 4px 14px rgba(244,63,94,.45)}
.passos{list-style:none;display:flex;flex-direction:column;gap:18px}
.passos li{display:flex;gap:16px;align-items:flex-start}
.passos i{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:400 22px 'Lilita One',sans-serif;font-style:normal;color:#3a2300;background:linear-gradient(180deg,#ffe27a,#f59e0b);box-shadow:0 4px 0 #a35f00}
.passos b{font:400 21px 'Lilita One',sans-serif;letter-spacing:.3px}
.passos p{color:#c9d2e6;font-size:15.5px}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.mini3 div{display:flex;gap:12px;align-items:center;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:15px}
.mini3 b{font-size:26px}

/* raridades */
.rars{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.rar{padding:10px 10px 14px;text-align:center;border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--c) 22%,transparent),0 14px 30px rgba(0,0,0,.35);transition:transform .2s}
.rar:hover{transform:translateY(-6px)}
.rar img{border-radius:12px;width:100%;aspect-ratio:6/5;object-fit:cover}
.rar h3{font:400 21px 'Lilita One',sans-serif;color:var(--c);margin:10px 0 6px;text-transform:uppercase;letter-spacing:1px}
.rar dl{display:grid;grid-template-columns:1fr auto;gap:3px 6px;font-size:13px;text-align:left}
.rar dt{color:var(--mut)} .rar dd{font-weight:900}
.rar-mit{animation:brilho 2.6s ease-in-out infinite}
@keyframes brilho{50%{box-shadow:0 0 44px rgba(251,113,133,.55),0 14px 30px rgba(0,0,0,.35)}}

/* pacotes */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pack{padding:20px;text-align:center}
.pack-art{width:150px;height:200px;margin:0 auto 14px;border-radius:14px;background:linear-gradient(160deg,var(--p1),var(--p2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 0 30px color-mix(in srgb,var(--p1) 50%,transparent),inset 0 0 0 3px rgba(255,255,255,.18);transform:rotate(-3deg)}
.pack:hover .pack-art{transform:rotate(0) scale(1.04);transition:transform .25s}
.pack-art span{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#fff,#dfe5ef);display:grid;place-items:center;font-size:32px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.pack-art b{font:400 19px 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.pack-preco{font:400 26px 'Lilita One',sans-serif;color:var(--gold-txt)}
.pack small{color:var(--mut);font-weight:800}
.pack table{width:100%;margin-top:12px;border-collapse:collapse;font-size:14px}
.pack td{padding:5px 8px;border-top:1px solid rgba(255,255,255,.06);font-weight:800;text-align:left}
.pack td+td{text-align:right;color:#fff}
.box-txt h3{font:400 28px 'Lilita One',sans-serif;margin-bottom:10px}
.box-txt p{color:#c9d2e6;margin-bottom:12px}

/* lendas */
.lendas{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.lenda{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#4a1029,#160a17);border:2px solid rgba(251,113,133,.5);text-align:center;transition:transform .2s,box-shadow .2s}
.lenda:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 0 26px rgba(251,113,133,.5)}
.lenda img{width:100%;aspect-ratio:6/5;object-fit:cover}
.lenda b{display:block;font:400 15px 'Lilita One',sans-serif;padding:6px 4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modos */
.modo{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:46px}
.modo-rev{grid-template-columns:.9fr 1.1fr}
.modo-rev .shot-frame{order:2}
.lista{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lista li{padding-left:26px;position:relative;color:#d6dcec}
.lista li::before{content:"◆";position:absolute;left:4px;color:var(--gold);font-size:12px;top:4px}
.torneio{margin-top:60px;padding:26px;background:radial-gradient(circle at 8% 20%,rgba(251,191,36,.25),transparent 45%),linear-gradient(135deg,#2a1a05,#121a36)}
.tr-head{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.tr-trofeu{font-size:64px;filter:drop-shadow(0 0 18px rgba(251,191,36,.8))}
.tr-head h3{font:400 30px 'Lilita One',sans-serif}
.tr-head p{color:#d6dcec}
.tr-premios{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tr-premios div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:16px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);text-align:center}
.tr-premios span{font:400 30px 'Lilita One',sans-serif;color:var(--gold-txt)}
.tr-premios em{font-style:normal;font-weight:900}
.tr-premios .p1{background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(0,0,0,.3));border-color:rgba(251,191,36,.5)}
.tr-premios .p2{background:linear-gradient(180deg,rgba(203,213,225,.2),rgba(0,0,0,.3))}
.tr-premios .p3{background:linear-gradient(180deg,rgba(217,119,6,.25),rgba(0,0,0,.3))}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.est{padding:24px;text-align:center}
.est b{font-size:40px}
.est h4{font:400 22px 'Lilita One',sans-serif;margin:6px 0}
.est p{color:#c9d2e6;font-size:15px}

/* token */
.tk{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.tk-card{padding:26px}
.tk-card h3{font:400 24px 'Lilita One',sans-serif;margin-bottom:10px}
.tk-card p{color:#c9d2e6;margin-bottom:12px}
.wallets{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wallets span{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:12px;background:rgba(255,255,255,.06);font-weight:900}
.wallets i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;color:#fff}
.aviso{margin-top:24px;padding:14px 18px;border-radius:14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.4);color:#fde68a;font-size:14.5px;text-align:center}
.phone-wrap{display:flex;justify-content:center}

/* faq */
.faq{max-width:860px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px}
.faq details{padding:0;border-radius:16px}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font:400 20px 'Lilita One',sans-serif;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:28px;color:var(--gold);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 22px 20px;color:#c9d2e6}

/* final */
.final{text-align:center;padding:90px 24px;background:radial-gradient(circle at 50% 30%,rgba(124,58,237,.35),transparent 55%),radial-gradient(circle at 50% 100%,rgba(251,191,36,.18),transparent 50%)}
.final img{margin:0 auto 18px;border-radius:32px;box-shadow:0 0 0 3px rgba(251,191,36,.5),0 20px 50px rgba(0,0,0,.5);filter:drop-shadow(0 0 30px rgba(251,191,36,.45));animation:flutuaY 4s ease-in-out infinite}
@keyframes flutuaY{50%{transform:translateY(-10px)}}
.final h2{font:400 clamp(34px,5vw,54px) 'Lilita One',sans-serif}
.final p{color:#d6dcec;margin:6px 0 26px;font-size:18px}
.rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:26px 32px;border-top:1px solid var(--line);background:#050816}
.rodape-brand{display:flex;align-items:center;gap:10px;font:400 18px 'Lilita One',sans-serif}
.rodape nav{display:flex;gap:18px;flex-wrap:wrap}
.rodape nav a{color:var(--mut);font-weight:800}
.rodape nav a:hover{color:var(--gold-txt)}
.rodape small{color:#6b7591;width:100%;text-align:center}

/* aparecer ao rolar */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;padding:12px;background:rgba(7,11,26,.97);border-bottom:1px solid var(--line)}
  .nav-links.aberto{display:flex}
  .nav-links a{padding:12px 16px;font-size:17px}
  .nav-menu{display:flex}
  .nav{justify-content:space-between}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .rars{grid-template-columns:repeat(3,1fr)}
  .lendas{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:860px){
  .hero{padding-top:96px;min-height:auto}
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero-txt .lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-phone{margin-top:20px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(7,11,26,.7),rgba(7,11,26,.88) 60%,var(--bg))}
  .split,.split-rev,.modo,.modo-rev{grid-template-columns:1fr;gap:24px}
  .split-rev .shot-frame,.modo-rev .shot-frame{order:0}
  .packs,.tk,.grid3,.mini3{grid-template-columns:1fr}
  .tr-premios{grid-template-columns:repeat(2,1fr)}
  .tr-premios .p1{grid-column:1/-1}
  .lendas{grid-template-columns:repeat(4,1fr)}
  .titulo-left{justify-content:center;text-align:center}
  .box-txt{text-align:left}
}
@media (max-width:560px){
  .nav{padding:0 12px;gap:8px}
  .nav-brand span{display:none}
  .nav .btn-sm{padding:8px 12px;font-size:14px}
  .lang button{padding:5px 6px}
  .sec{padding:64px 16px}
  .hero{padding-left:16px;padding-right:16px}
  .titulo::before,.titulo::after{display:none}
  .grid4{grid-template-columns:1fr}
  .rars{grid-template-columns:repeat(2,1fr)}
  .lendas{grid-template-columns:repeat(3,1fr);gap:8px}
  .lenda b{font-size:13px}
  .btn-big{padding:12px 20px}
  .phone{width:230px}
  .float-card{width:92px}
  .fc1{left:0}
  .tr-head{flex-direction:column;text-align:center}
  .badges li{font-size:13px;padding:8px 12px}
  .rodape{justify-content:center;text-align:center}
}
/* retratos: aproxima o boneco (a imagem tem bastante fundo em volta) */
.lenda img,.rar img,.float-card img{transform:scale(1.22);transform-origin:50% 72%}
.lenda b,.rar h3,.float-card b{position:relative;z-index:1}
.lenda b{background:#160a17}
.rar,.float-card{overflow:hidden}
.rar img,.float-card img{border-radius:0}
/* personagem 3D no topo */
.craque3d{width:340px;aspect-ratio:700/1244;border-radius:30px;overflow:hidden;position:relative;transform:rotate(3deg);animation:flutua 6s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(251,191,36,.6),0 30px 80px rgba(0,0,0,.65),0 0 70px rgba(124,58,237,.45)}
.craque3d img{width:100%;height:100%;object-fit:cover}
.craque3d::after{content:"";position:absolute;inset:0;border-radius:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);pointer-events:none}
@keyframes flutua{50%{transform:rotate(3deg) translateY(-12px)}}
@media (max-width:560px){ .craque3d{width:250px;border-radius:24px} }