/* ============================================================================
   TechTerra - Campeonatos: animacoes (core/campeonato_fx.js -> window.AlternartCampeonatoFx).
   Dono: agente das animacoes (C2b). Prefixo exclusivo .cpfx-*.
   Fonte visual: docs/mock-campeonato-batalha.html (abertura, chamada, coroacao) — tempos,
   curvas e efeitos copiados do mock aprovado. O que o mock nao tinha (sorteio da chave,
   coroacao no celular, saida) segue o REVISAO-MOCKS.md.
   ============================================================================ */

/* ---------- base comum (abertura e coroacao) ---------- */
.cpfx-tela { position: fixed; inset: 0; z-index: 14400; overflow: hidden; container-type: size; background: #070504; color: #f3e6c8;
  font-family: 'Lora', serif; -webkit-user-select: none; user-select: none; --cpfx-w: min(40cqw, 62cqh, 540px); }
.cpfx-tela.pode-pular { cursor: pointer; }
/* saida: esmaece em 0,3 s e some (a arena/tela de baixo ja' esta' pronta por tras) */
.cpfx-tela.cpfx-saindo { pointer-events: none; animation: cpfx-some .3s ease-in both !important; }
.cpfx-palco { position: absolute; inset: 0; animation: cpfx-tremor .36s linear 1.12s both; }

/* o campo (fundo do Local) com zoom lento */
.cpfx-campo { position: absolute; inset: -3%; background: var(--cpfx-campo, none) center 45% / cover no-repeat;
  filter: brightness(.5) saturate(1.1); animation: cpfx-zoom 5.2s cubic-bezier(.2, .7, .3, 1) both; }
.cpfx-veu { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 45%, transparent 38%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(180deg, rgba(7, 5, 4, .6) 0%, transparent 24%, transparent 58%, rgba(7, 5, 4, .94) 100%); }

/* as duas metades: o dourado e' o seu lado; o vermelho, o do adversario */
.cpfx-meia { position: absolute; top: 0; bottom: 0; width: 56%; mix-blend-mode: screen; pointer-events: none; }
.cpfx-meia.a { left: 0; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  background: linear-gradient(105deg, rgba(201, 168, 76, .46), rgba(201, 168, 76, .07) 55%, transparent 82%);
  animation: cpfx-meia-a .5s cubic-bezier(.2, .9, .2, 1) .1s both; }
.cpfx-meia.b { right: 0; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(255deg, rgba(196, 58, 46, .5), rgba(196, 58, 46, .07) 55%, transparent 82%);
  animation: cpfx-meia-b .5s cubic-bezier(.2, .9, .2, 1) .1s both; }
.cpfx-corte { position: absolute; left: 50%; top: -10%; height: 120%; width: 4px; margin-left: -2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #fff7d6 30%, #f3da9c 50%, #fff7d6 70%, transparent);
  box-shadow: 0 0 18px 6px rgba(243, 218, 156, .5); animation: cpfx-corte .5s cubic-bezier(.3, .9, .3, 1) .85s both; }

/* faixa do campeonato (some no duelo fora de campeonato) */
.cpfx-faixa { position: absolute; top: 5%; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none;
  animation: cpfx-desce .5s cubic-bezier(.2, .9, .25, 1) .05s both; }
.cpfx-faixa-in { position: relative; text-align: center; padding: 10px 60px 12px;
  background: linear-gradient(90deg, transparent, rgba(10, 7, 4, .9) 16%, rgba(10, 7, 4, .9) 84%, transparent); }
.cpfx-faixa-in::before, .cpfx-faixa-in::after { content: ''; position: absolute; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84c, transparent); }
.cpfx-faixa-in::before { top: 0; } .cpfx-faixa-in::after { bottom: 0; }
.cpfx-faixa-eb { font: 600 .7rem/1.2 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(232, 216, 184, .75); }
.cpfx-faixa-tit { margin: 3px 0 7px; font: 700 clamp(1.1rem, 2.2cqw, 1.7rem)/1.15 'Cinzel', serif; letter-spacing: .05em; color: #f3da9c;
  text-shadow: 0 0 16px rgba(201, 168, 76, .45), 0 2px 2px #000; }
.cpfx-faixa-fase { display: inline-block; padding: 3px 16px; border-radius: 999px; font: 700 .74rem/1.4 'Cinzel', serif;
  letter-spacing: .16em; text-transform: uppercase; color: #1a1208; background: linear-gradient(180deg, #f3da9c, #c9a84c 55%, #8b6914); }

/* os retratos (recortados sem fundo) entram pelos lados */
.cpfx-ret { position: absolute; bottom: 9%; width: var(--cpfx-w); aspect-ratio: 1; pointer-events: none; }
.cpfx-ret::before { content: ''; position: absolute; inset: 10% 6% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--cpfx-cor), .42), rgba(var(--cpfx-cor), 0) 72%); filter: blur(4px); }
/* cover com o rosto no topo: retrato que nao e' quadrado nao vira um retangulo colado no pe' */
.cpfx-ret img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%); mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
  filter: drop-shadow(0 0 14px rgba(var(--cpfx-cor), .5)) drop-shadow(0 18px 24px rgba(0, 0, 0, .85));
  animation: cpfx-respira 4.2s ease-in-out .9s both; }
.cpfx-ret.a { left: 3%; --cpfx-cor: 243, 218, 156; animation: cpfx-ret-a .65s cubic-bezier(.16, 1, .3, 1) .2s both; }
.cpfx-ret.b { right: 3%; --cpfx-cor: 255, 132, 110; animation: cpfx-ret-b .65s cubic-bezier(.16, 1, .3, 1) .3s both; }

/* plaquetas de nome */
.cpfx-placa { position: absolute; bottom: 7%; max-width: 42%; pointer-events: none; }
.cpfx-placa.a { left: 4%; text-align: left; --cpfx-cor: 243, 218, 156; animation: cpfx-placa-a .45s ease-out .7s both; }
.cpfx-placa.b { right: 4%; text-align: right; --cpfx-cor: 255, 132, 110; animation: cpfx-placa-b .45s ease-out .8s both; }
.cpfx-placa-nome { font: 700 clamp(1.25rem, 2.5cqw, 2.15rem)/1.05 'Cinzel', serif; letter-spacing: .07em; text-transform: uppercase;
  color: #fff3d0; text-shadow: 0 2px 0 #000, 0 0 18px rgba(var(--cpfx-cor), .6); overflow-wrap: anywhere; }
.cpfx-placa-sub { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.cpfx-placa.b .cpfx-placa-sub { justify-content: flex-end; }
.cpfx-chip { font: 600 .7rem/1 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(var(--cpfx-cor), .6); color: #f3e6c8; white-space: nowrap; }
.cpfx-chip.ia { background: linear-gradient(180deg, rgba(196, 58, 46, .6), rgba(90, 20, 16, .7)); border-color: rgba(255, 150, 130, .7); }

/* VS com impacto */
.cpfx-centro { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 8cqh; pointer-events: none; }
.cpfx-vs { font: 900 clamp(76px, 10cqw, 150px)/1 'Cinzel Decorative', 'Cinzel', serif; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fffaf0 0%, #f3da9c 38%, #c9a84c 62%, #6e4f10 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 0 24px rgba(255, 200, 90, .65)) drop-shadow(0 5px 0 #24160a);
  animation: cpfx-vs .45s cubic-bezier(.2, 1.5, .4, 1) 1s both; }
.cpfx-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% calc(50% - 4cqh), #fff8e0, rgba(255, 240, 200, .6) 28%, transparent 68%);
  animation: cpfx-flash .5s ease-out 1.12s both; }
.cpfx-onda { position: absolute; left: 50%; top: calc(50% - 4cqh); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid rgba(255, 230, 170, .9); box-shadow: 0 0 22px rgba(255, 210, 120, .8), inset 0 0 18px rgba(255, 210, 120, .6);
  pointer-events: none; animation: cpfx-onda .7s cubic-bezier(.1, .8, .3, 1) 1.12s both; }
.cpfx-faiscas { position: absolute; left: 50%; top: calc(50% - 4cqh); width: 0; height: 0; pointer-events: none; }
.cpfx-faisca { position: absolute; left: 0; top: 0; width: 26px; height: 3px; margin: -1.5px 0 0 -13px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff3c4 40%, #ffd36b); box-shadow: 0 0 8px rgba(255, 210, 110, .9);
  animation: cpfx-faisca .75s cubic-bezier(.1, .75, .3, 1) calc(1.12s + var(--atr, 0ms)) both; }

/* a fala principal do NPC, digitando */
.cpfx-balao { position: absolute; right: 3%; bottom: calc(9% + var(--cpfx-w) * .97); width: min(380px, 30cqw);
  padding: 12px 18px 15px; border-radius: 14px; background: linear-gradient(180deg, #21170d, #110b06);
  border: 1px solid rgba(201, 168, 76, .75); box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 132, 110, .18);
  transform-origin: 70% 100%; animation: cpfx-balao .35s cubic-bezier(.2, 1.4, .4, 1) 1.5s both; }
.cpfx-balao::after { content: ''; position: absolute; right: calc(var(--cpfx-w) * .5 - 11px); bottom: -11px; width: 20px; height: 20px;
  background: #110b06; border-right: 1px solid rgba(201, 168, 76, .75); border-bottom: 1px solid rgba(201, 168, 76, .75); transform: rotate(45deg); }
.cpfx-balao-quem { margin-bottom: 6px; font: 700 .66rem/1 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: #ff9b8a; }
.cpfx-balao-txt { font: italic 1.06rem/1.5 'Lora', serif; color: #f6ead0; }
.cpfx-resto { color: transparent; }          /* reserva a altura da frase inteira: o balao nao cresce enquanto digita */
.cpfx-cursor { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px 0 2px; vertical-align: -2px; background: #f3da9c;
  animation: cpfx-pisca .7s steps(1) infinite; }
.cpfx-balao.digitou .cpfx-cursor { display: none; }

/* o campo da luta e o "pular" */
.cpfx-rodape { position: absolute; left: 0; right: 0; bottom: 2.6%; display: flex; justify-content: center; pointer-events: none; }
.cpfx-campo-placa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 92%; padding: 6px 14px;
  border-radius: 999px; background: rgba(8, 6, 4, .84); border: 1px solid rgba(201, 168, 76, .45); font-size: .8rem; color: rgba(243, 230, 200, .92);
  animation: cpfx-sobe .45s ease-out 1.35s both; }
.cpfx-campo-placa b { color: #f3da9c; font-weight: 600; }
/* o texto do campo e' um item so' da linha (sem o vao do flex entre "Ossario" e "· fundo") */
.cpfx-campo-txt { min-width: 0; }
.cpfx-campo-rot { font: 600 .62rem 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 216, 184, .6); }
.cpfx-ef { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: rgba(232, 216, 184, .8); }
.cpfx-ef img { width: 17px; height: 17px; object-fit: contain; }
.cpfx-pular { position: absolute; right: 16px; bottom: 14px; font: 600 .68rem 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(243, 230, 200, .62); pointer-events: none; animation: cpfx-aparece .4s ease-out 1.5s both; }

/* ---------- coroacao ---------- */
.cpfx-coroa-fundo { position: absolute; inset: -4%; background: var(--cpfx-banner, none) center / cover no-repeat;
  filter: blur(7px) brightness(.3) saturate(1.25); animation: cpfx-coroa-fundo 1.4s ease-out both; }
.cpfx-raios { position: absolute; left: 50%; top: 30%; width: 160cqmax; height: 160cqmax; margin: -80cqmax 0 0 -80cqmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .15) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 52%); mask-image: radial-gradient(circle, #000 0%, transparent 52%);
  animation: cpfx-aparece 1.2s ease-out .2s both, cpfx-gira 60s linear infinite; }
.cpfx-faiscas-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cpfx-coroa-grade { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: 2%; padding: 2% 4% 9%; }
.cpfx-col-centro { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cpfx-trofeu { width: clamp(110px, 16cqh, 150px); height: auto; margin-bottom: -10px; position: relative; z-index: 2;
  filter: drop-shadow(0 0 22px rgba(255, 200, 90, .55)) drop-shadow(0 10px 14px rgba(0, 0, 0, .7));
  animation: cpfx-trofeu .9s cubic-bezier(.2, 1.4, .4, 1) .3s both, cpfx-flutua 3.2s ease-in-out 1.2s infinite; }
.cpfx-campeao { position: relative; width: clamp(150px, 25cqh, 210px); aspect-ratio: 1; animation: cpfx-sobe-forte .9s cubic-bezier(.16, 1, .3, 1) 1s both; }
.cpfx-campeao-anel { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(243, 218, 156, .75);
  animation: cpfx-gira 14s linear infinite; }
.cpfx-campeao-disco { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 3px solid #f3da9c;
  background: radial-gradient(circle at 50% 35%, #6b4a14, #2a1a08 70%); box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), 0 0 36px rgba(255, 200, 90, .55);
  animation: cpfx-anel-pulso .7s ease-out 1.9s both; }
.cpfx-campeao-disco img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(1.12) translateY(6%); }
.cpfx-titulo { margin-top: 16px; font: 900 clamp(1.9rem, 4.2cqw, 3.1rem)/1 'Cinzel Decorative', 'Cinzel', serif; letter-spacing: .14em; white-space: nowrap;
  filter: drop-shadow(0 0 16px rgba(255, 200, 90, .45)) drop-shadow(0 3px 0 #24160a); }
/* o gradiente vai em cada letra: o recorte do fundo no texto nao alcanca filho com transform */
.cpfx-letra { display: inline-block; padding-top: .22em; margin-top: -.22em; /* a caixa cobre o til do à */
  background: linear-gradient(180deg, #fffaf0, #f3da9c 45%, #b8902e); -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: cpfx-letra .5s cubic-bezier(.2, 1.5, .4, 1) calc(1.6s + var(--i) * 60ms) both; }
.cpfx-coroa-nome { margin-top: 8px; font: 700 clamp(1.1rem, 2cqw, 1.5rem)/1.2 'Cinzel', serif; letter-spacing: .08em; color: #fff3d0;
  text-shadow: 0 2px 0 #000; animation: cpfx-sobe .5s ease-out 2.2s both; }
.cpfx-coroa-camp { margin-top: 4px; font-size: .88rem; color: rgba(243, 230, 200, .78); animation: cpfx-sobe .5s ease-out 2.3s both; }
.cpfx-col-vice { justify-self: end; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 230px;
  animation: cpfx-vem-esq .55s cubic-bezier(.2, .9, .3, 1) 2.4s both; }
.cpfx-vice-disco { width: clamp(84px, 13cqh, 112px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid #c8ccd4;
  background: radial-gradient(circle at 50% 35%, #4a4f5a, #1b1d22 70%); box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 18px rgba(200, 210, 230, .3); }
.cpfx-vice-disco img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(1.12) translateY(6%); }
.cpfx-vice-eb { font: 700 .66rem 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: #c8ccd4; }
.cpfx-vice-nome { font: 600 1rem 'Cinzel', serif; color: #eef0f4; }
.cpfx-vice-premio { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: rgba(232, 216, 184, .78); }
.cpfx-vice-premio img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; border: 1px solid rgba(201, 168, 76, .35); background: #000; }
.cpfx-col-premio { justify-self: start; perspective: 900px; animation: cpfx-vem-dir .55s cubic-bezier(.2, .9, .3, 1) 2.8s both; }
.cpfx-carta { position: relative; width: clamp(190px, 17cqw, 220px); height: clamp(270px, 36cqh, 300px); transform-style: preserve-3d;
  animation: cpfx-vira .6s cubic-bezier(.3, .1, .3, 1) 3.5s both; }
.cpfx-carta-face { position: absolute; inset: 0; border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center;
  border: 1px solid #c9a84c; box-shadow: 0 14px 34px rgba(0, 0, 0, .65), 0 0 26px rgba(255, 200, 90, .3); }
.cpfx-carta-verso { background: repeating-linear-gradient(45deg, rgba(201, 168, 76, .08) 0 8px, transparent 8px 16px), linear-gradient(160deg, #2a1c0c, #120c06); }
.cpfx-carta-verso b { font: 900 4rem/1 'Cinzel Decorative', serif; color: #f3da9c; text-shadow: 0 0 22px rgba(255, 200, 90, .8); }
.cpfx-carta-verso span { font: 700 .7rem 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 216, 184, .75); }
.cpfx-carta-frente { transform: rotateY(180deg); background: radial-gradient(circle at 50% 34%, rgba(255, 140, 60, .32), transparent 58%), linear-gradient(160deg, #24170b, #0f0a05); }
.cpfx-carta-eb { font: 700 .64rem 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 216, 184, .7); }
.cpfx-carta-img { width: 62%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255, 150, 70, .55)); }
.cpfx-carta-nome { font: 700 1.02rem/1.2 'Cinzel', serif; color: #f3da9c; }
.cpfx-carta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cpfx-carta-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .68rem;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 168, 76, .35); color: rgba(243, 230, 200, .9); }
.cpfx-carta-meta img { width: 14px; height: 14px; }
.cpfx-carta-nota { font-size: .7rem; color: rgba(232, 216, 184, .65); }
.cpfx-carta-nota.cheia { padding: 4px 8px; border-radius: 6px; color: #ffe2a8; background: rgba(201, 168, 76, .14); border: 1px solid rgba(201, 168, 76, .4); }
.cpfx-carta-frente.de-outro { background: radial-gradient(circle at 50% 34%, rgba(200, 204, 212, .18), transparent 58%), linear-gradient(160deg, #1d1a16, #0d0b08); }
.cpfx-carta.sem-virar { animation: none; }
.cpfx-carta.sem-virar .cpfx-carta-frente { transform: none; }
.cpfx-carta-vazia { background: linear-gradient(160deg, #1d1a16, #0d0b08); border-color: rgba(201, 168, 76, .45); }
.cpfx-carta-icone { font-size: 3.2rem; line-height: 1; filter: grayscale(1) brightness(.6); opacity: .7; }
.cpfx-carta-vazia .cpfx-carta-nome { color: rgba(232, 216, 184, .8); }
.cpfx-coroa-npc { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 4px; font: 700 .62rem 'Cinzel', serif;
  letter-spacing: .1em; color: #ffd8d0; background: rgba(120, 24, 16, .7); border: 1px solid rgba(255, 132, 110, .6); text-shadow: none; }
.cpfx-coroa-eu { margin-top: 8px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; color: rgba(243, 230, 200, .85);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 168, 76, .3); animation: cpfx-sobe .5s ease-out 2.4s both; }
.cpfx-col-vice.eu .cpfx-vice-disco { border-color: #f3da9c; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 22px rgba(243, 218, 156, .45); }
.cpfx-col-vice.eu .cpfx-vice-eb { color: #f3da9c; }
.cpfx-coroa-acoes { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 10px;
  animation: cpfx-sobe .45s ease-out 4.6s both; pointer-events: none; }
/* os botoes so' aceitam clique quando ja' apareceram (o JS marca .pronta aos 4,6 s) */
.cpfx-coroa.pronta .cpfx-coroa-acoes { pointer-events: auto; }
.cpfx-carta-sem-img { filter: none; opacity: 1; font-size: 4rem; }
/* retrato que nao carregou (ou ficha sem retrato): a inicial do nome no disco */
.cpfx-inicial { width: 100%; height: 100%; display: grid; place-items: center; font: 700 2.4rem/1 'Cinzel', serif; color: rgba(243, 218, 156, .7); }

/* movimento reduzido: tudo vira um esmaecer curto, sem tremor, clarao, faisca nem digitacao */
.cpfx-rm .cpfx-campo, .cpfx-rm .cpfx-meia, .cpfx-rm .cpfx-ret, .cpfx-rm .cpfx-ret img, .cpfx-rm .cpfx-placa, .cpfx-rm .cpfx-faixa,
.cpfx-rm .cpfx-vs, .cpfx-rm .cpfx-balao, .cpfx-rm .cpfx-campo-placa, .cpfx-rm .cpfx-pular, .cpfx-rm .cpfx-coroa-fundo, .cpfx-rm .cpfx-trofeu,
.cpfx-rm .cpfx-campeao, .cpfx-rm .cpfx-campeao-disco, .cpfx-rm .cpfx-letra, .cpfx-rm .cpfx-coroa-nome, .cpfx-rm .cpfx-coroa-camp,
.cpfx-rm .cpfx-col-vice, .cpfx-rm .cpfx-col-premio, .cpfx-rm .cpfx-coroa-acoes { animation: cpfx-esmaece .3s ease-out both !important; }
.cpfx-rm .cpfx-palco, .cpfx-rm .cpfx-campeao-anel, .cpfx-rm .cpfx-raios, .cpfx-rm .cpfx-cursor { animation: none !important; }
.cpfx-rm .cpfx-flash, .cpfx-rm .cpfx-onda, .cpfx-rm .cpfx-faiscas, .cpfx-rm .cpfx-corte, .cpfx-rm .cpfx-faiscas-cv { display: none; }
.cpfx-rm .cpfx-carta { animation: none !important; transform: rotateY(180deg); }
.cpfx-rm .cpfx-carta.sem-virar { transform: none; }
.cpfx-rm .cpfx-coroa-eu { animation: cpfx-esmaece .3s ease-out both !important; }

@keyframes cpfx-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes cpfx-meia-a { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes cpfx-meia-b { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cpfx-corte { 0% { transform: rotate(7deg) scaleY(0); opacity: 1; } 60% { transform: rotate(7deg) scaleY(1); opacity: 1; } 100% { transform: rotate(7deg) scaleY(1); opacity: .35; } }
@keyframes cpfx-desce { from { transform: translateY(-160%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-ret-a { from { transform: translateX(-70%); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes cpfx-ret-b { from { transform: translateX(70%); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes cpfx-respira { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes cpfx-placa-a { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-placa-b { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-vs { 0% { transform: scale(3.4) rotate(-10deg); opacity: 0; } 55% { transform: scale(.9) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cpfx-flash { 0% { opacity: 0; } 14% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cpfx-onda { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(18); opacity: 0; } }
@keyframes cpfx-tremor { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); }
  45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
@keyframes cpfx-faisca { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scaleX(.4); } 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleX(1.4); } }
@keyframes cpfx-balao { from { transform: scale(.45); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-pisca { 50% { opacity: 0; } }
@keyframes cpfx-sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpfx-esmaece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpfx-some { from { opacity: 1; } to { opacity: 0; } }
@keyframes cpfx-coroa-fundo { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes cpfx-gira { to { transform: rotate(360deg); } }
@keyframes cpfx-trofeu { from { transform: translateY(90px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-flutua { 0%, 100% { transform: none; } 50% { transform: translateY(-7px); } }
@keyframes cpfx-sobe-forte { from { transform: translateY(140px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-anel-pulso { 0% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), 0 0 36px rgba(255, 200, 90, .55); }
  35% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), 0 0 0 18px rgba(255, 220, 130, .35), 0 0 70px rgba(255, 210, 110, .95); }
  100% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), 0 0 36px rgba(255, 200, 90, .55); } }
@keyframes cpfx-letra { from { transform: translateY(-46px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-vem-esq { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-vem-dir { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-vira { from { transform: none; } to { transform: rotateY(180deg); } }

/* celular: o adversario em cima, voce embaixo, o VS na diagonal do meio */
@media (max-width: 600px) {
  .cpfx-tela { --cpfx-w: min(60cqw, 30cqh); }
  .cpfx-meia { width: auto; left: 0; right: 0; height: 58%; }
  .cpfx-meia.a { top: auto; bottom: 0; clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(15deg, rgba(201, 168, 76, .46), rgba(201, 168, 76, .07) 55%, transparent 82%); animation-name: cpfx-meia-a-cel; }
  .cpfx-meia.b { top: 0; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
    background: linear-gradient(195deg, rgba(196, 58, 46, .5), rgba(196, 58, 46, .07) 55%, transparent 82%); animation-name: cpfx-meia-b-cel; }
  .cpfx-corte { left: -10%; width: 120%; top: 50%; height: 4px; margin: -2px 0 0; animation-name: cpfx-corte-cel;
    background: linear-gradient(90deg, transparent, #fff7d6 30%, #f3da9c 50%, #fff7d6 70%, transparent); }
  .cpfx-faixa { top: 4.5%; }
  .cpfx-faixa-in { padding: 7px 26px 9px; }
  .cpfx-faixa-tit { font-size: 1rem; }
  .cpfx-centro { padding: 10cqh 0 0; }
  .cpfx-vs { font-size: 74px; }
  .cpfx-flash { background: radial-gradient(circle at 50% calc(50% + 5cqh), #fff8e0, rgba(255, 240, 200, .6) 28%, transparent 68%); }
  .cpfx-onda, .cpfx-faiscas { top: calc(50% + 5cqh); }
  .cpfx-ret.b { top: 17%; bottom: auto; right: -3%; }
  .cpfx-ret.a { bottom: 7%; left: -3%; }
  .cpfx-placa { max-width: 54%; }
  .cpfx-placa.b { top: 18.5%; bottom: auto; left: 5%; right: auto; text-align: left; }
  .cpfx-placa.b .cpfx-placa-sub { justify-content: flex-start; }
  .cpfx-placa.a { bottom: 12%; left: auto; right: 5%; text-align: right; }
  .cpfx-placa.a .cpfx-placa-sub { justify-content: flex-end; }
  .cpfx-placa-nome { font-size: 1.1rem; }
  .cpfx-chip { font-size: .6rem; padding: 4px 8px; }
  .cpfx-balao { right: auto; left: 4%; bottom: auto; top: calc(18.5% + 78px); width: 50cqw; padding: 10px 13px 12px; transform-origin: 100% 40%; }
  .cpfx-balao::after { right: -11px; bottom: auto; top: 36%; border-right: 1px solid rgba(201, 168, 76, .75); border-bottom: 0;
    border-top: 1px solid rgba(201, 168, 76, .75); }
  .cpfx-balao-txt { font-size: .9rem; line-height: 1.42; }
  .cpfx-campo-placa { font-size: .7rem; padding: 5px 10px; border-radius: 12px; }
  .cpfx-pular { bottom: auto; top: 8px; right: 10px; font-size: .58rem; }
  @keyframes cpfx-meia-a-cel { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes cpfx-meia-b-cel { from { transform: translateY(-100%); } to { transform: none; } }
  @keyframes cpfx-corte-cel { 0% { transform: rotate(-8deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-8deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-8deg) scaleX(1); opacity: .35; } }

  /* coroacao no celular (o mock so' desenhou o computador): o campeao em cima, a linha
     de baixo com o vice e a carta do premio lado a lado; sem vice/sem carta, centraliza */
  .cpfx-coroa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'centro centro' 'vice premio';
    align-content: center; align-items: start; gap: 18px 10px; padding: 12px 12px 76px; }
  .cpfx-coroa-grade.sem-vice { grid-template-areas: 'centro centro' 'premio premio'; }
  .cpfx-coroa-grade.sem-premio { grid-template-areas: 'centro centro' 'vice vice'; }
  .cpfx-col-centro { grid-area: centro; }
  .cpfx-col-vice { grid-area: vice; justify-self: center; align-self: center; max-width: 100%; }
  .cpfx-col-premio { grid-area: premio; justify-self: center; }
  .cpfx-trofeu { width: 78px; margin-bottom: -8px; }
  .cpfx-campeao { width: min(128px, 34cqw); }
  .cpfx-campeao-anel { inset: -7px; }
  .cpfx-titulo { margin-top: 12px; font-size: clamp(1.5rem, 8.4cqw, 2rem); letter-spacing: .1em; }
  .cpfx-coroa-nome { font-size: 1.05rem; }
  .cpfx-coroa-camp { font-size: .78rem; }
  .cpfx-coroa-eu { font-size: .72rem; }
  .cpfx-vice-disco { width: 68px; }
  .cpfx-vice-nome { font-size: .86rem; }
  .cpfx-vice-premio { font-size: .66rem; }
  .cpfx-carta { width: min(160px, 44cqw); height: 240px; }
  .cpfx-carta-face { gap: 5px; padding: 10px 8px; }
  .cpfx-carta-img { width: 50%; }
  .cpfx-carta-verso b { font-size: 2.8rem; }
  .cpfx-carta-verso span { font-size: .58rem; }
  .cpfx-carta-nome { font-size: .84rem; }
  .cpfx-carta-meta span { font-size: .6rem; padding: 1px 6px; }
  .cpfx-carta-nota { font-size: .62rem; }
  .cpfx-carta-icone { font-size: 2.4rem; }
  .cpfx-coroa-acoes { bottom: 16px; }
}
@media (max-width: 600px) and (max-height: 640px) {
  .cpfx-trofeu { width: 60px; }
  .cpfx-campeao { width: 96px; }
  .cpfx-carta { height: 180px; }
  .cpfx-carta-img { width: 48%; }
}

/* ---------- chamada: aviso fixo, visivel em qualquer tela ---------- */
/* (no mock: .cp-chamada-*; aqui com o prefixo do arquivo, .cpfx-chamada-*) */
.cpfx-chamada-pos { position: fixed; left: 0; right: 0; top: var(--cpfx-chamada-top, 90px); z-index: 14550; display: flex; justify-content: center;
  pointer-events: none; padding: 0 12px; }
.cpfx-chamada { pointer-events: auto; position: relative; width: min(580px, 100%); display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  padding: 14px 16px 16px; border-radius: 14px; overflow: hidden; color: #e8d8b8; background: linear-gradient(160deg, #26190c 0%, #120c06 100%);
  border: 1px solid #c9a84c; box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .6) inset; font-family: 'Lora', serif;
  animation: cpfx-chamada-entra .5s cubic-bezier(.2, 1.2, .4, 1) both, cpfx-chamada-pulso 2s ease-in-out .5s infinite; }
.cpfx-chamada-ret { position: relative; width: 70px; height: 70px; }
.cpfx-chamada-ret img, .cpfx-chamada-ret .cpfx-inicial { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #c9a84c;
  background: radial-gradient(circle at 50% 35%, #4a3418, #1b1209 70%); box-sizing: border-box; font-size: 1.6rem; }
.cpfx-chamada-ret::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(243, 218, 156, .8); animation: cpfx-chamada-anel 2s ease-out .5s infinite; }
.cpfx-chamada-vs { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem;
  background: linear-gradient(180deg, #f3da9c, #8b6914); color: #1a1208; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.cpfx-chamada-txt { min-width: 0; }
.cpfx-chamada-eb { font: 600 .64rem/1.3 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 216, 184, .65); }
.cpfx-chamada-tit { margin: 2px 0 3px; font: 700 1.08rem/1.25 'Cinzel', serif; color: #f3da9c; }
.cpfx-chamada-sub { font-size: .8rem; line-height: 1.4; color: rgba(232, 216, 184, .82); }
.cpfx-chamada-sub b { color: #f3e6c8; font-weight: 600; }
.cpfx-chamada-sub .ok { color: #9be3a6; }
.cpfx-chamada-rel { text-align: center; padding-left: 4px; }
.cpfx-chamada-rel b { display: block; font: 700 1.75rem/1 'Cinzel', serif; color: #f3e6c8; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cpfx-chamada-rel small { display: block; margin-top: 3px; font-size: .64rem; color: rgba(232, 216, 184, .6); white-space: nowrap; }
.cpfx-chamada-rel.urgente b { color: #ff9b8a; }
.cpfx-chamada-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* a nota encolhe e quebra o proprio texto: o "–" fica na mesma linha (com "Pronto ✓ · aguardando",
   mais largo, ele caia sozinho na linha de baixo) */
.cpfx-chamada-acoes .cpfx-chamada-nota { margin-left: auto; flex: 1 1 0; min-width: 0; text-align: right; font-size: .7rem; color: rgba(232, 216, 184, .55); }
.cpfx-chamada-acoes .cpfx-chamada-nota.ocupado { margin-left: 0; flex: 1 1 100%; order: 3; text-align: left; font-size: .76rem; color: #ffb4a6; }
.cpfx-chamada-acoes .cpfx-chamada-nota.ocupado::before { content: '⚔ '; }
.cpfx-chamada-acoes .cpfx-chamada-nota.erro { margin-left: 0; flex: 1 1 100%; order: 3; text-align: left; font-size: .76rem; color: #ffb4a6; }
.cpfx-chamada-min { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, .4);
  background: rgba(0, 0, 0, .3); color: rgba(243, 218, 156, .85); font: 700 1rem/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.cpfx-chamada-min:hover { border-color: #c9a84c; color: #f3da9c; }
.cpfx-chamada-prazo { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .06); }
.cpfx-chamada-prazo i { display: block; height: 100%; background: linear-gradient(90deg, #8b6914, #f3da9c); }
.cpfx-chamada-prazo.urgente i { background: linear-gradient(90deg, #8a2a1c, #ff9b8a); }
.cpfx-chamada-mini { pointer-events: auto; position: fixed; top: var(--cpfx-chamada-top, 90px); right: 16px; z-index: 14550; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer; background: linear-gradient(160deg, #26190c, #120c06); border: 1px solid #c9a84c; color: #f3e6c8;
  font: 600 .8rem 'Cinzel', serif; box-shadow: 0 8px 20px rgba(0, 0, 0, .55); animation: cpfx-chamada-pulso 2s ease-in-out infinite; }
.cpfx-chamada-mini img, .cpfx-chamada-mini .cpfx-inicial { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid #c9a84c;
  box-sizing: border-box; font-size: .9rem; }
.cpfx-chamada-mini b { font-variant-numeric: tabular-nums; color: #f3da9c; }
.cpfx-chamada-mini b.urgente { color: #ff9b8a; }
/* primeira aparicao: o aviso ocupa o meio da tela, maior, com o fundo escurecido, e depois de
   ~1,5 s recolhe para o topo (0,3 s entra · segura ate' 1,5 s · 0,6 s sobe) */
.cpfx-chamada-veu { position: fixed; inset: 0; z-index: 14545; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(20, 12, 4, .55), rgba(4, 2, 1, .86));
  animation: cpfx-chamada-veu 2.1s ease both; }
.cpfx-chamada-pos.chega .cpfx-chamada { animation: cpfx-chamada-chega 2.1s cubic-bezier(.3, .8, .3, 1) both, cpfx-chamada-pulso 2s ease-in-out 2.1s infinite; }
/* ao reabrir (minimizada) ou trocar de estado: so' desce, sem a chegada grande */
.cpfx-chamada-pos.quieta .cpfx-chamada { animation: cpfx-chamada-pulso 2s ease-in-out infinite; }
@keyframes cpfx-chamada-veu { 0% { opacity: 0; } 14% { opacity: 1; } 71% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cpfx-chamada-chega { 0% { transform: translateY(var(--cpfx-dy, 0px)) scale(.7); opacity: 0; }
  14% { transform: translateY(var(--cpfx-dy, 0px)) scale(var(--cpfx-chega-escala, 1.24)); opacity: 1; }
  71% { transform: translateY(var(--cpfx-dy, 0px)) scale(var(--cpfx-chega-escala, 1.24)); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cpfx-chamada-entra { from { transform: translateY(-36px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-chamada-pulso { 0%, 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 0 0 0 rgba(243, 218, 156, 0); }
  50% { box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 0 22px 2px rgba(243, 218, 156, .4); } }
@keyframes cpfx-chamada-anel { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.cpfx-rm-chamada .cpfx-chamada, .cpfx-rm-chamada .cpfx-chamada-mini { animation: cpfx-esmaece .3s ease-out both !important; }
.cpfx-rm-chamada .cpfx-chamada-ret::after { animation: none; opacity: 0; }
/* minimizada / reaberta: o atributo hidden precisa vencer o display:flex das duas */
.cpfx-chamada-pos[hidden], .cpfx-chamada-mini[hidden] { display: none !important; }
/* fechar(): esmaece em 0,3 s */
.cpfx-chamada-raiz.cpfx-saindo .cpfx-chamada, .cpfx-chamada-raiz.cpfx-saindo .cpfx-chamada-mini { pointer-events: none; animation: cpfx-some .3s ease-in both !important; }
.cpfx-chamada-raiz.cpfx-saindo .cpfx-chamada-veu { display: none; }
/* forma COMPACTA: com uma arena aberta (.raid-bd), a chamada vira uma faixa estreita no canto
   de cima (relogio + "Sua luta de campeonato começou" + "Ver"), sem cobrir a barra de acoes nem
   o centro da luta; "Ver" (ou um clique na faixa) abre o aviso completo. */
/* computador: a arena e' um modal com >= 20 px livres em cima; a faixa (~24 px, a 3 px do topo)
   cabe ali sem tocar no cabecalho dela */
.cpfx-chamada-compacta { position: fixed; top: calc(var(--cpfx-chamada-top, 3px) + env(safe-area-inset-top, 0px)); right: 8px; z-index: 14550;
  display: flex; align-items: center; gap: 7px; box-sizing: border-box; max-width: min(430px, calc(100vw - 16px)); padding: 2px 2px 2px 3px;
  border-radius: 999px; cursor: pointer; color: #f3e6c8; background: linear-gradient(160deg, rgba(38, 25, 12, .96), rgba(18, 12, 6, .96));
  border: 1px solid #c9a84c; font: 600 .7rem/1.1 'Cinzel', serif; box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
  animation: cpfx-compacta-entra .4s cubic-bezier(.2, 1.2, .4, 1) both, cpfx-chamada-pulso 2s ease-in-out .4s infinite; }
.cpfx-chamada-compacta[hidden] { display: none !important; }
.cpfx-chamada-compacta-ic { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem;
  color: #1a1208; background: linear-gradient(180deg, #f3da9c, #8b6914); }
.cpfx-chamada-compacta-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em; }
/* se mesmo assim a faixa bater num controle da arena (o JS confere), fica so' ⚔ + relogio + Ver */
.cpfx-chamada-compacta.curta .cpfx-chamada-compacta-txt { display: none; }
.cpfx-cmp-curto { display: none; }
.cpfx-chamada-compacta b { flex: 0 0 auto; font: 700 .84rem/1 'Cinzel', serif; color: #f3da9c; font-variant-numeric: tabular-nums; }
.cpfx-chamada-compacta b.urgente { color: #ff9b8a; }
.cpfx-chamada-compacta-ver { flex: 0 0 auto; padding: 3px 12px; border-radius: 999px; border: 1px solid #c9a84c; cursor: pointer; color: #1a1208;
  background: linear-gradient(180deg, #f3da9c, #c9a84c 55%, #8b6914); font: 700 .62rem/1.2 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; }
.cpfx-chamada-compacta-ver:hover { filter: brightness(1.08); }
.cpfx-chamada-compacta-ver:focus-visible { outline: 2px solid #fff3c4; outline-offset: 1px; }
.cpfx-rm-chamada .cpfx-chamada-compacta { animation: cpfx-esmaece .3s ease-out both !important; }
.cpfx-chamada-raiz.cpfx-saindo .cpfx-chamada-compacta { pointer-events: none; animation: cpfx-some .3s ease-in both !important; }
@keyframes cpfx-compacta-entra { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
/* celular: a arena ocupa a tela; a faixa fica no topo, a esquerda, sem chegar no selo e no botao
   do canto direito do titulo da arena, com o texto curto */
@media (max-width: 600px) {
  .cpfx-chamada-compacta { top: calc(var(--cpfx-chamada-top, 8px) + env(safe-area-inset-top, 0px)); right: auto; left: 8px;
    max-width: calc(100vw - 120px); gap: 6px; padding: 3px 3px 3px 5px; font-size: .66rem; }
  .cpfx-cmp-longo { display: none; }
  .cpfx-cmp-curto { display: inline; }
  .cpfx-chamada-compacta-ic { width: 20px; height: 20px; font-size: .64rem; }
  .cpfx-chamada-compacta b { font-size: .8rem; }
  .cpfx-chamada-compacta-ver { padding: 4px 10px; font-size: .62rem; }
}
@media (max-width: 600px) {
  .cpfx-chamada { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 12px 14px; }
  .cpfx-chamada-ret { width: 54px; height: 54px; }
  .cpfx-chamada-rel b { font-size: 1.3rem; }
  .cpfx-chamada-mini { right: 10px; }
}

/* ---------- sorteio da chave (revelarChave): mock #sorteio, ~6,4 s ---------- */
/* Age sobre as classes da chave do campeonato.js (.cp-jogo/.cp-cartao/.cp-lado/.cp-trein/
   .cp-col-t/.cp-campeao/.cp-fios); o JS poe .cpfx-sort no container e os tempos em variaveis
   (--cpfx-atr entrada, --cpfx-trava roleta, --cpfx-sim NPC x NPC, --cpfx-clim a sua luta). */
.cpfx-sort-faixa { position: absolute; left: 0; right: 0; top: 48%; z-index: 8; display: flex; justify-content: center; pointer-events: none;
  animation: cpfx-sort-faixa 1.3s cubic-bezier(.2, .9, .3, 1) both; }
.cpfx-sort-faixa-in { position: relative; text-align: center; padding: 14px 90px 16px;
  background: linear-gradient(90deg, transparent, rgba(10, 7, 4, .94) 14%, rgba(10, 7, 4, .94) 86%, transparent); }
.cpfx-sort-faixa-in::before, .cpfx-sort-faixa-in::after { content: ''; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #c9a84c, transparent); }
.cpfx-sort-faixa-in::before { top: 0; } .cpfx-sort-faixa-in::after { bottom: 0; }
.cpfx-sort-faixa-in b { display: block; font: 700 1.7rem/1.1 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: #f3da9c;
  text-shadow: 0 0 18px rgba(201, 168, 76, .55), 0 2px 2px #000; }
.cpfx-sort-faixa-in span { display: block; margin-top: 5px; font-size: .84rem; color: rgba(243, 230, 200, .8); }
.cpfx-sort .cp-col-t { animation: cpfx-esmaece .4s ease-out var(--cpfx-atr, 0ms) both; }
.cpfx-sort .cpfx-e { animation: cpfx-sort-e .45s cubic-bezier(.2, .9, .3, 1.15) var(--cpfx-atr, 0ms) both; }
.cpfx-sort .cpfx-d { animation: cpfx-sort-d .45s cubic-bezier(.2, .9, .3, 1.15) var(--cpfx-atr, 0ms) both; }
.cpfx-sort .cpfx-c { animation: cpfx-sort-c .5s cubic-bezier(.2, 1.3, .4, 1) var(--cpfx-atr, 0ms) both; }
.cpfx-sort .cp-campeao.cpfx-c { animation: cpfx-sort-c .5s cubic-bezier(.2, 1.3, .4, 1) var(--cpfx-atr, 0ms) both, cpfx-sort-taca 2.4s ease-in-out calc(var(--cpfx-atr, 0ms) + .5s) infinite; }
/* a sua luta: entra primeiro, ja' em destaque, e pulsa em ouro quando o adversario trava */
.cpfx-sort .cpfx-sort-meu.cpfx-e { animation: cpfx-sort-e .45s cubic-bezier(.2, .9, .3, 1.15) var(--cpfx-atr, 0ms) both, cpfx-sort-meu 1.3s ease-out var(--cpfx-clim, 0ms) both; }
.cpfx-sort .cpfx-sort-meu.cpfx-d { animation: cpfx-sort-d .45s cubic-bezier(.2, .9, .3, 1.15) var(--cpfx-atr, 0ms) both, cpfx-sort-meu 1.3s ease-out var(--cpfx-clim, 0ms) both; }
.cpfx-sort .cpfx-sort-meu.cpfx-c { animation: cpfx-sort-c .5s cubic-bezier(.2, 1.3, .4, 1) var(--cpfx-atr, 0ms) both, cpfx-sort-meu 1.3s ease-out var(--cpfx-clim, 0ms) both; }
/* celular: os cartoes da lista entram de perto e pulsam menos (o cartao ja' ocupa a largura) */
.cpfx-sort .cp-cartao { --cpfx-dx: 24px; --cpfx-meu-escala: 1.03; }
/* a roleta: o lado ainda nao sorteado gira pelos retratos; ao travar, um clarao */
.cpfx-sort .cpfx-rolando .cp-ret, .cpfx-sort .cp-trein.cpfx-rolando img { filter: blur(.6px) brightness(1.15); border-style: dashed; }
.cpfx-sort .cpfx-rolando .cp-nome, .cpfx-sort .cpfx-rolando .cp-trein-n { font-style: italic; color: rgba(232, 216, 184, .55); }
.cpfx-sort .cpfx-rolando .cp-npc, .cpfx-sort .cpfx-rolando .cp-trein-s, .cpfx-sort .cpfx-rolando .cp-ok { visibility: hidden; }
.cpfx-sort .cpfx-trava { animation: cpfx-sort-trava .6s ease-out var(--cpfx-trava, 0ms) forwards; }
.cpfx-sort .cpfx-climax { position: relative; z-index: 2; animation: cpfx-sort-clim 1.1s ease-out var(--cpfx-trava, 0ms) forwards; }
/* NPC x NPC simulada na hora: o vencedor ganha o ✓ 1 s depois de entrar (antes disso, neutro) */
.cpfx-sort .cp-ok { animation: cpfx-esmaece .4s ease-out var(--cpfx-sim, 0ms) both; }
.cpfx-sort .cpfx-trava.cpfx-perde { animation: cpfx-sort-trava .6s ease-out var(--cpfx-trava, 0ms) forwards, cpfx-sort-perde .4s ease-out var(--cpfx-sim, 0ms) both; }
.cpfx-sort .cpfx-trava.cpfx-ganha { animation: cpfx-sort-trava .6s ease-out var(--cpfx-trava, 0ms) forwards, cpfx-sort-ganha .4s ease-out var(--cpfx-sim, 0ms) both; }
/* os fios correm fase a fase; fio desenhado depois do inicio so' esmaece */
.cpfx-sort .cpfx-fio { animation: cpfx-sort-fio .45s ease-out var(--cpfx-atr, 0ms) forwards; }
.cpfx-sort .cp-fios path:not(.cpfx-fio):not(.cpfx-caminho) { animation: cpfx-esmaece .5s ease-out var(--cpfx-fios-atr, 0ms) both; }
.cpfx-caminho { fill: none; stroke: #f3da9c; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(255, 210, 110, .9)); }
/* um trecho por fio: cada um corre na sua vez (--cpfx-dur), somando os 0,8 s do mock */
.cpfx-sort .cpfx-caminho { animation: cpfx-sort-fio var(--cpfx-dur, .8s) linear var(--cpfx-atr, 0ms) forwards; }
.cpfx-centelha { position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffbe8 0%, #ffd36b 45%, rgba(255, 190, 80, 0) 72%); box-shadow: 0 0 14px 4px rgba(255, 210, 110, .85);
  offset-rotate: 0deg; animation: cpfx-centelha .8s ease-in-out var(--cpfx-atr, 0ms) both; }
/* "Sorteando a chave…" na linha da fase: os filhos do campeonato.js ficam escondidos ate' o clarao */
.cp-fase.cpfx-sort-sorteando > :not(.cpfx-sort-estado) { display: none !important; }
.cpfx-sort-estado b { color: #f3da9c; font-weight: 600; }
/* celular: o "Toque para pular" mora na linha da fase (sempre a vista), a partir de 1 s */
.cpfx-sort-estado-pular { margin-left: 6px; white-space: nowrap; font: 600 .6rem 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(243, 230, 200, .6); animation: cpfx-aparece .4s ease-out 1s both; }
/* celular: a faixa fica no topo da lista de duelos (nao no meio da altura da lista, que cai no pe'
   da tela, atras da barra Voltar/Desistir) */
.cpfx-sort-faixa.lista { top: 4px; }
.cpfx-sort-pular.lista { top: 4px; bottom: auto; }
/* a faixa da sua primeira luta (fica depois do sorteio) */
.cpfx-sort-sua { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; padding: 9px 14px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(201, 168, 76, .2), rgba(0, 0, 0, .35)); border: 1px solid #c9a84c; color: #f3e6c8; font-size: .86rem;
  animation: cpfx-sobe .5s ease-out var(--cpfx-atr, 0ms) both; }
.cpfx-sort-sua b { color: #f3da9c; }
.cpfx-sort-sua img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(201, 168, 76, .6); vertical-align: middle; margin: 0 4px; }
.cpfx-sort-sua.cpfx-rm { animation: cpfx-esmaece .3s ease-out both !important; }
.cpfx-sort-pular { position: absolute; right: 18px; bottom: 12px; z-index: 9; font: 600 .66rem 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(243, 230, 200, .6); pointer-events: none; animation: cpfx-aparece .4s ease-out 1s both; }
@keyframes cpfx-sort-faixa { 0% { opacity: 0; transform: scaleX(.5); } 22% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes cpfx-sort-e { from { transform: translateX(calc(-1 * var(--cpfx-dx, 70px))) scale(.88); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-sort-d { from { transform: translateX(var(--cpfx-dx, 70px)) scale(.88); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-sort-c { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfx-sort-taca { 0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 110, 0); } 50% { box-shadow: 0 0 22px rgba(255, 210, 110, .35); } }
/* o clarao da trava vai numa sombra interna (o fundo fica livre para o vencedor da simulada) */
@keyframes cpfx-sort-trava { 0% { box-shadow: inset 0 0 0 200px rgba(255, 236, 190, .5); } 100% { box-shadow: inset 0 0 0 200px rgba(255, 236, 190, 0); } }
@keyframes cpfx-sort-clim { 0% { background: rgba(255, 240, 200, .95); box-shadow: 0 0 26px 6px rgba(255, 210, 110, .95); transform: scale(1.08); }
  100% { background: rgba(201, 168, 76, .1); box-shadow: none; transform: none; } }
@keyframes cpfx-sort-meu { 0% { transform: scale(var(--cpfx-meu-escala, 1.1)); box-shadow: 0 0 0 2px #fff3c4, 0 0 40px 10px rgba(255, 210, 110, .85); }
  100% { transform: none; box-shadow: 0 0 0 1px rgba(201, 168, 76, .45), 0 0 16px rgba(201, 168, 76, .28); } }
@keyframes cpfx-sort-perde { from { opacity: 1; } to { opacity: .42; } }
@keyframes cpfx-sort-ganha { from { background: transparent; color: rgba(232, 216, 184, .92); } to { background: rgba(201, 168, 76, .13); color: #f3da9c; } }
@keyframes cpfx-sort-fio { to { stroke-dashoffset: 0; } }
@keyframes cpfx-centelha { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* movimento reduzido: a chave pronta, num esmaecer curto */
.cpfx-sort.cpfx-rm .cp-jogo, .cpfx-sort.cpfx-rm .cp-cartao, .cpfx-sort.cpfx-rm .cp-campeao, .cpfx-sort.cpfx-rm .cp-col-t,
.cpfx-sort.cpfx-rm .cp-fios { animation: cpfx-esmaece .3s ease-out both !important; }
.cpfx-sort.cpfx-rm .cp-lado, .cpfx-sort.cpfx-rm .cp-trein, .cpfx-sort.cpfx-rm .cp-ok, .cpfx-sort.cpfx-rm .cp-fios path { animation: none !important; }
@media (max-width: 600px) {
  .cpfx-sort-faixa-in { padding: 10px 34px 12px; }
  .cpfx-sort-faixa-in b { font-size: 1.15rem; }
  .cpfx-sort-faixa-in span { font-size: .74rem; }
  .cpfx-sort-sua { font-size: .78rem; padding: 8px 10px; }
  .cpfx-sort-pular { right: 10px; bottom: 6px; font-size: .58rem; }
  /* botoes no tamanho natural (o mobile do style.css estica .mestre-action-btn a 100%) */
  .cpfx-chamada-acoes .mestre-action-btn { width: auto; flex: 0 1 auto; min-width: 0; }
  .cpfx-coroa-acoes { padding: 0 16px; }
  .cpfx-coroa-acoes .mestre-action-btn { width: auto; flex: 1 1 0; min-width: 0; }
}
/* chamada em tela estreita (360-480 px): retrato menor, relogio no canto, textos quebrando,
   "Estou pronto" numa linha inteira, "Ver chave" e "–" embaixo e a nota por ultimo.
   Nada passa da largura da tela (a chegada grande tambem respeita: ver --cpfx-chega-escala). */
@media (max-width: 480px) {
  .cpfx-chamada-pos { padding: 0 8px; }
  .cpfx-chamada { box-sizing: border-box; max-width: 100%; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 10px 12px; }
  .cpfx-chamada-ret { width: 44px; height: 44px; align-self: start; }
  .cpfx-chamada-ret::after { inset: -4px; }
  .cpfx-chamada-vs { width: 20px; height: 20px; right: -5px; bottom: -3px; font-size: .64rem; }
  .cpfx-chamada-ret .cpfx-inicial { font-size: 1.2rem; }
  .cpfx-chamada-txt { overflow-wrap: anywhere; }
  .cpfx-chamada-eb { font-size: .58rem; letter-spacing: .1em; }
  .cpfx-chamada-tit { font-size: .92rem; line-height: 1.2; }
  .cpfx-chamada-sub { font-size: .74rem; line-height: 1.35; }
  .cpfx-chamada-rel { align-self: start; padding-left: 0; }
  .cpfx-chamada-rel b { font-size: 1.15rem; }
  .cpfx-chamada-rel small { max-width: 58px; margin: 2px auto 0; white-space: normal; font-size: .56rem; line-height: 1.2; }
  .cpfx-chamada-acoes { gap: 6px; }
  .cpfx-chamada-acoes .mestre-action-btn { width: auto; min-width: 0; margin: 0; }
  .cpfx-chamada-acoes .mestre-action-btn:first-child { flex: 1 1 100%; }
  .cpfx-chamada-acoes .mestre-action-btn + .mestre-action-btn { flex: 1 1 auto; }
  .cpfx-chamada-acoes .cpfx-chamada-nota { flex: 1 1 100%; order: 3; margin-left: 0; text-align: left; font-size: .68rem; }
  .cpfx-chamada-mini { right: 8px; max-width: calc(100vw - 16px); }
}