:root{
  --bg-1:#0a58a6;
  --bg-2:#0d6bc7;
  --panel:#0b2b57;
  --panel-2:#0e376f;
  --tile:#123d79;
  --tile-2:#0f315f;
  --accent:#20d04f;          /* verde do botão APOSTA */
  --accent-dark:#1bb446;
  --warn:#ffd54d;            /* amarelo do “Próximo” */
  --danger:#ff4d6d;
  --text:#e6f2ff;
  --muted:#9dc0ff;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Arial; color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, #0f7bdc 0%, var(--bg-2) 45%, var(--bg-1) 100%);
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:12px;
}

/* Largura dos blocos principais (sem sub-telas) */
.topbar, .board-wrap, .panel, .bottombar{ width:min(820px, 96vw); }

/* ===== TOP BAR (conecta “Minas” e “Próximo”) ===== */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, #144d73 0%, #0b2f52 100%);
  border:2px solid #082b49;
  border-radius:28px;
  padding:8px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 24px rgba(0,0,0,.35);
  position:relative;
}
/* anel interno azul-claro */
.topbar::after{
  content:""; position:absolute; inset:6px; border-radius:22px;
  box-shadow: inset 0 0 0 2px rgba(64,164,255,.35); pointer-events:none;
}
/* linha fina logo abaixo da barra (sem alterar HTML) */
.topbar::before{
  content:""; position:absolute; left:10px; right:10px; bottom:-8px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(32,163,255,.45), rgba(32,163,255,.20));
}

/* Próximo (amarelo) */
.next-chip{
  background:#ffc943; color:#0b2b57; font-weight:800;
  border-radius:24px; padding:8px 16px;
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.12);
}

/* (FUN MODE removido se existir) */
.fun-badge{ display:none !important; }

/* ===== MINES DROPDOWN (pílula azul) ===== */
.mines-select{ position:relative; display:flex; align-items:center }
.ms-native{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px }

.ms-trigger{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #165a86, #0d3b66);
  color:#e8f3ff; font-weight:800;
  border:2px solid #0a2a4d;
  border-radius:28px; padding:10px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.35);
  cursor:pointer;
}
.ms-trigger:disabled{ opacity:.6; cursor:not-allowed }
.ms-label{ color:#e2eeff; font-weight:800 }
.ms-value{ color:#ffffff; font-weight:900 }
.ms-caret{ color:#ffffff; font-weight:900; opacity:.95 }

/* Dropdown escuro com item ativo azul */
.ms-dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width: 200px; max-height: 260px; overflow-y:auto; z-index:50;
  background:linear-gradient(180deg, #0a2a4d, #071f39);
  border-radius:14px; box-shadow:var(--shadow); padding:8px; display:none;
}
.ms-dropdown.show{ display:block }
.ms-dropdown::-webkit-scrollbar{ width:8px }
.ms-dropdown::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px }
.dd-item{
  width:100%; text-align:left; border:none; outline:0; cursor:pointer;
  padding:10px 14px; margin:4px 0; border-radius:12px;
  background:linear-gradient(180deg, #103a63, #0b2f52);
  color:var(--text); font-weight:900; letter-spacing:.3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.dd-item:hover{ filter:brightness(1.06) }
.dd-item.active{
  background:linear-gradient(180deg,#13699b,#0c4f7d);
  color:#ffffff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);
}
.dd-item:disabled{ opacity:.55; cursor:not-allowed; filter:saturate(.5) }

/* ===== TABULEIRO ===== */
/* ANTES: o bloco tinha background, borda e sombra */
/* DEPOIS: removemos o bloco de fundo, mantendo apenas espaçamento vertical mínimo */
.board-wrap{
  background:transparent !important;   /* ⟵ sem bloco */
  box-shadow:none !important;          /* ⟵ sem sombra */
  border-radius:0 !important;          /* ⟵ sem cantos arredondados visíveis */
  padding:10px 0;                      /* respiro vertical; não afeta as células */
}

.grid{ --sz:5; display:grid; grid-template-columns:repeat(var(--sz), 1fr); gap:14px; }

/* CÉLULAS — permanecem exatamente como estavam */
.cell{
  position:relative; aspect-ratio:1/1;
  background:linear-gradient(180deg, #1b4f7e, #143b61);
  border-radius:14px;
  box-shadow:
    0 6px 0 rgba(7,31,57,.6),
    0 10px 22px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.06);
  display:grid; place-items:center; cursor:not-allowed; transition:transform .08s ease;
}
.cell.ready{cursor:pointer}
.cell .dot{
  width:34%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06) 60%, transparent 62%);
  opacity:.85;
}

/* estados revelados */
.grid .cell.revealed{
  background:linear-gradient(180deg, #145693, #0d4171);
  box-shadow:
    0 6px 0 rgba(7,31,57,.6),
    0 10px 22px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.14);
}
.grid .cell.revealed.star::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:1/1; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<defs><filter id='ds' x='-50%' y='-50%' width='200%' height='200%'>\
<feDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='0.45'/>\
</filter></defs>\
<path d='M60 8 L74 45 H112 L80 66 L93 104 L60 82 L27 104 L40 66 8 45 H46 Z' fill='%23ffffff' filter='url(%23ds)'/>\
</svg>");
}
.grid .cell.revealed.bomb::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44%; aspect-ratio:1/1; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<defs><filter id='ds' x='-50%' y='-50%' width='200%' height='200%'>\
<feDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='0.45'/>\
</filter></defs>\
<circle cx='55' cy='70' r='28' fill='%23000000' filter='url(%23ds)'/>\
<path d='M78 48 q10 -12 24 -8' stroke='%23000000' stroke-width='6' fill='none' stroke-linecap='round'/>\
<circle cx='103' cy='39' r='4' fill='%23000000'/>\
</svg>");
}
.cell.revealed.bomb.boom{
  background:linear-gradient(180deg, #ff9aa6, #ff6b7a);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.35);
}
.cell.revealed.bomb.boom::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80%; aspect-ratio:1/1; z-index:2; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<defs><filter id='ds' x='-50%' y='-50%' width='200%' height='200%'>\
<feDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='0.35'/>\
</filter></defs>\
<path d='M60 12 L71 42 L104 32 L82 56 L110 60 L82 64 L104 88 L71 78 L60 108 L49 78 L16 88 L38 64 L10 60 L38 56 L16 32 L49 42 Z' fill='%23d62828' filter='url(%23ds)'/>\
<circle cx='60' cy='60' r='14' fill='%23ffc933'/>\
</svg>");
}

/* ===== PAINEL ===== */
.panel{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius:22px; padding:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.row{display:flex; align-items:center; gap:10px; justify-content:space-between}
.row-top{ align-items:center; }
.tool-right{ display:flex; align-items:center; gap:12px }

/* Aleatório pílula */
.pill-btn{
  background:#0f3f79; color:#d7e9ff; border:none; outline:0;
  padding:14px 22px; border-radius:28px; font-weight:900; letter-spacing:.4px;
  box-shadow:var(--shadow);
}
/* Refresh pequeno */
.mini-round{
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(180deg,#0f3f79,#0d3363); color:#cde3ff; font-size:18px;
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.08);
}

/* CTA */
.row-cta{ align-items:center; gap:12px; }

/* Bolota azul (setas + play) */
.round-cta{
  width:72px; height:72px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #1b67c1, #0f3f79 70%);
  color:#e8f3ff; font-size:26px; font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12);
  position:relative; overflow:hidden;
}
.round-cta::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60%; aspect-ratio:1/1; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
  <defs><filter id='ds' x='-50%' y='-50%' width='200%' height='200%'>\
    <feDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%23000' flood-opacity='0.25'/>\
  </filter></defs>\
  <path d='M88 52a28 28 0 1 0 1 16' fill='none' stroke='%23ffffff' stroke-width='10' stroke-linecap='round' filter='url(%23ds)'/>\
  <path d='M86 32l12 14l-18 1' fill='none' stroke='%23ffffff' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/>\
  <polygon points='52,42 80,60 52,78' fill='%23ffffff' filter='url(%23ds)'/>\
</svg>");
}

/* Botão APOSTA verde */
.btn-bet{
  flex:1; height:72px; border:none; cursor:pointer;
  border-radius:36px; color:#fff; font-weight:900; letter-spacing:.6px; font-size:20px;
  background:linear-gradient(180deg,#3ac23a,#238e24);
  box-shadow:0 14px 24px rgba(0,0,0,.38), inset 0 -4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12);
  border:2px solid #1a5b19;
}
.btn-bet:disabled{ opacity:.55; filter:saturate(.6); cursor:not-allowed }

/* CASHOUT âmbar */
.btn-cash{
  height:72px; padding:0 22px; border-radius:36px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#ffd36c,#ffb510); color:#4a2a00; font-weight:900; letter-spacing:.6px;
  box-shadow:0 14px 24px rgba(0,0,0,.32), inset 0 -4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.14);
}

/* Aposta USD em cápsula */
.betbox-new{ background:transparent; padding:0; }
.betbox-new .label{
  display:inline-block; padding:10px 16px; border-radius:20px;
  background:linear-gradient(180deg,#0e3f79,#0b2f60); color:#cfe6ff; font-weight:800; margin-bottom:10px;
  box-shadow:var(--shadow);
}
.betctrl-new{
  display:flex; align-items:center; gap:10px; width:100%;
  background:linear-gradient(180deg,#0b427f,#0a365f); padding:10px; border-radius:34px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), var(--shadow);
}
.betctrl-new input{
  flex:1; min-width:0; height:44px; text-align:center; font-weight:900; font-size:22px;
  background:#0a2c52; color:#e6f2ff; border:none; border-radius:22px;
}
.round{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#0e376f; color:#e6f2ff; font-weight:900; font-size:18px;
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.08);
}
.round.small{ width:46px; height:46px; }
/* ícone “moedas” do atalho */
#btn-quick{ position:relative; color:transparent; }
#btn-quick::before{
  content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <ellipse cx='12' cy='7' rx='7' ry='3.5' fill='%23cde3ff'/>\
  <path d='M5 7v5c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5V7' fill='none' stroke='%23cde3ff' stroke-width='2'/>\
  <path d='M5 12c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5' fill='none' stroke='%23cde3ff' stroke-width='2'/>\
</svg>");
}

/* ===== BARRA INFERIOR ===== */
.bottombar{
  background:linear-gradient(180deg,#0f3f79,#0d3363);
  border-radius:16px; padding:10px 12px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
}
.bb-left, .bb-right{ display:flex; align-items:center; gap:10px; }
.bb-sel{
  background:#0a294e; color:#d7e9ff; border:none; outline:0;
  padding:10px 14px; border-radius:14px; font-weight:900; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow);
}
.bb-sel .caret{ opacity:.9; }
.bb-help{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:#ffb510; color:#4a2a00; font-weight:900; box-shadow:var(--shadow);
}
.bb-balance{
  background:#0a294e; color:#d7e9ff; padding:10px 14px; border-radius:14px; font-weight:900; box-shadow:var(--shadow);
}
.bb-round{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(180deg,#0f65be,#0a57a5);
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.10);
}

/* ===== TOAST ===== */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff; padding:10px 14px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}

/* ===== RESPONSIVO ===== */
@media (max-width: 480px){
  .grid{gap:12px}
}

/* ==== AJUSTE FINAL: células bem menores e tabuleiro centralizado ==== */
.grid{
  --cell-size: 56px;     /* ⇦ diminua/aumente este valor p/ ajustar o tamanho */
  --gap: 8px;

  display: grid !important;
  grid-template-columns: repeat(var(--sz), var(--cell-size)) !important;
  gap: var(--gap) !important;

  /* centraliza o tabuleiro no espaço disponível */
  justify-content: center !important;
  margin: 8px auto !important;
}

/* garante a largura de cada célula (altura vem do aspect-ratio existente) */
.grid .cell{
  width: var(--cell-size) !important;
}

/* ainda menor no mobile */
@media (max-width: 480px){
  .grid{
    --cell-size: 48px;
    --gap: 6px;
  }
}

/* ==== PAINEL FIXO NO RODAPÉ — distância como no print ==== */
/* espaço reservado para o painel: controla a distância grade ↔ painel */
body{
  padding-bottom: 300px;            /* ajuste fino do “respiro” acima do painel */
}

/* painel fixo e centralizado */
.panel{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 18px !important;          /* distância painel ↔ borda inferior da tela */
  width: min(820px, 96vw) !important;
  z-index: 9999 !important;
  margin: 0 !important;
}

/* mobile: um pouco mais de respiro e painel um pouco mais baixo */
@media (max-width: 480px){
  body{ padding-bottom: 330px; }
  .panel{ bottom: 16px !important; }
}

/* telas grandes: leve ajuste do respiro */
@media (min-width: 1024px){
  body{ padding-bottom: 280px; }
}

/* ==== AJUSTE: grid mais largo + um pouco mais abaixo ==== */
.grid{
  --cell-size: 72px;              /* ↑ aumenta o tamanho das células */
  --gap: 10px;

  grid-template-columns: repeat(var(--sz), var(--cell-size)) !important;
  gap: var(--gap) !important;

  justify-content: center !important;  /* mantém centralizado */
  margin: 28px auto 0 !important;      /* ↓ desce o bloco do grid */
}
.grid .cell{ width: var(--cell-size) !important; }

/* Mobile: um pouco menor, ainda mais baixo */
@media (max-width: 480px){
  .grid{
    --cell-size: 64px;
    --gap: 8px;
    margin-top: 22px !important;
  }
}

/* === CELULAS COM IMAGEM (clonadas do jogo) === */
:root{
  --cell-img-closed: url("assets/img/cell-closed.png");
  --cell-img-star:   url("assets/img/cell-star.png");
  --cell-img-bomb:   url("assets/img/cell-bomb.png");
  --cell-img-boom:   url("assets/img/cell-exploded.png");
}

/* base: usamos só a imagem — sem gradiente nem sombras anteriores */
.grid .cell{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden;                      /* garante cantos perfeitos */
  position: relative;
}

/* remove qualquer ícone/pseudo anterior */
.grid .cell::before,
.grid .cell::after{
  content: none !important;
}

/* célula fechada */
.grid .cell:not(.revealed){
  background-image: var(--cell-img-closed) !important;
  background-size: cover !important;     /* use 'contain' se sua arte tiver borda própria */
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* estrela (segura) */
.grid .cell.revealed.star{
  background-image: var(--cell-img-star) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* bomba revelada (as demais ao perder) */
.grid .cell.revealed.bomb{
  background-image: var(--cell-img-bomb) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* bomba estourada (a clicada) */
.grid .cell.revealed.bomb.boom{
  background-image: var(--cell-img-boom) !important;
}

/* tira o pontinho do meio porque a arte já traz tudo */
.grid .cell .dot{ display:none !important; }

/* opcional: realce leve quando acabou de clicar numa estrela */
.grid .cell.revealed.star.just{
  filter: brightness(1.06) drop-shadow(0 2px 6px rgba(0,0,0,.25)) !important;
}

/* === FLIP ao finalizar a rodada (cashout ou bomba) === */
.grid{ perspective: 900px; }             /* dá profundidade ao flip */

.grid .cell.flip{
  transform-style: preserve-3d;
  position: relative;
}

/* OBS: lá em cima você tinha desativado ::after/::before com !important.
   Aqui reativamos especificamente quando .flip estiver presente. */
.grid .cell.flip::after{
  content: "" !important;
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--cell-img-closed) !important; /* face fechada */
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backface-visibility: hidden;
  transform-origin: center;
  animation: cellFlipOut 420ms cubic-bezier(.2,.65,.2,1) both;
  animation-delay: var(--flip-delay, 0ms);              /* atraso por célula */
  will-change: transform, opacity;
}

@keyframes cellFlipOut{
  0%   { transform: rotateY(0deg);   opacity:1; }
  49%  { transform: rotateY(90deg);  opacity:1; } /* ainda visível */
  50%  { transform: rotateY(90deg);  opacity:0; } /* some e revela a base */
  100% { transform: rotateY(180deg); opacity:0; }
}

/* === ESTRELA NORMAL vs ESTRELA DOURADA (CLIQUE) === */
/* Caminhos seguindo sua estrutura: assets/css/assets/img/... */
:root{
  /* nova arte para a estrela normal (todas as seguras abertas) */
  --cell-img-star-normal: url("assets/img/cell-star-normal.png");
  /* arte dourada (somente para a célula clicada com .just) */
  --cell-img-star-click:  url("assets/img/cell-star-gold.png");
}

/* estrela normal (toda célula segura revelada SEM .just) */
.grid .cell.revealed.star{
  background-image: var(--cell-img-star-normal) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important; /* remove qualquer brilho anterior */
}

/* estrela do clique (dourada) — usa a classe .just que o seu UI já aplica */
.grid .cell.revealed.star.just{
  background-image: var(--cell-img-star-click) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important; /* sem filtros, a própria arte já brilha */
}

/* ==== AJUSTE: células um pouco menores + grid um pouco mais largo ==== */
.grid{
  --cell-size: 60px;                          /* ↓ células menores */
  grid-template-columns: repeat(var(--sz), var(--cell-size)) !important;

  /* aumenta só a largura (espaço horizontal), mantendo a altura mais fechada */
  column-gap: 14px !important;                /* ↑ largura entre colunas */
  row-gap: 8px !important;                    /* ↔ espaçamento vertical menor */

  justify-content: center !important;         /* mantém centralizado */
}
.grid .cell{ width: var(--cell-size) !important; }

/* Mobile: ligeiramente menor e com ajuste fino de gaps */
@media (max-width: 480px){
  .grid{
    --cell-size: 54px;
    column-gap: 12px !important;
    row-gap: 6px !important;
  }
}

/* ===== TOPBAR fina, fixa no topo e com MINES mais largo/azul ===== */

/* reserva espaço para a barra fixa */
body{ padding-top: 64px; }

/* barra superior */
.topbar{
  position: fixed !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(680px, 92vw) !important;     /* um pouco mais curta */
  padding: 3px 10px !important;           /* mais fina */
  border-radius: 18px !important;

  background: linear-gradient(180deg, #0a3b63 0%, #062a46 100%) !important; /* mais escura */
  border: 1.5px solid #094067 !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.28) !important;
  z-index: 10000 !important;
}

/* sem linhas decorativas */
.topbar::after, .topbar::before{ display:none !important; }

/* botão MINES — azul no tom do fundo e mais largo */
.ms-trigger{
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 9px 22px !important;           /* ↑ mais largo */
  min-width: 220px !important;            /* garante largura */
  border-radius: 20px !important;

  background: linear-gradient(180deg, #1b72d2 0%, #0f59a9 100%) !important; /* azul “fundo mines” */
  border: 1.5px solid #0b3f74 !important;
  color: #f1f7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              0 6px 14px rgba(0,0,0,.28) !important;
}
.ms-label, .ms-value, .ms-caret{ color:#ffffff !important; }

/* chip Próximo mantém contraste e altura da barra fina */
.next-chip{
  padding: 6px 14px !important;
  border-radius: 18px !important;
  background: #e1ad24 !important;
  color:#0b2b57 !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.10),
              0 10px 18px rgba(0,0,0,.25) !important;
}

/* mobile */
@media (max-width: 480px){
  body{ padding-top: 72px; }
  .topbar{ width: 94vw !important; }
  .ms-trigger{ min-width: 200px !important; padding: 8px 18px !important; }
  .next-chip{ padding: 6px 12px !important; }
}

/* ===== MINES: centralizado e mais compacto ===== */
.ms-trigger{
  /* largura um pouco menor */
  min-width: 180px !important;                 /* antes 220px */
  /* reserva espaço pro caret à direita */
  padding: 8px 32px 8px 16px !important;       /* ↑ padding-right maior só p/ o caret */
  border-radius: 20px !important;

  /* centraliza e “cola” o label no número */
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;                         /* quase sem espaço entre “Mines:” e o número */
  text-align: center !important;
  position: relative !important;               /* necessário p/ posicionar o caret */
}

.ms-label{ margin:0 !important; }
.ms-value{ margin:0 !important; padding:0 !important; }

/* caret fixo à direita sem afetar o centramento do texto */
.ms-caret{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none;                        /* botão inteiro continua clicável */
}

/* opcional: em telas bem pequenas, ainda um pouco mais estreito */
@media (max-width: 480px){
  .ms-trigger{ min-width: 165px !important; padding: 7px 30px 7px 14px !important; }
}

/* === Mini barra de progresso dos acertos (abaixo da topbar) === */
.topbar{
  --hit-progress: 0%;                  /* 0%..100% preenchido */
}

/* trilha azul fininha */
.topbar::after{
  content:"";
  display:block !important;            /* garante que apareça mesmo se ocultou antes */
  position:absolute;
  left: 14px; right: 14px;
  bottom: -8px;                         /* cola logo abaixo da topbar */
  height: 6px;                          /* espessura fininha */
  border-radius: 6px;
  background: linear-gradient(180deg,#184d78,#103a5e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* preenchimento verde que cresce com os acertos */
.topbar::before{
  content:"";
  display:block !important;
  position:absolute;
  left: 14px;
  bottom: -8px;
  height: 6px;
  width: var(--hit-progress);
  border-radius: 6px;
  background: linear-gradient(180deg,#39c33f,#208f25);
  box-shadow: 0 1px 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
  transition: width 260ms ease;        /* anima a subida */
  will-change: width;
}

/* ===== FIX: remover linha de cima e deixar a trilha mais escura ===== */
/* Zera qualquer inset/top herdado e cria só a barra de progresso abaixo */
.topbar{ --hit-progress: 0%; }

.topbar::after{ /* trilha azul-escura */
  content: "" !important;
  /* limpa tudo que sobrou do anel antigo */
  inset: auto !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;

  left: 14px !important;
  right: 14px !important;
  bottom: -10px !important;              /* fica só embaixo da topbar */
  height: 6px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg,#0b2844,#071c33) !important; /* trilha mais escura */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.20) !important;
  display:block !important;
}

.topbar::before{ /* preenchimento verde que cresce */
  content: "" !important;
  /* limpa quaisquer posições antigas */
  inset: auto !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;

  left: 14px !important;
  bottom: -10px !important;
  height: 6px !important;
  width: var(--hit-progress) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg,#33bf3a,#1f8926) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15) !important;
  transition: width .26s ease !important;
  display:block !important;
}

/* ==== PROGRESS BAR DA TOPBAR — LIMPEZA E REDEFINIÇÃO FINAL ==== */
/* NÃO remova nada acima; apenas garanta que ESTE bloco fique por último */

.topbar{ --hit-progress: 0%; }

/* limpa QUALQUER estilo anterior dos pseudo-elementos */
.topbar::before,
.topbar::after{
  all: unset !important;          /* zera propriedades herdadas (inclui left/right/inset/…) */
  display: block !important;
  position: absolute !important;
  bottom: -10px !important;       /* fica logo abaixo da barra */
  height: 6px !important;
  border-radius: 6px !important;
  content: "" !important;
}

/* trilha (azul bem escura) */
.topbar::after{
  left: 14px !important;
  right: 14px !important;         /* ocupa toda a largura */
  background: linear-gradient(180deg,#0b2844,#071c33) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.20) !important;
  z-index: 0 !important;
}

/* preenchimento (verde) que cresce com --hit-progress */
.topbar::before{
  left: 14px !important;
  width: var(--hit-progress) !important;   /* <- É ISSO que o JS atualiza */
  background: linear-gradient(180deg,#33bf3a,#1f8926) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15) !important;
  transition: width .26s ease !important;
  z-index: 1 !important;
}

/* === Grid mais junto + área um pouco mais larga (sem alterar o tamanho das células) === */

/* deixa o bloco do grid um pouco mais largo */
.board-wrap{
  width: min(900px, 98vw) !important;   /* antes 820px/96vw */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* aproxima levemente as células */
.grid{
  column-gap: 10px !important;   /* antes 14px */
  row-gap: 6px !important;       /* antes 8px  */
  /* mantém centralizado e o --cell-size existente */
  justify-content: center !important;
}

/* mobile: também junta um pouco, sem mudar o tamanho das células */
@media (max-width: 480px){
  .board-wrap{ width: 96vw !important; }   /* segura a largura no mobile */
  .grid{
    column-gap: 9px !important;    /* antes 12px */
    row-gap: 5px !important;       /* antes 6px  */
  }
}

/* ===== PAINEL COMPACTO + "Aleatório/Autojogo" fora do fundo ===== */

/* reduz o bloco escuro e deixa mais estreito */
.panel{
  /* continua fixo e centralizado (você já tinha isso antes) */
  width: min(760px, 94vw) !important;       /* um pouco menor que antes */
  border-radius: 16px !important;
  padding: 10px 12px 12px !important;       /* menos altura de fundo */
  gap: 10px !important;
}

/* tira o grupo "Aleatório / refresh / Autojogo" do fundo escuro:
   posiciona-o logo ACIMA do painel, fora do bloco */
.panel .row-top{
  position: absolute !important;
  top: -52px !important;                    /* sobe para fora do painel */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10001 !important;                /* aparece por cima do fundo */
}

/* “ALEATÓRIO” mais compacto e com cara de chip solto */
.pill-btn{
  background: linear-gradient(180deg,#0f538f,#0b3f73) !important;
  color:#d7e9ff !important;
  padding: 12px 20px !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.28) !important;
  border: none !important;
}

/* botãozinho de refresh menor para caber nessa barra superior */
.mini-round{
  width: 36px !important;
  height: 36px !important;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.08) !important;
}

/* toggle “Autojogo” como cápsula solta (sem fundo do painel) */
.row-top .toggle .slider{
  width: 46px !important;
  height: 24px !important;
  background: linear-gradient(180deg,#0f538f,#0b3f73) !important;
  border-radius: 24px !important;
}
.row-top .toggle .slider::after{
  width: 18px !important;
  height: 18px !important;
}
.row-top .txt{ color:#e6f2ff !important; font-weight:700 !important; }

/* dá uma compactada geral no conteúdo do painel
   para o fundo escuro ficar visualmente menor */
.row-cta{ margin-top: 4px !important; gap: 10px !important; }
.btn-bet{ height: 64px !important; }        /* era 72px */
.round-cta{ width: 64px !important; height: 64px !important; } /* era 72x72 */
.betbox-new .label{ margin-bottom: 8px !important; }
.betctrl-new{ padding: 8px 10px !important; }

/* responsivo: mantém o comportamento no mobile */
@media (max-width: 480px){
  .panel{ width: 94vw !important; padding: 10px !important; }
  .panel .row-top{ top: -48px !important; width: calc(100% - 20px) !important; }
  .btn-bet{ height: 60px !important; }
  .round-cta{ width: 58px !important; height: 58px !important; }
}

/* ================== SKIN DO PAINEL POR IMAGENS ================== */
/* Coloque seus PNGs em assets/panel/ com esses nomes (pode mudar as urls) */
:root{
  --img-bet:        url("assets/panel/btn-bet.png");
  --img-cash:       url("assets/panel/btn-cash.png");
  --img-round:      url("assets/panel/btn-round.png");        /* bolota azul à esquerda */
  --img-pill:       url("assets/panel/pill-random.png");      /* ALEATÓRIO */
  --img-stake-bg:   url("assets/panel/box-stake.png");        /* cápsula “Aposta USD …” */
  --img-minus:      url("assets/panel/btn-minus.png");
  --img-coins:      url("assets/panel/btn-coins.png");
  --img-plus:       url("assets/panel/btn-plus.png");
  --img-toggle-off: url("assets/panel/toggle-off.png");       /* trilha do toggle OFF */
  --img-toggle-on:  url("assets/panel/toggle-on.png");        /* trilha do toggle ON */
}

/* ---------- Botão redondo à esquerda (setas+play) ---------- */
.round-cta{
  width: 66px !important; height: 66px !important;
  border: none !important; box-shadow: none !important; background: transparent !important;
  background-image: var(--img-round) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important;
}
.round-cta::before{ content:none !important; }  /* remove SVG interno */

/* ---------- APOSTA / CASHOUT (ocupam o mesmo espaço) ---------- */
.btn-bet, .btn-cash{
  position: relative;
  width: 520px !important;                 /* deixe próximo à largura da sua arte */
  height: 86px !important;                 /* idem (ajuste quando tiver os PNGs) */
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;           /* esconde o texto sem afetar o click */
  text-shadow: none !important;
  font-size: 0 !important;
  padding: 0 !important;
}
.btn-bet{
  background-image: var(--img-bet) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.btn-cash{
  background-image: var(--img-cash) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* ---------- “ALEATÓRIO” em PNG (fica fora do fundo escuro como já deixamos) ---------- */
.pill-btn{
  min-width: 260px !important; height: 60px !important;
  border:0 !important; border-radius:0 !important;
  background: transparent !important;
  background-image: var(--img-pill) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important;
  padding: 0 !important;
}

/* ---------- Toggle Autojogo por imagens ---------- */
.row-top .toggle .slider{
  width: 108px !important; height: 44px !important;
  border: 0 !important; border-radius:0 !important; background: transparent !important;
  background-image: var(--img-toggle-off) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.row-top .toggle input:checked + .slider{
  background-image: var(--img-toggle-on) !important;
}
.row-top .toggle .slider::after{ display:none !important; } /* o knob já está no PNG */
.row-top .txt{ color:#e6f2ff !important; font-weight:800 !important; }

/* ---------- Cápsula “Aposta USD …” + três botões ---------- */
.betctrl-new{
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  position: relative;
  min-height: 96px !important;             /* altura da sua cápsula */
  padding: 0 !important;
}
.betctrl-new::before{
  content:""; position:absolute; inset:0;
  background-image: var(--img-stake-bg) !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
  pointer-events: none;
}

/* campo de valor – fica centralizado em cima do PNG */
.betctrl-new input{
  height: 46px !important; line-height:46px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  color:#fff !important; font-size: 28px !important; font-weight: 900 !important;
  width: 46% !important;                   /* largura do visor dentro da cápsula */
  margin: 0 auto !important;
  position: relative; z-index: 1;
}

/* três botões redondos por imagem */
.round.small{
  width: 70px !important; height: 70px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: transparent !important; font-size:0 !important;
}
#btn-minus{ background-image: var(--img-minus) !important; background-size: contain !important; background-repeat:no-repeat !important; background-position:center !important; }
#btn-quick{ background-image: var(--img-coins) !important; background-size: contain !important; background-repeat:no-repeat !important; background-position:center !important; }
#btn-plus { background-image: var(--img-plus)  !important; background-size: contain !important; background-repeat:no-repeat !important; background-position:center !important; }

/* alinhamento dos elementos dentro da cápsula */
.betctrl-new{
  display: grid !important;
  grid-template-columns: 1fr auto auto auto 1fr !important;
  align-items: center !important;
  column-gap: 10px !important;
}
.betctrl-new input{ grid-column: 2 / span 1; justify-self: center; }
#btn-minus{ grid-column: 3; }
#btn-quick{ grid-column: 4; }
#btn-plus { grid-column: 5; }

/* ---------- Compactação do fundo escuro do painel (fica menor/igual ao print) ---------- */
.panel{
  width: min(760px, 94vw) !important;
  border-radius: 16px !important;
  padding: 12px 14px 14px !important;
}

/* mantém a barra “Aleatório/Autojogo” fora do fundo (como já estava) */
.panel .row-top{
  position: absolute !important;
  top: -54px !important;
  left: 50% !important; transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  display:flex !important; justify-content: space-between !important; align-items: center !important;
}

/* pequeno ajuste no espaçamento da linha do CTA para caber as imagens */
.row-cta{ gap: 12px !important; margin-top: 6px !important; }

/* responsivo */
@media (max-width: 480px){
  .btn-bet, .btn-cash{ width: 88vw !important; height: 74px !important; }
  .round-cta{ width: 58px !important; height: 58px !important; }
  .betctrl-new{ min-height: 88px !important; }
  .round.small{ width: 60px !important; height: 60px !important; }
  .pill-btn{ min-width: 220px !important; height: 52px !important; }
}

/* === FIX 1: classe utilitária usada pelo JS === */
.hidden{ display:none !important; }

/* === FIX 2: variáveis apontando para assets/painel/ (pt-br) === */
:root{
  --img-bet:        url("assets/painel/botao-aposta.png");
  --img-cash:       url("assets/painel/botao-cashout.png");
  --img-round:      url("assets/painel/botao-redondo.png");
  --img-pill:       url("assets/painel/pilula-aleatorio.png");
  --img-stake-bg:   url("assets/painel/caixa-aposta.png");
  --img-minus:      url("assets/painel/botao-menos.png");
  --img-coins:      url("assets/painel/botao-moedas.png");
  --img-plus:       url("assets/painel/botao-mais.png");
  --img-toggle-off: url("assets/painel/toggle-desligado.png");
  --img-toggle-on:  url("assets/painel/toggle-ligado.png");
}

/* === FIX 3: garante que o botão com PNG apareça e clique bem === */
.btn-bet, .btn-cash{
  display:block !important;
  position:relative !important;
  width:520px !important;               /* ajuste se seu PNG tiver outra largura */
  height:86px !important;               /* idem para altura */
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  color:transparent !important; font-size:0 !important; text-shadow:none !important;
}

/* aplica as imagens corretas */
.btn-bet {  background-image: var(--img-bet)  !important; }
.btn-cash{  background-image: var(--img-cash) !important; }

/* evita sobreposição quando o CASHOUT não deve aparecer */
.btn-cash.hidden{ display:none !important; }

/* ====== ALEATÓRIO / AUTOJOGO / APOSTA USD — sem imagens ====== */

/* 1) ALEATÓRIO volta a ser pílula CSS (sem PNG) */
.pill-btn{
  min-width: 220px !important;
  height: auto !important;
  padding: 12px 20px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg,#1162a3,#0c4981) !important;
  color:#d7e9ff !important;
  font-weight:900 !important;
  border:none !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  background-image: none !important;  /* remove PNG */
}

/* 2) Toggle Autojogo em CSS (sem PNG) */
.row-top .toggle{ position:relative !important; }
.row-top .toggle input{ display:none !important; }
.row-top .toggle .slider{
  width: 54px !important;
  height: 28px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg,#0e4d86,#0a3b6a) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  position: relative !important;
  transition: background .2s ease !important;
  background-image: none !important;   /* remove PNG */
}
.row-top .toggle .slider::after{
  content:"";
  position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width: 18px; height: 18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e7eefc 70%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.06) !important;
  transition: transform .20s ease !important;
}
.row-top .toggle input:checked + .slider{
  background: linear-gradient(180deg,#2ba34a,#1d7f35) !important;
}
.row-top .toggle input:checked + .slider::after{
  transform: translate(28px, -50%) !important;
}

/* 3) Cápsula “Aposta USD” — CSS puro (remove o PNG de fundo) */
.betctrl-new{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px !important;
  min-height: initial !important;
  border-radius:34px !important;
  background: linear-gradient(180deg,#0b427f,#0a365f) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), var(--shadow) !important;
  position: relative !important;
}
.betctrl-new::before{ content:none !important; }   /* remove imagem */
.betbox-new .label{
  display:inline-block !important;
  padding:10px 16px !important;
  border-radius:20px !important;
  background: linear-gradient(180deg,#0e3f79,#0b2f60) !important;
  color:#cfe6ff !important; font-weight:800 !important;
  margin-bottom:10px !important;
  box-shadow: var(--shadow) !important;
}

/* visor do valor */
.betctrl-new input{
  flex:1 !important; min-width:0 !important;
  height:44px !important; text-align:center !important;
  font-weight:900 !important; font-size:22px !important;
  background:#0a2c52 !important; color:#e6f2ff !important;
  border:none !important; border-radius:22px !important;
}

/* 4) Botões – / moedas / + refeitos em CSS (sem PNGs) */
.round.small{
  width:46px !important; height:46px !important;
  border-radius:50% !important; border:none !important; cursor:pointer !important;
  background: linear-gradient(180deg,#0e376f,#0b2f60) !important;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.08) !important;
  position: relative !important;
  color: transparent !important; font-size:0 !important;
  background-image: none !important;
}
.round.small::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:22px; height:22px; background:no-repeat center/contain;
}

/* ícone “–” */
#btn-minus::before{
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <rect x='4' y='11' width='16' height='2' rx='1' fill='%23e6f2ff'/>\
  </svg>");
}

/* ícone “moedas” (igual ao que você já usava) */
#btn-quick{ color:transparent !important; position:relative !important; }
#btn-quick::before{
  content:''; position:absolute; inset:0; margin:auto; width:22px; height:22px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <ellipse cx='12' cy='7' rx='7' ry='3.5' fill='%23cde3ff'/>\
    <path d='M5 7v5c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5V7' fill='none' stroke='%23cde3ff' stroke-width='2'/>\
    <path d='M5 12c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5' fill='none' stroke='%23cde3ff' stroke-width='2'/>\
  </svg>");
}

/* ícone “+” */
#btn-plus::before{
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <rect x='11' y='4' width='2' height='16' rx='1' fill='%23e6f2ff'/>\
    <rect x='4' y='11' width='16' height='2' rx='1' fill='%23e6f2ff'/>\
  </svg>");
}

/* Pequeno ajuste de espaçamento na linha do CTA para caber tudo bonitinho */
.row-cta{ gap: 12px !important; }

/* ========= CASHOUT (SAQUE) em CSS, sem imagem ========= */
/* mesmo tamanho do APOSTA que você definiu (520x86 no desktop) */
.btn-cash{
  width: 520px !important;
  height: 86px !important;

  /* aparência */
  border-radius: 36px !important;
  background: linear-gradient(180deg,#ffd36c,#ffb510) !important;
  border: 2px solid rgba(0,0,0,.20) !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.32),
              inset 0 -4px 0 rgba(0,0,0,.18),
              inset 0 2px 0 rgba(255,255,255,.14) !important;

  /* remove qualquer regra anterior herdada dos PNGs */
  background-image: none !important;
  color: #0b2b57 !important;
  font-size: 16px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;

  /* layout interno em duas linhas */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 12px !important;
}

/* título “SAQUE” (linha de cima) */
.btn-cash .cash-title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .6px;
  line-height: 1;
}

/* valor (linha de baixo) */
.btn-cash .cash-amt{
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  opacity: .95;
}

/* estado invisível quando ainda não há acertos */
.hidden{ display:none !important; }

/* responsivo — acompanha o APOSTA no mobile */
@media (max-width: 480px){
  .btn-cash{ width: 88vw !important; height: 74px !important; border-radius: 30px !important; }
  .btn-cash .cash-title{ font-size: 20px; }
  .btn-cash .cash-amt{ font-size: 14px; }
}

/* ==== CÉLULAS QUADRADAS (sem cantos arredondados) — override final ==== */
.grid .cell{
  border-radius: 0 !important;
  overflow: visible !important;          /* não recorta as quinas */
}

/* garante 0px em todos os estados e no pseudo do flip */
.grid .cell.revealed,
.grid .cell.revealed.star,
.grid .cell.revealed.bomb,
.grid .cell.revealed.bomb.boom{
  border-radius: 0 !important;
}

.grid .cell::before,
.grid .cell::after,
.grid .cell.flip::after{
  border-radius: 0 !important;
}

/* ===== SAQUE: cor caramelo igual ao print (apenas cor) ===== */
.btn-cash{
  /* mantém tamanho/borda já definidos — muda só a skin */
  background: linear-gradient(180deg, #d9a05a 0%, #b7772e 100%) !important;
  border: 2px solid rgba(0,0,0,.35) !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.38),
              inset 0 -4px 0 rgba(0,0,0,.25),
              inset 0 2px 0 rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;

  /* garante que não use nenhuma imagem anterior */
  background-image: none !important;
}

.btn-cash:hover{ filter: brightness(1.02) contrast(1.02); }
.btn-cash:active{ transform: translateY(1px); }


/* === SAQUE: remove PNG e aplica o caramelo do print === */
#btn-cashout.btn-cash{
  /* garante que nenhuma imagem antiga apareça */
  background-image: none !important;

  /* caramelo (print) */
  background: linear-gradient(180deg, #d9a05a 0%, #b7772e 100%) !important;
  border: 2px solid rgba(0,0,0,.35) !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.38),
              inset 0 -4px 0 rgba(0,0,0,.25),
              inset 0 2px 0 rgba(255,255,255,.08) !important;

  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

/* hover/active leves (opcional) */
#btn-cashout.btn-cash:hover{ filter: brightness(1.02) contrast(1.02); }
#btn-cashout.btn-cash:active{ transform: translateY(1px); }


/* === SAQUE: menor (visual), sem borda escura, menos arredondado === */
#btn-cashout.btn-cash{
  /* cor caramelo como no print */
  background: linear-gradient(180deg, #e0a355 0%, #c98537 100%) !important;
  background-image: none !important;

  /* sem contorno escuro e com cantos menos arredondados */
  border: 0 !important;
  border-radius: 18px !important;

  /* sombras mais leves */
  box-shadow:
    0 8px 16px rgba(0,0,0,.25),
    inset 0 -3px 0 rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  /* texto */
  color: #0b2b57 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;

  /* “menor” sem alterar o layout */
  transform: scale(.94);
  transform-origin: center;
}

/* tipografia interna (se estiver usando .cash-title / .cash-amt) */
#btn-cashout.btn-cash .cash-title{ font-size: 20px !important; line-height:1 !important; }
#btn-cashout.btn-cash .cash-amt  { font-size: 14px !important; line-height:1 !important; }

/* feedback sutil */
#btn-cashout.btn-cash:hover  { filter: brightness(1.03); }
#btn-cashout.btn-cash:active { transform: scale(.93); }

/* mobile: ajuste leve do “scale” */
@media (max-width: 480px){
  #btn-cashout.btn-cash{ transform: scale(.96); }
}

/* === SAQUE: força cor (sem PNG) === */
#btn-cashout.btn-cash,
.btn-cash{
  background-image: none !important; /* derruba assets/painel/botao-cashout.png */
  background: linear-gradient(180deg, #d9a05a 0%, #b7772e 100%) !important; /* caramelo do print */
  /* mantém seu tamanho atual */
}

#btn-cashout.btn-cash,
.btn-cash{
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.25),
    inset 0 -3px 0 rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* === CASHOUT: skin por PNG (mesmo tamanho do APOSTA) === */
/* PASTE ESTE BLOCO NO FINAL DO ARQUIVO */
#btn-cashout.btn-cash{
  /* usa a imagem do botão */
  background-image: url("assets/painel/btn_saque.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* NÃO alteramos largura/altura: herda as mesmas do .btn-bet/.btn-cash */
  /* só garantimos que nada “deforma” o PNG */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  display: block !important;

  /* esconde o texto interno (SAQUE/valor) para não sobrepor a arte */
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

/* mantém regra de ocultar quando não deve aparecer */
#btn-cashout.btn-cash.hidden{ display: none !important; }

/* === CASHOUT: título + saldo com pílula por cima do PNG === */
/* Mantém o PNG do botão e apenas sobrepõe o conteúdo dinâmico */
#btn-cashout.btn-cash{
  position: relative !important;
  /* mantém o PNG aplicado */
  background-image: url("assets/painel/btn_saque.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* layout interno em coluna (SAQUE em cima, valor embaixo) */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  /* zera a fonte do container; os filhos definem a própria fonte */
  font-size: 0 !important;
  /* não altera tamanho do botão (herda 520x86 / 88vw já definidos) */
}

/* Linha 1: “SAQUE” */
#btn-cashout.btn-cash .cash-title{
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

/* Linha 2: valor dentro de uma “pílula” centralizada */
#btn-cashout.btn-cash .cash-amt{
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;

  /* mini fundo (marrom escuro com leve brilho) */
  background: linear-gradient(180deg, #6f5a35 0%, #4a3a20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.30) !important;

  /* desce só 2px pra ficar colado no SAQUE, no centro */
  transform: translateY(-2px);
}

/* Mobile: tipografia um pouco menor */
@media (max-width: 480px){
  #btn-cashout.btn-cash .cash-title{ font-size: 20px !important; }
  #btn-cashout.btn-cash .cash-amt{ font-size: 14px !important; padding: 5px 10px !important; }
}

/* Continua valendo: quando não houver acertos, o botão some via .hidden */
#btn-cashout.btn-cash.hidden{ display: none !important; }

/* === Tamanho do PAINEL (apenas isso) === */
:root{
  /* ajuste aqui quando quiser menor/maior */
  --panel-width: min(680px, 92vw);
  --panel-pad-v: 1px;   /* padding vertical */
  --panel-pad-h: 12px;   /* padding horizontal */
  --panel-radius: 14px;
}

.panel{
  width: var(--panel-width) !important;
  padding: var(--panel-pad-v) var(--panel-pad-h) !important;
  border-radius: var(--panel-radius) !important;
}

/* === TAMANHO ÚNICO PARA APOSTA e SAQUE (iguais) === */
/* Ajuste os valores abaixo quando quiser deixar maior/menor */
:root{
  --cta-w: 420px;   /* largura desktop (ANTES era ~520px) */
  --cta-h: 72px;    /* altura  desktop (ANTES era ~86px)  */
  --cta-w-m: 86vw;  /* largura no mobile */
  --cta-h-m: 62px;  /* altura  no mobile */
}

/* desktop */
.panel .row-cta .btn-bet,
.panel .row-cta #btn-cashout.btn-cash,
.panel .row-cta .btn-cash{
  width: var(--cta-w) !important;
  height: var(--cta-h) !important;
  background-size: contain !important;    /* mantém o PNG/skin sem distorcer */
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* mobile */
@media (max-width: 480px){
  .panel .row-cta .btn-bet,
  .panel .row-cta #btn-cashout.btn-cash,
  .panel .row-cta .btn-cash{
    width: var(--cta-w-m) !important;
    height: var(--cta-h-m) !important;
  }
}

/* === BARRA DE APOSTA — cor #1f6eaf + versão compacta === */
:root{
  /* Ajustes rápidos (mude aqui se quiser menor/maior) */
  --stake-bg: #1f6eaf;   /* cor do fundo da barra */
  --stake-h: 64px;       /* altura total da barra (reduza p/ ficar menor) */
  --stake-pad-v: 8px;    /* padding vertical da barra */
  --stake-pad-h: 12px;   /* padding horizontal da barra */
  --stake-radius: 26px;  /* raio da barra */
  --stake-btn: 44px;     /* tamanho dos botões - / moedas / + */
  --stake-font: 26px;    /* tamanho do número (valor da aposta) */
}

/* Título em cima e centralizado (sem cápsula escura) */
.betbox-new .label{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  color: #d7e9ff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-align: center !important;
}

/* Barra: cor, altura e layout */
.betctrl-new{
  display: grid !important;
  grid-template-columns: 1fr auto auto auto !important; /* valor | - | moedas | + */
  align-items: center !important;
  column-gap: 10px !important;

  background: var(--stake-bg) !important;
  min-height: var(--stake-h) !important;
  padding: var(--stake-pad-v) var(--stake-pad-h) !important;
  border-radius: var(--stake-radius) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              0 6px 14px rgba(0,0,0,.22) !important;
}

/* Visor do valor */
.betctrl-new input{
  grid-column: 1 / span 1 !important;
  height: calc(var(--stake-h) - (var(--stake-pad-v)*2) - 14px) !important;
  text-align: center !important;
  font-weight: 900 !important;
  font-size: var(--stake-font) !important;

  background: #0b385e !important;        /* pílula escura interna */
  color: #e6f2ff !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: calc(var(--stake-h)/2 - 10px) !important;
}

/* Botões menores e consistentes */
.round.small{
  width: var(--stake-btn) !important;
  height: var(--stake-btn) !important;
  background: linear-gradient(180deg,#0e376f,#0b2f60) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.08) !important;
}

/* Mobile: ainda mais compacto */
@media (max-width: 480px){
  :root{
    --stake-h: 58px;
    --stake-btn: 40px;
    --stake-font: 22px;
  }
}

/* === AJUSTES SALDO + CTA (apenas o que você pediu) === */

/* ------ Variáveis rápidas p/ ajustar depois ------ */
:root{
  /* Visor (pílula escura) do valor */
  --saldo-pill-h: 28px;     /* ↑ altura da caixinha escura (aumente se quiser maior) */
  --saldo-font: 16px;       /* tamanho do número 0.30 */

  /* Título dentro da barra */
  --saldo-title-size: 16px; /* tamanho de "Aposta USD" */
  --saldo-title-left: 25px; /* deslocamento a partir da esquerda */
  --saldo-title-top: 6px;   /* distância do topo da barra */

  /* Espaço interno da barra (se precisar, ajuste o topo p/ caber o título) */
  --saldo-pad-x: 12px;
  --saldo-top-pad-factor: .36; /* .34 ~ .40: mais/menos espaço acima do visor */

  /* CTA (APOSTA/SAQUE) um pouco menores */
  --cta-w: 400px;           /* largura desktop */
  --cta-h: 64px;            /* altura desktop  */
  --cta-round: 56px;        /* diâmetro do botão redondo da esquerda */
}

/* ------ Título dentro da barra: à esquerda, acima do visor ------ */
.betbox-new{ position: relative !important; }
.betbox-new .label{
  position: absolute !important;
  top: var(--saldo-title-top) !important;
  left: var(--saldo-title-left) !important;
  right: auto !important;
  text-align: left !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: #eaf2ff !important; font-weight: 800 !important;
  font-size: var(--saldo-title-size) !important;
  line-height: 1 !important;
  pointer-events: none !important; z-index: 2 !important;
}

/* ------ Barra azul fininha (apenas espaço p/ o título no topo) ------ */
.betctrl-new{
  position: relative !important;
  padding: calc(var(--saldo-pill-h) * var(--saldo-top-pad-factor))
           var(--saldo-pad-x)
           var(--saldo-pad-x)
           var(--saldo-pad-x) !important;  /* reserva espaço para o título */
}

/* ------ Visor do valor: caixinha escura MAIOR ------ */
.betctrl-new input{
  height: var(--saldo-pill-h) !important;
  line-height: var(--saldo-pill-h) !important;
  font-size: var(--saldo-font) !important;
  padding: 0 12px !important;

  background: #0b385e !important;
  color: #e6f2ff !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: calc(var(--saldo-pill-h) / 2) !important;
}

/* ------ Subir e reduzir um pouco os CTAs (APOSTA/SAQUE + ícone) ------ */
.panel .row-cta{
  margin-top: 4px !important;   /* “sobe” os botões (reduz o espaço acima da barra) */
  gap: 10px !important;
}
.round-cta{
  width: var(--cta-round) !important;
  height: var(--cta-round) !important;
}

/* tamanho igual para APOSTA e SAQUE, sem alterar funcionamento */
.panel .row-cta .btn-bet,
.panel .row-cta #btn-cashout.btn-cash,
.panel .row-cta .btn-cash{
  width: var(--cta-w) !important;
  height: var(--cta-h) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Mobile (opcional, um toque menor) */
@media (max-width: 480px){
  :root{
    --saldo-pill-h: 26px;
    --saldo-font: 15px;
    --cta-w: 86vw;
    --cta-h: 60px;
    --cta-round: 52px;
  }
}

:root{
  --saldo-title-left: 32px;   /* ajuste fino até ficar exatamente acima do visor */
  /* opcional: vertical */
  /* --saldo-title-top: 8px;  // sobe/desce o rótulo */
}

/* ===== FIX DEFINITIVO — "Aposta USD" acima e o visor logo abaixo ===== */
:root{
  /* ajuste fino do título e do visor */
  --saldo-title-left: 28px;   /* empurra "Aposta USD" p/ a direita */
  --saldo-title-top: 6px;     /* sobe/desce o título dentro da barra */
  --saldo-pill-h: 30px;       /* altura da caixinha escura (valor) */
  --saldo-font: 18px;         /* tamanho do valor (0.30) */
  --saldo-top-pad-factor: .38;/* espaço no topo da barra p/ caber o título */
}

/* Título dentro da barra: à esquerda */
.betbox-new{ position: relative !important; }
.betbox-new .label{
  position: absolute !important;
  top: var(--saldo-title-top) !important;
  left: var(--saldo-title-left) !important;
  right: auto !important;
  text-align: left !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: #eaf2ff !important; font-weight: 800 !important;
  font-size: 16px !important; line-height: 1 !important;
  pointer-events: none !important; z-index: 2 !important;
}

/* Barra azul: reserva espaço no TOPO para o título */
.betctrl-new{
  position: relative !important;
  /* usa o padding já da sua versão azul (#1f6eaf) + folga p/ título */
  padding-top: calc(var(--saldo-pill-h) * var(--saldo-top-pad-factor)) !important;
}

/* Visor do valor — LARGO e logo abaixo do título */
.betctrl-new input{
  grid-column: 1 / span 1 !important;   /* fica na 1ª coluna (antes dos botões) */
  width: 100% !important;                /* CORRIGE width:46% antigo */
  margin: 0 !important;

  height: var(--saldo-pill-h) !important;
  line-height: var(--saldo-pill-h) !important;
  font-size: var(--saldo-font) !important;
  font-weight: 900 !important;
  text-align: center !important;

  background: #0b385e !important;       /* caixinha escura */
  color: #e6f2ff !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: calc(var(--saldo-pill-h)/2) !important;
}

/* Sobe o rótulo "Aposta USD" um pouco */
:root{
  --saldo-title-top: 2px;  /* estava 6px – ajuste fino aqui (0–6px) */
}

/* Sobe a linha dos CTAs (APOSTA/SAQUE + ícone) */
:root{
  --cta-shift-y: 28px;   /* valor negativo = sobe | positivo = desce */
}

.panel .row-cta{
  margin-top: var(--cta-shift-y) !important;
}

/* ALTURA ÚNICA dos CTAs (APOSTA/SAQUE) — sem alterar a largura */
:root{
  --cta-h: 96px;   /* ⇦ ajuste AQUI a altura no desktop */
  --cta-h-m: 78px; /* ⇦ ajuste AQUI a altura no mobile */
}

/* mesma altura para ambos, mantendo a largura que você já definiu antes */
.panel .row-cta .btn-bet,
.panel .row-cta #btn-cashout.btn-cash,
.panel .row-cta .btn-cash{
  height: var(--cta-h) !important;
  /* NÃO altera a largura (continua vindo de --cta-w/--cta-w-m) */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* evita que padding/bordas causem “salto” ao alternar */
  padding: 0 !important;
  border-width: 0 !important;
  box-sizing: content-box !important;
}

/* garante que o conteúdo do CASHOUT não empurre a altura */
#btn-cashout.btn-cash{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* tipografia interna controlada pelos filhos, o container não cresce */
  font-size: 0 !important;
}

/* espaçamento interno do “SAQUE” e do valor, sem alterar a altura do botão */
#btn-cashout.btn-cash .cash-title{ margin: 0 !important; }
#btn-cashout.btn-cash .cash-amt{ margin: 3px 0 0 !important; }

/* Mobile: aplica a altura específica */
@media (max-width: 480px){
  .panel .row-cta .btn-bet,
  .panel .row-cta #btn-cashout.btn-cash,
  .panel .row-cta .btn-cash{
    height: var(--cta-h-m) !important;
  }
}

/* Sobe APENAS o conjunto (ícone + APOSTA/SAQUE) sem alterar tamanhos
   e sem reduzir o fundo do painel */
:root{
  --cta-lift-y: -21px; /* valor negativo = sobe; ajuste fino aqui */
}

.panel .row.row-cta{
  position: relative;
  top: var(--cta-lift-y) !important; /* move sem afetar a altura do painel */
  z-index: 1; /* evita ficar escondido pela linha de cima, se houver */
}

/* Desce levemente APENAS o quadrado do grid */
:root{
  --grid-drop: 12px; /* ajuste fino: 8–16px */
}
.board-wrap > .grid{
  position: relative;
  top: var(--grid-drop);   /* move visualmente para baixo, sem alterar layout */
  z-index: 1;
}

/* Mobile: um pouco menos */
@media (max-width: 640px){
  :root{ --grid-drop: 8px; }
}