/* Bac Bo: a mesa de cassino de verdade (feltro bege, "88" com quatro poços,
   dados translúcidos, quadro em pílula e as estradas embaixo) */

.bb3 { display: grid; gap: 14px; --feltro: #d8c6a2; --feltro-2: #b9a27b; --linha: rgba(255, 250, 235, 0.75); --azul: #2563eb; --vermelho: #c62828; --ouro: #d4a017; }

/* Tira com os últimos resultados */
.bb3-tira { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-height: 30px; }
.bb3-tira::-webkit-scrollbar { display: none; }
.bb3-pilula { flex: none; padding: 5px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #fff; }
.bb3-pilula i { font-style: normal; opacity: 0.6; margin: 0 1px; }
.bb3-pilula.azul { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.bb3-pilula.vermelho { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.bb3-pilula.empate { background: linear-gradient(180deg, #facc15, #b45309); color: #1f1300; }
.bb3-pilula.nova { box-shadow: 0 0 0 2px #fff; }

/* ───── O feltro ───── */
.bb3-feltro {
  position: relative; overflow: hidden; border-radius: 28px; padding: 34px 20px 62px;
  /* feltro bege dentro de um arco, com o trilho verde nos cantos de cima, como a mesa da bet */
  background: radial-gradient(ellipse 74% 112% at 50% 100%, #e8d9ba 0%, var(--feltro) 55%, var(--feltro-2) 95.5%, #f3e9d2 96.2%, #f3e9d2 96.8%, #2b6e47 97.3%, #1a4f32 100%);
  box-shadow: inset 0 0 80px rgba(80, 55, 20, 0.45), 0 18px 40px rgba(0, 0, 0, 0.35);
}
/* textura do feltro */
.bb3-feltro::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: radial-gradient(rgba(90, 60, 20, 0.5) 1px, transparent 1.2px); background-size: 5px 5px; }
.bb3-copo { position: absolute; top: 10px; left: 50%; width: 64px; height: 64px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3c4, #e0a91b 45%, #8a5a07 80%); box-shadow: 0 0 0 5px rgba(255, 245, 220, 0.6), 0 6px 14px rgba(60, 40, 0, 0.4); }
.bb3 .rolando .bb3-copo, .bb3.rolando .bb3-copo { animation: bb3-copo 0.35s ease-in-out infinite alternate; }
@keyframes bb3-copo { to { transform: translateX(-50%) rotate(8deg) scale(1.05); } }

.bb3-lados { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 90px); justify-items: center; margin-top: 26px; max-width: 760px; margin-inline: auto; }
.bb3-lado { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity 0.5s, filter 0.5s; }
.bb3-lado.perdeu { opacity: 0.55; filter: saturate(0.6); }

/* O "8": dois poços com o contorno duplo de creme */
.bb3-oito { --poco: clamp(70px, 8.5vw, 104px); position: relative; display: flex; flex-direction: column; gap: 16px; padding: 14px; border-radius: 999px; box-shadow: 0 0 0 3px var(--linha), 0 0 0 10px transparent, 0 0 0 12px rgba(255, 250, 235, 0.45); }
.bb-poco {
  position: relative; width: var(--poco); height: var(--poco); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, #efe3c8 0%, #dccaa6 45%, #a98f64 78%, #7d6644 100%);
  box-shadow: 0 0 0 8px #eadcbf, 0 0 0 10px rgba(120, 95, 55, 0.5), inset 0 14px 22px rgba(60, 40, 10, 0.55), inset 0 -4px 10px rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.4s;
}
.bb-poco.vez { box-shadow: 0 0 0 8px #f5e7c5, 0 0 0 11px #fbbf24, 0 0 26px rgba(251, 191, 36, 0.65), inset 0 14px 22px rgba(60, 40, 10, 0.55); }
.bb3-lado.venceu .bb-poco { box-shadow: 0 0 0 8px #f5e7c5, 0 0 0 11px #fde047, 0 0 34px rgba(253, 224, 71, 0.8), inset 0 14px 22px rgba(60, 40, 10, 0.55); }
.bb3-lado.suspense .bb3-oito { animation: bb3-pulsa 0.6s ease-in-out infinite alternate; }
@keyframes bb3-pulsa { to { box-shadow: 0 0 0 3px #fde047, 0 0 0 10px transparent, 0 0 0 12px rgba(253, 224, 71, 0.6), 0 0 40px rgba(253, 224, 71, 0.45); } }

.bb3-rotulo { font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 3vw, 30px); letter-spacing: 3px; color: #fffaf0; text-shadow: 0 2px 0 rgba(90, 60, 20, 0.45); display: flex; align-items: center; gap: 10px; }
.bb3-soma { display: none; min-width: 44px; padding: 2px 10px; border-radius: 12px; font-family: var(--fonte-titulo, inherit); letter-spacing: 0; font-size: clamp(20px, 3vw, 30px); text-align: center; color: #fff; text-shadow: none; }
.bb3-soma.tem { display: inline-block; animation: bb3-entra 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.bb3-lado.azul .bb3-soma { background: var(--azul); box-shadow: 0 4px 0 #1e3a8a; }
.bb3-lado.vermelho .bb3-soma { background: var(--vermelho); box-shadow: 0 4px 0 #7f1d1d; }
@keyframes bb3-entra { from { transform: scale(0.4); opacity: 0; } }

/* O dado translúcido */
.bbd {
  --t: calc(var(--poco) * 0.4);
  width: var(--t); height: var(--t); padding: calc(var(--t) * 0.14); border-radius: 22%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--giro));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset -3px -5px 8px rgba(0, 0, 0, 0.25), inset 3px 4px 6px rgba(255, 255, 255, 0.35), 0 7px 8px rgba(70, 45, 10, 0.45);
}
.bbd.azul { background: linear-gradient(145deg, rgba(147, 197, 253, 0.95), rgba(37, 99, 235, 0.88) 55%, rgba(30, 64, 175, 0.92)); }
.bbd.vermelho { background: linear-gradient(145deg, rgba(252, 165, 165, 0.95), rgba(220, 38, 38, 0.9) 55%, rgba(153, 27, 27, 0.92)); }
.bbd i { width: 72%; height: 72%; border-radius: 50%; }
.bbd i.pip { background: radial-gradient(circle at 40% 35%, #fff, #e5e7eb 70%); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25); }
.bbd.rolando { animation: bbd-chacoalha 0.19s linear infinite; }
.bbd.caiu { animation: bbd-cai 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes bbd-chacoalha {
  0% { transform: translate(-18%, 10%) rotate(0deg); }
  33% { transform: translate(16%, -14%) rotate(120deg) scale(1.08); }
  66% { transform: translate(-8%, -18%) rotate(240deg); }
  100% { transform: translate(-18%, 10%) rotate(360deg); }
}
@keyframes bbd-cai { 0% { transform: translate(var(--dx), calc(var(--dy) - 60%)) rotate(calc(var(--giro) - 90deg)) scale(1.3); opacity: 0.4; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--giro)); } }

.bb3-status { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 20px; border-radius: 999px; background: rgba(30, 20, 5, 0.62); color: #fff; font-weight: 600; font-size: 14px; text-align: center; backdrop-filter: blur(4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb3-status b { color: #fde047; }

.bb3-ganho { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 30px; border-radius: 22px; text-align: center; font-family: var(--fonte-titulo, inherit); font-size: clamp(30px, 6vw, 54px); color: #fff; background: rgba(15, 10, 30, 0.82); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation: bb3-entra 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); pointer-events: none; }
.bb3-ganho small { display: block; font-family: inherit; font-size: 12px; font-weight: 600; opacity: 0.8; margin-top: 4px; font-family: system-ui, sans-serif; }
.bb3-ganho.ganhou { color: #4ade80; box-shadow: 0 0 0 3px #4ade80, 0 16px 40px rgba(0, 0, 0, 0.45); }
.bb3-ganho.perdeu { color: #f87171; }
.bb3-ganho.igual { color: #fde68a; }
.bb3-ganho.some { opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 0.5s, transform 0.5s; }
.bb3-odd-emp { display: none; font-family: var(--fonte-titulo, inherit); font-size: 18px; }

/* ───── Embaixo do feltro: contas · apostas · barra e estrada grande ───── */
.bb3-mesa-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.bb3-painel { background: rgba(10, 8, 25, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 12px; display: grid; gap: 10px; }
.bb3-painel-topo, .bb3-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bb3-painel h3, .bb3-card h3 { margin: 0; font-size: 13px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.bb3-painel small, .bb3-card-topo small { color: var(--texto-3, #a1a1aa); font-size: 11px; }

.bb3-estrada { display: grid; gap: 2px; background: #f8fafc; padding: 4px; border-radius: 8px; }
.bb3-estrada.contas { --cols: 14; grid-template-rows: repeat(6, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; }
.bb3-estrada.grande { --cols: 16; grid-template-columns: repeat(var(--cols), 1fr); }
.bb3-estrada > span { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; position: relative; outline: 1px solid rgba(15, 23, 42, 0.06); outline-offset: 1px; }
.bb3-conta { color: #fff; }
.bb3-conta.azul { background: var(--azul); }
.bb3-conta.vermelho { background: var(--vermelho); }
.bb3-conta.empate { background: #eab308; color: #1f1300; }
.bb3-conta.nova { animation: bb3-pisca 1s ease-in-out 3; }
@keyframes bb3-pisca { 50% { transform: scale(1.35); } }
.bb3-anel { border: 2px solid; color: #334155; }
.bb3-anel.azul { border-color: var(--azul); }
.bb3-anel.vermelho { border-color: var(--vermelho); }
.bb3-anel.empate { border-color: #eab308; }
.bb3-anel .risco { position: absolute; width: 120%; height: 2px; background: #16a34a; transform: rotate(-45deg); }

.bb3-barra-faixa { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 800; color: #fff; }
.bb3-barra-faixa span { display: grid; place-items: center; min-width: 0; transition: flex 0.6s; }
.bb3-barra-faixa .azul { background: var(--azul); }
.bb3-barra-faixa .empate { background: #eab308; color: #1f1300; }
.bb3-barra-faixa .vermelho { background: var(--vermelho); }
.bb3-barra-nums { display: flex; gap: 10px; font-size: 11px; font-weight: 700; margin-top: 6px; color: var(--texto-2, #d4d4d8); }
.bb3-barra-nums small { margin-left: auto; }
.bb3-seq { font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--texto-2, #d4d4d8); }
.bb3-seq b { color: #fff; }
.bb3-bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.bb3-bola.azul { background: var(--azul); }
.bb3-bola.vermelho { background: var(--vermelho); }
.bb3-bola.empate { background: #eab308; }

/* O quadro de apostas: pílula azul · círculo dourado do empate · pílula vermelha */
.area-apostas { display: grid; gap: 12px; justify-items: center; }
.bb3-quadro { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.bb3-casa {
  position: relative; border: 0; cursor: pointer; color: #fff; height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font-family: Georgia, "Times New Roman", serif; transition: filter 0.2s, transform 0.12s, box-shadow 0.3s;
}
.bb3-casa:hover { filter: brightness(1.12); }
.bb3-casa:active { transform: scale(0.98); }
.bb3-casa.azul { border-radius: 999px 0 0 999px; padding: 0 64px 0 26px; align-items: flex-start; background: linear-gradient(160deg, #3b82f6, #1e40af 70%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25), 0 8px 18px rgba(0, 0, 0, 0.35); }
.bb3-casa.vermelho { border-radius: 0 999px 999px 0; padding: 0 26px 0 64px; align-items: flex-end; background: linear-gradient(200deg, #ef4444, #991b1b 70%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25), 0 8px 18px rgba(0, 0, 0, 0.35); }
.bb3-casa.empate {
  z-index: 2; width: 150px; height: 150px; margin: 0 -48px; border-radius: 50%; align-items: center; padding: 14px 10px;
  background: radial-gradient(circle at 50% 35%, #fde68a, #d4a017 60%, #92600a); color: #3b2500;
  box-shadow: 0 0 0 5px #1f1535, 0 0 0 7px rgba(255, 240, 200, 0.55), 0 10px 22px rgba(0, 0, 0, 0.45);
}
.bb3-nome { font-size: 19px; letter-spacing: 2px; font-weight: 700; }
.bb3-casa.empate .bb3-nome { font-size: 13px; }
.bb3-odd { font-family: var(--fonte-titulo, inherit); font-size: 26px; line-height: 1; }
.bb3-chance { font-family: system-ui, sans-serif; font-size: 11px; opacity: 0.75; }
.bb3-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; font-family: system-ui, sans-serif; font-size: 9.5px; margin-top: 2px; }
.bb3-mini i { font-style: normal; display: flex; justify-content: space-between; gap: 4px; padding: 0 3px; border-radius: 4px; }
.bb3-mini b { font-weight: 900; }
.bb3-mini i.saiu { background: #3b2500; color: #fde68a; }
/* as fichas ficam em cima da borda da casa, sem tampar o nome */
.bb3-pilha { position: absolute; width: 40px; height: 40px; top: -8px; }
.bb3-casa.azul .bb3-pilha { left: 42%; }
.bb3-casa.vermelho .bb3-pilha { right: 42%; }
.bb3-casa.empate .bb3-pilha { top: auto; bottom: -8px; left: 50%; margin-left: -20px; }
.bb3-pilha .ficha { position: absolute; left: 0; top: calc(var(--i) * -4px); animation: bb3-ficha 0.25s ease-out; }
@keyframes bb3-ficha { from { transform: translateY(-14px); opacity: 0; } }
.bb3-valor { position: absolute; bottom: 8px; font-family: system-ui, sans-serif; font-size: 12px; background: rgba(0, 0, 0, 0.45); color: #fff; padding: 1px 8px; border-radius: 999px; }
.bb3-valor:empty { display: none; }
.bb3-casa.azul .bb3-valor { left: 42%; }
.bb3-casa.vermelho .bb3-valor { right: 42%; }
.bb3-casa.empate .bb3-valor { bottom: -30px; }
.bb3-casa.ganhou { box-shadow: 0 0 0 4px #fde047, 0 0 36px rgba(253, 224, 71, 0.75); }
.bb3-casa.empate.ganhou { box-shadow: 0 0 0 5px #1f1535, 0 0 0 9px #fde047, 0 0 40px rgba(253, 224, 71, 0.8); }
.bb3-casa.perdeu .bb3-pilha { animation: bb3-some 0.6s forwards; }
@keyframes bb3-some { to { transform: translateY(-30px); opacity: 0; } }

.bb3-fichas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.bb3-fichas .ficha.escolhida { transform: translateY(-6px); box-shadow: inset 0 0 0 4px var(--borda), 0 0 0 3px #fde047, 0 8px 0 rgba(0, 0, 0, 0.35); }
.bb3-botoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bb3.rolando .bb3-casa, .bb3.rolando .bb3-fichas, .bb3.rolando .bb3-botoes .botao:not(.principal-btn) { pointer-events: none; }
.bb3.rolando .bb3-fichas { opacity: 0.5; }
.bb3-nota { text-align: center; margin: 0; }

/* ───── Extras: somas, pagamentos e últimas vitórias ───── */
.bb3-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bb3-card { background: rgba(10, 8, 25, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.bb3-somas { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; height: 150px; align-items: end; }
.bb3-soma-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-2, #d4d4d8); }
.bb3-soma-barras { display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.bb3-soma-barras i { width: 42%; min-height: 2px; border-radius: 4px 4px 0 0; transition: height 0.6s; }
.bb3-soma-barras .azul, .bb3-somas-leg .azul { background: #3b82f6; }
.bb3-soma-barras .vermelho, .bb3-somas-leg .vermelho { background: #ef4444; }
.bb3-somas-leg { display: flex; gap: 14px; font-size: 11px; color: var(--texto-3, #a1a1aa); }
.bb3-somas-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bb3-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bb3-tabela th { text-align: left; font-size: 11px; color: var(--texto-3, #a1a1aa); font-weight: 600; padding: 4px 6px; }
.bb3-tabela td { padding: 5px 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bb3-tabela .num { text-align: right; }
.bb3-tabela tr.saiu td { background: rgba(234, 179, 8, 0.2); }
.bb3-ganhos { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.bb3-ganho-linha { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.bb3-ganho-linha img { width: 32px; height: 32px; border-radius: 50%; }
.bb3-ganho-linha b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb3-ganho-linha small { font-size: 11px; color: var(--texto-3, #a1a1aa); }
.bb3-lucro { color: #4ade80; font-weight: 800; text-align: right; font-size: 14px; }
.bb3-lucro small { display: block; font-weight: 600; }

/* ───── Telas menores ───── */
@media (max-width: 1100px) {
  .bb3-mesa-baixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "apostas apostas" "contas grande"; }
  .area-apostas { grid-area: apostas; }
  .area-contas { grid-area: contas; }
  .area-grande { grid-area: grande; }
  .bb3-extras { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bb3-extras > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bb3-feltro { padding: 40px 10px 64px; border-radius: 20px; }
  .bb3-oito { --poco: 74px; gap: 16px; padding: 12px; }
  .bb-poco { box-shadow: 0 0 0 5px #eadcbf, 0 0 0 7px rgba(120, 95, 55, 0.5), inset 0 10px 16px rgba(60, 40, 10, 0.55); }
  .bb3-copo { width: 46px; height: 46px; }
  .bb3-status { font-size: 12px; padding: 7px 14px; white-space: normal; width: max-content; }
  .bb3-mesa-baixo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "apostas" "contas" "grande"; }
  .bb3-casa { height: 112px; }
  .bb3-casa.azul { padding: 0 52px 0 16px; }
  .bb3-casa.vermelho { padding: 0 16px 0 52px; }
  .bb3-casa.empate { width: 124px; height: 124px; margin: 0 -40px; }
  .bb3-nome { font-size: 14px; letter-spacing: 1px; }
  .bb3-odd { font-size: 21px; }
  .bb3-mini { display: none; }
  .bb3-odd-emp { display: block; }
  .bb3-pilha { transform: scale(0.8); }
  .bb3-casa.azul .bb3-pilha, .bb3-casa.azul .bb3-valor { left: 30%; }
  .bb3-casa.vermelho .bb3-pilha, .bb3-casa.vermelho .bb3-valor { right: 30%; }
  .bb3-rotulo { font-size: 16px; letter-spacing: 1px; gap: 6px; }
  .bb3-extras { grid-template-columns: minmax(0, 1fr); }
  .bb3-ganho { padding: 10px 18px; }
}