/* ============================================================
   pass.css — Pase de Temporada + banner de eventos
   Mobile-first, GPU-friendly, respeta prefers-reduced-motion
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   BANNER DE EVENTOS
   ════════════════════════════════════════════════════════════ */
.event-banner-slot { max-width: 1000px; margin: 0 auto 1.2rem; padding: 0 1rem; }

.ev-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius, 14px);
  /* Fallback para navegadores sin color-mix (Safari < 16.2, WebView antiguos):
     se ve correcto, solo pierde el tinte del color del evento. */
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(100deg, rgba(255,255,255,0.07) 0%, rgba(13,13,36,0.85) 55%);
  box-shadow: 0 0 22px rgba(0,0,0,0.35);
}
@supports (border-color: color-mix(in srgb, red 50%, transparent)) {
  .ev-banner {
    border-color: color-mix(in srgb, var(--ev-color, #f5c842) 45%, transparent);
    background:
      linear-gradient(100deg,
        color-mix(in srgb, var(--ev-color, #f5c842) 14%, transparent) 0%,
        rgba(13,13,36,0.85) 55%);
    box-shadow: 0 0 22px color-mix(in srgb, var(--ev-color, #f5c842) 18%, transparent);
  }
}
.ev-banner + .ev-banner { margin-top: 0.6rem; }

.ev-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.1) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ev-sweep 4.5s ease-in-out infinite;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .ev-glow {
    background: linear-gradient(100deg, transparent 20%,
                color-mix(in srgb, var(--ev-color, #f5c842) 22%, transparent) 50%, transparent 80%);
  }
}
@keyframes ev-sweep { 0%,55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.ev-icon {
  font-size: 1.7rem; flex-shrink: 0;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .ev-icon { background: color-mix(in srgb, var(--ev-color, #f5c842) 16%, transparent); }
}
.ev-body { flex: 1; min-width: 0; position: relative; }
.ev-name {
  font-family: var(--font-d, serif); font-weight: 800; font-size: 0.98rem;
  color: var(--ev-color, #f5c842); letter-spacing: 0.02em;
}
.ev-msg { font-size: 0.78rem; color: var(--text); opacity: 0.85; margin-top: 0.15rem; }
.ev-effects { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.ev-chip {
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .ev-chip {
    background: color-mix(in srgb, var(--ev-color, #f5c842) 18%, transparent);
    border-color: color-mix(in srgb, var(--ev-color, #f5c842) 35%, transparent);
  }
}
.ev-time { text-align: right; flex-shrink: 0; position: relative; }
.ev-time-l { display: block; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ev-time-v {
  display: block; font-family: var(--font-u, sans-serif); font-weight: 800;
  font-size: 0.95rem; color: var(--ev-color, #f5c842); font-variant-numeric: tabular-nums;
}
.ev-banner.ev-soon { opacity: 0.75; }
.ev-banner.ev-soon .ev-glow { display: none; }

@media (max-width: 560px) {
  .ev-banner { flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 0.85rem; }
  .ev-icon { width: 2.2rem; height: 2.2rem; font-size: 1.4rem; }
  .ev-time { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 0.4rem; }
  .ev-time-l { font-size: 0.6rem; }
  .ev-time-v { font-size: 0.85rem; }
}

/* ════════════════════════════════════════════════════════════
   PÁGINA DEL PASE
   ════════════════════════════════════════════════════════════ */
.pass-page { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* ── Cabecera ── */
.bp-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius, 14px);
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(160deg, rgba(26,79,255,0.12), rgba(13,13,36,0.9) 60%);
  padding: 1.2rem 1.2rem 1.1rem;
  margin-bottom: 1.6rem;
}
.bp-hero.is-gold {
  border-color: rgba(245,200,66,0.45);
  background: linear-gradient(160deg, rgba(245,200,66,0.14), rgba(13,13,36,0.92) 60%);
  box-shadow: 0 0 30px rgba(245,200,66,0.14);
}
.bp-hero-glow {
  position: absolute; top: -60%; right: -20%; width: 60%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(26,79,255,0.18), transparent 70%);
  pointer-events: none;
}
.bp-hero.is-gold .bp-hero-glow { background: radial-gradient(ellipse at center, rgba(245,200,66,0.18), transparent 70%); }

.bp-hero-top {
  position: relative; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
}
.bp-season { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bp-season-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.bp-season-name {
  font-family: var(--font-d, serif); font-size: 1.5rem; font-weight: 800;
  color: var(--text); line-height: 1.1;
}
.bp-season-ends { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }

.bp-level-badge {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px;
  display: grid; place-items: center; align-content: center;
  background: linear-gradient(150deg, rgba(26,79,255,0.28), rgba(26,79,255,0.08));
  border: 1px solid rgba(26,79,255,0.5);
  box-shadow: 0 0 20px rgba(26,79,255,0.25);
}
.bp-level-badge.gold {
  background: linear-gradient(150deg, rgba(245,200,66,0.3), rgba(245,200,66,0.08));
  border-color: rgba(245,200,66,0.6);
  box-shadow: 0 0 22px rgba(245,200,66,0.3);
}
.bp-level-n {
  font-family: var(--font-u, sans-serif); font-size: 2rem; font-weight: 800;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.bp-level-l { font-size: 0.58rem; letter-spacing: 0.16em; color: var(--muted); margin-top: 0.1rem; }

/* ── Barra de XP ── */
.bp-xp { position: relative; margin-top: 1.1rem; }
.bp-xp-bar-wrap {
  height: 14px; border-radius: 999px; background: rgba(255,255,255,0.08);
  overflow: hidden; border: 1px solid rgba(255,255,255,0.06);
}
.bp-xp-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue, #1a4fff), #22d3ee 55%, var(--gold, #f5c842));
  box-shadow: 0 0 14px rgba(34,211,238,0.4);
  transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1);
}
.bp-xp-nums {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; margin-top: 0.45rem; flex-wrap: wrap;
}
.bp-xp-cur { font-weight: 800; font-size: 0.92rem; color: var(--text); font-variant-numeric: tabular-nums; }
.bp-xp-next, .bp-xp-max { font-size: 0.76rem; color: var(--muted); }
.bp-xp-max { color: var(--gold); font-weight: 700; }

.bp-event-tag {
  position: relative; display: inline-block; margin-top: 0.8rem;
  font-size: 0.74rem; font-weight: 700; color: #0b0b0c;
  background: linear-gradient(90deg, #22d3ee, var(--gold, #f5c842));
  padding: 0.28rem 0.7rem; border-radius: 999px;
}

/* ── Botones ── */
.bp-actions {
  position: relative; display: flex; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.bp-claim-btn, .bp-gold-btn {
  flex: 1 1 220px; min-height: 46px; padding: 0.7rem 1rem;
  border-radius: 12px; font-weight: 800; font-size: 0.88rem;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: var(--muted);
  transition: transform var(--transition, .2s), box-shadow var(--transition, .2s), background var(--transition, .2s);
}
.bp-claim-btn.ready {
  background: linear-gradient(90deg, #34d399, #22d3ee);
  color: #04150f; border-color: transparent;
  box-shadow: 0 0 20px rgba(52,211,153,0.4);
  animation: bp-pulse 2.2s ease-in-out infinite;
}
.bp-claim-btn.ready:hover, .bp-gold-btn:hover { transform: translateY(-2px); }
.bp-claim-btn:disabled { cursor: not-allowed; opacity: 0.55; }
@keyframes bp-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(52,211,153,0.35); }
  50%      { box-shadow: 0 0 28px rgba(52,211,153,0.6); }
}
.bp-gold-btn {
  background: linear-gradient(90deg, var(--gold, #f5c842), #f59e0b);
  color: #1a1200; border-color: transparent;
  box-shadow: 0 0 18px rgba(245,200,66,0.3);
}
.bp-gold-owned {
  flex: 1 1 220px; display: grid; place-items: center; min-height: 46px;
  border-radius: 12px; font-weight: 800; font-size: 0.85rem;
  color: var(--gold); border: 1px dashed rgba(245,200,66,0.5);
  background: rgba(245,200,66,0.07);
}

/* ── Track de recompensas ── */
.bp-track-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; margin-bottom: 0.7rem; flex-wrap: wrap;
}
.bp-track-title { font-family: var(--font-d, serif); font-size: 1.05rem; color: var(--text); font-weight: 700; }
.bp-track-hint { font-size: 0.72rem; color: var(--muted); }

.bp-track {
  display: flex; gap: 0.55rem; overflow-x: auto; overflow-y: hidden;
  padding: 0.2rem 0.2rem 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.bp-track::-webkit-scrollbar { height: 8px; }
.bp-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }
.bp-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }

.bp-node {
  flex: 0 0 auto; width: 82px; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.bp-node-lvl {
  text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums; padding: 0.15rem 0;
}
.bp-node.reached .bp-node-lvl { color: var(--text); }
.bp-node.milestone .bp-node-lvl { color: var(--gold); }

.bp-cell {
  position: relative; height: 70px; border-radius: 12px;
  display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 0.78rem; font-weight: 700; color: var(--muted);
  transition: border-color var(--transition, .2s), background var(--transition, .2s);
}
.bp-cell-r { padding: 0 0.2rem; line-height: 1.25; word-break: break-word; }
.bp-cell.free.on { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.09); color: var(--text); }
.bp-cell.gold.on { border-color: rgba(245,200,66,0.55); background: rgba(245,200,66,0.1);  color: var(--text); }
.bp-cell.gold.locked { opacity: 0.4; }
.bp-cell.claimed { opacity: 0.5; }
.bp-cell.pending {
  animation: bp-glow 2s ease-in-out infinite;
}
@keyframes bp-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 16px rgba(52,211,153,0.45); }
}
.bp-cell.gold.pending { animation-name: bp-glow-gold; }
@keyframes bp-glow-gold {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 16px rgba(245,200,66,0.5); }
}
.bp-cell-tick {
  position: absolute; top: 4px; right: 6px; font-size: 0.7rem; color: #34d399;
}
.bp-cell-lock { position: absolute; top: 4px; right: 6px; font-size: 0.65rem; opacity: 0.7; }
.bp-cell-dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399;
}
.bp-cell.gold .bp-cell-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ── Info ── */
.bp-info {
  display: grid; gap: 0.9rem; margin-top: 1.6rem;
  grid-template-columns: 1fr;
}
.bp-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius, 14px);
  padding: 1rem 1.1rem;
}
.bp-info-title { font-weight: 800; font-size: 0.92rem; color: var(--text); margin-bottom: 0.6rem; }
.bp-info-list { list-style: none; margin: 0; padding: 0; }
.bp-info-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.32rem 0; font-size: 0.8rem; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bp-info-list li:last-child { border-bottom: 0; }
.bp-info-list b { color: var(--gold); font-variant-numeric: tabular-nums; }
.bp-info-text { font-size: 0.8rem; color: var(--muted); line-height: 1.55; margin: 0 0 0.5rem; }
.bp-info-text b { color: var(--gold); }
.bp-info-dim { opacity: 0.75; margin-bottom: 0; }

/* ── Widget de home ── */
.pass-widget {
  /* .hero es flex con align-items:center → sin width explícito el widget se
     encogería al contenido y quedaría descuadrado frente al de misiones */
  width: min(560px, 92vw); margin: 1.4rem auto 0; padding: 1rem 1.1rem;
  background: linear-gradient(150deg, rgba(26,79,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius, 14px);
}
.pw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; }
.pw-title { font-weight: 800; font-size: 0.92rem; color: var(--text); }
.pw-season { font-size: 0.72rem; color: var(--muted); }
.pw-row { display: flex; align-items: center; gap: 0.85rem; }
.pw-level {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-u, sans-serif); font-size: 1.25rem; font-weight: 800;
  color: var(--text); font-variant-numeric: tabular-nums;
  background: rgba(26,79,255,0.2); border: 1px solid rgba(26,79,255,0.45);
}
.pw-level.gold { background: rgba(245,200,66,0.18); border-color: rgba(245,200,66,0.5); }
.pw-bar-side { flex: 1; min-width: 0; }
.pw-bar-wrap { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pw-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue, #1a4fff), var(--gold, #f5c842));
  transition: width 0.6s ease;
}
.pw-xp { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }
.pw-cta {
  display: block; text-align: center; margin-top: 0.85rem;
  padding: 0.55rem; border-radius: 10px; font-size: 0.8rem; font-weight: 700;
  color: var(--muted); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);
  transition: background var(--transition, .2s), color var(--transition, .2s);
}
.pw-cta:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.pw-cta.ready {
  color: #04150f; border-color: transparent;
  background: linear-gradient(90deg, #34d399, #22d3ee);
}

/* ── Estado sin conexión ── */
.bp-offline {
  text-align: center; padding: 2.5rem 1.2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius, 14px);
}
.bp-offline-icon { font-size: 2.4rem; margin-bottom: 0.6rem; }
.bp-offline-title { font-weight: 800; font-size: 1rem; color: var(--text); margin-bottom: 0.4rem; }
.bp-offline-text {
  font-size: 0.82rem; color: var(--muted); line-height: 1.55;
  max-width: 380px; margin: 0 auto 1.2rem;
}
.bp-offline .bp-claim-btn { flex: 0 1 auto; max-width: 240px; margin: 0 auto; display: block; }

/* ── Protección de desbordes ──
   El body tiene overflow-x:hidden: lo que se pase de ancho se recorta sin
   aviso, así que nada aquí puede exceder su contenedor. */
.pass-page, .bp-hero, .bp-info-card, .pass-widget { max-width: 100%; box-sizing: border-box; }
.bp-hero, .bp-info-card, .pass-widget, .ev-banner { overflow-wrap: anywhere; }
.bp-season-name, .bp-info-title, .pw-title { overflow-wrap: anywhere; }
.bp-cell { overflow: hidden; }
.bp-cell-r { max-width: 100%; }

/* ── Responsive ── */
@media (min-width: 720px) {
  .bp-info { grid-template-columns: 1fr 1fr; }
  .bp-node { width: 92px; }
  .bp-cell { height: 78px; font-size: 0.83rem; }
}
@media (max-width: 560px) {
  .pass-page { padding: 1rem 0.8rem 3rem; }
  .bp-hero { padding: 1rem 0.9rem; }
  .bp-season-name { font-size: 1.25rem; }
  .bp-level-badge { width: 62px; height: 62px; border-radius: 15px; }
  .bp-level-n { font-size: 1.6rem; }
  .bp-actions { flex-direction: column; }
  .bp-claim-btn, .bp-gold-btn, .bp-gold-owned { flex: 1 1 auto; width: 100%; }
  .bp-node { width: 74px; }
  .bp-cell { height: 64px; font-size: 0.72rem; }
  .bp-track-hint { display: none; }
  .event-banner-slot { padding: 0 0.8rem; }
}
/* Móviles estrechos (iPhone SE, Galaxy A0x… 320–380 px) */
@media (max-width: 380px) {
  .pass-page { padding: 0.9rem 0.6rem 3rem; }
  .bp-hero { padding: 0.9rem 0.75rem; }
  .bp-hero-top { gap: 0.6rem; }
  .bp-season-name { font-size: 1.1rem; }
  .bp-season-ends { font-size: 0.68rem; }
  .bp-level-badge { width: 54px; height: 54px; border-radius: 13px; }
  .bp-level-n { font-size: 1.35rem; }
  .bp-level-l { font-size: 0.5rem; letter-spacing: 0.1em; }
  .bp-node { width: 68px; }
  .bp-cell { height: 60px; font-size: 0.66rem; }
  .bp-claim-btn, .bp-gold-btn { font-size: 0.8rem; padding: 0.65rem 0.5rem; }
  .bp-info-card { padding: 0.85rem 0.8rem; }
  .bp-info-list li { font-size: 0.75rem; gap: 0.5rem; }
  .pw-level { width: 40px; height: 40px; font-size: 1.05rem; }
  .pw-xp { font-size: 0.66rem; }
  .ev-name { font-size: 0.88rem; }
  .ev-msg { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-glow { animation: none; display: none; }
  .bp-claim-btn.ready, .bp-cell.pending, .bp-cell.gold.pending { animation: none; }
  .bp-xp-bar, .pw-bar, .bp-cell, .bp-claim-btn, .bp-gold-btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   TIENDA — avisos del precio escalado de sobres
   ════════════════════════════════════════════════════════════ */
.shop-price-note {
  font-size: 0.7rem; line-height: 1.4; color: var(--muted);
  margin: 0.4rem 0 0.55rem; text-align: center;
}
.shop-price-note.event {
  color: #04150f; font-weight: 800;
  background: linear-gradient(90deg, #34d399, var(--gold, #f5c842));
  border-radius: 999px; padding: 0.22rem 0.6rem; display: inline-block;
}
.shop-price-next {
  font-size: 0.68rem; color: var(--muted); opacity: 0.8;
  text-align: center; margin-top: 0.45rem; font-variant-numeric: tabular-nums;
}