/* =========================================================================
 * meta.css — App-shell y pantallas de meta-juego (hub, tienda, ligas, perfil…)
 * Estilo premium "mobile esport": profundidad, glossy, glass, insignias.
 * ========================================================================= */

/* ----------------------------- BARRA SUPERIOR --------------------------- */
.shell-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + var(--safe-t)) 12px 8px;
  background: linear-gradient(180deg, rgba(10,11,26,0.96), rgba(10,11,26,0.55) 70%, transparent);
  pointer-events: none;
}
.shell-top > * { pointer-events: auto; }

.top-perfil {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: linear-gradient(180deg, rgba(10,12,28,0.75), rgba(10,12,28,0.5));
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-pill);
  padding: 4px 12px 4px 4px; box-shadow: var(--sombra-1);
}
.top-avatar {
  width: 38px; height: 38px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--g-violeta); display: block; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,0.25);
}
.top-avatar svg { width: 100%; height: 100%; }
.top-meta { display: flex; flex-direction: column; gap: 3px; min-width: 64px; }
.top-nivel-num { font-family: var(--fuente-display); font-weight: 700; font-size: 13px; color: var(--c-texto); line-height: 1; }
.top-nivel-num::before { content: 'Nv '; color: var(--c-texto-3); font-size: 10px; }
.top-xp { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.top-xp i { display: block; height: 100%; width: 0%; background: var(--g-cian); border-radius: 999px; transition: width 0.5s ease; }

.top-monedas { display: flex; gap: 8px; }
.px-coin { cursor: pointer; }

/* ----------------------------- NAV INFERIOR ----------------------------- */
.shell-nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 6px 8px calc(6px + var(--safe-b));
  background: linear-gradient(0deg, rgba(10,11,26,0.98), rgba(10,11,26,0.82) 70%, rgba(10,11,26,0));
  border-top: 1px solid rgba(255,255,255,0.07);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 8px 4px 4px;
  color: var(--c-texto-3); font-family: var(--fuente-ui); font-weight: 700; font-size: 11px;
  border-radius: var(--r-m); transition: color 0.15s, transform 0.1s;
}
.nav-ico { font-size: 22px; filter: grayscale(0.5) opacity(0.7); transition: filter 0.15s, transform 0.15s; }
/* Iconos SVG del sistema de arte (ART.icono) embebidos en la chrome persistente. */
/* Base: cualquier icono inline se ajusta al tamaño de letra de su contexto. */
.z-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; }
.nav-ico .z-ico { width: 24px; height: 24px; display: block; }
.px-coin .ico .z-ico { width: 22px; height: 22px; display: block; }
.modo-chip span .z-ico, .hub-misiones-ico .z-ico { width: 18px; height: 18px; display: block; }
/* Variante de hub 'stats' (CONFIG.ui.hub='stats'): avatar pequeño + tarjetas. */
.hub-modo-stats .hub-personaje { transform: scale(0.6); transform-origin: center top; margin-bottom: -28px; }
.hub-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; max-width: 320px; margin: 4px auto 0; }
.hub-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.hub-stat .hs-ico { font-size: 20px; line-height: 1; height: 22px; display: grid; place-items: center; }
.hub-stat b { font-family: var(--fuente-display, system-ui), sans-serif; font-size: 19px; color: #fff; }
.hub-stat .hs-lab { font-size: 11px; color: var(--c-texto-3, #9aa0c8); font-weight: 700; }
.nav-btn.activo { color: var(--c-oro); }
.nav-btn.activo .nav-ico { filter: none; transform: translateY(-2px) scale(1.12); }
.nav-btn:active { transform: scale(0.92); }

/* --------------------------- PANTALLAS META ----------------------------- */
.pantalla.meta {
  display: block; align-items: initial; justify-content: initial;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(66px + var(--safe-t)) 14px calc(84px + var(--safe-b));
  /* Translúcido: deja ver el fondo animado con una viñeta para contraste. */
  background: radial-gradient(130% 80% at 50% 16%, transparent 34%, rgba(8,9,20,0.55));
}
.pantalla.meta::-webkit-scrollbar { width: 0; }
.meta-titulo { font-family: var(--fuente-display); font-size: 24px; font-weight: 700; margin: 4px 0 2px; }
.meta-sub { color: var(--c-texto-2); font-size: 13px; margin: 0 0 14px; }
.meta-h3 { font-family: var(--fuente-display); font-size: 15px; font-weight: 600; color: var(--c-texto-2); margin: 18px 2px 10px; }

/* --------------------------------- HUB ---------------------------------- */
#pantalla-hub { display: flex; flex-direction: column; }
.hub-escena {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto; margin-top: 6px;
}
.hub-liga {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: linear-gradient(180deg, rgba(26,30,61,0.95), rgba(18,21,46,0.95));
  border: var(--borde-glass); border-radius: var(--r-pill);
  padding: 5px 14px 5px 6px; box-shadow: var(--sombra-2);
}
.hub-liga-ico {
  width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: 22px; background: var(--g-oro); box-shadow: var(--brillo-int);
}
.hub-liga-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hub-liga-info b { font-family: var(--fuente-display); font-weight: 600; font-size: 14px; }
.hub-liga-info i { font-style: normal; font-size: 12px; color: var(--c-oro); }

.hub-personaje {
  width: min(78vw, 320px); height: min(46vh, 360px); margin: 8px auto 0;
  display: grid; place-items: center; cursor: pointer;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45));
}
.hub-personaje svg { width: 100%; height: 100%; }
.hub-nombre {
  font-family: var(--fuente-display); font-weight: 700; font-size: 22px; margin-top: -6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.hub-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.btn-jugar {
  --col1: #ffe27a; --col2: #ffcf2f; --col3: #ff8f1c;
  font-size: 26px; letter-spacing: 1px; position: relative; overflow: hidden;
  animation: latido 2.4s ease-in-out infinite;
}
.btn-jugar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 200% 100%; animation: brillo-pasa 3.2s linear infinite;
}
.hub-modos { display: flex; gap: 8px; }
.modo-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px; border-radius: var(--r-m); cursor: pointer;
  background: var(--g-superficie); border: var(--borde-glass);
  color: var(--c-texto-2); font-family: var(--fuente-ui); font-weight: 700; font-size: 13px;
}
.modo-chip span { font-size: 16px; }
.modo-chip.sel { background: var(--g-violeta); color: #fff; border-color: transparent; box-shadow: var(--sombra-violeta); }
.hub-dif { display: flex; gap: 8px; justify-content: center; }
.dif-chip {
  flex: 1; max-width: 120px; padding: 9px 0; border-radius: var(--r-m); cursor: pointer;
  background: var(--g-superficie); border: var(--borde-glass);
  color: var(--c-texto-2); font-family: var(--fuente-ui); font-weight: 700; font-size: 13px;
}
.dif-chip.sel { background: var(--g-oro); color: var(--c-tinta); border-color: transparent; }
.hub-diaria {
  position: absolute; right: 14px; top: calc(112px + var(--safe-t)); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--g-verde); color: #06280f; border: none; border-radius: var(--r-pill);
  padding: 8px 13px 8px 10px; font-family: var(--fuente-display); font-weight: 700; font-size: 12px;
  box-shadow: var(--sombra-2); animation: flotar 2s ease-in-out infinite;
}
.hub-diaria-ico { font-size: 18px; animation: latido 1.2s infinite; }

/* -------------------------------- TIENDA -------------------------------- */
.cofres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cofre-card {
  position: relative; border-radius: var(--r-l); padding: 16px 12px 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12); overflow: hidden; text-align: center;
  background: linear-gradient(180deg, rgba(35,40,80,0.6), rgba(20,23,48,0.6));
  box-shadow: var(--sombra-2);
}
.cofre-card::before { content: ''; position: absolute; inset: 0; opacity: 0.18; background: var(--cofre-g, transparent); }
.cofre-ico { font-size: 52px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); animation: flotar 3s ease-in-out infinite; }
.cofre-nom { font-family: var(--fuente-display); font-weight: 700; font-size: 15px; margin: 6px 0 8px; position: relative; }
.cofre-precio {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  background: rgba(0,0,0,0.35); border-radius: var(--r-pill); padding: 5px 12px;
  font-family: var(--fuente-display); font-weight: 600; font-size: 14px; position: relative;
}

.cosm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cosm-card {
  position: relative; border-radius: var(--r-m); padding: 8px 6px 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(35,40,80,0.55), rgba(20,23,48,0.55));
  border: 2px solid var(--rar, #444a73); text-align: center;
}
.cosm-prev { width: 100%; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: rgba(0,0,0,0.25); display: grid; place-items: center; }
.cosm-prev svg { width: 92%; height: 92%; }
.cosm-nom { font-family: var(--fuente-ui); font-weight: 700; font-size: 11px; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cosm-precio { font-family: var(--fuente-display); font-weight: 600; font-size: 12px; color: var(--c-oro); }
.cosm-card.poseido .cosm-precio { color: var(--c-verde); }
.cosm-rar {
  position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-pill); background: var(--rar); color: #0a0b1a; letter-spacing: 0.4px;
}

.packs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack-card {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-m); cursor: pointer;
  background: linear-gradient(180deg, rgba(35,40,80,0.55), rgba(20,23,48,0.55)); border: var(--borde-glass);
}
.pack-ico { font-size: 30px; }
.pack-info { display: flex; flex-direction: column; }
.pack-info b { font-family: var(--fuente-display); font-weight: 700; font-size: 15px; }
.pack-info span { font-size: 11px; color: var(--c-texto-3); }

/* -------------------------------- LIGAS --------------------------------- */
.liga-tu {
  border-radius: var(--r-l); padding: 18px 16px; margin-bottom: 6px; text-align: center;
  background: linear-gradient(180deg, rgba(35,40,80,0.7), rgba(20,23,48,0.7)); border: var(--borde-glass);
  box-shadow: var(--sombra-2);
}
.liga-tu-ico { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.liga-tu-nom { font-family: var(--fuente-display); font-weight: 700; font-size: 22px; margin: 6px 0 2px; }
.liga-tu-trof { color: var(--c-oro); font-family: var(--fuente-display); font-weight: 600; font-size: 16px; }
.liga-tu-barra { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12); margin: 12px 0 6px; overflow: hidden; }
.liga-tu-barra i { display: block; height: 100%; border-radius: 999px; background: var(--g-oro); }
.liga-tu-faltan { font-size: 12px; color: var(--c-texto-3); }

.liga-escalera { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.liga-paso {
  flex: 0 0 auto; width: 76px; border-radius: var(--r-m); padding: 12px 6px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); opacity: 0.55;
}
.liga-paso.actual { opacity: 1; border-color: var(--c-oro); box-shadow: 0 0 0 2px rgba(255,210,63,0.3); }
.liga-paso.lograda { opacity: 0.85; }
.liga-paso-ico { font-size: 26px; }
.liga-paso-nom { font-family: var(--fuente-display); font-weight: 600; font-size: 11px; margin-top: 4px; }
.liga-paso-min { font-size: 10px; color: var(--c-texto-3); }

.rank-lista { list-style: none; padding: 0; margin: 6px 0; counter-reset: pos; }
.rank-lista li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px;
  border-radius: var(--r-m); background: rgba(255,255,255,0.04);
}
.rank-lista li.yo { background: linear-gradient(90deg, rgba(255,210,63,0.18), rgba(255,210,63,0.04)); border: 1px solid rgba(255,210,63,0.4); }
.rank-pos { width: 26px; text-align: center; font-family: var(--fuente-display); font-weight: 700; color: var(--c-texto-2); }
.rank-pos.top { color: var(--c-oro); }
.rank-av { width: 34px; height: 34px; border-radius: var(--r-pill); overflow: hidden; background: var(--g-violeta); flex: 0 0 auto; }
.rank-av svg { width: 100%; height: 100%; }
.rank-nom { flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-pts { font-family: var(--fuente-display); font-weight: 700; color: var(--c-oro); font-variant-numeric: tabular-nums; }

/* -------------------------------- PERFIL -------------------------------- */
.perfil-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.perfil-avatar {
  width: 96px; height: 96px; border-radius: var(--r-l); overflow: hidden; flex: 0 0 auto;
  background: var(--g-violeta); border: 2px solid rgba(255,255,255,0.18); box-shadow: var(--sombra-2);
}
.perfil-avatar svg { width: 100%; height: 100%; }
.perfil-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.perfil-nombre {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-s);
  color: var(--c-texto); font-family: var(--fuente-display); font-weight: 700; font-size: 20px;
  padding: 6px 10px; width: 100%; text-transform: uppercase;
}
.perfil-nombre:focus { outline: none; border-color: var(--c-oro); }
.perfil-nivel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-texto-2); }
.perfil-nivel span:first-child { font-family: var(--fuente-display); font-weight: 600; white-space: nowrap; }
.perfil-xp { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.perfil-xp i { display: block; height: 100%; background: var(--g-cian); border-radius: 999px; }
.perfil-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.perfil-stat { background: rgba(255,255,255,0.04); border-radius: var(--r-m); padding: 12px; display: flex; align-items: center; gap: 10px; }
.perfil-stat .e { font-size: 24px; }
.perfil-stat .v { font-family: var(--fuente-display); font-weight: 700; font-size: 18px; color: var(--c-oro); }
.perfil-stat .l { font-size: 11px; color: var(--c-texto-3); }

/* ------------------------------ VESTUARIO ------------------------------- */
.panel-vestuario { max-width: 440px; padding: 16px; }
.vest-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vest-cab h2 { margin: 0; }
.vest-preview { width: 200px; height: 220px; margin: 0 auto 12px; }
.vest-preview svg { width: 100%; height: 100%; }
.vest-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.vest-tab {
  flex: 1; padding: 9px 4px; border-radius: var(--r-m); cursor: pointer; text-align: center;
  background: var(--g-superficie); border: var(--borde-glass); color: var(--c-texto-2);
  font-family: var(--fuente-ui); font-weight: 700; font-size: 12px;
}
.vest-tab.sel { background: var(--g-violeta); color: #fff; border-color: transparent; }
.vest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 38vh; overflow-y: auto; padding: 2px; }
.vest-item {
  position: relative; aspect-ratio: 1; border-radius: var(--r-m); cursor: pointer;
  background: rgba(0,0,0,0.25); border: 2px solid var(--rar, #444a73); display: grid; place-items: center;
}
.vest-item svg { width: 86%; height: 86%; }
.vest-item.sel { border-color: var(--c-oro); box-shadow: 0 0 0 2px rgba(255,210,63,0.4); }
.vest-item.bloq { opacity: 0.4; }
.vest-item .candado { position: absolute; bottom: 4px; right: 6px; font-size: 14px; }
.vest-item .quitar { font-size: 26px; color: var(--c-texto-3); }

/* -------------------------------- MODALES ------------------------------- */
.modal {
  position: absolute; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,6,15,0.82); backdrop-filter: blur(6px);
}
.modal-card {
  width: 100%; max-width: 360px; text-align: center; padding: 24px 20px;
  border-radius: var(--r-xl); background: linear-gradient(180deg, #232850, #15183a);
  border: var(--borde-glass); box-shadow: var(--sombra-3); animation: pop-in 0.32s cubic-bezier(.2,.9,.3,1.2) both;
}
.modal-card h2 { margin: 0 0 6px; }
.cofre-abrir-ico { font-size: 84px; margin: 10px 0; animation: latido 1.1s infinite; }
.botin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; margin: 16px 0; }
.botin-item {
  border-radius: var(--r-m); padding: 8px; border: 2px solid var(--rar, #444);
  background: rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: pop-in 0.4s both;
}
.botin-item svg { width: 54px; height: 54px; }
.botin-item .n { font-size: 10px; font-weight: 700; }
.botin-item .dup { font-size: 10px; color: var(--c-oro); }
.diaria-dias { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.diaria-dia {
  width: 40px; padding: 8px 2px; border-radius: var(--r-s); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); font-size: 11px;
}
.diaria-dia.hoy { background: var(--g-oro); color: var(--c-tinta); border-color: transparent; transform: scale(1.08); }
.diaria-dia.cobrado { opacity: 0.45; }
.diaria-dia b { display: block; font-family: var(--fuente-display); font-size: 13px; }

/* --------------------------------- TOAST -------------------------------- */
.toast {
  position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%);
  z-index: var(--z-toast); background: rgba(10,12,28,0.96); border: var(--borde-glass);
  color: var(--c-texto); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px;
  box-shadow: var(--sombra-2); animation: pop-in 0.25s both; max-width: 86vw; text-align: center;
}

/* Burst de monedas (celebración) */
.coin-fx { position: absolute; z-index: var(--z-toast); pointer-events: none; font-size: 22px; animation: coinfly 0.9s ease-out forwards; }
@keyframes coinfly { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-90px) scale(1.1); opacity: 0; } }

/* Recompensas en la pantalla de fin */
.fin-recompensas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
.fin-rec { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: var(--borde-sutil); border-radius: var(--r-pill); padding: 7px 15px; animation: pop-in 0.4s both; }
.fin-rec .e { font-size: 18px; }
.fin-rec b { font-family: var(--fuente-display); font-weight: 700; color: var(--c-oro); font-size: 16px; }

/* Botón flotante de misiones (hub, abajo-izquierda) */
.hub-misiones {
  position: absolute; right: 14px; top: calc(66px + var(--safe-t)); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--g-violeta); color: #fff; border: none; border-radius: var(--r-pill);
  padding: 8px 13px 8px 10px; font-family: var(--fuente-display); font-weight: 700; font-size: 12px;
  box-shadow: var(--sombra-2);
}
.hub-misiones-ico { font-size: 16px; }
.hub-badge {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: var(--r-pill);
  background: var(--c-rojo); border: 2px solid #15183a; box-shadow: 0 0 8px rgba(255,93,93,0.85);
  animation: latido 1s infinite;
}

/* Modal de misiones */
.mis-lista { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.mis-row { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.05); border-radius: var(--r-m); padding: 10px; }
.mis-row.cobrada { opacity: 0.5; }
.mis-ico { font-size: 26px; flex: 0 0 auto; }
.mis-mid { flex: 1; min-width: 0; }
.mis-txt { font-family: var(--fuente-ui); font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.mis-bar { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12); overflow: hidden; }
.mis-bar i { display: block; height: 100%; background: var(--g-verde); border-radius: var(--r-pill); }
.mis-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.mis-prog { font-family: var(--fuente-display); font-weight: 600; font-size: 12px; color: var(--c-texto-3); }
.mis-rec { font-family: var(--fuente-display); font-weight: 600; font-size: 12px; color: var(--c-oro); white-space: nowrap; }
.mis-claim { font-size: 12px; padding: 8px 12px; border-radius: var(--r-m); white-space: nowrap; }
.mis-ok { color: var(--c-verde); font-size: 20px; font-weight: 800; }

/* Repeticiones (modal) */
.rep-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 46vh; overflow-y: auto; }
.rep-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border-radius: var(--r-m); padding: 10px 12px; text-align: left; }
.rep-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep-info b { font-family: var(--fuente-display); font-weight: 700; font-size: 14px; }
.rep-info span { font-size: 11px; color: var(--c-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-ver { font-size: 13px; padding: 9px 14px; flex: 0 0 auto; }

/* Flash de pantalla al recibir/lanzar un ataque pesado (golpe visceral) */
#flash-juego { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
#flash-juego.flash-rojo { background: radial-gradient(125% 85% at 50% 50%, transparent 48%, rgba(255,45,45,0.6)); animation: flash-golpe 0.42s ease-out; }
#flash-juego.flash-oro  { background: radial-gradient(125% 85% at 50% 50%, transparent 52%, rgba(255,205,70,0.5)); animation: flash-golpe 0.42s ease-out; }
@keyframes flash-golpe { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* ----------------------- PANTALLA VS (combate esport) ------------------ */
#pantalla-vs { overflow: hidden; }
.vs-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, transparent 62%); opacity: 0; pointer-events: none; z-index: 5; }
.vs-lado { position: absolute; width: 62vw; max-width: 300px; text-align: center; z-index: 2; }
.vs-izq { left: -5%; top: 11%; }
.vs-der { right: -5%; bottom: 13%; }
.vs-av { width: 100%; aspect-ratio: 1 / 1; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.6)); }
.vs-av svg { width: 100%; height: 100%; }
.vs-chapa { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 18px; border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(26,30,61,0.96), rgba(18,21,46,0.96)); border: var(--borde-glass); box-shadow: var(--sombra-2); margin-top: -6px; }
.vs-nom { font-family: var(--fuente-display); font-weight: 700; font-size: 20px; }
.vs-izq .vs-nom { color: var(--c-cian); }
.vs-der .vs-nom { color: var(--c-rojo); }
.vs-sub { font-size: 12px; color: var(--c-texto-2); }
.vs-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 6;
  font-family: var(--fuente-display); font-weight: 700; font-size: 23vw; line-height: 1; color: #fff;
  -webkit-text-stroke: 4px #ff5d5d; text-shadow: 0 0 32px rgba(255,93,93,0.9), 0 8px 0 rgba(0,0,0,0.4);
}
.vs-lucha {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); z-index: 7;
  font-family: var(--fuente-display); font-weight: 700; font-size: 30px; color: var(--c-oro);
  text-shadow: 0 0 18px rgba(255,210,63,0.85), 0 3px 0 rgba(0,0,0,0.4); letter-spacing: 1px;
}
#pantalla-vs.vs-anim .vs-izq   { animation: vs-izq 0.5s cubic-bezier(0.16,1,0.3,1) both; }
#pantalla-vs.vs-anim .vs-der   { animation: vs-der 0.5s cubic-bezier(0.16,1,0.3,1) both; }
#pantalla-vs.vs-anim .vs-flash { animation: vs-flash 0.55s ease-out 0.45s both; }
#pantalla-vs.vs-anim .vs-badge { animation: vs-slam 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.42s both; }
#pantalla-vs.vs-anim .vs-lucha { animation: vs-lucha 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.0s both; }
@keyframes vs-izq { from { transform: translateX(-130%) rotate(-6deg); opacity: 0; } to { transform: translateX(0) rotate(-3deg); opacity: 1; } }
@keyframes vs-der { from { transform: translateX(130%) rotate(6deg); opacity: 0; } to { transform: translateX(0) rotate(3deg); opacity: 1; } }
@keyframes vs-slam { 0% { transform: translate(-50%,-50%) scale(3.4) rotate(-12deg); opacity: 0; } 55% { transform: translate(-50%,-50%) scale(0.82) rotate(3deg); opacity: 1; } 78% { transform: translate(-50%,-50%) scale(1.12) rotate(-2deg); } 100% { transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes vs-flash { 0% { opacity: 0; } 40% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes vs-lucha { from { opacity: 0; transform: translateX(-50%) scale(0.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* Personaje en la pantalla de fin (celebra / derrotado) */
.fin-personaje { width: 108px; height: 116px; margin: -4px auto 2px; }
.fin-personaje svg { width: 100%; height: 100%; }
.fin-personaje.fin-gano { animation: fin-gano 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }
.fin-personaje.fin-pierde { animation: fin-pierde 0.6s ease-out both; filter: grayscale(0.55) brightness(0.72); }
@keyframes fin-gano { 0% { transform: scale(0.4) translateY(40px); opacity: 0; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fin-pierde { 0% { transform: translateY(-16px); opacity: 0; } 100% { transform: translateY(0) rotate(7deg); opacity: 0.85; } }

/* ----------------------- PROFUNDIDAD / GLOW PREMIUM -------------------- */
.hub-personaje { filter: drop-shadow(0 18px 26px rgba(0,0,0,0.5)) drop-shadow(0 0 36px rgba(151,117,250,0.34)); }
.hub-nombre { letter-spacing: 0.5px; }
.btn-jugar { box-shadow: 0 6px 0 rgba(160,90,0,0.42), 0 12px 34px rgba(255,159,28,0.55), var(--brillo-int); }
.hub-liga-ico { box-shadow: var(--brillo-int), 0 0 16px rgba(255,200,60,0.55); }
.cofre-ico { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 14px rgba(255,255,255,0.18)); }
.perfil-avatar, .rank-av { box-shadow: 0 0 18px rgba(120,90,220,0.42), var(--sombra-2); }
.modo-chip.sel { box-shadow: var(--sombra-violeta), 0 0 18px rgba(151,117,250,0.45); }
.dif-chip.sel { box-shadow: var(--sombra-oro), 0 0 16px rgba(255,180,40,0.4); }
.liga-tu-ico { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)) drop-shadow(0 0 18px rgba(255,210,63,0.32)); }
.cosm-card, .cofre-card, .pack-card { box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255,255,255,0.08); }
.meta-titulo { text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.shell-top, .shell-nav { backdrop-filter: blur(10px); }
.px-coin, .top-perfil, .hub-liga { backdrop-filter: blur(8px); }