/* ════════════════════════════════════════════════════════════════════
   cop-premios.css — cómo se ve un premio de la economía (tanda 1 · 29/09/2026)
   La carta chica teñida por rareza, el monto con su moneda y la tabla
   de premios de una escalera (F11 por fecha). Los números los pone
   `cop-premios.js`, que los lee de la tabla `economia`.
   ⚠ La carta es el mismo recurso que el pase de temporada (fondo de
   carta + logo, teñidos por rareza), en tamaño de fila.
   ════════════════════════════════════════════════════════════════════ */

/* ── la carta chica ─────────────────────────────────────────────── */
.cop-pr-carta{
  --pr-alto:46px;
  position:relative; display:inline-block; height:var(--pr-alto); aspect-ratio:5/7; flex:0 0 auto;
  border-radius:5px; overflow:hidden; box-sizing:border-box; vertical-align:middle;
  /* 09/10/2026 · Franco: «tiene un recuadro casi imperceptible alrededor de
     borde gris claro que quiero que lo saques. Esas cartas van sin fondo ni
     nada extra». Se fueron el anillo de 1 px, la sombra y el brillo. */
}
.cop-pr-carta--chica{ --pr-alto:26px; border-radius:3px }
.cop-pr-carta > img{ position:absolute; display:block }
.cop-pr-carta > img.f{ inset:0; width:100%; height:100%; object-fit:cover }
.cop-pr-carta > img.l{ left:18%; top:26%; width:64%; height:auto; opacity:.95; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) }
.cop-pr-carta[data-r="bronce"] > img.f{ filter:sepia(.9) saturate(1.7) hue-rotate(-20deg) brightness(.92) contrast(1.08) }
.cop-pr-carta[data-r="plata"]  > img.f{ filter:grayscale(1) brightness(1.25) contrast(1.05) }
.cop-pr-carta[data-r="diamante"] > img.f{ filter:hue-rotate(235deg) saturate(1.4) }
.cop-pr-carta[data-r="leyenda"] > img.f{ filter:hue-rotate(165deg) saturate(1.3) brightness(1.1) }
.cop-pr-carta[data-r="honor"] > img.f{ filter:hue-rotate(300deg) saturate(1.25) brightness(1.05) }
.cop-pr-carta[data-r="bronce"] > img.l{ filter:grayscale(1) sepia(1) saturate(2) hue-rotate(-10deg) brightness(1.1) drop-shadow(0 2px 3px rgba(0,0,0,.6)) }
.cop-pr-carta[data-r="plata"]  > img.l{ filter:grayscale(1) brightness(1.8) drop-shadow(0 2px 3px rgba(0,0,0,.6)) }
.cop-pr-carta[data-r="oro"]    > img.l{ filter:grayscale(1) sepia(1) saturate(3) brightness(1.3) drop-shadow(0 2px 3px rgba(0,0,0,.6)) }

/* ── moneda + número ────────────────────────────────────────────── */
.cop-pr-monto{ display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem); white-space:nowrap }
.cop-pr-monto .cop-ico{ --cop-ico:18px }
.cop-pr-monto b{ font-family:'Anton', sans-serif; font-weight:400; font-size:var(--fs-lg, 1.15rem); line-height:1;
  color:var(--text, #f4f6fb); font-variant-numeric:tabular-nums; letter-spacing:.02em }

/* ── el premio al costado de una fila de escalera (Champions, División) ── */
.cop-pr-fila{ display:inline-flex; align-items:center; gap:var(--gap-sm, .5rem); flex:0 0 auto }
.cop-pr-fila[hidden]{ display:none }

/* ── la tabla de una escalera de premios (F11 por fecha) ───────────
   Sin caja: filas finas sobre el fondo, el puesto a la izquierda, la
   moneda a la derecha. Anton sólo en los números. */
.cop-pr-tabla{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none }
.cop-pr-tabla[hidden]{ display:none }
.cop-pr-tabla > li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-md, .7rem);
  min-height:44px; padding:var(--gap-sm, .5rem) 0; box-sizing:border-box;
  border-top:1px solid rgba(255,255,255,.07);
}
.cop-pr-tabla > li:first-child{ border-top:0 }
.cop-pr-puesto{ display:inline-flex; align-items:baseline; gap:var(--gap-sm, .5rem); min-width:0 }
.cop-pr-puesto b{ font-family:'Anton', sans-serif; font-weight:400; font-size:var(--fs-lg, 1.15rem); line-height:1;
  color:var(--text, #f4f6fb); min-width:1.6em; font-variant-numeric:tabular-nums }
.cop-pr-puesto span{ font:600 var(--fs-md, .88rem)/1.2 'Inter', sans-serif; color:var(--text-dim, #9aa3b5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cop-pr-tabla > li.cop-pr-top .cop-pr-puesto b{ color:rgb(var(--cop-acento-rgb, 12,149,235)) }

/* ── el cartel de recompensas con uno o tres ítems ──────────────────
   `cop-recompensas-panel.css` arma la grilla de 2 × 2; con un número
   impar de ítems el último ocupa la fila entera en vez de dejar un
   hueco a la derecha. */
.rwd-premios > .rwd-p:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0 }
.rwd-p-ico .cop-pr-carta{ --pr-alto:50px }
.rwd-p-ico .cop-pr-final svg{ width:44px; height:44px }
.rwd-nota{ font:600 var(--fs-sm, .8rem)/1.35 'Inter', sans-serif; color:var(--text-dim, #9aa3b5);
  margin:calc(-1 * var(--gap-sm, .5rem)) 0 var(--gap-xl, 1.2rem); text-align:center }
.rwd-nota:empty{ display:none }