/* ═══════════════════════════════════════════════════════════════════════
   Flujo del partido: carga, buscando rival, presentación TÚ vs RIVAL y
   resultado con recompensas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logotipo de la marca (client/js/ui/logo-juego.js, el mismo del splash) ── */
.loading-logo {
  position: relative; margin: 0; flex: 0 1 auto; min-height: 0;
  height: min(40vh, 17rem); max-width: 92vw;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}
.loading-logo-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  animation: logo-pop .55s cubic-bezier(.2,1.5,.4,1) both, logo-float 2.6s .55s ease-in-out infinite;
}
@keyframes logo-pop { from { transform: scale(.55) rotate(-4deg); opacity: 0; } }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Carga ── */
.loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 1rem var(--gutter); }
.loading::before { content: ''; position: absolute; left: 50%; top: 42%; width: 80vmin; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,240,170,.14) 0 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 65%); mask-image: radial-gradient(circle, #000 10%, transparent 65%);
  animation: spin-c 50s linear infinite; pointer-events: none; }
.loading-bottom { position: relative; width: min(100%, 30rem); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.loading-bar { width: 100%; height: 1.7rem; }
.loading-bar > span { font-size: .95rem; }
.loading-tip { margin: 0; min-height: 3em; text-align: center; font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.5); }
.loading-tip b { color: var(--accent); }
.loading-error { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-weight: 700; }
.loading-error p { margin: 0; }

/* ── Buscando rival ── */
.mm { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6rem; padding: 1.3rem var(--gutter) 1rem; }
.mm-head { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mm-title { font-size: 2.4rem; }
.mm-league { display: flex; align-items: center; gap: .5rem; padding: .2rem .8rem .2rem .2rem; border-radius: 999px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.mm-league canvas { width: 3.6rem; aspect-ratio: 16 / 9; border-radius: 999px; border: 2px solid var(--ink); }
.mm-arena { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 3.5rem); flex: 1; min-height: 0; }
.mm-arena .pcard { width: min(13rem, 34vh); }
.mm-you { animation: slide-l .5s cubic-bezier(.2,1.2,.4,1) both; }
.mm-rival { animation: slide-r .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes slide-l { from { transform: translateX(-60px); opacity: 0; } }
@keyframes slide-r { from { transform: translateX(60px); opacity: 0; } }
.mm-vs { font-size: 4.2rem; color: var(--title); --sc: var(--title-ink); --sw: .18em; animation: pulse 1s ease-in-out infinite; }
.mm-reel { overflow: hidden; }
.mm-reel-strip { position: relative; z-index: 1; display: flex; flex-direction: column; animation: reel 1s linear infinite; filter: blur(1.2px); }
.mm-reel-strip canvas { flex: none; width: 100%; aspect-ratio: 1.05; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kit) 55%, #fff) 0%, var(--kit) 45%, color-mix(in srgb, var(--kit) 55%, #000) 100%); }
@keyframes reel { from { transform: translateY(0); } to { transform: translateY(calc(-100% * 8 / 9)); } }
.mm-found-art { display: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.mm-rival:not(.found) .mm-rival-flag { visibility: hidden; }
.mm-rival.found .mm-reel-strip { display: none; }
.mm-rival.found .mm-found-art { display: block; animation: pop-in .45s cubic-bezier(.2,1.5,.4,1) both; }
.mm-rival.found { animation: found-flash .6s ease-out; }
@keyframes found-flash { 0% { filter: brightness(2.4); transform: scale(1.1); } 100% { filter: none; transform: none; } }
.mm-foot { display: flex; align-items: center; gap: 1.4rem; }
.mm-foot.done { visibility: hidden; }
.mm-time { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.3rem; }

/* ── TÚ vs RIVAL ── */
.vs { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; overflow: hidden; }
.vs-bg-l, .vs-bg-r { position: absolute; inset: 0; }
.vs-bg-l { background: radial-gradient(ellipse 42% 60% at 24% 46%, rgba(120, 220, 255, .55) 0%, rgba(120, 220, 255, 0) 100%), linear-gradient(135deg, #1aa8e8 0%, #0d6fc4 45%, #0a2f63 100%); clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); animation: bg-in-l .45s cubic-bezier(.2,1,.3,1) both; }
.vs-bg-r { background: radial-gradient(ellipse 42% 60% at 76% 46%, rgba(255, 190, 120, .5) 0%, rgba(255, 190, 120, 0) 100%), linear-gradient(225deg, #ff6a4a 0%, #d22a1c 45%, #5c0c06 100%); clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%); animation: bg-in-r .45s cubic-bezier(.2,1,.3,1) both; }
.vs-bg-l::after, .vs-bg-r::after {   /* rejilla de plató y viñeta, como el fondo del kit */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3.1rem), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3.1rem);
}
.vs::after { content: ''; position: absolute; z-index: 1; left: 43%; right: 43%; top: 0; bottom: 0; background: linear-gradient(90deg, transparent 0 calc(50% - 3px), var(--ink) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)); transform: skewX(-11.3deg); opacity: .9; pointer-events: none; }
@keyframes bg-in-l { from { transform: translateX(-100%); } }
@keyframes bg-in-r { from { transform: translateX(100%); } }
.vs-side { --kit: #1f6a7c; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; min-width: 0; }
.vs-left { animation: slide-l .55s .1s cubic-bezier(.2,1.3,.4,1) both; }
.vs-right { animation: slide-r .55s .1s cubic-bezier(.2,1.3,.4,1) both; }
.vs-who { font-size: 2.6rem; color: var(--title); --sc: var(--title-ink); --sw: .2em; --sd: .09em; }
/* Cada uno en ficha completa sobre su foco (ver .spot en ui.css), mirándose: el rival, volteado. */
.vs-art { width: min(52vh, 22rem); aspect-ratio: .9; }
.vs-fig { position: absolute; inset: 0; z-index: 1; }
.vs-fig canvas { position: absolute; left: 0; top: -3cqh; width: 100%; height: 100cqh; }
.vs-right .vs-fig canvas { transform: scaleX(-1); }
.vs-art .spot-beam { opacity: .75; }
/* El marco de los logros se ve en la peana. */
.vs-art.has-frame::before { display: none; }
.vs-art.has-frame .spot-floor { box-shadow: 0 0 0 4px var(--fr), 0 0 0 7px var(--ink), 0 0 30px 8px var(--fr-glow, transparent), 0 14px 26px rgba(0,0,0,.45); }
/* Entrada con pisotón: cae, se aplasta al tocar el suelo y rebota (el polvo lo pone versus.js). */
.vs-fig { animation: vs-stomp .5s .1s cubic-bezier(.4,0,.6,1) both; transform-origin: 50% 92%; }
@keyframes vs-stomp { 0% { transform: translateY(-55%) scale(.8); opacity: 0; } 60% { transform: translateY(0) scale(1); opacity: 1; } 72% { transform: scale(1.1, .86); } 86% { transform: scale(.97, 1.04); } 100% { transform: none; } }
.vs-plate { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem 1.1rem .6rem; border-radius: 16px; background: rgba(20,17,16,.84); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 .3rem .7rem rgba(0,0,0,.35); max-width: 100%; }
.vs-char { color: var(--text-dim); }
.vs-name-row { display: flex; align-items: center; gap: .5rem; max-width: 100%; }
.vs-nick { font-size: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-char { font-weight: 800; font-size: .95rem; }
.vs-power { --pc: #fff; display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .85rem; }
.vs-power i { width: .9rem; height: .9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 60%); box-shadow: 0 0 8px var(--pc); }
.vs-cups { font-size: 1.15rem; }
.vs-mid { position: relative; z-index: 3; display: grid; place-items: center; width: 9rem; }
.vs-bolt { position: absolute; width: 11rem; height: 11rem; opacity: 0; filter: drop-shadow(0 0 20px #ffe93b); }
.vs-bolt .ico { width: 100%; height: 100%; }
.vs-text { position: relative; font-size: 6.5rem; color: var(--title); --sc: var(--title-ink); --sw: .16em; --sd: .08em; opacity: 0; transform: scale(3); }
.vs.slam .vs-text { animation: vs-slam .45s cubic-bezier(.3,1.4,.5,1) forwards; }
.vs.slam .vs-bolt { animation: bolt .5s ease-out forwards; }
.vs.slam { animation: shake .4s linear; }
@keyframes vs-slam { 0% { opacity: 0; transform: scale(3) rotate(-10deg); } 60% { opacity: 1; transform: scale(.9) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes bolt { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: .85; transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
.vs-foot { position: absolute; z-index: 4; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: 1rem; display: flex; align-items: center; gap: .7rem; padding: .35rem 1.1rem .35rem .35rem; border-radius: 999px; background: rgba(20,17,16,.88); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 .3rem .7rem rgba(0,0,0,.35); white-space: nowrap; animation: rise-in .5s .6s both; }
.vs-foot canvas { width: 5rem; aspect-ratio: 16 / 9; border-radius: 999px; border: 2px solid var(--ink); }
.vs-mode { font-weight: 800; font-size: max(11px, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.vs-league { font-size: 1.15rem; }

/* ── Resultado ── */
.result { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.4rem var(--gutter) 1rem; }
.res-rays { position: fixed; left: 50%; top: 32%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, var(--ray-c, rgba(255,220,100,.2)) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 40%); mask-image: radial-gradient(circle, #000 4%, transparent 40%);
  animation: spin-c 30s linear infinite; pointer-events: none; }
.result-win .res-rays { display: none; }   /* el fondo de victoria (hk-bg--win) ya lleva sus rayos */
.result-lose .res-rays { --ray-c: rgba(140,160,210,.12); }
.result-draw .res-rays { --ray-c: rgba(120,190,255,.18); }
.res-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.res-title { font-size: 3.6rem; padding: 0 .15em .1em; animation: title-drop .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes title-drop { 0% { transform: translateY(-80px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.res-title.red { color: #ff6f5e; --sc: #4a0603; }
.res-title.blue { color: #7fe6ff; --sc: #062a3d; }
.res-mode { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .02em; color: #fff; -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }
.res-board { position: relative; display: flex; align-items: center; gap: 1.2rem; animation: rise-in .5s .2s both; }
/* Cabezas del resultado: el ganador grande, con corona y saltando de alegría; el perdedor
   pequeño, triste y apagado; en el empate, los dos iguales. */
.res-head { --kit: #1f6a7c; --rh: 9rem; position: relative; flex: none; width: var(--rh); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kit) 50%, #fff) 0%, var(--kit) 50%, color-mix(in srgb, var(--kit) 50%, #000) 100%);
  box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.res-head:empty { visibility: hidden; }
.res-head canvas { width: 100%; height: 100%; border-radius: 50%; }
.res-rival canvas { transform: scaleX(-1); }
.res-head.is-win { --rh: 12rem; box-shadow: 0 0 0 5px #ffd23a, 0 0 34px rgba(255,210,60,.7), 0 8px 0 rgba(0,0,0,.35); animation: res-winner 1.1s ease-in-out .7s infinite; }
.res-head.is-lose { --rh: 7rem; filter: saturate(.45) brightness(.78); align-self: flex-end; }
.res-crown { position: absolute; z-index: 2; left: 50%; top: -24%; width: 36%; aspect-ratio: 1; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); animation: pop-big .7s .5s cubic-bezier(.2,1.6,.4,1) both; }
.res-crown .ico { width: 100%; height: 100%; }
@keyframes res-winner { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9%) scale(1.03, .98); } 60% { transform: translateY(-9%); } 85% { transform: translateY(0) scale(1.04, .95); } }
.fly-icon { position: fixed; z-index: 85; pointer-events: none; transition: transform .6s cubic-bezier(.5,-.35,.4,1), opacity .6s ease-in; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.fly-icon .ico { width: 100%; height: 100%; }
.rw-ico.rw-twinkle { animation: pop-big .6s cubic-bezier(.2,1.6,.4,1), glow-pulse .9s ease-in-out 2; --glow: #8fe0ff; }
.res-score { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 1.4rem .6rem; min-width: 13rem; }
.res-names { display: flex; justify-content: space-between; gap: 1.5rem; width: 100%; font-weight: 800; font-size: .9rem; color: var(--text-dim); }
.res-names span { max-width: 8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-goals { display: flex; align-items: center; gap: .6rem; font-size: 4rem; line-height: 1; }
.res-goals i { font-style: normal; font-size: .6em; color: var(--text-dim); }
.res-rewards { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; animation: rise-in .5s .35s both; }
.rw { display: flex; align-items: stretch; gap: .6rem; padding: .6rem .8rem; }
.rw-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 6.4rem; padding: .3rem .6rem; border-radius: 12px; background: var(--well); box-shadow: inset 0 3px 6px rgba(0,0,0,.45); }
.rw-ico { width: 2.3rem; height: 2.3rem; }
.rw-ico .ico { width: 100%; height: 100%; }
.rw-item b { font-size: 1.5rem; line-height: 1; }
.rw-item small { font-weight: 700; color: var(--text-dim); font-size: max(11px, .75rem); }
.rw-item.neg b { color: #ffb0a8; }
.rw-xp { min-width: 11rem; }
.rw-xp .bar { width: 100%; margin-top: .25rem; }
.rw-xp .bar > i { transition: width 1s cubic-bezier(.2,.8,.2,1); }
.rw-pack-art { height: 3.8rem; }
.rw-pack-art .pack-art { height: 100%; width: auto; animation: pack-bob 1.2s ease-in-out infinite; }
.rw-notes { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.result.has-notes { gap: .6rem; }
.rw-lost { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .9rem; border-radius: 999px; background: rgba(160,30,20,.55); font-weight: 700; font-size: .88rem; }
.rw-lost .ico { width: 1.3em; height: 1.3em; }
.rw-slots { display: flex; gap: .4rem; }
.rw-slot { width: 3.2rem; height: 3.6rem; display: grid; place-items: center; border-radius: 10px; background: rgba(10,8,7,.5); border: 2px dashed rgba(190,232,242,.35); }
.rw-slot .pack-art { height: 80%; width: auto; }
.rw-slot.target { border-color: #b5f56e; box-shadow: 0 0 12px rgba(150,255,100,.5); }
.rw-slot.landed { animation: pop-in .4s cubic-bezier(.2,1.6,.4,1); border-style: solid; }
.fly-pack { position: fixed; z-index: 85; pointer-events: none; transition: transform .75s cubic-bezier(.4,-.3,.4,1); }
.fly-pack .pack-art { width: 100%; height: 100%; }
.rw-stats { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.rw-stats span { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .7rem; border-radius: 999px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); font-weight: 800; font-size: max(11px, .82rem); }
.rw-stats .ico { width: 1.2em; height: 1.2em; }
.rw-stats b { font-family: var(--font-title); font-weight: 400; font-size: 1rem; }
.rw-none { margin: 0; font-weight: 700; }
.res-actions { position: relative; display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; animation: rise-in .5s .5s both; }

@media (max-height: 500px) and (orientation: landscape) {
  .loading-logo { height: 44vh; }
  .loading { gap: 1.6rem; }
  .mm { padding-top: .8rem; }
  .mm-title { font-size: 1.6rem; }
  .mm-arena .pcard { width: 12.5rem; }
  .mm-arena .pcard-art { aspect-ratio: 1.45; }
  .mm-vs { font-size: 2.6rem; }
  .vs-art { width: min(48vh, 12rem); }
  .vs-who { font-size: 1.5rem; }
  .vs-nick { font-size: 1.2rem; }
  .vs-plate { padding: .3rem .7rem; gap: .1rem; }
  .vs-power { font-size: max(11px, .8rem); }
  .vs-cups { font-size: 1rem; }
  .vs-text { font-size: 4.5rem; }
  .vs-mid { width: 6rem; }
  .vs-foot { bottom: .4rem; }
  .result { gap: .45rem; padding-top: 1rem; justify-content: flex-start; }
  .res-title { font-size: 2.4rem; }
  .res-head { --rh: 5.6rem; }
  .res-head.is-win { --rh: 7rem; }
  .res-head.is-lose { --rh: 4.6rem; }
  .res-goals { font-size: 2.8rem; }
  .rw { padding: .4rem .5rem; gap: .4rem; }
  .rw-item { min-width: 5rem; }
  .rw-item b { font-size: 1.2rem; }
  .rw-ico { width: 1.8rem; height: 1.8rem; }
  .rw-stats { display: none; }
  .rw-slots { display: none; }
  /* Avisos del servidor (sobre cambiado por monedas, copas recortadas, abandono): caben con los
     botones a la vista en 844×390 aunque salgan dos. */
  .result.has-notes { padding-top: .6rem; gap: .35rem; }
  .result.has-notes .res-title { font-size: 2rem; }
  .result.has-notes .res-head { --rh: 4.6rem; }
  .result.has-notes .res-head.is-win { --rh: 5.6rem; }
  .result.has-notes .res-head.is-lose { --rh: 4rem; }
  .result.has-notes .res-goals { font-size: 2.3rem; }
  .result.has-notes .res-rewards { gap: .3rem; }
  .rw-notes { gap: .2rem; }
  .rw-lost { font-size: max(11px, .74rem); padding: .12rem .75rem; line-height: 1.3; }
}
@media (orientation: portrait) {
  .vs::after { display: none; }
  .mm-arena { flex-direction: column; gap: .6rem; }
  .mm-arena .pcard { width: min(11rem, 44vw); }
  .mm-vs { font-size: 2.4rem; }
  .vs { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  .vs-bg-l { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 56%); }
  .vs-bg-r { clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%); }
  .vs-art { width: min(26vh, 11rem); }
  .vs-side { flex-direction: row; gap: .8rem; }
  .vs-who { position: absolute; top: .4rem; left: 50%; transform: translateX(-50%); font-size: 1.3rem; }
  .vs-cups { display: none; }
  .vs-power { font-size: max(11px, .8rem); }
  .vs-mid { width: auto; height: 5rem; }
  .vs-text { font-size: 4.2rem; }
  .vs-foot { bottom: auto; top: .6rem; }
  .res-board { gap: .5rem; }
  .res-head { --rh: 5.5rem; }
  .res-head.is-win { --rh: 6.6rem; }
  .res-head.is-lose { --rh: 4.4rem; }
  .res-score { min-width: 0; padding: .4rem .8rem; }
  .res-goals { font-size: 3rem; }
  .rw { flex-wrap: wrap; justify-content: center; }
  .res-title { font-size: 2.6rem; }
}