/* =========================================================
   Sistema de Baús & Cartas — estilos globais
   Carregado em todas as views que renderizam cartas/baús.
   ========================================================= */

/* Alpine cloak — para evitar flash de elementos com x-show */
[x-cloak] { display: none !important; }

/* =====================================================
   CARTA 3D — anverso (imagem) por padrão.
   Adicione a classe `.is-flipped` na carta para virar pro verso.
   (Não há mais hover-flip automático, pois conflitava com a leitura do anverso.)
   ===================================================== */
.lh-card {
    perspective: 1200px;
    position: relative;
    flex-shrink: 0;
    /* Garantir que a carta tenha altura (caso esteja dentro de inline-block) */
    display: block;
}

/* Tamanhos explícitos para cartas com h-XX w-XX — caso o Tailwind não gere */
.lh-card.h-80 { height: 20rem; }
.lh-card.w-56 { width: 14rem; }
.lh-card.h-72 { height: 18rem; }
.lh-card.w-48 { width: 12rem; }
.lh-card.h-60 { height: 15rem; }
.lh-card.w-40 { width: 10rem; }
.lh-card.h-44 { height: 11rem; }
.lh-card.w-28 { width: 7rem; }
.lh-card.h-96 { height: 24rem; }
.lh-card.w-64 { width: 16rem; }

.lh-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

/* Toggle via classe explícita (definida pelo JS ou estado Alpine) */
.lh-card.is-flipped .lh-card-inner {
    transform: rotateY(180deg);
}

/* Flip on hover APENAS para desktop com mouse fino (evita em telas touch) */
@media (hover: hover) and (pointer: fine) {
    .lh-card.flip-on-hover:hover .lh-card-inner {
        transform: rotateY(180deg);
    }
}

.lh-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Anverso: visível por padrão */
.lh-card-face.front {
    z-index: 2;
}

/* Verso: pré-rotacionado 180° para aparecer quando o card vira */
.lh-card-face.back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Brilho "mágico" da face traseira */
@keyframes lh-shimmer {
    0%   { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}

.lh-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255,255,255,.45) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: lh-shimmer 3.2s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Flutuação sutil da carta */
@keyframes lh-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.lh-float {
    animation: lh-float 4s ease-in-out infinite;
    display: block;
    width: fit-content;
}

/* =====================================================
   PACOTE DE CARTAS (envelope selado — substitui baú)
   ===================================================== */
.lh-pack-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Envelope/pacote — visual de pacote de cartas colecionáveis
   (foil brilhante, com selo e tag) */
.lh-pack {
    position: relative;
    width: 10rem;
    height: 13rem;
    display: inline-block;
    cursor: pointer;
    transform-origin: center bottom;
    transition: transform .3s ease;
}

.lh-pack:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Camada de foil (superfície brilhante do pacote) */
.lh-pack-foil {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg,
            rgba(252,211,77,.85) 0%,
            rgba(244,114,182,.85) 35%,
            rgba(168,85,247,.85) 70%,
            rgba(99,102,241,.85) 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.4),
        inset 0 -20px 30px -10px rgba(0,0,0,.3),
        0 20px 40px -10px rgba(0,0,0,.4),
        0 0 60px -10px rgba(252,211,77,.5);
    overflow: hidden;
}

/* Reflexo diagonal do foil */
.lh-pack-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255,255,255,.5) 45%,
        rgba(255,255,255,.15) 55%,
        transparent 70%);
    background-size: 200% 200%;
    animation: lh-pack-shine 3s linear infinite;
    mix-blend-mode: overlay;
}

@keyframes lh-pack-shine {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

/* Selo central do pacote (emblema) */
.lh-pack-seal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #fde68a 40%, #f59e0b 100%);
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.8),
        inset 0 4px 8px rgba(0,0,0,.15),
        0 4px 12px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    z-index: 2;
}

/* Linhas decorativas no pacote (foil + brilho) */
.lh-pack-stripe {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.5) 50%,
        rgba(255,255,255,0) 100%);
    z-index: 1;
}

.lh-pack-stripe-top    { top: 1.2rem; }
.lh-pack-stripe-bottom { bottom: 1.2rem; }

/* Etiqueta do pacote (rodapé) */
.lh-pack-tag {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.6rem;
    text-align: center;
    color: rgba(255,255,255,.95);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    z-index: 2;
}

/* Etiqueta topo (season) */
.lh-pack-toplabel {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 0.6rem;
    text-align: center;
    color: rgba(255,255,255,.95);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    z-index: 2;
}

/* Animação: pacote rasgando / "saindo de cena" */
.lh-pack-wrap.is-opening .lh-pack {
    animation: lh-pack-open 1s cubic-bezier(.5,0,.7,.4) forwards;
}

@keyframes lh-pack-open {
    0% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
    30% {
        transform: scale(1.08) rotate(-2deg);
        opacity: 1;
    }
    60% {
        transform: scale(.85) rotate(8deg) translateY(20px);
        opacity: .6;
        filter: blur(2px);
    }
    100% {
        transform: scale(.3) rotate(15deg) translateY(120px);
        opacity: 0;
        filter: blur(6px);
    }
}

/* Flash de luz quando o pacote é aberto */
@keyframes lh-burst {
    0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
    40%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.lh-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(252,211,77,.85) 0%, rgba(252,211,77,0) 65%);
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    pointer-events: none;
}

.lh-pack-wrap.is-opening .lh-burst {
    animation: lh-burst 1.1s ease-out forwards;
}

/* Partículas subindo (confetes / brilhos) */
@keyframes lh-rise {
    0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -120px) scale(1.2); opacity: 0; }
}

.lh-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lh-particles span {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    font-size: 1.25rem;
    transform: translate(-50%, 0);
    opacity: 0;
}

.lh-pack-wrap.is-opening .lh-particles span {
    animation: lh-rise 1.6s ease-out forwards;
}

.lh-pack-wrap.is-opening .lh-particles span:nth-child(1) { animation-delay: .15s; left: 30%; }
.lh-pack-wrap.is-opening .lh-particles span:nth-child(2) { animation-delay: .30s; left: 45%; }
.lh-pack-wrap.is-opening .lh-particles span:nth-child(3) { animation-delay: .25s; left: 60%; }
.lh-pack-wrap.is-opening .lh-particles span:nth-child(4) { animation-delay: .40s; left: 75%; }
.lh-pack-wrap.is-opening .lh-particles span:nth-child(5) { animation-delay: .20s; left: 50%; }

/* Sombra do chão do pacote */
@keyframes lh-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .35; }
    50%      { transform: translateX(-50%) scaleX(.85); opacity: .25; }
}

.lh-pack-shadow {
    position: absolute;
    left: 50%;
    bottom: -.5rem;
    width: 8rem;
    height: .6rem;
    border-radius: 9999px;
    background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
    transform: translateX(-50%);
    animation: lh-shadow 3s ease-in-out infinite;
    pointer-events: none;
}

/* =====================================================
   CARTA SAINDO DO BAÚ
   Animação: a carta nasce dentro do baú, escala/voa pra cima
   e ao final fica centralizada na coluna direita.
   ===================================================== */
@keyframes lh-card-flyout {
    0% {
        transform: translate(-50%, 0) scale(0.2) rotateZ(-20deg);
        opacity: 0;
        filter: brightness(0.4) blur(6px);
    }
    30% {
        transform: translate(-50%, -80px) scale(0.55) rotateZ(10deg);
        opacity: 1;
        filter: brightness(1.2) blur(0);
    }
    65% {
        transform: translate(-50%, -160px) scale(0.95) rotateZ(-3deg);
        opacity: 1;
        filter: brightness(1) blur(0);
    }
    100% {
        transform: translate(-50%, -200px) scale(1) rotateZ(0deg);
        opacity: 1;
        filter: brightness(1) blur(0);
    }
}

.lh-card-flyout {
    position: absolute;
    left: 50%;
    bottom: 25%;
    width: 8rem;
    height: 11rem;
    transform: translate(-50%, 0) scale(0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.lh-chest-wrap.is-opening .lh-card-flyout {
    animation: lh-card-flyout 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Aura dourada atrás da carta saindo */
@keyframes lh-card-aura {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

.lh-card-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(252,211,77,.85) 0%, rgba(252,211,77,0) 60%);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.lh-chest-wrap.is-opening .lh-card-aura {
    animation: lh-card-aura 1.6s ease-out forwards;
}