/* ultimate.css — animações Ultimate (src/ui/Ultimates.js): cut-in em ecrã inteiro (faixa diagonal com o vídeo, nome da
   personagem, linhas de velocidade e, no golpe, um corte de luz e um clarão), fita "ULTIMATE" nas cartas, botão e
   pré-visualização nos Baralhos e a personagem no lugar da peça (tabuleiro CSS e cartão da peça).
   Brilho permitido: é um momento de Lendária, como a Chain e a abertura de pacotes. */

/* ───────── cut-in ───────── */
.ult-cut { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; overflow: clip; cursor: pointer; user-select: none; }
.ult-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 38%, transparent), rgba(9, 12, 16, .93) 70%); }
.ult-band { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150vw; height: min(60vh, 52vw); rotate: -6deg; overflow: hidden;
  background: linear-gradient(90deg, var(--c1), #2A0A10 26%, #12090C 50%, #2A0A10 74%, var(--c2));
  border-block: 6px solid var(--border-ink); box-shadow: 0 0 0 4px var(--c2), 0 0 48px color-mix(in srgb, var(--c2) 55%, transparent); }
.ult-media { position: absolute; inset: 0; rotate: 6deg; scale: 1.16; display: grid; place-items: center; }
.ult-still, .ult-video { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ult-still { height: 88%; width: auto; filter: drop-shadow(0 8px 0 rgba(9, 12, 16, .6)); animation: ult-kb 5s ease-out forwards; }
.ult-video { height: 100%; width: auto; aspect-ratio: 16 / 9; opacity: 0; transition: opacity .2s;
  -webkit-mask-image: radial-gradient(ellipse 52% 62% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 62% at 50% 50%, #000 62%, transparent 100%); }
.ult-cut.vplay .ult-video { opacity: 1; }
.ult-cut.vplay .ult-still { opacity: 0; }
@keyframes ult-kb { from { scale: 1.1; } to { scale: 1; } }
.ult-lines { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .16) 46px 49px, transparent 49px 150px); animation: ult-lines .3s linear infinite; }
@keyframes ult-lines { to { background-position: -150px 0; } }
.ult-title { position: absolute; left: 6vw; bottom: 13vh; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; rotate: -6deg; pointer-events: none; }
.ult-title small { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: var(--c2); color: var(--text-inverse);
  border: 2.5px solid var(--border-ink); font: 800 .82rem/1.5 var(--font-sans); letter-spacing: .14em; box-shadow: 0 3px 0 #090C10; }
.ult-title b { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 124px); line-height: .95; color: #fff;
  -webkit-text-stroke: 5px var(--border-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--border-ink), 0 0 28px var(--c1); }
.ult-title span { font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); color: #FFE8B0; text-shadow: 0 2px 0 var(--border-ink); }
.ult-slash { position: absolute; left: -10vw; width: 120vw; top: 50%; height: 16px; margin-top: -8px; rotate: -18deg; transform-origin: 0 50%; border-radius: 50%; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 18%, var(--c2) 55%, var(--c1) 80%, transparent); box-shadow: 0 0 24px var(--c1), 0 0 64px var(--c2); pointer-events: none; }
.ult-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--c2) 60%, transparent) 45%, transparent 75%); }
.ult-skip { position: absolute; right: 16px; bottom: 14px; font: 700 .78rem var(--font-sans); color: var(--text-muted); }
/* defesa: barreira de hexágonos a pulsar por cima (na fusão, vermelha por dentro e ciano por fora) */
.ult-hex { position: absolute; left: 50%; top: 50%; width: min(46vh, 40vw); aspect-ratio: 1.1; translate: -50% -50%; rotate: 6deg; pointer-events: none;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: radial-gradient(closest-side, transparent 72%, var(--c2) 80%, transparent 92%);
  opacity: .9; animation: ult-hex 0.9s ease-out infinite; }
.ult-hex.b { width: min(36vh, 32vw); background: radial-gradient(closest-side, transparent 70%, var(--c1) 80%, transparent 92%); animation-delay: .3s; }
@keyframes ult-hex { from { scale: .6; opacity: 1; } to { scale: 1.25; opacity: 0; } }
html.reduce-motion .ult-hex { animation: none; opacity: .5; }
html.reduce-motion .ult-lines, html.reduce-motion .ult-still { animation: none; }

/* ───────── entrada da fusão (UltimateFusion.js): duas faixas chocam no centro ───────── */
.ult-fuse { position: fixed; inset: 0; z-index: 97; overflow: clip; cursor: pointer; user-select: none; }
.fz-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(27, 38, 56, .7), rgba(9, 12, 16, .95) 72%); }
.fz-band { position: absolute; left: -5vw; right: -5vw; height: 36vh; display: flex; align-items: center; gap: 2vw; padding: 0 8vw; overflow: hidden;
  border-block: 5px solid var(--border-ink); box-shadow: 0 0 0 3px var(--c), 0 0 40px var(--c); }
.fz-band.l { top: 9vh; rotate: -5deg; background: linear-gradient(90deg, var(--c), #2A0A10 55%, transparent); }
.fz-band.r { bottom: 9vh; rotate: -5deg; justify-content: flex-end; background: linear-gradient(270deg, var(--c), #0A1A2A 55%, transparent); }
.fz-band img { height: 150%; width: auto; margin-top: 18%; filter: drop-shadow(0 6px 0 rgba(9, 12, 16, .6)); }
.fz-band b { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7vw, 96px); color: #fff; -webkit-text-stroke: 5px var(--border-ink); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--border-ink), 0 0 24px var(--c); }
.fz-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 209, 102, .85) 18%, rgba(72, 202, 228, .6) 38%, transparent 70%); }
.fz-ring { position: absolute; left: 50%; top: 50%; width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 10px solid #FFD166; box-shadow: 0 0 30px #D90429, inset 0 0 30px #D90429; }
.fz-ring.b { border-color: #48CAE4; box-shadow: 0 0 30px #0096C7, inset 0 0 30px #0096C7; }
.fz-word { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; pointer-events: none; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 12vw, 170px); color: #fff; -webkit-text-stroke: 7px var(--border-ink); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--border-ink), -6px 0 28px #D90429, 6px 0 28px #48CAE4; }

/* ───────── fita nas cartas ───────── */
.ult-ribbon { position: absolute; z-index: 6; left: 50%; top: calc(var(--cw) * -.07); translate: -50% 0; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px;
  border-radius: 999px; white-space: nowrap; pointer-events: none; font: 800 calc(var(--cw) * .05 + 5px)/1.45 var(--font-sans); letter-spacing: .1em;
  color: var(--text-inverse); background: linear-gradient(90deg, var(--color-primary-hover), var(--color-primary)); border: 2px solid var(--border-ink); box-shadow: 0 2px 0 #090C10; }
.ult-ribbon .ico { width: 1.1em; height: 1.1em; }
.hcard.ult-on .hc-face { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.hcard.ult-locked .ult-ribbon { background: var(--surface-3); color: var(--text-muted); }
.hcard.size-xs .ult-ribbon, .hcard.size-sm .ult-ribbon { display: none; }

/* ───────── Baralhos: botão e pré-visualização ───────── */
.btn.ult-btn { --bg: linear-gradient(180deg, #FF5A6A 0%, var(--color-danger) 100%); --fg: #fff; --lip: var(--color-danger-lip);
  --shadow: 0 5px 0 var(--color-danger-lip), 0 8px 16px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .35); }
.modal.ult-modal { width: min(880px, 94vw); max-width: none; }
.ult-prev { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; }
.ult-prev-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 3px solid var(--border-ink);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 45%, #1B2638), #0F141C 72%); box-shadow: 0 0 0 3px var(--c2), 0 6px 0 #090C10; }
.ult-prev-stage img { position: absolute; left: 50%; top: 6%; height: 88%; translate: -50% 0; }
.ult-prev-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ult-prev-stage video[hidden] { display: none; }
.ult-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--color-primary); color: var(--text-inverse);
  border: 2px solid var(--border-ink); font-weight: 800; font-size: .74rem; letter-spacing: .1em; }
.ult-prev h2 { margin: 8px 0 4px; }
.ult-prev ul { margin: 4px 0 10px; padding-left: 18px; font-size: .9rem; line-height: 1.4; }
.ult-prev li + li { margin-top: 3px; }
.ult-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ult-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ult-tabs.fz { align-items: center; margin-top: -6px; }
.ult-tabs.fz small { font-weight: 800; font-size: .78rem; color: var(--text-muted); margin-right: 2px; }
.ult-owned { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--color-success); }
@media (max-width: 760px) { .ult-prev { grid-template-columns: 1fr; } }

/* ───────── barreira do guardião no Rei (tabuleiro CSS de reserva; no 3D é uma cúpula) ───────── */
.piece.ult-ward .base-disc { box-shadow: 0 0 0 3px #48CAE4, 0 0 18px 6px rgba(72, 202, 228, .7); animation: ult-ward 1.2s ease-in-out infinite alternate; }
@keyframes ult-ward { to { box-shadow: 0 0 0 3px #9BE7FF, 0 0 26px 10px rgba(72, 202, 228, .9); } }
html.reduce-motion .piece.ult-ward .base-disc { animation: none; }

/* ───────── a personagem no lugar da peça ───────── */
.piece.ult-form .squash { display: grid; place-items: end center; overflow: visible; }
.piece .ult-fig { height: 175%; width: auto; max-width: none; translate: 0 4%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); pointer-events: none; }
/* cartão da peça: palco mais alto; a personagem 3D (Showcase3D) ocupa o palco todo, com os pés no centro do disco */
.piece-insp.ult .pi-stage { height: 230px; }
.piece-insp.ult .pi-figure { width: 150px; height: 168px; }
.piece-insp.ult .pi-figure .squash { display: flex; align-items: flex-end; justify-content: center; }
.piece-insp.ult .pi-figure .ult-fig { height: 100%; translate: 0 -4%; }
.pi-stage .show3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.pi-title b small { font-weight: 700; font-size: .7em; color: var(--text-muted); }
/* Escudo Tático de pé (tabuleiro CSS de reserva): anel ciano no Rei — o 3D mostra a etiqueta "SEM XEQUE" */
.piece.k-guard:not(.ult-ward) .base-disc { box-shadow: 0 0 0 3px #48CAE4; }