/* ============================================================================
   celebracion.css — «¡Baraja nueva!» (lo monta static/celebracion.js)

   La misma mesa de siempre, de noche: velo de tinta, una lámpara de oro muy
   tenue sobre el centro, las cuatro pintas a trazo y la serifa en versalitas.
   El oro es el único color; lo demás es hueso. Todo sale de los tokens de
   menu.css, así que vale igual para el modo claro.

   Fases (clases en #celebracion):
     is-dentro   → entra: pintas, rótulo y la baraja lacrada
     is-abriendo → se ha tocado: lacre, onda, chispas, reparto en abanico
     is-abierta  → nombre, logro, rareza, la siguiente baraja y los botones
     is-fuera    → se va (o pasa a la siguiente de la cola)
   ========================================================================== */

.cel {
    --cw: min(clamp(50px, 14.5vw, 86px), 10.5vh);   /* ancho de carta del abanico */
    --ch: calc(var(--cw) * 1.534);            /* alto (proporción 208×319)  */
    position: fixed; inset: 0; z-index: 10050;   /* por encima del aviso de cookies */
    display: none;
    align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-x: hidden; overflow-y: auto;
    background: rgba(var(--cm-veil-rgb), 0.94);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--cm-bone);
    text-align: center;
    opacity: 0;
    transition: opacity .32s ease;
}
.cel.is-dentro { display: flex; opacity: 1; }
.cel.is-fuera { opacity: 0; }
.cel button { margin: 0; font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* La lámpara: un charco de luz de oro sobre el centro de la mesa. */
.cel-lampara {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 52% 46% at 50% 44%,
                rgba(var(--cm-gold-rgb), 0.10), transparent 70%);
    animation: cel-respira 5s ease-in-out infinite;
}
.cel.is-abriendo .cel-lampara {
    background: radial-gradient(ellipse 60% 52% at 50% 42%,
                rgba(var(--cm-gold-rgb), 0.17), transparent 72%);
}
@keyframes cel-respira { 50% { opacity: .7; } }

/* Motas de polvo en la luz: suben despacio, casi no se ven. */
.cel-motas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cel-mota {
    position: absolute; bottom: -10px; left: var(--x);
    width: var(--s); height: var(--s); border-radius: 50%;
    background: rgba(var(--cm-gold-hi-rgb), 0.5);
    animation: cel-mota var(--t) linear var(--d) infinite;
}
@keyframes cel-mota {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: .55; }
    100% { transform: translate(18px, -105vh); opacity: 0; }
}

.cel-escena { position: relative; width: 100%; max-width: 520px; margin: auto; }

/* --- Cabecera: las cuatro pintas y el rótulo ------------------------------ */
.cel-pintas { display: flex; justify-content: center; gap: 16px; color: var(--cm-gold); }
.cel-pintas span {
    display: inline-flex; opacity: 0; transform: translateY(10px) scale(.7);
}
.cel.is-dentro .cel-pintas span {
    animation: cel-pinta-entra .55s cubic-bezier(.2,.9,.25,1.25) forwards,
               cel-pinta-oro 2.4s ease-in-out infinite;
    animation-delay: calc(var(--k) * 90ms + 120ms), calc(var(--k) * 0.6s + 900ms);
}
.cel-pintas .pinta { width: 22px; height: 22px; stroke-width: 1.4; }
@keyframes cel-pinta-entra { to { opacity: 1; transform: none; } }
/* El oro recorre las pintas, como el adorno del menú. */
@keyframes cel-pinta-oro {
    0%, 30%, 100% { color: rgba(var(--cm-gold-rgb), 0.55); }
    12% { color: var(--cm-gold-hi); }
}

.cel-rotulo {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 14px 0 0;
    font-family: var(--cm-serif); font-size: 0.82rem;
    letter-spacing: 0.34em; text-transform: uppercase; color: var(--cm-gold);
    opacity: 0;
}
.cel-rotulo span { padding-left: 0.34em; }    /* compensa el tracking final */
.cel-rotulo i { display: block; height: 1px; width: 0; background: rgba(var(--cm-gold-rgb), 0.6); }
.cel.is-dentro .cel-rotulo { animation: cel-aparece .5s ease .45s forwards; }
.cel.is-dentro .cel-rotulo i { animation: cel-filete .7s cubic-bezier(.2,.8,.2,1) .55s forwards; }
@keyframes cel-aparece { to { opacity: 1; } }
@keyframes cel-filete { to { width: clamp(28px, 10vw, 56px); } }

/* --- La mesa: baraja lacrada, onda, chispas y abanico ---------------------- */
.cel-mesa {
    position: relative;
    height: calc(var(--ch) * 1.8 + 30px);
    margin: 10px 0 0;
}

.cel-sobre {
    position: absolute; left: 50%; top: 46%;
    width: calc(var(--cw) * 1.5); height: calc(var(--ch) * 1.5);
    margin: 0; padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--cm-gold-rgb), 0.55); border-radius: 6px;
    background: var(--cm-ink-3);
    cursor: pointer; overflow: visible;
    /* El canto de la baraja: tres cartas asomando por debajo. */
    box-shadow: 2px 2px 0 -1px var(--cm-ink-2), 2px 2px 0 0 var(--cm-hair-2),
                4px 4px 0 -1px var(--cm-ink-2), 4px 4px 0 0 var(--cm-hair-2),
                6px 6px 0 -1px var(--cm-ink-2), 6px 6px 0 0 var(--cm-hair),
                0 24px 50px rgba(var(--cm-shade-rgb), 0.6);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.cel.is-dentro .cel-sobre {
    animation: cel-sobre-llega .75s cubic-bezier(.2,.9,.25,1.15) .6s forwards,
               cel-flota 3.2s ease-in-out 1.4s infinite;
}
@keyframes cel-sobre-llega {
    from { opacity: 0; transform: translate(-50%, -30%) rotate(-7deg) scale(.85); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes cel-flota {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%); }
    50%      { opacity: 1; transform: translate(-50%, calc(-50% - 7px)); }
}
.cel-sobre:hover, .cel-sobre:focus-visible {
    border-color: var(--cm-gold); outline: none;
}
.cel-sobre img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 5px; display: block;
}
/* Brillo que cruza el dorso cada pocos segundos: «tócame». */
.cel-brillo {
    position: absolute; inset: 0; overflow: hidden; border-radius: 5px; pointer-events: none;
}
.cel-brillo::after {
    content: ""; position: absolute; inset: -30% -110%;
    background: linear-gradient(115deg, transparent 44%,
                rgba(var(--cm-gold-hi-rgb), 0.42) 50%, transparent 56%);
    transform: translateX(-60%);
    animation: cel-brillo 2.8s ease-in-out 1.6s infinite;
}
@keyframes cel-brillo { 0% { transform: translateX(-60%); } 45%, 100% { transform: translateX(60%); } }

/* El lacre: un sello de oro con la pinta de oros, a caballo del canto. */
.cel-lacre {
    position: absolute; left: 50%; bottom: -19px;
    width: 40px; height: 40px; margin-left: -20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--cm-gold-fill);
    color: var(--cm-on-gold);
    box-shadow: 0 0 0 3px var(--cm-ink-2), 0 0 0 4px rgba(var(--cm-gold-rgb), 0.5),
                0 8px 18px rgba(var(--cm-shade-rgb), 0.5);
    animation: cel-late 1.6s ease-in-out 1.6s infinite;
}
.cel-lacre .pinta { width: 22px; height: 22px; stroke-width: 1.8; }
@keyframes cel-late { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }

.cel-toca {
    position: absolute; left: 0; right: 0; bottom: -6px; margin: 0;
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cm-dim);
    opacity: 0;
}
.cel.is-dentro .cel-toca { animation: cel-aparece .5s ease 1.3s forwards, cel-parpadea 2.2s ease-in-out 1.8s infinite; }
@keyframes cel-parpadea { 50% { opacity: .45; } }

/* Al tocar: el lacre salta, la baraja se recoge y desaparece. */
.cel.is-abriendo .cel-sobre {
    animation: cel-sobre-se-abre .42s cubic-bezier(.5,0,.75,0) forwards;
    pointer-events: none;
}
@keyframes cel-sobre-se-abre {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.66); }
}
.cel.is-abriendo .cel-lacre { animation: cel-lacre-salta .45s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cel-lacre-salta { to { transform: scale(1.9) rotate(30deg); opacity: 0; } }
.cel.is-abriendo .cel-toca { animation: none; opacity: 0; transition: opacity .2s; }

/* Onda de oro: dos anillos que se abren desde el centro. */
.cel-onda, .cel-onda::after {
    position: absolute; left: 50%; top: 46%;
    width: 70px; height: 70px; margin: -35px 0 0 -35px;
    border: 1.5px solid var(--cm-gold); border-radius: 50%;
    opacity: 0; pointer-events: none;
}
.cel-onda::after { content: ""; left: 0; top: 0; margin: 0; border-width: 1px; }
.cel.is-abriendo .cel-onda { animation: cel-onda 1s cubic-bezier(.1,.7,.3,1) .12s forwards; }
.cel.is-abriendo .cel-onda::after { animation: cel-onda 1.2s cubic-bezier(.1,.7,.3,1) .26s forwards; }
@keyframes cel-onda {
    0%   { opacity: .95; transform: scale(.3); }
    100% { opacity: 0; transform: scale(7.5); }
}

/* Chispas: rombos de oro y de hueso y alguna pinta, en estallido con caída. */
.cel-chispas { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.cel-chispa {
    position: absolute; left: 0; top: 0;
    width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    background: var(--cm-gold-hi);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    opacity: 0;
}
.cel-chispa.is-hueso { background: var(--cm-bone); }
.cel-chispa.is-pinta { background: none; clip-path: none; color: var(--cm-gold); }
.cel-chispa.is-pinta .pinta { width: calc(var(--s) * 2); height: calc(var(--s) * 2); }
.cel.is-abriendo .cel-chispa {
    animation: cel-chispa 1.35s cubic-bezier(.12,.75,.3,1) calc(var(--d) + 150ms) forwards;
}
@keyframes cel-chispa {
    0%   { opacity: 1; transform: translate(0, 0) scale(.2) rotate(0); }
    55%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
    100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 70px)) scale(.7) rotate(var(--r)); }
}

/* El abanico. Cada carta gira alrededor de un pivote muy por debajo de ella,
   así que el ángulo (--a) basta para abrirlo; se reparten de una en una (--k)
   y luego se dan la vuelta, también escalonadas. */
.cel-abanico { position: absolute; inset: 0; pointer-events: none; }
.cel-carta {
    position: absolute; left: 50%; top: 40%;
    width: var(--cw); height: var(--ch);
    margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
    transform-origin: 50% 260%;
    transform: rotate(0) translateY(14px) scale(.7);
    opacity: 0;
    perspective: 700px;
    transition: transform .62s cubic-bezier(.2,.85,.25,1.1), opacity .25s ease;
    transition-delay: calc(var(--k) * 65ms + 260ms);
}
.cel.is-abriendo .cel-carta { transform: rotate(var(--a)); opacity: 1; }
.cel-carta-in {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    transition: transform .55s cubic-bezier(.3,.7,.3,1);
    transition-delay: calc(var(--k) * 65ms + 560ms);
}
.cel.is-abriendo .cel-carta-in { transform: rotateY(0); }
.cel-cara, .cel-dorso {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    border: 1px solid var(--cm-hair-2); border-radius: 4px;
    background: var(--cm-ink-3);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 10px 22px rgba(var(--cm-shade-rgb), 0.55);
}
.cel-dorso { transform: rotateY(180deg); }
/* Ya abierta: las cartas se levantan al pasar por encima. */
.cel.is-abierta .cel-abanico { pointer-events: auto; }
.cel.is-abierta .cel-carta-in { transition: transform .25s cubic-bezier(.2,.8,.2,1); transition-delay: 0s; }
.cel.is-abierta .cel-carta:hover .cel-carta-in { transform: translateY(-14px); }
.cel.is-abierta .cel-carta:hover .cel-cara { border-color: rgba(var(--cm-gold-rgb), 0.7); }

/* --- El pie: nombre, logro, rareza, la siguiente y los botones ------------- */
.cel-pie { position: relative; margin-top: 2px; }
.cel-pie > * { opacity: 0; transform: translateY(10px); }
.cel.is-abierta .cel-pie > * { animation: cel-sube .55s cubic-bezier(.2,.8,.2,1) forwards; }
.cel.is-abierta .cel-pie > :nth-child(2) { animation-delay: .08s; }
.cel.is-abierta .cel-pie > :nth-child(3) { animation-delay: .18s; }
.cel.is-abierta .cel-pie > :nth-child(4) { animation-delay: .30s; }
.cel.is-abierta .cel-pie > :nth-child(5) { animation-delay: .42s; }
.cel.is-abierta .cel-pie > :nth-child(6) { animation-delay: .50s; }
@keyframes cel-sube { to { opacity: 1; transform: none; } }

.cel-origen {
    margin: 0; min-height: 1em;
    font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--cm-gold);
}
.cel-origen:empty { display: none; }
.cel-nombre {
    margin: 8px 0 0;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.1;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cm-bone);
}
.cel.is-abierta .cel-pie > .cel-nombre { animation: cel-nombre .9s cubic-bezier(.2,.8,.2,1) .08s forwards; }
@keyframes cel-nombre {
    from { opacity: 0; letter-spacing: 0.42em; transform: none; }
    to   { opacity: 1; letter-spacing: 0.14em; transform: none; }
}
.cel-rara {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 10px 0 0;
    font-size: 0.74rem; letter-spacing: 0.06em; color: var(--cm-gold);
}
.cel-rara .pinta { width: 13px; height: 13px; }

/* La siguiente baraja: el anzuelo. Barra de oro que se llena al aparecer. */
.cel-siguiente {
    width: min(100%, 360px); margin: 20px auto 0; padding: 14px 16px 12px;
    box-sizing: border-box; text-align: left;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    background: rgba(var(--cm-ink-2-rgb), 0.85);
}
.cel-siguiente:not(.is-lista) { visibility: hidden; }
.cel-sig-tit {
    margin: 0 0 9px;
    font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cm-dim);
}
.cel-siguiente.is-lista:not(:has(.cel-sig-fila)) { text-align: center; }
.cel-siguiente.is-lista:not(:has(.cel-sig-fila)) .cel-sig-tit { margin: 0; color: var(--cm-gold); }
.cel-sig-fila { display: flex; align-items: baseline; gap: 10px; }
.cel-sig-deck { flex: 1; font-family: var(--cm-serif); font-size: 1.02rem; color: var(--cm-bone); }
.cel-sig-num { font-family: var(--cm-serif); font-size: 0.98rem; color: var(--cm-gold); white-space: nowrap; }
.cel-sig-barra {
    position: relative; height: 4px; margin: 9px 0 8px;
    background: var(--cm-ink-3); border: 1px solid var(--cm-hair); border-radius: 2px; overflow: hidden;
}
.cel-sig-barra i {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: var(--cm-gold-fill);
}
.cel.is-abierta .cel-sig-barra i { animation: cel-llena 1.2s cubic-bezier(.2,.8,.2,1) .8s forwards; }
@keyframes cel-llena { to { width: var(--p); } }
.cel-sig-desc { margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--cm-dim); }
.cel-sig-quedan {
    margin: 7px 0 0; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cm-dim-2);
}

.cel-botones {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 20px;
}
.cel .cel-usar, .cel .cel-seguir {
    min-width: 168px; font-weight: 400; padding: 14px 20px;
    border-radius: 2px; cursor: pointer;
    font-family: var(--cm-serif); font-size: 0.86rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.cel-usar {
    background: var(--cm-gold-fill); border: 1px solid var(--cm-gold-fill);
    color: var(--cm-on-gold);
}
.cel-usar:hover { background: var(--cm-gold-fill-hi); border-color: var(--cm-gold-fill-hi); }
.cel-usar:disabled { opacity: .55; cursor: default; }
.cel-seguir {
    background: transparent; border: 1px solid var(--cm-hair-2); color: var(--cm-bone);
}
.cel-seguir:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }
.cel-usar:active, .cel-seguir:active { transform: scale(.97); }
.cel-usar:focus-visible, .cel-seguir:focus-visible { outline: 1px solid var(--cm-gold); outline-offset: 3px; }
.cel-msg { margin: 10px 0 0; min-height: 1.1em; font-size: 0.74rem; color: var(--cm-live); }

@media (max-width: 420px) {
    .cel-botones { flex-direction: column; align-items: stretch; }
    .cel-usar, .cel-seguir { width: 100%; }
    .cel-pintas { gap: 12px; }
}
@media (max-height: 700px) {
    .cel-siguiente { margin-top: 14px; padding: 11px 14px 10px; }
    .cel-botones { margin-top: 14px; }
    .cel-rotulo { margin-top: 10px; }
}

/* Sin movimiento: lo mismo, por fundidos. */
.cel-quieta *, .cel-quieta *::before, .cel-quieta *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important; transition-delay: 0s !important;
}
.cel-quieta .cel-carta { transform-origin: 50% 260%; }