/* =====================================================================
   PICA JUMP · Álbum de biomas (perfil)
   ===================================================================== */

/* ---------- Botón dentro del perfil ---------- */
.btn-album {
    position: relative; width: 100%; display: flex; align-items: center; gap: calc(8 * var(--u, 1px));
    padding: calc(10 * var(--u, 1px)) calc(14 * var(--u, 1px)); box-sizing: border-box;
    border-radius: calc(13 * var(--u, 1px)); border: 1.5px solid #f3c969; cursor: pointer;
    background: linear-gradient(135deg, #fff3d1, #ffe29a); color: #7c3f00;
    font: 800 calc(13 * var(--u, 1px)) 'Montserrat', sans-serif; text-align: left;
    box-shadow: 0 2px 6px rgba(124, 63, 0, .12); -webkit-tap-highlight-color: transparent;
}
.btn-album:active { transform: translateY(1px); }
.btn-album svg { flex: none; width: calc(18 * var(--u, 1px)); height: calc(18 * var(--u, 1px)); }
.pal-b-txt { flex: 1; letter-spacing: .3px; }
.pal-b-n { font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(16 * var(--u, 1px)); color: #c2410c; }
.pal-b-nuevo { padding: 2px 8px; border-radius: 99px; background: #ef4444; color: #fff; font-size: calc(9.5 * var(--u, 1px)); font-weight: 800; animation: pal-late 1.4s ease-in-out infinite; }
.pal-b-nuevo[hidden] { display: none; }

/* Puntito rojo sobre "Mi perfil" cuando hay cromos sin ver */
.pal-punto { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; background: #ef4444; border: 2px solid #fff; animation: pal-late 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes pal-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------- Capa del álbum ---------- */
.pal-overlay {
    --pal-u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.4px);
    --oro: #f5b83d; --cuero1: #7a4222; --cuero2: #3d1c0d;
    position: fixed; inset: 0; z-index: 650;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    padding: max(env(safe-area-inset-top), 12px) 12px max(env(safe-area-inset-bottom), 12px);
    background: radial-gradient(ellipse at 50% 30%, rgba(60, 24, 10, .9), rgba(12, 5, 2, .96));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease; font-family: 'Montserrat', system-ui, sans-serif;
}
.pal-overlay.pal-in { opacity: 1; }

.pal-libro {
    position: relative; display: flex; flex-direction: column; box-sizing: border-box;
    width: min(calc(350 * var(--pal-u)), 100%); height: min(100%, calc(640 * var(--pal-u)));
    padding: calc(12 * var(--pal-u));
    border-radius: calc(22 * var(--pal-u));
    background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(155deg, var(--cuero1), var(--cuero2));
    box-shadow: 0 0 calc(60 * var(--pal-u)) rgba(245, 184, 61, .28), 0 calc(24 * var(--pal-u)) calc(50 * var(--pal-u)) rgba(0, 0, 0, .6), inset 0 0 0 calc(3 * var(--pal-u)) var(--oro);
}
.pal-in .pal-libro { animation: pal-abre .55s cubic-bezier(.2, 1.15, .4, 1) both; transform-origin: 0 50%; }
@keyframes pal-abre { from { transform: perspective(900px) rotateY(-38deg) scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
.pal-libro::before { content: ''; position: absolute; inset: calc(7 * var(--pal-u)); border: calc(1.5 * var(--pal-u)) dashed rgba(245, 184, 61, .55); border-radius: calc(16 * var(--pal-u)); pointer-events: none; }

.pal-cab { position: relative; padding: calc(6 * var(--pal-u)) calc(34 * var(--pal-u)) calc(10 * var(--pal-u)); text-align: center; }
.pal-titulo { margin: 0; font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800; font-size: calc(26 * var(--pal-u)); letter-spacing: calc(1 * var(--pal-u)); color: var(--oro); text-shadow: 0 calc(2 * var(--pal-u)) 0 #5a2a00, 0 calc(5 * var(--pal-u)) calc(12 * var(--pal-u)) rgba(0, 0, 0, .5); }
.pal-sub { margin: calc(2 * var(--pal-u)) 0 0; font-size: calc(11.5 * var(--pal-u)); font-weight: 600; color: #f4dcb0; opacity: .9; }
.pal-x {
    position: absolute; top: calc(2 * var(--pal-u)); right: calc(-2 * var(--pal-u)); z-index: 3;
    width: calc(32 * var(--pal-u)); height: calc(32 * var(--pal-u)); padding: 0; border-radius: 50%; cursor: pointer;
    border: calc(2.5 * var(--pal-u)) solid #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff;
    font: 800 calc(13 * var(--pal-u)) / 1 'Montserrat', sans-serif; box-shadow: 0 calc(3 * var(--pal-u)) calc(8 * var(--pal-u)) rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
}
.pal-x:active { transform: scale(.9); }

/* ---------- Página ---------- */
.pal-pagina {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 calc(4 * var(--pal-u)) calc(4 * var(--pal-u)); padding: calc(12 * var(--pal-u)); box-sizing: border-box;
    border-radius: calc(14 * var(--pal-u)); background: linear-gradient(180deg, #fff6e0, #fbe9c3);
    box-shadow: inset 0 0 calc(22 * var(--pal-u)) rgba(120, 70, 10, .3);
    touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.pal-estado { margin: calc(40 * var(--pal-u)) 0 calc(10 * var(--pal-u)); text-align: center; font-size: calc(14 * var(--pal-u)); font-weight: 700; color: #7c5a2a; }
.pal-reintentar { display: block; margin: 0 auto; padding: calc(9 * var(--pal-u)) calc(20 * var(--pal-u)); border: 0; border-radius: 99px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #ff7a00, #ff3b00); font: 800 calc(13 * var(--pal-u)) 'Montserrat', sans-serif; }

.pal-prog-fila { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: calc(6 * var(--pal-u)); }
.pal-prog-fila b { font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(24 * var(--pal-u)); color: #c2410c; }
.pal-prog-fila span { font-size: calc(12 * var(--pal-u)); font-weight: 800; color: #7c5a2a; }
.pal-pista { height: calc(11 * var(--pal-u)); border-radius: 99px; background: #ecd9ad; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.pal-pista i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7a00, #ffb02e); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.pal-completo .pal-pista i { background: linear-gradient(90deg, #f5b83d, #fff1a8, #f5b83d); background-size: 200% 100%; animation: pal-oro 2.2s linear infinite; }
@keyframes pal-oro { to { background-position: -200% 0; } }
.pal-felicidades { margin: calc(8 * var(--pal-u)) 0 0; text-align: center; font-family: 'CatComic', 'Montserrat', sans-serif; font-size: calc(19 * var(--pal-u)); color: #b45309; animation: pal-late 1.6s ease-in-out infinite; }

.pal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(11 * var(--pal-u)); margin-top: calc(14 * var(--pal-u)); }
.pal-nota { margin: calc(14 * var(--pal-u)) 0 0; text-align: center; font-size: calc(10.5 * var(--pal-u)); line-height: 1.4; font-weight: 600; color: #8a6a35; }

/* ---------- Cromos ---------- */
.pal-carta {
    position: relative; overflow: hidden; display: block; width: 100%; padding: 0; margin: 0; box-sizing: border-box;
    aspect-ratio: 3 / 4; border-radius: calc(14 * var(--pal-u)); border: calc(3.5 * var(--pal-u)) solid #fff;
    background: #2a1208; color: #fff; text-align: center; font: inherit; -webkit-appearance: none; appearance: none;
    box-shadow: 0 calc(5 * var(--pal-u)) calc(12 * var(--pal-u)) rgba(0, 0, 0, .3);
    animation: pal-sale .5s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 250ms);
}
@keyframes pal-sale { from { opacity: 0; transform: translateY(calc(16 * var(--pal-u))) scale(.9) rotate(-3deg); } to { opacity: 1; transform: none; } }
button.pal-carta { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.pal-carta:active { transform: scale(.97); }
button.pal-carta:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

.pal-tengo.pal-sin-arte { background: radial-gradient(circle at 50% 35%, #ff7a00, #7a1a05 80%); }
.pal-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pal-holo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 45%, rgba(255, 214, 255, .3) 52%, transparent 66%); background-size: 260% 100%; background-position: 130% 0; animation: pal-holo 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 400ms); }
@keyframes pal-holo { 0% { background-position: 130% 0; } 45%, 100% { background-position: -60% 0; } }
.pal-chip { position: absolute; top: calc(7 * var(--pal-u)); left: calc(7 * var(--pal-u)); padding: calc(2 * var(--pal-u)) calc(8 * var(--pal-u)); border-radius: 99px; background: rgba(0, 0, 0, .62); font-size: calc(9.5 * var(--pal-u)); font-weight: 800; letter-spacing: .5px; }
.pal-etq-nuevo { position: absolute; top: calc(7 * var(--pal-u)); right: calc(7 * var(--pal-u)); padding: calc(2 * var(--pal-u)) calc(8 * var(--pal-u)); border-radius: 99px; background: #ef4444; font-size: calc(9 * var(--pal-u)); font-weight: 800; animation: pal-late 1.3s ease-in-out infinite; }
.pal-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: calc(2 * var(--pal-u)); padding: calc(24 * var(--pal-u)) calc(8 * var(--pal-u)) calc(9 * var(--pal-u)); background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.pal-nombre { font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800; font-size: calc(15 * var(--pal-u)); line-height: 1.05; letter-spacing: calc(.6 * var(--pal-u)); text-transform: uppercase; text-shadow: 0 calc(2 * var(--pal-u)) 0 rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.pal-lim { font-size: calc(8.5 * var(--pal-u)); font-weight: 800; letter-spacing: .6px; color: #ffd34d; }
.pal-fecha { font-size: calc(10 * var(--pal-u)); font-weight: 600; color: #f4dcb0; }
.pal-limitada { border-color: #ffd34d; box-shadow: 0 0 calc(14 * var(--pal-u)) rgba(255, 211, 77, .55), 0 calc(5 * var(--pal-u)) calc(12 * var(--pal-u)) rgba(0, 0, 0, .3); }

.pal-falta, .pal-perdido { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--pal-u)); padding: calc(8 * var(--pal-u)); border-style: dashed; }
.pal-falta { background: repeating-linear-gradient(135deg, #ead7ab 0 calc(10 * var(--pal-u)), #e2cd9d calc(10 * var(--pal-u)) calc(20 * var(--pal-u))); border-color: #c4a56a; color: #8a6a35; box-shadow: none; }
.pal-perdido { background: repeating-linear-gradient(135deg, #d9d6d2 0 calc(10 * var(--pal-u)), #cecbc6 calc(10 * var(--pal-u)) calc(20 * var(--pal-u))); border-color: #a8a29e; color: #6b6762; box-shadow: none; }
.pal-interroga { font-family: 'CatComic', 'Montserrat', sans-serif; font-size: calc(56 * var(--pal-u)); line-height: 1; opacity: .55; }
.pal-candado svg { display: block; width: calc(34 * var(--pal-u)); height: calc(34 * var(--pal-u)); opacity: .7; }
.pal-hint { font-size: calc(11 * var(--pal-u)); font-weight: 800; line-height: 1.25; }

/* ---------- Cromo ampliado ---------- */
.pal-zoom { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--pal-u)); background: rgba(8, 3, 1, .86); opacity: 0; transition: opacity .2s ease; }
.pal-zoom.pal-in { opacity: 1; }
.pal-grande { width: min(calc(250 * var(--pal-u)), 68vw); animation: pal-entra-zoom .45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: 0s; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; touch-action: none; border-width: calc(5 * var(--pal-u)); border-radius: calc(20 * var(--pal-u)); }
@keyframes pal-entra-zoom { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.pal-grande .pal-nombre { font-size: calc(26 * var(--pal-u)); }
.pal-grande .pal-chip { font-size: calc(12 * var(--pal-u)); }
.pal-grande .pal-lim { font-size: calc(11 * var(--pal-u)); }
.pal-grande .pal-fecha { font-size: calc(12 * var(--pal-u)); }
.pal-zoom-x { padding: calc(8 * var(--pal-u)) calc(22 * var(--pal-u)); border: 0; border-radius: 99px; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; font: 700 calc(13 * var(--pal-u)) 'Montserrat', sans-serif; }
.pal-zoom-x:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* ---------- Aviso al desbloquear (durante la partida) ---------- */
.pal-toast {
    --pal-u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.4px);
    position: fixed; z-index: 1400; left: 50%; bottom: max(env(safe-area-inset-bottom), calc(18 * var(--pal-u)));
    display: flex; align-items: center; gap: calc(10 * var(--pal-u)); max-width: calc(100vw - 24px); box-sizing: border-box;
    padding: calc(6 * var(--pal-u)) calc(18 * var(--pal-u)) calc(6 * var(--pal-u)) calc(6 * var(--pal-u));
    border-radius: 99px; background: #240804; color: #fff; pointer-events: none;
    box-shadow: 0 0 0 calc(2 * var(--pal-u)) #f5b83d, 0 calc(8 * var(--pal-u)) calc(24 * var(--pal-u)) rgba(0, 0, 0, .5);
    animation: pal-toast 3.6s cubic-bezier(.2, 1, .3, 1) both;
}
.pal-toast img { flex: none; width: calc(36 * var(--pal-u)); height: calc(46 * var(--pal-u)); object-fit: cover; border-radius: calc(7 * var(--pal-u)); border: calc(2 * var(--pal-u)) solid #fff; }
.pal-toast-tx { display: flex; flex-direction: column; min-width: 0; }
.pal-toast-tx b { font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(15 * var(--pal-u)); color: #f5b83d; letter-spacing: .5px; }
.pal-toast-tx span { font-size: calc(11.5 * var(--pal-u)); font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pal-toast {
    0%   { transform: translate(-50%, 140%); opacity: 0; }
    10%, 82% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 140%); opacity: 0; }
}

/* ---------- Cromos legendarios ---------- */
.pal-seccion { display: flex; align-items: center; justify-content: space-between; margin: calc(16 * var(--pal-u)) 0 calc(2 * var(--pal-u)); font-size: calc(11 * var(--pal-u)); font-weight: 800; letter-spacing: .8px; color: #8a6a35; }
.pal-seccion:first-child { margin-top: 0; }
.pal-seccion span { padding: 1px calc(9 * var(--pal-u)); border-radius: 99px; background: #7c3aed; color: #fff; font-size: calc(10.5 * var(--pal-u)); }
.pal-seccion-leg { color: #7c3aed; font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(17 * var(--pal-u)); letter-spacing: 1px; }
.pal-seccion-leg span { font-family: 'Montserrat', sans-serif; font-weight: 800; }
.pal-grid-leg { margin-top: calc(8 * var(--pal-u)); }

.pal-leg { border-color: #ffe27a; box-shadow: 0 0 calc(16 * var(--pal-u)) rgba(255, 211, 77, .7), 0 0 calc(30 * var(--pal-u)) rgba(168, 85, 247, .35), 0 calc(5 * var(--pal-u)) calc(12 * var(--pal-u)) rgba(0, 0, 0, .3); }
.pal-leg-tengo { background: linear-gradient(160deg, #3b1a73, #150a30); }
.pal-leg-tengo:not(.pal-sin-arte) .pal-pie { display: none; }
.pal-holo-leg { background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .55) 40%, rgba(255, 190, 255, .45) 50%, rgba(160, 230, 255, .4) 58%, transparent 74%); background-size: 260% 100%; mix-blend-mode: screen; }
.pal-estrella { position: absolute; top: calc(6 * var(--pal-u)); left: calc(7 * var(--pal-u)); width: calc(22 * var(--pal-u)); height: calc(22 * var(--pal-u)); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(36, 8, 4, .72); color: #ffd34d; font-size: calc(13 * var(--pal-u)); line-height: 1; box-shadow: 0 0 0 calc(1.5 * var(--pal-u)) #ffd34d; }
.pal-leg-falta { background: repeating-linear-gradient(135deg, #e9dcf7 0 calc(10 * var(--pal-u)), #dccbf0 calc(10 * var(--pal-u)) calc(20 * var(--pal-u))); border-color: #b794e0; color: #6b3fa0; box-shadow: none; }
.pal-leg-falta .pal-interroga { font-size: calc(44 * var(--pal-u)); opacity: .6; }
.pal-hint-fecha { font-size: calc(9.5 * var(--pal-u)); opacity: .8; }
.pal-leg-fecha { margin: calc(-6 * var(--pal-u)) 0 0; font-size: calc(12 * var(--pal-u)); font-weight: 700; color: #f4dcb0; }
.pal-toast-leg { box-shadow: 0 0 0 calc(2 * var(--pal-u)) #ffd34d, 0 0 calc(26 * var(--pal-u)) rgba(168, 85, 247, .8), 0 calc(8 * var(--pal-u)) calc(24 * var(--pal-u)) rgba(0, 0, 0, .5); }
.pal-toast-leg .pal-toast-tx b { color: #ffd34d; }

@media (prefers-reduced-motion: reduce) {
    .pal-overlay *, .pal-overlay *::before, .pal-overlay *::after, .pal-toast, .pal-b-nuevo, .pal-punto { animation: none !important; transition: none !important; }
    .pal-carta { opacity: 1 !important; }
}