/* =============================================================================
   boot-splash.css — splash de carregamento do runtime WASM (fase de boot "frio")
   Prefixo: bs-*  |  Paleta literal v2 (sem tokens dos arquivos v2, que carregam
   depois). Espelha o vocabulário do LoadingContainer + ambiente lv-bg.
   Cores: near-black #070A0F · dourado #D4AF37 · gradiente #F4D67A→#D4AF37→#B5942A
   ========================================================================== */

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes bs-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
}
@keyframes bs-aura-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.12); }
}
@keyframes bs-card-flip {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@keyframes bs-shimmer {
    to { background-position: 200% center; }
}
@keyframes bs-dot-pulse {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(-4px); }
}
/* segmento dourado que vai e volta na barra (indeterminado) */
@keyframes bs-indeterminate {
    from { left: -3%; }
    to   { left: 65%; }
}

/* ---- Container full-screen ----------------------------------------------- */
.bs-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    overflow: hidden;
    background: #070A0F;
    color: #ECECEC;
    font-family: 'Inter', system-ui, sans-serif;
    opacity: 1;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-splash--out {
    opacity: 0;
    pointer-events: none;
}

/* ---- Ambiente lv-bg (auras + naipes flutuantes) replicado ---------------- */
.bs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bs-bg__aura {
    position: absolute;
    border-radius: 50%;
}
.bs-bg__aura--a {
    top: -12%; right: 8%;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(37, 208, 138, .10), transparent 65%);
    animation: bs-aura-drift 16s ease-in-out infinite;
}
.bs-bg__aura--b {
    bottom: -18%; left: 18%;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(243, 196, 63, .07), transparent 65%);
    animation: bs-aura-drift 20s ease-in-out infinite reverse;
}
.bs-bg__suit {
    position: absolute;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1;
}
.bs-bg__suit > span { display: inline-block; }
.bs-bg__suit--spade   { top: 18%; left: 38%; font-size: 200px; color: #fff;     opacity: .018; transform: rotate(-14deg); }
.bs-bg__suit--spade > span   { animation: bs-bob 9s ease-in-out infinite; }
.bs-bg__suit--heart   { top: 52%; right: 14%; font-size: 150px; color: #ef6a5e; opacity: .03;  transform: rotate(12deg); }
.bs-bg__suit--heart > span   { animation: bs-bob 11s ease-in-out infinite 1s; }
.bs-bg__suit--diamond { bottom: 8%; left: 30%; font-size: 130px; color: #f3c43f; opacity: .028; transform: rotate(-8deg); }
.bs-bg__suit--diamond > span { animation: bs-bob 13s ease-in-out infinite .5s; }
.bs-bg__suit--club    { top: 8%; left: 14%; font-size: 120px; color: #fff;     opacity: .016; transform: rotate(16deg); }
.bs-bg__suit--club > span    { animation: bs-bob 10s ease-in-out infinite 2s; }

/* ---- Conteúdo central ---------------------------------------------------- */
.bs-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* ---- Carta de truco girando em CSS 3D ------------------------------------
   Duas faces filhas com backface-visibility:hidden (padrão flip-card) — sem
   isso, uma carta de face única girando mostra o próprio conteúdo espelhado
   entre 180°-270°, lido como "parte em branco". Frente = verso/marca (♠)
   de sempre; verso = "4 Zap" estilizado (índices de canto + 4 pips), tudo
   no mesmo dourado-sobre-escuro — nenhuma arte PNG entra aqui. */
.bs-card-stage {
    perspective: 900px;
    width: 120px;
    height: 168px;
}
.bs-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: bs-card-flip 2.8s linear infinite;
}
.bs-card__face {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(160deg, #14202b 0%, #0d131b 100%);
    border: 1px solid rgba(212, 175, 55, .35);
    box-shadow: 0 22px 60px -18px rgba(0, 0, 0, .8),
                0 0 22px rgba(212, 175, 55, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-card__face--back {
    transform: rotateY(180deg);
}
.bs-card__emblem {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    background: linear-gradient(92deg, #F4D67A 0%, #D4AF37 55%, #B5942A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Face "4 Zap" (verso estilizado, sem PNG) -----------------------------
   Espelha a composição da carta cheia (cards/4/4_of_clubs.png): índice de
   canto (rank + naipe pequenos) no topo-esquerda, o mesmo espelhado 180° no
   fundo-direita, e os 4 pips principais no corpo — tudo em gradiente dourado. */
.bs-card__pip,
.bs-card__rank {
    background: linear-gradient(92deg, #F4D67A 0%, #D4AF37 55%, #B5942A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bs-card__pip {
    font-family: 'Barlow', system-ui, sans-serif;
}
.bs-card__rank {
    font-family: 'Oswald', 'Barlow Condensed', sans-serif;
    font-weight: 700;
}
.bs-card__index {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.bs-card__index .bs-card__rank {
    font-size: 15px;
}
.bs-card__index .bs-card__pip {
    font-size: 12px;
}
.bs-card__index--top {
    top: 8px;
    left: 10px;
}
.bs-card__index--bottom {
    bottom: 8px;
    right: 10px;
    transform: rotate(180deg);
}
.bs-card__pips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px 20px;
}
.bs-card__pips .bs-card__pip {
    font-size: 24px;
}

/* ---- Texto "Carregando" + dots ------------------------------------------- */
.bs-text-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.bs-text {
    font-family: 'Oswald', 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(92deg, #F4D67A 0%, #D4AF37 55%, #B5942A 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bs-shimmer 2.5s infinite linear;
}
.bs-dots span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D4AF37;
    animation: bs-dot-pulse 1.4s infinite;
    opacity: 0;
}
.bs-dots span:nth-child(2) { animation-delay: 0.2s; }
.bs-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ---- Barra de progresso dourada (indeterminada) -------------------------
   Um segmento dourado (`bs-bar__fill`) que vai e volta de um lado ao outro
   (animação `bs-indeterminate`, `alternate`). Sem progresso real / sem `%`. */
.bs-bar {
    position: relative;
    width: 280px;
    max-width: 70vw;
    height: 8px;
    border-radius: 999px;
    background: rgba(212, 175, 55, .14);
    overflow: hidden;
}
.bs-bar__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    border-radius: 999px;
    background: linear-gradient(90deg, #B5942A 0%, #D4AF37 60%, #F4D67A 100%);
    box-shadow: 0 0 12px rgba(212, 175, 55, .5);
    animation: bs-indeterminate 1.5s ease-in-out infinite alternate;
}
/* Mensagem única ("Preparando a mesa pra você…"). */
.bs-msg {
    min-height: 1.2em;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #B8BECC;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ---- Acessibilidade: reduzir movimento ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bs-splash {
        transition: none;
    }
    .bs-card,
    .bs-bg__suit > span,
    .bs-bg__aura--a,
    .bs-bg__aura--b,
    .bs-text,
    .bs-dots span,
    .bs-bar__fill {
        animation: none !important;
        transition: none !important;
    }
    /* estado estático legível */
    .bs-card { transform: rotateY(0deg); }
    .bs-dots span { opacity: 1; }
    .bs-text {
        background-position: 0 center;
    }
    /* barra indeterminada vira preenchimento estático */
    .bs-bar__fill { left: 0; width: 100%; }
}