/* Prêmio na tela (WinFX) — troféu no padrão COROA: medalhão com coroa, faixa com o título, valor dourado com brilho,
   barra rumo ao próximo título e faíscas. A cor de cada nível vem de --wc/--wc2 (definidas no winfx.js).
   Só transform/opacity animam (leve até em celular simples); com "reduzir movimento" tudo fica parado. */
.wfx.show { background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--wc) 16%, rgba(6, 9, 20, .55)), rgba(3, 5, 12, .82) 75%); backdrop-filter: blur(3px); }
.wfx .wfx-card { display: none; }
.wx-glow { position: absolute; left: 50%; top: 50%; width: min(620px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--wc) 45%, transparent), transparent 62%); transition: transform .6s cubic-bezier(.2, 1.4, .4, 1), opacity .4s; }
.wfx.show .wx-glow { opacity: .9; transform: translate(-50%, -50%) scale(1); }
.wfx .wfx-rays { opacity: .35; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wc) 22%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 46%); mask: radial-gradient(circle, #000 8%, transparent 46%); animation: wxSpin 18s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }

/* faíscas subindo */
.wx-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wx-sparks i { position: absolute; left: var(--x); bottom: -10px; width: 6px; height: 6px; border-radius: 50%; opacity: 0; background: var(--wc); box-shadow: 0 0 10px var(--wc), 0 0 2px #fff; transform: scale(var(--s)); }
.wfx.show .wx-sparks i { animation: wxRise 3.2s var(--d) ease-in infinite; }
@keyframes wxRise { 0% { opacity: 0; transform: translateY(0) scale(var(--s)); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-95vh) scale(calc(var(--s) * .4)); } }

/* troféu */
.wx { position: relative; width: min(440px, 90vw); padding: 64px 26px 18px; text-align: center; border-radius: 28px; transform: translateY(24px) scale(.7); opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 14%, #141a2e), #0a0f1d 70%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--wc) 90%, #fff), color-mix(in srgb, var(--wc2) 80%, #000) 45%, color-mix(in srgb, var(--wc) 70%, #fff)) border-box;
  border: 2px solid transparent; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 60px color-mix(in srgb, var(--wc) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .5s cubic-bezier(.2, 1.5, .4, 1), opacity .3s; }
.wfx.show .wx { transform: none; opacity: 1; }
.wfx.bump .wx { animation: wxBump .6s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes wxBump { 35% { transform: scale(1.09) rotate(-1deg); } 70% { transform: scale(.98); } }

.wx-medal { position: absolute; left: 50%; top: -46px; width: 92px; height: 92px; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%; font-size: 44px; color: #2a1a04;
  background: radial-gradient(circle at 35% 28%, #fff7d1, var(--cx-gold, #f7c85e) 45%, #a8700f 100%); box-shadow: 0 0 0 5px #0a0f1d, 0 0 0 7px color-mix(in srgb, var(--wc) 80%, #fff), 0 12px 30px rgba(0, 0, 0, .6), 0 0 34px color-mix(in srgb, var(--wc) 55%, transparent); }
.wx-medal > i { position: relative; z-index: 1; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .45)); }
.wfx.show .wx-medal > i { animation: wxCrown 2.4s ease-in-out infinite; }
@keyframes wxCrown { 50% { transform: translateY(-3px) rotate(-4deg); } }
.wx-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--wc) 70%, transparent); animation: wxSpin 9s linear infinite; }
.wx-orbit { position: absolute; inset: -22px; animation: wxSpin 4s linear infinite; }
.wx-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--wc), 0 0 18px var(--wc); }
.wx-orbit i:nth-child(1) { top: 0; left: 50%; } .wx-orbit i:nth-child(2) { bottom: 12%; left: 8%; } .wx-orbit i:nth-child(3) { bottom: 12%; right: 8%; }

/* faixa do título */
.wx-ribbon { position: relative; display: inline-block; margin: 0 auto 6px; padding: 7px 26px; color: #fff;
  background: linear-gradient(180deg, var(--wc), var(--wc2)); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--wc) 45%, transparent)); }
.wx-ribbon .wfx-title { margin: 0; font: 900 clamp(15px, 3.4vw, 20px) var(--serif, 'Cinzel', serif); letter-spacing: .12em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* valor */
.wx-amt { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 4px 0 2px; line-height: 1; }
.wx-amt small { font: 800 clamp(18px, 4vw, 26px) var(--display); color: color-mix(in srgb, var(--wc) 60%, #fff); }
.wx-amt b { font: 800 clamp(48px, 12vw, 86px) var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 0%, #fff6d6 35%, var(--cx-gold, #f7c85e) 48%, #fff 56%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 22px color-mix(in srgb, var(--wc) 55%, transparent)); }
.wfx.show .wx-amt b { animation: wxShine 2.2s linear infinite; }
@keyframes wxShine { from { background-position: 120% 0; } to { background-position: -100% 0; } }

.wx-meta { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 10px; }
.wx-meta .wfx-mult { min-height: 0; margin: 0; padding: 3px 10px; border-radius: 99px; font: 800 14px var(--display); color: var(--wc); background: color-mix(in srgb, var(--wc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--wc) 40%, transparent); }
.wx-meta .wfx-mult:empty { display: none; }
.wx-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: #4ade80; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.wfx.final .wx-ok { opacity: 1; transform: none; }

/* rumo ao próximo título */
.wx-next { margin: 0 auto; max-width: 320px; }
.wx-bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.wx-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); border-radius: inherit; background: linear-gradient(90deg, var(--wc2), var(--wc), #fff); transition: transform .12s linear; }
.wx-next small { display: block; margin-top: 6px; font-size: 12px; color: #a3afc4; }
.wx-next small b { color: #fff; }
.wx-tiers { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.wx-tiers i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background .3s, box-shadow .3s; }
.wx-tiers i.on { background: var(--wc); box-shadow: 0 0 8px var(--wc); }
.wx-tap { margin: 8px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #65728b; }

/* níveis altos: borda viva e valor pulsando */
.wfx.lv3 .wx, .wfx.lv4 .wx, .wfx.lv5 .wx, .wfx.lv6 .wx, .wfx.lv7 .wx { box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 90px color-mix(in srgb, var(--wc) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15); }
.wfx.lv3 .wfx-rays, .wfx.lv4 .wfx-rays, .wfx.lv5 .wfx-rays, .wfx.lv6 .wfx-rays, .wfx.lv7 .wfx-rays { opacity: .75; animation-duration: 10s; }
.wfx.lv7 .wx-ribbon { background: linear-gradient(90deg, #ff3d9a, #ffd84d, #4de8ff, #c08bff); }

@media (max-width: 480px) { .wx { padding: 58px 16px 14px; } .wx-medal { width: 80px; height: 80px; top: -40px; font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .wfx .wfx-rays, .wx-sparks i, .wx-ring, .wx-orbit, .wx-medal > i, .wx-amt b { animation: none !important; } }
/* o valor herdava estilos do cartão antigo */
.wx .wx-amt b.wfx-amt { text-shadow: none; color: transparent; white-space: nowrap; }
.wx-amt { white-space: nowrap; }

/* v2: cartão em degradê, sem bordas e sem medalhão — o foco é o valor */
.wx { padding: 26px 30px 18px; border: 0; border-radius: 26px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--wc) 34%, #101626) 0%, color-mix(in srgb, var(--wc2) 30%, #0b1020) 55%, #080c18 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 70px color-mix(in srgb, var(--wc) 22%, transparent); }
.wx::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%); }
.wx-ribbon { padding: 0; margin: 0 0 4px; background: none; clip-path: none; filter: none; }
.wx-ribbon .wfx-title { font-size: clamp(13px, 3vw, 16px); letter-spacing: .22em; color: color-mix(in srgb, var(--wc) 55%, #fff); text-shadow: none; }
.wx-amt b { font-size: clamp(52px, 13vw, 92px); }
.wx-meta { margin-bottom: 4px; }
.wx-tap { margin-top: 6px; opacity: .7; }
.wfx.lv3 .wx, .wfx.lv4 .wx, .wfx.lv5 .wx, .wfx.lv6 .wx, .wfx.lv7 .wx { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 100px color-mix(in srgb, var(--wc) 38%, transparent); }
.wfx.lv7 .wx-ribbon { background: none; }
.wfx.lv7 .wx-ribbon .wfx-title { background: linear-gradient(90deg, #ff3d9a, #ffd84d, #4de8ff, #c08bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 480px) { .wx { padding: 22px 16px 14px; } }

/* v3: faixa em degradê que some nas laterais (transparente nas pontas, sem sombra nem cantos visíveis) */
.wx { width: min(640px, 100vw); border-radius: 0; padding: 26px 70px 18px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--wc2) 55%, rgba(8, 12, 24, .9)) 22%, color-mix(in srgb, var(--wc) 32%, rgba(10, 14, 28, .95)) 50%, color-mix(in srgb, var(--wc2) 55%, rgba(8, 12, 24, .9)) 78%, transparent 100%);
  box-shadow: none; }
.wx::before { border-radius: 0; background: radial-gradient(50% 70% at 50% 0%, rgba(255, 255, 255, .12), transparent 70%); }
.wfx.lv3 .wx, .wfx.lv4 .wx, .wfx.lv5 .wx, .wfx.lv6 .wx, .wfx.lv7 .wx { box-shadow: none; }
@media (max-width: 480px) { .wx { padding: 22px 34px 14px; } }
.wx { padding-top: 34px; padding-bottom: 26px; -webkit-mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }