/* =========================================================
   SITE (cadastro, lobby, menu, modais)  -  o jogo usa style.css
   ========================================================= */
:root {
    --bg: #020a1e;
    --bg2: #07142e;
    --card: #0a1a3a;
    --line: #17305f;
    --blue: #1da1ff;
    --green: #1fb957;
    --green2: #17964a;
    --gold: #ffc21a;
    --text: #eaf1ff;
    --muted: #8fa5cf;
    --danger: #ff6b6b;
}

html, body { min-height: 100%; background: var(--bg); }
body {
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body.playing { overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

#site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 20px 16px 32px; }

/* ---------- Topo ---------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; height: 72px; padding: 0 16px;
    background: rgba(3, 10, 28, 0.94);
    border-top: 0;
    border-bottom: 1px solid #0f2247;
    backdrop-filter: blur(8px);
}
.brand img { height: 60px; width: auto; display: block; filter: brightness(1.32) saturate(1.12) drop-shadow(0 0 5px rgba(45,157,255,.25)); }
.top-actions { display: flex; align-items: center; gap: 10px; }

.btn {
    border: none; border-radius: 10px; padding: 10px 18px;
    font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #fff;
    transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn-green { background: linear-gradient(180deg, #2ad36b, var(--green2)); box-shadow: 0 3px 0 #0d5a2c; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-block { width: 100%; padding: 13px; font-size: 14px; }
.btn-deposit { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; }

.coin-dot {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 35% 30%, #7fd0ff, #1b7fd6 70%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset;
}
.coin-dot.gold { background: radial-gradient(circle at 35% 30%, #fff1a8, var(--gold) 70%); }

.balance-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px;
    border: 1px solid #28487f; background: rgba(8, 22, 52, .9);
}

.balance-money-bag { width: 19px; height: 19px; object-fit: contain; flex: none; }
.profile-wrap { position: relative; }
.avatar-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--blue); background: #0b1b3d; color: var(--blue);
    display: grid; place-items: center; padding: 0;
}
.avatar-btn svg, .menu svg { width: 20px; height: 20px; }

.menu {
    position: absolute; right: 0; top: 50px; min-width: 190px;
    display: flex; flex-direction: column; padding: 8px;
    border-radius: 14px; background: #08142e; border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.menu button {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 11px 12px; border: none; border-radius: 9px;
    background: transparent; color: var(--text); font-size: 15px; font-weight: 600;
}
.menu button svg { color: var(--blue); }
.menu button:hover { background: #0f2350; }
.menu button[data-menu="sair"] svg { color: var(--danger); }

/* ---------- Cadastro ---------- */
#guestView { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.auth-card {
    width: min(420px, 100%); padding: 22px; border-radius: 18px;
    background: linear-gradient(180deg, #0b1d42, #08142e);
    border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.tabs { display: flex; gap: 6px; margin-bottom: 16px; background: #061030; padding: 4px; border-radius: 12px; }
.tab { flex: 1; padding: 10px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; }
.tab.active { background: var(--blue); color: #02122e; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input:not([type="checkbox"]) {
    padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: #050f2b; color: var(--text); font-size: 16px; outline: none;
}
.form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,161,255,.2); }
.form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.35; }
.form label.check input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; }
.form-msg { white-space: pre-line; min-height: 18px; font-size: 13px; color: var(--danger); }
.form-msg.ok { color: #6fe39a; }

/* ---------- Carrossel de imagens ---------- */
.carousel {
    position: relative; width: min(100%, 900px); aspect-ratio: 1640 / 959; max-height: 420px;
    border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
    background: #050f2b; margin: 0 auto;
}
.carousel.small { width: min(100%, 720px); max-height: 280px; width: min(480px, 100%); }
.carousel .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.carousel .slide.active { opacity: 1; }
.dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.dots i.on { background: #fff; }

/* ---------- Lobby ---------- */
#lobbyView { display: block; }
.lobby-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); align-items: start; gap: 22px; }
.lobby-banner { width: 100%; max-height: none; margin: 0; align-self: start; }
.lobby-game-column { min-width: 0; }
.section-title { font-size: 20px; margin: 4px 0 14px; }
.games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.game-card {
    display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); align-items: center;
    border-radius: 16px; overflow: hidden; background: var(--card);
    border: 1px solid var(--line); transition: transform .15s, border-color .15s;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.game-art {
    aspect-ratio: 1 / 1; min-width: 0; display: grid; place-items: center; padding: 18px;
    background: radial-gradient(circle at 50% 40%, #12408f, #061236 75%);
}
.game-art img { max-width: 88%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.game-info { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.game-info h3 { font-size: 17px; letter-spacing: .03em; }
.game-info p { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- Rodapé ---------- */
.footer {
    padding: 28px 16px 36px; text-align: center; font-size: 13px; line-height: 1.6;
    color: var(--muted); background: #020816; border-top: 1px solid #0f2247;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.footer p { max-width: 640px; }
.age-badge {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--muted); color: var(--text); font-weight: 800; font-size: 14px;
}
.footer .copy { margin-top: 4px; font-size: 12px; opacity: .85; }

/* ---------- Modal ---------- */
.modal {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    padding: 16px; background: rgba(1, 5, 18, .78); backdrop-filter: blur(3px);
}
.modal-card {
    position: relative; width: min(460px, 100%); max-height: 90vh; overflow: auto;
    padding: 22px; border-radius: 18px; background: #08142e; border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modal-card h3 { font-size: 19px; margin-bottom: 14px; padding-right: 30px; }
.modal-close {
    position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
    border: none; border-radius: 50%; background: #0f2350; color: #fff; font-size: 20px; line-height: 1;
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.notice {
    padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
    background: rgba(255, 194, 26, .1); border: 1px solid rgba(255, 194, 26, .4); color: #ffe08a;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
    background: #0b1d42; color: var(--text); font-weight: 700; font-size: 14px;
}
.chip.on { background: var(--blue); color: #02122e; border-color: var(--blue); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field input {
    padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: #050f2b; color: var(--text); font-size: 16px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--blue); }
.field select { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #050f2b; color: var(--text); font-size: 16px; outline: none; }
.small-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #12285a; font-size: 14px; }
.kv span:first-child { color: var(--muted); }
.kv b { text-align: right; word-break: break-all; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }
.vip-bar { height: 10px; border-radius: 99px; background: #0f2350; overflow: hidden; }
.vip-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.vip-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vip-list div { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; background: #0b1d42; }
.vip-list div.me { outline: 2px solid var(--gold); }
.hist { display: flex; flex-direction: column; }
.hist-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #12285a; font-size: 13.5px; }
.hist-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pos { color: #6fe39a; font-weight: 800; white-space: nowrap; }
.neg { color: var(--danger); font-weight: 800; white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 24px 0; font-size: 14px; }

.toast-app {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200;
    padding: 12px 18px; border-radius: 12px; background: #0f2350; border: 1px solid var(--blue);
    font-weight: 700; font-size: 14px; max-width: calc(100vw - 32px); text-align: center;
}

@media (max-width: 760px) {
    .lobby-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lobby-banner { max-height: 320px; }
    .lobby-game-column { width: 100%; }
    .games { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .brand img { height: 44px; }
    .game-card { grid-template-columns: minmax(95px, 34%) minmax(0, 1fr); }
    .game-info { padding: 12px; }
    .game-info h3 { font-size: 14px; }
    .game-info p { font-size: 12px; }
    .carousel { max-height: 260px; border-radius: 12px; }
    .topbar { padding: 0 10px; gap: 8px; }
    .top-actions { gap: 6px; }
    .balance-pill { padding: 7px 10px; font-size: 12px; }
    .btn-deposit { padding: 8px 10px; font-size: 11.5px; }
    .btn { padding: 9px 12px; }
}

/* Refinamentos PIX, VIP, demo e mobile */
.pix-code-card{background:linear-gradient(160deg,#101a2c,#0b1220);border:1px solid #2a4059;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:stretch}.pix-amount{margin:0;text-align:center;font-size:clamp(26px,6vw,34px);font-weight:800;color:#6fe39a;letter-spacing:.02em;line-height:1.1}.pix-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff}.pix-brand img{width:28px;height:28px;object-fit:contain}.pix-instruction{text-align:center;color:#b9c8d9;font-size:13px}.pix-qr{width:min(260px,100%);aspect-ratio:1;object-fit:contain;background:#fff;padding:10px;border-radius:12px;align-self:center}.pix-code-card textarea{font-family:monospace;font-size:12px;overflow-wrap:anywhere}.vip-hero{text-align:center;padding:18px;border-radius:16px;background:radial-gradient(ellipse at top,#4a347c,#17152b 72%);border:1px solid #8f73e8}.vip-emoji{font-size:36px}.vip-hero h3{margin:8px 0;color:#f7d88a}.vip-hero p{margin:0;color:#ddd0ff}.btn-demo{background:linear-gradient(100deg,#5642a7,#8b5cf6);color:white;border:1px solid #a895ff}.play-actions{display:grid;gap:10px}.small-note{font-size:12px;color:var(--muted);line-height:1.5}@media(max-width:600px){.pix-code-card{padding:12px}.pix-qr{width:min(230px,100%)}.top-actions{gap:6px}.balance-pill{font-size:12px}.play-actions .btn{min-height:46px}}

/* Refinamento visual da área do jogo e dos botões de resgate */
.game-card { overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, #0b1b3b 0%, #071329 100%); border: 1px solid rgba(72,133,220,.32); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.game-art-logo { display:flex; align-items:center; justify-content:center; padding:20px; background: transparent !important; }
.game-art-logo img { width: min(100%, 270px); height:auto; aspect-ratio:1/1; object-fit:contain; border-radius:28px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.32)); }
.game-info { align-self:center; }
.game-info h3 { letter-spacing:.045em; font-size:clamp(20px,2vw,26px); }
.game-info p { line-height:1.65; }
.play-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.play-actions .btn { min-height:48px; border-radius:13px; white-space:normal; }
.btn-demo { background:linear-gradient(180deg,#344b72,#1a2d4d); border:1px solid #526b91; box-shadow:0 3px 0 #101d34; }
.vip-bar { height:9px; overflow:hidden; border-radius:999px; background:#152440; border:1px solid #243c63; }
.vip-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#20c96b,#8ee9a9); }
@media (max-width:680px) {
  .game-card { display:flex; flex-direction:column; }
  .game-art-logo { padding:12px 12px 0; }
  .game-art-logo img { width: min(56vw,190px); border-radius:24px; }
  .game-info { width:100%; padding:16px; }
  .play-actions { grid-template-columns:1fr; gap:10px; }
}


/* ---------- Correção: botões JOGAR / JOGAR DEMO sempre visíveis no card ---------- */
.lobby-game-column .game-card { display: flex; flex-direction: column; align-items: stretch; }
.lobby-game-column .game-art-logo { padding: 16px 16px 0; }
.lobby-game-column .game-art-logo img { width: min(60%, 220px); }
.lobby-game-column .game-info { width: 100%; padding: 16px 18px 20px; align-self: stretch; }
.lobby-game-column .game-info h3 { font-size: clamp(18px, 1.6vw, 24px); overflow-wrap: anywhere; }
.lobby-game-column .play-actions { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.lobby-game-column .play-actions .btn { width: 100%; }
.lobby-game-column .game-art-logo { aspect-ratio: auto; }
.lobby-game-column .game-art-logo img { width: min(52%, 180px); aspect-ratio: auto; }


/* ---------- Painel do jogo alinhado ao banner ---------- */
.lobby-title { margin: 6px 0 12px; }
.lobby-hero { align-items: stretch; }
.lobby-game-column { display: flex; }
.lobby-game-column .games { width: 100%; display: flex; }
.lobby-game-column .game-card { flex: 1; height: 100%; justify-content: space-between; }
.lobby-game-column .game-art-logo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 16px 0; }
.lobby-game-column .game-art-logo img { width: min(52%, 190px); }
.lobby-game-column .game-info { flex: 0 0 auto; padding: 8px 20px 20px; }
@media (max-width: 900px) { .lobby-game-column .game-art-logo { flex: 0 0 auto; padding-bottom: 6px; } }
.lobby-hero .lobby-banner { align-self: stretch; height: auto; }
.lobby-game-column .game-art-logo img { width: min(46%, 160px); }
.lobby-game-column .game-info { padding: 6px 20px 18px; gap: 8px; }
.lobby-game-column .play-actions { margin-top: 8px; gap: 8px; }
.lobby-game-column .play-actions .btn { min-height: 44px; }

/* Campos de e-mail e telefone seguem o mesmo visual dos demais campos. */
.form input[type="email"], .form input[type="tel"] { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #050f2b; color: var(--text); font-size: 16px; outline: none; }
.form input[type="email"]:focus, .form input[type="tel"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,161,255,.2); }
.bonus-notice { padding: 12px; border: 1px solid #f5c84b; border-radius: 10px; color: #ffe38a; background: rgba(245,200,75,.09); font-weight: 700; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }


/* ---------- Foto do jogo (card do lobby) + novo logo 3D ---------- */
/* banner do lobby mantém a proporção original (1649x954) para não cortar o texto */
.lobby-hero { align-items: start; }
.lobby-hero .lobby-banner { align-self: start; height: auto; aspect-ratio: 1649 / 954; max-height: none; }
@media (max-width: 900px) { .lobby-banner { max-height: none; } }
.lobby-game-column, .lobby-game-column .games { display: block; width: 100%; }
.lobby-game-column .game-card { height: auto; display: flex; flex-direction: column; }
.lobby-game-column .game-card .game-art.game-art-photo,
.game-card .game-art.game-art-photo { display:block; flex:0 0 auto; width:100%; padding:0; aspect-ratio:1/1; overflow:hidden; background:#050d1f !important; }
.lobby-game-column .game-card .game-art.game-art-photo img,
.game-card .game-art.game-art-photo img { display:block; width:100%; height:100%; max-width:none; max-height:none; aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:0; filter:none; }
.brand img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); height: 54px; }
@media (max-width: 640px) { .brand img { height: 42px; } }


/* ---------- Lobby: banner pequeno e centralizado no topo, jogo logo abaixo ---------- */
.lobby-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin: 16px auto 0; }
.lobby-hero .lobby-banner { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1649 / 954; max-height: none; align-self: center; border-radius: 16px; }
.lobby-game-column, .lobby-game-column .games { display: block; width: 100%; height: auto; min-height: 0; }
.lobby-game-column .game-card { position: static; display: grid; grid-template-columns: minmax(130px, 40%) minmax(0, 1fr); align-items: stretch; height: auto; }
.lobby-game-column .game-card .game-art.game-art-photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 0; }
.lobby-game-column .game-card .game-art.game-art-photo img { object-fit: cover; object-position: center; }
.lobby-game-column .game-card .game-info { position: static; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; gap: 8px; background: none; }
.lobby-game-column .game-card .game-info h3 { font-size: 18px; text-shadow: none; }
.lobby-game-column .game-card .game-info p { display: block; font-size: 12.5px; line-height: 1.4; margin: 0; }
.lobby-game-column .game-card .play-actions { margin-top: 6px; gap: 8px; }
.lobby-game-column .game-card .play-actions .btn { min-height: 42px; white-space: nowrap; }
@media (max-width: 520px) {
  .lobby-hero { gap: 12px; margin-top: 12px; }
  .lobby-game-column .game-card { grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); }
  .lobby-game-column .game-card .game-info { padding: 10px 10px; gap: 6px; }
  .lobby-game-column .game-card .game-info h3 { font-size: 15px; }
  .lobby-game-column .game-card .game-info p { font-size: 11px; line-height: 1.3; }
  .lobby-game-column .game-card .play-actions .btn { min-height: 38px; font-size: 11px; padding: 0 6px; letter-spacing: 0; }
}

/* ---------- Botão de atendimento (WhatsApp) ---------- */
.support { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body.playing .support { display: none; }
.support-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(72,133,220,.55); border-radius: 50%; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, #1c5fd1, #123f94); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.support-btn:hover { filter: brightness(1.1); }
.support-pop { width: 160px; padding: 12px 10px; text-align: center; border-radius: 14px; background: #0a1a3a; border: 1px solid rgba(72,133,220,.4); box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.support-title { font-weight: 800; font-size: 13px; margin: 0 0 2px; }
.support-sub { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.3; }
.support-wa { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #fff; font-weight: 800; font-size: 12px; border-radius: 12px; padding: 4px 10px; }
.support-wa img { display: block; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(37,211,102,.35)); transition: transform .15s; }
.support-wa:hover img { transform: scale(1.07); }

/* ---------- Jogo: celular em pé => cenário girado para ficar na horizontal ---------- */
/* (Android: o JS já trava a tela na horizontal e em tela cheia; isto cobre iPhone/navegadores sem trava) */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
  body.playing { --u: min(calc(100vh / 836), calc(100vw / 470)); }
  body.playing #gameView { inset: auto; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: 0 0; transform: translateX(100vw) rotate(90deg); }
}
@supports (height: 100dvh) {
  @media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
    body.playing { --u: min(calc(100dvh / 836), calc(100vw / 470)); }
    body.playing #gameView { width: 100dvh; }
  }
}


/* ---------- Topo no celular: o logo 3D é mais largo, então a barra precisa caber sem quebrar o saldo ---------- */
.balance-pill, .btn-deposit { white-space: nowrap; }
.brand { flex: 0 0 auto; }
@media (max-width: 560px) {
  .brand img { height: 34px; }
  .topbar { padding: 0 8px; gap: 6px; }
  .top-actions { gap: 5px; }
  .balance-pill { padding: 6px 8px; gap: 5px; font-size: 11.5px; }
  .btn-deposit { padding: 8px 9px; gap: 5px; font-size: 11px; }
}
@media (max-width: 360px) { .brand img { height: 30px; } .balance-money-bag { display: none; } }

/* ---------- Sem zoom e imagens não baixáveis ---------- */
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, canvas { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#site img, .modal img, .toast-app img { pointer-events: none; }


/* ---------- Saldo clicável + tela de saldo real / bônus ---------- */
button.balance-pill { cursor: pointer; color: inherit; font-family: inherit; line-height: 1.1; }
button.balance-pill:hover { border-color: #3f6fbf; filter: brightness(1.08); }
.balance-caret { font-size: 10px; opacity: .7; }

.bal-total { text-align: center; padding: 4px 0 2px; }
.bal-total small { display: block; color: var(--muted); font-size: 12px; }
.bal-total b { font-size: 28px; letter-spacing: .01em; }
.bal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bal-box { padding: 12px; border-radius: 12px; border: 1px solid #28487f; background: rgba(8,22,52,.7); }
.bal-box span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.bal-box b { font-size: 18px; }
.bal-box small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.bal-box.real b { color: #6fe39a; }
.bal-box.bonus { border-color: #8f73e8; background: rgba(86,66,167,.18); }
.bal-box.bonus b { color: #f7d88a; }

.bonus-rule { padding: 12px; border-radius: 12px; border: 1px solid #f5c84b; background: rgba(245,200,75,.08); display: flex; flex-direction: column; gap: 8px; }
.bonus-rule h4 { margin: 0; font-size: 14px; color: #ffe38a; }
.bonus-rule p { margin: 0; font-size: 13px; line-height: 1.45; color: #dfe8ff; }
.bonus-progress { height: 14px; border-radius: 999px; overflow: hidden; background: #0f2350; border: 1px solid #243c63; }
.bonus-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20c96b, #8ee9a9); transition: width .35s ease; }
.bonus-progress-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.bonus-progress-meta b { color: #fff; }
.bonus-list { display: flex; flex-direction: column; gap: 4px; }
.bonus-list h4 { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.bal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .bal-grid, .bal-actions { grid-template-columns: 1fr; } }


/* ---------- PIX: prazo de 20 minutos ---------- */
.pix-timer { text-align: center; font-size: 14px; color: var(--muted); margin: 0; }
.pix-timer b { color: #ffd84a; font-variant-numeric: tabular-nums; }
.pix-expired { text-align: center; line-height: 1.5; padding: 12px; border-radius: 12px; border: 1px solid #7a2a3a; background: rgba(122, 42, 58, .18); }


/* ---------- Carregando sessão (evita piscar cadastro/lobby) ---------- */
html.booting #guestView,
html.booting #lobbyView,
html.booting #guestActions,
html.booting #userActions { visibility: hidden; }
html.booting main::before {
    content: 'Carregando…';
    display: block;
    padding: 60px 16px;
    text-align: center;
    color: #9db4ff;
    font-weight: bold;
    letter-spacing: 1px;
}

/* ---------- Lembrar acesso (interruptor) ---------- */
.form label.remember,
.remember {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin: 4px 0 2px;
    cursor: pointer;
    user-select: none;
}
.remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.remember .switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #1b2a55;
    border: 1px solid #2c3f7a;
    transition: background .2s;
}
.remember .switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #9db4ff;
    transition: transform .2s, background .2s;
}
.remember input:checked + .switch { background: #1fa95b; border-color: #27c46d; }
.remember input:checked + .switch::after { transform: translateX(20px); background: #fff; }
.remember input:focus-visible + .switch { outline: 2px solid #5b7cff; outline-offset: 2px; }
.remember-text { font-size: 14px; color: inherit; }


/* ---------- Saldo no topo (modelo: valor em laranja + botão verde com cofrinho) ---------- */
button.balance-pill {
    gap: 8px; padding: 3px 3px 3px 12px; border: 0; border-radius: 10px;
    background: #090f1f; box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
button.balance-pill:hover { border: 0; filter: brightness(1.12); }
button.balance-pill #topBalance { color: #fba531; font-weight: 800; font-size: 14px; letter-spacing: .01em; }
.balance-icon {
    display: grid; place-items: center; flex: none; width: 38px; height: 32px; border-radius: 8px; color: #fff;
    background: linear-gradient(180deg, #2bc46f, #159a52);
}
.balance-icon svg { display: block; }
@media (max-width: 560px) {
    button.balance-pill { padding: 3px 3px 3px 9px; gap: 6px; }
    button.balance-pill #topBalance { font-size: 12.5px; }
    .balance-icon { width: 32px; height: 28px; border-radius: 7px; }
    .balance-icon svg { width: 19px; height: 19px; }
}


/* ---------- Tela de Afiliados ---------- */
.aff-sub { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.aff-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aff-stat { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #0a1a3a; border: 1px solid var(--line); min-width: 0; }
.aff-stat-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.aff-stat-label svg { color: var(--green); flex: none; }
.aff-stat b { font-size: 20px; line-height: 1.1; word-break: break-word; }
.aff-link input { font-size: 13px; text-overflow: ellipsis; }
.aff-wa { width: 100%; }
.aff-commission { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.aff-commission-label { font-size: 12px; color: var(--muted); }
.aff-commission b { font-size: 15px; line-height: 1.35; }
.aff-menu { border-radius: 12px; background: #0a1a3a; border: 1px solid var(--line); overflow: hidden; }
.aff-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 14px 14px; border: 0; border-bottom: 1px solid #12285a; background: transparent;
    color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.aff-row:last-child { border-bottom: 0; }
.aff-row:hover { background: rgba(255,255,255,.04); }
.aff-row span { display: flex; align-items: center; gap: 10px; }
.aff-row svg { color: var(--green); flex: none; }
.aff-row i { font-style: normal; font-size: 20px; line-height: 1; color: var(--muted); }
.link-back { align-self: flex-start; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.link-back:hover { color: var(--text); }
.aff-subtitle { margin: 0; font-size: 16px; }
.aff-how { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.aff-how b { color: var(--text); }
@media (max-width: 380px) { .aff-stat b { font-size: 17px; } }


/* ---------- Banner pequeno no topo do cadastro ---------- */
.guest-banner {
    display: block; width: min(420px, 100%); height: auto; aspect-ratio: 2149 / 732; object-fit: cover;
    border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
#guestView { gap: 16px; }

/* ---------- Redes sociais (compartilhar link de afiliado) ---------- */
.aff-share { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 2px; }
.aff-social { flex: 0 1 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .12s, filter .15s; }
.aff-social svg { display: block; width: 100%; height: 100%; }
.aff-social:hover { transform: translateY(-2px); filter: brightness(1.12); }
.aff-social:active { transform: scale(.94); }
@media (max-width: 380px) { .aff-social { width: 36px; height: 36px; } }

/* Afiliados: terceiro card (total de comissões) ocupa a linha toda; aviso de indicado sem depósito */
.aff-stat-wide { grid-column: 1 / -1; }
.aff-nodep { color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; max-width: 48%; line-height: 1.3; }