/* Resultado de la partida (result, spec 8.4). Raíz: .screen.ui.s-result. Sin barra superior: el
   monedero va arriba a la derecha (.res-wallet), el titular arriba y los botones abajo. */

.s-result .result-body { position: relative; display: flex; align-items: center; justify-content: center; padding: 64px 12px 66px; overflow: hidden; }
/* Rayos cálidos detrás del titular (solo si ganas) */
.s-result .res-rays { --ray: rgba(255,220,120,.14); left: 50%; top: 36px; width: 520px; height: 520px; margin: -260px 0 0 -260px; }

/* ---- Titular: la clase .ribbon se conserva (y su entrada), ya sin cinta ni colas ------------- */
.s-result .ribbon { position: absolute; left: 0; right: 0; top: 12px; height: 48px; display: flex; justify-content: center; pointer-events: none; animation: ribbon-in .6s cubic-bezier(.2,1.3,.4,1) both; }
.s-result .ribbon::before, .s-result .ribbon::after { content: none; }
.s-result .ribbon > div { line-height: 1.05; padding: 0 6px; white-space: nowrap; }
.s-result .ribbon.lose > div { color: var(--tx-3); }
@keyframes ribbon-in { from { transform: translateY(-40px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Jugadores y panel ---------------------------------------------------------------------- */
.s-result .res-row { display: flex; align-items: center; justify-content: center; gap: 24px; }
/* a más alto el bloque central crece (sin pasar de 844 de ancho: 708 · 1,15 = 814) */
#stage[data-h="l"] .s-result .res-row { transform: scale(1.12); }
#stage[data-h="xl"] .s-result .res-row { transform: scale(1.15); }
.s-result .res-player { width: 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s-result .res-player.loser { opacity: .7; }
.s-result .res-player .crown { height: 32px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -2px; }
.s-result .res-player .crown svg { display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); animation: crown 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes crown { 50% { transform: translateY(-3px) rotate(-3deg); } }
.s-result .res-player .avf { margin-top: 2px; }
.s-result .rp-name { display: flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px; }
.s-result .rp-name .ty-h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.s-result .rp-name .flag { width: 18px; height: 12px; }
.s-result .rp-tag { height: 18px; margin-top: -2px; display: flex; align-items: center; }

.s-result .res-panel { width: 320px; padding: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.s-result .res-coins { display: flex; align-items: center; justify-content: center; gap: 8px; }
.s-result .res-coins img { width: 40px; height: 40px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.s-result .res-coins .ty-num { font-size: 34px; font-weight: 800; color: var(--tx-2); min-width: 60px; }
.s-result .res-coins .ty-num.gold-t { color: transparent; }
.s-result .rw { display: flex; align-items: center; gap: 10px; }
.s-result .rw .rl { width: 110px; flex: none; white-space: nowrap; }
.s-result .rw .bar { flex: 1; min-width: 0; }
.s-result .rw .rv { width: 40px; flex: none; font-size: 16px; text-align: right; color: #fff; }
.s-result .res-streak { align-self: center; margin-top: 1px; }
.s-result .res-reason { text-align: center; margin-top: 1px; }
/* Partidas locales: trofeo (o la bola 8) con halo, título y texto */
.s-result .res-panel.local { align-items: center; text-align: center; gap: 8px; padding: 16px 18px; }
.s-result .res-local { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.s-result .res-local .halo { --gc: rgba(255,200,60,.4); left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.s-result .is-lose .res-local .halo { --gc: rgba(90,170,255,.3); }
.s-result .res-local .res-art { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.s-result .res-panel.local .ty-body { margin: 0; max-width: 260px; font-size: 12px; }

/* ---- Botones y monedero --------------------------------------------------------------------- */
.s-result .res-actions { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 14px; }
.s-result .res-actions .btn { width: 170px; }
.s-result .res-wallet { position: absolute; right: 14px; top: 10px; z-index: 3; }

/* Entrada del panel */
.s-result .res-panel { animation: pop-in .5s .25s both; }
.s-result .res-row.stagger > .res-mid { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .s-result .res-player .crown svg { animation: none; }
}