/* Toast, convite de leilão, confirmação e comemorações.
   Cores vêm de variáveis definidas por tema em tema.css (--toast-*, --modal-*), com padrão escuro. */

/* ---------- Toast: um formato só para todos os tipos; muda apenas o ícone ---------- */
.toasts {
    position: fixed; z-index: 1000;
    left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    width: min(92vw, 420px);
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
/* Estilo "notificação de jogo mobile": card escuro com a cor da categoria, faixa lateral,
   etiqueta inclinada (TRANSAÇÃO, LOJA, LEILÃO...), ícone em gema 3D, entrada com impacto e barra de tempo.
   As cores são próprias de cada categoria (não dependem do tema), então leem bem em qualquer tema. */
.toast {
    --acento: #4cc9f0; --fundo-1: #0b1b3a; --fundo-2: #123566; --gema-texto: #fff; --selo-texto: #06101f;
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px 13px 10px; border-radius: 6px 18px 6px 18px;
    background: linear-gradient(110deg, var(--fundo-1) 0%, var(--fundo-2) 100%); color: #fff;
    border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); border-left: 5px solid var(--acento);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 20px color-mix(in srgb, var(--acento) 35%, transparent), 0 12px 28px rgba(0, 0, 0, .45);
    font: 700 14.5px/1.3 'Nunito', system-ui, sans-serif; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    animation: toast-entra .45s cubic-bezier(.2, 1.3, .4, 1);
    pointer-events: auto;
}
.toast::before {   /* textura de listras diagonais, discreta */
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 6px, transparent 6px 14px),
                radial-gradient(circle at 0 50%, color-mix(in srgb, var(--acento) 35%, transparent), transparent 55%);
}
.toast::after {    /* brilho passando uma vez na entrada */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
    transform: translateX(-120%); animation: toast-brilho 1.1s ease-out .15s 1;
}
/* Ícone em "gema" */
.toast > i {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px;
    font-size: 18px; color: var(--gema-texto); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
    background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 55%, #fff) 0%, var(--acento) 55%, color-mix(in srgb, var(--acento) 70%, #000) 100%);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 14px color-mix(in srgb, var(--acento) 60%, transparent);
    transform: rotate(-6deg); animation: gema-pop .5s cubic-bezier(.2, 1.6, .4, 1) .1s backwards;
}
.toast-corpo { display: block; min-width: 0; }
.toast-selo {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 3px; padding: 1px 9px 1px 7px;
    font: 900 10px/1.5 'Nunito', sans-serif; font-style: normal; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--selo-texto); text-shadow: none; background: var(--acento);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.toast-texto { display: block; }
.toast-tempo {     /* quanto falta para sumir */
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left;
    background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 40%, #fff));
    box-shadow: 0 0 8px var(--acento); animation: toast-tempo var(--dur, 4.5s) linear forwards;
}
.toast.saindo { animation: toast-sai .3s ease-in forwards; }

/* Categorias */
.toast.transacao { --acento: #2ee59d; --fundo-1: #04261a; --fundo-2: #0a4d34; --gema-texto: #03251a; }
.toast.sucesso   { --acento: #2ee59d; --fundo-1: #04261a; --fundo-2: #0a4d34; --gema-texto: #03251a; }
.toast.erro      { --acento: #ff4d6d; --fundo-1: #2b0710; --fundo-2: #5a0f22; animation: toast-entra .45s cubic-bezier(.2, 1.3, .4, 1), toast-treme .4s .45s; }
.toast.aviso     { --acento: #ff9f1c; --fundo-1: #2b1400; --fundo-2: #5a2c00; --gema-texto: #2b1400; }
.toast.info      { --acento: #4cc9f0; --fundo-1: #071a33; --fundo-2: #0e3a66; --gema-texto: #04203a; }
.toast.entrou    { --acento: #22d3ee; --fundo-1: #04252e; --fundo-2: #0a4a5a; --gema-texto: #03232b; }
.toast.leilao    { --acento: #ffb020; --fundo-1: #2a1500; --fundo-2: #5c3200; --gema-texto: #2a1500; }
.toast.leilao > i { animation: gema-pop .5s cubic-bezier(.2, 1.6, .4, 1) .1s backwards, martelada .5s ease-in-out .6s 2; }
.toast.poupanca  { --acento: #34d399; --fundo-1: #032a25; --fundo-2: #075045; --gema-texto: #032a25; }
.toast.poupanca > i { animation: gema-pop .5s cubic-bezier(.2, 1.6, .4, 1) .1s backwards, moeda-gira 1.2s ease-in-out .6s 2; }
.toast.loja      { --acento: #c084fc; --fundo-1: #1c0838; --fundo-2: #4c1d95; --gema-texto: #2a0a52; }
.toast.mercado   { --acento: #2dd4bf; --fundo-1: #032a27; --fundo-2: #0b4f49; --gema-texto: #022c28; }
.toast.ouro      { --acento: #ffd45c; --fundo-1: #3a1d00; --fundo-2: #8a4b00; --gema-texto: #3b2400; }

@keyframes toast-entra {
    0% { opacity: 0; transform: translateX(36px) scale(.9); }
    60% { opacity: 1; transform: translateX(-4px) scale(1.02); }
    100% { opacity: 1; transform: none; }
}
@keyframes toast-sai { to { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes toast-tempo { to { transform: scaleX(0); } }
@keyframes gema-pop { from { transform: rotate(-30deg) scale(.3); opacity: 0; } }
@keyframes martelada { 50% { transform: rotate(-28deg); } }
@keyframes moeda-gira { 50% { transform: rotate(-6deg) rotateY(180deg); } }
@keyframes toast-treme { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- Modais (convite, confirmação) ---------- */
.convite-fundo {
    position: fixed; inset: 0; z-index: 900;
    display: grid; place-items: end center;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: rgba(8, 5, 22, .65);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: toast-entra .2s ease-out;
}
@media (min-width: 600px) { .convite-fundo { place-items: center; } }
.convite {
    width: min(100%, 420px); overflow: hidden;
    border-radius: 24px; background: var(--modal-bg, linear-gradient(180deg, #2c2266, #1b1442));
    border: 1px solid var(--toast-borda, rgba(255, 255, 255, .14));
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    color: var(--modal-texto, #f5f2ff); font-family: 'Nunito', system-ui, sans-serif; text-align: center;
}
.convite-corpo { padding: 20px 20px 22px; }
.convite-icone {
    width: 64px; height: 64px; margin: -2px auto 10px; display: grid; place-items: center;
    border-radius: 20px; font-size: 28px; color: #3b2400;
    background: linear-gradient(180deg, #ffd45c, #ff9f1c);
    box-shadow: 0 5px 0 #b45309; animation: martelo 1s ease-in-out infinite;
}
@keyframes martelo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
.convite h3 { font: 600 22px 'Fredoka', 'Nunito', sans-serif; margin: 0 0 6px; }
.convite p { margin: 4px 0; color: var(--modal-texto-2, #b7add9); font-weight: 700; }

/* Mini título de posse (cor do grupo bem visível) */
.convite-titulo {
    margin: 12px auto 10px; max-width: 280px; overflow: hidden; border-radius: 14px;
    background: #f7f3e8; color: #2a2140; box-shadow: 0 5px 0 rgba(0, 0, 0, .25);
    transform: rotate(-2deg);
}
.convite-titulo-faixa {
    padding: 12px 12px 10px; background: var(--cor-grupo, #ffc83d); color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .4); border-bottom: 3px solid rgba(0, 0, 0, .15);
}
.convite-titulo-faixa small { display: block; font: 900 11px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 1px; opacity: .95; }
.convite-titulo-faixa b { display: block; font: 700 21px/1.15 'Fredoka', 'Nunito', sans-serif; }
.convite-titulo-corpo { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 800; font-size: 14px; }
.convite-titulo-corpo b { font: 700 18px 'Fredoka', 'Nunito', sans-serif; color: #b45309; }

/* Tempo para aceitar: barra que vai diminuindo */
.convite-tempo { height: 10px; border-radius: 99px; background: var(--modal-trilha, rgba(255, 255, 255, .12)); overflow: hidden; margin: 14px 0 6px; }
.convite-tempo i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ee59d, #ffc83d); transition: width .2s linear; }
.convite-tempo i.acabando { background: linear-gradient(90deg, #ff5c7a, #ff9f1c); }
.convite .convite-expira { font-size: 13px; margin: 0 0 4px; }

.convite-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.convite-botoes button {
    min-height: 52px; border: 0; border-radius: 16px; cursor: pointer;
    font: 600 17px 'Fredoka', 'Nunito', sans-serif; touch-action: manipulation;
}
.convite-botoes .sim { background: linear-gradient(180deg, #4ff0b0, #10b981); color: #032b1d; box-shadow: 0 5px 0 #047857; }
.convite-botoes .nao { background: var(--modal-botao, #3a2f7a); color: var(--modal-texto, #f5f2ff); box-shadow: 0 5px 0 var(--modal-botao-sombra, #17113a); }
.convite-botoes button:active { transform: translateY(4px); box-shadow: none; }

/* Confirmação no visual do jogo */
.confirmar-fundo { z-index: 1200; }
.confirmar-caixa .convite-icone { animation: none; background: linear-gradient(180deg, #6fd6f5, #4361ee); color: #fff; box-shadow: 0 5px 0 #1e3a8a; }
.confirmar-caixa.perigo { border-color: rgba(255, 92, 122, .5); }
.confirmar-caixa.perigo .convite-icone { background: linear-gradient(180deg, #ff7d95, #e11d48); box-shadow: 0 5px 0 #9f1239; }
.confirmar-caixa.perigo .sim { background: linear-gradient(180deg, #ff7d95, #e11d48); color: #fff; box-shadow: 0 5px 0 #9f1239; }
.confirmar-caixa p { margin: 0 0 6px; }

/* ---------- Comemoração (vitória no leilão) e fim de jogo ---------- */
.confete { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1100; pointer-events: none; }
.comemoracao {
    position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(255, 200, 61, .25), rgba(8, 5, 22, .8) 60%);
    animation: toast-entra .25s ease-out;
}
.comemoracao-caixa {
    width: min(100%, 380px); text-align: center; padding: 26px 22px 22px; border-radius: 28px;
    background: var(--modal-bg, linear-gradient(180deg, #3a1c8f, #1b1442)); color: var(--modal-texto, #f5f2ff);
    border: 2px solid rgba(255, 200, 61, .6); box-shadow: 0 0 60px rgba(255, 200, 61, .35), 0 20px 50px rgba(0, 0, 0, .5);
    font-family: 'Nunito', system-ui, sans-serif;
}
.comemoracao-trofeu {
    width: 92px; height: 92px; margin: -64px auto 12px; display: grid; place-items: center; border-radius: 50%;
    font-size: 44px; color: #3b2400; background: linear-gradient(180deg, #ffe17a, #f59e0b);
    box-shadow: 0 6px 0 #b45309, 0 0 40px rgba(255, 200, 61, .7);
    animation: trofeu 1.2s ease-in-out infinite;
}
.comemoracao.fim .comemoracao-trofeu { background: linear-gradient(180deg, #ffffff, #d1d5db); color: #111827; box-shadow: 0 6px 0 #6b7280, 0 0 40px rgba(255, 255, 255, .5); }
@keyframes trofeu { 50% { transform: translateY(-6px) rotate(-6deg); } }
.comemoracao h3 { font: 700 30px 'Fredoka', 'Nunito', sans-serif; margin: 0 0 6px; color: var(--modal-destaque, #ffc83d); }
.comemoracao p { font-weight: 800; font-size: 17px; margin: 0 0 18px; }
.comemoracao-botoes { display: grid; gap: 10px; }
.comemoracao-ok, .comemoracao-sec {
    width: 100%; min-height: 54px; border: 0; border-radius: 16px; cursor: pointer; text-decoration: none;
    display: grid; place-items: center; font: 600 19px 'Fredoka', 'Nunito', sans-serif;
}
.comemoracao-ok { color: #3b2400; background: linear-gradient(180deg, #ffd45c, #ff9f1c); box-shadow: 0 5px 0 #b45309; }
.comemoracao-sec { min-height: 46px; font-size: 16px; background: var(--modal-botao, #3a2f7a); color: var(--modal-texto, #f5f2ff); box-shadow: 0 4px 0 var(--modal-botao-sombra, #17113a); }
.comemoracao-ok:active, .comemoracao-sec:active { transform: translateY(4px); box-shadow: none; }

/* ---------- Faixa "você está num leilão" ---------- */
.faixa-leilao {
    position: fixed; z-index: 800; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; border: 0;
    background: linear-gradient(180deg, #ffd45c, #ff9f1c); color: #3b2400;
    font: 700 15px 'Nunito', system-ui, sans-serif; text-decoration: none;
    box-shadow: 0 6px 20px rgba(255, 159, 28, .45);
}
.faixa-leilao.vez { animation: pulsar 1s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: translateX(-50%) scale(1.06); } }


/* Textos: valores em destaque e sem quebrar no meio; linhas equilibradas */
.toast-texto, .convite p, .comemoracao p { text-wrap: pretty; overflow-wrap: break-word; }
.toast .valor, .convite .valor, .comemoracao .valor, .confirmar-caixa .valor { white-space: nowrap; font-weight: 900; }
.toast-texto { line-height: 1.35; }

/* ---------- Notificações especiais ---------- */
/* Conquista (marcos, sua vez, fim): ouro com raios girando e faíscas */
.toast.ouro { background: linear-gradient(115deg, #3a1d00, #8a4b00 55%, #e08a00); border-color: #ffd45c; }
.toast.ouro::after, .toast.lendaria::after { animation: toast-brilho 1.6s ease-in-out .2s 3; }
@keyframes toast-brilho { to { transform: translateX(120%); } }

/* Assinatura Lendária: "drop lendário" — borda de energia girando, raios, selo LENDÁRIO, faíscas e flash */
.toast.lendaria {
    --acento: #ffb020; --gema-texto: #3b1600; --selo-texto: #3b1600;
    padding: 12px 16px 14px 12px; border: 2px solid transparent; border-radius: 6px 18px 6px 18px;
    text-shadow: 0 1px 2px rgba(60, 20, 0, .7);
    background:
        linear-gradient(115deg, #3d0f00 0%, #8a2c00 35%, #e05a00 70%, #ffb020 100%) padding-box,
        conic-gradient(from var(--giro, 0deg), #fff3c4, #ffb703, #ff6a00, #ffd45c, #fff3c4, #ff6a00, #fff3c4) border-box;
    box-shadow: 0 0 0 1px rgba(255, 200, 61, .5), 0 0 28px rgba(255, 140, 0, .65), 0 16px 36px rgba(0, 0, 0, .5);
    animation: lendaria-entra .55s cubic-bezier(.2, 1.4, .4, 1), toast-giro 1.8s linear infinite;
}
.toast.lendaria::before, .toast.ouro::before {   /* raios de luz girando atrás do ícone */
    content: ''; position: absolute; z-index: -1; inset: auto; left: -40px; top: 50%; width: 140px; height: 140px; margin-top: -70px;
    background: repeating-conic-gradient(rgba(255, 246, 208, .28) 0 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
    animation: aura-girar 6s linear infinite;
}
.toast.lendaria > i { width: 42px; height: 42px; font-size: 19px; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #ff9f1c); box-shadow: 0 3px 0 #8a3b00, 0 0 16px rgba(255, 220, 120, .9); }
.toast.lendaria .toast-selo, .toast.ouro .toast-selo { background: linear-gradient(90deg, #fff3c4, #ffc83d); }
.toast-selo b { color: #c2410c; }
.toast.lendaria .toast-texto { font-size: 15px; }
.toast.lendaria .valor, .toast.ouro .valor { color: #fff3c4; }
/* Nome Dourado sobre fundo dourado/laranja: ouro claro com contorno escuro */
.toast.lendaria .nome-dourado, .toast.ouro .nome-dourado {
    background-image: linear-gradient(100deg, #fff8dc 0%, #ffe680 30%, #ffffff 45%, #ffd45c 60%, #fff8dc 100%);
    filter: drop-shadow(0 1px 0 #4a1a00) drop-shadow(0 0 1px #4a1a00) drop-shadow(0 0 6px rgba(255, 255, 255, .6));
    animation: nome-brilho 2.2s linear infinite;
}
/* Faíscas subindo (lendária, loja, conquista) na cor da categoria */
.toast-faiscas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.toast-faiscas i {
    position: absolute; bottom: -6px; width: 5px; height: 5px; border-radius: 50%;
    background: color-mix(in srgb, var(--acento) 30%, #fff); box-shadow: 0 0 6px 2px var(--acento);
    animation: faisca-sobe 1.8s ease-out infinite;
}
.toast-faiscas i:nth-child(1) { left: 18%; animation-delay: 0s; }
.toast-faiscas i:nth-child(2) { left: 38%; animation-delay: .5s; width: 3px; height: 3px; }
.toast-faiscas i:nth-child(3) { left: 58%; animation-delay: .2s; }
.toast-faiscas i:nth-child(4) { left: 76%; animation-delay: .9s; width: 4px; height: 4px; }
.toast-faiscas i:nth-child(5) { left: 92%; animation-delay: 1.3s; width: 3px; height: 3px; }
@keyframes faisca-sobe { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70px) scale(.4); opacity: 0; } }
@keyframes lendaria-entra {
    0% { opacity: 0; transform: translateY(-18px) scale(.7); filter: brightness(3); }
    60% { opacity: 1; transform: translateY(2px) scale(1.04); filter: brightness(1.4); }
    100% { transform: none; filter: none; }
}
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes toast-giro { to { --giro: 360deg; } }
@keyframes aura-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .toast, .convite-fundo, .comemoracao, .convite-icone, .comemoracao-trofeu, .faixa-leilao.vez { animation: none; }
    .toast::after, .toast > i, .toast-tempo, .toast.lendaria, .toast.lendaria::before, .toast.ouro::before, .toast-faiscas i { animation: none; }
    .toast-faiscas { display: none; }
}



/* ==========================================================================
   BALÕES PERSONALIZADOS (Loja › Visual): como os OUTROS veem a notificação das suas jogadas.
   Mesma estrutura (gema + selo + texto), cada estilo com moldura, fundo e efeito próprios.
   Raro = moldura fixa · Épico/Lendário = moldura de energia girando · Mítico = holográfico.
   ========================================================================== */
.toast.balao { --b1: #fff; --b2: #ffc83d; --b3: #b45309; --brilho: rgba(255, 200, 61, .5); --escuro: #3b2400; --fundo: #1b1442; }   /* padrão; cada estilo abaixo troca */
.toast.balao:not(.lendaria) {
    --acento: var(--b2);
    padding: 12px 16px 14px 12px; border: 2px solid transparent; border-radius: 6px 18px 6px 18px; color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
    background: var(--fundo) padding-box, conic-gradient(from var(--giro, 0deg), var(--b1), var(--b2), var(--b3), var(--b2), var(--b1)) border-box;
    box-shadow: 0 0 22px var(--brilho), 0 16px 36px rgba(0, 0, 0, .5);
    animation: lendaria-entra .55s cubic-bezier(.2, 1.4, .4, 1), toast-giro 2.6s linear infinite;
}
.toast.balao.raridade-raro:not(.lendaria) { animation: lendaria-entra .55s cubic-bezier(.2, 1.4, .4, 1); }
.toast.balao:not(.lendaria) > i {
    width: 42px; height: 42px; font-size: 19px; border-radius: 12px; color: var(--escuro);
    background: linear-gradient(180deg, #fff, var(--b2) 55%, var(--b3)); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 16px var(--brilho);
}
.toast.balao:not(.lendaria) .toast-selo { background: linear-gradient(90deg, #fff, var(--b2)); color: var(--escuro); }
.toast.balao:not(.lendaria) .toast-texto { font-size: 15px; }
.toast.balao:not(.lendaria) .valor { color: #fff; text-shadow: 0 0 8px var(--brilho); }
.toast.balao:not(.lendaria)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.toast.balao .toast-faiscas i { background: #fff; box-shadow: 0 0 6px 2px var(--b2); }

/* Coroa de Ouro (Raro): metal dourado com reflexo */
.toast.balao-ouro { --b1: #fff3c4; --b2: #ffc83d; --b3: #b45309; --brilho: rgba(255, 200, 61, .55); --escuro: #3b2400;
    --fundo: linear-gradient(115deg, #2e1c00, #6b4300 50%, #a86f00); }
.toast.balao-ouro::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px); }

/* Neon Cyber (Épico): grade cyber, rosa e ciano, letreiro piscando */
.toast.balao-neon { --b1: #ff2fd6; --b2: #00f0ff; --b3: #7c3aed; --brilho: rgba(255, 47, 214, .55); --escuro: #12002a;
    --fundo: linear-gradient(115deg, #08031c, #1a0b3d 60%, #2a0b4f); }
.toast.balao-neon::before {
    background: repeating-linear-gradient(0deg, rgba(0, 240, 255, .09) 0 1px, transparent 1px 9px),
                repeating-linear-gradient(90deg, rgba(255, 47, 214, .08) 0 1px, transparent 1px 14px);
}
.toast.balao-neon .toast-texto { text-shadow: 0 0 6px rgba(0, 240, 255, .8), 0 0 2px #ff2fd6; animation: letreiro-falha 3.5s steps(1) infinite; }

/* Cristal (Épico): gelo facetado com reflexo */
.toast.balao-cristal { --b1: #ffffff; --b2: #a5f3fc; --b3: #0284c7; --brilho: rgba(125, 211, 252, .6); --escuro: #06243f;
    --fundo: linear-gradient(115deg, #052139, #0d4670 55%, #3f9ad1); }
.toast.balao-cristal::before {
    background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 14px),
                repeating-linear-gradient(-60deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px);
}

/* Labareda (Lendário): chamas subindo da base */
.toast.balao-fogo { --b1: #ffd23f; --b2: #ff7a00; --b3: #dc2626; --brilho: rgba(255, 90, 0, .6); --escuro: #3b0a00;
    --fundo: linear-gradient(0deg, #9a3412 0%, #5c1206 35%, #250505 75%, #160303 100%); }
.toast.balao-fogo::before {
    top: auto !important; height: 70%;
    background: radial-gradient(ellipse 16px 30px at 8% 100%, rgba(255, 210, 63, .9), rgba(255, 122, 0, .6) 45%, transparent 72%),
                radial-gradient(ellipse 20px 38px at 28% 100%, rgba(255, 183, 3, .85), rgba(220, 38, 38, .55) 45%, transparent 72%),
                radial-gradient(ellipse 14px 26px at 47% 100%, rgba(255, 210, 63, .85), rgba(255, 122, 0, .55) 45%, transparent 72%),
                radial-gradient(ellipse 22px 40px at 68% 100%, rgba(255, 183, 3, .85), rgba(220, 38, 38, .55) 45%, transparent 72%),
                radial-gradient(ellipse 16px 30px at 90% 100%, rgba(255, 210, 63, .9), rgba(255, 122, 0, .6) 45%, transparent 72%);
    transform-origin: 50% 100%; animation: labareda .35s ease-in-out infinite alternate;
}
@keyframes labareda { from { transform: scaleY(.85); opacity: .75; } to { transform: scaleY(1.1); opacity: 1; } }

/* Nebulosa (Lendário): galáxia com estrelas piscando */
.toast.balao-galaxia { --b1: #f0abfc; --b2: #c084fc; --b3: #6366f1; --brilho: rgba(168, 85, 247, .6); --escuro: #2e1065;
    --fundo: radial-gradient(circle at 85% 15%, rgba(244, 114, 182, .5), transparent 40%), radial-gradient(circle at 15% 90%, rgba(96, 165, 250, .45), transparent 45%), linear-gradient(115deg, #0b0420, #2e1065 55%, #4c1d95); }
.toast.balao-galaxia::before {
    background: radial-gradient(1.5px 1.5px at 12% 25%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
                radial-gradient(1.5px 1.5px at 52% 18%, #fff, transparent), radial-gradient(1px 1px at 66% 60%, #fff, transparent),
                radial-gradient(2px 2px at 80% 35%, #fff, transparent), radial-gradient(1px 1px at 92% 80%, #fff, transparent),
                radial-gradient(1px 1px at 40% 45%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 88%, #fff, transparent);
    animation: estrelas 1.6s ease-in-out infinite alternate;
}
@keyframes estrelas { from { opacity: .45; } to { opacity: 1; } }

/* Holograma (Mítico): moldura arco-íris + reflexo holográfico correndo */
.toast.balao-arcoiris { --b1: #ff3d6e; --b2: #ffe14d; --b3: #4cc9f0; --brilho: rgba(160, 108, 255, .6); --escuro: #1a1033;
    --fundo: linear-gradient(115deg, #0f0f28, #1d1440 60%, #2b1858);
    background: var(--fundo) padding-box, conic-gradient(from var(--giro, 0deg), #ff3d6e, #ff9f1c, #ffe14d, #2ee59d, #4cc9f0, #a06cff, #ff3d6e) border-box !important; }
.toast.balao-arcoiris::before {
    background: linear-gradient(115deg, rgba(255, 61, 110, .22), rgba(255, 225, 77, .22), rgba(46, 229, 157, .22), rgba(76, 201, 240, .22), rgba(160, 108, 255, .22), rgba(255, 61, 110, .22));
    background-size: 300% 100%; animation: holograma 3s linear infinite;
}
@keyframes holograma { to { background-position: -300% 0; } }
.toast.balao-arcoiris > i { background: conic-gradient(from 0deg, #ff3d6e, #ff9f1c, #ffe14d, #2ee59d, #4cc9f0, #a06cff, #ff3d6e) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.toast.balao-arcoiris .toast-selo { background: linear-gradient(90deg, #ff3d6e, #ffe14d, #2ee59d, #4cc9f0, #a06cff) !important; color: #1a1033 !important; }

/* Prévia dos balões dentro da Loja (sem ficar presa no topo) */
.balao-previa .toast { pointer-events: none; animation-name: none, toast-giro; }
.balao-previa .toast.raridade-raro { animation: none; }
@media (prefers-reduced-motion: reduce) { .toast.balao, .toast.balao::before, .toast.balao .toast-texto { animation: none !important; } }
.toast.balao-ouro .nome-ouro, .toast.balao-fogo .nome-fogo {
    background-image: linear-gradient(100deg, #fff8dc 0%, #ffe680 30%, #ffffff 45%, #ffd45c 60%, #fff8dc 100%);
    filter: drop-shadow(0 1px 0 #4a1a00) drop-shadow(0 0 1px #4a1a00); animation: nome-brilho 2.2s linear infinite;
}

/* ==========================================================================
   PLANO B para celulares com navegador mais antigo (sem color-mix / camadas novas):
   fundo SÓLIDO por baixo de toda notificação, balão e pop-up — nunca fica transparente.
   ========================================================================== */
.toast { background-color: var(--fundo-1); }
.toast.lendaria, .toast.balao.lendaria { background-color: #5c1a00; }
.toast.ouro { background-color: #5a2e00; }
.toast.balao.balao:not(.lendaria) { background-color: #14112e; }
.toast.balao.balao-ouro:not(.lendaria) { background-color: #4a2e00; }
.toast.balao.balao-neon:not(.lendaria) { background-color: #12072e; }
.toast.balao.balao-cristal:not(.lendaria) { background-color: #0a3352; }
.toast.balao.balao-fogo:not(.lendaria) { background-color: #2a0707; }
.toast.balao.balao-galaxia:not(.lendaria) { background-color: #1f0b45; }
.toast.balao.balao-arcoiris:not(.lendaria) { background-color: #16112f !important; }
.convite, .confirmar-caixa, .comemoracao-caixa { background-color: #1b1442; }
.confirmar-caixa.perigo { background-color: #2a0912; }
/* Gema e borda: cor simples quando o navegador não entende color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .toast { border-color: var(--acento); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
    .toast > i { background: var(--acento); }
    .toast::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 6px, transparent 6px 14px); }
    .toast-tempo { background: var(--acento); }
}