/* ==========================================================================
   jogo.css — "pele" de jogo mobile (estilo battle royale: Free Fire / Fortnite)
   Carregado DEPOIS de tema.css e do CSS da página, em todas as telas.
   Linguagem visual: cantos/etiquetas inclinadas, ícones em gema 3D, brilho passando,
   cores de raridade (raro azul · épico roxo · lendário laranja/dourado) e muito contraste.
   Usa as variáveis do tema, então funciona nos 3 temas.
   ========================================================================== */

:root { --corte: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* ---------- Títulos de seção: barra de destaque inclinada + caixa alta ---------- */
.secao-titulo > span:first-child, h2.secao-titulo > span:first-child {
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: uppercase; letter-spacing: .6px; font-size: 15px;
}
.secao-titulo > span:first-child::before {
    content: ''; width: 6px; height: 18px; flex: none;
    background: linear-gradient(180deg, #ffd45c, #ff7a00); transform: skewX(-14deg);
    box-shadow: 0 0 8px rgba(255, 160, 40, .6);
}
.secao-titulo > span:first-child:has(> i)::before { display: none; }
.secao-titulo > span:first-child > i:first-child {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 13px;
    color: #3b2400 !important; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 10px rgba(255, 200, 61, .45); transform: rotate(-6deg);
}

/* ---------- Título de card: mesmo padrão (ícone em gema, caixa alta) ---------- */
.card-titulo { text-transform: uppercase; letter-spacing: .5px; font-size: 15px; }
.card-titulo > i:first-child {
    width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; font-size: 13px;
    color: #3b2400 !important; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 10px rgba(255, 200, 61, .45); transform: rotate(-6deg);
}

/* ---------- Topo: ícone do título em gema ---------- */
.topo h1 { display: flex; align-items: center; gap: 7px; font-size: 18px; }
.topo .chip-jogador { max-width: 38%; }
/* Celular: no topo, o chip mostra só o avatar (o título da tela precisa do espaço) */
@media (max-width: 440px) {
    .topo .chip-jogador { padding: 4px; background: none; border: 0; }
    .topo .chip-jogador > span:not(.avatar) { display: none; }
}
.topo h1 > *:not(i) { min-width: 0; }
.topo h1 i {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center; margin: 0 !important; border-radius: 9px; font-size: 14px;
    color: #3b2400 !important; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 12px rgba(255, 200, 61, .5); transform: rotate(-6deg);
}

/* ---------- Selos / badges: etiqueta inclinada ---------- */
.selo {
    border-radius: 0; clip-path: var(--corte); padding: 3px 11px; letter-spacing: .9px;
    font-family: 'Nunito', sans-serif; font-weight: 900;
}
.selo.ouro { background: linear-gradient(90deg, #fff3c4, #ffc83d 50%, #ff9f1c); color: #3b1600; }
.selo.verde { background: linear-gradient(90deg, #6ff7c3, #10b981); color: #03251a; }
.selo.vermelho { background: linear-gradient(90deg, #ff8fa3, #e11d48); color: #fff; }

/* ---------- Botões: brilho no topo + reflexo passando nos principais ---------- */
.btn { position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: .5px; }
.btn::before {   /* gloss */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); border-radius: inherit;
}
.btn-ouro::after, .btn-verde::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-130%); animation: reflexo 3.6s ease-in-out infinite;
}
@keyframes reflexo { 55%, 100% { transform: translateX(130%); } }
.btn:disabled::after { animation: none; }

/* ---------- Abas: aba ativa vira "botão de jogo" inclinado ---------- */
.aba { text-transform: uppercase; letter-spacing: .2px; font-size: 12px; white-space: nowrap; }
.aba i { margin-right: 5px; }
.faixa-leilao { white-space: nowrap; }
.aba.ativa {
    color: #3b2400 !important; clip-path: var(--corte); border-radius: 0 !important;
    background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b) !important;
    box-shadow: none !important;
}

/* ---------- Cards: realce no topo (vidro) e borda que acende ---------- */
.card { position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sombra, 0 10px 24px rgba(0, 0, 0, .25)); }

/* ---------- Estatística / conquistas ---------- */
.stat { position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 3px; background: linear-gradient(90deg, #ffd45c, #ff7a00); }
.conquista { position: relative; overflow: hidden; }
.conquista .medalha {
    border-radius: 0; font-size: 17px; width: 42px; height: 46px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);   /* hexágono */
    background: linear-gradient(180deg, #fff3c4, #ffc83d 50%, #e08a00); box-shadow: none;
}
.conquista b { text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Extrato: ícone do movimento em gema ---------- */
.mov-icone { border-radius: 11px !important; transform: rotate(-5deg); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .2); }

/* ---------- Ranking: pódio com medalhas ---------- */
.ranking .posicao.p1, .ranking .posicao.p2, .ranking .posicao.p3, .corrida .posicao.p1, .corrida .posicao.p2, .corrida .posicao.p3 {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0;
}
.ranking .posicao.p1, .corrida .posicao.p1 { background: linear-gradient(180deg, #fff3c4, #ffc83d 50%, #e08a00); color: #3b1600; }
.ranking .posicao.p2, .corrida .posicao.p2 { background: linear-gradient(180deg, #ffffff, #cbd5e1 50%, #94a3b8); color: #1e293b; }
.ranking .posicao.p3, .corrida .posicao.p3 { background: linear-gradient(180deg, #fed7aa, #f97316 50%, #9a3412); color: #fff; }
.valor.faixa, .numero.faixa { font-size: .82em; letter-spacing: 0; }
.nota-faixa { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; font-size: 12px; font-weight: 700; color: var(--texto-3); }
.nota-faixa a { color: var(--texto-ouro); }

/* ==========================================================================
   Menu de baixo: barra de jogo com linha neon, ícones com degradê,
   item ativo com placa inclinada e Carteira como gema central
   ========================================================================== */
.nav-inferior {
    background: linear-gradient(180deg, color-mix(in srgb, var(--barra) 92%, #000), var(--barra));
    border-top: 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.nav-inferior::before {   /* linha neon no topo */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #ffc83d 20%, #ff7a00 50%, #ffc83d 80%, transparent);
    box-shadow: 0 0 10px rgba(255, 160, 40, .7);
}
.nav-inferior a { isolation: isolate; position: relative; font-size: 10px; transition: transform .12s; }
.nav-inferior a:active { transform: scale(.9); }
.nav-inferior a:not(.central) i {
    background: linear-gradient(180deg, color-mix(in srgb, var(--texto-3) 60%, #fff), var(--texto-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-inferior a.ativo:not(.central)::before {   /* placa inclinada atrás do item ativo */
    content: ''; position: absolute; inset: 4px 2px; z-index: -1; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    background: linear-gradient(180deg, rgba(255, 200, 61, .28), rgba(255, 122, 0, .1));
    border-bottom: 2px solid #ffc83d;
}
.nav-inferior a.ativo:not(.central) i {
    background: linear-gradient(180deg, #fff3c4, #ffc83d 50%, #ff7a00); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(255, 180, 40, .7)); animation: icone-pula .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes icone-pula { from { transform: translateY(4px) scale(.8); } }
.nav-inferior a.central i {
    border-radius: 14px; transform: rotate(45deg); width: 46px; height: 46px; margin-top: -16px;   /* um pouco mais baixa: não encosta no OK da Carteira */
    background: linear-gradient(135deg, #fff3c4, #ffc83d 45%, #ff7a00);
    box-shadow: 0 4px 0 #9a3412, 0 0 18px rgba(255, 160, 40, .65), inset 0 2px 0 rgba(255, 255, 255, .6);
}
.nav-inferior a.central i::before { display: inline-block; transform: rotate(-45deg); }
.nav-inferior a.central { color: var(--texto-ouro); }

/* ==========================================================================
   LEILÃO — cards de título como carta colecionável, placar de arena, fila de jogadores
   ========================================================================== */
/* Escolha do título: CARTA COLECIONÁVEL (estilo item de battle royale)
   arte na cor do grupo com raios + ícone em gema + estrelas de nível; placa escura com o nome;
   selecionada: levanta, borda de energia girando e selo de check */
.titulos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.titulo-posse {
    --c: var(--cor-grupo, #ffc83d);
    position: relative; display: flex !important; flex-direction: column; overflow: hidden; isolation: isolate;
    min-height: 0 !important; padding: 0; border-radius: 4px 14px 4px 14px !important;
    background: #120c26 !important; color: #fff !important;
    border: 2px solid color-mix(in srgb, var(--c) 70%, #000);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 12px color-mix(in srgb, var(--c) 30%, transparent) !important;
    cursor: pointer; transition: transform .15s cubic-bezier(.2, 1.4, .4, 1), box-shadow .15s;
}
.titulo-posse:active { transform: scale(.96); }
.titulo-posse .faixa { display: none; }
/* Arte */
.carta-arte {
    position: relative; height: 66px; display: grid; place-items: center; overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 11px),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 85%, #fff) 0%, var(--c) 35%, color-mix(in srgb, var(--c) 55%, #000) 100%);
}
.carta-arte::after {   /* brilho passando */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-130%); animation: reflexo 4.5s ease-in-out infinite;
}
.carta-raios {
    position: absolute; width: 160px; height: 160px; left: 50%; top: 55%; margin: -80px 0 0 -80px;
    background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 9deg, transparent 9deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 15%, transparent 65%); mask: radial-gradient(circle, #000 15%, transparent 65%);
    animation: aura-girar 14s linear infinite;
}
.carta-gema {
    position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 11px; transform: rotate(-8deg); font-size: 18px; color: color-mix(in srgb, var(--c) 45%, #000);
    background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--c) 25%, #fff) 55%, color-mix(in srgb, var(--c) 55%, #fff));
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 255, 255, .45);
}
.carta-estrelas { position: absolute; z-index: 1; top: 5px; left: 6px; display: flex; gap: 1px; font-size: 9px; color: #fff3c4; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
/* Placa do nome */
.carta-placa {
    position: relative; display: block; padding: 6px 8px 8px; text-align: left;
    background: linear-gradient(180deg, #1d1440, #120c26); border-top: 2px solid var(--c);
}
.carta-placa small {
    display: inline-block; max-width: 100%; margin-bottom: 3px; padding: 0 7px; font: 900 8px/1.6 'Nunito', sans-serif; letter-spacing: .5px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
    color: #120c26; background: var(--c); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.titulo-posse .carta-placa .nome { display: block; padding: 0 !important; overflow-wrap: anywhere; font: 700 12.5px/1.15 'Fredoka', 'Nunito', sans-serif !important; color: #fff; }
/* Nível 4 (Verde, Azul escuro): borda dourada de carta rara */
.titulo-posse.nivel-4 { border-color: #ffc83d; }
.titulo-posse.nivel-4 .carta-estrelas { color: #ffd45c; }
/* Selecionada */
.carta-check {
    position: absolute; z-index: 3; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center;
    border-radius: 50%; font-size: 12px; color: #03251a; background: linear-gradient(180deg, #6ff7c3, #10b981);
    box-shadow: 0 2px 0 #047857, 0 0 10px rgba(46, 229, 157, .8); transform: scale(0); transition: transform .2s cubic-bezier(.2, 1.6, .4, 1);
}
.titulo-posse:has(input:checked) {
    outline: 0 !important; transform: translateY(-5px) scale(1.04); z-index: 2;
    border: 2px solid transparent;
    background: linear-gradient(#120c26, #120c26) padding-box,
                conic-gradient(from var(--giro, 0deg), var(--c), #fff, #ffd45c, var(--c), #fff, var(--c)) border-box !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 26px var(--c), 0 10px 0 rgba(0, 0, 0, .35) !important;
    animation: toast-giro 2s linear infinite;
}
.titulo-posse:has(input:checked) .carta-check { transform: scale(1); }
.titulo-posse:has(input:checked) .carta-gema { animation: gema-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.titulo-posse:has(input:focus-visible) { outline: 3px solid var(--azul) !important; outline-offset: 2px; }.grupo legend { letter-spacing: 1px; }
.grupo .bolinha { border-radius: 0; transform: rotate(45deg); width: 12px; height: 12px; }

/* Card do título na sala: carta lendária com borda de energia na cor do grupo */
.titulo-card {
    position: relative; border-radius: 16px; border: 3px solid transparent;
    background: linear-gradient(#f7f3e8, #f7f3e8) padding-box,
                conic-gradient(from var(--giro, 0deg), var(--cor-grupo, #ffc83d), #fff, var(--cor-grupo, #ffc83d), #fff3c4, var(--cor-grupo, #ffc83d)) border-box;
    box-shadow: 0 0 26px color-mix(in srgb, var(--cor-grupo, #ffc83d) 60%, transparent), 0 8px 0 rgba(0, 0, 0, .35);
    animation: toast-giro 3s linear infinite;
}
.titulo-card-faixa { position: relative; overflow: hidden; }
.titulo-card-faixa::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
    transform: translateX(-130%); animation: reflexo 3s ease-in-out infinite;
}
.titulo-card-faixa b { text-transform: uppercase; letter-spacing: .5px; }
.titulo-card-faixa small { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* Sobre o papel creme do título: ouro escuro (o dourado claro sumia) */
.titulo-card .nome-dourado, .titulo-posse .nome-dourado, .convite-titulo .nome-dourado {
    background-image: linear-gradient(100deg, #7a4300 0%, #c27c00 25%, #f0a800 40%, #9a5800 60%, #7a4300 100%);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
.titulo-card .nome-dourado::after, .convite-titulo .nome-dourado::after { -webkit-text-fill-color: #c27c00; color: #c27c00; }
.btn { white-space: nowrap; }

/* Placar: número grande de arena, rodadas em pips inclinados */
.placar-lance strong { letter-spacing: -.5px; animation: placar-pulso 2s ease-in-out infinite; }
@keyframes placar-pulso { 50% { text-shadow: 0 0 34px rgba(255, 200, 61, .7), 0 0 4px rgba(255, 255, 255, .6); } }
.rodadas i { border-radius: 0; transform: skewX(-20deg); height: 10px; }
.rodadas i.atual { animation: pip .9s ease-in-out infinite; }
@keyframes pip { 50% { filter: brightness(1.5); } }
.cronometro .barra > i {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 8px, transparent 8px 16px), linear-gradient(90deg, var(--verde), var(--ouro));
    background-size: 22px 22px, 100% 100%; animation: listras .6s linear infinite;
}
.cronometro.urgente .barra > i { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 8px, transparent 8px 16px), linear-gradient(90deg, var(--vermelho), var(--ouro-2)); }
@keyframes listras { to { background-position: 22px 0, 0 0; } }

/* Sua vez: card pulsando com faixa "SUA VEZ" */
.minha-vez { position: relative; overflow: hidden; }
.minha-vez::before {
    content: 'SUA VEZ'; position: absolute; top: 10px; right: -30px; transform: rotate(35deg);
    padding: 3px 34px; font: 900 11px 'Nunito', sans-serif; letter-spacing: 1.5px;
    color: #03251a; background: linear-gradient(90deg, #6ff7c3, #10b981); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Fila: quem está na vez ganha moldura animada */
.fila li { position: relative; border-radius: 6px 14px 6px 14px; }
.fila li.vez {
    background: linear-gradient(90deg, rgba(255, 200, 61, .22), rgba(255, 122, 0, .08));
    border-color: #ffc83d; box-shadow: 0 0 14px rgba(255, 200, 61, .35);
}
.fila li.vez {   /* brilho passando feito pelo fundo (sem cortar os avatares) */
    background-image: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .2) 50%, transparent 60%), linear-gradient(90deg, rgba(255, 200, 61, .22), rgba(255, 122, 0, .08));
    background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; animation: brilho-fila 2.2s linear infinite;
}
@keyframes brilho-fila { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
.fila .ordem { font-weight: 700; }

/* Resultado: ícone com raios girando atrás */
.resultado-icone { position: relative; isolation: isolate; border-radius: 18px; transform: rotate(-6deg); }
.resultado-icone:not(.cinza)::before {
    content: ''; position: absolute; z-index: -1; inset: -40px;
    background: repeating-conic-gradient(rgba(255, 200, 61, .35) 0 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%);
    animation: aura-girar 8s linear infinite;
}
.passo span { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, #fff3c4, #ffc83d 50%, #e08a00); }

/* Faixa "voltar ao leilão" / convite */
.faixa-leilao { border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; }
/* Convite de leilão: "evento" com borda de energia (as cores são próprias, legíveis em qualquer tema) */
.convite:not(.confirmar-caixa) {
    border: 2px solid transparent; color: #fff8e6;
    background: linear-gradient(180deg, #3a2200, #1b1000) padding-box, conic-gradient(from var(--giro, 0deg), #ffd45c, #ff7a00, #fff3c4, #ff7a00, #ffd45c) border-box;
    box-shadow: 0 0 40px rgba(255, 150, 30, .45), 0 20px 50px rgba(0, 0, 0, .5); animation: toast-giro 3s linear infinite;
}
.convite:not(.confirmar-caixa) p { color: #f3d9a8; }
.convite:not(.confirmar-caixa) .convite-tempo { background: rgba(255, 255, 255, .14); }
.convite:not(.confirmar-caixa) .nao { background: #4a3210; color: #fff8e6; box-shadow: 0 5px 0 #24180a; }
.convite h3, .comemoracao h3 { text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Tema Clássico (claro): algumas peças precisam de contraste próprio ---------- */
html[data-tema="classico"] .nav-inferior::before { opacity: .8; }
html[data-tema="classico"] .nav-inferior a:not(.central) i { background: linear-gradient(180deg, #8a7a5c, #5b4d36); -webkit-background-clip: text; background-clip: text; }
html[data-tema="classico"] .nav-inferior a.ativo:not(.central) i { background: linear-gradient(180deg, #e8a400, #b45309); -webkit-background-clip: text; background-clip: text; }

@media (prefers-reduced-motion: reduce) {
    .btn-ouro::after, .btn-verde::after, .carta-arte::after, .carta-raios, .titulo-posse, .titulo-card, .titulo-card-faixa::after, .placar-lance strong,
    .rodadas i.atual, .cronometro .barra > i, .fila li.vez, .resultado-icone::before, .convite, .nav-inferior a.ativo i { animation: none !important; }
}



/* O título não corta mais o brilho da gema (o recorte desenhava um retângulo escuro em volta dela) */
.topo h1 { overflow: visible !important; text-overflow: clip; padding-left: 2px; }
.topo h1 i { margin-left: 2px !important; }

/* Abas que são links (ex.: Investimentos: Ações | Poupança) */
a.aba { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ==========================================================================
   "COMO FUNCIONA" (details.regras): painel de regras no estilo de jogo
   Cada regra = card com ícone em gema + título curto + uma linha. Risco = vermelho.
   Usado em Investimentos (Ações), Poupança e Empréstimo.
   ========================================================================== */
details.regras { padding: 0 !important; overflow: hidden; border-radius: 6px 20px 6px 20px; }
details.regras > summary {
    list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
    font: 700 15px 'Fredoka', 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .5px;
    background: linear-gradient(90deg, rgba(255, 200, 61, .16), transparent 70%);
}
details.regras > summary::-webkit-details-marker { display: none; }
details.regras > summary > i:first-child {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; transform: rotate(-6deg);
    color: #3b2400 !important; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 10px rgba(255, 200, 61, .4);
}
details.regras > summary .regras-seta { margin-left: auto; transition: transform .2s; color: var(--texto-3); }
details.regras[open] > summary .regras-seta { transform: rotate(180deg); }
details.regras .regras-lista { list-style: none; margin: 0; padding: 6px 12px 14px; display: grid; gap: 8px; }
details.regras .regras-lista li {
    display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 0;
    border-radius: 4px 12px 4px 12px; background: var(--sutil); border-left: 3px solid var(--ouro);
    font-size: 13.5px; line-height: 1.35; color: var(--texto-2);
}
details.regras .regras-lista li > i:first-child {
    width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; transform: rotate(-6deg);
    font-size: 15px; color: #3b2400; background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
details.regras .regras-lista li.perigo { border-left-color: var(--vermelho); }
details.regras .regras-lista li.perigo > i:first-child { color: #fff; background: linear-gradient(180deg, #ffb3c1, #ff4d6d 55%, #be123c); }
details.regras .regra-titulo {
    display: block; margin-bottom: 2px; font: 700 14px 'Fredoka', 'Nunito', sans-serif; letter-spacing: .3px; color: var(--texto);
}
details.regras .regras-lista b { color: var(--texto); }
details.regras .regras-lista a { color: var(--texto-ouro); }
details.regras .regras-sub, details.regras .regras-planos { margin-left: 12px; margin-right: 12px; }

/* ==========================================================================
   PADRÃO DE CARDS (todas as telas): canto "recortado" alternado (6/20) como os cards de jogo,
   borda que acende de leve e realce de vidro no topo. Mesma linguagem das cartas e notificações.
   ========================================================================== */
.card, .card-saldo, .stat, .conquista, .mesa-jogador, .aplicacao, .contrato, .atalho-guia, .resultado, .placar, .item {
    border-radius: 6px 20px 6px 20px !important;
}
.mov, .ranking li, .corrida li, .fila li, .marco, .espiada-saldo, .bolsa-indice, .missao-reqs > span:not(*) {
    border-radius: 4px 14px 4px 14px !important;
}
.card, .stat, .conquista, .mesa-jogador, .atalho-guia {
    border-color: color-mix(in srgb, var(--ouro) 14%, var(--card-borda)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 0 rgba(0, 0, 0, .28), 0 10px 24px rgba(0, 0, 0, .22);
}
.chip, .filtro, .tipo { border-radius: 4px 12px 4px 12px !important; }

/* Dica para comprar uma vantagem avulsa (ex.: Detetive dos Marcos) */
.dica-vantagem {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 4px 12px 4px 12px;
    background: color-mix(in srgb, var(--ouro) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--ouro) 50%, transparent);
    color: var(--texto-2); font-size: 13px; font-weight: 700; text-decoration: none;
}
.dica-vantagem i { color: var(--texto-ouro); flex: none; }
.dica-vantagem > span { flex: 1; min-width: 0; line-height: 1.3; }
.dica-vantagem b { color: var(--texto); }
/* Selo de preço dentro de botões (padrão: preço sempre à direita, numa pílula) */
.btn-preco { flex: none; margin-left: auto; padding: 6px 10px; border-radius: 99px; font: 700 14px/1 'Fredoka', sans-serif; letter-spacing: .3px;
    background: rgba(0, 0, 0, .22); color: inherit; white-space: nowrap; }
.dica-vantagem .btn-preco { background: color-mix(in srgb, var(--ouro) 22%, transparent); color: var(--texto-ouro); }

/* ==========================================================================
   POP-UPS NO PADRÃO DO JOGO (confirmação, escolha, compra feita, convite, fim de jogo)
   Moldura com borda de energia, etiqueta inclinada no topo, ícone em gema com raios girando
   e os MESMOS botões do app (3D com brilho, caixa alta).
   ========================================================================== */
.confirmar-caixa, .comemoracao-caixa {
    position: relative; overflow: visible; border: 2px solid transparent !important; border-radius: 8px 26px 8px 26px !important;
    background: linear-gradient(170deg, var(--card-2, #2c2266), var(--bg-2, #1b1442)) padding-box,
                conic-gradient(from var(--giro, 0deg), #ffd45c, #fff3c4, #ff9f1c, #ffd45c, #fff3c4, #ffd45c) border-box !important;
    box-shadow: 0 0 34px rgba(255, 180, 40, .35), 0 24px 60px rgba(0, 0, 0, .55) !important;
    animation: toast-giro 3s linear infinite, toast-entra .35s cubic-bezier(.2, 1.3, .4, 1);
    color: var(--modal-texto, #f5f2ff);
}
.confirmar-caixa.perigo {
    background: linear-gradient(170deg, #3a0d18, #1f0610) padding-box,
                conic-gradient(from var(--giro, 0deg), #ff4d6d, #ffb3c1, #be123c, #ff4d6d) border-box !important;
    box-shadow: 0 0 34px rgba(255, 77, 109, .35), 0 24px 60px rgba(0, 0, 0, .55) !important;
}
.confirmar-caixa.perigo, .confirmar-caixa.perigo p { color: #ffe4ea; }
.modal-selo {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
    padding: 3px 16px; font: 900 11px/1.6 'Nunito', sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
    color: #3b2400; background: linear-gradient(90deg, #fff3c4, #ffc83d 55%, #ff9f1c);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.confirmar-caixa.perigo .modal-selo { color: #fff; background: linear-gradient(90deg, #ff8fa3, #e11d48); }
.confirmar-caixa .convite-corpo { padding-top: 26px; }
.confirmar-caixa .convite-icone, .comemoracao-trofeu { position: relative; isolation: isolate; transform: rotate(-6deg); animation: gema-pop .5s cubic-bezier(.2, 1.6, .4, 1) .05s backwards; }
.confirmar-caixa .convite-icone::before, .comemoracao-trofeu::before {
    content: ''; position: absolute; z-index: -1; inset: -34px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 220, 120, .35) 0 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
    animation: aura-girar 9s linear infinite;
}
.confirmar-caixa.perigo .convite-icone::before { background: repeating-conic-gradient(rgba(255, 120, 150, .35) 0 10deg, transparent 10deg 30deg); }
.confirmar-caixa h3, .comemoracao h3 { font: 700 21px/1.15 'Fredoka', 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .5px; }

/* Botões dos pop-ups = mesmos botões do app */
.convite-botoes button, .comemoracao-ok, .comemoracao-sec {
    position: relative; overflow: hidden; min-height: 52px; border: 0; border-radius: 14px !important; cursor: pointer;
    font: 700 16px 'Fredoka', 'Nunito', sans-serif !important; text-transform: uppercase; letter-spacing: .6px;
}
.convite-botoes button::before, .comemoracao-ok::before, .comemoracao-sec::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}
.confirmar-caixa .sim, .comemoracao-ok { background: linear-gradient(180deg, #ffd45c, #ff9f1c) !important; color: #3b2400 !important; box-shadow: 0 5px 0 #b45309 !important; }
.confirmar-caixa.perigo .sim { background: linear-gradient(180deg, #ff7d95, #e11d48) !important; color: #fff !important; box-shadow: 0 5px 0 #9f1239 !important; }
.confirmar-caixa .nao, .comemoracao-sec { background: var(--tecla-1, #3a2f7a) !important; color: var(--texto, #fff) !important; box-shadow: 0 5px 0 var(--tecla-sombra, #17113a) !important; }
.convite-botoes button:active, .comemoracao-ok:active, .comemoracao-sec:active { transform: translateY(4px); box-shadow: none !important; }
.convite-botoes.um { grid-template-columns: 1fr; }

/* Escolher jogador (ex.: Espiar): cartões de jogador */
.escolher-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.escolher-opcao {
    display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; cursor: pointer;
    border-radius: 4px 14px 4px 14px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .25); color: inherit;
    transition: transform .12s, border-color .12s;
}
.escolher-opcao b { font: 700 13px 'Fredoka', sans-serif; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escolher-opcao small { font-size: 10.5px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; }
.escolher-opcao:not(:disabled):active { transform: scale(.94); }
.escolher-opcao:not(:disabled):hover, .escolher-opcao:not(:disabled):focus-visible { border-color: #ffc83d; box-shadow: 0 0 14px rgba(255, 200, 61, .35); }
.escolher-opcao:disabled { opacity: .45; cursor: not-allowed; }
.item-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--texto-ouro); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .confirmar-caixa, .comemoracao-caixa, .confirmar-caixa .convite-icone::before, .comemoracao-trofeu::before { animation: none; } }
.comemoracao-caixa { display: flex; flex-direction: column; align-items: center; }
.comemoracao-caixa .comemoracao-trofeu { order: 0; }
.comemoracao-caixa .modal-selo { position: static; transform: none; order: 1; margin: 0 0 8px; }
.comemoracao-caixa h3 { order: 2; } .comemoracao-caixa p { order: 3; } .comemoracao-caixa .comemoracao-botoes { order: 4; width: 100%; }

/* Controles de som (no botão de paleta) */
.menu-som { padding: 4px 4px 6px; display: grid; gap: 8px; }
.som-linha { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; }
.som-linha input { width: 20px; height: 20px; accent-color: var(--ouro); }
.som-volume { display: flex; align-items: center; gap: 8px; color: var(--texto-3); }
.som-volume input { flex: 1; accent-color: var(--ouro); }

/* ==========================================================================
   BOLSA: pop-up "O mercado mexeu!" com cartas das ações (arrastar para o lado, bolinhas, sem setas)
   ========================================================================== */
.bolsa-caixa { width: min(100%, 380px); min-width: 0; }
.bolsa-caixa .convite-corpo { padding: 26px 0 18px; }
.bolsa-caixa h3 { margin: 0 18px 2px; }
.bolsa-resumo { margin: 0 18px 12px !important; font-size: 13px; font-weight: 900; }
.bolsa-caixa .alta { color: #2ee59d; }
.bolsa-caixa .queda { color: #ff5c7a; }
.bolsa-trilho {
    width: 0; min-width: 100%; /* não alarga a caixa: o trilho ocupa só a largura do pop-up */
    display: flex; gap: 10px; overflow-x: auto; padding: 6px 13% 10px; scroll-snap-type: x mandatory; scroll-padding: 0 13%;
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; cursor: grab; outline: none;
}
.bolsa-trilho::-webkit-scrollbar { display: none; }
.bolsa-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.bolsa-trilho.arrastando .bolsa-carta { transition: none; }
.bolsa-carta {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; text-align: left; user-select: none; -webkit-user-select: none;
    padding-bottom: 12px; border-radius: 6px 18px 6px 18px; background: #120c26; color: #fff;
    border: 2px solid color-mix(in srgb, var(--c) 70%, #000);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 0 16px color-mix(in srgb, var(--c) 35%, transparent);
    transition: transform .25s ease, opacity .25s ease;
}
.bolsa-carta:not(.atual) { transform: scale(.9); opacity: .55; }
.bolsa-arte { height: 96px; }
.bolsa-arte .carta-gema { width: 50px; height: 50px; font-size: 23px; }
.bolsa-pct {
    position: absolute; z-index: 1; right: 8px; bottom: 8px; padding: 3px 10px; border-radius: 9px;
    font: 700 16px 'Fredoka', 'Nunito', sans-serif; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.bolsa-carta.alta .bolsa-pct { background: #0f9d6b; }
.bolsa-carta.queda .bolsa-pct { background: #d61f45; }
.bolsa-placa .nome { display: block; font: 700 15px/1.2 'Fredoka', 'Nunito', sans-serif; color: #fff; }
.bolsa-precos { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 9px 12px 0; }
.bolsa-precos small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #b7add9; }
.bolsa-precos s { font-size: 13px; font-weight: 800; color: #b7add9; }
.bolsa-precos b { font: 700 17px 'Fredoka', 'Nunito', sans-serif; color: #fff; }
.bolsa-precos > i { margin-bottom: 3px; color: #b7add9; }
.bolsa-carta.alta .bolsa-precos b { color: #2ee59d; }
.bolsa-carta.queda .bolsa-precos b { color: #ff5c7a; }
.bolsa-manchete {
    margin: 10px 12px 0 !important; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07);
    font-size: 12.5px; font-weight: 800; line-height: 1.3; color: #f3efff !important;
}
.bolsa-manchete i { color: color-mix(in srgb, var(--c) 55%, #fff); }
.bolsa-minhas { margin: 8px 12px 0 !important; font-size: 12px; font-weight: 800; color: #d6cff5 !important; }
.bolsa-bolinhas { display: flex; justify-content: center; gap: 6px; margin: 4px 0 4px; }
.bolsa-bolinhas i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .3); transition: width .2s ease, background .2s ease; }
.bolsa-bolinhas i.ativa { width: 20px; background: #ffc83d; }
.bolsa-dica { margin: 2px 18px 12px !important; text-align: center; font-size: 11.5px; font-weight: 800; color: #b7add9 !important; transition: opacity .3s; }
.bolsa-dica.some { opacity: 0; }
.bolsa-caixa .convite-botoes { margin: 0 18px; }

/* ==========================================================================
   PARTIDA PAUSADA: cobre a tela inteira para todos (ninguém movimenta)
   ========================================================================== */
.tela-pausa {
    position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: radial-gradient(circle at 50% 40%, rgba(40, 28, 100, .82), rgba(6, 4, 18, .94));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: pausa-entra .3s ease-out;
}
.tela-pausa.saindo { opacity: 0; transition: opacity .25s; }
@keyframes pausa-entra { from { opacity: 0; } }
.tela-pausa-caixa {
    position: relative; box-sizing: border-box; width: min(100%, 380px); padding: 30px 22px 22px; text-align: center; color: #f5f2ff;
    border: 3px solid transparent; border-radius: 6px 24px 6px 24px;
    background: linear-gradient(170deg, #2c2266, #1b1442) padding-box,
                conic-gradient(from var(--giro, 0deg), #ffd45c, #fff3c4, #ff9f1c, #ffd45c, #fff3c4, #ffd45c) border-box;
    box-shadow: 0 0 40px rgba(255, 180, 40, .3), 0 24px 60px rgba(0, 0, 0, .6);
    animation: toast-giro 3s linear infinite;
}
.tela-pausa-icone {
    position: relative; isolation: isolate; width: 78px; height: 78px; margin: 0 auto 14px; display: grid; place-items: center;
    border-radius: 24px; font-size: 34px; color: #3b2400; background: linear-gradient(180deg, #ffd45c, #ff9f1c); box-shadow: 0 6px 0 #b45309;
    animation: pausa-respira 2s ease-in-out infinite;
}
.tela-pausa-icone::before {
    content: ''; position: absolute; z-index: -1; inset: -40px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 220, 120, .3) 0 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
    animation: aura-girar 12s linear infinite;
}
@keyframes pausa-respira { 50% { transform: scale(1.07); } }
.tela-pausa h3 { margin: 0 0 8px; font: 700 26px/1.1 'Fredoka', 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .6px; }
.tela-pausa p { margin: 0 0 16px; font-weight: 700; line-height: 1.4; color: #d6cff5; }
.tela-pausa-espera { margin: 0 !important; display: inline-flex; gap: 8px; align-items: center; font-weight: 900 !important; color: #ffd45c !important; }
.tela-pausa-espera i { animation: pausa-ampulheta 2s ease-in-out infinite; }
@keyframes pausa-ampulheta { 50% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .tela-pausa, .tela-pausa-caixa, .tela-pausa-icone, .tela-pausa-icone::before, .tela-pausa-espera i { animation: none; } }
@media (prefers-reduced-motion: reduce) { .bolsa-carta, .bolsa-bolinhas i { transition: none; } }

/* ==========================================================================
   Leque de cartas: 3 títulos de posse abertos (faixa da cor do grupo + corpo azul).
   Ícone das Cartas em todo o app (selo da Carteira, atalho do Início, tela Cartas). Tamanho = font-size.
   <span class="leque-cartas" aria-hidden="true"><b></b><b></b><b></b></span>
   ========================================================================== */
.leque-cartas { position: relative; display: inline-block; width: 1.9em; height: 1.55em; flex: none; vertical-align: middle; }
.leque-cartas b {
    position: absolute; left: 50%; bottom: .02em; width: .92em; height: 1.28em; margin-left: -.46em;
    border-radius: .16em; border: .075em solid #fff; transform-origin: 50% 110%;
    background: linear-gradient(180deg, var(--c) 0 33%, #2f6fd0 33%, #1d4f9c);
    box-shadow: 0 .06em .14em rgba(0, 0, 0, .45);
}
.leque-cartas b:nth-child(1) { --c: #e53935; transform: rotate(-24deg); }
.leque-cartas b:nth-child(2) { --c: #7cb342; transform: rotate(0deg) translateY(-.06em); }
.leque-cartas b:nth-child(3) { --c: #fdd835; transform: rotate(24deg); }
.leque-cartas b::after {   /* linhas da tabela de aluguel */
    content: ''; position: absolute; left: 18%; right: 18%; top: 46%; height: 34%;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .75) 0 .05em, transparent .05em .16em);
}


/* ==========================================================================
   Menu de baixo estilo lobby de battle royale: ícones e nomes limpos; a aba atual vira uma
   placa de ouro inclinada que cobre ícone + nome (sem sublinhado). A Carteira continua como gema central.
   ========================================================================== */
.nav-inferior {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 6px, transparent 6px 14px),
        linear-gradient(180deg, color-mix(in srgb, var(--barra) 85%, #000), color-mix(in srgb, var(--barra) 70%, #000));
}
.nav-inferior a {
    gap: 4px; min-height: 50px; margin: 0 1px; font: 700 9.5px/1 'Fredoka', 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .3px;
    color: color-mix(in srgb, var(--texto-3) 85%, #fff);
}
.nav-inferior a:not(.central) i {
    font-size: 19px; background: none; -webkit-text-fill-color: currentColor; color: inherit; filter: none;
}
.nav-inferior a.ativo:not(.central)::before {   /* placa de ouro (substitui a placa translúcida e o sublinhado) */
    content: ''; position: absolute; inset: 3px 1px; z-index: -1; border: 0; border-radius: 8px; clip-path: none;
    transform: skewX(-8deg);
    background: linear-gradient(180deg, #fff3c4, #ffc83d 55%, #f59e0b);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 0 #b45309, 0 0 16px rgba(255, 200, 61, .55);
}
.nav-inferior a.ativo:not(.central) { color: #3b2400; }
.nav-inferior a.ativo:not(.central) i {
    color: #3b2400; -webkit-text-fill-color: #3b2400; filter: none; animation: icone-pula .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes icone-pula { from { transform: translateY(4px) scale(.8); } }

/* Leque de Cartas: colorido (como no resto do app); no menu fica cinza quando não é a aba atual */
.nav-inferior .nav-i-leque { display: grid; place-items: center; height: 19px; }
.nav-inferior .nav-i-leque .leque-cartas { font-size: 12.5px; }
.nav-inferior a:not(.ativo) .nav-i-leque .leque-cartas { filter: grayscale(1) brightness(1.05); opacity: .85; }
.topo h1 .topo-i-leque .leque-cartas { font-size: 12px; margin-top: 3px; }
/* Abas do Extrato: Movimentações | Estatísticas (placas de jogo, a ativa em ouro) */
.abas-extrato { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.aba-extrato {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 10px;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    font: 700 15px 'Fredoka', sans-serif; text-transform: uppercase; letter-spacing: .4px; text-decoration: none;
    color: var(--texto-2); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), var(--card);
    transition: transform .1s;
}
.aba-extrato:active { transform: scale(.97); }
.aba-extrato-icone {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; transform: rotate(-6deg); font-size: 13px;
    background: rgba(255, 255, 255, .12);
}
.aba-extrato.ativa { color: #3b2400; background: linear-gradient(180deg, #ffe48a, #ffb020); box-shadow: 0 0 18px rgba(255, 200, 61, .35); }
.aba-extrato.ativa .aba-extrato-icone { background: #fff3c4; color: #b45309; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }

/* ==========================================================================
   PADRÃO DOS POP-UPS (convite de leilão, bolsa, confirmações): no meio da tela,
   moldura de jogo com cantos chanfrados e textura listrada; números sempre em Fredoka.
   ========================================================================== */
.convite-fundo { place-items: center !important; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); overflow-y: auto; }
.convite { border-radius: 6px 26px 6px 26px; }
.convite-corpo { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 14px); }
.convite p b, .convite-expira b, .convite .valor, .bolsa-precos b, .bolsa-pct { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; }
.convite-expira b { font-size: 16px; color: #ffd45c; }
.convite-botoes button { border-radius: 4px 14px 4px 14px !important; text-transform: uppercase; letter-spacing: .5px; }

/* Convite de leilão: o título vira a carta colecionável (arte com raios + nome + lance) */
.convite-titulo.convite-carta {
    --c: var(--cor-grupo, #ffc83d);
    max-width: 240px; margin: 14px auto 12px; transform: rotate(-2deg); border-radius: 4px 16px 4px 16px;
    background: #120c26; color: #fff; border: 2px solid transparent;
    background: linear-gradient(#120c26, #120c26) padding-box,
                conic-gradient(from var(--giro, 0deg), var(--c), #fff, #ffd45c, var(--c), #fff, var(--c)) border-box;
    box-shadow: 0 0 22px color-mix(in srgb, var(--c) 70%, transparent), 0 6px 0 rgba(0, 0, 0, .4);
    animation: toast-giro 2.4s linear infinite;
}
.convite-carta .carta-arte { height: 70px; }
.convite-carta .carta-placa { text-align: center; padding: 7px 8px; }
.convite-carta .carta-placa .nome { display: block; font: 700 18px/1.15 'Fredoka', 'Nunito', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.convite-carta .convite-titulo-corpo { display: grid; justify-items: center; gap: 0; padding: 6px 10px 10px; background: rgba(0, 0, 0, .3); }
.convite-carta .convite-titulo-corpo small { font: 900 10px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .65); }
.convite-carta .convite-titulo-corpo b { font: 700 24px/1.1 'Fredoka', 'Nunito', sans-serif; color: #ffd45c; text-shadow: 0 2px 0 #9a3412; }

/* Sala do leilão: o título deixa de ser papel creme e vira carta de arena (arte da cor do grupo + placa escura) */
.titulo-card {
    background: linear-gradient(#120c26, #120c26) padding-box,
                conic-gradient(from var(--giro, 0deg), var(--cor-grupo, #ffc83d), #fff, var(--cor-grupo, #ffc83d), #fff3c4, var(--cor-grupo, #ffc83d)) border-box !important;
    color: #fff; border-radius: 6px 20px 6px 20px;
}
.titulo-card-faixa {
    padding: 18px 16px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 11px),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cor-grupo) 85%, #fff) 0%, var(--cor-grupo) 40%, color-mix(in srgb, var(--cor-grupo) 50%, #000) 100%);
}
.titulo-card-faixa b { display: block; font: 700 26px/1.1 'Fredoka', sans-serif; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.titulo-card-corpo { background: linear-gradient(180deg, #1d1440, #120c26); color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; align-items: center; }
.titulo-card-corpo b { font: 700 16px 'Fredoka', sans-serif; color: #ffd45c; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.titulo-card .nome-dourado { background-image: linear-gradient(100deg, #ffe48a, #ffb020); filter: none; }

/* Números do leilão sempre na fonte de jogo */
.dica b, .placar-lance span b, .cronometro-info b, .fila b, .historico b, .resumo-respostas b { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; }
.dica b { color: var(--texto-ouro); }

/* Faixa "Negociação aberta" (acima da faixa do leilão, se as duas aparecerem) */
.faixa-troca { bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); background: linear-gradient(180deg, #6ff7c3, #10b981); color: #03251a; box-shadow: 0 6px 20px rgba(16, 185, 129, .45); }
.faixa-leilao, .faixa-troca { font-family: 'Fredoka', 'Nunito', sans-serif; }

/* ==========================================================================
   PADRÃO DOS PAINÉIS DE VALOR (poupança, empréstimo, leilão, troca): placar escuro listrado com
   número dourado + botões de soma em relevo azul (apagar em vermelho). Um visual só no app inteiro.
   ========================================================================== */
.valor-guardar, .lance-visor {
    position: relative; overflow: hidden; text-align: center;
    border-radius: 4px 18px 4px 18px !important; border: 1px solid rgba(255, 200, 61, .4) !important;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 14px), linear-gradient(180deg, #1d1440, #0e0820) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 200, 61, .15) !important;
}
.valor-guardar {
    padding: 12px !important; font: 700 clamp(32px, 10vw, 44px)/1.1 'Fredoka', sans-serif !important; color: #ffd45c !important;
    text-shadow: 0 3px 0 #9a3412, 0 0 18px rgba(255, 200, 61, .5);
}
.atalhos-valor, .atalhos { display: grid !important; gap: 8px !important; }
.atalhos-valor .chip, .atalhos .chip {
    min-height: 46px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 0 !important;
    font: 700 16px 'Fredoka', sans-serif !important; letter-spacing: .3px; color: #fff !important;
    background: linear-gradient(180deg, #4f46e5, #312e81) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 4px 0 #1e1b4b !important;
    border-radius: 4px 12px 4px 12px !important; transition: transform .08s;
}
.atalhos-valor .chip:active, .atalhos .chip:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 1px 0 #1e1b4b !important; }
.atalhos-valor .chip[data-limpar], .atalhos .chip[data-limpar], .atalhos .chip[data-zerar] {
    background: linear-gradient(180deg, #ff6b6b, #c81e1e) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 4px 0 #7f1d1d !important;
}
.atalhos .chip[data-minimo] { background: linear-gradient(180deg, #ffe48a, #ffb020) !important; color: #3b2400 !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #b45309 !important; }

/* Botão desativado: placa apagada (sem o "barro" do filtro cinza sobre o degradê) */
.btn:disabled, .btn[disabled] {
    filter: none !important; opacity: 1; color: rgba(255, 255, 255, .42) !important; text-shadow: none !important;
    background: linear-gradient(180deg, #3a3166, #2a2350) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 #17113a !important;
}
.btn:disabled i, .btn[disabled] i { color: inherit !important; }
.creditos { margin: 18px 0 8px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--texto-3); line-height: 1.5; }
.creditos b { color: var(--texto-2); }
.creditos-versao { display: inline-block; margin-right: 4px; padding: 0 7px; border-radius: 99px; font: 700 11px/1.6 'Fredoka', sans-serif; background: rgba(255, 255, 255, .08); color: var(--texto-ouro); }

/* Botões longos do cadeado VIP (Estatísticas › Mesa): quebram a linha em vez de cortar o texto */
.vip-cadeado .btn { white-space: normal; height: auto; min-height: 46px; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; text-align: center; }
/* Aba Administração do Início: a aba já diz o nome, o título do card sai */
[data-painel-inicio="admin"] > .card-titulo { display: none; }

/* ==========================================================================
   PADRÃO ÚNICO DE BOTÃO (o das cartas): placa com cantos assimétricos 4/14, Fredoka 700 em
   maiúsculas, degradê vivo e relevo curto embaixo. Vale para todo .btn do app (Loja, leilão,
   troca, poupança, empréstimo, Início...). O teclado da Carteira continua o original.
   ========================================================================== */
.btn {
    border-radius: 4px 14px 4px 14px !important;
    font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; letter-spacing: .4px;
    box-shadow: 0 4px 0 var(--cs), 0 8px 16px rgba(0, 0, 0, .25);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cs), 0 3px 8px rgba(0, 0, 0, .25); }
.btn-peq { border-radius: 4px 12px 4px 12px !important; }
.btn-ouro { --c1: #ffe48a; --c2: #ffb020; --cs: #b45309; color: #3b2400; }
.btn-azul { --c1: #7dd3fc; --c2: #2563eb; --cs: #1e3a8a; color: #fff; }
.btn-verde { --c1: #6ff7c3; --c2: #10b981; --cs: #047857; color: #03251a; }
.btn-vermelho { --c1: #ff8fa3; --c2: #e11d48; --cs: #881337; color: #fff; }
.btn-sec { --c1: color-mix(in srgb, var(--tecla-1) 85%, #fff); --c2: var(--tecla-2); }

/* ==========================================================================
   COSMÉTICOS NOVOS (Loja › Visual): Moldura do peão, Cartas holográficas, Chuva de moedas, Leilão de gala
   ========================================================================== */
/* Moldura: anel em volta do avatar (máscara deixa só a borda) + emblema */
.com-moldura { position: relative; overflow: visible !important; }
.moldura-fx {
    position: absolute; inset: -5px; z-index: 4; pointer-events: none; border-radius: inherit; border: 3px solid transparent;
    background: var(--mold, linear-gradient(#ffd45c, #ffd45c)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}
.moldura-emblema { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.moldura-emblema::after { position: absolute; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.moldura-escudo .moldura-fx { --mold: linear-gradient(160deg, #f8fafc, #94a3b8 45%, #475569 70%, #e2e8f0); }
.moldura-escudo .moldura-emblema::after { content: '🛡️'; bottom: -7px; right: -6px; font-size: 13px; }
.moldura-coroa .moldura-fx { --mold: conic-gradient(from var(--giro, 0deg), #fff3c4, #ffc83d, #b45309, #ffd45c, #fff3c4); animation: toast-giro 4s linear infinite; }
.moldura-coroa .moldura-emblema::after { content: '👑'; top: -13px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 15px; }
.moldura-chamas .moldura-fx { --mold: conic-gradient(from var(--giro, 0deg), #fde047, #f97316, #dc2626, #f97316, #fde047); animation: toast-giro 1.6s linear infinite; box-shadow: 0 0 10px rgba(249, 115, 22, .8); }
.moldura-chamas .moldura-emblema::after { content: '🔥'; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 14px; animation: chama-pula .6s ease-in-out infinite alternate; }
@keyframes chama-pula { to { transform: translateX(-50%) scale(1.15) translateY(-1px); } }
.moldura-diamante .moldura-fx { --mold: conic-gradient(from var(--giro, 0deg), #a5f3fc, #f0abfc, #fff, #93c5fd, #c4b5fd, #a5f3fc); animation: toast-giro 2.4s linear infinite; }
.moldura-diamante .moldura-emblema::after { content: '💎'; top: -9px; right: -7px; font-size: 13px; }
.avatar.grande .moldura-emblema::after { font-size: 18px; }

/* Cartas holográficas: brilho arco-íris passando + borda colorida (para toda a mesa) */
.carta.holo, .troca-carta.holo { animation: holo-borda 3s linear infinite; }
.carta.holo::before, .troca-carta.holo::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .55;
    background: linear-gradient(115deg, transparent 15%, rgba(255, 0, 170, .45) 30%, rgba(0, 255, 255, .45) 45%, rgba(255, 255, 0, .45) 60%, transparent 80%) 0 0 / 250% 250%;
    animation: holo-brilho 3.2s ease-in-out infinite;
}
@keyframes holo-brilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes holo-borda { 0% { box-shadow: 0 0 14px #ff00aa, 0 4px 0 rgba(0, 0, 0, .4); border-color: #ff7ad9; } 33% { box-shadow: 0 0 14px #00e5ff, 0 4px 0 rgba(0, 0, 0, .4); border-color: #67e8f9; } 66% { box-shadow: 0 0 14px #fde047, 0 4px 0 rgba(0, 0, 0, .4); border-color: #fde047; } 100% { box-shadow: 0 0 14px #ff00aa, 0 4px 0 rgba(0, 0, 0, .4); border-color: #ff7ad9; } }

/* Chuva de moedas */
.chuva-moedas { position: fixed; inset: 0; z-index: 1300; pointer-events: none; overflow: hidden; }
.chuva-moedas i {
    position: absolute; top: -50px; width: var(--tam, 24px); height: var(--tam, 24px); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc83d 55%, #d97706); box-shadow: inset 0 -2px 0 #b45309, 0 0 10px rgba(255, 200, 61, .7);
    animation: moeda-cai linear forwards;
}
.chuva-moedas i::after { content: '$'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--tam, 24px) * .55) 'Fredoka', sans-serif; color: #92400e; }
@keyframes moeda-cai { 0% { transform: translateY(0) rotateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(110vh) rotateY(720deg); opacity: 0; } }

/* Leilão de gala: convite em chamas douradas */
.convite.gala {
    background: radial-gradient(120% 90% at 50% 0%, #7f1d1d, #3b0a0a 60%, #1c0505) padding-box,
                conic-gradient(from var(--giro, 0deg), #fde047, #f97316, #dc2626, #fde047, #f97316, #fde047) border-box !important;
    box-shadow: 0 0 50px rgba(249, 115, 22, .65), 0 20px 50px rgba(0, 0, 0, .55) !important;
}
.convite.gala .convite-icone { background: linear-gradient(180deg, #fde047, #f97316); box-shadow: 0 5px 0 #7c2d12, 0 0 24px rgba(249, 115, 22, .9); }
.convite.gala h3 { background: linear-gradient(180deg, #fff8dc, #fde047 50%, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 26px; }
.convite.gala .convite-corpo::before { content: '🔥 🔥 🔥'; display: block; margin-bottom: 2px; font-size: 18px; letter-spacing: 6px; animation: gala-fogo .5s ease-in-out infinite alternate; }
@keyframes gala-fogo { to { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
    .moldura-fx, .moldura-emblema::after, .carta.holo, .carta.holo::before, .troca-carta.holo, .troca-carta.holo::before, .convite.gala .convite-corpo::before { animation: none !important; }
}
/* Selo "HOLO" arco-íris na arte da carta holográfica */
.carta.holo .carta-estrelas::after, .troca-carta.holo .tc-arte::after {
    content: 'HOLO'; margin-left: 4px; padding: 0 5px; border-radius: 4px; font: 900 8.5px/1.6 'Nunito', sans-serif; letter-spacing: .8px; color: #1e1b4b;
    background: linear-gradient(90deg, #f0abfc, #a5f3fc, #fde047, #f0abfc) 0 0 / 200% 100%; animation: holo-brilho 2.5s linear infinite;
}
.troca-carta.holo .tc-arte::after { position: absolute; z-index: 1; top: 3px; right: 5px; margin: 0; }

/* Foto de perfil no avatar: a cor do peão vira um aro em volta da foto */
.avatar.com-foto, .destino-avatar.com-foto { padding: 2px; position: relative; }
.avatar-foto { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; background: #1f1745; }
.avatar.grande.com-foto { padding: 3px; }
.perfil-foto-grande { width: 112px; height: 112px; }
.perfil-foto-grande.com-foto { padding: 4px; }
.perfil-foto-grande i { font-size: 44px; }
/* Rodapé: links legais */
.creditos-links { margin-top: 2px !important; }
.creditos-links a { color: var(--texto-3); font-weight: 800; }