/* ============================================================
   ⚔️ DESEMPATES DO DUELO — jogam-se depois do frente-a-frente
   com o chefe. A vantagem do duelo entra como avanço inicial.
   ============================================================ */

/* ---------- 🤜 CABO DE GUERRA ---------- */
.tug{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; padding:8px 4px }

.tug-rope{
  position:relative; width:100%; height:26px; border-radius:99px;
  background:linear-gradient(90deg,#c98b3d,#e8bb72,#c98b3d);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
}
/* as duas linhas de meta */
.tug-mark{ position:absolute; top:-6px; bottom:-6px; width:3px; background:rgba(255,255,255,.55); border-radius:2px }
.tug-mark.foe{ left:8% } .tug-mark.me{ right:8% }

.tug-knot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  font-size:1.6rem; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transition:left .12s linear;
}
.tug-knot.yank{ animation:tugYank .18s ease }
@keyframes tugYank{ 50%{ transform:translate(-50%,-50%) scale(1.35) } }

.tug-row{ display:flex; justify-content:space-between; width:100%; padding:0 6px }
.tug-fig{ width:78px; height:78px; object-fit:contain; transition:transform .15s ease }
.tug-fig.me{ transform:scaleX(-1) }                 /* vira-se para a corda */
.tug-fig.me.pull{ transform:scaleX(-1) translateX(6px) rotate(-6deg) }
.tug-fig.foe.pull{ transform:translateX(-6px) rotate(6deg) }

.tug-bar{ width:100%; height:9px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden }
.tug-bar i{ display:block; height:100%; background:linear-gradient(90deg,#6ee7a0,#33c46f); transition:width .12s linear }

.tug-btn{ min-width:190px; font-size:1.15rem; padding:15px 22px; touch-action:manipulation; user-select:none }

/* ---------- 🔋 CORRIDA DA BATERIA ---------- */
.brace{ display:flex; justify-content:center; gap:34px; width:100%; padding:6px 0 2px }
.brace-side{ display:flex; flex-direction:column; align-items:center; gap:7px }
.brace-side img{ width:62px; height:62px; object-fit:contain }
.brace-side span{ font-size:.76rem; font-weight:800; opacity:.9 }

/* a pilha: enche de baixo para cima */
.brace-cell{
  position:relative; width:66px; height:150px; border-radius:11px;
  border:3px solid rgba(255,255,255,.5); background:rgba(0,0,0,.32);
  overflow:hidden; display:flex; align-items:flex-end;
}
/* o "botão" da pilha, em cima */
.brace-cell::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:22px; height:7px; border-radius:3px 3px 0 0; background:rgba(255,255,255,.5);
}
.brace-cell i{ display:block; width:100%; height:0; transition:height .12s linear }
.brace-cell.me i{ background:linear-gradient(180deg,#8ef2b4,#25b45f) }
.brace-cell.foe i{ background:linear-gradient(180deg,#8a8a96,#3b3b47) }
.brace-cell b{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; font-size:1rem; font-weight:900; color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.8);
}
.brace-cell i.zap{ animation:braceZap .16s ease }
@keyframes braceZap{ 50%{ filter:brightness(1.7) } }

.brace-btn{ display:block; margin:16px auto 0; min-width:200px; font-size:1.15rem; padding:15px 22px;
  touch-action:manipulation; user-select:none }

@media (prefers-reduced-motion:reduce){
  .tug-knot.yank,.brace-cell i.zap{ animation:none }
}