/* POLITICS CLASH — arena 5 candidatos + ALGUÉM MELHOR */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg1: #0d1b2a;
  --bg2: #1b263b;
  --gold: #ffd60a;
  --melhor: #2d6a4f;
}

html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at 50% 30%, var(--bg2), var(--bg1) 75%);
  color: #fff;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* nenhum bloco pode ser esmagado quando falta altura (evita textos sobrepostos);
   só a arena é elástica */
body > * { flex-shrink: 0; }
.arena { flex-shrink: 1; }

/* ---------- topo ---------- */
.topbar { text-align: center; padding: 8px 12px 0; width: 100%; }
.topbar h1 {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  letter-spacing: 2px; font-weight: 900; text-shadow: 0 3px 0 #000;
}
.topbar .clash { color: var(--gold); }
.tagline { opacity: .75; font-size: clamp(.72rem, 3vw, .95rem); margin-top: 2px; }

/* ---------- total vistoso ---------- */
.total-box { text-align: center; margin-top: 10px; }
.total-label {
  font-size: clamp(.6rem, 2.6vw, .75rem); letter-spacing: 3px;
  font-weight: 800; opacity: .7;
}
.total-num {
  font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 900; line-height: 1;
  color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 30px rgba(255, 214, 10, .45);
  font-variant-numeric: tabular-nums;
}
.total-num.bump { animation: total-bump .25s ease; }
@keyframes total-bump { 40% { transform: scale(1.08); } }

/* ---------- ranking ---------- */
.ranking {
  display: flex; flex-direction: column; gap: 3px;
  width: min(94%, 560px); margin-top: 8px;
}
.rank-row {
  display: grid; grid-template-columns: clamp(92px, 26vw, 150px) 1fr auto auto;
  gap: 8px; align-items: center;
  background: rgba(255,255,255,.06); border-radius: 8px;
  padding: 3px 10px; font-size: clamp(.72rem, 3vw, .88rem);
}
.rank-melhor { background: color-mix(in srgb, var(--melhor) 55%, transparent); outline: 1px solid var(--gold); }
.rank-melhor .rank-name { color: var(--gold); }
.rank-name { font-weight: 800; line-height: 1.05; }
.rank-melhor .rank-name { font-size: .92em; }
.rank-bar { height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.rank-fill {
  display: block; height: 100%; width: 2%;
  background: linear-gradient(90deg, var(--gold), #ff9f1c);
  border-radius: 999px; transition: width .5s ease;
}
.rank-count { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right; }
.rank-fighters { font-size: .68rem; opacity: .75; min-width: 4ch; text-align: right; }
.rank-legend { font-size: .62rem; opacity: .5; margin-top: 3px; text-align: center; letter-spacing: .5px; }

/* ---------- último golpe ---------- */
.lasthit {
  margin-top: 8px; font-size: clamp(.72rem, 3.1vw, .92rem);
  background: rgba(0,0,0,.35); padding: 5px 14px; border-radius: 999px;
  max-width: 94%; text-align: center; min-height: 1.9em;
}

/* feed das últimas cidades */
.cities-feed {
  margin-top: 5px; font-size: clamp(.62rem, 2.7vw, .8rem); opacity: .7;
  max-width: 94%; text-align: center; min-height: 1.4em;
}
.cities-feed b { color: var(--gold); font-weight: 700; }

/* ---------- arena ---------- */
.arena {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  width: min(100%, 760px);
  flex: 1; min-height: 320px;
  padding: 14px clamp(2px, 2vw, 20px) 6px;
}

.candidates {
  display: flex; justify-content: center; align-items: flex-end;
  width: 100%; gap: clamp(1px, 1vw, 10px);
}

.fighter {
  background: none; border: none; cursor: pointer;
  flex: 1 1 0; max-width: 132px; min-width: 0;
  position: relative; color: inherit;
  -webkit-user-select: none; user-select: none;
  transition: transform .4s ease, opacity .4s ease;
}
.char { width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0,0,0,.5)); }
.fighter-name {
  font-weight: 800; font-size: clamp(.62rem, 2.6vw, .82rem);
  color: var(--gold); text-shadow: 1px 1px 0 #000;
}
.fighter:active .char { transform: scale(.95); }

/* ataque do candidato */
.fighter.attack .body-group { animation: lunge .28s ease; }
@keyframes lunge { 40% { transform: translateY(-14px) scale(1.06); } }
.fighter.attack .arm-punch { animation: punch .28s ease; }
@keyframes punch { 40% { transform: translateX(18px) rotate(-8deg); } }

/* apanhar */
.fighter.hitstun .body-group { animation: shake .3s ease; }
@keyframes shake {
  25% { transform: translateX(-5px) rotate(-3deg); }
  75% { transform: translateX(5px) rotate(3deg); }
}

/* expulso da tela (FORA! / VAZA!) */
.fighter.expelled { transform: translateY(-70vh) rotate(24deg); opacity: 0; }

/* medo (Pede pra sair!) */
.fighter.fear .body-group { animation: fear 2.2s ease; }
@keyframes fear {
  15% { transform: scale(.72) translateY(28px); }
  30% { transform: scale(.7) translateY(30px) translateX(-4px); }
  45% { transform: scale(.72) translateY(28px) translateX(4px); }
  60% { transform: scale(.7) translateY(30px) translateX(-4px); }
  85% { transform: scale(.72) translateY(28px); }
}

/* pulo do chute no bumbum */
.fighter.jump .body-group { animation: jump .5s ease; }
@keyframes jump { 40% { transform: translateY(-34px); } 70% { transform: translateY(-8px); } }

/* ---------- ALGUÉM MELHOR (runner) ---------- */
.outro-runner {
  position: absolute; z-index: 6; width: clamp(90px, 18vw, 140px);
  left: 50%; top: 20%;
  transition: left .28s ease, top .28s ease;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 214, 10, .55));
}
.runner-svg .char { width: 100%; }
.runner-bubble { top: -14px; }

.btn-melhor {
  margin-top: 8px;
  background: linear-gradient(180deg, #40916c, var(--melhor));
  color: #fff; border: 3px solid var(--gold); border-radius: 16px;
  padding: 10px 22px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 5px 0 #14452f, 0 0 24px rgba(255, 214, 10, .25);
  animation: melhor-glow 2s infinite;
}
@keyframes melhor-glow { 50% { box-shadow: 0 5px 0 #14452f, 0 0 38px rgba(255, 214, 10, .55); } }
.btn-melhor:active { transform: translateY(3px); box-shadow: 0 2px 0 #14452f; }
.melhor-emoji { font-size: 1.6rem; }
.melhor-title { font-weight: 900; font-size: clamp(.85rem, 3.8vw, 1.15rem); letter-spacing: .5px; }

/* ---------- balões de fala ---------- */
.bubble {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #111; font-weight: 700;
  font-size: clamp(.62rem, 2.6vw, .8rem);
  padding: 5px 9px; border-radius: 11px;
  max-width: 150px; width: max-content;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  z-index: 5; pointer-events: none;
  animation: bubble-pop .2s ease;
}
.bubble::after {
  content: ""; position: absolute; bottom: -8px; left: 50%;
  border: 8px solid transparent; border-top-color: #fff;
  border-bottom: none; transform: translateX(-50%);
}
@keyframes bubble-pop { from { transform: translateX(-50%) scale(.5); opacity: 0; } }

/* ---------- efeitos ---------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.fx-pow {
  position: absolute; font-weight: 900; color: var(--gold);
  text-shadow: 2px 2px 0 #000; font-size: clamp(1rem, 4.5vw, 1.6rem);
  animation: pow-float 1.1s ease forwards; white-space: nowrap;
}
@keyframes pow-float {
  from { transform: scale(.4) rotate(-8deg); opacity: 1; }
  60%  { transform: scale(1.25) rotate(4deg) translateY(-26px); opacity: 1; }
  to   { transform: scale(1.4) rotate(8deg) translateY(-50px); opacity: 0; }
}
/* banner do nome do golpe: acima dos personagens, abaixo do placar */
.move-banner {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
  font-weight: 900; font-size: clamp(.95rem, 4.2vw, 1.4rem);
  color: var(--gold); text-shadow: 2px 2px 0 #000; white-space: nowrap;
  z-index: 7; pointer-events: none; max-width: 98%;
}
.move-banner.pop { animation: move-pop .3s ease; }
@keyframes move-pop { 40% { transform: translateX(-50%) scale(1.18); } }
.fx-pai {
  position: absolute; bottom: 26%; font-size: clamp(2rem, 9vw, 3.4rem);
  animation: pai-run 1.2s linear forwards;
}
@keyframes pai-run { from { left: -15%; } to { left: 105%; } }
.fx-pipoca {
  position: absolute; top: -10%; font-size: clamp(1.2rem, 5vw, 2rem);
  animation: pipoca-fall 1.3s ease-in forwards;
}
@keyframes pipoca-fall { to { transform: translateY(60vh) rotate(360deg); opacity: .2; } }

/* ---------- compartilhar ---------- */
.share { text-align: center; padding: 10px 0 6px; width: 100%; }
.share-row {
  display: flex; gap: 8px; justify-content: center;
  width: min(94%, 560px); margin: 0 auto;
}
.sbtn {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 4px; border: none; border-radius: 12px; cursor: pointer;
  font-weight: 800; font-size: clamp(.7rem, 3vw, .9rem); font-family: inherit;
  text-decoration: none; white-space: nowrap;
}
.sbtn svg { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor; }
.sbtn:active { transform: translateY(2px); }
.sbtn-wa { background: #25d366; color: #fff; box-shadow: 0 4px 0 #128c4a; }
.sbtn-wa:active { box-shadow: 0 2px 0 #128c4a; }
.sbtn-x { background: #000; color: #fff; outline: 1px solid #3a3a3a; box-shadow: 0 4px 0 #2b2b2b; }
.sbtn-x:active { box-shadow: 0 2px 0 #2b2b2b; }
.sbtn-sys { background: var(--gold); color: #111; box-shadow: 0 4px 0 #b89b00; }
.sbtn-sys:active { box-shadow: 0 2px 0 #b89b00; }
.mycount { margin-top: 8px; font-size: .85rem; opacity: .85; }

/* ---------- anúncios ---------- */
.ad-slot { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-top { width: min(94%, 468px); min-height: 50px; margin: 0 auto 8px; }
.ad-side {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  width: 160px; height: 600px; display: none;
}
@media (min-width: 1100px) { .ad-side { display: flex; } }
.ad-native { width: min(94%, 560px); margin: 6px auto; }

/* ---------- rodapé ---------- */
.footer {
  font-size: .68rem; opacity: .55; text-align: center;
  padding: 12px 16px 18px; max-width: 640px; line-height: 1.5;
}
.footer p + p { margin-top: 6px; }