/* Binary Double — cassino escuro. A roleta e as fichas carregam a cor; o resto é tinta quieta.
   Âmbar só na ação principal e na barra do tempo. */
:root {
  --fundo: #0b0c0e;
  --sup-1: #131418;
  --sup-2: #1a1c21;
  --sup-3: #23262c;
  --linha: #25282e;
  --tinta: #ece8e0;
  --tinta-2: #9b978e;
  --tinta-3: #6a675f;

  --v: #d8343f;
  --v-escuro: #a8222c;
  --p: #262930;
  --p-escuro: #1b1d22;
  --b: #f3efe6;
  --b-escuro: #d9d3c5;

  --destaque: #f0b232;
  --destaque-tinta: #1a1408;
  --ganho: #4cbf7b;
  --perda: #e2656d;

  --r: 6px;
  --r-g: 12px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 500;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--fundo); color: var(--tinta); }
body { font-size: 15px; line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
b, strong, h1, h2, legend { font-weight: 700; }
.num, dd, td { font-variant-numeric: tabular-nums; }
.sutil { color: var(--tinta-2); font-size: 13px; }
.erro { color: var(--perda); font-size: 13px; }
.erro:empty { display: none; }
.ganho { color: var(--ganho); }
.perda { color: var(--perda); }
[hidden] { display: none !important; }
.dir { text-align: right !important; }
.sprite { position: absolute; width: 0; height: 0; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 14px; height: 14px; }
.luz { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); flex: none; }
.luz.on { background: var(--ganho); box-shadow: 0 0 0 3px rgb(76 191 123 / .18); }

/* ---------------- Botões ---------------- */
.btn-principal {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: var(--r); background: var(--destaque); color: var(--destaque-tinta);
  font-weight: 800; text-decoration: none; transition: filter .15s;
}
.btn-principal:hover { filter: brightness(1.08); }
.btn-principal:disabled { background: var(--sup-3); color: var(--tinta-3); cursor: default; filter: none; }
.btn-linha {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r); border: 1px solid var(--linha); font-weight: 700; text-decoration: none;
}
.btn-linha:hover { border-color: var(--tinta-2); }
.btn-peq { padding: 8px 14px; font-size: 14px; }
.btn-largo { width: 100%; }
.btn-deriv { display: inline-flex; justify-content: center; padding: 14px 20px; border-radius: var(--r); background: var(--tinta); color: var(--fundo); font-weight: 800; }
.btn-perigo { padding: 11px 16px; border-radius: var(--r); border: 1px solid var(--perda); color: var(--perda); font-weight: 700; }
.btn-texto { color: var(--tinta-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.btn-texto:hover { color: var(--tinta); }
.btn-mini { padding: 0 12px; height: 44px; border-radius: var(--r); background: var(--sup-3); color: var(--tinta-2); font-weight: 700; }
.btn-mini:hover { color: var(--tinta); }
.link-sutil { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 13px; text-decoration: none; }
.link-sutil:hover { color: var(--tinta); }

/* ---------------- Fichas ---------------- */
/* ficha = quadrado com aro interno e o losango da marca no centro (sem número) */
.tile, .ficha-mini, .ficha-btn, .bolinha {
  position: relative; display: inline-grid; place-items: center; border-radius: var(--r); flex: none;
}
.tile::before, .ficha-mini::before, .ficha-btn::before, .bolinha::before {
  content: ""; position: absolute; inset: 14%; border-radius: 4px; border: 2px solid rgb(255 255 255 / .16);
}
.tile::after, .ficha-mini::after, .ficha-btn::after, .bolinha::after {
  content: ""; width: 26%; aspect-ratio: 1; transform: rotate(45deg); border-radius: 2px; background: rgb(255 255 255 / .22);
}
.v { --c: var(--v); --c2: var(--v-escuro); }
.p { --c: var(--p); --c2: var(--p-escuro); }
.b { --c: var(--b); --c2: var(--b-escuro); }
.tile.v, .ficha-mini.v, .ficha-btn.v, .bolinha.v,
.tile.p, .ficha-mini.p, .ficha-btn.p, .bolinha.p,
.tile.b, .ficha-mini.b, .ficha-btn.b, .bolinha.b { background: var(--c); box-shadow: inset 0 -4px 0 var(--c2); }
.tile.b::before, .ficha-mini.b::before, .ficha-btn.b::before, .bolinha.b::before { border-color: rgb(0 0 0 / .08); }
.tile.b::after, .ficha-mini.b::after, .ficha-btn.b::after, .bolinha.b::after { background: var(--v); }
.ficha-mini { width: 26px; height: 26px; border-radius: 5px; }
/* ficha com número: o número no lugar do losango (o branco segue com a marca) */
.com-num::after { display: none; }
.tile-num { position: relative; z-index: 1; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; }
.p .tile-num { color: var(--tinta); }
.roleta .tile-num { font-size: calc(var(--ficha) * .34); }
.bolinha .tile-num { font-size: 14px; }
.ficha-mini .tile-num { font-size: 12px; }
.ficha-mini::before { border-width: 1.5px; inset: 16%; border-radius: 3px; }
.ficha-mini.p { outline: 1px solid var(--sup-3); }

/* ======================= TOPO ======================= */
.topo {
  position: sticky; top: 0; z-index: 30; height: 64px;
  display: flex; align-items: center; gap: 32px; padding: 0 24px;
  background: rgb(11 12 14 / .96); border-bottom: 1px solid var(--linha);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 17px; color: var(--tinta-2); white-space: nowrap; }
.logo b { color: var(--tinta); font-weight: 800; }
.logo-marca { width: 26px; height: 26px; fill: var(--v); stroke: var(--fundo); stroke-width: 1.2; }
.abas { display: flex; gap: 4px; height: 100%; }
.abas a {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 100%;
  color: var(--tinta-2); text-decoration: none; font-size: 15px; position: relative;
}
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); }
.abas a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--destaque); }
.abas .luz { margin-left: 2px; }
.topo-dir { margin-left: auto; position: relative; }
.visitante { display: flex; gap: 8px; align-items: center; }
.visitante .btn-linha { padding: 8px 18px; }
.pilula-conta {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--sup-2); border: 1px solid var(--linha);
}
.pilula-conta:hover { border-color: var(--tinta-3); }
.saldo { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.conta-tipo { order: 2; padding: 4px 10px; border-radius: 999px; background: var(--sup-3); font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.conta-tipo.real { background: var(--destaque); color: var(--destaque-tinta); }
.menu-conta {
  position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 16px;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g);
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / .6); display: grid; gap: 10px;
}
.lista-contas { list-style: none; display: grid; gap: 4px; }
.lista-contas button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--linha); text-align: left; font-size: 14px; }
.lista-contas button:hover { border-color: var(--tinta-3); }
.lista-contas button[aria-current="true"] { border-color: var(--tinta); }
.lista-contas .real { color: var(--destaque); font-weight: 700; }
.hoje { font-size: 13px; color: var(--tinta-2); display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--linha); }
.hoje .num:not(.ganho):not(.perda) { color: var(--tinta); }
.item-menu { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--tinta-2); }
.item-menu:hover { color: var(--tinta); }

/* ======================= PÁGINA ======================= */
.principal { max-width: 1320px; margin: 0 auto; padding: 20px 24px 48px; }
.view-pagina { max-width: none; } /* páginas usam as mesmas margens do Double e do topo */
.view-pagina[data-view="estrategias"] { max-width: 1000px; margin-inline: auto; } /* formulário: coluna centralizada */
.pagina-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 16px 0 28px; }
.pagina-cab h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.rodape { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--tinta-3); }
.rodape { text-align: center; }
.rodape p { max-width: 120ch; margin-inline: auto; line-height: 1.6; text-wrap: balance; }
.rodape p + p { margin-top: 8px; }
.rodape strong { color: var(--tinta-2); font-weight: 700; }

/* ---------------- Banners ---------------- */
.banners { position: relative; height: 210px; border-radius: var(--r-g); overflow: hidden; margin-bottom: 16px; background: var(--sup-1); }
.banner { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.banner.ativo { opacity: 1; pointer-events: auto; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 12 14 / .92) 0%, rgb(11 12 14 / .55) 45%, transparent 75%); }
.banner figcaption { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 0 40px; max-width: 560px; }
.banner figcaption b { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.banner figcaption > span { color: var(--tinta-2); font-size: 15px; max-width: 42ch; }
.banner figcaption .btn-linha { margin-top: 8px; background: rgb(11 12 14 / .5); }
.banner-pontos { position: absolute; z-index: 2; left: 40px; bottom: 16px; display: flex; gap: 6px; }
.banner-pontos button { width: 22px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .25); }
.banner-pontos button[aria-current="true"] { background: var(--tinta); }

/* ---------------- Jogo ---------------- */
.jogo { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; }
.painel, .mesa { background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); }
.painel { padding: 16px; align-self: start; }
.painel-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--fundo); border-radius: var(--r); margin-bottom: 18px; }
.painel-abas button { padding: 9px; border-radius: 4px; color: var(--tinta-2); font-weight: 700; font-size: 14px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.painel-abas button[aria-selected="true"] { background: var(--sup-3); color: var(--tinta); }
.rotulo { display: block; font-size: 13px; color: var(--tinta-2); margin: 0 0 8px; }
.painel-corpo .rotulo:not(:first-child) { margin-top: 18px; }
.valor-linha { display: flex; gap: 4px; }
.moeda { display: grid; place-items: center; padding: 0 12px; font-size: 13px; color: var(--tinta-3); background: var(--fundo); border: 1px solid var(--linha); border-right: 0; border-radius: var(--r) 0 0 var(--r); }
.valor-linha input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--fundo); border: 1px solid var(--linha); border-left: 0; border-radius: 0 var(--r) var(--r) 0; outline: none;
}
.valor-linha input:focus { border-color: var(--tinta-3); }
.cores { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.cor {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: var(--r);
  background: var(--c); box-shadow: inset 0 -4px 0 var(--c2); border: 2px solid transparent; transition: transform .08s;
}
.cor.v { color: #fff; }
.cor.p { color: var(--tinta); border-color: var(--sup-3); }
.cor.b { color: var(--fundo); }
.cor .ficha-mini { box-shadow: none; background: rgb(0 0 0 / .14); outline: 0; }
.cor.b .ficha-mini { background: rgb(0 0 0 / .06); }
.cor .mult { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.cor:active { transform: translateY(1px); }
.cor[aria-checked="true"] { border-color: var(--destaque); box-shadow: inset 0 -4px 0 var(--c2), 0 0 0 3px rgb(240 178 50 / .25); }
.painel .erro { margin-top: 10px; }
.regra { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tinta-3); margin-top: 14px; }
.texto-peq { font-size: 14px; color: var(--tinta-2); margin-bottom: 16px; }
.auto-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mini-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mini-numeros dt { font-size: 12px; color: var(--tinta-2); }
.mini-numeros dd { font-size: 20px; font-weight: 800; }
#painel-auto-on .btn-linha { margin-bottom: 8px; }
.fila-lista { list-style: none; display: grid; gap: 4px; margin-top: 12px; }
.fila-lista:empty { display: none; }
.fila-lista li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--fundo); border-radius: var(--r); font-size: 14px; }
.fila-lista .ficha-mini { width: 20px; height: 20px; }

/* ---------------- Mesa / roleta ---------------- */
.mesa { padding: 16px; min-width: 0; display: flex; flex-direction: column; }
.pista { position: relative; background: var(--fundo); border-radius: var(--r); overflow: hidden; height: 210px; }
.roleta {
  position: absolute; inset: 0; --ficha: 124px; --gap: 12px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.trilho { position: absolute; top: 50%; left: 0; display: flex; gap: var(--gap); will-change: transform; margin-top: calc(var(--ficha) / -2); }
.roleta .tile { width: var(--ficha); height: var(--ficha); border-radius: 8px; transition: opacity .25s; }
.roleta .tile::before { border-radius: 6px; }
.roleta::after { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 3px; margin-left: -1.5px; background: var(--tinta); border-radius: 2px; z-index: 2; }
.roleta.com-vencedora .tile:not(.vencedora) { opacity: .3; }
.roleta.com-vencedora::after { opacity: 0; }
.tile.vencedora { outline: 3px solid var(--tinta); outline-offset: 4px; }

.contagem {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: rgb(11 12 14 / .78); transition: opacity .3s;
}
.contagem.fora { opacity: 0; pointer-events: none; }
#contagem-texto { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#contagem-texto span { color: var(--tinta-2); font-weight: 500; font-size: 18px; }
.barra { width: min(420px, 70vw); height: 6px; border-radius: 3px; background: var(--sup-3); overflow: hidden; }
.barra-fill { height: 100%; background: var(--destaque); transform-origin: left; transform: scaleX(0); }

.giros-cab { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; }
.ultimas { display: flex; gap: 6px; flex-wrap: wrap; }
.bolinha { width: 34px; height: 34px; border-radius: 6px; }
.bolinha::before { border-width: 1.5px; border-radius: 3px; }
.ultimas-jogo { flex-wrap: nowrap; overflow: hidden; }
.ultimas-jogo .bolinha:first-child { outline: 2px solid var(--tinta-2); outline-offset: 2px; }
.ultimas-grade { display: grid; grid-template-columns: repeat(25, 1fr); gap: 6px; }
.ultimas-grade .bolinha { width: auto; height: auto; aspect-ratio: 1; }

/* ---------------- Apostas da rodada ---------------- */
.colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.coluna { background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); padding: 14px; min-height: 180px; transition: opacity .3s, border-color .3s; }
.coluna-cab { display: flex; align-items: center; gap: 10px; }
.coluna-titulo { font-weight: 700; flex: 1; }
.coluna-total { font-weight: 800; }
.coluna-qtd { margin: 4px 0 12px 36px; }
.coluna-lista { list-style: none; display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.coluna-lista li { display: flex; justify-content: space-between; padding: 7px 8px; border-radius: 4px; font-size: 13px; }
.coluna-lista li:nth-child(odd) { background: var(--fundo); }
.coluna-lista li.eu { color: var(--destaque); }
.coluna.venceu { border-color: var(--ganho); }
.coluna.venceu .coluna-lista .valor { color: var(--ganho); }
.coluna.perdeu { opacity: .5; }

/* ---------------- Números / resultados ---------------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 28px; }
.numeros dt { font-size: 13px; color: var(--tinta-2); margin-bottom: 4px; }
.numeros dd { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.dist { display: flex; height: 36px; gap: 3px; border-radius: var(--r); overflow: hidden; font-size: 12px; font-weight: 700; }
.dist-seg { display: flex; align-items: center; padding: 0 12px; min-width: 0; white-space: nowrap; overflow: hidden; background: var(--c); color: #fff; }
.dist-seg.p { justify-content: flex-end; color: var(--tinta); }
.dist-seg.b { color: var(--fundo); justify-content: center; min-width: 88px; flex-shrink: 0; }
.titulo-bloco { margin: 36px 0 14px; display: flex; gap: 12px; align-items: baseline; }
.titulo-bloco .sutil { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------------- Estratégias ---------------- */
.auto-status { background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); padding: 20px; margin-bottom: 24px; }
.auto-status-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.auto-status .auto-linha { margin: 0; }
.auto-status .numeros { margin: 0; }
.aviso { padding: 12px 16px; border-left: 3px solid var(--destaque); background: var(--sup-1); border-radius: 0 var(--r) var(--r) 0; margin-bottom: 24px; font-size: 14px; }

.form-auto { display: grid; gap: 16px; }
.form-auto fieldset { border: 1px solid var(--linha); background: var(--sup-1); border-radius: var(--r-g); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.form-auto legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; font-size: 17px; min-height: 26px; }
.form-auto legend + * { clear: both; }
.passo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sup-3); font-size: 13px; font-weight: 800; }
.sub { display: grid; gap: 12px; padding-top: 4px; }
.segmento { display: flex; flex-wrap: wrap; gap: 4px; }
.segmento button { padding: 9px 14px; border-radius: var(--r); background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta-2); font-size: 14px; }
.segmento button:hover { color: var(--tinta); }
.segmento button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); font-weight: 700; }
.segmento-peq button { padding: 0 12px; height: 36px; font-size: 13px; }
.escolha-cor { display: flex; gap: 8px; }
.ficha-btn { width: 44px; height: 44px; border: 2px solid transparent; }
.ficha-btn[aria-pressed="true"] { outline: 2px solid var(--destaque); outline-offset: 2px; }
.ficha-btn.p { outline: 1px solid var(--sup-3); }
.ficha-btn.p[aria-pressed="true"] { outline: 2px solid var(--destaque); }
.ajuda { font-size: 13px; color: var(--tinta-2); max-width: 70ch; }

.lista-padroes { list-style: none; display: grid; gap: 6px; }
.lista-padroes li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--fundo); border-radius: var(--r); flex-wrap: wrap; }
.lista-padroes .ficha-mini { width: 28px; height: 28px; }
.ficha-qualquer { width: 28px; height: 28px; border-radius: 5px; border: 1.5px dashed var(--tinta-3); display: inline-grid; place-items: center; color: var(--tinta-2); font-size: 13px; flex: none; }
.lista-padroes .igual { margin: 0 6px; }
.lista-padroes .remover { margin-left: auto; color: var(--tinta-3); display: grid; place-items: center; padding: 4px; }
.lista-padroes .remover:hover { color: var(--perda); }
.lista-padroes .ordem { font-size: 12px; color: var(--tinta-3); width: 18px; }
.lista-padroes .vazio { color: var(--tinta-2); font-size: 13px; background: none; padding: 0; }
.igual { color: var(--tinta-2); font-weight: 800; font-size: 18px; }

.construtor { border: 1px dashed var(--linha); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; }
.construtor-seq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rascunho { display: flex; gap: 6px; min-height: 44px; min-width: 120px; align-items: center; padding: 0 8px; border-radius: var(--r); background: var(--fundo); flex-wrap: wrap; }
.rascunho .ficha-mini, .rascunho .ficha-qualquer { width: 32px; height: 32px; }
.rascunho:empty::before { content: "toque nas cores abaixo"; color: var(--tinta-3); font-size: 13px; }
.construtor-teclas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tecla { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: var(--r); background: var(--sup-3); font-weight: 700; font-size: 14px; }
.tecla .ficha-mini { width: 20px; height: 20px; }
.tecla:hover { background: var(--linha); }
#btn-add-padrao { margin-left: auto; }
.texto-linha { display: flex; gap: 8px; align-items: stretch; }
.texto-linha textarea { flex: 1; min-width: 0; resize: vertical; padding: 10px 12px; border-radius: var(--r); background: var(--fundo); border: 1px solid var(--linha); outline: none; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
.modelos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.interruptor { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; position: relative; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.trilho-int { width: 40px; height: 22px; border-radius: 11px; background: var(--sup-3); position: relative; flex: none; transition: background .15s; }
.trilho-int::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--tinta-2); transition: transform .15s; }
.interruptor input:checked + .trilho-int { background: var(--ganho); }
.interruptor input:checked + .trilho-int::after { transform: translateX(18px); background: #fff; }
.interruptor input:focus-visible + .trilho-int { outline: 2px solid var(--tinta); outline-offset: 2px; }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.campos label { display: grid; gap: 6px; font-size: 13px; color: var(--tinta-2); min-width: 0; }
.campos select, .sel-num {
  height: 42px; padding: 0 10px; background-color: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r);
  outline: none; font-size: 14px; width: 100%; min-width: 0; color: var(--tinta);
}
.sel-num { width: auto; height: 44px; }
.teclas-num { gap: 4px; }
.tecla-num { padding: 0; width: 40px; justify-content: center; }
.tecla-num .ficha-mini { width: 28px; height: 28px; }
.campos input {
  height: 42px; padding: 0 12px; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r);
  outline: none; font-size: 15px; font-variant-numeric: tabular-nums; width: 100%; min-width: 0;
}
.campos input:focus, .texto-linha textarea:focus { border-color: var(--tinta-3); }
.degraus { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.degraus li { padding: 6px 10px; background: var(--fundo); border-radius: var(--r); font-size: 13px; font-variant-numeric: tabular-nums; }
.degraus li.total { background: none; color: var(--tinta-2); }
.form-pe { display: grid; gap: 8px; justify-items: start; padding: 4px 0 8px; }
.form-pe .btn-principal { min-width: 280px; padding: 15px 24px; font-size: 16px; }
.form-auto :disabled { opacity: .55; cursor: default; }

/* ---------------- Histórico ---------------- */
.tabela-rolar { overflow-x: auto; background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 500; color: var(--tinta-3); padding: 12px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--sup-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .ficha-mini { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.vazio { padding: 24px 0; }

/* ---------------- Modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgb(5 6 7 / .8); display: grid; place-items: center; padding: 16px; }
.modal-caixa {
  position: relative; width: 100%; max-width: 400px; padding: 32px 28px 24px; text-align: center;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: 16px; display: grid; gap: 14px; justify-items: center;
}
.modal-fechar { position: absolute; top: 12px; right: 12px; color: var(--tinta-2); padding: 6px; }
.modal-fechar:hover { color: var(--tinta); }
.modal-marca { width: 44px; height: 44px; fill: var(--v); stroke: var(--sup-1); stroke-width: 1; }
.modal-caixa h2 { font-size: 22px; text-transform: none; letter-spacing: -0.01em; color: var(--tinta); font-weight: 800; }
#modal-inicio, #modal-espera { display: grid; gap: 14px; justify-items: center; width: 100%; }
.modal-texto { color: var(--tinta-2); font-size: 14px; }
.modal-nota { font-size: 12px; color: var(--tinta-3); }
.pontinhos { display: flex; gap: 6px; }
.pontinhos span { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-2); animation: ponto 1s infinite; }
.pontinhos span:nth-child(2) { animation-delay: .15s; }
.pontinhos span:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 50% { opacity: .2; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; padding: 12px 18px; border-radius: var(--r); background: var(--tinta); color: var(--fundo); font-weight: 700; font-size: 14px; }

.abas-movel { display: none; }

/* ---------------- Controles: um visual só ---------------- */
/* Todo seletor do app com a mesma seta e a mesma altura; nada do visual nativo do navegador. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b978e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding-right: 32px !important;
}
select:hover { border-color: var(--tinta-3) !important; }
select:focus-visible { outline: 2px solid var(--tinta-2); outline-offset: 1px; }
option { background: var(--sup-2); color: var(--tinta); }
input[type=date] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

.btn-icone { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r);
  border: 1px solid var(--linha); color: var(--tinta-2); }
.btn-icone:hover { color: var(--tinta); border-color: var(--tinta-3); }
.btn-icone .ic { width: 18px; height: 18px; }
.btn-icone-perigo:hover { color: var(--perda); border-color: rgb(226 101 109 / .5); background: rgb(226 101 109 / .08); }
.btn-icone:disabled { opacity: .35; cursor: default; }
.btn-icone:disabled:hover { color: var(--tinta-2); border-color: var(--linha); background: none; }
.acoes-cab { display: flex; align-items: center; gap: 8px; }
.acoes-cab .btn-linha { height: 40px; }

.chip { padding: 7px 14px; border-radius: 999px; background: var(--sup-2); border: 1px solid var(--linha); color: var(--tinta-2); font-size: 13px; }
.chip:hover { color: var(--tinta); border-color: var(--tinta-3); }
.modelos .btn-texto { margin-left: 6px; }
.texto-linha .btn-linha { align-self: flex-start; }

/* Estratégias: abas Estratégia | Gerenciamento */
.abas-pagina { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; }
.abas-pagina button { position: relative; padding: 12px 16px; font-size: 15px; font-weight: 700; color: var(--tinta-2);
  display: inline-flex; align-items: baseline; gap: 8px; }
.abas-pagina button:hover { color: var(--tinta); }
.abas-pagina button[aria-selected="true"] { color: var(--tinta); }
.abas-pagina button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--destaque); }
.aba-resumo { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.aba-estr { display: grid; gap: 16px; }
.aba-estr[hidden] { display: none; }

/* Painel: estratégia salva pronta para ligar */
#auto-com-estr { display: grid; gap: 8px; }
.estr-salva { padding: 12px 14px; margin-bottom: 6px; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r); }
.estr-salva .rotulo { margin-bottom: 4px; font-size: 12px; }
.estr-salva-desc { font-size: 14px; font-weight: 700; line-height: 1.4; }
#estr-salva-parou { margin-top: 6px; font-size: 12px; }

/* Aviso de licença (topo da página) */
.aviso-licenca { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r);
  border: 1px solid rgb(226 101 109 / .35); background: rgb(226 101 109 / .08); color: var(--tinta); font-size: 14px; }
.aviso-licenca .ic { color: var(--perda); }
.aviso-licenca[data-tom="aviso"] { border-color: rgb(240 178 50 / .35); background: rgb(240 178 50 / .08); }
.aviso-licenca[data-tom="aviso"] .ic { color: var(--destaque); }

/* Mesa: resumo dos últimos 100 embaixo da roleta */
.mesa-resumo { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--linha); }
.mesa-resumo .giros-cab { align-items: center; }
.mesa-stats { display: flex; gap: 20px; }
.mesa-stats div { display: flex; align-items: baseline; gap: 6px; }
.mesa-stats dt { font-size: 12px; color: var(--tinta-2); }
.mesa-stats dd { font-size: 14px; font-weight: 800; }
.dist-mesa { height: 28px; margin-bottom: 10px; }
.mesa-grade { gap: 4px; }
.mesa-grade .bolinha { border-radius: 4px; }
.mesa-grade .tile-num { font-size: 10px; }

/* ---------------- Placar da mesa ---------------- */
.placar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }
.placar-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.placar-titulo { font-size: 13px; color: var(--tinta-2); }
.placar-titulo .sutil { font-size: 12px; color: var(--tinta-3); margin-left: 4px; }
.placar-cab .btn-texto { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.placar-res { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
#placar-res { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.placar-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.placar-grade dt { font-size: 12px; color: var(--tinta-2); }
.placar-grade dd { font-size: 18px; font-weight: 800; }
.placar-barra { height: 4px; border-radius: 2px; background: var(--perda); overflow: hidden; }
.placar-barra.vazia { background: var(--sup-3); }
.placar-barra i { display: block; height: 100%; background: var(--ganho); transition: width .4s ease; }
.placar-seq { margin-top: 8px; font-size: 12px; min-height: 1em; }

/* ---------------- Histórico ---------------- */
.pagina-cab .btn-linha { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px; margin-bottom: 20px;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); }
.filtro { display: flex; flex-direction: column; }
.filtro .rotulo { margin-bottom: 6px; font-size: 12px; }
.f-periodo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-datas { display: flex; align-items: center; gap: 6px; }
.filtros select, .filtros input[type=date], .paginacao select {
  background-color: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r); padding: 0 10px; font-size: 13px; height: 36px; min-width: 120px; }
.paginacao select { min-width: 72px; }
.filtros select:focus, .filtros input:focus { outline: none; border-color: var(--tinta-3); }
.f-limpar { margin-left: auto; align-self: center; }

.resumo-hist { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-bottom: 28px; }
.resumo-destaque { display: flex; flex-direction: column; gap: 2px; }
.resumo-destaque .rotulo { margin: 0 0 4px; }
#h-resultado { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.resumo-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.resumo-grade dt { font-size: 12px; color: var(--tinta-2); margin-bottom: 2px; }
.resumo-grade dd { font-size: 20px; font-weight: 800; }
.tabela-mini { font-size: 13px; background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tabela-mini th, .tabela-mini td { padding: 8px 10px; white-space: nowrap; }
.tabela-mini .ficha-mini { width: 16px; height: 16px; }
.ficha-qualquer { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; font-size: 11px; color: var(--tinta-2); vertical-align: middle; }

.barra-selecao { position: sticky; top: 72px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; margin-bottom: 8px;
  background: var(--sup-3); border: 1px solid var(--tinta-3); border-radius: var(--r); font-size: 14px; }
.barra-selecao .btn-linha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }

.tabela-hist td { white-space: nowrap; }
.tabela-hist .col-check { width: 36px; padding-right: 0; }
.tabela-hist input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--tinta); cursor: pointer; vertical-align: middle; }
.tabela-hist tr.marcada td { background: var(--sup-2); }
.tabela-hist .col-data .sutil { margin-left: 4px; }
.tag-conta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sup-3); color: var(--tinta-2); }
.tag-conta.real { background: rgb(240 178 50 / .14); color: var(--destaque); }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pag-ctrl { display: flex; align-items: center; gap: 8px; }
.pag-ctrl .btn-linha { min-width: 36px; padding: 6px 10px; }
.pag-ctrl .btn-linha:disabled { opacity: .35; cursor: default; }
.pag-ctrl label { display: flex; align-items: center; gap: 6px; margin-right: 8px; }

/* Resultados: baixar giros */
.baixar-giros { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 28px;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-g); }
.baixar-giros p { margin-top: 4px; }
.baixar-ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.baixar-ctrl .btn-principal { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ---------------- Modal de confirmação ---------------- */
.modal-conf { z-index: 70; }
.modal-conf:not([hidden]) .conf-caixa { animation: conf-entra .16s ease-out; }
@keyframes conf-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.conf-caixa {
  --tom: var(--tinta-2);
  width: 100%; max-width: 440px; padding: 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px;
  background: var(--sup-1); border: 1px solid var(--linha); border-top: 3px solid var(--tom); border-radius: 14px;
}
.conf-caixa[data-tom="perigo"] { --tom: var(--perda); }
.conf-caixa[data-tom="real"] { --tom: var(--destaque); }
.conf-icone { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  color: var(--tom); background: color-mix(in srgb, var(--tom) 14%, transparent); }
.conf-icone .ic { width: 22px; height: 22px; }
.conf-corpo h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--tinta); text-transform: none; line-height: 1.25; margin-top: 2px; }
.conf-corpo p { color: var(--tinta-2); font-size: 14px; margin-top: 8px; max-width: 46ch; }
.conf-corpo .conf-nota { font-size: 13px; color: var(--tom); margin-top: 10px; }
.conf-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.conf-acoes button { min-width: 120px; padding: 10px 16px; }
.conf-caixa[data-tom="perigo"] #conf-sim { background: var(--perda); color: #1a0709; }
@media (max-width: 760px) {
  .modal-conf { place-items: end center; padding: 0; }
  .conf-caixa { max-width: none; border-radius: 16px 16px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .conf-acoes button { flex: 1; min-width: 0; }
}

/* ---------------- Celular ---------------- */
@media (max-width: 1000px) {
  .jogo { grid-template-columns: minmax(0, 1fr); }
  .resumo-hist { grid-template-columns: minmax(0, 1fr); }
  .mesa { order: -1; }
  .colunas { grid-template-columns: minmax(0, 1fr); }
  .coluna { min-height: 0; }
}
@media (max-width: 760px) {
  .topo { padding: 0 16px; gap: 12px; height: 56px; }
  .abas { display: none; }
  .logo span { display: none; }
  .visitante .btn-principal { display: none; }
  .pilula-conta { padding-left: 12px; }
  .principal { padding: 12px 12px 96px; }
  .banners { height: 150px; }
  .banner figcaption { padding: 0 20px; }
  .banner figcaption b { font-size: 24px; }
  .banner figcaption > span { font-size: 13px; }
  .banner figcaption .btn-linha { display: none; }
  .banner-pontos { left: 20px; bottom: 10px; }
  .pista { height: 120px; }
  .roleta { --ficha: 76px; --gap: 8px; }
  #contagem-texto { font-size: 20px; }
  .mesa, .painel { padding: 12px; }
  .ultimas-grade { grid-template-columns: repeat(10, 1fr); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .numeros dd { font-size: 22px; }
  .pagina-cab h1 { font-size: 26px; }
  .form-auto fieldset { padding: 16px; }
  .form-pe .btn-principal { width: 100%; min-width: 0; }
  #btn-add-padrao { margin-left: 0; width: 100%; }
  .tabela th:nth-child(3), .tabela td:nth-child(3) { display: none; }
  .tabela-hist th:nth-child(3), .tabela-hist td:nth-child(3) { display: table-cell; }
  .tabela-hist th:nth-child(3), .tabela-hist td:nth-child(3),
  .tabela-hist th:nth-child(6), .tabela-hist td:nth-child(6),
  .tabela-hist th:nth-child(4), .tabela-hist td:nth-child(4),
  .tabela-hist th:nth-child(8), .tabela-hist td:nth-child(8) { display: none; }
  .tabela-hist td, .tabela-hist th { padding-left: 8px; padding-right: 8px; }
  .tabela-hist .col-aposta { white-space: normal; }
  .tabela-hist .col-data .sutil { display: block; margin: 0; font-size: 11px; }
  .filtros { padding: 12px; }
  .filtro:not(.filtro-periodo) { flex: 1 1 40%; }
  .f-limpar { margin-left: 0; }
  .resumo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #h-resultado { font-size: 36px; }
  .barra-selecao { top: 60px; flex-wrap: wrap; }
  .menu-conta { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .abas-movel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgb(11 12 14 / .97); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .abas-movel a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 11px; color: var(--tinta-2); text-decoration: none; }
  .abas-movel a[aria-current="page"] { color: var(--destaque); }
}

/* ---------------- Celular: a mesa na ordem de quem joga ----------------
   Roleta → aposta → últimos giros → resumo → apostas da rodada. No desktop a mesa é um cartão só;
   aqui ela se desmonta (display: contents) e cada parte entra na fila do .jogo. */
@media (max-width: 1000px) {
  .jogo { gap: 12px; }
  .mesa { display: contents; }
  .mesa > .pista { order: 1; }
  .jogo > .painel { order: 2; }
  .mesa > .giros-cab { order: 3; margin: 4px 2px -4px; }
  .mesa > .ultimas-jogo { order: 4; }
  .mesa > .mesa-resumo { order: 5; margin: 0; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--sup-1); }
  .mesa-grade { display: none; }            /* os 100 inteiros ficam em Resultados */
  .mesa-resumo .giros-cab { margin-top: 0; flex-wrap: wrap; gap: 6px 12px; }
  .dist-mesa { margin-bottom: 0; }
  .colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .coluna { padding: 10px; }
}
@media (max-width: 760px) {
  body:has(.logado:not([hidden])) .banners { display: none; }  /* quem já entrou vai direto para a mesa */
  .banners { height: 120px; margin-bottom: 12px; }
  .pista { border: 1px solid var(--linha); border-radius: var(--r-g); }
  .ultimas-jogo .bolinha { width: 30px; height: 30px; }
  .coluna-cab { flex-wrap: wrap; gap: 6px; }
  .coluna-titulo { font-size: 13px; }
  .coluna-total { width: 100%; font-size: 15px; }
  .coluna-qtd { margin: 2px 0 8px; font-size: 12px; }
  .coluna-lista li { padding: 5px 6px; font-size: 11px; gap: 4px; }
  .mesa-stats { gap: 12px; }
  .rodape { font-size: 11px; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  /* abas de Estratégias: título em cima, resumo embaixo, metade da largura cada */
  .abas-pagina button { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
  .abas-pagina button[aria-selected="true"]::after { left: 0; right: 0; }
  .aba-resumo { font-size: 11px; }
  /* gale: as duas opções empilhadas, mesma largura */
  .segmento[data-campo="galeModo"] { display: grid; grid-template-columns: 1fr; width: 100%; }
  .segmento[data-campo="galeModo"] button { width: 100%; text-align: left; }
}
@media (max-width: 760px) {
  /* escolhas do formulário do automático: grade de 2, todas do mesmo tamanho */
  .form-auto .segmento:not([data-campo="galeModo"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-auto .segmento button { min-height: 42px; }
}
@media (max-width: 760px) {
  .pagina-cab { align-items: center; }
  .some-no-celular { display: none; }
  #btn-csv { width: 40px; height: 40px; padding: 0; justify-content: center; }
  #btn-csv .ic { width: 18px; height: 18px; }
}
@media (max-width: 760px) {
  /* Painel de aposta compacto: o que importa (valor, cor, botão) cabe junto da roleta */
  .painel-abas { margin-bottom: 12px; padding: 3px; }
  .painel-abas button { padding: 7px; font-size: 13px; }
  .painel-corpo .rotulo { margin-bottom: 6px; font-size: 12px; }
  .painel-corpo .rotulo:not(:first-child) { margin-top: 12px; }
  .painel-corpo > p.rotulo:nth-of-type(1) { display: none; }   /* "Selecionar cor": as fichas já dizem */
  .valor-linha input { height: 42px; font-size: 17px; }
  .cores { margin: 10px 0 12px; gap: 6px; }
  .cor { height: 48px; gap: 8px; }
  .cor .mult { font-size: 14px; }
  .regra { margin-top: 10px; font-size: 11px; }

  /* Placar numa faixa só: resultado à esquerda, V · D · acerto à direita */
  .placar { margin-top: 12px; padding-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; }
  .placar-cab { grid-column: 1 / -1; margin-bottom: 0; }
  .placar-titulo { font-size: 12px; }
  .placar-res { margin: 0; }
  .placar-res #placar-res { font-size: 22px; }
  #placar-apostado, .placar-barra, .placar-seq { display: none; }
  .placar-grade { margin: 0; justify-self: end; display: flex; gap: 14px; }
  .placar-grade div { display: flex; align-items: baseline; gap: 4px; }
  .placar-grade dt { font-size: 11px; }
  .placar-grade dd { font-size: 15px; }
}