/* Finale stage: trophy winner + poop-head losers (see finale.jsx). Dark spotlight panel so additive Pixi light reads well. */
.finale { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; padding: 16px 10px 14px; margin: 14px 0 6px; text-align: center;
  background: radial-gradient(90% 70% at 50% 8%, #4a1520 0%, #240a10 55%, #12060a 100%); box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 5px #1a0a0e, 0 10px 26px -12px rgba(0,0,0,.6); color: #f6ecd6; }
.finale-spot { position: absolute; left: 50%; top: -10%; width: 70%; height: 70%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,228,150,.34), rgba(255,228,150,0)); }
.finale-gl { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.finale-gl canvas { display: block; }
.finale-kicker { position: relative; z-index: 2; font: 800 11px/1 var(--f-ui, Inter, sans-serif); letter-spacing: .36em; text-transform: uppercase; color: #f1cf78; margin-bottom: 6px; }
.finale-caption { position: relative; z-index: 2; margin-top: 8px; font: 600 13px/1.35 var(--f-ui, Inter, sans-serif); color: #e8d9b8; }
.finale-row { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 22px); }
.finale-row.lose { margin-top: 6px; }
.finale-row.win { margin-top: 10px; z-index: 3; }
.finale-body { position: relative; z-index: 2; }
.finale-body.duel { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 3vw, 26px); }
.finale-body.duel .finale-row { margin-top: 10px; }

.fig { --fs: clamp(96px, 27vw, 128px); display: flex; flex-direction: column; align-items: center; width: var(--fs); }
.fig.winner { --fs: clamp(150px, 46vw, 210px); width: calc(var(--fs) * 1.08); }
.fig-art { position: relative; width: var(--fs); height: var(--fs); }
.fig-avatar { position: absolute; left: 24%; top: 40%; width: 52%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  font-size: calc(var(--fs) * .3); background: hsl(var(--hue) 60% 86%); border: 3px solid #f3ead8; box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 2px rgba(0,0,0,.45); }
.fig.winner .fig-avatar { border-color: #ffe08a; box-shadow: 0 0 0 3px #b7791a, 0 0 26px rgba(255,214,110,.75); }
.fig.loser .fig-avatar { top: 34%; filter: saturate(.85); animation: figBonk .42s cubic-bezier(.3,.6,.4,1) calc(var(--dl) + .5s) both; }
.fig-arms { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: armsUp .8s cubic-bezier(.2,.9,.3,1.2) var(--dl) both; }
.fig-lift { position: absolute; left: 27%; top: -1%; width: 46%; z-index: 3; transform-origin: 50% 100%; animation: trophyUp .9s cubic-bezier(.2,.9,.3,1.25) var(--dl) both, trophyBob 2.4s ease-in-out calc(var(--dl) + .9s) infinite alternate; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(255,214,110,.6)); }
.fig-trophy { display: block; width: 100%; height: auto; }
.fig-sparkles { position: absolute; left: 18%; top: 0; width: 64%; height: 46%; z-index: 4; pointer-events: none; }
.fig-sparkles i { position: absolute; width: 10px; height: 10px; background: #fff8d6; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle 1.6s ease-in-out infinite; }
.fig-sparkles i:nth-child(1) { left: 6%; top: 24%; animation-delay: 1.2s; } .fig-sparkles i:nth-child(2) { left: 84%; top: 12%; animation-delay: 1.5s; width: 13px; height: 13px; }
.fig-sparkles i:nth-child(3) { left: 46%; top: -6%; animation-delay: 1.8s; } .fig-sparkles i:nth-child(4) { left: 92%; top: 58%; animation-delay: 2.1s; } .fig-sparkles i:nth-child(5) { left: -4%; top: 62%; animation-delay: 2.4s; }

.fig-poop { position: absolute; left: 19%; top: 0; width: 62%; z-index: 3; transform-origin: 50% 100%;
  animation: poopDrop .95s cubic-bezier(.3,.1,.4,1) var(--dl) both, poopWobble 2.6s ease-in-out calc(var(--dl) + .95s) infinite alternate; filter: drop-shadow(0 5px 6px rgba(0,0,0,.45)); }
.poop-svg { display: block; width: 100%; height: auto; }
.poop-svg .stink { animation: stink 1.8s ease-in-out infinite; }
.fig-drips { position: absolute; left: 30%; top: 44%; width: 40%; height: 40%; z-index: 3; pointer-events: none; }
.fig-drips i { position: absolute; top: 0; width: 7px; height: 12px; border-radius: 50% 50% 55% 55% / 35% 35% 65% 65%; background: #6b4520; opacity: 0; animation: drip 1.7s ease-in calc(var(--dl) + .75s) infinite; }
.fig-drips i:nth-child(1) { left: 12%; } .fig-drips i:nth-child(2) { left: 48%; animation-delay: calc(var(--dl) + 1.1s); } .fig-drips i:nth-child(3) { left: 82%; animation-delay: calc(var(--dl) + 1.5s); }

.fig-plate { position: relative; margin-top: -2px; padding: 5px 10px 6px; border-radius: 10px; background: rgba(0,0,0,.42); border: 1.5px solid rgba(243,234,216,.4); display: grid; gap: 3px; justify-items: center; max-width: 100%; }
.fig-plate b { font: 800 13px/1.1 var(--f-ui, Inter, sans-serif); color: #fbf3df; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fig.winner .fig-plate b { font-size: 16px; }
.fig-tag { font: 800 9.5px/1 var(--f-ui, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; }
.fig-tag.gold { background: linear-gradient(135deg, #ffe08a, #e3b75a); color: #2a1600; }
.fig-tag.brown { background: #7a4a1c; color: #ffe9c4; border: 1px solid #c98a3c; }
.fig-smear { position: absolute; right: -4px; top: -6px; width: 22px; height: 16px; border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; background: radial-gradient(circle at 35% 35%, #9a6a2c, #5e3a17); transform: rotate(-14deg); animation: smearIn .3s ease-out calc(var(--dl) + .55s) both; }
.fig-smear::after { content: ""; position: absolute; left: 4px; bottom: -6px; width: 6px; height: 9px; border-radius: 50%; background: #5e3a17; }

@keyframes trophyUp { 0% { opacity: 0; transform: translateY(46%) scale(.35) rotate(-12deg); } 60% { opacity: 1; transform: translateY(-6%) scale(1.1) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes trophyBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4%) rotate(2deg); } }
@keyframes armsUp { 0% { opacity: 0; transform: scaleY(.35); } 100% { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes poopDrop {
  0% { opacity: 0; transform: translateY(-190%) rotate(-26deg) scale(.7); }
  8% { opacity: 1; }
  58% { transform: translateY(8%) rotate(5deg) scale(1.08, .84); }
  72% { transform: translateY(-7%) rotate(-3deg) scale(.95, 1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes poopWobble { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-1.5%); } }
@keyframes figBonk { 0% { transform: none; } 35% { transform: translateY(6%) scale(1.06, .9); } 100% { transform: none; } }
@keyframes stink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: .95; transform: translateY(-4px); } }
@keyframes drip { 0% { opacity: 0; transform: translateY(0) scaleY(.6); } 15% { opacity: .95; } 100% { opacity: 0; transform: translateY(120%) scaleY(1.2); } }
@keyframes smearIn { from { opacity: 0; transform: rotate(-14deg) scale(.2); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* reduced motion / no animations: the finished picture with no movement */
.finale.rm .fig-arms, .finale.rm .fig-lift, .finale.rm .fig-poop, .finale.rm .fig-avatar, .finale.rm .fig-smear,
.finale.rm .fig-sparkles i, .finale.rm .fig-drips i, .finale.rm .poop-svg .stink { animation: none; }
.finale.rm .fig-sparkles, .finale.rm .fig-drips { display: none; }
@media (prefers-reduced-motion: reduce) {
  .finale .fig-arms, .finale .fig-lift, .finale .fig-poop, .finale .fig-avatar, .finale .fig-smear, .finale .poop-svg .stink { animation: none; }
  .finale .fig-sparkles, .finale .fig-drips { display: none; }
}
@media (max-width: 420px) { .finale { padding: 12px 6px 12px; } .fig { --fs: clamp(84px, 26vw, 108px); } .fig.winner { --fs: clamp(120px, 40vw, 160px); } .fig-plate b { font-size: 12px; } .fig-plate { padding: 4px 6px 5px; } }
.finale-row, .finale-body { min-width: 0; }
@media (max-width: 480px) { .finale-row.lose.n3 { gap: 6px; } .finale-row.lose.n3 .fig { --fs: clamp(68px, 21.5vw, 100px); } .finale-row.lose.n3 .fig-plate b { font-size: 11px; } .finale-row.lose.n3 .fig-tag { font-size: 8px; letter-spacing: .1em; padding: 3px 5px; } }