/* ════════════════════════════════════════════════════════════════════
   DB-REWARDS — Estilos del sistema de RECOMPENSAS (Colección).
   Hereda el tema del juego. Sala de trofeos y cartas generadas con CSS
   (sin arte con copyright). Rarezas con color y brillo holográfico.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --rw-gold: #f5b400;
  --rw-shelf: #3a2a1c;
  --rw-shelf-lit: #5a4330;
}

/* ── Overlay y panel ── */
.rewards-overlay {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 8, 16, .74); backdrop-filter: blur(7px);
  padding: 0; box-sizing: border-box;
}
.rewards-overlay.active { display: flex; }
/* Colección a pantalla completa (PC), como la ruleta/blackjack. */
.rewards-panel {
  width: 100vw; max-width: 100vw; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: none; border-radius: 0; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
/* El contenido interior (filtros, álbum, rejillas) centrado con un ancho cómodo
   en monitores muy grandes, pero usando toda la anchura disponible en PC. */
.rewards-body > * { max-width: 1900px; margin-left: auto; margin-right: auto; }
.rewards-head {
  position: relative; padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 100% 0%, rgba(245, 180, 0, .12), transparent 60%);
}
.rewards-close {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 9px; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text); font-size: 18px; cursor: pointer;
}
.rewards-close:hover { border-color: var(--rw-gold); color: var(--rw-gold); }
.rewards-title { margin: 0; font-family: var(--game, inherit); font-weight: 800; font-size: 1.4rem; letter-spacing: 2px; }
.rewards-points {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000;
  font-weight: 800; padding: 4px 12px; border-radius: 999px; font-size: .95rem;
}
.rewards-points span { font-size: .7rem; opacity: .8; }

/* ── Pestañas ── */
.rewards-tabs { display: flex; gap: 8px; padding: 12px 16px 0; }
.rewards-tab {
  flex: 1; padding: 11px; border: 1px solid var(--border); border-bottom: none;
  border-radius: 12px 12px 0 0; background: var(--surface2); color: var(--muted);
  font-family: var(--game, inherit); font-weight: 800; font-size: .9rem; cursor: pointer;
}
.rewards-tab span { font-size: .76rem; opacity: .8; margin-left: 4px; }
.rewards-tab.on { background: var(--surface); color: var(--text); border-color: var(--rw-gold); }
.rewards-body { flex: 1; overflow-y: auto; padding: 16px; }

/* ════════════════════════════════════════════
   VITRINA DE TROFEOS (sala con estantes)
   ════════════════════════════════════════════ */
.trophy-hall { position: relative; border-radius: 14px; overflow: hidden; }
.trophy-hall-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(245, 180, 0, .14), transparent 70%),
    linear-gradient(180deg, #1a130c, #0d0a07);
}
.trophy-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 4px 8px; padding: 14px;
}
.trophy-cell {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px 0; min-height: 116px;
}
.trophy-shelf {
  position: absolute; bottom: 18px; left: 4px; right: 4px; height: 10px;
  background: linear-gradient(180deg, var(--rw-shelf-lit), var(--rw-shelf));
  border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
}
.trophy-spr {
  width: 76px; height: 76px; image-rendering: pixelated; z-index: 1;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6));
}
.trophy-cell.locked .trophy-spr { filter: brightness(0); opacity: 1; }
.trophy-cell.got .trophy-spr { animation: trophyFloat 3s ease-in-out infinite; }
@keyframes trophyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.trophy-name {
  font-size: .66rem; color: var(--text); text-transform: capitalize; text-align: center;
  margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trophy-cell.locked .trophy-name { color: var(--muted); }
.trophy-shine {
  position: absolute; top: 6px; right: 18px; width: 14px; height: 14px; z-index: 2;
  background: radial-gradient(circle, #fff, transparent 60%); opacity: .8;
  animation: trophySparkle 2.4s ease-in-out infinite;
}
@keyframes trophySparkle { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1.1); opacity: .9; } }

/* ════════════════════════════════════════════
   ÁLBUM DE CARTAS
   ════════════════════════════════════════════ */
.rewards-cards-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.rewards-search {
  flex: 1; min-width: 140px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 9px 12px; font-size: .85rem;
}
.rewards-search:focus { outline: none; border-color: var(--rw-gold); }
.rewards-rar-sel {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 9px 10px; font-size: .82rem; cursor: pointer;
}
.rewards-shop-btn {
  background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000;
  border: none; border-radius: 9px; padding: 9px 14px; font-weight: 800; cursor: pointer; font-size: .82rem;
}
.rewards-shop-btn:hover { filter: brightness(1.08); }

.cards-album {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
}

/* ── Carta (marco propio) ── */
.poke-card {
  position: relative; border-radius: 12px; padding: 3px;
  background: linear-gradient(155deg, var(--rar), color-mix(in srgb, var(--rar) 40%, #000));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 14px var(--rar-glow);
  transition: transform .15s;
}
.poke-card:hover { transform: translateY(-3px) scale(1.02); }
.poke-card-inner {
  background: linear-gradient(180deg, #1c2430, #121820); border-radius: 9px;
  padding: 7px; display: flex; flex-direction: column; gap: 4px; height: 100%;
}
.poke-card-top { display: flex; justify-content: space-between; align-items: center; }
.poke-card-num { font-family: var(--game, inherit); font-size: .62rem; color: var(--muted); font-weight: 700; }
.poke-card-rar { font-size: .56rem; font-weight: 800; color: var(--rar); text-transform: uppercase; letter-spacing: .4px; }
.poke-card-art {
  position: relative; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rar) 22%, #0c1118), #0c1118);
  border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 6px;
  border: 1px solid color-mix(in srgb, var(--rar) 30%, transparent);
}
.poke-card-art img { width: 76px; height: 76px; image-rendering: pixelated; }
.card-dup {
  position: absolute; bottom: 4px; right: 4px; background: var(--rw-gold); color: #2a2000;
  font-size: .6rem; font-weight: 800; padding: 1px 5px; border-radius: 5px;
}
.poke-card-name { font-size: .72rem; font-weight: 700; color: var(--text); text-transform: capitalize; text-align: center; }
.poke-card-types { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; min-height: 14px; }
.card-type { font-size: .54rem; font-weight: 700; color: #fff; padding: 1px 4px; border-radius: 3px; text-transform: capitalize; }

/* Bloqueada: silueta */
.poke-card.locked .poke-card-art img { filter: brightness(0); opacity: .6; }
.poke-card.locked { filter: saturate(.4); opacity: .82; }
.poke-card.locked .poke-card-rar { color: var(--muted); }

/* Holográfico para holo y fullart */
.poke-card.rar-holo .poke-card-art::after,
.poke-card.rar-fullart .poke-card-art::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%);
  background-size: 250% 250%; animation: holoShine 3.5s linear infinite;
}
.poke-card.locked .poke-card-art::after { animation: none; background: none; }
@keyframes holoShine { 0% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* ── Tienda ── */
.shop-hint { color: var(--muted); font-size: .8rem; margin-bottom: 12px; text-align: center; }
.shop-album { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.shop-cell { display: flex; flex-direction: column; gap: 6px; }
.shop-buy {
  background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000; border: none;
  border-radius: 8px; padding: 7px; font-weight: 800; cursor: pointer; font-size: .78rem;
}
.shop-buy:hover:not(.disabled) { filter: brightness(1.1); }
.shop-buy.disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; }

.rewards-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 30px; }

/* ── Botón del menú ── */
.menu-collection {
  background: linear-gradient(160deg, #f5c84a, #d99a1e 55%, #a86f0e);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 20px rgba(245, 180, 0, .4);
}

/* ════════════════════════════════════════════
   SECUENCIA DE PREMIO
   ════════════════════════════════════════════ */
.rewards-prize {
  position: fixed; inset: 0; z-index: 1500; display: none;
  align-items: center; justify-content: center;
  background: rgba(3, 5, 12, .9); backdrop-filter: blur(8px);
  overflow-y: auto; padding: 24px 16px; box-sizing: border-box;
}
.rewards-prize.active { display: flex; }
.prize-stage { text-align: center; padding: 20px 20px 40px; max-width: 760px; width: 100%; margin: auto; }
.prize-burst {
  font-family: var(--game, inherit); font-weight: 900; font-size: 3.4rem; letter-spacing: 3px;
  color: var(--rw-gold); text-shadow: 0 0 30px rgba(245, 180, 0, .8), 0 4px 12px rgba(0, 0, 0, .6);
  animation: prizeBurst .7s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes prizeBurst { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.prize-sub { color: var(--text); margin: 6px 0 24px; font-size: 1rem; }

/* Sobre */
.prize-pack {
  width: 210px; height: 300px; margin: 30px auto 0; position: relative; cursor: grab;
  perspective: 900px; user-select: none; touch-action: none;
  animation: packFloat 4s ease-in-out infinite;
}
@keyframes packFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.prize-pack:active { cursor: grabbing; }
.prize-pack-body {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(160deg, #3a1c6e 0%, #5b2a8a 30%, #1a6f8a 65%, #123a6a 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .65), inset 0 0 50px rgba(255, 255, 255, .08),
    inset 0 2px 0 rgba(255, 255, 255, .3);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 14px 16px; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .35);
}
/* Capa holográfica que se desliza */
.prize-pack-foil {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 20%, rgba(46,196,186,.6) 35%, rgba(176,110,216,.6) 50%, rgba(245,180,0,.5) 62%, transparent 78%);
  background-size: 300% 300%; animation: packFoil 4s linear infinite;
}
@keyframes packFoil { 0% { background-position: 130% 0; } 100% { background-position: -50% 0; } }
/* Brillo diagonal sutil */
.prize-pack-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.22) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.25) 100%);
}
/* Orbe estilo Poké Ball (genérico, dibujado, NO el logo oficial) */
.prize-pack-orb {
  width: 52px; height: 52px; border-radius: 50%; position: relative; z-index: 2;
  background: linear-gradient(180deg, #f24e54 0 47%, #fff 47% 53%, #f4f4f4 53% 100%);
  border: 3px solid #1a1a1a; box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.prize-pack-orb span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #1a1a1a;
}
.prize-pack-title {
  font-family: var(--game, inherit); font-weight: 800; font-size: 1.15rem; color: #fff;
  letter-spacing: 1px; text-align: center; line-height: 1.05; z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.prize-pack-title b { color: var(--rw-gold); }
.prize-pack-spacer { flex: 1; }
.prize-pack-tag {
  font-family: var(--game, inherit); font-weight: 800; font-size: .82rem; color: var(--rw-gold);
  letter-spacing: 1px; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.prize-pack-count { color: #fff; font-size: .72rem; font-weight: 700; z-index: 2; opacity: .92; }
.prize-pack-hint { color: rgba(255, 255, 255, .85); font-size: .7rem; padding: 4px 10px 0; z-index: 2; text-align: center; animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.prize-pack-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 62px; z-index: 3;
  background: linear-gradient(180deg, #6a35a8, #3a1c6e);
  border-radius: 16px 16px 4px 4px; transform-origin: top center;
  border: 2px solid rgba(255, 255, 255, .35); border-bottom: 2px dashed rgba(255, 255, 255, .5);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .1s linear, opacity .1s linear;
}

/* Cartas reveladas */
.prize-reveal-title { font-family: var(--game, inherit); font-weight: 800; font-size: 1.3rem; color: var(--rw-gold); margin-bottom: 20px; }
.prize-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: flex-start; padding-top: 30px; }
.prize-card-slot {
  width: 130px; opacity: 0; transform: translateY(24px) rotateY(40deg); position: relative;
  transition: opacity .4s, transform .5s cubic-bezier(.2, 1.2, .4, 1);
  overflow: visible; align-self: flex-start;
}
.prize-card-slot.in { opacity: 1; transform: translateY(0) rotateY(0); }
.prize-new {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--good, #27ae60); color: #fff; font-size: .62rem; font-weight: 800;
  padding: 2px 8px; border-radius: 6px; z-index: 3; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.prize-dup {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--rw-gold); color: #2a2000; font-size: .62rem; font-weight: 800;
  padding: 2px 8px; border-radius: 6px; z-index: 3;
}
.prize-continue {
  margin-top: 26px; padding: 13px 40px; border: none; border-radius: 12px;
  background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000;
  font-family: var(--game, inherit); font-weight: 800; font-size: 1rem; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.prize-continue:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* Trofeo en el premio */
.prize-trophy-wrap { margin-top: 24px; opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.prize-trophy-wrap.show { opacity: 1; transform: scale(1); }
.prize-trophy-burst { font-family: var(--game, inherit); font-weight: 900; font-size: 1.4rem; color: var(--rw-gold); text-shadow: 0 0 22px rgba(245, 180, 0, .8); margin-bottom: 10px; }
.prize-trophy-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; }
.prize-trophy-rays {
  position: absolute; inset: -20px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(245, 180, 0, .35), transparent, rgba(245, 180, 0, .35), transparent);
  animation: rayspin 6s linear infinite;
}
@keyframes rayspin { to { transform: rotate(360deg); } }
.prize-trophy-cell img { width: 104px; height: 104px; image-rendering: pixelated; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.prize-trophy-name { color: var(--text); text-transform: capitalize; font-weight: 700; margin-top: 8px; }

/* ── Toast ── */
.rewards-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(14px);
  background: var(--surface); border: 1px solid var(--rw-gold); color: var(--text);
  padding: 10px 16px; border-radius: 10px; font-size: .85rem; z-index: 1600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.rewards-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .rewards-title { font-size: 1.2rem; }
  .prize-burst { font-size: 2.4rem; }
  .prize-card-slot { width: 96px; }

  /* ── Cabecera de la Colección: que los puntos no se solapen con el título ── */
  .rewards-title { font-size: 1.05rem; letter-spacing: 1px; max-width: 40vw; text-align: center; }
  .rewards-points { right: 8px; padding: 3px 9px; font-size: .72rem; }
  .rewards-points span { font-size: .58rem; }
  .rewards-close { left: 8px; width: 30px; height: 30px; font-size: 16px; }

  /* ── Pestañas (Cartas/Metas/Diario/Medallas/Trofeos): son 5 y no caben en el
     ancho del móvil. Scroll horizontal + tamaños compactos, sin cortarse. ── */
  .rewards-tabs { gap: 4px; padding: 10px 8px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; scrollbar-width: none; }
  .rewards-tabs::-webkit-scrollbar { display: none; }
  .rewards-tab { flex: 0 0 auto; padding: 8px 10px; font-size: .7rem; border-radius: 9px 9px 0 0;
    min-width: max-content; white-space: nowrap; }
  .rewards-tab span { font-size: .58rem; margin-left: 3px; }

  /* ── Álbum de cartas compacto en móvil: 3 columnas, todo más fino ── */
  .cards-album,
  .shop-album { grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  .cards-shiny-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  .trophy-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px 6px; padding: 10px; }

  /* Carta: marco y glow reducidos para que no llene/tape la pantalla */
  .poke-card { padding: 2px; border-radius: 9px; box-shadow: 0 3px 8px rgba(0,0,0,.4), 0 0 7px var(--rar-glow); }
  .poke-card-inner { padding: 5px; gap: 3px; border-radius: 7px; }
  .poke-card-art { padding: 3px; border-radius: 6px; }
  /* Sprite de carta agrandado en móvil: se veía diminuto (56px). Lo subimos
     cerca del tamaño de ordenador para que se aprecie bien. Solo móvil. */
  .poke-card-art img { width: 72px !important; height: 72px !important; }
  /* CARTAS TCG: el sprite se agranda directamente en el SVG (foreignObject) en
     móvil, ver db-tcgcard.js. No hace falta scale aquí. */
  .poke-card-name { font-size: .64rem; }
  .poke-card-num { font-size: .54rem; }
  .poke-card-rar { font-size: .5rem; }
  .card-type { font-size: .48rem; padding: 1px 3px; }
  .poke-card-types { gap: 2px; min-height: 12px; }
  .card-dup { font-size: .52rem; padding: 1px 4px; bottom: 3px; right: 3px; }

  /* Barra superior de cartas: que no empuje el contenido */
  .rewards-cards-bar { gap: 6px; margin-bottom: 8px; }
}

/* ── Móvil muy estrecho (≤360px): sprite algo menor pero aún grande ── */
@media (max-width: 360px) {
  .cards-album,
  .shop-album,
  .cards-shiny-grid { gap: 5px !important; }
  .poke-card-art img { width: 62px !important; height: 62px !important; }
  .poke-card-name { font-size: .58rem; }
}

/* ── Barra de guardado (exportar/importar) ── */
.rewards-savebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; margin: 0; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.rewards-save-lbl { color: var(--muted); font-size: .78rem; flex: 1 1 auto; }
.rewards-save-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 12px; font-size: .78rem; cursor: pointer; font-weight: 700;
}
.rewards-save-btn:hover { border-color: var(--rw-gold); color: var(--rw-gold); }

/* ── Carta FOIL destacada en el reveal del sobre ── */
.prize-card-foil { width: 150px; margin: 6px 4px 10px; }
.prize-card-foil .poke-card { transform: scale(1.04); }
.prize-foil-tag {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--rw-gold), #ffe79a, var(--rw-gold));
  background-size: 200% 100%; animation: foilTagShine 2s linear infinite;
  color: #3a2c00; font-family: var(--game, inherit); font-weight: 800; font-size: .66rem;
  letter-spacing: 1px; padding: 3px 12px; border-radius: 8px; z-index: 4; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(245, 180, 0, .5);
}
@keyframes foilTagShine { to { background-position: 200% 0; } }
.prize-card-foil.in { animation: foilPop .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes foilPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1.04); } }

/* ════════════════════════════════════════════
   DETALLE DE CARTA (quemar / intercambiar)
   ════════════════════════════════════════════ */
.rewards-card-modal { position: fixed; inset: 0; z-index: 1400; display: none; align-items: center; justify-content: center; }
.rewards-card-modal.active { display: flex; }
.rcm-backdrop { position: absolute; inset: 0; background: rgba(3,5,12,.8); backdrop-filter: blur(6px); }
.rcm-panel {
  position: relative; z-index: 1; width: 100%; max-width: 360px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--surface), var(--bg)); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; box-sizing: border-box; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.rcm-close {
  position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 15px;
}
.rcm-close:hover { border-color: var(--rw-gold); color: var(--rw-gold); }
.rcm-card { width: 150px; margin: 0 auto 14px; }
.rcm-card .poke-card { cursor: default; }
.rcm-title { font-family: var(--game, inherit); font-weight: 800; font-size: 1.3rem; color: var(--text); text-transform: capitalize; }
.rcm-copies { color: var(--muted); font-size: .9rem; margin: 4px 0 18px; }
.rcm-copies b { color: var(--rw-gold); }
.rcm-action {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.rcm-action-head { font-weight: 700; color: var(--text); margin-bottom: 10px; font-size: .92rem; }
.rcm-action-head span { color: var(--muted); font-weight: 400; font-size: .82rem; }
.rcm-qty { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.rcm-qty button {
  width: 34px; height: 34px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 18px; cursor: pointer; font-weight: 700;
}
.rcm-qty button:hover { border-color: var(--rw-gold); }
.rcm-qty > span { font-size: 1.2rem; font-weight: 800; color: var(--text); min-width: 28px; }
.rcm-qty-max { font-size: .72rem !important; color: var(--muted); font-weight: 400 !important; }
.rcm-do {
  width: 100%; padding: 11px; border: none; border-radius: 10px; font-weight: 800; cursor: pointer; font-size: .9rem;
}
.rcm-burn { background: linear-gradient(160deg, #f5713c, #c9421e); color: #fff; }
.rcm-trade { background: linear-gradient(160deg, #4fa3ff, #2570c9); color: #fff; }
.rcm-do:hover { filter: brightness(1.08); }
.rcm-hint { color: var(--muted); font-size: .82rem; padding: 10px; }
.poke-card-click { cursor: pointer; }

/* ════════════════════════════════════════════
   FULL ART SHINY · GOLDEN PACK · BANNER NUEVO
   ════════════════════════════════════════════ */

/* Carta shiny: glow cian/arcoíris animado y estrella */
.poke-card-shiny { animation: shinyPulse 2.2s ease-in-out infinite; }
.poke-card-shiny .poke-card-inner {
  background:
    linear-gradient(135deg, rgba(63,245,212,.12), rgba(176,110,216,.12), rgba(245,180,0,.12)),
    var(--surface);
  border-color: #3ff5d4;
}
@keyframes shinyPulse {
  0%,100% { box-shadow: 0 0 14px rgba(63,245,212,.5), 0 0 30px rgba(176,110,216,.3); }
  50% { box-shadow: 0 0 22px rgba(63,245,212,.8), 0 0 44px rgba(245,180,0,.4); }
}
.card-shiny-star {
  position: absolute; top: 4px; left: 6px; z-index: 3; color: #3ff5d4;
  font-size: 16px; text-shadow: 0 0 8px rgba(63,245,212,.9); animation: shinyStarSpin 3s linear infinite;
}
@keyframes shinyStarSpin { 0%{transform:rotate(0) scale(1);} 50%{transform:rotate(180deg) scale(1.3);} 100%{transform:rotate(360deg) scale(1);} }

/* Banda y grid de la sección Full Art Shiny */
.cards-shiny-band {
  grid-column: 1 / -1; font-family: var(--game, inherit); font-weight: 800; font-size: .95rem;
  color: #3ff5d4; text-shadow: 0 0 12px rgba(63,245,212,.6); padding: 12px 4px 6px; letter-spacing: .5px;
}
.cards-shiny-grid {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; padding: 4px 4px 14px; border-bottom: 1px dashed rgba(63,245,212,.3); margin-bottom: 10px;
}
.cards-album-sep {
  grid-column: 1 / -1; color: var(--muted); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 4px 2px;
}

/* Golden Pack en la tienda */
.shop-golden {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 4px 0 12px;
  padding: 16px 18px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(120deg, #4a3a10, #7a5e1a 45%, #b8902e);
  border: 1px solid #f5b400;
}
.shop-golden-glow { position: absolute; inset: 0; background: radial-gradient(120% 100% at 0% 0%, rgba(255,215,0,.3), transparent 60%); pointer-events: none; }
.shop-golden-info { flex: 1; z-index: 1; }
.shop-golden-title { font-family: var(--game, inherit); font-weight: 900; color: #ffe08a; font-size: 1.1rem; text-shadow: 0 0 12px rgba(255,200,0,.6); }
.shop-golden-sub { color: #f0e2bf; font-size: .82rem; margin-top: 2px; }
.shop-golden-buy {
  z-index: 1; background: #ffd24a; color: #3a2a00; border: none; border-radius: 10px;
  padding: 12px 18px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 0 16px rgba(245,180,0,.5);
}
.shop-golden-buy:hover { filter: brightness(1.08); }
.shop-golden-buy.disabled { background: #5a5230; color: #97916f; cursor: not-allowed; box-shadow: none; }

/* Sobre dorado (Golden Pack) */
.prize-burst-gold { color: #ffd24a !important; text-shadow: 0 0 30px rgba(255,200,0,.9) !important; }
.prize-pack-golden .prize-pack-body {
  background: linear-gradient(160deg, #6e4e10 0%, #b8902e 35%, #ffd24a 70%, #8a6a1a 100%) !important;
}
.prize-pack-golden .prize-pack-tag { color: #4a3500 !important; }

/* ── Banner de guardado rediseñado ── */
.rewards-savebar2 {
  display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; padding: 14px 16px;
  background: linear-gradient(120deg, var(--surface2), var(--surface)); border: 1px solid var(--border);
  border-radius: 14px;
}
.rsb-icon { font-size: 1.8rem; flex-shrink: 0; }
.rsb-text { flex: 1; min-width: 0; }
.rsb-title { font-weight: 800; color: var(--text); font-size: .98rem; }
.rsb-sub { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.rsb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rsb-btn { border: none; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; font-size: .88rem; transition: filter .15s, transform .12s; }
.rsb-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rsb-export { background: linear-gradient(160deg, #27ae60, #1e8449); color: #fff; }
.rsb-import { background: linear-gradient(160deg, #4fa3ff, #2570c9); color: #fff; }
@media (max-width: 560px) {
  .rewards-savebar2 { flex-wrap: wrap; }
  .rsb-actions { width: 100%; }
  .rsb-btn { flex: 1; }
}

/* Contador de tanda de sobres (Sobre X de Y) */
.prize-seq {
  font-family: var(--game, inherit); font-weight: 800; font-size: .9rem; letter-spacing: .5px;
  color: var(--rw-gold, #f5b400); background: rgba(245,180,0,.12); border: 1px solid rgba(245,180,0,.3);
  border-radius: 999px; padding: 5px 16px; display: inline-block; margin-bottom: 10px;
}

/* Resumen de cartas tras abrir varios sobres */
.rwsum-stage { max-width: 680px; }
.rwsum-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 16px; }
.rwsum-chip {
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c);
  border: 1px solid var(--c); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .82rem;
}
.rwsum-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px;
  max-height: 50vh; overflow-y: auto; padding: 4px; margin-bottom: 18px;
}
.rwsum-card {
  position: relative; aspect-ratio: 3/4; border-radius: 8px; border: 2px solid var(--c);
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 40%, transparent);
}
.rwsum-card img { width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; }
.rwsum-shiny { position: absolute; top: 2px; left: 3px; color: #3ff5d4; font-size: 11px; text-shadow: 0 0 6px rgba(63,245,212,.9); }

/* ════════════════════════════════════════════
   DISQUETE · BOTÓN SHINY · GALERÍA · BIENVENIDA
   ════════════════════════════════════════════ */

/* Cabecera: puntos + icono disquete */
.rewards-head-right { display: flex; align-items: center; gap: 10px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.rewards-save-icon {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; transition: filter .15s, transform .12s;
}
.rewards-save-icon:hover { filter: brightness(1.2); transform: translateY(-1px); }
.rewards-save-menu {
  position: absolute; top: 46px; right: 0; z-index: 50; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); min-width: 160px;
}
.rewards-save-menu button {
  background: var(--surface2); border: none; color: var(--text); border-radius: 8px;
  padding: 10px 12px; text-align: left; cursor: pointer; font-weight: 600; font-size: .88rem;
}
.rewards-save-menu button:hover { background: var(--surface3, #243056); }

/* Botón Shiny (junto a Tienda) */
.rewards-shiny-btn {
  background: linear-gradient(160deg, #2bc4a8, #1a8f7a) !important; color: #fff !important;
  border: 1px solid #3ff5d4 !important; box-shadow: 0 0 10px rgba(63,245,212,.4) !important;
}
.rewards-shiny-btn:hover { filter: brightness(1.1); }

/* Banda de la galería shiny */
.rewards-shiny-band {
  font-family: var(--game, inherit); font-weight: 800; font-size: .95rem; color: #3ff5d4;
  text-shadow: 0 0 12px rgba(63,245,212,.6); padding: 12px 4px 8px; letter-spacing: .5px;
}

/* Banner de bienvenida diario */
.rewards-welcome {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-250%);
  z-index: 9999; transition: transform .5s cubic-bezier(.2,1.2,.3,1); pointer-events: none;
}
.rewards-welcome.active { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.rwwel-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: linear-gradient(120deg, #1e2a52, #2b1e52); border: 1px solid var(--accent);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 92vw;
}
.rwwel-ico { font-size: 1.8rem; }
.rwwel-title { font-weight: 800; color: var(--text); }
.rwwel-sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.rwwel-sub b { color: var(--accent); }
.rwwel-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 4px; }
.rwwel-close:hover { color: var(--text); }

/* ════════════════════════════════════════════
   MEDALLAS · PRESTIGIO · INSIGNIAS · DECK
   ════════════════════════════════════════════ */

.medals-body { padding: 4px; }

/* Tarjeta de prestigio */
.prestige-card {
  background: linear-gradient(135deg, #1a1430, #2a1e52); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.prestige-card.ready { border-color: var(--accent); box-shadow: 0 0 24px rgba(245,166,35,.3); }
.prestige-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.prestige-title { font-family: var(--game, inherit); font-weight: 900; font-size: 1.1rem; color: #d8b4ff; }
.prestige-medals { color: var(--muted); font-size: .9rem; }
.prestige-medals b { color: var(--accent); }
.prestige-medals-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 10px; }
.medal-coin {
  font-size: 1.6rem; filter: drop-shadow(0 0 6px rgba(245,180,0,.5)); animation: medalBob 2.5s ease-in-out infinite;
}
@keyframes medalBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.prestige-desc { color: var(--text); font-size: .88rem; line-height: 1.5; margin-bottom: 8px; }
.prestige-desc b { color: var(--accent); }
.prestige-progress { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.prestige-progress b { color: var(--text); }
.prestige-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px; font-weight: 800; font-size: 1rem; cursor: pointer;
  background: linear-gradient(160deg, #a25cff, #6a2ec9); color: #fff; box-shadow: 0 0 18px rgba(140,80,255,.4);
  transition: filter .15s, transform .12s;
}
.prestige-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.prestige-btn:disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; box-shadow: none; }

/* Insignias de colección */
.badges-wrap { }
.badges-intro { color: var(--muted); font-size: .85rem; margin-bottom: 12px; }
.badge-section-title { font-family: var(--game, inherit); font-weight: 800; color: var(--text); margin: 14px 0 8px; font-size: .95rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-cell {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.badge-cell.done { border-color: var(--good); box-shadow: 0 0 12px rgba(39,174,96,.3); }
.badge-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.badge-ico { font-weight: 800; color: var(--accent); font-size: .9rem; min-width: 20px; }
.badge-type-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.badge-label { font-weight: 700; font-size: .85rem; color: var(--text); flex: 1; }
.badge-check { color: var(--good); font-weight: 900; }
.badge-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.badge-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); border-radius: 999px; transition: width .4s; }
.badge-count { color: var(--muted); font-size: .78rem; text-align: right; }

/* ── DECK BOX de torneo (centro) + cartas entrando al mazo ── */
.prize-stage-deck { position: relative; padding-bottom: 240px; }
.deckbox {
  position: relative; margin: 28px auto 0; width: 150px; height: 120px;
  perspective: 600px;
}
.deckbox-body {
  position: absolute; inset: 24px 0 0 0; border-radius: 10px;
  background: linear-gradient(160deg, #2a3658, #18213a);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.12), inset 0 -10px 22px rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px;
}
.deckbox-slot {
  position: absolute; top: 8px; left: 14px; right: 14px; height: 14px; border-radius: 4px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.7), rgba(0,0,0,.35));
  box-shadow: inset 0 3px 6px rgba(0,0,0,.7);
}
.deckbox-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; letter-spacing: 3px;
  font-size: .72rem; color: var(--rw-gold, #f5b400); opacity: .85;
}
/* Tapa que se abre hacia atrás */
.deckbox-lid {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; transform-origin: top center;
  transform: rotateX(0deg); transition: transform .5s cubic-bezier(.4,1.4,.5,1);
  z-index: 3;
}
.deckbox-lid-front {
  position: absolute; inset: 0; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(160deg, #3a4a72, #25324f);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.4);
}
.deckbox-lid.open { transform: rotateX(-125deg); }
.deckbox-count {
  position: absolute; bottom: -10px; right: -10px; z-index: 4;
  background: linear-gradient(160deg, var(--rw-gold,#f5b400), #c98f00); color: #2a2000;
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1rem;
  min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.deckbox.thunk { animation: deckThunk .26s ease; }
@keyframes deckThunk { 0%{transform:translateY(0)} 35%{transform:translateY(5px) scale(1.04)} 100%{transform:translateY(0)} }
.deckbox.sealed .deckbox-body { box-shadow: inset 0 3px 0 rgba(255,255,255,.12), inset 0 -10px 22px rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.55), 0 0 20px rgba(245,180,0,.3); }

/* Carta volando hacia el mazo: cae, encoge y rota como si se guardara */
.prize-card-slot.flying-deck {
  transform: translate(var(--fly-x,0), var(--fly-y,0)) scale(.12) rotate(-8deg) !important;
  opacity: 0; transition: transform .42s cubic-bezier(.55,0,.85,.3), opacity .42s ease .14s;
  pointer-events: none; z-index: 5;
}

/* ════════════════════════════════════════════
   BOTÓN GUARDADO SVG · PESTAÑAS SVG · CARTA GRANDE · DUPLICADOS
   ════════════════════════════════════════════ */

/* Botón de guardado (disquete SVG con glow) */
.rewards-save-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: #cfe0ff;
  background: linear-gradient(160deg, #1e2a52, #141d3a); border: 1px solid #2d3a6a;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: all .15s;
}
.rewards-save-icon:hover {
  color: #fff; border-color: var(--accent);
  box-shadow: 0 0 16px rgba(245,166,35,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.rewards-save-icon svg { display: block; }

/* Pestañas con icono SVG estilo relieve */
.rewards-tab {
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.rtab-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; color: var(--muted);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 2px rgba(0,0,0,.3);
  transition: color .2s;
}
.rewards-tab.on .rtab-ico { color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 10px rgba(245,166,35,.35); }
.rtab-lbl { font-weight: 700; }
.rtab-cnt { font-size: .78rem; color: var(--muted); font-weight: 600; }
.rewards-tab.on .rtab-cnt { color: var(--accent); }

/* Botón Duplicados */
.rewards-dup-btn {
  background: linear-gradient(160deg, #8a6acb, #5a3ea0) !important; color: #fff !important;
  border: 1px solid #b18cff !important; box-shadow: 0 0 10px rgba(150,110,255,.4) !important;
}
.rewards-dup-btn:hover { filter: brightness(1.1); }
.rewards-import-btn {
  background: linear-gradient(160deg, #2f8f7a, #1e6354) !important; color: #fff !important;
  border: 1px solid #54d8bd !important; box-shadow: 0 0 10px rgba(63,245,212,.35) !important;
}
.rewards-import-btn:hover { filter: brightness(1.12); }

/* Carta grande (vista solo visual con stats) */
.rcm-panel-big { max-width: 420px; }
.rcm-big-card { transform: scale(1.5); transform-origin: top center; margin: 30px auto 60px; width: 130px; }
/* Las cartas TCG (SVG) NO usan el scale del sprite clásico: se muestran a tamaño
   grande real para poder leer ataques y habilidades sin esfuerzo. */
.rcm-big-card:has(.poke-card-tcg) { transform: none; width: min(86vw, 360px); margin: 16px auto 28px; }
.rcm-big-card .poke-card-tcg { max-width: 360px; }
.rcm-big-card .poke-card-tcg .tcg-card { width: 100% !important; }
.rcm-big-shiny { filter: drop-shadow(0 0 16px rgba(63,245,212,.6)); }
.rcm-rar-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem;
  color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid var(--c);
}
.rcm-stats { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.rcm-stat { display: grid; grid-template-columns: 70px 36px 1fr; align-items: center; gap: 8px; }
.rcm-stat-lbl { color: var(--muted); font-size: .82rem; font-weight: 600; }
.rcm-stat-val { color: var(--text); font-weight: 800; text-align: right; font-size: .9rem; }
.rcm-stat-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.rcm-stat-bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.rcm-bst { margin-top: 8px; text-align: right; color: var(--muted); font-size: .85rem; }
.rcm-bst b { color: var(--accent); font-size: 1rem; }
.rcm-nostats { color: var(--muted); text-align: center; margin-top: 16px; font-size: .85rem; }

/* Sección Duplicados */
.dup-bar-title { font-weight: 800; color: var(--text); flex: 1; }
.dup-bar-title span { color: var(--muted); font-weight: 600; font-size: .85rem; }
.rewards-dup-save { background: linear-gradient(160deg,#1e2a52,#141d3a) !important; border:1px solid #2d3a6a !important; color:#cfe0ff !important; }
.rewards-dup-save:hover { border-color: var(--accent) !important; color:#fff !important; }
.rdup-menu-note { color: var(--muted); font-size: .72rem; padding: 4px 8px; max-width: 180px; }
.dup-hint { color: var(--muted); font-size: .82rem; padding: 6px 4px 12px; }
.dup-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dup-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dup-info { font-size: .8rem; color: var(--muted); }
.dup-info b { color: var(--accent); }
.dup-actions { display: flex; gap: 6px; width: 100%; }
.dup-actions button {
  flex: 1; border: none; border-radius: 8px; padding: 8px 4px; font-weight: 700; font-size: .78rem; cursor: pointer;
  transition: filter .15s;
}
.dup-actions button:hover { filter: brightness(1.15); }
.dup-burn { background: linear-gradient(160deg,#e07a3c,#c0531a); color: #fff; }
.dup-trade { background: linear-gradient(160deg,#4fa3ff,#2570c9); color: #fff; }

/* ════════════════════════════════════════════
   ESTUCHE DE MEDALLAS · ANIMACIÓN DE TROFEO
   ════════════════════════════════════════════ */

/* Estuche de medallas (SVG) */
.medal-case-card {
  background: linear-gradient(135deg, #1a1430, #2a1e52); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 20px; text-align: center;
}
.medal-case-card.ready { border-color: var(--accent); box-shadow: 0 0 24px rgba(245,166,35,.3); }
.medal-case-title { font-family: var(--game, inherit); font-weight: 900; font-size: 1.05rem; color: #d8b4ff; margin-bottom: 12px; }
.medal-case-wrap { max-width: 520px; margin: 0 auto; }
.medal-chest { position: relative; width: 100%; line-height: 0; }
.medal-chest-img { width: 100%; height: auto; display: block; }
.medal-piece {
  position: absolute; width: 8.5%; height: auto;
  transform: translate(-50%, -50%);
  transition: filter .3s, opacity .3s, transform .2s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.medal-piece.empty {
  /* Hueco no logrado: silueta apagada y oscura. */
  filter: grayscale(1) brightness(.28) drop-shadow(0 2px 4px rgba(0,0,0,.5));
  opacity: .55;
}
.medal-piece.lit {
  /* Medalla conseguida: a todo color con brillo. */
  filter: drop-shadow(0 0 8px rgba(255,220,120,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.55));
  animation: medalLitPop .5s cubic-bezier(.2,1.5,.4,1) both;
}
.medal-piece.lit:hover { transform: translate(-50%, -50%) scale(1.12); }
@keyframes medalLitPop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.medal-case-svg { width: 100%; height: auto; display: block; }
.badge-slot.lit { animation: medalPop .5s ease backwards; }
@keyframes medalPop { 0%{transform:scale(0) rotate(-30deg)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.medal-case-count { color: var(--accent); font-weight: 800; margin: 10px 0 6px; }

/* Animación del trofeo (pantalla aparte) */
.trophy-stage { text-align: center; }
.trophy-alert {
  font-family: var(--game, inherit); font-weight: 900; font-size: 1.2rem; color: var(--accent);
  text-shadow: 0 0 18px rgba(245,166,35,.6); margin-bottom: 18px; animation: trophyAlertIn .5s ease;
}
@keyframes trophyAlertIn { from{opacity:0;transform:translateY(-10px) scale(.9)} to{opacity:1;transform:none} }
.trophy-reveal { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 20px 40px; }
.trophy-reveal-rays {
  position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0 18deg, rgba(245,180,0,.18) 18deg 36deg);
  border-radius: 50%; opacity: 0; transition: opacity .8s; animation: trophyRaysSpin 8s linear infinite;
}
.trophy-reveal.lit .trophy-reveal-rays { opacity: 1; }
.trophy-reveal-shiny.lit .trophy-reveal-rays { background: conic-gradient(from 0deg, transparent 0 18deg, rgba(63,245,212,.22) 18deg 36deg); }
@keyframes trophyRaysSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.trophy-reveal-cell {
  position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); border-radius: 16px;
}
.trophy-reveal-cell img {
  width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated;
  /* Silueta oscura al inicio; se revela poco a poco. */
  filter: brightness(0) drop-shadow(0 0 0 transparent);
  transform: scale(.8); opacity: .85;
  transition: filter 1.6s ease, transform 1.6s ease, opacity 1.6s ease;
}
.trophy-reveal.lit .trophy-reveal-cell img {
  filter: brightness(1) drop-shadow(0 0 14px rgba(245,180,0,.5));
  transform: scale(1); opacity: 1;
}
.trophy-reveal-shiny.lit .trophy-reveal-cell img { filter: brightness(1) drop-shadow(0 0 16px rgba(63,245,212,.7)); }
.trophy-reveal-name {
  margin-top: 14px; font-weight: 800; font-size: 1.1rem; color: var(--text); text-transform: capitalize;
  min-height: 1.4em;
}
.trophy-reveal-shinytag { margin-top: 6px; color: #3ff5d4; font-weight: 800; text-shadow: 0 0 10px rgba(63,245,212,.8); animation: medalBob 1.6s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════
   MEJORAS UI · banner, modal centrado, duplicados, sobres, tienda, shiny
   (añadido en la tanda de mejoras de Colección)
   ════════════════════════════════════════════════════════════════════ */

/* ── Banner: puntos dentro del head-right (corrige solapamiento) ── */
.rewards-head-right .rewards-points {
  position: static; transform: none; right: auto; top: auto;
  display: inline-flex; align-items: baseline; gap: 3px;
  box-shadow: 0 2px 8px rgba(245,180,0,.3);
}
.rewards-head { padding: 14px 18px; }
.rewards-title {
  background: linear-gradient(180deg, #ffe9a8, var(--rw-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

/* ── Modal centrado genérico (intercambio / copia de seguridad) ── */
.rewards-modal-overlay {
  position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,16,.6); backdrop-filter: blur(4px); padding: 20px; box-sizing: border-box;
  animation: rwModalIn .14s ease;
}
@keyframes rwModalIn { from { opacity: 0; } to { opacity: 1; } }
.rewards-modal {
  position: relative; width: 100%; max-width: 340px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--rw-gold); border-radius: 16px; padding: 22px 18px 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6); text-align: center;
}
.rewards-modal-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 14px;
}
.rewards-modal-x:hover { color: var(--text); border-color: var(--rw-gold); }
.rewards-modal-title { font-family: var(--game, inherit); font-weight: 800; font-size: 1.05rem; color: var(--text); margin-bottom: 8px; }
.rewards-modal-note { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-bottom: 16px; }
.rewards-modal-btn {
  display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, #2f7be0, #1d5bb8); color: #fff; border: none; font-weight: 700; font-size: .9rem;
}
.rewards-modal-btn:hover { filter: brightness(1.1); }

/* ── Duplicados: botones con icono SVG ── */
.dup-actions { display: flex; gap: 6px; width: 100%; }
.dup-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border: none; border-radius: 9px; cursor: pointer; color: #fff;
  font-weight: 700; font-size: .82rem; transition: filter .15s, transform .1s;
}
.dup-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.dup-btn.dup-burn  { background: linear-gradient(160deg, #ef8a4c, #c0531a); box-shadow: 0 2px 10px rgba(224,122,60,.3); }
.dup-btn.dup-trade { background: linear-gradient(160deg, #4fa3ff, #2570c9); box-shadow: 0 2px 10px rgba(79,163,255,.3); }
.dup-btn svg { flex-shrink: 0; }

/* Barra superior de duplicados */
.dup-bar { align-items: center; }
.dup-bar-title { flex: 1; text-align: center; font-family: var(--game, inherit); font-weight: 800; color: var(--text); }
.dup-bar-title span { color: var(--muted); font-weight: 600; font-size: .82rem; }

/* Acciones masivas: Quemar todo / Sacar todo */
.dup-bulk-bar { display: flex; gap: 10px; margin-bottom: 12px; }
.dup-bulk {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border: none; border-radius: 11px; cursor: pointer; color: #fff;
  font-weight: 800; font-size: .9rem; transition: filter .15s, transform .1s;
}
.dup-bulk:hover { filter: brightness(1.1); transform: translateY(-1px); }
.dup-bulk b { font-weight: 900; }
.dup-bulk-burn  { background: linear-gradient(160deg, #f0934f, #b8480f); box-shadow: 0 4px 14px rgba(224,122,60,.35); }
.dup-bulk-trade { background: linear-gradient(160deg, #58a8ff, #2160bd); box-shadow: 0 4px 14px rgba(79,163,255,.35); }

/* ── Tienda: pestañas Pokémon / Sobres ── */
.shop-bar { align-items: center; }
.shop-points {
  margin-left: auto; background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000;
  font-weight: 800; padding: 5px 13px; border-radius: 999px; font-size: .92rem;
}
.shop-points span { font-size: .7rem; opacity: .8; }
.shop-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.shop-tab {
  flex: 1; padding: 11px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface2); color: var(--muted); font-family: var(--game, inherit);
  font-weight: 800; font-size: .92rem; cursor: pointer; transition: all .15s;
}
.shop-tab.on { background: var(--surface); color: var(--text); border-color: var(--rw-gold); box-shadow: 0 0 12px rgba(245,180,0,.25); }
.shop-subbar { margin-bottom: 12px; }

/* ── Packs de sobres ── */
.sobre-band {
  text-align: center; color: var(--muted); font-size: .86rem; margin-bottom: 16px;
  padding: 8px; background: var(--surface2); border-radius: 10px;
}
.sobre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sobre-pack {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border: 1px solid var(--border); border-radius: 16px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sobre-pack:hover { transform: translateY(-3px); border-color: var(--rw-gold); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.sobre-pack.locked { opacity: .55; }
.sobre-art { position: relative; }
.sobre-shape {
  position: relative; width: 92px; height: 70px; border-radius: 8px;
  background: linear-gradient(160deg, #3a63c8, #27408a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 8px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.sobre-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 34px;
  background: linear-gradient(160deg, #4b78e0, #3056a8);
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 8px 8px 0 0;
}
.sobre-count { position: relative; z-index: 1; font-family: var(--game, inherit); font-weight: 900; color: #fff; font-size: 1.4rem; text-shadow: 0 2px 4px rgba(0,0,0,.5); margin-top: 18px; }
.sobre-save {
  position: absolute; top: -8px; right: -10px; background: linear-gradient(160deg, #ff5470, #d62f4d); color: #fff;
  font-weight: 800; font-size: .72rem; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(214,47,77,.4);
}
.sobre-info { text-align: center; }
.sobre-title { font-family: var(--game, inherit); font-weight: 800; color: var(--text); font-size: 1rem; }
.sobre-unit { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.sobre-buy {
  width: 100%; padding: 10px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, var(--rw-gold), #c98f00); color: #2a2000; font-weight: 800; font-size: .9rem;
}
.sobre-buy:hover:not(.disabled) { filter: brightness(1.08); }
.sobre-buy.disabled { background: var(--surface3, #243056); color: var(--muted); cursor: not-allowed; }
/* s434: tarjetas de canje puntos→PA de aventura */
.shop-pa-balance { text-align: center; font-family: 'Rajdhani', sans-serif; font-size: .95rem; color: #cdd6e6; margin: 4px 0 14px; }
.shop-pa-balance b { color: #ffd76a; }
.shop-pa-album { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.shop-pa-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; }
.shop-pa-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(255,215,106,.5)); }
.shop-pa-amount { font-family: var(--game, 'Rajdhani'), sans-serif; font-weight: 800; font-size: 1.35rem; color: #ffd76a; text-shadow: 0 0 12px rgba(255,215,106,.4); }
.shop-pa-cost { font-family: 'Rajdhani', sans-serif; font-size: .9rem; color: #cdd6e6; font-weight: 600; }

/* ── Trofeos: toggle shiny activo + variante shiny ── */
.rewards-shiny-btn.on { box-shadow: 0 0 16px rgba(63,245,212,.7) !important; filter: brightness(1.15); }
/* El glow shiny SOLO en trofeos conseguidos. Los no conseguidos deben quedar en
   silueta negra (regla .locked .trophy-spr), así que NO se les aplica brillo. */
.trophy-cell.trophy-shiny.got .trophy-spr { filter: drop-shadow(0 0 8px rgba(63,245,212,.7)); }
.trophy-cell.trophy-shiny.got .trophy-name { color: #3ff5d4; text-shadow: 0 0 8px rgba(63,245,212,.5); }
/* Silueta negra también para los shiny no conseguidos (refuerza, por si alguna
   regla de tema intenta colorearlos). */
.trophy-cell.trophy-shiny.locked .trophy-spr { filter: brightness(0); opacity: 1; }

/* ── Trofeos: pestañas de variante Comunes / Shiny ── */
.trophy-variant-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tvar-tab {
  flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface2); color: var(--muted); font-family: var(--game, inherit);
  font-weight: 800; font-size: .9rem; cursor: pointer; transition: all .15s;
}
.tvar-tab span {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.1); font-size: .76rem; font-weight: 700;
}
.tvar-tab.on { background: var(--surface); color: var(--text); border-color: var(--rw-gold); box-shadow: 0 0 12px rgba(245,180,0,.25); }
.tvar-tab.tvar-shiny.on { border-color: #3ff5d4; box-shadow: 0 0 14px rgba(63,245,212,.45); color: #3ff5d4; }
.tvar-tab.tvar-shiny.on span { background: rgba(63,245,212,.22); }

/* ════════════════════════════════════════════════════════════════════
   FASE B · Banner de sobres ganados + Trofeo en grande
   ════════════════════════════════════════════════════════════════════ */

/* ── Banner "¡Has ganado X sobres!" ── */
.packs-banner-stage { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.packs-banner {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:36px 40px; border-radius:22px;
  background:linear-gradient(180deg, var(--surface,#141c30), var(--bg,#0b1020));
  border:1px solid var(--rw-gold,#f5b400);
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(245,180,0,.15);
  animation:packsBannerIn .4s cubic-bezier(.2,1.2,.3,1);
}
@keyframes packsBannerIn { from{opacity:0; transform:scale(.85) translateY(20px);} to{opacity:1; transform:none;} }
.packs-banner-glow {
  position:absolute; inset:-40%; border-radius:50%;
  background:radial-gradient(circle, rgba(245,180,0,.18), transparent 60%);
  animation:packsGlowPulse 3s ease-in-out infinite; pointer-events:none;
}
@keyframes packsGlowPulse { 0%,100%{opacity:.5;} 50%{opacity:1;} }
.packs-banner-icon { position:relative; margin-bottom:8px; }
.packs-banner-pack {
  width:96px; height:124px; border-radius:10px;
  background:linear-gradient(160deg, #3a63c8, #233a82);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.5);
  position:relative; animation:packBob 2.4s ease-in-out infinite;
}
.packs-banner-pack span {
  position:absolute; top:0; left:0; right:0; height:54px;
  background:linear-gradient(160deg, #4b78e0, #2f56ad);
  clip-path:polygon(0 0,100% 0,50% 100%); border-radius:10px 10px 0 0;
}
@keyframes packBob { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-10px) rotate(3deg);} }
.packs-banner-count {
  position:absolute; bottom:-6px; right:-12px;
  background:linear-gradient(160deg, var(--rw-gold,#f5b400), #c98f00); color:#2a2000;
  font-family:'Rajdhani',sans-serif; font-weight:900; font-size:1.2rem;
  padding:3px 12px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.packs-banner-title { font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:3px; color:var(--muted,#8a96ad); font-size:1rem; }
.packs-banner-big {
  font-family:'Rajdhani',sans-serif; font-weight:900; font-size:2.6rem; line-height:1;
  background:linear-gradient(180deg, #ffe9a8, var(--rw-gold,#f5b400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.4)); margin-bottom:6px;
}
.packs-banner-trophy {
  margin-top:4px; color:#3ff5d4; font-weight:800; font-size:.95rem;
  text-shadow:0 0 12px rgba(63,245,212,.6); animation:medalBob 1.6s ease-in-out infinite;
}
.packs-banner-btn { margin-top:18px; }

/* ── Trofeo en GRANDE (pantalla propia, centrado) ── */
.trophy-stage-big {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:72vh; position:relative;
}
.trophy-big-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(245,180,0,.22), transparent 55%);
  animation:packsGlowPulse 3s ease-in-out infinite;
}
.trophy-big-glow-shiny { background:radial-gradient(circle at 50% 42%, rgba(63,245,212,.25), transparent 55%); }
.trophy-alert {
  font-family:'Rajdhani',sans-serif; font-weight:900; letter-spacing:2px;
  font-size:1.5rem; color:var(--rw-gold,#f5b400); margin-bottom:18px;
  text-shadow:0 0 18px rgba(245,180,0,.5); animation:medalBob 1.8s ease-in-out infinite; z-index:1;
}
.trophy-alert-shiny { color:#3ff5d4; text-shadow:0 0 18px rgba(63,245,212,.6); }
.trophy-reveal-big { padding:10px 40px; z-index:1; }
.trophy-reveal-cell-big {
  width:230px; height:230px; display:flex; align-items:center; justify-content:center;
}
.trophy-reveal-cell-big img {
  width:200px; height:200px; image-rendering:pixelated;
  filter:brightness(0); opacity:.85; transition:filter 1.1s ease, transform 1.1s ease, opacity 1.1s ease;
  transform:scale(.92);
}
.trophy-reveal-big.lit .trophy-reveal-cell-big img {
  filter:brightness(1) drop-shadow(0 8px 16px rgba(0,0,0,.5));
  opacity:1; transform:scale(1);
}
.trophy-reveal-big.trophy-reveal-shiny.lit .trophy-reveal-cell-big img {
  filter:brightness(1) drop-shadow(0 0 22px rgba(63,245,212,.8));
}
.trophy-reveal-name-big {
  font-family:'Rajdhani',sans-serif; font-weight:800; font-size:1.7rem;
  color:var(--text,#e8eef7); text-transform:capitalize; margin-top:14px; min-height:1.4em; z-index:1;
}
.trophy-reveal-shinytag-big { font-size:1.1rem; margin-top:8px; z-index:1; }
.trophy-continue-big { margin-top:26px; z-index:1; }

/* ════════════════════════════════════════════════════════════════════
   FASE C · Vista "Apertura de cartas" (inventario de sobres por tipo)
   ════════════════════════════════════════════════════════════════════ */
.rewards-open-btn { border-color:rgba(63,245,212,.4) !important; }
.pkopen-bar-title { flex:1; text-align:center; font-family:var(--game,inherit); font-weight:800; color:var(--text); }
.pkopen-bar-title span { color:var(--muted); font-weight:600; font-size:.82rem; margin-left:6px; }
.pkopen-hint { text-align:center; color:var(--muted); font-size:.86rem; margin:10px 0 16px; }
.pkopen-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:16px; padding-bottom:20px; }
.pkopen-card {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 14px;
  background:linear-gradient(180deg, var(--surface,#141c30), var(--surface2,#1a2238));
  border:1px solid var(--pc,#5b8def); border-radius:16px;
  box-shadow:0 0 18px -6px var(--pglow, rgba(91,141,239,.5));
  transition:transform .15s, box-shadow .15s;
}
.pkopen-card:hover:not(.pkopen-empty) { transform:translateY(-3px); box-shadow:0 10px 28px -6px var(--pglow); }
.pkopen-empty { opacity:.45; filter:grayscale(.6); }
.pkopen-art { position:relative; }
.pkopen-pack {
  width:84px; height:108px; border-radius:9px; position:relative;
  background:linear-gradient(160deg, var(--pc), var(--pc2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.45);
  overflow:hidden;
}
.pkopen-flap {
  position:absolute; top:0; left:0; right:0; height:46px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--pc) 80%, white 20%), var(--pc));
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.pkopen-shine {
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:pkShine 2.6s ease-in-out infinite;
}
@keyframes pkShine { 0%{left:-60%;} 60%,100%{left:140%;} }
/* El legendario tiene un brillo prismático más intenso */
.pkopen-legendary .pkopen-pack { animation:pkLegend 3s linear infinite; }
@keyframes pkLegend { 0%{filter:hue-rotate(0deg) saturate(1.2);} 100%{filter:hue-rotate(360deg) saturate(1.2);} }
.pkopen-count {
  position:absolute; bottom:-6px; right:-10px;
  background:var(--pc); color:#0b1020; font-family:'Rajdhani',sans-serif; font-weight:900;
  font-size:1rem; padding:2px 10px; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.pkopen-name { font-family:var(--game,inherit); font-weight:800; color:var(--text); font-size:1rem; }
.pkopen-btn {
  width:100%; padding:10px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(160deg, var(--pc), var(--pc2)); color:#0b1020;
  font-weight:800; font-size:.92rem;
}
.pkopen-btn:hover:not(.disabled) { filter:brightness(1.1); }
.pkopen-btn.disabled { background:var(--surface3,#243056); color:var(--muted); cursor:not-allowed; }

/* Desglose de tipos en el banner de sobres ganados */
.pgain-list { display:flex; flex-direction:column; gap:8px; margin:14px 0 6px; }
.pgain-row { display:flex; align-items:center; gap:10px; justify-content:center; }
.pgain-pack-wrap { width:34px; height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pgain-pack-img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.pgain-pack {
  width:26px; height:34px; border-radius:5px; position:relative;
  background:linear-gradient(160deg, var(--pc), var(--pc2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.4);
}
.pgain-pack span {
  position:absolute; top:0; left:0; right:0; height:15px;
  background:color-mix(in srgb, var(--pc) 75%, white 25%);
  clip-path:polygon(0 0,100% 0,50% 100%); border-radius:5px 5px 0 0;
}
.pgain-row-txt { color:var(--text); font-size:.95rem; }
.pgain-hint { color:var(--muted); font-size:.8rem; margin-top:10px; max-width:300px; }

/* ════════════════════════════════════════════════════════════════════
   SOBRES con IMAGEN PNG · vista de apertura + animación de rasgado
   ════════════════════════════════════════════════════════════════════ */
/* Imagen del sobre en la rejilla de "Apertura de cartas" */
.pkopen-img {
  width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
  transition: transform .15s;
}
.pkopen-card:hover:not(.pkopen-empty) .pkopen-img { transform: translateY(-4px) scale(1.03); }
.pkopen-card { background: linear-gradient(180deg, var(--surface,#141c30), var(--surface2,#1a2238)); }

/* ── Sobre grande con rasgado (pantalla de apertura) ── */
.prize-stage-tear { text-align: center; padding: 20px; }
.tearpack {
  position: relative; display: inline-block; margin: 10px auto 0; cursor: pointer;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
  animation: tearBob 2.6s ease-in-out infinite;
}
.tearpack:hover { filter: drop-shadow(0 0 26px var(--pglow)) drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
@keyframes tearBob { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-8px) rotate(1deg);} }
.tearpack-img {
  display: block; width: auto; height: 60vh; max-height: 460px; max-width: 86vw;
  border-radius: 10px; user-select: none; -webkit-user-drag: none;
}
.tearpack-glow {
  position: absolute; inset: -10% -10% 40% -10%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--pglow), transparent 65%);
  opacity: .6; animation: packsGlowPulse 3s ease-in-out infinite;
}
/* La "tira" superior que se rasga: una banda en lo alto del sobre que, al abrir,
   se recorta de izquierda a derecha y se va volando. */
.tearpack-rip {
  position: absolute; top: 0; left: 0; right: 0; height: 13%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  border-bottom: 2px dashed rgba(255,255,255,.35);
  pointer-events: none; opacity: 0;
  /* zig-zag de rasgado en el borde inferior */
  clip-path: polygon(0 0, 100% 0, 100% 60%, 96% 100%, 92% 60%, 88% 100%, 84% 60%, 80% 100%, 76% 60%, 72% 100%, 68% 60%, 64% 100%, 60% 60%, 56% 100%, 52% 60%, 48% 100%, 44% 60%, 40% 100%, 36% 60%, 32% 100%, 28% 60%, 24% 100%, 20% 60%, 16% 100%, 12% 60%, 8% 100%, 4% 60%, 0 100%);
}
.tearpack.tearing .tearpack-rip {
  opacity: 1;
  animation: ripTear .85s ease-in forwards;
}
@keyframes ripTear {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; clip-path: inset(0 100% 0 0); }
  15%  { opacity: 1; clip-path: inset(0 0 0 0); }       /* aparece toda la tira */
  100% { transform: translateY(-60px) rotate(-8deg); opacity: 0; clip-path: inset(0 0 0 0); }
}
/* El cuerpo del sobre revela el "interior" recortando la parte de arriba de
   izquierda a derecha mientras se rasga. */
.tearpack.tearing .tearpack-img {
  animation: packReveal .85s ease-in forwards;
}
@keyframes packReveal {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(11% 0 0 0); }  /* recorta la franja superior abierta */
}
/* Fallback si la imagen no carga: caja de color */
.tearpack-noimg {
  width: 230px; height: 320px; border-radius: 12px;
  background: linear-gradient(160deg, var(--pc,#3a63c8), var(--pc2,#233a82));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.45);
}

/* Fallback de sobre (rejilla) cuando la imagen PNG no carga */
.pkopen-fallback {
  width: 100%; max-width: 130px; aspect-ratio: 0.62; margin: 0 auto;
  border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(160deg, var(--pc,#3a63c8), var(--pc2,#233a82));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.45);
}
.pkopen-fb-orb { width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--pc,#3a63c8) 70%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.4); }
.pkopen-fb-name { font-family:'Rajdhani',sans-serif; font-weight:900; font-size:.85rem;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); letter-spacing:.5px; }

/* Fallback de sobre (animación) cuando la imagen no carga */
.tearpack-fbname {
  position: absolute; left: 0; right: 0; bottom: 12%; text-align: center;
  font-family:'Rajdhani',sans-serif; font-weight:900; font-size:1.2rem; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.7); letter-spacing:1px; display: none;
}
.tearpack-noimg .tearpack-fbname { display: block; }

/* Fila de botones al abrir sobre (Guardar + Siguiente) */
.prize-btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 4px 0; transition: opacity .3s; }
.prize-next-btn {
  background: linear-gradient(160deg, #3ff5d4, #1f9d88) !important; color: #06231f !important;
}
.prize-next-btn:hover { filter: brightness(1.08); }

/* Descripción Pokédex en la carta ampliada */
.rcm-dex {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface2, #1a2238); border: 1px solid var(--border, #2a3550);
  text-align: left;
}
.rcm-dex-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: 1.5px;
  color: var(--rw-gold, #f5b400); text-transform: uppercase; margin-bottom: 5px;
}
.rcm-dex p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text, #e8eef7); }

/* Tienda de sobres con imágenes (6 tipos) */
.sobre-grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.sobre-pack-img {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px;
  background: linear-gradient(180deg, var(--surface, #141c30), var(--surface2, #1a2238));
  border: 1px solid var(--border, #2a3550); border-radius: 14px;
  box-shadow: 0 0 16px -8px var(--pglow, rgba(91,141,239,.5));
}
.sobre-pack-img.locked { opacity: .55; filter: grayscale(.4); }
.sobre-img { width: 100%; max-width: 110px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.sobre-pack-img .sobre-info { text-align: center; }
.sobre-pack-img .sobre-title { font-family: var(--game, inherit); font-weight: 800; color: var(--text); font-size: .95rem; }
.sobre-pack-img .sobre-unit { color: var(--muted); font-size: .76rem; }
.sobre-pack-img .sobre-buy {
  width: 100%; padding: 9px; border: none; border-radius: 9px; cursor: pointer; font-weight: 800;
  background: linear-gradient(160deg, var(--rw-gold, #f5b400), #c98f00); color: #2a2000;
}
.sobre-pack-img .sobre-buy.disabled { background: var(--surface3, #243056); color: var(--muted); cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════
   APERTURA ÉPICA carta a carta
   ════════════════════════════════════════════════════════════════════ */
.rwreveal-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; min-height: 100%; justify-content: center; }
.rwreveal-title { font-family: var(--game, sans-serif); font-weight: 900; font-size: 1.3rem; color: var(--rw-gold, #f5b400); text-align: center; }
.rwreveal-title span { display: block; font-size: .8rem; color: var(--muted, #8a96ad); font-weight: 600; margin-top: 2px; }

/* Pila de cartas: solo asoma el borde superior de cada una */
.rwreveal-pile { position: relative; width: 230px; height: 210px; cursor: pointer; margin: 0 auto; }
.rwreveal-peek {
  position: absolute; left: 50%;
  /* La pila se ancla ABAJO. La pos 0 (delante) no se desplaza; las siguientes
     suben por detrás asomando solo su borde superior, con menor z-index. */
  bottom: calc(var(--pos) * 22px);
  transform: translateX(-50%);
  width: 200px; height: 130px; z-index: var(--z, 1);
  background: linear-gradient(180deg, var(--rc, #888) 0%, var(--rc, #888) 22px, rgba(20,28,48,.92) 22px);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 12px; box-shadow: 0 -3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .4s ease, opacity .4s ease;
}
/* La carta de delante (la que toca revelar) resaltada con un brillo sutil. */
.rwreveal-peek[style*="--pos:0"] { box-shadow: 0 -3px 14px rgba(0,0,0,.5), 0 0 16px -4px rgba(255,255,255,.3); }
.rwreveal-peek.taken { transform: translateX(-50%) translateY(-130%) rotate(-8deg); opacity: 0; }
.rwreveal-hint { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: .82rem; color: var(--muted); animation: rwHintPulse 1.6s ease-in-out infinite; }
@keyframes rwHintPulse { 0%,100%{opacity:.5; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }

/* Carta en grande (tamaño carta) con stats + Pokédex */
.rwreveal-big { width: 100%; max-width: 340px; margin: 0 auto; }
.rwreveal-big.show .rwreveal-card-wrap { animation: rwCardPop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes rwCardPop { 0%{transform:scale(.5) translateY(40px); opacity:0} 100%{transform:scale(1) translateY(0); opacity:1} }
.rwreveal-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.rwreveal-card-face { width: 290px; max-width: 80vw; }
.rwreveal-card-wrap.foil .rwreveal-card-face { filter: drop-shadow(0 0 14px rgba(245,180,0,.5)); }
.rwreveal-card-wrap.shiny .rwreveal-card-face { filter: drop-shadow(0 0 16px rgba(63,245,212,.6)); }
.rwreveal-meta { width: 100%; background: var(--surface2, #1a2238); border: 1px solid var(--border, #2a3550); border-radius: 12px; padding: 12px 14px; }
.rwreveal-rar { text-align: center; font-weight: 800; color: var(--c, #fff); margin-bottom: 8px; font-size: .9rem; }
.rwreveal-rar b { color: var(--rw-gold, #f5b400); }
.rwreveal-stats { display: flex; flex-direction: column; gap: 4px; }
.rwreveal-stat { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.rwreveal-stat span { width: 52px; color: var(--muted); flex-shrink: 0; }
.rwreveal-stat i { width: 30px; text-align: right; font-style: normal; font-weight: 700; color: var(--text); flex-shrink: 0; }
.rwreveal-stat b { flex: 1; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.rwreveal-stat u { display: block; height: 100%; border-radius: 4px; }
.rwreveal-bst { text-align: right; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.rwreveal-bst b { color: var(--text); }
.rwreveal-dex { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .84rem; line-height: 1.45; color: var(--text); }
.rwreveal-tap { text-align: center; font-size: .85rem; color: var(--rw-gold, #f5b400); font-weight: 700; animation: rwHintPulse 1.6s ease-in-out infinite; }
.rwreveal-progress { text-align: center; font-weight: 800; color: var(--muted); font-size: .9rem; letter-spacing: 1px; }

/* Deck box con imágenes PNG (mazo cerrado/abierto) */
.deckbox-img { position: relative; width: 150px; height: auto; margin: 6px auto 0; }
.deckbox-png { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.deckbox-png-open { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.deckbox-img.open .deckbox-png-closed { opacity: 0; }
.deckbox-img.open .deckbox-png-open { opacity: 1; }
.deckbox-img.thunk { animation: deckThunk .22s ease; }
@keyframes deckThunk { 0%,100%{transform:translateY(0)} 40%{transform:translateY(3px) scale(1.02)} }
.deckbox-img .deckbox-count {
  position: absolute; right: -6px; top: -6px; min-width: 26px; height: 26px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: var(--rw-gold, #f5b400); color: #2a2000; font-weight: 900; font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 3;
}
/* Glow del mazo */
.deckbox-img::after { content: ''; position: absolute; inset: -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--dglow, rgba(245,180,0,.4)), transparent 65%); opacity: .55; }
/* Fallback si la imagen del mazo no carga: caja simple */
.deckbox-noimg { width: 120px; height: 150px; border-radius: 10px;
  background: linear-gradient(160deg, #3a63c8, #233a82);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -8px 16px rgba(0,0,0,.4); }

/* Tienda de MAZOS */
.mazo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.mazo-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px;
  background: linear-gradient(180deg, var(--surface, #141c30), var(--surface2, #1a2238));
  border: 1px solid var(--border, #2a3550); border-radius: 14px;
  box-shadow: 0 0 16px -8px var(--mglow, rgba(245,180,0,.4));
}
.mazo-card.on { border-color: var(--rw-gold, #f5b400); box-shadow: 0 0 18px -4px var(--mglow); }
.mazo-art { width: 100%; display: flex; justify-content: center; }
.mazo-art img { width: 100%; max-width: 120px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.mazo-name { font-family: var(--game, inherit); font-weight: 800; color: var(--text); font-size: .92rem; text-align: center; }
.mazo-btn { width: 100%; padding: 9px; border: none; border-radius: 9px; cursor: pointer; font-weight: 800;
  background: linear-gradient(160deg, var(--rw-gold, #f5b400), #c98f00); color: #2a2000; }
.mazo-btn.mazo-use { background: linear-gradient(160deg, #3ff5d4, #1f9d88); color: #06231f; }
.mazo-btn.mazo-sel { background: var(--surface3, #243056); color: var(--rw-gold, #f5b400); cursor: default; }
.mazo-btn.disabled { background: var(--surface3, #243056); color: var(--muted); cursor: not-allowed; }

/* Insignia en la tarjeta de mazo (antes era botón) */
.mazo-badge { width: 100%; text-align: center; padding: 7px; border-radius: 9px; font-weight: 800; font-size: .85rem;
  background: var(--surface3, #243056); color: var(--rw-gold, #f5b400); }
.mazo-badge-sel { background: linear-gradient(160deg, #3ff5d4, #1f9d88); color: #06231f; }
.mazo-badge-own { background: var(--surface3, #243056); color: var(--muted); }
.mazo-card { cursor: pointer; transition: transform .12s; }
.mazo-card:hover { transform: translateY(-3px); }

/* Vista ampliada de mazo (cerrado + abierto) */
.deck-preview-panel { max-width: 460px; text-align: center; box-shadow: 0 0 30px -6px var(--mglow, rgba(245,180,0,.4)); }
.deck-preview-title { font-family: var(--game, sans-serif); font-weight: 900; font-size: 1.3rem; color: var(--text); margin-bottom: 14px; }
.deck-preview-imgs { display: flex; gap: 16px; justify-content: center; }
.deck-preview-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.deck-preview-col img { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.deck-preview-col span { font-size: .8rem; color: var(--muted); font-weight: 700; letter-spacing: .5px; }
.deck-preview-action { margin-top: 18px; }
.deck-preview-action .mazo-btn { max-width: 280px; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════════════
   TROFEO ampliado a TAMAÑO ENORME + notificación de "nuevo sin revisar"
   ════════════════════════════════════════════════════════════════════ */
/* Notificación en las pestañas Comunes/Shiny */
.tvar-notif {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  background: #ff4b5c; color: #fff; border-radius: 10px; font-style: normal;
  font-weight: 900; font-size: .72rem; box-shadow: 0 0 10px rgba(255,75,92,.6);
  animation: tnotifPulse 1.4s ease-in-out infinite;
}
@keyframes tnotifPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* Etiqueta "¡NUEVO!" en la celda del trofeo no visto */
.trophy-cell { cursor: default; }
.trophy-cell.got { cursor: pointer; }
.trophy-newdot {
  position: absolute; top: 4px; right: 4px; z-index: 4;
  background: #ff4b5c; color: #fff; font-weight: 900; font-size: .6rem;
  padding: 2px 6px; border-radius: 8px; letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: tnotifPulse 1.4s ease-in-out infinite;
}
.trophy-unseen { box-shadow: 0 0 0 2px #ff4b5c, 0 0 16px -2px rgba(255,75,92,.5); border-radius: 12px; }

/* Modal de trofeo enorme */
.trophy-big-modal { position: fixed; inset: 0; z-index: 1600; display: none; align-items: center; justify-content: center; }
.trophy-big-modal.active { display: flex; }
.tbig-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(20,28,48,.96), rgba(6,9,18,.99)); }
.tbig-panel {
  position: relative; z-index: 1; width: 94vw; max-width: 680px; max-height: 94vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px; overflow-y: auto; text-align: center;
}
.tbig-close {
  position: absolute; top: 12px; right: 16px; z-index: 3; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.tbig-close:hover { background: rgba(255,255,255,.2); }
.tbig-alert {
  font-family: var(--game, sans-serif); font-weight: 900; letter-spacing: 2px;
  font-size: clamp(1.2rem, 5vw, 2rem); color: var(--rw-gold, #f5b400);
  text-shadow: 0 0 18px rgba(245,180,0,.5);
}
.tbig-shiny .tbig-alert { color: #3ff5d4; text-shadow: 0 0 18px rgba(63,245,212,.6); }
.tbig-spr-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.tbig-glow {
  position: absolute; width: 80vw; max-width: 460px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,180,0,.3), transparent 62%);
  animation: animPulse 3s ease-in-out infinite;
}
.tbig-shiny .tbig-glow { background: radial-gradient(circle, rgba(63,245,212,.32), transparent 62%); }
/* El sprite OCUPA muchísimo: casi todo el ancho de la pantalla */
.tbig-spr {
  position: relative; z-index: 1; width: min(74vw, 440px); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); animation: tbigPop .5s cubic-bezier(.2,1.3,.4,1) both;
}
.tbig-shiny .tbig-spr { filter: drop-shadow(0 0 30px rgba(63,245,212,.7)); }
@keyframes tbigPop { 0%{transform:scale(.4); opacity:0} 100%{transform:scale(1); opacity:1} }
.tbig-name {
  font-family: var(--game, sans-serif); font-weight: 900; text-transform: capitalize;
  font-size: clamp(1.6rem, 7vw, 3rem); color: var(--text, #fff);
}
.tbig-dexnum { font-weight: 800; color: var(--muted, #8a96ad); font-size: 1.1rem; letter-spacing: 1px; }
.tbig-dex {
  max-width: 520px; margin-top: 8px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface2, #1a2238); border: 1px solid var(--border, #2a3550);
  font-size: .95rem; line-height: 1.55; color: var(--text, #e8eef7);
}

/* Sprite animado (GIF) nítido en las cartas grandes (apertura / ampliada) */
.rwreveal-card-face .poke-card-spr,
.rcm-big-card .poke-card-spr { image-rendering: auto; }
.rwreveal-big .poke-card-art img { max-height: none; }
/* En la carta grande (abrir sobre / carta ampliada) el sprite debe ser grande,
   sin verse afectado por el límite de 72px del álbum en móvil. */
.rwreveal-card-face .poke-card-art img,
.rcm-big-card .poke-card-art img { width: 150px !important; height: 150px !important; }

/* ════════════════════════════════════════════════════════════════════
   LISTADO de cartas de un LOGRO (insignia) — faltantes en gris
   ════════════════════════════════════════════════════════════════════ */
.badge-cell { cursor: pointer; transition: transform .12s; }
.badge-cell:hover { transform: translateY(-2px); }
.bdg-panel { max-width: 680px; width: 94vw; max-height: 90vh; display: flex; flex-direction: column; text-align: center; }
.bdg-title { font-family: var(--game, sans-serif); font-weight: 900; font-size: 1.4rem; color: var(--text); margin-bottom: 2px; }
.bdg-sub { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.bdg-bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.bdg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--rw-gold, #f5b400), #ffe9a8); border-radius: 4px; }
.bdg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px;
  overflow-y: auto; padding: 4px;
}
.bdg-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  background: var(--surface2, #1a2238); border: 1px solid var(--border, #2a3550); border-radius: 10px;
}
.bdg-card.got { cursor: pointer; }
.bdg-card.got:hover { border-color: var(--rw-gold, #f5b400); }
.bdg-card img { width: 56px; height: 56px; image-rendering: pixelated; }
/* Las que faltan: en gris (silueta) */
.bdg-card.missing { opacity: .85; }
.bdg-card.missing img { filter: brightness(0) saturate(0); opacity: .35; }
.bdg-card-num { font-size: .64rem; color: var(--muted); font-weight: 700; }
.bdg-card-name { font-size: .64rem; color: var(--text); text-transform: capitalize; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 78px; }
.bdg-card.missing .bdg-card-name { color: var(--muted); }

/* Botón-pill con el contador de trofeos encontrados (en la barra del buscador) */
.trophy-count-pill {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 0 16px; height: 40px; border-radius: 11px; font-weight: 800; font-size: .9rem;
  color: #cfe0ff; background: linear-gradient(160deg, #2b3f72, #1c2950);
  border: 1px solid #3f5da8; box-shadow: 0 0 14px -4px rgba(63,111,224,.5);
}
.trophy-count-pill.shiny {
  color: #062b26; background: linear-gradient(160deg, #3ff5d4, #1f9d88);
  border-color: #3ff5d4; box-shadow: 0 0 14px -3px rgba(63,245,212,.6);
}

/* Recompensa del logro (en el modal de listado) */
.bdg-reward {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 11px;
  background: linear-gradient(160deg, rgba(245,180,0,.14), rgba(245,180,0,.04));
  border: 1px solid rgba(245,180,0,.35);
}
.bdg-reward.claimed { background: var(--surface2, #1a2238); border-color: var(--border, #2a3550); opacity: .8; }
.bdg-rw-label { font-weight: 800; font-size: .8rem; letter-spacing: .5px; color: var(--rw-gold, #f5b400); margin-bottom: 6px; text-transform: uppercase; }
.bdg-reward.claimed .bdg-rw-label { color: #3ff5d4; }
.bdg-rw-items { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bdg-rw-item { font-weight: 800; color: var(--text); font-size: .95rem; }

/* ════════════════════════════════════════════════════════════════════
   CARTAS CON ARTE TCG (db-tcgcard.js)
   El wrapper .poke-card.poke-card-tcg envuelve la carta SVG generada.
   Conserva el borde/glow por rareza de siempre y encaja el SVG dentro.
   ════════════════════════════════════════════════════════════════════ */
.poke-card-tcg .poke-card-tcg-inner { position: relative; width: 100%; line-height: 0; }
.poke-card-tcg .tcg-card { width: 100% !important; }
.poke-card-tcg .tcg-card svg { width: 100%; height: auto; display: block; border-radius: 10px; }

/* En miniatura el holo solo se anima al pasar el ratón (definido en el JS de
   TCGCard via data-anim). Aquí solo aseguramos que el dup-badge quede encima. */
.poke-card-tcg .card-dup {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
}

/* Carta ampliada (detalle y apertura de sobre): un poco más de aire y la
   animación holo activa de forma continua mientras está en grande. */
.rcm-big-card .poke-card-tcg .tcg-card[data-anim="1"] .tcg-holo,
.rwreveal-card-face .poke-card-tcg .tcg-card[data-anim="1"] .tcg-holo {
  animation: tcgHoloSweep 2.6s linear infinite; opacity: 1;
}
.rcm-big-card .poke-card-tcg, .rwreveal-card-face .poke-card-tcg { max-width: 320px; margin: 0 auto; }

/* Las cartas TCG ya traen su propio marco, así que dentro del wrapper quitamos
   el padding/fondo del marco clásico para que no se duplique. */
.poke-card-tcg { padding: 0 !important; background: transparent !important; }
.poke-card-tcg.got { border: none; box-shadow: 0 0 0 2px var(--rar), 0 4px 14px var(--rar-glow); }
.poke-card-tcg.got:hover { box-shadow: 0 0 0 2px var(--rar), 0 6px 22px var(--rar-glow); }

/* ── Desbloqueo de SHINY con LLAVE (generación semanal) ── */
.rcm-keyunlock {
  margin: 16px 0 6px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--rw-gold) 14%, transparent),
    color-mix(in srgb, var(--rw-gold) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--rw-gold) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
              inset 0 -2px 6px color-mix(in srgb, #000 30%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.rcm-key-icon {
  width: 56px; height: 56px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rw-gold) 60%, transparent));
}
.rcm-key-text { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.rcm-key-text b { color: var(--rw-gold); }
.rcm-key-btn {
  margin-top: 2px;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .3px;
  color: #1a1205;
  background: linear-gradient(180deg, #ffe089, var(--rw-gold));
  border: 1px solid color-mix(in srgb, var(--rw-gold) 70%, #000);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--rw-gold) 40%, #000),
              inset 0 1px 0 #fff8;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.rcm-key-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 color-mix(in srgb, var(--rw-gold) 40%, #000), inset 0 1px 0 #fff8;
}
/* Estado bloqueado: aún no se cumplen las condiciones (sin llave o sin carta normal) */
.rcm-keyunlock-locked {
  background: linear-gradient(160deg, rgba(140,150,170,.10), rgba(140,150,170,.03));
  border-color: rgba(140,150,170,.30);
}
.rcm-keyunlock-locked .rcm-key-icon { filter: grayscale(1) brightness(.6); }
.rcm-key-btn:disabled {
  background: linear-gradient(180deg, #6b7280, #4b5563);
  color: #cbd5e1;
  border-color: #374151;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .8;
}
.rcm-key-btn:disabled:active { transform: none; }

/* ── Carta NUEVA: borde verde animado al abrir sobre ── */
@keyframes newCardPulse {
  0%, 100% { box-shadow: 0 0 0 2px #27ae60, 0 0 12px 2px rgba(39,174,96,.55), 0 0 22px 4px rgba(39,174,96,.30); }
  50%      { box-shadow: 0 0 0 3px #3ff58a, 0 0 20px 5px rgba(63,245,138,.85), 0 0 34px 9px rgba(63,245,138,.45); }
}
@keyframes newBadgePop {
  0% { transform: translateX(-50%) scale(.6); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.18); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* Resumen (rejilla de cartas del sobre) */
.prize-card-slot.is-new {
  border-radius: 12px;
  animation: newCardPulse 1.1s ease-in-out infinite;
}
.prize-card-slot.is-new .prize-new {
  background: linear-gradient(180deg, #3ff58a, #1e9e54);
  color: #04210f;
  font-size: .78rem;
  letter-spacing: .6px;
  font-weight: 900;
  padding: 3px 11px;
  border: 1px solid #aef7c8;
  box-shadow: 0 2px 14px rgba(39,174,96,.75);
  animation: newBadgePop .5s cubic-bezier(.2,1.4,.4,1) both;
  animation: newBadgePop .5s cubic-bezier(.2,1.4,.4,1) both, newBadgePulse 1.1s ease-in-out .5s infinite;
}
@keyframes newBadgePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
/* Revelado en grande (carta a carta) */
.rwreveal-card-wrap.is-new .rwreveal-card-face {
  border-radius: 14px;
  animation: newCardPulse 1.1s ease-in-out infinite;
}
.rwreveal-card-wrap.is-new .rwreveal-rar b {
  color: #3ff58a;
  text-shadow: 0 0 8px rgba(63,245,138,.7);
}

/* ── AVISO GRANDE: generación de la semana ── */
.weekgen-banner-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.wgb-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 18, .82);
  backdrop-filter: blur(4px);
  animation: wgbFade .3s ease;
}
@keyframes wgbFade { from { opacity: 0; } to { opacity: 1; } }
.wgb-panel {
  position: relative; z-index: 1;
  width: min(92vw, 440px);
  padding: 30px 26px 26px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(165deg, #18213b, #0c1124);
  border: 1px solid rgba(120, 160, 255, .35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: wgbPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
  overflow: hidden;
}
@keyframes wgbPop {
  from { transform: scale(.82) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.wgb-glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,150,255,.4), transparent 65%);
  pointer-events: none;
}
.wgb-kicker {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 700; font-size: .82rem; letter-spacing: 3px;
  color: #8fb4ff; margin-bottom: 6px;
}
.wgb-num {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: 2px;
  color: #fff; text-shadow: 0 3px 18px rgba(90, 150, 255, .7);
}
.wgb-region {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 700; font-size: 1.5rem; letter-spacing: 4px;
  color: #ffd479; margin-top: 2px; text-transform: uppercase;
}
.wgb-sprites {
  position: relative;
  display: flex; justify-content: center; gap: 6px;
  margin: 16px 0 10px;
}
.wgb-sprite {
  width: 78px; height: 78px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  animation: wgbFloat 2.6s ease-in-out infinite;
}
.wgb-sprite:nth-child(2) { animation-delay: .3s; }
.wgb-sprite:nth-child(3) { animation-delay: .6s; }
@keyframes wgbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wgb-note {
  position: relative;
  font-size: .92rem; line-height: 1.45; color: #c5d2ee;
  margin: 6px 4px 20px;
}
.wgb-note b { color: #fff; }
.wgb-srvmsg {
  position: relative;
  font-size: .9rem; line-height: 1.4; color: #ffe9a8;
  background: rgba(255,196,0,.1); border: 1px solid rgba(255,196,0,.3);
  border-radius: 10px; padding: 9px 12px; margin: 0 4px 16px;
  font-weight: 600;
}
.wgb-close-btn {
  position: relative;
  padding: 12px 30px; border-radius: 12px;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.05rem; letter-spacing: 1.5px;
  color: #06122e; cursor: pointer;
  background: linear-gradient(180deg, #aecbff, #5a96ff);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 4px 16px rgba(90, 150, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .1s ease;
}
.wgb-close-btn:active { transform: translateY(2px); }

/* ── Botón Reiniciar colección + modal de confirmación ── */
.rewards-reset-btn {
  background: linear-gradient(180deg, #5a1e1e, #3a1414) !important;
  border-color: rgba(255, 90, 90, .4) !important;
  color: #ff9b9b !important;
}
.rewards-reset-btn:hover { background: linear-gradient(180deg, #7a2626, #4a1818) !important; }
.rewards-reset-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
}
.rewards-reset-modal.active { display: flex; }
.rrm-backdrop { position: absolute; inset: 0; background: rgba(4, 7, 18, .8); backdrop-filter: blur(3px); }
.rrm-panel {
  position: relative; z-index: 1;
  width: min(90vw, 400px); padding: 26px 24px;
  border-radius: 18px; text-align: center;
  background: linear-gradient(165deg, #2a1620, #1a0e16);
  border: 1px solid rgba(255, 120, 120, .3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: wgbPop .35s cubic-bezier(.2, 1.3, .4, 1) both;
}
.rrm-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #ff9b9b;
  background: rgba(255, 90, 90, .14); border: 1px solid rgba(255, 90, 90, .35);
}
.rrm-title {
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: 10px;
}
.rrm-text { font-size: .9rem; line-height: 1.5; color: #d8bcc4; margin-bottom: 20px; }
.rrm-text b { color: #fff; }
.rrm-btns { display: flex; gap: 10px; justify-content: center; }
.rrm-cancel, .rrm-confirm {
  padding: 11px 22px; border-radius: 10px; cursor: pointer;
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700; font-size: .95rem;
  border: 1px solid transparent;
}
.rrm-cancel { background: rgba(255, 255, 255, .1); color: #ddd; border-color: rgba(255, 255, 255, .2); }
.rrm-cancel:hover { background: rgba(255, 255, 255, .18); }
.rrm-confirm { background: linear-gradient(180deg, #e85555, #c03030); color: #fff; box-shadow: 0 3px 12px rgba(224, 60, 60, .45); }
.rrm-confirm:active { transform: translateY(2px); }

/* ── Distintivo grande "¡NUEVA!" al revelar carta en apertura de sobre ── */
.rwreveal-card-wrap { position: relative; }
.rwreveal-newburst {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3ff58a, #1e9e54);
  border: 2px solid #aef7c8;
  box-shadow: 0 4px 18px rgba(39, 174, 96, .7), 0 0 0 4px rgba(63, 245, 138, .18);
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 900; font-size: 1.15rem; letter-spacing: 1.5px;
  color: #04210f; white-space: nowrap;
  animation: rwnbPop .55s cubic-bezier(.2, 1.5, .4, 1) both, rwnbWobble 2.2s ease-in-out .55s infinite;
}
.rwreveal-newburst.shiny {
  background: linear-gradient(180deg, #ffe27a, #f5a623);
  border-color: #fff3c4;
  box-shadow: 0 4px 20px rgba(245, 166, 35, .8), 0 0 0 4px rgba(255, 226, 122, .25);
  color: #3a2400;
}
.rwnb-text { line-height: 1; }
.rwnb-spark {
  font-size: 1rem;
  animation: rwnbSpark 1.1s ease-in-out infinite;
}
.rwnb-spark:last-child { animation-delay: .55s; }
@keyframes rwnbPop {
  from { transform: translateX(-50%) rotate(-3deg) scale(.3); opacity: 0; }
  to   { transform: translateX(-50%) rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes rwnbWobble {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(3deg); }
}
@keyframes rwnbSpark {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* ── Línea de reciclaje (puntos a ganar) en el modal de reinicio ── */
.rrm-recycle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 16px;
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(245,200,90,.16), rgba(245,200,90,.06));
  border: 1px solid rgba(245,200,90,.4);
}
.rrm-recycle-lbl { font-size: .85rem; color: #e8d6a8; font-weight: 600; }
.rrm-recycle-pts {
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 900; font-size: 1.3rem; color: #ffd479;
  text-shadow: 0 1px 6px rgba(245,200,90,.5);
}
.rrm-warn { font-size: .82rem !important; color: #d8bcc4 !important; margin-bottom: 18px !important; }

/* ── Leyenda de las 8 medallas (bajo el baúl) ── */
.medal-legend {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
  max-width: 520px; margin: 14px auto 4px;
}
.medal-leg-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.medal-leg-img {
  width: 100%; max-width: 46px; height: auto; aspect-ratio: 1;
  object-fit: contain; transition: filter .3s, opacity .3s, transform .2s;
}
.medal-leg-name {
  font-size: .6rem; font-weight: 700; letter-spacing: .2px;
  color: var(--muted); text-align: center; line-height: 1.1;
}
.medal-leg-item.empty .medal-leg-img {
  filter: grayscale(1) brightness(.3); opacity: .5;
}
.medal-leg-item.lit .medal-leg-img {
  filter: drop-shadow(0 0 5px rgba(255,220,120,.5));
}
.medal-leg-item.lit .medal-leg-name { color: var(--accent, #f5a623); }
.medal-leg-item.lit:hover .medal-leg-img { transform: scale(1.12); }
@media (max-width: 560px) {
  .medal-legend { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .medal-leg-img { max-width: 52px; }
}

/* ── Panel de LLAVES de generación (galería shiny) ── */
.keys-panel {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(245,200,90,.14), rgba(245,200,90,.05));
  border: 1px solid rgba(245,200,90,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.keys-panel-head {
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.05rem; color: #ffd479;
  text-align: center; margin-bottom: 12px;
}
.keys-panel-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 12px;
}
.key-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(245,200,90,.35);
  min-width: 72px;
}
.key-chip-img {
  width: 56px; height: 56px; image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(245,200,90,.6));
  animation: keyChipFloat 2.4s ease-in-out infinite;
}
@keyframes keyChipFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.key-chip-lbl { font-size: .72rem; color: #e8d6a8; text-align: center; line-height: 1.15; }
.key-chip-lbl b { color: #ffd479; }
.keys-panel-help {
  font-size: .82rem; line-height: 1.4; color: #c9d3e8; text-align: center;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px;
}
.keys-panel-help b { color: #fff; }

/* ── Trofeo shiny desbloqueable con llave ── */
.trophy-cell.trophy-key-unlock {
  cursor: pointer;
  box-shadow: 0 0 0 2px #f5a623, 0 0 14px -2px rgba(245,166,35,.5);
  border-radius: 12px;
}
.trophy-cell.trophy-key-unlock .trophy-spr {
  filter: brightness(0.15) sepia(1) saturate(4) hue-rotate(5deg);
  opacity: 0.9;
}
.trophy-key-badge {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #f5a623;
  color: #1a1a2e;
  font-size: .55rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   APERTURA MÚLTIPLE DE SOBRES
   ══════════════════════════════════════════════════════ */

/* Botones de apertura múltiple en la rejilla de sobres */
.pkopen-btns {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 4px 6px 8px;
}
.pkopen-btn-1 {
  background: linear-gradient(160deg, var(--pc,#3a63c8), var(--pc2,#233a82));
  color: #fff; border: none; border-radius: 8px; padding: 7px 14px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .85rem;
  cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: filter .15s, transform .15s;
}
.pkopen-btn-1:hover { filter: brightness(1.15); transform: translateY(-1px); }
.pkopen-btn-multi {
  background: linear-gradient(160deg, #4a9eff, #2260c4);
  color: #fff; border: none; border-radius: 8px; padding: 7px 14px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .85rem;
  cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: filter .15s, transform .15s;
}
.pkopen-btn-multi:hover { filter: brightness(1.15); transform: translateY(-1px); }
.pkopen-btn-all {
  background: linear-gradient(160deg, #f5a623, #c07c10);
  color: #1a1a2e; border: none; border-radius: 8px; padding: 7px 14px;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .85rem;
  cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: filter .15s, transform .15s;
}
.pkopen-btn-all:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Contador de sobre actual durante apertura múltiple */
.rwmulti-counter {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: rgba(255,255,255,.7); letter-spacing: 1px; margin-bottom: 4px;
}

/* El sobre en apertura múltiple es más pequeño para que quepa el flash de cartas */
.rwmulti-tearpack .tearpack-img {
  height: 38vh; max-height: 260px;
}
.rwmulti-stage { padding-top: 10px !important; }

/* Flash de cartas que aparecen rápido debajo del sobre */
.rwmulti-cards-flash {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 12px; min-height: 100px;
}
.rwmulti-card-thumb {
  opacity: 0; transform: translateY(20px) scale(.88);
  transition: opacity .22s ease, transform .22s ease;
  transition-delay: calc(var(--ci, 0) * 0.05s);
  position: relative;
}
.rwmulti-card-thumb.in { opacity: 1; transform: translateY(0) scale(1); }
.rwmulti-card-thumb .poke-card { width: 90px !important; min-width: 90px !important; }

/* Pantalla de resumen final */
.rwmulti-summary-stage { padding-bottom: 180px; max-width: min(1840px, 96vw); width: 100%; }
.rwmulti-summary-stage .rwmulti-result-grid { max-width: 100%; }
.rwmulti-summary-header {
  text-align: center; margin-bottom: 16px;
}
.rwmulti-summary-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: #fff; letter-spacing: 1px; margin-bottom: 6px;
}
.rwmulti-summary-stats {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.rwmulti-stat {
  background: rgba(255,255,255,.1); border-radius: 20px;
  padding: 4px 12px; font-size: .85rem; color: rgba(255,255,255,.8);
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
}
.rwmulti-stat.is-new { background: rgba(63,245,180,.2); color: #3ff5b4; }
.rwmulti-stat.foil { background: rgba(245,166,35,.2); color: #f5c842; }

/* Rejilla de resultados: más densa que la apertura normal */
.rwmulti-result-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-height: calc(100vh - 260px); overflow-y: auto; padding-bottom: 20px;
}
.rwmulti-result-card {
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .25s ease, transform .25s ease;
}
.rwmulti-result-card.in { opacity: 1; transform: translateY(0) scale(1); }

/* ══════════════════════════════════════════════════════
   BANNER DE LLAVES KLEFKI EN VITRINA DE TROFEOS
   ══════════════════════════════════════════════════════ */
.tkey-banner {
  margin: 0 8px 16px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(245,166,35,.08));
  border: 1.5px solid rgba(245,166,35,.5); border-radius: 14px;
  box-shadow: 0 0 20px rgba(245,166,35,.15);
}
.tkey-banner-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.tkey-banner-klefki {
  width: 52px; height: 52px; image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(245,166,35,.6));
  animation: klefkiSpin 4s ease-in-out infinite;
}
@keyframes klefkiSpin {
  0%,100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.08); }
}
.tkey-banner-text { display: flex; flex-direction: column; gap: 3px; }
.tkey-banner-text b { color: #f5c842; font-size: .95rem; }
.tkey-banner-text span { color: rgba(255,255,255,.75); font-size: .8rem; line-height: 1.3; }
.tkey-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tkey-chip {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: rgba(245,166,35,.2); border: 1px solid rgba(245,166,35,.4);
  border-radius: 20px;
}
.tkey-chip-img { width: 24px; height: 24px; image-rendering: pixelated; }
.tkey-chip-lbl { font-size: .78rem; color: #f5c842; font-weight: 700; }

/* ══════════════════════════════════════════════════════
   OVERLAY ÉPICO DE DESBLOQUEO SHINY CON LLAVE
   ══════════════════════════════════════════════════════ */
.trophy-unlock-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.trophy-unlock-overlay.visible { opacity: 1; pointer-events: all; }
.tuo-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,8,.82); backdrop-filter: blur(4px);
}
.tuo-box {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, #1a1a3e, #0e0e22);
  border: 2px solid rgba(245,166,35,.6);
  border-radius: 20px; padding: 32px 28px;
  min-width: 280px; max-width: 360px; width: 90%;
  box-shadow: 0 0 60px rgba(245,166,35,.3), 0 20px 60px rgba(0,0,0,.7);
  transform: scale(.7) translateY(30px); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  text-align: center;
}
.tuo-box.tuo-enter { transform: scale(1) translateY(0); }

/* Fase 1: Klefki */
.tuo-phase { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tuo-klefki {
  width: 90px; height: 90px; image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(245,166,35,.8));
  animation: klefkiBounce .6s ease-in-out infinite alternate;
}
@keyframes klefkiBounce { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-10px) rotate(5deg); } }
.tuo-key-text { font-family: 'Rajdhani',sans-serif; font-weight: 800; font-size: 1.3rem; color: #f5c842; }
.tuo-key-sub { font-size: .85rem; color: rgba(255,255,255,.6); }

/* Fase 2: Pokémon bloqueado */
.tuo-phase-in { animation: tuoFadeUp .35s ease forwards; }
@keyframes tuoFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.tuo-lock-wrap { position: relative; display: inline-block; }
.tuo-sprite { width: 110px; height: 110px; image-rendering: pixelated; }
.tuo-sprite-dark { filter: brightness(0.1) saturate(0); }
.tuo-lock-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2.4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.tuo-confirm-btn {
  background: linear-gradient(160deg, #f5a623, #c07c10);
  color: #1a1a2e; border: none; border-radius: 12px; padding: 12px 28px;
  font-family: 'Rajdhani',sans-serif; font-weight: 800; font-size: 1.05rem;
  cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 4px 16px rgba(245,166,35,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .15s, filter .15s;
}
.tuo-confirm-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
.tuo-cancel-btn {
  background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.5);
  border-radius: 8px; padding: 7px 18px; font-size: .85rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tuo-cancel-btn:hover { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.8); }

/* Fase 3: Revelación épica */
.tuo-phase-reveal { position: relative; overflow: visible; }
.tuo-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.tuo-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  top: 0; left: 0;
  animation: tuoParticle .9s ease-out forwards;
}
@keyframes tuoParticle {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(var(--s)); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0); opacity: 0; }
}
.tuo-sprite-shiny {
  width: 130px; height: 130px; image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(63,245,212,.9)) drop-shadow(0 0 48px rgba(63,245,212,.4));
  transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.tuo-sprite-shiny.tuo-shiny-pop { transform: scale(1); }
.tuo-reveal-name {
  font-family: 'Rajdhani',sans-serif; font-weight: 900; font-size: 1.4rem;
  color: #3ff5d4; text-shadow: 0 0 16px rgba(63,245,212,.8);
  animation: tuoNameGlow 1.5s ease-in-out infinite alternate;
}
@keyframes tuoNameGlow {
  from { text-shadow: 0 0 8px rgba(63,245,212,.6); }
  to   { text-shadow: 0 0 24px rgba(63,245,212,1), 0 0 48px rgba(63,245,212,.4); }
}
.tuo-reveal-sub { font-size: .9rem; color: rgba(255,255,255,.7); }
.tuo-close-btn {
  background: linear-gradient(160deg, #3ff5d4, #1f9d88);
  color: #06231f; border: none; border-radius: 12px; padding: 12px 32px;
  font-family: 'Rajdhani',sans-serif; font-weight: 800; font-size: 1.05rem;
  cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 4px 16px rgba(63,245,212,.4);
  transition: transform .15s, filter .15s;
}
.tuo-close-btn:hover { transform: scale(1.05); filter: brightness(1.1); }

/* Klefki key reward in badge modal */
.bdg-rw-key {
  display: flex; align-items: center; gap: 6px;
  background: rgba(245,166,35,.15); border: 1px solid rgba(245,166,35,.4);
  border-radius: 10px; padding: 5px 10px;
}
.bdg-rw-klefki {
  width: 28px; height: 28px; image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(245,166,35,.6));
  animation: klefkiSpin 4s ease-in-out infinite;
}
.bdg-rw-key-sub {
  display: block; font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.55); margin-top: 1px;
}

/* ══════════════════════════════════════════════════════
   FASE 1: GRID DE SOBRES
   ══════════════════════════════════════════════════════ */
.rwmg-stage {
  padding: 16px 12px 32px !important;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.rwmg-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: rgba(255,255,255,.8); text-align: center;
}
.rwmg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%; max-width: 520px;
}

/* Slot de sobre en el grid */
.rwmg-slot {
  position: relative; aspect-ratio: 0.64;
  border-radius: 8px; overflow: hidden;
  cursor: default;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  transition: transform .15s;
}
.rwmg-pack-inner {
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--pc,#3a63c8), var(--pc2,#233a82));
  border-radius: 8px; overflow: hidden;
}
.rwmg-pack-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 8px;
}
.rwmg-pack-fbname {
  position: absolute; bottom: 10%; left: 0; right: 0; text-align: center;
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: .65rem;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); letter-spacing: .5px;
}
/* Tira de rasgado en miniatura */
.rwmg-rip {
  position: absolute; top: 0; left: 0; right: 0; height: 13%;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
  border-bottom: 1px dashed rgba(255,255,255,.4);
  clip-path: polygon(0 0,100% 0,100% 60%,96% 100%,92% 60%,88% 100%,84% 60%,80% 100%,76% 60%,72% 100%,68% 60%,64% 100%,60% 60%,56% 100%,52% 60%,48% 100%,44% 60%,40% 100%,36% 60%,32% 100%,28% 60%,24% 100%,20% 60%,16% 100%,12% 60%,8% 100%,4% 60%,0 100%);
  opacity: 0; pointer-events: none;
}
.rwmg-rip.go {
  opacity: 1;
  animation: ripTear .5s ease-in forwards;
}
/* Sobre rasgándose */
.rwmg-slot.tearing .rwmg-pack-img,
.rwmg-slot.tearing .rwmg-pack-inner {
  animation: packReveal .5s ease-in forwards;
}
/* Sobre abierto: se oscurece y aparece el check */
.rwmg-slot.opened .rwmg-pack-inner {
  filter: brightness(0.35) saturate(0.3);
}
.rwmg-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #3ff5d4; opacity: 0; pointer-events: none;
  text-shadow: 0 0 12px rgba(63,245,212,.8);
  transition: opacity .25s;
}
.rwmg-check.visible { opacity: 1; }

/* ══════════════════════════════════════════════════════
   FASE 2: REVEAL DE CARTA GRANDE
   ══════════════════════════════════════════════════════ */
.rwreveal-card-wrap {
  position: relative; display: inline-block;
  border-radius: 10px;
  box-shadow: 0 0 30px var(--rglow, rgba(0,0,0,.3)), 0 10px 30px rgba(0,0,0,.5);
}
.rwreveal-pop {
  animation: rwRevealPop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes rwRevealPop {
  from { transform: scale(.7) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.rwmulti-skip-btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); border-radius: 8px; padding: 6px 16px;
  font-size: .82rem; cursor: pointer; margin-top: 4px;
  transition: background .15s, color .15s;
}
.rwmulti-skip-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Responsive: menos columnas en pantallas pequeñas */
@media (max-width: 480px) {
  .rwmg-grid { grid-template-columns: repeat(4, 1fr); max-width: 360px; }
}
@media (max-width: 340px) {
  .rwmg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════
   REVEAL MULTI-PACK — Layout rediseñado
   Pila izquierda · Carta grande derecha · Controles abajo
   ══════════════════════════════════════════════════════ */

/* Override del stage para el reveal del multi-pack */
.rwreveal-stage.rwreveal-multi {
  display: grid;
  grid-template-areas:
    "title  title"
    "pile   card"
    "prog   prog"
    "skip   skip";
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px 18px;
  align-items: start;
  padding: 16px;
  min-height: 0;
  max-height: calc(100vh - 60px);
  overflow: hidden;
}

/* Título */
.rwreveal-stage.rwreveal-multi .rwreveal-title {
  grid-area: title;
  font-size: 1.1rem;
  text-align: center;
}

/* Pila: más compacta, anclada arriba */
.rwreveal-stage.rwreveal-multi .rwreveal-pile {
  grid-area: pile;
  width: 130px;
  height: 180px;
  margin: 0;
  align-self: start;
  cursor: pointer;
}
.rwreveal-stage.rwreveal-multi .rwreveal-peek {
  width: 120px;
  bottom: calc(var(--pos) * 14px);
}
.rwreveal-stage.rwreveal-multi .rwreveal-hint {
  font-size: .72rem;
  bottom: -22px;
}

/* Carta grande: a la derecha, tamaño ajustado */
.rwreveal-stage.rwreveal-multi .rwreveal-big {
  grid-area: card;
  max-width: 100%;
  margin: 0;
  cursor: pointer;
}
.rwreveal-stage.rwreveal-multi .rwreveal-big .rwreveal-card-wrap {
  gap: 8px;
}
.rwreveal-stage.rwreveal-multi .rwreveal-big .rwreveal-card-face {
  width: 100%;
  max-width: 220px;
}
.rwreveal-stage.rwreveal-multi .rwreveal-big .rwreveal-meta {
  max-width: 220px;
  width: 100%;
}

/* Progreso */
.rwreveal-stage.rwreveal-multi .rwreveal-progress {
  grid-area: prog;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  color: #f5b400;
  letter-spacing: 2px;
}

/* Botón skip */
.rwreveal-stage.rwreveal-multi .rwmulti-skip-btn {
  grid-area: skip;
  margin: 0 auto;
}

/* Fondo con gradiente sutil detrás de la pila */
.rwreveal-stage.rwreveal-multi .rwreveal-pile::before {
  content: '';
  position: absolute;
  inset: -20px -30px;
  background: radial-gradient(ellipse at center, rgba(245,180,0,.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Tap hint en la carta */
.rwreveal-stage.rwreveal-multi .rwreveal-tap {
  font-size: .78rem;
}

/* Número de cartas restantes encima de la pila */
.rwreveal-pile-count {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800; font-size: .8rem;
  color: rgba(255,255,255,.5);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ─── Responsive: en pantalla muy estrecha vuelve a columna ─── */
@media (max-width: 380px) {
  .rwreveal-stage.rwreveal-multi {
    grid-template-areas:
      "title"
      "pile"
      "card"
      "prog"
      "skip";
    grid-template-columns: 1fr;
  }
  .rwreveal-stage.rwreveal-multi .rwreveal-pile {
    margin: 0 auto;
  }
}

/* ══════════════════════════════════════════════════════
   NOTIFICACIÓN DE TROFEO — Banner flotante
   ══════════════════════════════════════════════════════ */
.trophy-notif-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 8000; width: min(380px, 92vw);
  background: linear-gradient(135deg, #1a1a3e 0%, #0e0e22 100%);
  border: 2px solid rgba(245,166,35,.6); border-radius: 16px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 24px rgba(245,166,35,.2);
  opacity: 0; transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.trophy-notif-banner.visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all;
}
.trophy-notif-banner.shiny {
  border-color: rgba(63,245,212,.7);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 32px rgba(63,245,212,.25);
}
.tnb-glow {
  position: absolute; inset: -1px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(135deg, rgba(245,166,35,.12), transparent 60%);
}
.trophy-notif-banner.shiny .tnb-glow {
  background: linear-gradient(135deg, rgba(63,245,212,.15), transparent 60%);
}
.tnb-sprite {
  width: 56px; height: 56px; image-rendering: pixelated; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(245,166,35,.5));
  animation: klefkiBounce .6s ease-in-out infinite alternate;
}
.trophy-notif-banner.shiny .tnb-sprite {
  filter: drop-shadow(0 0 10px rgba(63,245,212,.7));
}
.tnb-text { flex: 1; min-width: 0; }
.tnb-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .9rem;
  color: #f5c842; margin-bottom: 2px;
}
.trophy-notif-banner.shiny .tnb-title { color: #3ff5d4; }
.tnb-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1.1rem;
  color: #fff; text-transform: capitalize;
}
.tnb-cta { font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 3px; }
.tnb-close {
  background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.4);
  border-radius: 6px; padding: 4px 8px; font-size: .8rem; cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.tnb-close:hover { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.8); }

/* ── Dot de notificación en el botón COLECCIÓN ── */
.menu-collection { position: relative; }
.collection-notif-dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: #ff4b5c; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(255,75,92,.7);
  opacity: 0; transform: scale(.6);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.collection-notif-dot.visible { opacity: 1; transform: scale(1); }

/* ── Nombre normal (no shiny) en animación reveal ── */
.tuo-reveal-name-normal {
  color: #f5c842 !important;
  text-shadow: 0 0 16px rgba(245,200,66,.8) !important;
}
@keyframes tuoNameGlowNormal {
  from { text-shadow: 0 0 8px rgba(245,200,66,.6); }
  to   { text-shadow: 0 0 24px rgba(245,200,66,1), 0 0 48px rgba(245,200,66,.4); }
}
.tuo-reveal-name-normal { animation: tuoNameGlowNormal 1.5s ease-in-out infinite alternate !important; }

/* Tab notification dot */
.rewards-tab { position: relative; }
.tab-notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff4b5c; box-shadow: 0 0 6px rgba(255,75,92,.8);
}

/* Gen reward banner extras */
.gen-reward-banner { border-color: rgba(63,245,180,.6) !important; }
.gen-reward-banner .tnb-glow { background: linear-gradient(135deg, rgba(63,245,180,.15), transparent 60%) !important; }
.gen-reward-banner .tnb-title { color: #3ff5b4 !important; }
.tnb-icons { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.tnb-icons .tnb-sprite { width: 38px; height: 38px; }
.tnb-icons .tnb-key { width: 30px; height: 30px; }

/* ══════════════════════════════════════════════════════
   REVEAL FASE 2 — Grid de miniaturas + carta grande
   ══════════════════════════════════════════════════════ */
.rwp-stage {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px 20px !important;
  height: calc(100vh - 70px); max-height: 700px;
  overflow: hidden; box-sizing: border-box;
}
.rwp-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; padding: 0 4px;
}
.rwp-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 1.1rem;
  color: #f5b400;
}
.rwp-body {
  display: grid; grid-template-columns: 1fr 200px; gap: 12px;
  flex: 1; min-height: 0; overflow: hidden;
}
.rwp-grid-wrap {
  overflow-y: auto; overflow-x: hidden;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px;
}
.rwp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  align-content: start;
}

/* Miniatura individual */
.rwp-thumb {
  position: relative; border-radius: 8px; overflow: hidden;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  border: 2px solid var(--rc, #555);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.rwp-thumb:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.rwp-thumb-inner { pointer-events: none; }
.rwp-thumb-inner .poke-card { width: 100% !important; min-width: unset !important; }
.rwp-thumb-foil {
  position: absolute; top: 3px; right: 3px;
  font-size: .65rem; color: #f5c842;
  text-shadow: 0 0 4px rgba(245,200,66,.8);
  pointer-events: none;
}
/* Animación: vuela hacia la derecha */
.rwp-thumb-fly {
  animation: rwpThumbFly .38s cubic-bezier(.4,0,1,1) forwards;
  pointer-events: none;
}
@keyframes rwpThumbFly {
  0%   { transform: scale(1) translateX(0); opacity: 1; }
  60%  { transform: scale(1.15) translateX(30px); opacity: 1; }
  100% { transform: scale(.7) translateX(80px); opacity: 0; }
}
.rwp-thumb-gone { visibility: hidden; pointer-events: none; }

/* Columna derecha: carta grande revelada */
.rwp-reveal-col {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; cursor: pointer;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px; min-height: 0;
}
.rwp-reveal-hint { text-align: center; padding: 20px 10px; }
.rwp-hint-icon { font-size: 2rem; margin-bottom: 8px; animation: rwpHintBounce 1.2s ease-in-out infinite; }
@keyframes rwpHintBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.rwp-hint-text { font-size: .78rem; color: rgba(255,255,255,.4); line-height: 1.4; }
.rwp-big-card { width: 100%; }
.rwp-big-card.rwp-pop { animation: rwpBigPop .32s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rwpBigPop { from{transform:scale(.75) translateY(10px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.rwp-big-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rwp-big-wrap .poke-card { width: 100% !important; }
.rwp-foil .poke-card { box-shadow: 0 0 16px var(--rglow, rgba(245,180,0,.4)); }

/* Barra de progreso abajo */
.rwp-progress {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .85rem;
  color: rgba(255,255,255,.4); text-align: center; flex-shrink: 0;
}

/* Responsive: en pantallas muy estrechas, grid de columna */
@media (max-width: 400px) {
  .rwp-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rwp-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); }
  .rwp-reveal-col { min-height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════
   APERTURA MÚLTIPLE — PILA que se vacía carta a carta
   La izquierda es una pila real: al revelar, la carta de arriba se va y
   la pila se acorta visiblemente. La derecha muestra la carta en grande.
   ════════════════════════════════════════════════════════════════════ */
.rwppile-stage {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; min-height: 100%;
}
.rwppile-header { text-align: center; flex-shrink: 0; }
.rwppile-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1.2rem;
  color: var(--rw-gold, #f5b400);
}
.rwppile-sub { font-size: .8rem; color: var(--muted, #8a96ad); margin-top: 2px; }

.rwppile-body {
  display: grid; grid-template-columns: 230px 1fr; gap: 16px;
  flex: 1; min-height: 0; align-items: center;
}
.rwppile-col-left { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.rwppile-col-right {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; min-height: 0; gap: 8px;
}

/* La pila */
.rwppile {
  position: relative; width: 210px; height: 320px;
  cursor: pointer; margin: 0 auto;
}
/* Bloque de "profundidad" detrás cuando quedan muchas cartas: da sensación
   de mazo gordo que va adelgazando. --depth controla cuántas líneas se ven. */
.rwppile-deep {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 190px; height: calc(140px + var(--depth, 0) * 2.2px);
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px,
      rgba(20,28,48,.92) 1px, rgba(20,28,48,.92) 5px);
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 -3px 12px rgba(0,0,0,.45);
  z-index: 0; transition: height .25s ease;
}
.rwppile-peeks { position: absolute; inset: 0; }
.rwppile-peek {
  position: absolute; left: 50%;
  bottom: calc(var(--pos) * 16px);
  transform: translateX(-50%);
  width: 200px; height: 140px; z-index: calc(100 + var(--z, 1));
  background: linear-gradient(180deg, var(--rc, #888) 0%, var(--rc, #888) 20px, rgba(20,28,48,.94) 20px);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 12px;
  box-shadow: 0 -3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .25s ease, opacity .25s ease, bottom .25s ease;
}
.rwppile-peek[style*="--pos:0"] {
  box-shadow: 0 -3px 16px rgba(0,0,0,.5), 0 0 18px -3px rgba(255,255,255,.35);
}
/* La carta de arriba se va volando a la derecha al revelarse */
.rwppile-peek-fly {
  animation: rwppileFly .26s cubic-bezier(.4,0,1,1) forwards;
  z-index: 999 !important;
}
@keyframes rwppileFly {
  0%   { transform: translateX(-50%) translateY(0) rotate(0); opacity: 1; }
  60%  { transform: translateX(10%) translateY(-30px) rotate(8deg) scale(1.06); opacity: 1; }
  100% { transform: translateX(120%) translateY(-50px) rotate(16deg) scale(.7); opacity: 0; }
}
.rwppile-hint {
  position: absolute; bottom: -28px; left: 0; right: 0; text-align: center;
  font-size: .8rem; color: var(--muted, #8a96ad);
  animation: rwHintPulse 1.6s ease-in-out infinite;
}

/* Carta grande a la derecha */
.rwppile-reveal-hint { text-align: center; padding: 24px 12px; }
.rwppile-hint-icon { font-size: 2.2rem; margin-bottom: 8px; animation: rwpHintBounce 1.2s ease-in-out infinite; }
.rwppile-hint-text { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.4; }
.rwppile-big { width: 100%; max-width: 300px; }
.rwppile-big.rwppile-pop { animation: rwppileBigPop .34s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rwppileBigPop { from{transform:scale(.7) translateY(14px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.rwppile-big-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rwppile-big-wrap .poke-card { width: 100% !important; min-width: unset !important; }
.rwppile-foil .poke-card { box-shadow: 0 0 18px var(--rglow, rgba(245,180,0,.45)); }
.rwppile-shiny .poke-card { box-shadow: 0 0 18px rgba(63,245,212,.55); }

/* Footer */
.rwppile-footer {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-shrink: 0; flex-wrap: wrap;
}
.rwppile-progress {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .95rem;
  color: var(--rw-gold, #f5b400); letter-spacing: 1px;
}

/* Responsive: en estrecho, pila arriba y carta abajo */
@media (max-width: 480px) {
  .rwppile-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
  .rwppile-col-left { align-items: center; }
  .rwppile { width: 200px; height: 230px; }
  .rwppile-deep { height: calc(120px + var(--depth, 0) * 1.6px); }
}

/* ════════════════════════════════════════════════════════════════════
   REGALO RECIBIDO — Revelado épico (cartas o sobres importados)
   ════════════════════════════════════════════════════════════════════ */
.gift-reveal-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.gift-reveal-overlay.visible { opacity: 1; pointer-events: all; }
.gro-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,30,70,.85), rgba(8,8,20,.96));
  backdrop-filter: blur(4px);
}
.gro-box {
  position: relative; z-index: 2;
  width: min(420px, 94vw); max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px 20px; text-align: center;
  animation: groBoxIn .45s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes groBoxIn { from{transform:scale(.85) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.gro-header { display: flex; flex-direction: column; gap: 4px; }
.gro-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1.5rem;
  color: #f5c842; text-shadow: 0 0 18px rgba(245,200,66,.5);
}
.gro-from { font-size: .9rem; color: #c8d2e0; }
.gro-from b { color: #fff; }
.gro-sub { font-size: .9rem; color: rgba(255,255,255,.6); font-weight: 600; }

/* Carta grande */
.gro-stage { width: 100%; display: flex; justify-content: center; cursor: pointer; min-height: 0; }
.gro-stage.gro-stage-pop .gro-card-wrap { animation: groCardPop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes groCardPop { 0%{transform:scale(.6) rotate(-6deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.gro-card-wrap { position: relative; width: 260px; max-width: 78vw; }
.gro-card-face .poke-card, .gro-card-face .tcg-card { width: 100% !important; min-width: unset !important; }
.gro-new-badge, .gro-dup-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  z-index: 5; padding: 3px 14px; border-radius: 999px;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .8rem;
  white-space: nowrap;
}
.gro-new-badge { background: linear-gradient(135deg,#3ad17a,#1ba85e); color: #04210f; box-shadow: 0 0 16px rgba(58,209,122,.6); }
.gro-dup-badge { background: rgba(60,70,90,.9); color: #c8d2e0; }
.gro-tap {
  font-size: .9rem; color: #f5c842; font-weight: 700;
  animation: rwHintPulse 1.5s ease-in-out infinite;
}

/* Sobres regalados */
.gro-packs-grid {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 100%;
}
.gro-pack-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: groTileIn .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes groTileIn { from{transform:scale(.7) translateY(10px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.gro-pack-img-wrap {
  position: relative; width: 92px; height: 124px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 16px var(--pglow, rgba(0,0,0,.5)));
}
.gro-pack-img { width: 100%; height: 100%; object-fit: contain; }
.gro-pack-img-wrap.gro-pack-noimg {
  border-radius: 10px;
  background: linear-gradient(160deg, var(--pc, #3a63c8), var(--pc2, #233a82));
  border: 2px solid rgba(255,255,255,.2);
}
.gro-pack-fb {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .8rem; color: #fff;
  text-align: center; padding: 6px;
}
.gro-pack-noimg .gro-pack-fb { display: flex; }
.gro-pack-count {
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1.3rem;
  color: #fff; text-shadow: 0 0 10px var(--pglow, rgba(245,180,0,.6));
}
.gro-pack-label { font-size: .78rem; color: rgba(255,255,255,.7); font-weight: 600; }
.gro-hint { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.4; max-width: 320px; }

.gro-close {
  margin-top: 6px; padding: 10px 28px; border: none; border-radius: 999px;
  background: linear-gradient(135deg,#f5c842,#e0a020); color: #2a1d00;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 1rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(245,200,66,.4);
  transition: transform .12s, box-shadow .12s;
}
.gro-close:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(245,200,66,.55); }

/* Burst de partículas (sobres) */
.gro-burst { position: absolute; top: 30%; left: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.gro-particle {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: rotate(var(--a)) translateY(0) scale(var(--s));
  animation: groParticle .9s ease-out forwards;
}
@keyframes groParticle {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(var(--s)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0); }
}

/* ── META SEMANAL (db-weekgoal) ── */
.wg-bar {
  margin: 10px 0 6px; padding: 14px 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.35);
}
.wg-bar-title {
  font-family: var(--game, inherit); font-weight: 800; letter-spacing: 1px;
  font-size: .98rem; color: var(--rw-gold, #f5b400); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; text-transform: uppercase;
}
.wg-genflag {
  font-size: .68rem; color: #0a2c12; background: linear-gradient(180deg,#7be08a,#39b85a);
  padding: 2px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.wg-track { margin: 0 0 46px; }
.wg-track:last-of-type { margin-bottom: 16px; }
.wg-track-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 7px;
}
.wg-track-right { display: flex; align-items: center; gap: 8px; }
.wg-track-label {
  font-family: var(--game, inherit); font-weight: 700; font-size: .8rem;
  letter-spacing: .5px; color: #e8eef6;
}
.wg-track-count {
  font-family: var(--game, inherit); font-weight: 800; font-size: .78rem;
  color: var(--muted, #9fb0c4);
}
.wg-rail {
  position: relative; height: 12px; border-radius: 7px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.wg-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, #39b85a, #7bd88a);
  box-shadow: 0 0 10px rgba(80,210,120,.5);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
/* Cada hito: el punto va sobre el raíl; el texto cuelga debajo. */
.wg-pip {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 0; /* el ancho real lo da .wg-pip-info, posicionado aparte */
}
.wg-pip-dot {
  position: relative; left: -7px; display: block;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 30%, #5a6b80, #2b3848);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.wg-pip-ready .wg-pip-dot {
  border-color: var(--rw-gold, #f5b400);
  background: radial-gradient(circle at 35% 30%, #ffe27a, #f5b400);
  box-shadow: 0 0 12px rgba(245,180,0,.8);
  animation: wgPulse 1.4s ease-in-out infinite;
}
.wg-pip-claimed .wg-pip-dot {
  border-color: #39b85a;
  background: radial-gradient(circle at 35% 30%, #7be08a, #2e9a4d);
}
@keyframes wgPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.wg-pip-mark {
  position: absolute; top: 0; left: -7px; width: 14px; text-align: center;
  font-size: .62rem; font-weight: 900; color: #06310f; line-height: 14px;
}
/* Bloque de texto bajo el punto: umbral/botón + recompensa, apilados. */
.wg-pip-info {
  position: absolute; top: 16px; left: 0;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%);
  width: max-content; max-width: 92px;
}
/* Hitos de los extremos: anclar el texto al borde para que no se salga. */
.wg-pip-first .wg-pip-info { left: -7px; transform: translateX(0); align-items: flex-start; text-align: left; }
.wg-pip-last  .wg-pip-info { left: 7px;  transform: translateX(-100%); align-items: flex-end; text-align: right; }
.wg-pip-n {
  font-family: var(--game, inherit); font-weight: 800;
  font-size: .66rem; color: var(--muted, #9fb0c4); line-height: 1.1;
}
.wg-pip-rw {
  margin-top: 3px; font-size: .56rem; color: #8294aa; white-space: nowrap;
  font-weight: 600; letter-spacing: .2px; opacity: .85; line-height: 1.1;
}
.wg-pip-claimed .wg-pip-rw { color: #5f7a66; }
.wg-claim {
  cursor: pointer;
  font-family: var(--game, inherit); font-weight: 800; font-size: .6rem;
  letter-spacing: .5px; text-transform: uppercase; color: #3a2c00;
  background: linear-gradient(180deg, #ffe27a, #f5b400);
  border: 1px solid #c8920a; border-radius: 6px; padding: 3px 8px;
  box-shadow: 0 3px 8px rgba(245,180,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .08s, box-shadow .15s; white-space: nowrap;
}
.wg-claim:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(245,180,0,.55); }
.wg-claim:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(245,180,0,.4); }
.wg-foot {
  margin-top: 4px; font-size: .64rem; color: rgba(140,156,176,.7);
  font-style: italic; line-height: 1.3;
}
/* Hueco para incrustar la barra dentro del banner semanal */
#weekgen-goalbar { margin-top: 14px; }

/* ── RECOMPENSA DIARIA (db-daily) ── */
.daily-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.daily-overlay.daily-closing { animation: dailyOut .28s ease forwards; }
@keyframes dailyOut { to { opacity: 0; transform: scale(.96); } }
.daily-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 18, .82);
  backdrop-filter: blur(4px);
  animation: wgbFade .3s ease;
}
.daily-panel {
  position: relative; z-index: 1;
  width: min(92vw, 420px);
  padding: 30px 26px 26px;
  border-radius: 22px; text-align: center;
  background: linear-gradient(165deg, #2a2010, #140d04);
  border: 1px solid rgba(245, 200, 66, .4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: wgbPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
  overflow: hidden;
}
.daily-glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 66, .38), transparent 65%);
  pointer-events: none;
}
.daily-kicker {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 700; font-size: .82rem; letter-spacing: 3px;
  color: #ffd479; margin-bottom: 6px;
}
.daily-title {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.9rem; line-height: 1.05; letter-spacing: 1px;
  color: #fff; text-shadow: 0 3px 18px rgba(245, 200, 66, .55);
}
.daily-sobres {
  position: relative;
  display: flex; justify-content: center; gap: 18px;
  margin: 22px 0 12px;
}
.daily-sobre {
  position: relative; width: 96px; height: 132px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--pc, #e2483d), var(--pc2, #a32820));
  box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 22px var(--pglow, rgba(226,72,61,.5)),
              inset 0 2px 0 rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  animation: dailySobreIn .5s cubic-bezier(.2,1.4,.4,1) both, wgbFloat 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .12s), calc(.4s + var(--i, 0) * .25s);
  overflow: hidden;
}
@keyframes dailySobreIn { from { transform: translateY(20px) scale(.7); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.daily-sobre-img { width: 100%; height: 100%; object-fit: cover; }
.daily-sobre-fb { width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.daily-sobre-orb {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.3));
  box-shadow: 0 0 14px rgba(255,255,255,.5);
}
.daily-sobre-name {
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: .7rem; letter-spacing: 1px; color: #fff;
}
.daily-amount {
  position: relative;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.25rem; letter-spacing: 1px;
  color: #ffd479; margin-top: 4px; text-transform: uppercase;
}
.daily-note {
  position: relative;
  font-size: .86rem; line-height: 1.4; color: #d8c9a6;
  margin: 8px 6px 20px;
}
.daily-claim-btn {
  position: relative;
  padding: 12px 34px; border-radius: 12px;
  font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 800; font-size: 1.05rem; letter-spacing: 1.5px;
  color: #3a2c00; cursor: pointer;
  background: linear-gradient(180deg, #ffe27a, #f5b400);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 4px 16px rgba(245, 180, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .1s ease;
}
.daily-claim-btn:hover { transform: translateY(-1px); }
.daily-claim-btn:active { transform: translateY(2px); }

/* ── Punto de aviso en pestaña (Metas con algo reclamable) ── */
.rtab-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-left: 6px; background: #ff5a4d;
  box-shadow: 0 0 8px rgba(255,90,77,.8); opacity: 1 !important;
  vertical-align: middle; animation: wgPulse 1.3s ease-in-out infinite;
}

/* ── Pestaña METAS ── */
.goals-wrap { display: flex; flex-direction: column; gap: 22px; padding: 4px 2px 8px; }
.goals-section {}
.goals-sec-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.goals-sec-title {
  font-family: var(--game, inherit); font-weight: 800; font-size: 1rem;
  letter-spacing: 1px; color: var(--rw-gold, #f5b400); text-transform: uppercase;
}
.goals-sec-sub { font-size: .74rem; color: var(--muted, #9fb0c4); }
.goals-empty { font-size: .82rem; color: var(--muted, #9fb0c4); padding: 8px 2px; }

.goal-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.3);
}
.goal-card.goal-ready { border-color: rgba(245,180,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(245,180,0,.25); }
.goal-card.goal-done { opacity: .8; }
.goal-card.goal-soon { opacity: .68; }
.goal-card-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
}
.goal-card-main { flex: 1 1 auto; min-width: 0; }
.goal-card-title {
  font-family: var(--game, inherit); font-weight: 700; font-size: .95rem;
  color: #e8eef6; letter-spacing: .3px;
}
.goal-card-desc { font-size: .8rem; color: var(--muted, #9fb0c4); margin-top: 2px; line-height: 1.3; }
.goal-claim-btn {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--game, inherit); font-weight: 800; font-size: .72rem;
  letter-spacing: .5px; text-transform: uppercase; color: #3a2c00;
  background: linear-gradient(180deg, #ffe27a, #f5b400);
  border: 1px solid #c8920a; border-radius: 8px; padding: 8px 16px;
  box-shadow: 0 3px 8px rgba(245,180,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .08s, box-shadow .15s; white-space: nowrap;
}
.goal-claim-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(245,180,0,.55); }
.goal-claim-btn:active { transform: translateY(1px); }
/* Acciones de una tarjeta de reto: botón play + estado/reclamar. */
.goal-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* Botón "play" → ir a la sección del reto (estilo relieve, glow tipo agua). */
.goal-go-btn {
  flex: 0 0 auto; cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #d7e6ff;
  background: linear-gradient(180deg, #3a6fd8, #244a9c);
  border: 1px solid #1b3675;
  box-shadow: 0 3px 8px rgba(58,111,216,.4), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .08s, box-shadow .15s, filter .15s;
}
.goal-go-btn:hover { transform: translateY(-1px); filter: brightness(1.08);
  box-shadow: 0 5px 12px rgba(58,111,216,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.goal-go-btn:active { transform: translateY(1px); }
.goal-go-btn svg { display: block; margin-left: 1px; }
/* En la barra semanal el play es algo más pequeño. */
.wg-track-right .goal-go-btn { width: 30px; height: 30px; border-radius: 8px; }
.goal-claimed-tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  color: #6bbf83; background: rgba(57,184,90,.14);
  border: 1px solid rgba(57,184,90,.35); border-radius: 8px; padding: 6px 12px; white-space: nowrap;
}
.goal-soon-tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  color: var(--muted, #9fb0c4); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 12px; white-space: nowrap;
}
/* La barra semanal dentro de Metas: quitar su margen superior extra. */
.goals-section .wg-bar { margin-top: 0; }

/* ── Retos diarios por modo (dentro de Diarias) ── */
.goals-ch-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.goal-ch .goal-card-desc { line-height: 1.35; }
.goal-ch-win { color: #6bbf83; font-weight: 800; }
.goal-ch-pending {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  color: var(--muted, #9fb0c4); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 6px 12px; white-space: nowrap;
}

/* ── Calendario de racha del regalo diario (7 días) ── */
.daily-panel-streak { max-width: 540px; }
.daily-sobre-x {
  position: absolute; bottom: -6px; right: -6px;
  background: #1a1030; color: #ffd45e; font-weight: 900;
  font-size: .8rem; padding: 1px 7px; border-radius: 10px;
  border: 1.5px solid rgba(255,212,94,.7);
}
.daily-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; margin: 16px 0 12px;
}
.daily-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 6px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  transition: transform .15s ease;
}
.daily-cell-day { font-size: .62rem; font-weight: 700; color: #b9b6d6; letter-spacing: .3px; }
.daily-cell-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, var(--cc, #e2483d), var(--cc2, #a32820));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
}
.daily-cell-orb { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.55); }
.daily-cell-sprite { width: 26px; height: 30px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
/* Cuando se usa sprite, el círculo de color estorba: lo hacemos transparente. */
.daily-cell-icon:has(.daily-cell-sprite) { background: none; box-shadow: none; border-radius: 0; }
.daily-cell-check { color: #fff; font-weight: 900; font-size: 1rem; }
.daily-cell-amt { font-size: .58rem; font-weight: 700; color: #d8d5ee; }
/* Estados */
.daily-cell-done { opacity: .55; }
.daily-cell-done .daily-cell-icon { background: linear-gradient(160deg, #3a9e5c, #1f7a3e); }
.daily-cell-today {
  background: rgba(255,212,94,.14);
  border-color: rgba(255,212,94,.85);
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(255,212,94,.5);
}
.daily-cell-today .daily-cell-day { color: #ffd45e; }
.daily-cell-locked { opacity: .42; }
.daily-cell-locked .daily-cell-icon { filter: grayscale(.7) brightness(.7); }

/* ── RUTA DE REGALOS DIARIOS (pestaña Diario en Colección) ── */
.dr-wrap { padding: 4px 2px 20px; }
.dr-header {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  margin-bottom: 18px;
}
.dr-streak { font-size: 1rem; color: #e8e5f5; }
.dr-streak b { color: #ffd45e; }
.dr-claim {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #ffb020, #ff7a18);
  color: #2a1500; font-weight: 900; font-size: .95rem;
  padding: 11px 22px; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(255,140,30,.5);
  transition: transform .15s ease;
}
.dr-claim:hover { transform: translateY(-2px) scale(1.03); }
.dr-claimed-note { color: #7CFFB0; font-weight: 700; font-size: .9rem; }

.dr-section-title {
  font-size: .82rem; font-weight: 800; letter-spacing: .5px;
  color: #b9b6d6; text-transform: uppercase;
  margin: 18px 0 10px;
}

/* Ciclo de 7 recompensas */
.dr-cycle {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px;
}
.dr-cyc {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 3px; border-radius: 11px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
}
.dr-cyc-now { border-color: rgba(255,212,94,.85); background: rgba(255,212,94,.12); box-shadow: 0 0 14px rgba(255,212,94,.4); }
.dr-cyc-day { font-size: .58rem; font-weight: 800; color: #c8c4dd; }
.dr-cyc-now .dr-cyc-day { color: #ffd45e; }
.dr-cyc-orb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--cc), var(--cc2));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.4);
}
.dr-cyc-sprite { width: 30px; height: 34px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.dr-cyc-amt { font-size: .56rem; font-weight: 700; color: #d8d5ee; }
.dr-cyc-extra { font-size: .56rem; color: #ffd45e; font-weight: 800; }
.dr-cyc-lbl { font-size: .5rem; color: #908da8; text-align: center; line-height: 1.2; }

/* Calendario mensual */
.dr-calendar { background: rgba(0,0,0,.18); border-radius: 12px; padding: 10px; }
.dr-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.dr-wd { text-align: center; font-size: .62rem; font-weight: 800; color: #807da0; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dr-cell {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.dr-cell-empty { background: transparent; border: none; }
.dr-num { font-size: .66rem; font-weight: 700; color: #b9b6d6; position: absolute; top: 3px; left: 5px; }
.dr-check { color: #7CFFB0; font-weight: 900; font-size: 1.1rem; }
.dr-gift { font-size: 1rem; }
.dr-claimed { background: rgba(40,180,99,.18); border-color: rgba(124,255,176,.4); }
.dr-claimed .dr-num { color: #7CFFB0; }
.dr-today { border-color: #ffd45e; box-shadow: 0 0 12px rgba(255,212,94,.55); background: rgba(255,212,94,.12); }
.dr-today .dr-num { color: #ffd45e; }
.dr-future { opacity: .4; }

.dr-legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: .68rem; color: #b9b6d6; }
.dr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dr-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dr-dot-claimed { background: #3a9e5c; }
.dr-dot-today { background: #ffd45e; }
.dr-dot-future { background: rgba(255,255,255,.18); }

/* ════════════════════════════════════════════════════════════════
   ENVÍO DE SOBRES (db-rewards-ui.js) — botón verde + selector
   ════════════════════════════════════════════════════════════════ */
.rewards-send-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.9rem;letter-spacing:.3px;cursor:pointer;
  color:#fff;background:#2f5a8a;border:1px solid #3f72ad;
  border-radius:11px;padding:12px 18px;margin-left:auto;transition:background .15s,transform .1s;
}
.rewards-send-btn:hover{background:#386ba3;transform:translateY(-1px);}
.rewards-send-btn:active{transform:translateY(0);}

/* Overlay del selector */
.rw-send-ov{
  position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,14,.72);opacity:0;transition:opacity .22s;padding:18px;backdrop-filter:blur(3px);
}
.rw-send-ov.on{opacity:1;}
.rw-send-card{
  position:relative;width:380px;max-width:94vw;max-height:88vh;overflow-y:auto;
  background:linear-gradient(165deg,#1b2433,#131a25);border:1px solid #2e3f57;border-radius:16px;
  padding:22px 20px 18px;box-shadow:0 16px 40px rgba(0,0,0,.6);
  transform:scale(.93);transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.rw-send-ov.on .rw-send-card{transform:scale(1);}
.rw-send-x{position:absolute;top:11px;right:13px;width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:#26313f;border:1px solid #3a4960;color:#9fb4cc;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;}
.rw-send-x:hover{background:#5a2030;border-color:#7a3045;color:#ff9a9a;}
.rw-send-tit{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;color:#fff;margin:0 0 4px;}
.rw-send-sub{font-size:13px;color:#8da6c0;font-weight:600;margin:0 0 16px;line-height:1.4;}

.rw-send-list{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
.rwsend-row{display:flex;align-items:center;gap:11px;background:linear-gradient(160deg,#1d2838,#161e2a);
  border:1px solid #2a3a52;border-left:3px solid var(--pc,#5b8def);border-radius:11px;padding:9px 11px;}
.rwsend-spr{width:42px;height:42px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.rwsend-info{flex:1;min-width:0;}
.rwsend-nm{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#fff;}
.rwsend-have{font-size:11px;color:#7da2c8;font-weight:600;}
.rwsend-stepper{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.rwsend-step{width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:18px;font-weight:700;
  background:#2a3548;border:1px solid #3a4a64;color:#cfe0f0;display:flex;align-items:center;justify-content:center;transition:background .12s;}
.rwsend-step:hover:not(:disabled){background:#34425a;}
.rwsend-step:disabled{opacity:.35;cursor:default;}
.rwsend-qty{min-width:24px;text-align:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;color:#fff;}

.rw-send-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rw-send-total{font-size:13px;font-weight:600;color:#8da6c0;}
.rw-send-go{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;cursor:pointer;
  color:#06281a;background:linear-gradient(160deg,#5fe0a0,#1fae78 55%,#137a55);border:none;border-radius:10px;padding:11px 22px;
  box-shadow:0 3px 0 #0e5e40;transition:transform .12s,box-shadow .15s,opacity .15s;}
.rw-send-go:hover:not(:disabled){box-shadow:0 3px 0 #0e5e40,0 0 18px rgba(31,174,120,.6);}
.rw-send-go:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 10px rgba(31,174,120,.5);}
.rw-send-go:disabled{opacity:.4;cursor:default;}
.rw-send-cancel{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  color:#cfd9e6;background:#2a3548;border:1px solid #3a4a64;border-radius:10px;padding:11px 20px;transition:background .14s;}
.rw-send-cancel:hover{background:#34425a;}

/* Diálogo de nombre */
.rw-send-name-card{width:340px;}
.rw-send-in{width:100%;box-sizing:border-box;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:16px;
  background:#11192499;border:1px solid #34507a;border-radius:10px;padding:11px 13px;color:#fff;margin-bottom:8px;outline:none;}
.rw-send-in:focus{border-color:#5fe0a0;}
.rw-send-name-msg{min-height:18px;font-size:13px;font-weight:600;margin-bottom:10px;}
.rw-send-name-msg.err{color:#ff8a7a;}
.rw-send-name-msg.ok{color:#5fe0a0;}