/* Pase de temporada (pass, spec 8.10). Raíz: .screen.ui.s-pass (+ .pass-screen). Cabecera .pnl.pass
   de 64 y, debajo, la pista: etiquetas fijas a la izquierda y las columnas que se desplazan.
   Ojo: .tn.cur hereda la regla antigua .cur del monedero (base.css, sección 3): aquí se anula entera.
   En la lista no hay filtros por celda (son 60): lo bloqueado se oscurece con un velo. */

.s-pass.pass-screen { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,80,220,.18), rgba(255,80,220,0) 70%); }

/* ---- Cabecera ------------------------------------------------------------------------------- */
.s-pass .pass-head { flex: none; margin: 10px 12px 0; height: 64px; padding: 0 14px; display: flex; align-items: center; gap: 14px; overflow: visible; }
.s-pass .lvsh.phl { position: relative; left: auto; bottom: auto; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 11px; box-shadow: 0 0 0 2px var(--gold-ink), 0 3px 6px rgba(0,0,0,.45); }
.s-pass .lvsh.phl .ty-num { font-size: 24px; font-weight: 800; color: var(--gold-ink); transform: skewX(6deg); }
.s-pass .ph-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.s-pass .ph-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.s-pass .ph-r1 .ty-h4 { text-shadow: 0 2px 0 rgba(40,0,60,.6); }
.s-pass .ph-xp { font-size: 14px; color: #f3dcff; white-space: nowrap; }
.s-pass .pass-head .bar { height: 10px; border-radius: 5px; }
.s-pass .ph-end { display: flex; align-items: center; gap: 5px; color: #e4c6ff; }
.s-pass .pass-head > .btn, .s-pass .pass-head > .pill { flex: none; }

/* ---- Pista ---------------------------------------------------------------------------------- */
/* Medidas de la celda: 86×98 (a más alto, crecen). Columna = celda · número · celda. */
.s-pass { --pw: 86px; --ph: 98px; --pic: 50px; }
#stage[data-h="l"] .s-pass { --pw: 94px; --ph: 112px; --pic: 58px; }
#stage[data-h="xl"] .s-pass { --pw: 114px; --ph: 148px; --pic: 80px; }
.s-pass .pass-main { display: flex; align-items: center; min-height: 0; }
.s-pass .pass-rail { position: relative; width: 100%; display: flex; align-items: stretch; }
.s-pass .pass-labels { flex: none; width: 108px; padding: 10px 0 10px 16px; display: flex; flex-direction: column; }
.s-pass .pl-block { height: var(--ph); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.s-pass .pl-block .ty-small { display: flex; align-items: center; gap: 4px; color: #d9c2f2; }
.s-pass .pl-gap { flex: none; height: 34px; }
/* la pista se funde por la izquierda al pasar bajo las etiquetas (solo si está desplazada: .faded);
   un fundido largo para que no queden medias esquinas sueltas en el borde */
.s-pass .pass-scroller { flex: 1; min-width: 0; }
.s-pass .pass-scroller.faded { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 22px, #000 64px); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 22px, #000 64px); }
.s-pass .pass-track { display: flex; gap: 9px; padding: 10px 16px 10px 10px; width: max-content; }
.s-pass .pcol { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }

/* Número del nivel: pozo; alcanzado en oro; el siguiente, con aro dorado */
.s-pass .tn {
  position: static; display: block; width: 28px; min-width: 0; height: 22px; padding: 0; border-radius: 6px;
  font-size: 13px; line-height: 22px; text-align: center; color: var(--tx-2);
  background: linear-gradient(180deg, var(--well-top), var(--well-bot)); box-shadow: inset 0 1px 3px rgba(0,0,0,.7), inset 0 0 0 1px var(--well-line);
}
.s-pass .tn.got { color: var(--gold-ink); background: linear-gradient(180deg, #ffe88a, #f2ab1c); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px #7a4a06; }
.s-pass .tn.cur { color: var(--gold-1); background: linear-gradient(180deg, var(--well-top), var(--well-bot)); box-shadow: inset 0 1px 3px rgba(0,0,0,.7), inset 0 0 0 1.5px var(--gold-2), 0 0 8px rgba(255,200,60,.35); }

/* Celdas: gratis con aspecto de fila (.card-row) y premium en morado con filo de oro */
.s-pass .pcell {
  position: relative; width: var(--pw); height: var(--ph); padding: 7px 4px 6px; border: 0; border-radius: 12px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #fff; font: inherit; cursor: default; text-align: center;
}
.s-pass .pcell.fr { background: linear-gradient(180deg, var(--sf-top) 0%, var(--sf-mid) 52%, var(--sf-bot) 100%); box-shadow: inset 0 0 0 1px var(--sf-line), inset 0 1px 0 var(--sf-hi), var(--sh-row); }
.s-pass .pcell.pr { background: linear-gradient(160deg, #6a2ad0, #3b138c 60%, #22095a); box-shadow: inset 0 0 0 1.5px var(--gold-3), inset 0 1px 0 rgba(255,255,255,.25), var(--sh-row); }
.s-pass .pcell .pic { flex: 1 1 auto; min-height: 0; max-height: var(--pic); width: 100%; display: flex; align-items: center; justify-content: center; }
.s-pass .pcell .pic > img { max-width: 56px; max-height: 100%; }
#stage[data-h="l"] .s-pass .pcell .pic > img { max-width: 64px; }
#stage[data-h="xl"] .s-pass .pcell .pic > img { max-width: 76px; }
#stage[data-h="xl"] .s-pass .pcell .cv { font-size: 17px; }
.s-pass .pcell .pp-cue { display: block; width: 78px; height: 4px; transform: rotate(-32deg); }
.s-pass .pcell .pp-cue img { display: block; width: 100%; height: 100%; }
.s-pass .pcell .pp-cue.hero { width: 86px; height: 6px; }
/* luz detrás de los tacos (piezas legendarias en naranja, el del pase en rosa): fondo fijo, sin filtros */
.s-pass .pcell .pic.leg { background: radial-gradient(closest-side, rgba(255,160,50,.34), rgba(255,160,50,0)); }
.s-pass .pcell .pic.neon { background: radial-gradient(closest-side, rgba(255,80,230,.42), rgba(255,80,230,0)); }
.s-pass .pcell .cv { flex: none; max-width: 100%; font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; text-shadow: 0 2px 0 rgba(0,8,30,.55); }
/* billetes de más (caja + 50, piezas + 5): etiqueta arriba a la izquierda */
.s-pass .pplus { position: absolute; left: 5px; top: 5px; z-index: 2; display: flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px 0 2px; border-radius: 9px; background: rgba(2,10,30,.72); box-shadow: inset 0 0 0 1px rgba(126,174,255,.25); }
.s-pass .pplus img { width: 16px; height: 16px; }
.s-pass .pplus .ty-num { font-size: 12px; color: #fff; }
/* el taco del pase brilla en rosa */
.s-pass .pcell.pr .pp-cue.hero { filter: drop-shadow(0 0 4px rgba(255,80,230,.9)); }

/* Recogida: contenido a media luz y marca verde arriba a la derecha (la celda no se atenúa) */
.s-pass .pcell.done > :not(.chk) { opacity: .5; }
.s-pass .pcell .chk { position: absolute; right: -5px; top: -5px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(#5fd836, #2c9612); box-shadow: 0 0 0 2px var(--bg-1), 0 2px 3px rgba(0,0,0,.5); }
/* Bloqueada: un velo (más barato que un filtro por celda) y, en premium sin comprar, un candado */
.s-pass .pcell.lk::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(3,8,28,.42); pointer-events: none; }
.s-pass .pcell.lk > .pic, .s-pass .pcell.lk > .cv { opacity: .8; }
.s-pass .pcell .plock { position: absolute; right: -5px; bottom: -5px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-1); background: rgba(2,8,24,.85); box-shadow: inset 0 0 0 1px rgba(255,211,77,.45); }
/* Se puede recoger: aro dorado fijo, halo que late (solo opacidad) y RECOGER abajo */
.s-pass .pcell.claim { cursor: pointer; }
.s-pass .pcell.fr.claim { box-shadow: inset 0 0 0 1px var(--sf-line), inset 0 1px 0 var(--sf-hi), 0 0 0 2px var(--gold-2), var(--sh-row); }
.s-pass .pcell.pr.claim { box-shadow: inset 0 0 0 1.5px var(--gold-3), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px var(--gold-2), var(--sh-row); }
.s-pass .pcell.claim::after { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 18px; pointer-events: none; background: radial-gradient(closest-side, rgba(255,200,60,.45), rgba(255,200,60,0)); opacity: .6; }
.s-pass .pcell.claim.glow::after { animation: glow-o 1.2s ease-in-out infinite alternate; }
.s-pass .pcell.claim .pill.ok { flex: none; height: 17px; padding: 0 6px; font-size: 9px; }
.s-pass .pcell.claim .pic { max-height: calc(var(--pic) - 8px); }
.s-pass .pcol { isolation: isolate; }
@media (hover: hover) { .s-pass .pcell.claim:hover { filter: brightness(1.08); } }
.s-pass .pcell.claim:active { transform: scale(.96); }