/* ============================================================
   COPA DOS BRAVOS — estilo geral
   ============================================================ */
:root{
  --bg-0:#050a12;
  --bg-1:#0b1524;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);
  --txt:#e8eef8;
  --txt-dim:#93a3ba;
  --grass:#1c7a3e;
  --grass-2:#125c2c;
  --hp:#ff4d5e;
  --sta:#3fa9ff;
  --crowd:#ffc93c;
  --gold:#ffd166;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(63,169,255,.16), transparent 60%),
    radial-gradient(800px 600px at 90% 110%, rgba(255,201,60,.12), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  color:var(--txt);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

#app{position:relative;width:100%;height:100%}

/* ---------- telas ---------- */
.screen{
  position:absolute;inset:0;
  display:none;
  align-items:center;justify-content:center;
  padding:18px;
  overflow-y:auto;
}
.screen.active{display:flex;animation:screenIn .38s cubic-bezier(.22,1,.36,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- painéis ---------- */
.panel{
  width:min(760px,100%);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:26px 26px 22px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.panel-title{
  font-size:clamp(20px,3.4vw,28px);letter-spacing:.14em;font-weight:800;
  margin-bottom:4px;
  background:linear-gradient(90deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel-sub{color:var(--txt-dim);font-size:14px;margin-bottom:18px}

/* ---------- menu ---------- */
.menu-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.crest{
  font-size:74px;line-height:1;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
  animation:bob 3.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.title{
  font-size:clamp(34px,8vw,68px);font-weight:900;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff 30%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(255,209,102,.25);
}
.subtitle{color:var(--txt-dim);letter-spacing:.22em;font-size:12px;text-transform:uppercase}
.menu-buttons{display:flex;flex-direction:column;gap:12px;margin-top:26px;width:min(320px,86vw)}
.foot-note{color:#4d5f77;font-size:11px;margin-top:24px;letter-spacing:.1em}

/* ---------- botões ---------- */
.btn{
  appearance:none;border:1px solid var(--stroke);
  background:var(--glass);color:var(--txt);
  padding:13px 22px;border-radius:12px;
  font-weight:700;letter-spacing:.1em;font-size:13px;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s,border-color .2s;
}
.btn:hover{background:var(--glass-2);transform:translateY(-2px);border-color:rgba(255,255,255,.28)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-primary{
  background:linear-gradient(135deg,#e2620d,#b0380a);
  color:#fff;border-color:rgba(255,209,102,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  box-shadow:0 10px 26px rgba(226,98,13,.3);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#f2721a,#c24310);
  box-shadow:0 16px 34px rgba(226,98,13,.45);
}
.btn-ghost{background:transparent}

/* ---------- criação ---------- */
.create-panel{width:min(680px,100%)}
.field{display:block;margin-bottom:18px}
.field>span,.field-label{
  display:block;font-size:11px;letter-spacing:.18em;color:var(--txt-dim);
  text-transform:uppercase;margin-bottom:8px;
}
input[type=text]{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--stroke);background:rgba(0,0,0,.28);
  color:var(--txt);font-size:16px;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
input[type=text]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,209,102,.16)}

.color-row{display:flex;gap:10px;flex-wrap:wrap}
.swatch{
  width:38px;height:38px;border-radius:11px;cursor:pointer;
  border:2px solid transparent;
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s;
}
.swatch:hover{transform:translateY(-3px) scale(1.06)}
.swatch.sel{border-color:#fff;transform:scale(1.12)}

.style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.style-card{
  border:1px solid var(--stroke);border-radius:16px;padding:16px;
  background:rgba(255,255,255,.04);cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s,background .18s;
}
.style-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.07)}
.style-card.sel{border-color:var(--gold);background:rgba(255,209,102,.12);box-shadow:0 0 0 2px rgba(255,209,102,.2) inset}
.style-card .sc-icon{font-size:28px}
.style-card h3{font-size:15px;margin:6px 0 4px;letter-spacing:.06em}
.style-card p{font-size:12px;color:var(--txt-dim);line-height:1.45;margin-bottom:10px}
.stat-mini{display:flex;gap:8px;flex-wrap:wrap}
.stat-mini span{
  font-size:10px;letter-spacing:.08em;background:rgba(0,0,0,.3);
  padding:3px 7px;border-radius:6px;color:#c8d6ea;
}

.row-end{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}

/* ---------- mapa ---------- */
.map-panel{width:min(880px,100%)}
.player-strip{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:rgba(0,0,0,.26);border:1px solid var(--stroke);
  border-radius:14px;padding:12px 16px;margin-bottom:18px;
}
.player-strip .ps-name{font-weight:800;letter-spacing:.06em}
.player-strip .ps-stat{font-size:11px;color:var(--txt-dim);letter-spacing:.1em}
.player-strip .ps-stat b{color:var(--txt);font-size:13px}

.map-track{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin-bottom:20px;
}
.map-node{
  border:1px solid var(--stroke);border-radius:14px;padding:12px 8px;text-align:center;
  background:rgba(255,255,255,.03);position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.map-node .mn-flag{font-size:26px;display:block;filter:grayscale(1) opacity(.45)}
.map-node .mn-name{font-size:10px;letter-spacing:.08em;color:var(--txt-dim);margin-top:6px;display:block}
.map-node.done .mn-flag{filter:none}
.map-node.done{border-color:rgba(80,220,140,.45);background:rgba(60,200,120,.10)}
.map-node.done::after{content:"✔";position:absolute;top:6px;right:8px;color:#5fe0a0;font-size:12px}
.map-node.current{
  border-color:var(--gold);background:rgba(255,209,102,.12);
  animation:pulseNode 1.6s ease-in-out infinite;
}
.map-node.current .mn-flag{filter:none}
@keyframes pulseNode{0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.35)}50%{box-shadow:0 0 0 10px rgba(255,209,102,0)}}

/* ============================================================
   BATALHA
   ============================================================ */
#screen-battle{padding:0;display:none;flex-direction:column;justify-content:flex-start;overflow:hidden}
#screen-battle.active{display:flex;align-items:stretch}

/* bandeiras desenhadas (emoji de bandeira não existe no Windows) */
.flag{width:26px;height:17px;border-radius:3px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.flag.big{width:34px;height:23px}
.hud-flag{display:flex;align-items:center}
.mn-flag .flag{width:34px;height:23px;margin:0 auto}

.stadium{position:absolute;inset:0;overflow:hidden;z-index:0}
.sky{position:absolute;inset:0}

/* monumento do país ao fundo */
.skyline{
  position:absolute;left:0;right:0;bottom:52%;height:30%;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:.62;
  animation:skylineIn 1s cubic-bezier(.22,1,.36,1);
}
.skyline svg{width:min(420px,55vw);height:100%;overflow:visible}
@keyframes skylineIn{from{opacity:0;transform:translateY(24px)}to{opacity:.62;transform:none}}
.lm-fill{fill:#0a121e;stroke:none}
.lm-soft{fill:#0d1826;stroke:none}
.lm-snow{fill:#26364d}
.lm-arch{fill:rgba(255,209,102,.16)}
.lm-glow{fill:#ffcf7a;filter:drop-shadow(0 0 8px rgba(255,207,122,.65))}
.lm-twinkle{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.lm-blades{transform-origin:0 0;animation:spinBlades 9s linear infinite}
@keyframes spinBlades{to{transform:rotate(360deg)}}
.lm-smoke{animation:smokeUp 5s ease-in-out infinite}
@keyframes smokeUp{0%{transform:translateY(6px);opacity:.25}50%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(6px);opacity:.25}}

/* arquibancada lotada */
.stands{
  position:absolute;top:0;left:0;right:0;height:36%;
  background:linear-gradient(180deg,rgba(4,8,16,.9),rgba(8,16,28,.5) 60%,transparent);
  overflow:hidden;
}
.crowd-svg{position:absolute;inset:0;width:100%;height:100%}
.fan{animation:fanJump 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes fanJump{0%,72%,100%{transform:translateY(0) scale(1)}82%{transform:translateY(-7px) scale(1.06)}}
.fan-row{animation:rowSway 4.6s ease-in-out infinite}
@keyframes rowSway{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.fan-flag{animation:flagWave 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}
@keyframes flagWave{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-9deg) scaleX(1.05)}}
.stand-flag{
  position:absolute;top:6%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  animation:flagFloat 3.4s ease-in-out infinite;
}
@keyframes flagFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(6deg)}}

/* refletores */
.floodlight{
  position:absolute;top:-12%;width:44%;height:78%;pointer-events:none;
  background:radial-gradient(ellipse at top, rgba(255,255,255,.16), transparent 62%);
  animation:lightPulse 6s ease-in-out infinite;
}
.floodlight.l{left:-6%}
.floodlight.r{right:-6%;animation-delay:1.4s}
@keyframes lightPulse{0%,100%{opacity:.55}50%{opacity:.85}}

.pitch{
  position:absolute;bottom:0;left:-8%;right:-8%;height:78%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 60px, transparent 60px 120px),
    linear-gradient(180deg,var(--grass) 0%, var(--grass-2) 100%);
  transform:perspective(700px) rotateX(46deg);
  transform-origin:bottom center;
  box-shadow:0 -30px 80px rgba(0,0,0,.6) inset;
}
.pitch-line.mid{position:absolute;top:50%;left:0;right:0;height:3px;background:rgba(255,255,255,.28)}
.pitch-circle{
  position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;
  border:3px solid rgba(255,255,255,.24);border-radius:50%;
}
.pitch-box{
  position:absolute;top:26%;height:48%;width:14%;
  border:3px solid rgba(255,255,255,.2);
}
.pitch-box.left{left:2%;border-left:none}
.pitch-box.right{right:2%;border-right:none}

/* torcida explode quando a barra enche */
.crowd-hype .stands{animation:hype .5s ease-in-out 3}
.crowd-hype .fan{animation-duration:.5s}
@keyframes hype{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9)}}

.battle-hud{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;gap:12px;
  padding:14px 16px 0;
}
.hud-card{
  width:min(300px,45vw);
  background:rgba(6,12,22,.72);border:1px solid var(--stroke);
  border-radius:14px;padding:10px 12px;backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hud-card.enemy{order:2}
.hud-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hud-flag{font-size:20px}
.hud-name{font-weight:800;font-size:13px;letter-spacing:.06em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-tier{font-size:9px;letter-spacing:.14em;color:var(--txt-dim);background:rgba(255,255,255,.07);padding:3px 6px;border-radius:5px}

.bar{
  position:relative;height:14px;border-radius:8px;overflow:hidden;
  background:rgba(0,0,0,.5);margin-bottom:5px;border:1px solid rgba(255,255,255,.08);
}
.bar-fill{
  position:absolute;inset:0;width:100%;transform-origin:left center;
  transition:width .55s cubic-bezier(.22,1,.36,1),background .3s;
}
.bar.hp .bar-fill{background:linear-gradient(90deg,#ff6b6b,var(--hp))}
.bar.sta .bar-fill{background:linear-gradient(90deg,#5ec6ff,var(--sta))}
.bar.crowd-bar{height:10px}
.bar.crowd-bar .bar-fill{background:linear-gradient(90deg,#ffe08a,var(--crowd))}
.bar.crowd-bar.full .bar-fill{animation:crowdFull .9s ease-in-out infinite}
@keyframes crowdFull{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}
.bar-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.08em;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.status-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;min-height:16px}
.status-chip{
  font-size:9px;letter-spacing:.06em;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.1);border:1px solid var(--stroke);
  animation:popIn .3s cubic-bezier(.22,1,.36,1);
}
.status-chip.bad{background:rgba(255,77,94,.22);border-color:rgba(255,77,94,.4)}
.status-chip.good{background:rgba(95,224,160,.2);border-color:rgba(95,224,160,.4)}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.intent{
  margin-top:6px;font-size:10px;letter-spacing:.08em;color:#ffd9a0;
  min-height:14px;
}
.intent.show{animation:popIn .3s cubic-bezier(.22,1,.36,1)}

/* arena / sprites */
.arena{
  position:relative;z-index:2;flex:1;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 clamp(20px,9vw,140px) 4%;
}
.fighter{
  width:clamp(90px,15vw,140px);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.55));
  animation:idle 2.4s ease-in-out infinite;
}
.fighter svg{width:100%;height:auto;display:block}
.side-enemy{transform:scaleX(-1)}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.side-enemy{animation:idleEnemy 2.4s ease-in-out infinite}
@keyframes idleEnemy{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-8px)}}

/* ---- partes do boneco: cada membro anima sozinho ---- */
.fighter g,
.fighter .s-shirt,
.fighter .s-shadow{
  transform-box:fill-box;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.fighter .s-arm-front{transform-origin:0% 0%;   animation:armSwing 2.4s ease-in-out infinite}
.fighter .s-arm-back {transform-origin:100% 0%; animation:armSwing 2.4s ease-in-out infinite reverse}
.fighter .s-leg-front{transform-origin:21% 0%;  animation:legSway 2.4s ease-in-out infinite reverse}
.fighter .s-leg-back {transform-origin:0% 0%;   animation:legSway 2.4s ease-in-out infinite}
.fighter .s-head     {transform-origin:50% 100%;animation:headBobble 2.4s cubic-bezier(.36,.07,.19,.97) infinite}
.fighter .s-ball     {transform-box:fill-box;transform-origin:50% 100%;animation:ballIdle 2.4s ease-in-out infinite}
.fighter .s-base     {transform-box:fill-box;transform-origin:50% 100%}
.fighter.attack .s-ball{animation:ballGone .45s forwards}
@keyframes ballIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-8deg)}}
@keyframes ballGone{to{transform:translate(-30px,-8px) scale(.2);opacity:0}}
@keyframes headBobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-2px)}}
.fighter .s-shirt    {transform-origin:50% 100%;animation:breathe 2.4s ease-in-out infinite}
.fighter .s-shadow   {transform-origin:50% 50%; animation:shadowPulse 2.4s ease-in-out infinite}

@keyframes armSwing   {0%,100%{transform:rotate(-11deg)} 50%{transform:rotate(13deg)}}
@keyframes legSway    {0%,100%{transform:rotate(-5deg)}  50%{transform:rotate(6deg)}}
@keyframes headBob    {0%,100%{transform:rotate(-2deg)}  50%{transform:rotate(2deg) translateY(-1px)}}
@keyframes breathe    {0%,100%{transform:scaleY(1)}      50%{transform:scaleY(1.04)}}
@keyframes shadowPulse{0%,100%{transform:scaleX(1);opacity:.4} 50%{transform:scaleX(.85);opacity:.26}}

/* ---- ataque: corpo avança, perna chuta, braços contrabalançam ---- */
.fighter.attack{animation:lungeP .45s cubic-bezier(.22,1,.36,1)}
@keyframes lungeP{0%{transform:translateX(0)}35%{transform:translateX(60px) rotate(-8deg) scale(1.06)}100%{transform:translateX(0)}}
.side-enemy.attack{animation:lungeE .45s cubic-bezier(.22,1,.36,1)}
@keyframes lungeE{0%{transform:scaleX(-1) translateX(0)}35%{transform:scaleX(-1) translateX(60px) rotate(-8deg) scale(1.06)}100%{transform:scaleX(-1) translateX(0)}}

.fighter.attack .s-leg-front{animation:kickLeg .45s cubic-bezier(.22,1,.36,1)}
.fighter.attack .s-leg-back {animation:plantLeg .45s cubic-bezier(.22,1,.36,1)}
.fighter.attack .s-arm-front{animation:armThrust .45s cubic-bezier(.22,1,.36,1)}
.fighter.attack .s-arm-back {animation:armCounter .45s cubic-bezier(.22,1,.36,1)}
.fighter.attack .s-head     {animation:headDrive .45s cubic-bezier(.22,1,.36,1)}
@keyframes kickLeg   {0%{transform:rotate(24deg)} 30%{transform:rotate(-76deg)} 65%{transform:rotate(12deg)} 100%{transform:rotate(0)}}
@keyframes plantLeg  {0%{transform:rotate(-8deg)} 30%{transform:rotate(16deg)}  100%{transform:rotate(0)}}
@keyframes armThrust {0%{transform:rotate(-28deg)}35%{transform:rotate(42deg)}  100%{transform:rotate(0)}}
@keyframes armCounter{0%{transform:rotate(22deg)} 35%{transform:rotate(-46deg)} 100%{transform:rotate(0)}}
@keyframes headDrive {0%{transform:rotate(0)}     35%{transform:rotate(9deg)}   100%{transform:rotate(0)}}

.fighter.hurt{animation:hurtP .42s ease-out}
@keyframes hurtP{
  0%{transform:translateX(0);filter:none}
  15%{filter:brightness(3) saturate(0)}
  25%{transform:translateX(-16px) rotate(5deg)}
  45%{transform:translateX(12px) rotate(-4deg)}
  65%{transform:translateX(-7px)}
  100%{transform:translateX(0);filter:none}
}
.side-enemy.hurt{animation:hurtE .42s ease-out}
@keyframes hurtE{
  0%{transform:scaleX(-1) translateX(0);filter:none}
  15%{filter:brightness(3) saturate(0)}
  25%{transform:scaleX(-1) translateX(-16px) rotate(5deg)}
  45%{transform:scaleX(-1) translateX(12px) rotate(-4deg)}
  100%{transform:scaleX(-1) translateX(0);filter:none}
}
/* ---- levar pancada: cabeça joga pra trás e braços se soltam ---- */
.fighter.hurt .s-head     {animation:headSnap .42s ease-out}
.fighter.hurt .s-arm-front{animation:armFlail .42s ease-out}
.fighter.hurt .s-arm-back {animation:armFlail .42s ease-out reverse}
.fighter.hurt .s-leg-back {animation:legStumble .42s ease-out}
@keyframes headSnap  {0%{transform:rotate(0)}25%{transform:rotate(-26deg) translateY(-2px)}70%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@keyframes armFlail  {0%{transform:rotate(0)}25%{transform:rotate(-52deg)}70%{transform:rotate(16deg)}100%{transform:rotate(0)}}
@keyframes legStumble{0%{transform:rotate(0)}30%{transform:rotate(22deg)}100%{transform:rotate(0)}}

/* ---- marcação: agacha e sobe a guarda ---- */
.fighter.guard{filter:drop-shadow(0 0 14px rgba(63,169,255,.9)) drop-shadow(0 22px 18px rgba(0,0,0,.5))}
.fighter.guard .s-arm-front{animation:none;transform:rotate(-88deg)}
.fighter.guard .s-arm-back {animation:none;transform:rotate(84deg)}
.fighter.guard .s-leg-front{animation:none;transform:rotate(-9deg)}
.fighter.guard .s-leg-back {animation:none;transform:rotate(11deg)}
.fighter.guard .s-head     {animation:none;transform:rotate(6deg) translateY(2px)}

/* ---- entrada em campo: corre para a posição ---- */
.fighter.enter{animation:runInP .75s cubic-bezier(.22,1,.36,1)}
@keyframes runInP{0%{transform:translateX(-40vw);opacity:0}100%{transform:none;opacity:1}}
.side-enemy.enter{animation:runInE .75s cubic-bezier(.22,1,.36,1)}
@keyframes runInE{0%{transform:scaleX(-1) translateX(-40vw);opacity:0}100%{transform:scaleX(-1);opacity:1}}
.fighter.enter .s-arm-front,.fighter.enter .s-arm-back,
.fighter.enter .s-leg-front,.fighter.enter .s-leg-back{animation-duration:.24s}

/* ---- comemoração do vencedor ---- */
.fighter.celebrate{animation:celebrateP .55s cubic-bezier(.22,1,.36,1) 4}
@keyframes celebrateP{0%,100%{transform:translateY(0)}45%{transform:translateY(-30px) rotate(-4deg)}}
.side-enemy.celebrate{animation:celebrateE .55s cubic-bezier(.22,1,.36,1) 4}
@keyframes celebrateE{0%,100%{transform:scaleX(-1) translateY(0)}45%{transform:scaleX(-1) translateY(-30px) rotate(-4deg)}}
.fighter.celebrate .s-arm-front{animation:armsUpF .55s ease-in-out 4}
.fighter.celebrate .s-arm-back {animation:armsUpB .55s ease-in-out 4}
.fighter.celebrate .s-leg-front,.fighter.celebrate .s-leg-back{animation-duration:.55s}
@keyframes armsUpF{0%,100%{transform:rotate(-40deg)}45%{transform:rotate(-120deg)}}
@keyframes armsUpB{0%,100%{transform:rotate(40deg)} 45%{transform:rotate(118deg)}}
.fighter.ko{animation:koFall .8s forwards cubic-bezier(.22,1,.36,1)}
@keyframes koFall{to{transform:translateY(40px) rotate(-80deg);opacity:.25}}
.side-enemy.ko{animation:koFallE .8s forwards cubic-bezier(.22,1,.36,1)}
@keyframes koFallE{to{transform:scaleX(-1) translateY(40px) rotate(-80deg);opacity:.25}}

.ball{
  position:absolute;left:0;top:0;font-size:26px;
  opacity:0;pointer-events:none;z-index:5;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}

/* bottom */
.battle-bottom{position:relative;z-index:3;padding:0 16px 16px}
.log{
  height:64px;overflow:hidden;
  background:rgba(6,12,22,.7);border:1px solid var(--stroke);
  border-radius:12px;padding:8px 12px;margin-bottom:10px;
  font-size:12.5px;line-height:1.55;backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.log p{animation:logIn .3s ease-out;color:#cfdcee}
.log p b{color:var(--gold)}
.log p.dmg b{color:#ff8a95}
@keyframes logIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.act{
  position:relative;border:1px solid var(--stroke);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  padding:12px 8px;cursor:pointer;text-align:center;color:var(--txt);
  font-family:inherit;overflow:hidden;
  transition:transform .16s cubic-bezier(.22,1,.36,1),background .18s,border-color .18s;
}
.act:hover:not(:disabled){transform:translateY(-4px);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12)}
.act:active:not(:disabled){transform:translateY(0) scale(.97)}
.act:disabled{opacity:.4;cursor:not-allowed}
.act .a-icon{font-size:22px;display:block}
.act .a-name{font-size:12px;font-weight:800;letter-spacing:.08em;display:block;margin-top:3px}
.act .a-cost{font-size:9.5px;color:var(--txt-dim);letter-spacing:.06em;display:block;margin-top:2px}
.act .a-key{position:absolute;top:5px;left:7px;font-size:9px;color:#6f819a}
.act.special{
  border-color:rgba(255,209,102,.55);
  background:linear-gradient(180deg,rgba(255,209,102,.22),rgba(255,159,67,.1));
}
.act.special:not(:disabled){animation:specialGlow 1.4s ease-in-out infinite}
@keyframes specialGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.35)}50%{box-shadow:0 0 22px 2px rgba(255,209,102,.45)}}

.mute-btn{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:6;background:rgba(6,12,22,.7);border:1px solid var(--stroke);
  color:var(--txt);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:15px;
}

/* ---------- upgrade ---------- */
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.up-card{
  border:1px solid var(--stroke);border-radius:16px;padding:18px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  text-align:center;
  transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .2s;
  animation:cardDeal .45s backwards cubic-bezier(.22,1,.36,1);
}
.up-card:nth-child(1){animation-delay:.05s}
.up-card:nth-child(2){animation-delay:.13s}
.up-card:nth-child(3){animation-delay:.21s}
@keyframes cardDeal{from{opacity:0;transform:translateY(28px) rotate(-4deg)}to{opacity:1;transform:none}}
.up-card:hover{transform:translateY(-7px) scale(1.02);border-color:var(--gold);box-shadow:0 18px 40px rgba(255,209,102,.18)}
.up-card .u-icon{font-size:32px}
.up-card h3{font-size:14px;margin:8px 0 6px;letter-spacing:.08em}
.up-card p{font-size:12px;color:var(--txt-dim);line-height:1.5}

/* ---------- resultado ---------- */
.result-panel{text-align:center;width:min(560px,100%)}
.result-trophy{font-size:66px;animation:bob 2.6s ease-in-out infinite;margin:6px 0 14px}
.score-breakdown{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.score-breakdown div{
  display:flex;justify-content:space-between;font-size:13px;
  padding:8px 12px;background:rgba(0,0,0,.25);border-radius:10px;
  animation:logIn .4s backwards;
}
.score-breakdown div span{color:var(--txt-dim)}
.score-breakdown div b{color:var(--txt)}
.score-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:14px;margin-bottom:18px;
  background:linear-gradient(90deg,rgba(255,209,102,.18),rgba(255,159,67,.08));
  border:1px solid rgba(255,209,102,.35);
}
.score-total span{letter-spacing:.16em;font-size:12px;color:#ffe3a8}
.score-total strong{font-size:30px;color:var(--gold)}

/* ---------- ranking ---------- */
.rank-table{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;max-height:50vh;overflow-y:auto}
.rank-row{
  display:grid;grid-template-columns:38px 1fr auto auto;gap:12px;align-items:center;
  padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);font-size:13px;
  animation:logIn .35s backwards;
}
.rank-row .r-pos{font-weight:900;color:var(--txt-dim);text-align:center}
.rank-row .r-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .r-name small{display:block;font-weight:400;font-size:10.5px;color:var(--txt-dim);letter-spacing:.06em}
.rank-row .r-stage{font-size:11px;color:var(--txt-dim);letter-spacing:.06em}
.rank-row .r-score{font-weight:900;color:var(--gold);font-size:16px}
.rank-row.top1{border-color:rgba(255,209,102,.5);background:linear-gradient(90deg,rgba(255,209,102,.16),rgba(255,255,255,.03))}
.rank-row.top2{border-color:rgba(200,214,234,.35)}
.rank-row.top3{border-color:rgba(205,127,50,.4)}
.rank-row.me{box-shadow:0 0 0 2px rgba(63,169,255,.45)}
.rank-empty{text-align:center;color:var(--txt-dim);padding:32px;font-size:13px}

.help-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.help-list li{
  font-size:13.5px;line-height:1.55;color:#c6d3e6;
  padding:10px 14px;background:rgba(0,0,0,.22);border-radius:10px;
  border-left:3px solid rgba(255,209,102,.5);
}

/* ---------- fx globais ---------- */
#fx-canvas{position:fixed;inset:0;z-index:50;pointer-events:none}
#floaters{position:fixed;inset:0;z-index:51;pointer-events:none;overflow:hidden}
.floater{
  position:absolute;font-weight:900;font-size:26px;
  text-shadow:0 3px 10px rgba(0,0,0,.8);
  animation:floatUp 1.05s cubic-bezier(.22,1,.36,1) forwards;
  white-space:nowrap;
}
.floater.dmg{color:#ff6b7a}
.floater.crit{color:#ffd166;font-size:38px}
.floater.heal{color:#5fe0a0}
.floater.miss{color:#9fb2c9;font-size:20px}
.floater.info{color:#8fd0ff;font-size:18px}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-16px) scale(1.18)}
  35%{transform:translate(-50%,-24px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-86px) scale(.92)}
}
#flash{position:fixed;inset:0;z-index:49;pointer-events:none;opacity:0;background:#fff}
#flash.on{animation:flashHit .22s ease-out}
@keyframes flashHit{0%{opacity:.55}100%{opacity:0}}
.shake-screen{animation:shakeScreen .34s ease-out}
@keyframes shakeScreen{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-9px,4px)}
  40%{transform:translate(8px,-5px)}
  60%{transform:translate(-6px,-3px)}
  80%{transform:translate(4px,3px)}
}

/* ============================================================
   GOLAÇO — modo cinema
   ============================================================ */
#screen-battle.cinema::before,
#screen-battle.cinema::after{
  content:'';position:absolute;left:0;right:0;height:8.5%;
  background:#04070d;z-index:8;animation:barIn .38s cubic-bezier(.22,1,.36,1);
}
#screen-battle.cinema::before{top:0}
#screen-battle.cinema::after{bottom:0}
@keyframes barIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#screen-battle.cinema::before{transform-origin:top}
#screen-battle.cinema::after{transform-origin:bottom}

.stadium{transition:filter .45s ease}
.cinema .stadium{filter:brightness(.42) saturate(.65) blur(1.5px)}
.battle-hud,.battle-bottom{transition:opacity .35s ease}
.cinema .battle-hud,.cinema .battle-bottom{opacity:.12;pointer-events:none}
.cinema .arena::after{
  content:'';position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 22% 62%, rgba(255,209,102,.22), transparent 45%);
  animation:auraPulse 1.1s ease-in-out infinite;
}
@keyframes auraPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* câmera */
.arena{transition:transform .55s cubic-bezier(.22,1,.36,1),transform-origin .55s ease}
.cinema.zoom-player .arena{transform:scale(1.45);transform-origin:16% 68%}
.cinema.zoom-ball   .arena{transform:scale(1.14);transform-origin:50% 60%}

/* preparação do voleio */
.fighter.golaco-windup{
  animation:windup .72s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 22px rgba(255,209,102,.95)) drop-shadow(0 22px 18px rgba(0,0,0,.55));
}
@keyframes windup{
  0%{transform:none}
  35%{transform:translateY(8px) scale(.93)}
  100%{transform:translateY(5px) scale(.96)}
}
.fighter.golaco-windup .s-head     {animation:none;transform:rotate(-9deg)}
.fighter.golaco-windup .s-arm-front{animation:none;transform:rotate(-34deg)}
.fighter.golaco-windup .s-arm-back {animation:none;transform:rotate(30deg)}
.fighter.golaco-windup .s-leg-front{animation:none;transform:rotate(14deg)}

/* bicicleta */
.fighter.golaco-kick{
  animation:bicycle .95s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 26px rgba(255,180,80,.95)) drop-shadow(0 22px 18px rgba(0,0,0,.5));
}
@keyframes bicycle{
  0%{transform:translateY(5px) scale(.96)}
  22%{transform:translateY(-72px) rotate(-45deg)}
  44%{transform:translateY(-88px) rotate(-125deg)}
  68%{transform:translateY(-44px) rotate(-190deg)}
  100%{transform:translateY(0) rotate(-360deg)}
}
.fighter.golaco-kick .s-leg-front{animation:scissorA .42s ease-out 2}
.fighter.golaco-kick .s-leg-back {animation:scissorB .42s ease-out 2}
.fighter.golaco-kick .s-arm-front{animation:scissorB .42s ease-out 2}
.fighter.golaco-kick .s-arm-back {animation:scissorA .42s ease-out 2}
.fighter.golaco-kick .s-ball     {animation:ballGone .2s forwards}
@keyframes scissorA{0%{transform:rotate(34deg)}50%{transform:rotate(-88deg)}100%{transform:rotate(34deg)}}
@keyframes scissorB{0%{transform:rotate(-44deg)}50%{transform:rotate(66deg)}100%{transform:rotate(-44deg)}}

/* bola em chamas */
.ball.fire{
  filter:brightness(1.5)
         drop-shadow(0 0 14px #ffb347)
         drop-shadow(0 0 34px #ff6b2c)
         drop-shadow(0 0 60px rgba(255,107,44,.6));
}

/* onda de choque */
.shockwave{
  position:absolute;width:320px;height:320px;margin:-160px 0 0 -160px;
  border:6px solid var(--gold);border-radius:50%;
  box-shadow:0 0 40px rgba(255,209,102,.75), inset 0 0 30px rgba(255,209,102,.5);
  animation:shock .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes shock{
  0%{transform:scale(.06);opacity:1;border-width:14px}
  100%{transform:scale(1.7);opacity:0;border-width:1px}
}

/* cartela GOLAÇO */
.title-card{
  position:absolute;top:44%;left:50%;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:tcIn 1.9s cubic-bezier(.22,1,.36,1) forwards;
}
.title-card.gol::before{
  content:'';position:absolute;top:50%;left:50%;width:150vw;height:52vh;
  transform:translate(-50%,-50%);z-index:-1;
  background:
    radial-gradient(ellipse at center, rgba(255,209,102,.30), transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,209,102,.14) 0 6deg, transparent 6deg 14deg);
  animation:rayspin 5s linear infinite;
}
@keyframes rayspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.tc-main{
  font-size:clamp(38px,9.5vw,92px);font-weight:900;letter-spacing:.12em;white-space:nowrap;
  background:linear-gradient(180deg,#fff 22%,#ffd166 58%,#ff8a3d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(255,140,40,.55));
}
.tc-sub{font-size:clamp(10px,2vw,15px);letter-spacing:.34em;color:#ffe3a8;text-transform:uppercase}
@keyframes tcIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2.6);filter:blur(16px)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(.96);filter:blur(0)}
  26%{transform:translate(-50%,-50%) scale(1.04)}
  74%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.12)}
}

/* ============================================================
   LANCES DE SORTE — orbes clicáveis
   ============================================================ */
.luck-layer{position:absolute;inset:0;z-index:6;pointer-events:none}
.luck-orb{
  position:absolute;pointer-events:auto;cursor:pointer;
  width:86px;height:86px;border-radius:50%;
  border:2px solid var(--c);background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.28), rgba(6,12,22,.86));
  color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 0 26px var(--c), 0 12px 30px rgba(0,0,0,.5);
  animation:orbIn .45s cubic-bezier(.34,1.56,.64,1), orbFloat 2.6s ease-in-out .45s infinite;
  transition:transform .15s cubic-bezier(.22,1,.36,1);
}
.luck-orb:hover{transform:scale(1.12)}
.lo-icon{font-size:28px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.lo-name{font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--c);text-align:center;padding:0 4px}
.lo-halo{
  position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--c);opacity:.6;
  animation:orbHalo 1.8s ease-out infinite;
}
.luck-orb::after{           /* ampulheta: o anel encolhe até sumir */
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:3px solid var(--c);opacity:.9;
  animation:orbTimer var(--life,5000ms) linear forwards;
}
.luck-orb.raro   {box-shadow:0 0 32px var(--c), 0 12px 30px rgba(0,0,0,.5)}
.luck-orb.epico  {width:96px;height:96px}
.luck-orb.lendario{
  width:112px;height:112px;border-width:3px;
  animation:orbIn .45s cubic-bezier(.34,1.56,.64,1), orbLegend 1.2s ease-in-out .45s infinite;
}
.luck-orb.lendario .lo-icon{font-size:38px}
.luck-orb.lendario::before{
  content:'';position:absolute;inset:-40px;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,209,102,.22) 0 8deg, transparent 8deg 20deg);
  animation:rayspin 4s linear infinite;
}
.luck-orb.caught{animation:orbCaught .42s cubic-bezier(.22,1,.36,1) forwards}
.luck-orb.gone{animation:orbGone .42s ease-in forwards}
@keyframes orbIn{0%{transform:scale(0) rotate(-90deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes orbLegend{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}50%{transform:translateY(-16px) scale(1.06);filter:brightness(1.4)}}
@keyframes orbHalo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes orbTimer{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);opacity:0}}
@keyframes orbCaught{
  0%{transform:scale(1)}
  40%{transform:scale(1.45);filter:brightness(2.2)}
  100%{transform:scale(.1);opacity:0}
}
@keyframes orbGone{to{transform:scale(.5) translateY(24px);opacity:0}}

/* ---------- camadas de efeito dos lances ---------- */
.fx-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Puskás: vinheta dourada + granulado de época */
.cinema.sepia .stadium{filter:sepia(.75) brightness(.5) contrast(1.15)}
.cinema.sepia .arena{filter:sepia(.35) contrast(1.1)}
.puskas-vinheta{
  background:radial-gradient(ellipse at 30% 60%, transparent 20%, rgba(60,30,0,.55) 70%, rgba(0,0,0,.9) 100%);
  animation:fadeVeil .5s ease-out;
}
.fighter.puskas-spin{
  animation:puskasSpin 1.15s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 30px rgba(255,209,102,1)) drop-shadow(0 22px 18px rgba(0,0,0,.5));
}
@keyframes puskasSpin{
  0%{transform:translateY(4px) scale(.96)}
  20%{transform:translateY(-90px) rotate(-120deg) scale(1.05)}
  45%{transform:translateY(-110px) rotate(-300deg) scale(1.08)}
  75%{transform:translateY(-56px) rotate(-540deg)}
  100%{transform:translateY(0) rotate(-720deg)}
}
.fighter.puskas-spin .s-leg-front{animation:scissorA .3s ease-out 4}
.fighter.puskas-spin .s-leg-back {animation:scissorB .3s ease-out 4}
.fighter.puskas-spin .s-ball     {animation:ballGone .2s forwards}

/* bicicleta livre */
.fighter.bike-kick{animation:bicycle .72s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 20px rgba(255,138,61,.9)) drop-shadow(0 22px 18px rgba(0,0,0,.5))}
.fighter.bike-kick .s-leg-front{animation:scissorA .36s ease-out 2}
.fighter.bike-kick .s-leg-back {animation:scissorB .36s ease-out 2}
.fighter.bike-kick .s-ball{animation:ballGone .2s forwards}

/* massagista */
.heal-veil{background:radial-gradient(ellipse at 22% 62%, rgba(95,224,160,.30), transparent 55%);animation:fadeVeil 1.5s ease-out}
.heal-veil .cross{
  position:absolute;left:20%;top:34%;font-size:60px;color:#5fe0a0;font-weight:900;
  text-shadow:0 0 30px rgba(95,224,160,.9);
  animation:crossUp 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes crossUp{0%{opacity:0;transform:translateY(30px) scale(.5)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.1)}}
.fighter.healing{filter:drop-shadow(0 0 22px rgba(95,224,160,.95));animation:healPulse .5s ease-in-out 3}
@keyframes healPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.heal-ring{
  position:absolute;width:120px;height:34px;margin:-17px 0 0 -60px;
  border:3px solid #5fe0a0;border-radius:50%;opacity:0;
  animation:ringUp 1.1s ease-out forwards;
}
@keyframes ringUp{0%{opacity:.9;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-120px) scale(1.3)}}

/* hidratação */
.water-veil{background:linear-gradient(180deg, rgba(63,169,255,.22), transparent 60%);animation:fadeVeil 1.3s ease-out}
.water-veil .drops{
  position:absolute;inset:0;
  background:repeating-linear-gradient(100deg, rgba(143,208,255,.35) 0 2px, transparent 2px 26px);
  animation:rain .7s linear 2;
}
@keyframes rain{from{transform:translateY(-40px)}to{transform:translateY(40px)}}
.fighter.refresh{filter:drop-shadow(0 0 20px rgba(63,169,255,.95));animation:healPulse .45s ease-in-out 2}

/* ola */
.ola-sweep{
  background:linear-gradient(90deg, transparent, rgba(255,201,60,.45), transparent);
  width:45%;animation:olaRun 1.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes olaRun{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
.ola .stands{animation:olaBright .5s ease-in-out 3}
.ola .fan{animation-duration:.42s}
@keyframes olaBright{0%,100%{filter:brightness(1)}50%{filter:brightness(2.2) saturate(1.4)}}

/* cartão vermelho */
.card-veil{background:radial-gradient(ellipse at 75% 45%, rgba(255,77,94,.28), transparent 60%);animation:fadeVeil 1.6s ease-out}
.card-veil .redcard{
  position:absolute;left:50%;top:38%;width:120px;height:170px;margin:-85px 0 0 -60px;
  background:linear-gradient(140deg,#ff5c6a,#c81e2b);border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
  animation:cardIn 1.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cardIn{
  0%{opacity:0;transform:translate(-40vw,60px) rotate(-220deg) scale(.4)}
  35%{opacity:1;transform:translate(0,0) rotate(-8deg) scale(1)}
  62%{transform:translate(0,-10px) rotate(4deg) scale(1.04)}
  100%{opacity:0;transform:translate(24vw,-40px) rotate(22deg) scale(.8)}
}
.fighter.sent-off{filter:grayscale(.7) brightness(.7) drop-shadow(0 0 16px rgba(255,77,94,.8))}

/* VAR */
.var-veil{background:rgba(4,10,20,.55);animation:fadeVeil 1.7s ease-out}
.var-veil .var-frame{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(420px,64vw);height:min(240px,36vh);
  border:3px solid #8fd0ff;border-radius:10px;color:#8fd0ff;
  font-weight:900;letter-spacing:.4em;font-size:26px;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:8px 12px;
  box-shadow:0 0 40px rgba(143,208,255,.4), inset 0 0 40px rgba(143,208,255,.16);
  animation:varIn 1.6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes varIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.var-veil .scan{
  position:absolute;left:0;right:0;height:3px;background:#8fd0ff;
  box-shadow:0 0 22px #8fd0ff;opacity:.8;
  animation:scanRun 1.5s cubic-bezier(.4,0,.2,1) 2;
}
@keyframes scanRun{from{top:16%}to{top:74%}}

/* tiro de meta */
.bolt-veil{
  background:radial-gradient(ellipse at 50% 90%, rgba(196,132,252,.28), transparent 60%);
  animation:fadeVeil 1.2s ease-out;
}
.skill.recharged{
  animation:recharge .7s cubic-bezier(.22,1,.36,1);
  border-color:#c084fc !important;
}
@keyframes recharge{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,132,252,.8)}
  40%{transform:scale(1.16);box-shadow:0 0 22px 6px rgba(196,132,252,.75);filter:brightness(1.8)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,132,252,0)}
}
@keyframes fadeVeil{from{opacity:0}to{opacity:1}}

/* ============================================================
   SKILLS
   ============================================================ */
.skill-row{
  display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:9px;
}
.skill{
  position:relative;border:1px solid var(--stroke);border-radius:11px;
  background:linear-gradient(180deg,rgba(120,190,255,.14),rgba(255,255,255,.03));
  color:var(--txt);font-family:inherit;cursor:pointer;overflow:hidden;
  padding:7px 4px 6px;text-align:center;
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .18s,background .18s,filter .2s;
}
.skill:hover:not(:disabled):not(.locked){transform:translateY(-4px);border-color:rgba(143,208,255,.6)}
.skill:active:not(:disabled){transform:scale(.96)}
.skill .sk-icon{font-size:17px;display:block;line-height:1.1}
.skill .sk-name{font-size:8.5px;letter-spacing:.06em;display:block;margin-top:2px;color:#c3d4e8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill .sk-key{position:absolute;top:3px;left:5px;font-size:8px;color:#6f819a}
.skill .sk-cd{position:absolute;top:3px;right:5px;font-size:8.5px;color:#8fd0ff;font-weight:700}
.skill .sk-cd.turns{color:#ffd166}
.skill .sk-cd.nosta{color:#ff8a95}
.skill .sk-lock{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-size:16px;background:rgba(4,9,17,.72)}
.skill.locked{cursor:not-allowed;filter:grayscale(1)}
.skill.locked .sk-lock{display:flex}
.skill:disabled:not(.locked){opacity:.45;cursor:not-allowed}
.skill.cooling{filter:saturate(.4)}
.skill.mini{padding:9px 5px;cursor:default}
.skill.mini .sk-name{font-size:9px}
.map-skills{margin-bottom:16px}

.skill-panel{text-align:center;width:min(460px,100%)}
.skill-reveal{padding:16px 0 20px;animation:cardDeal .5s cubic-bezier(.22,1,.36,1)}
.skill-reveal .sk-big{font-size:64px;animation:bob 2.4s ease-in-out infinite}
.skill-reveal h3{font-size:20px;letter-spacing:.1em;margin:8px 0 6px;color:var(--gold)}
.skill-reveal p{color:var(--txt-dim);font-size:13.5px;line-height:1.5}
.sk-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.sk-meta span{font-size:10.5px;letter-spacing:.08em;background:rgba(0,0,0,.3);
  padding:5px 9px;border-radius:7px;color:#c8d6ea}

/* ============================================================
   CRIAÇÃO com prévia do boneco
   ============================================================ */
.create-split{display:flex;gap:18px;align-items:flex-start}
.create-form{flex:1;min-width:0}
.create-preview{
  width:132px;flex:none;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(ellipse at bottom,rgba(63,169,255,.18),transparent 70%);
  border-radius:16px;padding:6px;
}
.fighter.preview{width:120px;animation:idle 2.4s ease-in-out infinite}

/* ============================================================
   MODO INFINITO / RELÍQUIAS
   ============================================================ */
.btn-endless{
  background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(37,99,235,.45));
  border-color:rgba(167,139,250,.5);
}
.btn-endless:hover{background:linear-gradient(135deg,rgba(139,92,246,.7),rgba(59,130,246,.55))}

.map-node .mn-power{
  display:block;font-size:9px;letter-spacing:.06em;color:#ffb4b4;margin-top:3px;
}
.relic-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.relic-chip{
  font-size:10.5px;letter-spacing:.06em;padding:5px 9px;border-radius:8px;
  background:rgba(196,132,252,.16);border:1px solid rgba(196,132,252,.42);color:#e9d5ff;
}
.up-card.relic{
  border-color:rgba(196,132,252,.5);
  background:linear-gradient(180deg,rgba(196,132,252,.18),rgba(59,130,246,.07));
}
.up-card.relic:hover{border-color:#c084fc;box-shadow:0 18px 40px rgba(196,132,252,.25)}

/* ============================================================
   ABAS + COLEÇÃO
   ============================================================ */
.tabs{display:flex;gap:8px;margin:4px 0 16px}
.tab{
  flex:1;padding:9px 12px;border-radius:10px;cursor:pointer;font-family:inherit;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--txt-dim);
  font-size:11px;letter-spacing:.12em;font-weight:700;transition:all .2s;
}
.tab:hover{background:rgba(255,255,255,.09);color:var(--txt)}
.tab.active{background:rgba(255,209,102,.16);border-color:rgba(255,209,102,.5);color:var(--gold)}

.collection-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px;
}
.col-card{
  border:1px solid var(--stroke);border-radius:13px;padding:12px 10px;text-align:center;
  background:rgba(255,255,255,.035);
  animation:logIn .35s backwards;
}
.col-card .c-icon{font-size:26px}
.col-card h4{font-size:11.5px;letter-spacing:.08em;margin:6px 0 4px}
.col-card p{font-size:10.5px;color:var(--txt-dim);line-height:1.45}
.col-card.has{border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.09)}
.col-card.locked{filter:grayscale(1);opacity:.6}

/* ---------- responsivo ---------- */
@media (max-width:640px){
  .skill-row{grid-template-columns:repeat(4,1fr)}
  .luck-orb{width:74px;height:74px}
  .luck-orb.epico{width:80px;height:80px}
  .luck-orb.lendario{width:94px;height:94px}
  .lo-icon{font-size:24px}
  .skill .sk-name{font-size:8px}
  .create-split{flex-direction:column-reverse;align-items:center}
  .create-preview{width:110px}
  .collection-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media (max-width:640px){
  .panel{padding:20px 16px}
  .hud-card{width:48vw;padding:8px 9px}
  .hud-name{font-size:11px}
  .actions{grid-template-columns:repeat(2,1fr)}
  .arena{padding:0 8vw}
  .log{height:72px;font-size:12px}
  .map-track{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}