/* RING 2026 — estilo quadrinho: contorno grosso, sombra dura, retícula, balões. */
:root {
  --ink: #141019;
  --paper: #fff7e6;
  --paper2: #f3e6c8;
  --bg: #1a1630;
  --bg2: #241e40;
  --gold: #ffc83d;
  --gold2: #e0a21a;
  --red: #e63b2e;
  --blue: #2a63d6;
  --muted: #5b5468;
  --muted-dark: #b9b2cc;
  --font-display: 'Bangers', 'Impact', sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --shadow: 6px 6px 0 var(--ink);
  --border: 4px solid var(--ink);
  --halftone: radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.6px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg) var(--halftone) 0 0 / 9px 9px;
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button { font: inherit; cursor: pointer; }
h2 {
  font-family: var(--font-display); letter-spacing: .04em; font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0 0 .7rem; color: var(--gold);
  text-shadow: 3px 3px 0 var(--ink);
}
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }

/* painel de quadrinho: papel creme, borda preta, sombra deslocada */
.panel {
  background: var(--paper); color: var(--ink);
  border: var(--border); box-shadow: var(--shadow); border-radius: 10px;
}

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--ink);
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 4px 0 var(--ink);
}
.brand { font-family: var(--font-display); font-size: 2rem; letter-spacing: .05em; line-height: 1; display: grid; grid-template-columns: auto auto; column-gap: 4px; }
.brand .brand-ring { color: var(--paper); text-shadow: 3px 3px 0 var(--red); }
.brand .brand-ano { color: var(--gold); text-shadow: 3px 3px 0 var(--blue); }
.brand small { grid-column: 1 / -1; font-family: var(--font-cond); font-size: .75rem; letter-spacing: .18em; color: var(--muted-dark); text-transform: uppercase; }
.status { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; font-family: var(--font-cond); font-size: 1rem; font-weight: 700; }
.pill { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 2px 12px; box-shadow: 3px 3px 0 var(--gold2); }
.pill.fonte { background: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.pill.fonte.oficial { background: #6fe39a; }
.btn-doar {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 6px 16px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s, box-shadow .15s; min-height: 44px;
}
.btn-doar::before { content: ''; width: 18px; height: 18px; background: var(--red); border: 2px solid var(--ink); clip-path: polygon(50% 100%, 0 38%, 12% 10%, 32% 4%, 50% 20%, 68% 4%, 88% 10%, 100% 38%); }
.btn-doar:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-doar:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-doar.big { font-size: 1.7rem; padding: 12px 30px; }

/* ===== HUD ===== */
.hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 16px 0 10px; }
.hp { font-family: var(--font-cond); }
.hp-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.hp-name { font-size: clamp(.9rem, 2.6vw, 1.35rem); text-shadow: 2px 2px 0 var(--ink); }
.hp-pct { font-family: var(--font-display); font-size: clamp(1.3rem, 3.6vw, 2rem); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 var(--ink); letter-spacing: .04em; }
.hp-track {
  position: relative; height: 26px; background: var(--paper2);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(20,16,25,.08) 6px 8px);
  border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink);
}
.hp-fill { position: absolute; top: 0; bottom: 0; width: 0; background: var(--hp, var(--gold)); transition: width .6s cubic-bezier(.2,.9,.3,1.2); z-index: 2; }
.hp-fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.18) 8px 12px); }
.hp-ghost { position: absolute; top: 0; bottom: 0; width: 0; background: rgba(20,16,25,.35); transition: width 1.2s ease .3s; z-index: 1; }
.hp.left .hp-fill, .hp.left .hp-ghost { left: 0; }
.hp.right .hp-fill, .hp.right .hp-ghost { right: 0; }
.hp-votes { font-size: .9rem; color: var(--muted-dark); margin-top: 4px; font-variant-numeric: tabular-nums; font-weight: 700; }
.hp.right .hp-votes { text-align: right; }
.round-box {
  text-align: center; font-family: var(--font-display); line-height: .9; padding: 6px 14px;
  background: var(--paper); color: var(--ink); border: var(--border); border-radius: 10px; box-shadow: 4px 4px 0 var(--gold);
  transform: rotate(-3deg);
}
.round-box small { display: block; font-size: .75rem; letter-spacing: .25em; }
.round-box b { font-size: 2.4rem; color: var(--red); -webkit-text-stroke: 1px var(--ink); }
.round-box em { display: block; font-family: var(--font-cond); font-style: normal; font-weight: 900; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* ===== Arena ===== */
.arena {
  --cent-left: 16%; --cent-right: 84%;
  position: relative; border: var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
  background: radial-gradient(ellipse at 50% 0%, #4a3a7a 0%, var(--bg2) 45%, var(--bg) 100%);
  padding: 60px 16px 70px;
}
.lights {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    conic-gradient(from 155deg at 15% -10%, transparent 0 18deg, rgba(255,200,61,.18) 22deg 32deg, transparent 36deg),
    conic-gradient(from 205deg at 85% -10%, transparent 0 18deg, rgba(255,200,61,.18) 22deg 32deg, transparent 36deg);
}
/* torcida: duas fileiras de cabeças em silhueta sobre retícula */
.crowd {
  position: absolute; left: 0; right: 0; top: 0; height: 44%; pointer-events: none;
  background-image:
    radial-gradient(circle at 14px 16px, #2d2550 9px, transparent 10px),
    radial-gradient(circle at 40px 28px, #231c42 10px, transparent 11px),
    radial-gradient(circle, rgba(255,255,255,.08) 1.2px, transparent 1.6px);
  background-size: 52px 36px, 52px 36px, 9px 9px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.crowd.hype { animation: crowd .35s steps(2) 4; }
@keyframes crowd { to { background-position: 0 -6px, 0 -6px, 0 0; } }

/* placas da torcida */
.placas { position: absolute; left: 0; right: 0; top: 6px; height: 40%; pointer-events: none; }
.placa {
  position: absolute; top: 0; max-width: 15%; transform: rotate(var(--rot, 0deg));
  font-family: var(--font-cond); font-weight: 900; font-size: clamp(.6rem, 1.5vw, .85rem); letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 4px 8px; border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink); white-space: normal; text-align: center; line-height: 1.1; overflow-wrap: anywhere;
  animation: bob 2.4s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.placa::after { content: ''; position: absolute; left: 50%; top: 100%; width: 5px; height: 26px; background: #7a5a2a; border: 2px solid var(--ink); border-top: 0; transform: translateX(-50%); }
.placa.left { background: #ffd9d4; } .placa.right { background: #d4e2ff; }
.placa.wave { animation: wave .25s ease-in-out 6; }
@keyframes bob { 50% { transform: rotate(var(--rot, 0deg)) translateY(-5px); } }
@keyframes wave { 50% { transform: rotate(calc(var(--rot, 0deg) + 12deg)) translateY(-14px); } }

.ring { position: relative; margin: 0 auto; max-width: 820px; aspect-ratio: 2 / 1; min-height: 300px; }
.mat {
  position: absolute; left: 6%; right: 6%; top: 28%; bottom: 0;
  background: var(--paper);
  background-image: radial-gradient(circle, rgba(20,16,25,.10) 1.3px, transparent 1.7px);
  background-size: 8px 8px;
  border: 5px solid var(--ink); border-bottom-width: 22px; border-radius: 8px / 60px;
  box-shadow: inset 0 -10px 0 #b23a3a, 0 14px 0 #8a2a2a, 0 26px 40px rgba(0,0,0,.6);
}
.mat-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-3deg);
  font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 3rem); color: rgba(20,16,25,.14); letter-spacing: .1em;
  background: none; border: 0; padding: 8px 16px; min-height: 44px;
}
.mat-logo:hover { color: rgba(20,16,25,.3); }
.post { position: absolute; width: 12px; height: 36%; background: var(--gold); border: 3px solid var(--ink); border-radius: 4px; }
.post.tl, .post.tr { top: 0; } .post.bl, .post.br { bottom: 12px; }
.post.tl, .post.bl { left: 6%; } .post.tr, .post.br { right: 6%; }
.post.bl, .post.br { background: var(--paper2); }
.ropes { position: absolute; left: 6%; right: 6%; pointer-events: none; }
.ropes.back { top: 4%; height: 26%; }
.ropes.front { bottom: 16px; height: 30%; }
.ropes i { display: block; height: 6px; border-radius: 3px; margin-bottom: calc(26% / 3); box-shadow: 0 0 0 2px var(--ink); }
.ropes.back i { background: var(--paper2); }
.ropes.front i:nth-child(1) { background: var(--red); }
.ropes.front i:nth-child(2) { background: var(--paper); }
.ropes.front i:nth-child(3) { background: var(--blue); }
.ring.shake { animation: shake .4s; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 0); } 20%, 80% { transform: translate(4px, 0); }
  30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -2px); }
}

/* ===== Árbitro ===== */
.referee {
  position: absolute; left: 50%; bottom: 30%; width: 11%; max-width: 80px; aspect-ratio: 70 / 120;
  transform: translateX(-50%); cursor: pointer; z-index: 1;
  filter: drop-shadow(0 8px 4px rgba(0,0,0,.35));
}
.referee svg { width: 100%; height: 100%; overflow: visible; }
.referee .body { animation: idle 2s ease-in-out infinite; transform-origin: 50% 100%; }
.referee.whistle .head { animation: whistle .5s ease-in-out 2; transform-origin: 50% 80%; }
@keyframes whistle { 50% { transform: rotate(-12deg) translateY(-4px); } }

/* ===== Lutadores ===== */
.fighter {
  position: absolute; bottom: 12%; width: 28%; max-width: 230px; aspect-ratio: 100 / 140;
  transform: scaleX(var(--face)); z-index: 2;
  filter: drop-shadow(0 12px 6px rgba(0,0,0,.4));
  will-change: transform;
}
.fighter.left { left: 15%; }
.fighter.right { right: 15%; }
.fighter svg { width: 100%; height: 100%; overflow: visible; }
.fighter .arm-front { transform-origin: 62px 82px; }
.fighter .arm-back { transform-origin: 40px 82px; }
.fighter .body { animation: idle 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.fighter.right .body { animation-delay: .8s; }
@keyframes idle { 50% { transform: translateY(3px) scaleY(.985); } }
/* o lutador da direita é espelhado; textos (número, 01) voltam a ler certo */
.fighter.right text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* expressões: só um grupo de olhos e uma boca visíveis por vez */
.fighter .eyes, .fighter .mouth { display: none; }
.fighter .eyes-normal, .fighter .mouth-grin { display: inline; }
.fighter.leading .mouth-grin { display: none; } .fighter.leading .mouth-smile { display: inline; }
.fighter.behind .mouth-grin, .fighter.behind .mouth-smile { display: none; } .fighter.behind .mouth-worry { display: inline; }
.fighter.hit .eyes-normal { display: none; } .fighter.hit .eyes-hit { display: inline; }
.fighter.hit .mouth { display: none; } .fighter.hit .mouth-worry { display: inline; }
.fighter.ko .eyes { display: none; } .fighter.ko .eyes-ko { display: inline; }
.fighter.ko .mouth { display: none; } .fighter.ko .mouth-ko { display: inline; }
.fighter.win .mouth { display: none; } .fighter.win .mouth-smile { display: inline; }

.fighter.attack { animation: attack .55s cubic-bezier(.2,.9,.2,1); }
@keyframes attack {
  0%   { transform: translateX(0) scaleX(var(--face)); }
  35%  { transform: translateX(calc(var(--dir) * 26%)) scaleX(var(--face)); }
  100% { transform: translateX(0) scaleX(var(--face)); }
}
.fighter.attack .arm-front { animation: punch .55s cubic-bezier(.2,.9,.2,1); }
@keyframes punch { 30%, 55% { transform: rotate(-95deg) translate(0, -4px); } }

.fighter.hit { animation: hit .6s ease-out; }
@keyframes hit {
  0%   { transform: translateX(0) scaleX(var(--face)) rotate(0); }
  20%  { transform: translateX(calc(var(--dir) * -14%)) scaleX(var(--face)) rotate(calc(var(--dir) * -12deg)); filter: brightness(1.6) drop-shadow(0 12px 6px rgba(0,0,0,.4)); }
  45%  { transform: translateX(calc(var(--dir) * -8%)) scaleX(var(--face)) rotate(calc(var(--dir) * -6deg)); }
  100% { transform: translateX(0) scaleX(var(--face)) rotate(0); }
}
.fighter.ko { animation: ko 1.2s ease-out forwards; }
@keyframes ko {
  40% { transform: translateX(calc(var(--dir) * -10%)) scaleX(var(--face)) rotate(calc(var(--dir) * -20deg)); }
  100% { transform: translateX(calc(var(--dir) * -12%)) translateY(28%) scaleX(var(--face)) rotate(calc(var(--dir) * -88deg)); }
}
.fighter.win .body { animation: win .5s ease-in-out infinite alternate; }
@keyframes win { to { transform: translateY(-14px); } }
.fighter.win .arm-front { transform: rotate(-125deg); transition: transform .3s; }
.fighter.win .arm-back { transform: rotate(125deg); transition: transform .3s; }

/* ===== Lutadores com sprites (imagens geradas) ===== */
.fighter.sprites svg { display: none; }
.fighter.sprites .sprite { position: absolute; inset: 0; animation: idle 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.fighter.sprites.right .sprite { animation-delay: .8s; }
/* as poses do lado azul já vêm desenhadas olhando para a esquerda: nada de espelhar (o --dir continua mandando no movimento) */
.fighter.sprites.right { --face: 1 !important; }
.fighter.sprites img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; }
.fighter.sprites img.idle { opacity: 1; }
.fighter.sprites.attack img.idle, .fighter.sprites.hit img.idle, .fighter.sprites.ko img.idle, .fighter.sprites.win img.idle { opacity: 0; }
.fighter.sprites.attack img.attack { opacity: 1; }
.fighter.sprites.hit img.attack { opacity: 0; }
.fighter.sprites.hit img.hit { opacity: 1; }
.fighter.sprites.win img.win { opacity: 1; }
.fighter.sprites.ko img { opacity: 0; } .fighter.sprites.ko img.ko { opacity: 1; }
/* o sprite de nocaute já está deitado: só cai, sem girar */
.fighter.sprites.ko { animation: ko-sprite .9s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes ko-sprite {
  0%   { transform: translateY(-12%) scaleX(var(--face)); }
  100% { transform: translateY(4%) scaleX(var(--face)); }
}
.fighter.sprites.ko .sprite { animation: none; }
.fighter.sprites.win .sprite { animation: win .5s ease-in-out infinite alternate; }

/* ===== Técnicos e Centrão ===== */
.coach {
  position: absolute; bottom: 30px; width: 9%; max-width: 86px; aspect-ratio: 70 / 100; z-index: 3;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.4));
}
.coach.left { left: 2%; } .coach.right { right: 2%; transform: scaleX(-1); }
.coach svg { width: 100%; height: 100%; overflow: visible; }
.coach .body { animation: idle 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.coach.shout .mega { animation: shout .3s ease-in-out 4; transform-origin: 60px 70px; }
.coach .sound { opacity: 0; }
.coach.shout .sound { opacity: 1; }
@keyframes shout { 50% { transform: rotate(-10deg); } }

.centrao {
  position: absolute; bottom: 30px; left: 50%; width: 9%; max-width: 86px; aspect-ratio: 80 / 110; z-index: 3;
  transform: translateX(-50%); transition: left 1.4s cubic-bezier(.2,.7,.3,1);  /* começa rápido: acompanha mesmo com atualização frequente */
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.4));
}
.centrao svg { width: 100%; height: 100%; overflow: visible; }
.centrao .body { animation: idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.centrao .pupil { transition: transform .4s; }
.centrao.look-left .pupil { transform: translateX(-2px); }
.centrao.look-right .pupil { transform: translateX(2px); }
.centrao.walk .body { animation: walk .4s ease-in-out infinite; }
@keyframes walk { 50% { transform: translateY(-6px) rotate(3deg); } }
.centrao-label {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-cond); font-weight: 900; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 1px 6px; white-space: nowrap;
}

.corner {
  position: absolute; bottom: 8px; font-family: var(--font-cond); font-weight: 700; font-size: .8rem; color: var(--muted-dark);
  max-width: 40%; text-transform: uppercase; letter-spacing: .08em; z-index: 4;
}
.corner.left { left: 14px; } .corner.right { right: 14px; text-align: right; }
.placa:nth-child(even) { top: 34px; }
.corner b { color: var(--paper); }

/* ===== Efeitos: onomatopeia, faixa, balões ===== */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 6; }
.pow {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-8deg) scale(.2);
  font-family: var(--font-display); font-size: clamp(2rem, 7vw, 4rem); color: var(--ink); letter-spacing: .04em;
  padding: .35em .7em; display: grid; place-items: center;
  animation: pow .75s cubic-bezier(.2,1.4,.3,1) forwards;
}
.pow::before {
  content: ''; position: absolute; inset: -14% -8%; z-index: -1; background: var(--gold);
  clip-path: polygon(50% 0%, 61% 14%, 78% 4%, 80% 22%, 98% 22%, 88% 38%, 100% 50%, 88% 62%, 98% 78%, 80% 78%, 78% 96%, 61% 86%, 50% 100%, 39% 86%, 22% 96%, 20% 78%, 2% 78%, 12% 62%, 0% 50%, 12% 38%, 2% 22%, 20% 22%, 22% 4%, 39% 14%);
  filter: drop-shadow(4px 4px 0 var(--ink));
}
.pow.red::before { background: #ff7b6e; } .pow.blue::before { background: #7fa6ff; }
@keyframes pow {
  30% { transform: translate(-50%,-50%) rotate(6deg) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%,-70%) rotate(0) scale(1); opacity: 0; }
}
.banner {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%) scale(0); opacity: 0;
  font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 3.6rem); letter-spacing: .06em;
  background: var(--paper); color: var(--red); -webkit-text-stroke: 1px var(--ink);
  padding: 4px 26px; border: var(--border); border-radius: 8px; box-shadow: 8px 8px 0 var(--gold);
  white-space: nowrap; pointer-events: none; z-index: 7;
}
.banner.show { animation: banner 2.4s cubic-bezier(.2,1.2,.3,1) forwards; }
@keyframes banner {
  15% { transform: translateX(-50%) scale(1.1) rotate(-3deg); opacity: 1; }
  80% { transform: translateX(-50%) scale(1) rotate(2deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.2); opacity: 0; }
}
.bubble {
  position: absolute; z-index: 8; pointer-events: none;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px;
  padding: 6px 12px; font-family: var(--font-body); font-weight: 900; font-size: clamp(.7rem, 1.6vw, .95rem); line-height: 1.2;
  max-width: 220px; box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%;
  animation: bubble 2.6s cubic-bezier(.2,1.3,.3,1) forwards;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px;
  background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: translateX(-50%) rotate(45deg) skew(10deg, 10deg);
}
.bubble.shout { border-radius: 4px; background: var(--gold); font-family: var(--font-display); font-weight: 400; font-size: clamp(.85rem, 2vw, 1.15rem); letter-spacing: .04em; }
.bubble.shout::after { background: var(--gold); }
@keyframes bubble {
  12% { transform: translate(-50%, -100%) scale(1.08); opacity: 1; }
  85% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(.9); opacity: 0; }
}

/* ===== Narração ===== */
.narrador { margin-top: 18px; padding: 12px 16px; transform: rotate(-.3deg); }
.narrador-head { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; font-weight: 900; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
#narracao { list-style: none; margin: 8px 0 0; padding: 0; max-height: 240px; overflow-y: auto; overflow-anchor: none; }
#narracao li { padding: 7px 0; border-top: 2px dotted rgba(20,16,25,.25); display: grid; grid-template-columns: auto 1fr; gap: 10px; animation: fadein .4s; font-weight: 700; }
#narracao li:first-child { border-top: 0; }
#narracao li time { font-family: var(--font-cond); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
#narracao li.big { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: .03em; color: var(--red); }
#narracao li.big time { align-self: center; }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px); } }

/* ===== Termômetro ===== */
.termo { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; overflow: hidden; transform: rotate(.3deg); }
.termo-item { padding: 12px 14px; text-align: center; border-left: 3px solid var(--ink); }
.termo-item:first-child { border-left: 0; }
.termo-item .k { display: block; font-family: var(--font-cond); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); }
.termo-item .v { display: block; font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.5rem); letter-spacing: .03em; color: var(--ink); transition: color .3s; }
.termo-item .v.red { color: var(--red); } .termo-item .v.blue { color: var(--blue); }

/* ===== Ficha ===== */
.tape { margin-top: 36px; }
.tape-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; overflow: hidden; font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; transform: rotate(-.3deg); }
.tape-grid > div { padding: 10px 14px; border-top: 2px dotted rgba(20,16,25,.25); }
.tape-grid .k { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 900; text-align: center; align-self: center; }
.tape-grid .l { text-align: right; } .tape-grid .r { text-align: left; }
.tape-grid .head { font-family: var(--font-display); font-size: 1.7rem; border-top: 0; letter-spacing: .03em; }
.tape-grid .head.l { color: var(--red); } .tape-grid .head.r { color: var(--blue); }
.tape-grid .head small { display: block; font-family: var(--font-cond); font-size: .8rem; color: var(--muted); letter-spacing: .1em; }

/* ===== Doação ===== */
.doar { margin-top: 36px; text-align: center; padding: 30px 18px; background: var(--gold); transform: rotate(.4deg); }
.doar h2 { color: var(--ink); text-shadow: none; }
.doar p { max-width: 640px; margin: 0 auto 18px; color: var(--ink); font-weight: 700; }
.doar .btn-doar.big { background: var(--paper); }
.pix { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 6px auto 4px; max-width: 640px; }
.pix-qr { width: 180px; height: 180px; background: #fff; padding: 6px; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); }
.pix-info { flex: 1 1 260px; text-align: left; }
.doar .pix-info p { margin: 10px 0 0; max-width: none; font-size: .95rem; }
.pix-chave b { font-family: monospace; font-size: 1.05rem; white-space: nowrap; }
.pix-copiar { font: inherit; font-size: .8rem; font-weight: 800; padding: 2px 8px; margin-left: 4px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; cursor: pointer; }
.pix-confira { font-size: .85rem !important; }
@media (max-width: 560px) { .pix-info { text-align: center; } .pix-qr { width: 150px; height: 150px; } }
.doar-aviso { font-size: .85rem; font-weight: 600 !important; margin-top: 18px !important; }

footer { margin-top: 40px; color: var(--muted-dark); font-size: .88rem; border-top: 3px dotted rgba(255,255,255,.2); padding-top: 18px; }
footer b { color: var(--paper); }
footer .fine { font-family: var(--font-display); color: var(--gold); letter-spacing: .06em; font-size: 1.3rem; text-shadow: 2px 2px 0 var(--ink); }

/* ===== Overlays e toast ===== */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(20,16,25,.7); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 30; padding: 16px; }
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay .card { background: var(--paper); color: var(--ink); border: 6px solid var(--ink); padding: 24px 48px; text-align: center; transform: rotate(-4deg); box-shadow: 12px 12px 0 var(--gold); max-width: 100%; }
.overlay .card small { display: block; font-family: var(--font-cond); letter-spacing: .3em; font-weight: 900; }
.overlay .card b { display: block; font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--red); -webkit-text-stroke: 2px var(--ink); }
.overlay .card span { font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem; }
.overlay .card.sponsors { transform: rotate(1deg); padding: 24px 28px; }
.overlay .card.sponsors ul { list-style: none; padding: 0; margin: 12px 0 18px; text-align: left; font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem; }
.overlay .card.sponsors li { padding: 6px 0; border-top: 2px dotted rgba(20,16,25,.25); }
.overlay .card.sponsors li:first-child { border-top: 0; }
.overlay .card.sponsors button { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; background: var(--gold); border: 3px solid var(--ink); border-radius: 8px; padding: 6px 18px; box-shadow: 3px 3px 0 var(--ink); min-height: 44px; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 40;
  background: var(--paper); color: var(--ink); border: var(--border); box-shadow: var(--shadow); border-radius: 10px;
  padding: 10px 18px; font-family: var(--font-cond); font-weight: 900; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .4s cubic-bezier(.2,1.2,.3,1); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ===== Contagem regressiva (aquecimento) ===== */
.gongo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px;
  background: var(--paper); color: var(--ink); border: var(--border); box-shadow: 4px 4px 0 var(--gold);
  border-radius: 10px; padding: 8px 14px; font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem;
  transform: rotate(-.4deg);
}
.gongo[hidden] { display: none; }
.gongo b { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: .04em; color: var(--red); font-variant-numeric: tabular-nums; }
.gongo small { flex-basis: 100%; font-size: .82rem; color: var(--muted); font-weight: 600; }
.gongo-tag {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold); border: 3px solid var(--ink); border-radius: 6px; padding: 0 8px;
}

/* ===== Objetos arremessados ===== */
.objeto {
  position: absolute; top: 0; z-index: 7; pointer-events: none; white-space: nowrap;
  font-family: var(--font-cond); font-weight: 900; font-size: clamp(.62rem, 1.5vw, .85rem); letter-spacing: .05em;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; padding: 3px 8px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-50%, -140%) rotate(-30deg);
  animation: arremesso 2.4s cubic-bezier(.4,0,.6,1) forwards;
}
.objeto.red { background: #ffd9d4; } .objeto.blue { background: #d4e2ff; }
@keyframes arremesso {
  0%   { transform: translate(-50%, -140%) rotate(-30deg); opacity: 0; }
  10%  { opacity: 1; }
  27%  { transform: translate(-50%, var(--queda, 80px)) rotate(200deg); }
  37%  { transform: translate(-30%, calc(var(--queda, 80px) - 30px)) rotate(260deg); }
  47%  { transform: translate(-10%, calc(var(--queda, 80px) + 60px)) rotate(350deg); }
  85%  { transform: translate(-10%, calc(var(--queda, 80px) + 60px)) rotate(360deg); opacity: 1; }
  100% { transform: translate(-10%, calc(var(--queda, 80px) + 60px)) rotate(360deg); opacity: 0; }
}

/* ===== Compartilhar ===== */
.btn-share {
  margin-left: auto; font-family: var(--font-cond); font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; padding: 4px 12px; min-height: 36px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.btn-share:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-share:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ===== Bolão dos institutos ===== */
.bolao { margin-top: 36px; }
.bolao-sub, .bolao-fonte { color: var(--muted-dark); font-size: .92rem; margin: 0 0 12px; max-width: 70ch; }
.bolao-fonte { margin: 12px 0 0; font-size: .8rem; }
.bolao-grid { padding: 6px 14px; transform: rotate(.3deg); }
.bolao-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 2px dotted rgba(20,16,25,.25); }
.bolao-row:first-child { border-top: 0; }
.bolao-inst { font-family: var(--font-cond); line-height: 1.1; }
.bolao-inst b { display: block; font-weight: 900; font-size: 1.05rem; }
.bolao-inst small { color: var(--muted); font-weight: 700; }
.bolao-inst em { display: inline-block; margin-left: 6px; font-style: normal; font-weight: 900; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 4px; padding: 0 5px; }
.bolao-inst .acertou { background: #6fe39a; } .bolao-inst .errou { background: #ff9d94; } .bolao-inst .empate { background: var(--paper2); }
.bolao-bar { display: flex; height: 28px; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 3px 3px 0 var(--ink); }
.bolao-bar span { display: flex; align-items: center; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; color: #fff; text-shadow: 1px 1px 0 var(--ink); padding: 0 8px; }
.bolao-bar .l { background: var(--red); justify-content: flex-start; }
.bolao-bar .r { background: var(--blue); justify-content: flex-end; border-left: 3px solid var(--ink); }

/* tornozeleira do técnico do córner azul */
.coach .led { animation: blink 1.2s steps(1) infinite; }

/* ===== Modo córner ===== */
.fighter { transition: left .8s cubic-bezier(.4,0,.2,1), right .8s cubic-bezier(.4,0,.2,1), bottom .5s ease; }
.ring { --corner-x: 2%; --stool-x: 9.5%; }
.ring.corner-mode .fighter.left { left: var(--corner-x); }
.ring.corner-mode .fighter.right { right: var(--corner-x); }
.fighter.sitting { bottom: 9%; }
.fighter.sitting .body, .fighter.sitting .sprite { animation-duration: 2.6s; }
.banquinho {
  position: absolute; bottom: 7%; width: 13%; aspect-ratio: 60 / 50; z-index: 3; pointer-events: none;
  opacity: 0; transform: translateY(20%); transition: opacity .4s ease .3s, transform .4s ease .3s;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.35));
}
.banquinho svg { width: 100%; height: 100%; display: block; }
.banquinho.left { left: var(--stool-x); } .banquinho.right { right: var(--stool-x); }
.ring.corner-mode .banquinho { opacity: 1; transform: none; }
/* com a pose do córner em imagem, o banquinho do córner sai e o assento vai dentro do lutador, por trás */
.ring.sit-img-left .banquinho.left, .ring.sit-img-right .banquinho.right { display: none; }
.fighter.sprites img.assento { inset: auto; left: 39%; bottom: 2.4%; width: 26%; height: auto; object-fit: fill; opacity: 0; transition: opacity .3s; }
.fighter.sprites.has-sit.sitting img.assento { opacity: 1; }
.fighter.sprites.has-sit img.sit { opacity: 0; }
.fighter.sprites.has-sit.sitting img { opacity: 0; }
.fighter.sprites.has-sit.sitting img.sit { opacity: 1; }
.fighter.has-sit.sitting { bottom: 12%; }
/* provisório até a pose sentada chegar: abaixa a pose parada para o banquinho cobrir os joelhos */
.fighter.sprites.sitting:not(.has-sit) { bottom: 0%; }
.ring.corner-mode:not(.sit-img-left) .banquinho.left { width: 15%; left: 8.5%; }

/* ===== Arte em imagem: elenco, cenário e objetos (cai no SVG se a imagem não existir) ===== */
.com-arte > .arte {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  transform-origin: 50% 100%;
}
.referee.com-arte .arte { animation: idle 2s ease-in-out infinite; }
.referee.com-arte.whistle .arte { animation: whistle .5s ease-in-out 2; }
.coach.com-arte .arte { animation: idle 2.2s ease-in-out infinite; }
.coach.com-arte.shout .arte { animation: grito .3s ease-in-out 4; }
@keyframes grito { 50% { transform: rotate(-4deg) translateY(-3px); } }
.coach.right.com-arte { transform: none; }   /* a imagem do técnico azul já vem olhando para o ringue */
.centrao.com-arte .arte { animation: idle 2.6s ease-in-out infinite; transition: opacity .3s; }
.centrao.com-arte .arte.dir { opacity: 0; }
.centrao.com-arte.look-right .arte.esq { opacity: 0; }
.centrao.com-arte.look-right .arte.dir { opacity: 1; }
.centrao.com-arte.walk .arte { animation: walk .4s ease-in-out infinite; }
.banquinho.com-arte { aspect-ratio: 313 / 400; width: 8%; }
.objeto.com-img { background: none; border: 0; box-shadow: none; padding: 0; width: clamp(40px, 7vw, 76px); }
.objeto.com-img img { display: block; width: 100%; height: auto; filter: drop-shadow(2px 3px 0 rgba(20,16,25,.45)); }
.balde {
  position: absolute; bottom: 5%; width: 6%; max-width: 60px; aspect-ratio: 375 / 400; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .4s ease .3s; filter: drop-shadow(0 6px 3px rgba(0,0,0,.35));
}
.balde img { width: 100%; height: 100%; object-fit: contain; display: block; }
.balde.left { left: .5%; } .balde.right { right: .5%; }
.ring.corner-mode .balde { opacity: 1; }

/* ===== Easter eggs ===== */
.fighter, .centrao { cursor: pointer; }
.ring.corner-mode .balde { pointer-events: auto; cursor: pointer; }
.chuva {
  position: absolute; top: -12%; width: clamp(34px, 6vw, 64px); pointer-events: none; z-index: 8;
  animation: chuva 2.2s cubic-bezier(.5,0,.8,.6) both; filter: drop-shadow(2px 3px 0 rgba(20,16,25,.45));
}
@keyframes chuva {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(720%) rotate(var(--giro, 360deg)); opacity: 0; }
}
.pow.splash { color: #7fd3ff; }

/* ===== Aparição relâmpago (o "Toasty!" do Mortal Kombat II) ===== */
.cameo {
  position: absolute; bottom: 0; width: 17%; max-width: 170px; aspect-ratio: 1; z-index: 9; pointer-events: none;
  transition: transform .14s cubic-bezier(.2,1.4,.4,1);
}
/* surge de baixo, entre o técnico e o centro, para não cobrir os técnicos */
.cameo.left { left: 12%; transform: translate(-20%, 125%) rotate(-12deg); }
.cameo.right { right: 12%; transform: translate(20%, 125%) rotate(12deg); }
.cameo.show { transform: translate(0, 4%) rotate(0); }
.cameo-art { width: 100%; height: 100%; filter: drop-shadow(4px 4px 0 var(--ink)); }
.cameo-art svg, .cameo-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cameo-fala {
  position: absolute; top: -6%; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: .05em;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px;
  padding: 0 10px; box-shadow: 3px 3px 0 var(--ink);
}
.cameo.left .cameo-fala { left: 60%; transform: rotate(-6deg); }
.cameo.right .cameo-fala { right: 60%; transform: rotate(6deg); }

/* ===== Botão de som ===== */
.btn-som {
  font-family: var(--font-cond); font-weight: 900; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 4px 12px;
  min-height: 44px; box-shadow: 3px 3px 0 var(--ink); display: inline-flex; align-items: center; gap: 6px;
}
.btn-som::before { content: ''; width: 16px; height: 16px; background: var(--ink);
  clip-path: polygon(0 32%, 30% 32%, 62% 4%, 62% 96%, 30% 68%, 0 68%); }
.btn-som[aria-pressed="true"] { background: #6fe39a; }
.btn-som[hidden] { display: none; }

/* ===== Fliperama anos 90 ===== */
/* balão do grito do cameo só aparece junto com ele */
.cameo .cameo-fala { opacity: 0; transition: opacity .1s; }
.cameo.show .cameo-fala { opacity: 1; }
/* faixa aceita textos longos ("HERE COMES A NEW CHALLENGER") sem estourar no celular */
.banner { white-space: normal; text-align: center; width: max-content; max-width: 92%; line-height: 1; }

/* contador de combo (Killer Instinct, 1994) */
.combo {
  position: absolute; top: 22%; z-index: 8; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-size: clamp(1.2rem, 3.4vw, 2.2rem); line-height: .9; letter-spacing: .04em;
  color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink);
}
.combo.left { left: 3%; transform: rotate(-6deg); } .combo.right { right: 3%; text-align: right; transform: rotate(6deg); }
.combo b { display: block; font-size: 1.8em; color: #fff; }
.combo.show { animation: combo 1.6s ease-out forwards; }
@keyframes combo { 0% { opacity: 0; translate: 0 10px; scale: .6; } 12% { opacity: 1; translate: 0 0; scale: 1.15; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* tela de VS */
.vs-screen {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; align-content: center; row-gap: min(18px, 2vh);
  background: linear-gradient(105deg, #7a1410 0 49.6%, var(--ink) 49.6% 50.4%, #12306e 50.4%);
  cursor: pointer; padding: 16px; overflow: hidden auto;   /* tela baixa: rola em vez de cortar */
}
.vs-screen[hidden] { display: none; }
.vs-screen::before { content: ''; position: absolute; inset: 0; background: var(--halftone) 0 0 / 9px 9px; pointer-events: none; }
.vs-lado { display: grid; justify-items: center; gap: 4px; color: #fff; text-align: center; z-index: 1; }
.vs-lado b { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 3.4rem); letter-spacing: .05em; text-shadow: 4px 4px 0 var(--ink); }
.vs-lado small { font-family: var(--font-cond); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.vs-retrato { width: min(34vw, 300px, 26vh); aspect-ratio: 100 / 140; filter: drop-shadow(6px 6px 0 var(--ink)); }
.vs-retrato svg, .vs-retrato img { width: 100%; height: 100%; object-fit: contain; }
.vs-lado.right .vs-retrato.espelha { transform: scaleX(-1); }
.vs-retrato .eyes, .vs-retrato .mouth { display: none; }
.vs-retrato .eyes-normal, .vs-retrato .mouth-smile { display: inline; }
.vs-retrato.espelha text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.vs-lado.left { animation: vs-entra-e .45s cubic-bezier(.2,1.3,.4,1) both; }
.vs-lado.right { animation: vs-entra-d .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes vs-entra-e { from { transform: translateX(-60vw); } }
@keyframes vs-entra-d { from { transform: translateX(60vw); } }
.vs-meio {
  font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); color: var(--gold); z-index: 1;
  -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--ink); animation: vs-pop .5s .35s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes vs-pop { from { transform: scale(3) rotate(-20deg); opacity: 0; } }
/* lobby: contagem até o gongo, botão de entrar e a menção à doação */
.vs-info { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; z-index: 1; color: #fff; align-self: start; }
.vs-gongo { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 4.5vw, 2.6rem); letter-spacing: .05em; text-shadow: 3px 3px 0 var(--ink); text-transform: uppercase; }
.vs-gongo b { color: var(--gold); }
.vs-sub { font-family: var(--font-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: rgba(255,255,255,.8); max-width: 60ch; }
.vs-entrar {
  margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.1rem, 3.5vw, 1.7rem); letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 8px 22px; box-shadow: 4px 4px 0 var(--ink);
  animation: vs-pisca 1.2s steps(2) infinite;
}
@keyframes vs-pisca { 50% { opacity: .55; } }
.vs-doar { font-family: var(--font-cond); font-weight: 600; font-size: .8rem; color: rgba(255,255,255,.7); text-decoration: underline dotted; text-underline-offset: 3px; max-width: 60ch; }
.vs-doar b { color: var(--gold); }
.vs-doar:hover { color: #fff; }

/* CONTINUE? do perdedor e frase de vitória */
.continue-card, .quote-card {
  position: absolute; z-index: 9; background: var(--ink); color: #fff; border: 4px solid var(--gold);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5); text-align: center; border-radius: 8px;
}
.continue-card[hidden], .quote-card[hidden] { display: none; }
.continue-card { top: 14%; width: min(42%, 260px); padding: 10px 12px; }
.continue-card.left { left: 3%; } .continue-card.right { right: 3%; }
.continue-card small { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .1em; color: var(--gold); }
.continue-card b { display: block; font-family: var(--font-display); font-size: 3.4rem; line-height: 1; font-weight: 400; }
.continue-card span { display: block; font-family: var(--font-cond); font-weight: 700; font-size: .9rem; }
.continue-card.over b { color: #ff6b6b; font-size: 2rem; padding: 8px 0; }
.quote-card { left: 50%; bottom: 14%; transform: translateX(-50%); width: min(90%, 560px); padding: 10px 16px; background: var(--paper); color: var(--ink); border-color: var(--ink); }
.quote-card b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .06em; color: var(--red); }
.quote-card span { font-family: var(--font-body); font-weight: 900; font-size: clamp(.9rem, 2vw, 1.15rem); }

/* HADOUKEN (Street Fighter II, 1991) */
.fireball {
  position: absolute; top: 34%; z-index: 8; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(.9rem, 2.4vw, 1.4rem); letter-spacing: .05em; color: var(--ink);
  padding: 10px 18px; border-radius: 50%; border: 3px solid var(--ink);
  animation: fireball .9s linear forwards;
}
.fireball.red { background: radial-gradient(circle at 30% 40%, #fff3b0, #ffb347 40%, #e63b2e); }
.fireball.blue { background: radial-gradient(circle at 70% 40%, #e0f4ff, #7fd0ff 40%, #2a63d6); }
@keyframes fireball { from { transform: translateX(0) scale(.6); } 15% { transform: translateX(calc(var(--dx) * .15)) scale(1.1); } to { transform: translateX(var(--dx)) scale(1); } }

/* INSERT COIN na doação (modo demonstração do fliperama) */
.insert-coin { display: inline-block; font-family: var(--font-display); letter-spacing: .15em; color: var(--red); font-size: 1.2rem; animation: blink 1.1s steps(1) infinite; }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .cameo { width: 26%; }
  .cameo.left { left: 16%; } .cameo.right { right: 16%; }
  .ring { --corner-x: 0%; --stool-x: 9%; }
  .banquinho { width: 15%; }
  .bolao-row { grid-template-columns: 1fr; gap: 4px; }
  .gongo { font-size: .95rem; }
  .btn-share { font-size: .7rem; padding: 3px 8px; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 1.5rem; }
  .status { width: 100%; order: 3; font-size: .85rem; }
  .hud { gap: 8px; }
  .round-box { padding: 4px 8px; } .round-box b { font-size: 1.7rem; } .round-box em { display: none; }
  .arena { padding: 44px 6px 60px; border-radius: 10px; --cent-left: 24%; --cent-right: 76%; }
  .ring { min-height: 0; aspect-ratio: 1.45 / 1; }
  .hp-head { flex-direction: column; align-items: flex-start; }
  .hp.right .hp-head { align-items: flex-end; }
  .hp-head .hp-pct { order: 2; font-size: 1.6rem; line-height: 1; }
  .hp-name { font-size: .78rem; }
  .fighter { width: 34%; }
  .fighter.left { left: 6%; } .fighter.right { right: 6%; }
  .referee { width: 13%; }
  .coach { width: 13%; bottom: 26px; }
  .centrao { width: 13%; bottom: 26px; }
  .placa { max-width: 15%; } .placa:nth-child(even) { top: 30px; }
  .corner { font-size: .58rem; max-width: 46%; }
  .placa { font-size: .55rem; padding: 3px 5px; }
  .bubble { max-width: 150px; }
  .termo { grid-template-columns: 1fr; } .termo-item { border-left: 0; border-top: 3px solid var(--ink); } .termo-item:first-child { border-top: 0; }
  .tape-grid { font-size: .9rem; } .tape-grid .head { font-size: 1.3rem; }
  .overlay .card { padding: 18px 24px; } .overlay .card b { font-size: 4rem; }
  .btn-doar.big { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter .body, .referee .body, .coach .body, .centrao .body, .crowd.hype, .ring.shake, .placa, .live-dot, .coach .led, .insert-coin, .vs-lado, .vs-meio, .vs-entrar { animation: none !important; }
  .cameo { transition: none; }
  .objeto { animation-duration: .01s; }
  .centrao { transition: none; }
}

/* crédito do dev no rodapé, discreto */
footer .credito { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .72rem; opacity: .7; }
footer .credito img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
footer .credito b { font-weight: 900; }