/* =========================================================================
   rehbet · site — base (cores, tipografia, estrutura e peças comuns)

   Estilo Sweet Bonanza: céu de algodão-doce, doces flutuando com desfoque
   (js/doces.js) e painéis de vidro. Menu em cima, como num painel de bot.
   Cores e medidas ficam nas variáveis do topo: para mudar o site inteiro,
   mexa só nelas. O escuro ("noite de doce") redefine as mesmas variáveis.
   ========================================================================= */

:root {
  /* Céu (claro) */
  --ceu-1: #b9e6ff;
  --ceu-2: #e3d4ff;
  --ceu-3: #ffd0ea;
  --nevoa: rgba(255, 255, 255, 0.55);

  /* Vidro */
  --painel: rgba(255, 255, 255, 0.52);
  --painel-2: rgba(255, 255, 255, 0.62);
  --painel-3: rgba(255, 255, 255, 0.78);
  --solido: #fff7fc;
  --borda: rgba(255, 255, 255, 0.75);
  --borda-forte: rgba(219, 39, 119, 0.22);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sombra: 0 14px 40px rgba(157, 23, 77, 0.14);
  --desfoque: 20px;

  /* Texto */
  --texto: #3b0a45;
  --texto-2: #7a3d82;
  --texto-3: #a9729f;

  /* Doce */
  --rosa: #ff3d9a;
  --rosa-2: #ff86c4;
  --roxo: #9b5cff;
  --azul: #38bdf8;
  --ouro: #f5a700;
  --ouro-2: #e07b00;
  --verde: #16a34a;
  --verde-claro: #4ade80;
  --vermelho: #e11d48;
  --gradiente: linear-gradient(90deg, #ff3d9a, #9b5cff);
  --gradiente-ouro: linear-gradient(180deg, #ffe680, #ffb300 55%, #e07b00);

  /* Nomes antigos que as telas dos jogos ainda usam */
  --vidro: var(--painel);
  --vidro-forte: var(--painel-2);
  --vidro-borda: var(--borda-forte);
  --vidro-brilho: rgba(255, 255, 255, 0.35);

  --raio: 22px;
  --raio-p: 14px;
  --fonte: "Outfit", system-ui, sans-serif;
  --fonte-titulo: "Lilita One", "Outfit", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ceu-1: #1b0b3a;
    --ceu-2: #2c0d48;
    --ceu-3: #3b0d3d;
    --nevoa: rgba(255, 255, 255, 0.06);
    --painel: rgba(44, 16, 76, 0.5);
    --painel-2: rgba(62, 24, 100, 0.55);
    --painel-3: rgba(80, 32, 124, 0.7);
    --solido: #22093a;
    --borda: rgba(255, 255, 255, 0.13);
    --borda-forte: rgba(255, 134, 196, 0.3);
    --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --sombra: 0 16px 44px rgba(0, 0, 0, 0.45);
    --texto: #fff0fb;
    --texto-2: #e3b9e6;
    --texto-3: #ad85b9;
    --verde: #4ade80;
    --vermelho: #fb7185;
    --vidro-brilho: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ceu-1: #1b0b3a;
  --ceu-2: #2c0d48;
  --ceu-3: #3b0d3d;
  --nevoa: rgba(255, 255, 255, 0.06);
  --painel: rgba(44, 16, 76, 0.5);
  --painel-2: rgba(62, 24, 100, 0.55);
  --painel-3: rgba(80, 32, 124, 0.7);
  --solido: #22093a;
  --borda: rgba(255, 255, 255, 0.13);
  --borda-forte: rgba(255, 134, 196, 0.3);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --sombra: 0 16px 44px rgba(0, 0, 0, 0.45);
  --texto: #fff0fb;
  --texto-2: #e3b9e6;
  --texto-3: #ad85b9;
  --verde: #4ade80;
  --vermelho: #fb7185;
  --vidro-brilho: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 15px;
  color: var(--texto);
  background-color: var(--ceu-2);
  background-image: linear-gradient(180deg, var(--ceu-1) 0%, var(--ceu-2) 45%, var(--ceu-3) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.3px; text-wrap: balance; }
.escondido { display: none !important; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- Céu de doces (fundo fixo, js/doces.js) ---------- */
.ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ceu::before, .ceu::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); background: var(--nevoa); }
.ceu::before { width: 46vw; height: 14vw; left: -8vw; top: 12vh; box-shadow: 18vw 4vw 0 -2vw var(--nevoa), 34vw -1vw 0 -3vw var(--nevoa); }
.ceu::after { width: 40vw; height: 12vw; right: -10vw; bottom: 8vh; box-shadow: -16vw -3vw 0 -2vw var(--nevoa); }
.doce-voa { position: absolute; display: block; animation: flutuar var(--t, 14s) ease-in-out infinite; animation-delay: var(--d, 0s); opacity: var(--o, 0.9); filter: blur(var(--b, 0px)) drop-shadow(0 10px 14px rgba(120, 20, 90, 0.18)); will-change: transform; }
/* Onde a coluna do conteúdo ocupa quase tudo, os doces somem: não sobra lateral para eles */
@media (max-width: 1180px) { .doce-voa { display: none; } }
@media (prefers-reduced-motion: reduce) { .doce-voa { animation: none; } }
.doce-voa img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes flutuar { 0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); } 50% { transform: translate(var(--x, 12px), var(--y, -26px)) rotate(calc(var(--r, 0deg) + 8deg)); } }
/* Os doces desenhados (enquanto não chegam os PNG) */
.dc-pirulito { border-radius: 50%; background: radial-gradient(circle, #fff 0 9%, transparent 10%), repeating-conic-gradient(#ff3d9a 0 30deg, #fff 30deg 60deg); box-shadow: 0 0 0 4px #fff inset; }
.dc-pirulito::after { content: ""; position: absolute; left: 46%; top: 92%; width: 8%; height: 70%; border-radius: 4px; background: #fff; }
.dc-pirulito.azul { background: radial-gradient(circle, #fff 0 9%, transparent 10%), repeating-conic-gradient(#38bdf8 0 30deg, #fff 30deg 60deg); }
.dc-coracao::before, .dc-coracao::after { content: ""; position: absolute; top: 0; width: 52%; height: 80%; border-radius: 50px 50px 0 0; background: linear-gradient(180deg, #ff8fb1, #e11d48); }
.dc-coracao::before { left: 50%; transform: rotate(-45deg); transform-origin: 0 100%; }
.dc-coracao::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.dc-bala { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, #c084fc 30%, #7e22ce); }
.dc-bala::before, .dc-bala::after { content: ""; position: absolute; top: 25%; width: 45%; height: 50%; background: linear-gradient(90deg, #e9d5ff, #a855f7); }
.dc-bala::before { right: 88%; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.dc-bala::after { left: 88%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dc-bomba { border-radius: 50%; background: conic-gradient(#f43f5e, #f59e0b, #facc15, #22c55e, #38bdf8, #a855f7, #f43f5e); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.6); }
.dc-jujuba { border-radius: 44% 56% 50% 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #4ade80 30%, #15803d); }
.dc-estrela { background: linear-gradient(180deg, #ffe680, #ffb300); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.dc-gota { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 35% 35%, #fff 0 10%, #38bdf8 35%, #0369a1); }

/* ---------- Vidro ---------- */
.vidro {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra), var(--brilho);
  backdrop-filter: blur(var(--desfoque)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--desfoque)) saturate(160%);
}

/* ---------- Estrutura: menu em cima (estilo painel de bot) ---------- */
#app { position: relative; z-index: 1; min-height: 100vh; }
.topo-fixo { position: sticky; top: 0; z-index: 30; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.barra-topo { max-width: 1320px; margin: 0 auto; height: 66px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-radius: 20px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; margin-right: 8px; }
.marca img { width: 38px; height: 38px; filter: drop-shadow(0 4px 6px rgba(219, 39, 119, 0.35)); }
.marca strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 28px; color: #fff; -webkit-text-stroke: 2px #db2777; paint-order: stroke fill; text-shadow: 0 3px 0 #9d174d; letter-spacing: 0.5px; }
.nav-topo { display: flex; align-items: center; gap: 2px; }
.nav-topo a, .nav-topo button { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--texto-2); border: 0; background: none; cursor: pointer; white-space: nowrap; }
.nav-topo a:hover, .nav-topo button:hover { color: var(--texto); background: var(--painel-2); }
.nav-topo a.ativo { color: #fff; background: var(--gradiente); box-shadow: 0 6px 16px rgba(255, 61, 154, 0.35); }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.saldo { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 14px; background: var(--painel-3); border: 1px solid var(--borda); font-weight: 800; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; box-shadow: var(--brilho); }
.saldo .moeda { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc21a 50%, #e07b00); box-shadow: inset 0 0 0 2px rgba(224, 123, 0, 0.5); }
.saldo .mais-saldo { display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--gradiente); color: #fff; font-size: 13px; }
.botao-icone { width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--borda); background: var(--painel-2); cursor: pointer; display: grid; place-items: center; flex: none; color: var(--texto-2); }
.botao-icone:hover { color: var(--rosa); }
.botao-icone svg { width: 20px; height: 20px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; box-shadow: 0 4px 12px rgba(157, 23, 77, 0.25); }
.avatar.grande { width: 92px; height: 92px; }
.menu-suspenso { position: relative; }
.menu-suspenso > button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.lista-suspensa { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 40; background: var(--solido); }
.nav-topo .lista-suspensa { left: 0; right: auto; }
.lista-suspensa a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--texto-2); }
.lista-suspensa a:hover { background: var(--painel-2); color: var(--texto); }
.lista-suspensa .nome-conta { padding: 8px 12px 10px; border-bottom: 1px solid var(--borda-forte); margin-bottom: 4px; }
.lista-suspensa .nome-conta b { display: block; }
.so-celular { display: none; }

.principal { position: relative; z-index: 1; padding: 22px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.moldura { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.conteudo { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cabeca-pagina h1 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 34px; color: #fff; -webkit-text-stroke: 2px #db2777; paint-order: stroke fill; text-shadow: 0 4px 0 #9d174d; letter-spacing: 0.4px; }
.cabeca-jogo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabeca-jogo h1 { font-size: 22px; }
.conteudo:has(.cabeca-jogo) { gap: 14px; }
.rodape-site { max-width: 1320px; margin: 40px auto 0; padding: 18px 4px 0; border-top: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--texto-3); font-size: 13px; }

/* ---------- Peças ---------- */
.cartao { padding: 20px; }
.cartao h2 { font-size: 19px; margin-bottom: 12px; }
.cartao h3 { font-size: 17px; margin-bottom: 8px; }
.sub { color: var(--texto-2); margin: 0 0 14px; }
.miudo { font-size: 13px; color: var(--texto-3); }
.grade { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.titulo-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-secao h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; color: var(--texto); }
.titulo-secao h2 .ic { width: 26px; height: 26px; color: var(--rosa); }
.titulo-secao a { font-size: 14px; font-weight: 700; color: var(--texto-2); text-decoration: none; }
.titulo-secao a:hover { color: var(--rosa); }

.numero { padding: 16px 18px; position: relative; overflow: hidden; }
.numero .rotulo { font-size: 12px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.numero .valor { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.numero .valor.ouro { color: var(--ouro-2); }
.numero .extra { font-size: 13px; color: var(--texto-3); margin-top: 2px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid var(--borda); background: var(--painel-2); font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: var(--brilho); transition: transform 0.12s, filter 0.12s, opacity 0.12s; }
.botao:hover { transform: translateY(-1px); filter: brightness(1.05); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.botao.principal-btn { background: var(--gradiente); color: #fff; border: 0; box-shadow: 0 6px 0 #9d174d, 0 12px 24px rgba(255, 61, 154, 0.35); }
.botao.principal-btn:active { box-shadow: 0 3px 0 #9d174d; }
.botao.verde { background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; border: 0; box-shadow: 0 5px 0 #14532d; }
.botao.ouro { background: var(--gradiente-ouro); color: #5a2a00; border: 0; box-shadow: 0 5px 0 #a35200; }
.botao.grande { padding: 14px 26px; font-size: 17px; }
.botao.pequeno { padding: 7px 12px; font-size: 13px; border-radius: 11px; }
.botao .ic { width: 16px; height: 16px; }
.voltar { align-self: flex-start; }

.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--painel-3); border: 1px solid var(--borda); }
.pilula .ic { width: 14px; height: 14px; }
.pilula.verde { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.45); color: var(--verde); }
.pilula.vermelho { background: rgba(244, 63, 94, 0.14); border-color: rgba(244, 63, 94, 0.45); color: var(--vermelho); }
.pilula.ouro { background: rgba(245, 167, 0, 0.16); border-color: rgba(245, 167, 0, 0.5); color: var(--ouro-2); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 12px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.8px; }
.entrada { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--borda); background: var(--painel-3); outline: none; font-size: 15px; box-shadow: var(--brilho); }
.entrada:focus { border-color: var(--rosa); box-shadow: 0 0 0 4px rgba(255, 61, 154, 0.18); }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.interruptor { align-items: center; margin-bottom: 12px; }

.barra { height: 10px; border-radius: 99px; background: rgba(157, 23, 77, 0.12); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 99px; background: var(--gradiente); box-shadow: 0 0 10px rgba(255, 61, 154, 0.5); }

.abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.abas button { padding: 9px 15px; border-radius: 12px; border: 1px solid var(--borda); background: var(--painel-2); cursor: pointer; font-weight: 800; color: var(--texto-2); }
.abas button.ativo { background: var(--gradiente); color: #fff; border-color: transparent; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-3); padding: 8px 12px; font-weight: 800; }
.tabela td { padding: 11px 12px; border-top: 1px solid var(--borda-forte); }
.tabela tbody tr:hover td { background: var(--vidro-brilho); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mais { color: var(--verde); font-weight: 800; }
.menos { color: var(--vermelho); font-weight: 800; }
.rolar { overflow-x: auto; }

.linha-rank { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; }
.linha-rank:nth-child(odd) { background: var(--vidro-brilho); }
.linha-rank .pos { width: 34px; text-align: center; font-family: var(--fonte-titulo); font-size: 22px; color: var(--texto-3); }
.linha-rank .pos.p1 { color: #f5a700; } .linha-rank .pos.p2 { color: #94a3b8; } .linha-rank .pos.p3 { color: #c2703d; }
.linha-rank img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; }
.linha-rank .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.linha-rank .val { font-weight: 800; font-variant-numeric: tabular-nums; }
.perfil-topo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.perfil-topo h2 { margin: 0 0 8px; }
.icone-sv { width: 52px; height: 52px; border-radius: 14px; }

/* ---------- Login ---------- */
.entrada-tela { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; color: #fff; }
.entrada-fundo { position: fixed; inset: 0; z-index: -1; background: url("/img/fundo-entrar.webp") center / cover no-repeat, #22093a; }
.entrada-cartao {
  position: relative; width: 100%; max-width: 556px; padding: 48px 40px 40px; text-align: center; border-radius: 30px;
  background: linear-gradient(160deg, rgba(120, 50, 170, 0.32), rgba(60, 14, 96, 0.42) 45%, rgba(110, 30, 140, 0.34));
  border: 1.5px solid rgba(214, 120, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 80px rgba(10, 0, 25, 0.55), 0 0 60px rgba(190, 60, 220, 0.18);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  animation: entrada-sobe 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes entrada-sobe { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.entrada-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.entrada-pirulito { width: 96px; height: 96px; margin-bottom: -14px; filter: drop-shadow(0 8px 18px rgba(230, 70, 200, 0.45)); }
.entrada-nome {
  position: relative; font-family: var(--fonte); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 52%), linear-gradient(90deg, #ff6fd2 0%, #d35ae8 50%, #8f47f5 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(90, 10, 110, 0.55)) drop-shadow(0 10px 22px rgba(200, 60, 210, 0.35));
}
.entrada-coroa { position: absolute; width: 40px; height: 30px; right: -12px; top: -20px; transform: rotate(14deg); }
.entrada-texto { margin: 0 0 30px; font-size: 18px; line-height: 1.4; color: rgba(240, 225, 255, 0.82); }
.entrada-discord {
  display: flex; align-items: center; gap: 18px; height: 70px; padding: 0 30px 0 94px; border-radius: 999px; text-decoration: none; color: #fff;
  font-weight: 700; font-size: 19px; position: relative;
  background: linear-gradient(90deg, #e43fbf 0%, #b23be6 60%, #8f37f0 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 200, 250, 0.45) inset, 0 12px 30px rgba(200, 50, 220, 0.42), 0 0 36px rgba(170, 70, 255, 0.28);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.entrada-discord:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1.5px rgba(255, 220, 252, 0.7) inset, 0 16px 36px rgba(200, 50, 220, 0.55), 0 0 46px rgba(170, 70, 255, 0.4); }
.entrada-discord:active { transform: translateY(0); }
.entrada-discord .entrada-dc { position: absolute; left: 94px; width: 38px; height: 38px; }
.entrada-discord span { flex: 1; text-align: left; padding-left: 58px; }
.entrada-discord > svg:last-child { width: 26px; height: 26px; transition: transform 0.2s; }
.entrada-discord:hover > svg:last-child { transform: translateX(4px); }
.entrada-ou { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0; color: rgba(230, 210, 250, 0.6); font-size: 15px; }
.entrada-ou::before, .entrada-ou::after { content: ""; width: 98px; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 180, 255, 0.35), transparent); }
.entrada-seguro { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: 18px; text-align: left; background: rgba(30, 6, 50, 0.38); border: 1px solid rgba(200, 140, 255, 0.18); }
.entrada-escudo { flex: none; width: 46px; height: 54px; filter: drop-shadow(0 6px 14px rgba(200, 60, 220, 0.4)); }
.entrada-seguro p { margin: 0 0 6px; font-size: 16px; color: rgba(245, 235, 255, 0.92); }
.entrada-seguro b { color: #fff; font-weight: 700; }
.entrada-seguro small { display: block; font-size: 14.5px; line-height: 1.45; color: rgba(225, 205, 245, 0.7); }
.entrada-voltar { display: inline-block; margin-top: 30px; font-size: 16px; color: #c780ff; text-decoration: underline; text-underline-offset: 3px; }
.entrada-voltar:hover { color: #e3b3ff; }
@media (max-width: 560px) {
  .entrada-cartao { padding: 36px 20px 30px; border-radius: 24px; }
  .entrada-pirulito { width: 74px; height: 74px; }
  .entrada-nome { font-size: 56px; }
  .entrada-fundo { background-position: 6% center; }
  .entrada-coroa { width: 30px; height: 23px; top: -17px; right: -8px; }
  .entrada-texto { font-size: 16px; margin-bottom: 24px; }
  .entrada-texto br { display: none; }
  .entrada-discord { height: 60px; padding: 0 22px; font-size: 17px; gap: 12px; }
  .entrada-discord .entrada-dc { position: static; width: 30px; height: 30px; }
  .entrada-discord span { padding-left: 0; }
  .entrada-seguro { gap: 14px; padding: 18px 16px; }
  .entrada-escudo { width: 38px; height: 45px; }
  .entrada-seguro small { font-size: 13.5px; }
}
.discord { background: #5865f2; color: #fff; border: 0; width: 100%; box-shadow: 0 5px 0 #3c45a5; }

/* ---------- Mesa dos jogos simples ---------- */
.jogo-cartao { padding: 18px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s; }
.jogo-cartao:hover { transform: translateY(-3px); }
.jogo-cartao strong { font-size: 18px; }
.jogo-cartao span { color: var(--texto-2); font-size: 14px; }
.mesa { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.controles { padding: 20px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.palco { padding: 22px; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; position: relative; overflow: hidden; }
.resultado { font-size: 26px; font-weight: 800; }
.resultado.ganhou { color: var(--verde); }
.resultado.perdeu { color: var(--vermelho); }
.mult-grande { font-size: 72px; font-weight: 800; line-height: 1; }
.alvo-linha { color: var(--texto-2); }
.raspa { display: grid; grid-template-columns: repeat(3, 92px); gap: 10px; padding: 14px; border-radius: 18px; }
.bonus-aviso { padding: 10px 14px; border-radius: 14px; background: rgba(34, 197, 94, 0.16); border: 1px solid rgba(34, 197, 94, 0.45); font-weight: 700; }
@keyframes virar { 0% { transform: rotateY(0); } 100% { transform: rotateY(1440deg); } }
@keyframes tremer { 50% { transform: translateY(-3px); } }
@keyframes piscar { to { transform: scale(1.07); } }

/* ---------- Comandos ---------- */
.cmd-linha { padding: 11px 0; border-top: 1px solid var(--borda-forte); line-height: 1.55; }
.cmd-linha:first-child { border-top: 0; }
.cmd-linha code, .md code { padding: 2px 7px; border-radius: 7px; background: var(--painel-3); font-family: ui-monospace, monospace; font-size: 0.9em; }
.cmd-linha.nota { font-size: 13px; color: var(--texto-3); }

/* ---------- Avisos (toasts) ---------- */
#avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 70; max-width: calc(100vw - 40px); }
.aviso { padding: 12px 16px; border-radius: 14px; background: var(--solido); border: 1px solid var(--borda-forte); box-shadow: var(--sombra); font-weight: 700; animation: entrar 0.2s ease-out; border-left: 5px solid var(--verde); }
.aviso.erro { border-left-color: var(--vermelho); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

.carregando { min-height: 50vh; display: grid; place-items: center; }
.roda-carregando { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff 0 9%, transparent 10%), repeating-conic-gradient(#ff3d9a 0 30deg, #fff 30deg 60deg); animation: rodar 1s linear infinite; box-shadow: 0 0 0 4px #fff; }
@keyframes rodar { to { transform: rotate(360deg); } }
@keyframes boiar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.vazio { text-align: center; color: var(--texto-3); padding: 30px 10px; }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
  .nav-topo .rotulo-nav { display: none; }
  .nav-topo a, .nav-topo button { padding: 10px 11px; }
}
@media (max-width: 860px) {
  .so-celular { display: grid; }
  .nav-topo { position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; padding: 10px; border-radius: 18px; background: var(--solido); border: 1px solid var(--borda); box-shadow: var(--sombra); display: none; }
  .nav-topo.aberta { display: flex; }
  .nav-topo .rotulo-nav { display: inline; }
  .barra-topo { position: relative; }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesa { grid-template-columns: 1fr; }
  .saldo .mais-saldo { display: none; }
}
@media (max-width: 560px) {
  .g2 { grid-template-columns: 1fr; }
  .numero .valor { font-size: 21px; }
  .raspa { grid-template-columns: repeat(3, 76px); }
  .mult-grande { font-size: 56px; }
  .marca strong { font-size: 24px; }
  .topo-direita #tema { display: none; }
  .cabeca-pagina h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media (max-width: 440px) {
  .marca strong { display: none; }
  .barra-topo { gap: 6px; padding: 0 8px; }
  .saldo { padding-left: 8px; }
}