/* ============================================================
   Gambling — APP CSS  v2
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg0: #04040e;
  --bg1: #080815;
  --card: rgba(14, 14, 28, .72);
  --card2: rgba(8, 8, 18, .50);
  --glass: rgba(20, 20, 40, .55);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .05);
  --text: #eef1ff;
  --muted: rgba(220, 225, 255, .60);
  --muted2: rgba(220, 225, 255, .35);

  --n1: #ff2bd6;
  --n2: #7c4dff;
  --n3: #12d6ff;
  --ok: #22c55e;
  --bad: #ef4444;

  /* rareza — colores semilla */
  --rc-comun:      #94a3b8;
  --rc-especial:   #38bdf8;
  --rc-rara:       #a78bfa;
  --rc-legendaria: #fbbf24;
  --rc-shiny:      #f472b6;
  --rc-ex:         #818cf8;
  --rc-evento:     #34d399;

  --r: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .55);
  --shadow-sm: 0 8px 30px rgba(0, 0, 0, .40);
}

/* ── Reset base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, .40);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 77, 255, .65); }

/* ── Fondo gradiente animado ────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1400px 700px at 15% 8%,  rgba(124, 77, 255, .20), transparent 60%),
    radial-gradient(1000px 600px at 88% 90%,  rgba(18, 214, 255, .16), transparent 60%),
    radial-gradient(800px  650px at 80% 15%,  rgba(255, 43, 214, .13), transparent 60%),
    radial-gradient(600px  500px at 45% 55%,  rgba(124, 77, 255, .07), transparent 60%),
    linear-gradient(170deg, var(--bg0) 0%, var(--bg1) 100%);
}

/* Líneas neón de fondo */
.bg-lines::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 43, 214, 0) 0px,
    rgba(255, 43, 214, 0) 54px,
    rgba(255, 43, 214, .09) 55px,
    rgba(255, 43, 214, 0) 56px
  );
  animation: drift 18s linear infinite;
}
@keyframes drift {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* Estrellas CSS */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1px 1px at 10%  20%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  8%,  rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  40%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 80%  15%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  75%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 22%  85%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  62%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  90%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5%   50%, rgba(200,180,255,.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88%  38%, rgba(180,220,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55%  5%,  rgba(255,200,255,.50) 0%, transparent 100%),
    radial-gradient(2px   2px   at 28%  30%, rgba(180,200,255,.45) 0%, transparent 100%),
    radial-gradient(1px   1px   at 15%  95%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px   1px   at 70%  55%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 42%  78%, rgba(255,255,255,.30) 0%, transparent 100%);
  animation: starDrift 60s linear infinite;
}
.stars::after {
  background-image:
    radial-gradient(1px 1px at 18%  45%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  25%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  60%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 3%   70%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 65%  88%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40%  15%, rgba(200,180,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95%  30%, rgba(180,220,255,.50) 0%, transparent 100%),
    radial-gradient(2px   2px   at 75%  5%,  rgba(255,200,255,.45) 0%, transparent 100%);
  animation-direction: reverse;
  animation-duration: 80s;
}
@keyframes starDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, -15px); }
  100% { transform: translate(0, 0); }
}

/* Asegura que el contenido quede sobre los fondos */
.container, header, main { position: relative; z-index: 1; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), var(--shadow-sm),
              inset 0 1px 0 rgba(255,255,255,.06);
}

.brand { display: flex; flex-direction: column; gap: 2px; }
.brand .t {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.2px;
  background: linear-gradient(90deg, #fff 0%, var(--n3) 40%, var(--n1) 80%, var(--n2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .s {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .2px;
}

.pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.pill strong { color: var(--text); font-size: 13px; }

/* ── Barra de progreso global ───────────────────────────── */
#progressOverall {
  margin-top: 14px;
}
.progress-wrap {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.progress-label .pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--n2), var(--n1), var(--n3));
  background-size: 200% 100%;
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  animation: shimmerBar 2.5s ease infinite;
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  animation: shimmerSlide 2.5s ease infinite;
}
@keyframes shimmerBar {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ── Grid principal ─────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }

/* ── Panels/cards ───────────────────────────────────────── */
.card {
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), var(--shadow-sm),
              inset 0 1px 0 rgba(255,255,255,.06);
}

.sidebar-card {
  position: sticky;
  top: 18px;
}

.h2 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -.1px;
}

.sep {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Filtros ────────────────────────────────────────────── */
.filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.filters-row select { flex: 1; min-width: 130px; }

.search-row { margin-bottom: 12px; }

.search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(200,200,255,.4)' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.868-3.834zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.search-input:focus {
  border-color: rgba(124, 77, 255, .55);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, .14);
}
.search-input::placeholder { color: var(--muted2); }

/* ── Inputs / selects ───────────────────────────────────── */
.input, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  outline: none;
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(200,200,255,.5)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select:focus, .input:focus {
  border-color: rgba(124, 77, 255, .55);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, .12);
}
select option { background: #0f0f1e; color: var(--text); }

/* ── Botones ────────────────────────────────────────────── */
.btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, rgba(255,43,214,.22) 0%, rgba(124,77,255,.22) 100%);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}
.btn:hover::after { opacity: 1; }
.btn:hover {
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 0 20px rgba(255, 43, 214, .18), 0 4px 16px rgba(0,0,0,.3);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .40; cursor: not-allowed; pointer-events: none; }

.btn.secondary {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line);
}
.btn.secondary:hover {
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.btn.danger {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .28);
}
.btn.danger:hover {
  border-color: rgba(239, 68, 68, .50);
  box-shadow: 0 0 20px rgba(239, 68, 68, .18), 0 4px 16px rgba(0,0,0,.3);
}

/* ── Grid de cartas ─────────────────────────────────────── */
.cardGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  align-items: start;
}

/* ── Tile ───────────────────────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tile {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(8, 8, 20, .60);
  padding: 8px 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: cardIn .28s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.028s);
  transition: transform .14s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.tile:hover {
  transform: translateY(-4px) scale(1.02);
  z-index: 2;
}
.tile:active { transform: translateY(-1px) scale(1.005); }

/* Contenedor imagen con ratio fijo */
.tile .imgWrap {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .40);
  position: relative;
  flex-shrink: 0;
}

.tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease, filter .3s ease;
}
.tile:hover img { transform: scale(1.04); }

/* Franja de rareza en la base de la imagen */
.rarity-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 0 0 12px 12px;
  background: transparent;
  transition: height .2s ease, opacity .2s ease;
}
.tile.rc-comun      .rarity-strip { background: var(--rc-comun); box-shadow: 0 0 8px var(--rc-comun); }
.tile.rc-especial   .rarity-strip { background: var(--rc-especial); box-shadow: 0 0 10px var(--rc-especial); }
.tile.rc-rara       .rarity-strip { background: var(--rc-rara); box-shadow: 0 0 12px var(--rc-rara); }
.tile.rc-legendaria .rarity-strip { background: linear-gradient(90deg, #f59e0b, var(--rc-legendaria), #f59e0b); box-shadow: 0 0 14px var(--rc-legendaria); animation: goldPulse 2s ease-in-out infinite; }
.tile.rc-shiny      .rarity-strip { background: linear-gradient(90deg, var(--rc-shiny), var(--n3), var(--rc-shiny)); background-size: 200% 100%; animation: shinyShift 1.8s ease infinite; box-shadow: 0 0 14px var(--rc-shiny); }
.tile.rc-ex         .rarity-strip { background: var(--rc-ex); box-shadow: 0 0 14px var(--rc-ex); animation: exPulse 1.5s ease-in-out infinite; }
.tile.rc-evento     .rarity-strip { background: var(--rc-evento); box-shadow: 0 0 12px var(--rc-evento); }
@keyframes goldPulse  { 0%,100%{opacity:.8} 50%{opacity:1} }
@keyframes shinyShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes exPulse    { 0%,100%{opacity:.7} 50%{opacity:1} }

/* Hover glow por rareza */
.tile.is-revealed.rc-comun:hover      { border-color: rgba(148,163,184,.35); box-shadow: 0 8px 30px rgba(148,163,184,.18); }
.tile.is-revealed.rc-especial:hover   { border-color: rgba(56,189,248,.40);  box-shadow: 0 8px 35px rgba(56,189,248,.25); }
.tile.is-revealed.rc-rara:hover       { border-color: rgba(167,139,250,.45); box-shadow: 0 8px 40px rgba(167,139,250,.30); }
.tile.is-revealed.rc-legendaria:hover { border-color: rgba(251,191,36,.55);  box-shadow: 0 8px 45px rgba(251,191,36,.35); }
.tile.is-revealed.rc-shiny:hover      { border-color: rgba(244,114,182,.60); box-shadow: 0 8px 50px rgba(244,114,182,.40); }
.tile.is-revealed.rc-ex:hover         { border-color: rgba(129,140,248,.55); box-shadow: 0 8px 45px rgba(129,140,248,.35); }
.tile.is-revealed.rc-evento:hover     { border-color: rgba(52,211,153,.50);  box-shadow: 0 8px 40px rgba(52,211,153,.30); }

/* Carta oculta */
.tile.is-hidden {
  border-color: rgba(255, 255, 255, .05);
  background: rgba(4, 4, 12, .70);
  opacity: .75;
}
.tile.is-hidden img {
  filter: brightness(.10) saturate(0);
}
.tile.is-hidden .imgWrap::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  color: rgba(255, 255, 255, .20);
  z-index: 2;
  pointer-events: none;
}
.tile.is-hidden:hover { opacity: .90; }
.tile.is-hidden .card-name { color: var(--muted2); font-style: italic; }

/* Badge de copias */
.copies-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  backdrop-filter: blur(6px);
  z-index: 3;
  letter-spacing: .3px;
}

/* Nombre de la carta */
.card-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding: 0 2px;
}

/* Meta (fase + rareza) */
.tile .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
}
.meta-phase {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

/* Badge de rareza coloreado */
.rarity-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rarity-badge.rc-comun      { background: rgba(148,163,184,.15); color: var(--rc-comun); }
.rarity-badge.rc-especial   { background: rgba(56,189,248,.15);  color: var(--rc-especial); }
.rarity-badge.rc-rara       { background: rgba(167,139,250,.15); color: var(--rc-rara); }
.rarity-badge.rc-legendaria { background: rgba(251,191,36,.15);  color: var(--rc-legendaria); }
.rarity-badge.rc-shiny      { background: rgba(244,114,182,.15); color: var(--rc-shiny); }
.rarity-badge.rc-ex         { background: rgba(129,140,248,.15); color: var(--rc-ex); }
.rarity-badge.rc-evento     { background: rgba(52,211,153,.15);  color: var(--rc-evento); }

/* ── Estado vacío ───────────────────────────────────────── */
.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed rgba(255, 255, 255, .10);
  border-radius: 14px;
  line-height: 1.5;
  background: rgba(255,255,255,.02);
}

/* ── Pack animation ─────────────────────────────────────── */
.packAnim {
  height: 190px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(260px 160px at 30% 50%, rgba(255,43,214,.22), transparent 60%),
    radial-gradient(300px 180px at 72% 52%, rgba(18,214,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(124,77,255,.14), rgba(255,43,214,.10));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease;
  user-select: none;
}
.packAnim:hover {
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 0 50px rgba(124,77,255,.25), 0 0 80px rgba(255,43,214,.12);
}

/* Anillos giratorios */
.pack-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
}
.pack-ring-1 {
  width: 140px; height: 140px;
  border-color: rgba(255,43,214,.25);
  animation: ringRotate 4s linear infinite;
}
.pack-ring-2 {
  width: 110px; height: 110px;
  border-color: rgba(18,214,255,.20);
  border-style: dashed;
  animation: ringRotate 6s linear infinite reverse;
}
.pack-ring-3 {
  width: 175px; height: 175px;
  border-color: rgba(124,77,255,.15);
  animation: ringRotate 9s linear infinite;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }

/* Cuerpo del pack (icono + texto) */
.pack-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pack-icon {
  font-size: 38px;
  animation: packBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,43,214,.55));
}
@keyframes packBob {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.04); }
}
.packAnim .txt {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px;
}

/* Sin sobres */
.packAnim.empty .pack-icon { filter: grayscale(.7) opacity(.5); animation: none; }
.packAnim.empty .pack-ring { opacity: .30; }
.packAnim.disabled { cursor: not-allowed; }

/* Apertura */
#packAnim.opening {
  animation: packShake 550ms ease-in-out infinite;
  box-shadow: 0 0 60px rgba(120,180,255,.35), 0 0 100px rgba(255,43,214,.20);
  border-color: rgba(255,255,255,.25);
}
#packAnim.opening .pack-icon { animation: none; filter: drop-shadow(0 0 20px rgba(180,220,255,.80)); }
@keyframes packShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2px,-1px) rotate(-.5deg); }
  40%  { transform: translate(2px, 1px) rotate(.5deg); }
  60%  { transform: translate(-1px, 2px) rotate(-.3deg); }
  80%  { transform: translate(1px,-1px) rotate(.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ── Resultado del sobre (overlay) ──────────────────────── */
#packResult {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .82);
  z-index: 9999;
  backdrop-filter: blur(12px);
  cursor: pointer;
  padding: 20px;
}
#packResult.show { display: flex; }

.prInner {
  width: min(400px, 92vw);
  border-radius: 24px;
  padding: 20px;
  background: rgba(12, 12, 24, .94);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .65);
  text-align: center;
  animation: packPop 300ms cubic-bezier(.22, 1, .36, 1) forwards;
  position: relative;
  overflow: hidden;
}
.prInner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(124,77,255,.30), rgba(255,43,214,.25), rgba(18,214,255,.20));
  z-index: -1;
}
@keyframes packPop {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.prBadge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(120, 180, 255, .18);
  border: 1px solid rgba(120, 180, 255, .30);
  margin-bottom: 10px;
}
.prTag {
  margin: 0 0 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .4px;
}
.prTag--new  { color: var(--ok); text-shadow: 0 0 12px rgba(34,197,94,.60); }
.prTag--dup  { color: var(--muted); }

#packResult img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
}
.prName {
  margin-top: 12px;
  font-weight: 700;
  font-size: 14px;
  opacity: .90;
}
.prHint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted2);
}

/* Variantes de rareza en overlay */
#packResult.rc-legendaria .prInner::before {
  background: linear-gradient(135deg, rgba(251,191,36,.45), rgba(245,158,11,.30), rgba(251,191,36,.20));
}
#packResult.rc-legendaria .prBadge { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.45); color: #fbbf24; }
#packResult.rc-legendaria { box-shadow: inset 0 0 200px rgba(251,191,36,.08); }

#packResult.rc-shiny .prInner::before {
  background: linear-gradient(135deg, rgba(244,114,182,.50), rgba(167,139,250,.35), rgba(18,214,255,.25));
  animation: shinyBorder 2s linear infinite;
  background-size: 300% 300%;
}
@keyframes shinyBorder { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
#packResult.rc-shiny .prBadge { background: linear-gradient(90deg, rgba(244,114,182,.22), rgba(167,139,250,.22)); border-color: rgba(244,114,182,.55); color: #f472b6; }

#packResult.rc-ex .prInner::before { background: linear-gradient(135deg, rgba(129,140,248,.45), rgba(99,102,241,.25)); }
#packResult.rc-ex .prBadge { background: rgba(129,140,248,.18); border-color: rgba(129,140,248,.45); color: #818cf8; }

#packResult.rc-rara .prInner::before { background: linear-gradient(135deg, rgba(167,139,250,.40), rgba(139,92,246,.25)); }
#packResult.rc-rara .prBadge { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.40); color: #a78bfa; }

#packResult.rc-evento .prBadge { background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.40); color: #34d399; }

/* ── Resumen por fase ───────────────────────────────────── */
.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.summary-stat {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 12px 10px 10px;
  text-align: center;
}
.summary-stat .stat-val {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, var(--n3), var(--n1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.summary-stat .stat-lbl {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
}
.summary-stat span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.summary-stat b { display: block; font-size: 22px; font-weight: 900; background: linear-gradient(90deg, var(--n3), var(--n1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.phase-breakdown { display: flex; flex-direction: column; gap: 10px; }
.phase-progress {}
.phase-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 600;
}

/* ── Modales ────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .65);
  z-index: 50;
  backdrop-filter: blur(6px);
}
.modal.show { display: flex; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modalBox {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: rgba(10, 10, 22, .96);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 32px 120px rgba(0, 0, 0, .70), inset 0 1px 0 rgba(255,255,255,.06);
  animation: modalIn .22s cubic-bezier(.22,1,.36,1) forwards;
}

.modalTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.modalTitle { font-weight: 900; font-size: 15px; letter-spacing: -.1px; }

.close {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 7px 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: border-color .15s, color .15s, background .15s;
}
.close:hover { border-color: rgba(255,255,255,.22); color: var(--text); background: rgba(255,255,255,.10); }

.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 0;
}

/* ── Imagen grande ──────────────────────────────────────── */
.bigImg {
  margin-top: 14px;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .40);
}

/* ── Probabilidades tabla ───────────────────────────────── */
.odds-table { width: 100%; }
.odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 13px;
}
.odds-rarity {
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.odds-rarity.rc-comun      { background: rgba(148,163,184,.15); color: var(--rc-comun); }
.odds-rarity.rc-especial   { background: rgba(56,189,248,.15);  color: var(--rc-especial); }
.odds-rarity.rc-rara       { background: rgba(167,139,250,.15); color: var(--rc-rara); }
.odds-rarity.rc-legendaria { background: rgba(251,191,36,.15);  color: var(--rc-legendaria); }
.odds-rarity.rc-shiny      { background: rgba(244,114,182,.15); color: var(--rc-shiny); }
.odds-rarity.rc-ex         { background: rgba(129,140,248,.15); color: var(--rc-ex); }
.odds-rarity.rc-evento     { background: rgba(52,211,153,.15);  color: var(--rc-evento); }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(10, 10, 24, .92);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 10px 20px;
  border-radius: 999px;
  color: var(--text);
  display: none;
  z-index: 9900;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transition: transform .2s ease, opacity .2s ease;
}
.toast.show {
  display: block;
  animation: toastIn .22s ease forwards;
}
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(12px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
.toast.toast-ok  { border-color: rgba(34,197,94,.45); color: #86efac; box-shadow: 0 8px 30px rgba(34,197,94,.15); }
.toast.toast-err { border-color: rgba(239,68,68,.45); color: #fca5a5; box-shadow: 0 8px 30px rgba(239,68,68,.15); }
.toast.toast-info { }

/* ── Admin: layout ──────────────────────────────────────── */
header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 1;
}
.brand .muted { color: var(--muted); font-weight: 400; }

main.container { padding-top: 24px; }

.card h2 { font-size: 15px; font-weight: 800; margin: 0 0 14px; }
.gap  { gap: 10px; }
.wrap { flex-wrap: wrap; }
.inp {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline: none;
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s;
}
.inp:focus { border-color: rgba(124,77,255,.55); box-shadow: 0 0 0 3px rgba(124,77,255,.12); }
.sel {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.muted { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

/* Tabla admin */
.tableWrap { width: 100%; overflow: auto; }
.adminTable { width: 100%; border-collapse: collapse; }
.adminTable th, .adminTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
  text-align: left;
  font-size: 13px;
}
.adminTable thead th {
  position: sticky;
  top: 0;
  background: rgba(10, 10, 22, .96);
  backdrop-filter: blur(8px);
  font-weight: 700;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .pills  { justify-content: flex-start; }
  .filters-row { flex-direction: column; }
  .filters-row select { min-width: unset; }
  .sidebar-card { position: static; }
  .cardGrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .packAnim { height: 150px; }
  .pack-ring-3 { display: none; }
}
@media (max-width: 480px) {
  .cardGrid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
  .tile { padding: 6px 6px 8px; }
  .modalBox { padding: 14px; border-radius: 18px; }
  .prInner { padding: 16px; }
  .summary-stats { grid-template-columns: repeat(3,1fr); gap: 6px; }
}