:root {
  --cor: #1e88e5;
  --bg: #0b1020;
  --bg2: #131a2e;
  --texto: #f5f7fb;
  --muted: #9aa5bd;
  --verde: #29b46b;
  --vermelho: #e5484d;
  --amarelo: #f5b301;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ================= VISUALIZAÇÃO ================= */
.view-wrap {
  display: flex;
  flex-direction: column;
}
/* Cada "página" ocupa a tela inteira do projetor */
.page {
  display: flex;
  flex-direction: column;
}
.page-1 {
  height: 100vh;
  padding: 1.4vh 2vw;
  gap: 1vh;
}
.page-2 {
  min-height: 100vh;
  align-items: center;
  justify-content: flex-start;
  padding: 3vh 2vw;
  gap: 2vh;
}
.placar-titulo {
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--cor);
}
.scroll-hint {
  flex: 0 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: clamp(.8rem, 2vw, 1.1rem);
  font-weight: 700;
  animation: bounce 1.6s infinite;
}
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.view-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.badge {
  background: var(--bg2);
  border: 1px solid #2a3352;
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: clamp(.8rem, 2.2vw, 1.1rem);
  color: var(--muted);
}
.badge b { color: var(--texto); }

.conn { display: flex; align-items: center; gap: .5rem; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--vermelho); }
.dot.on { background: var(--verde); }

.center {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
}

/* Layout do sorteio em duas colunas: número | patrocinador */
.sorteio-2col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  width: 100%;
}
/* Bola de bingo (número + letra em formato de bolinha) */
.col-bola {
  --d: min(38vw, 58vh);
  width: var(--d);
  height: var(--d);
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--d) * .02);
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef1f7 52%, #d7dce8 100%);
  box-shadow:
    inset 0 calc(var(--d) * -.05) calc(var(--d) * .08) rgba(0, 0, 0, .18),
    inset 0 calc(var(--d) * .04) calc(var(--d) * .06) rgba(255, 255, 255, .9),
    0 calc(var(--d) * .04) calc(var(--d) * .09) rgba(0, 0, 0, .45);
}
.col-patro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  flex: 1 1 0;
  max-width: 50vw;
  min-width: 0;
}

.coluna-letra {
  width: calc(var(--d) * .32);
  height: calc(var(--d) * .32);
  border-radius: 50%;
  background: var(--cor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--d) * .17);
  font-weight: 800;
  line-height: 1;
  border: calc(var(--d) * .012) solid rgba(255, 255, 255, .85);
  box-shadow: 0 calc(var(--d) * .015) calc(var(--d) * .03) rgba(0, 0, 0, .25);
}
.numero-grande {
  font-size: calc(var(--d) * .4);
  font-weight: 900;
  line-height: .85;
  color: #141a33;
}

/* Logo grande + nome do patrocinador (coluna da direita) */
.patro-logo-grande {
  max-width: 44vw;
  max-height: 46vh;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  padding: 2vh 2vw;
}
.patro-nome-grande {
  font-size: clamp(1.4rem, 3.6vw, 3rem);
  font-weight: 800;
  color: var(--cor);
  text-align: center;
  line-height: 1.1;
  max-width: 46vw;
}
.patro-nome-grande.so-nome {
  font-size: clamp(1.8rem, 5.5vw, 4.6rem);
}

/* Em telas estreitas (celular), empilha as duas colunas */
@media (max-width: 800px) {
  .sorteio-2col { flex-direction: column; gap: 2vh; }
  .col-bola { --d: min(72vw, 40vh); }
  .col-patro { max-width: 92vw; }
  .patro-logo-grande { max-width: 80vw; max-height: 26vh; }
  .patro-nome-grande, .patro-nome-grande.so-nome { max-width: 90vw; }
}
.premio {
  font-size: clamp(.85rem, 2vw, 1.3rem);
  color: var(--amarelo);
  font-weight: 700;
  text-align: center;
  flex: 0 0 auto;
}

.historico {
  display: flex;
  gap: 1vw;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.hist-item {
  background: var(--bg2);
  border: 1px solid #2a3352;
  border-radius: 1rem;
  padding: 1vh 1.6vw;
  text-align: center;
  min-width: 10vw;
}
.hist-item.h0 { border-color: var(--cor); }
.hist-num { font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 800; line-height: 1; }
.hist-col { font-size: clamp(.8rem, 2vw, 1.3rem); color: var(--cor); font-weight: 700; }
.hist-pat { font-size: clamp(.65rem, 1.6vw, 1rem); color: var(--muted); }

/* Placar 1..75 */
.placar {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: .5vw;
  width: min(1040px, 92vw);
  margin: 0 auto;
  flex: 0 0 auto;
}
.placar .cel {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .4rem;
  background: var(--bg2);
  color: var(--muted);
  font-size: clamp(.5rem, 1.6vw, 1rem);
  font-weight: 700;
  border: 1px solid #222b45;
}
.placar .cel.saiu { background: var(--cor); color: #fff; border-color: var(--cor); }
.placar .rot { background: transparent; border: none; color: var(--cor); }

.brindes-tag {
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: var(--texto);
  font-weight: 700;
}

.vazio { color: var(--muted); font-size: clamp(1.2rem, 4vw, 2rem); text-align: center; }

/* Vitrine de patrocinadores (tela ao vivo sem rodada) */
.vitrine { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.vitrine-titulo { font-size: clamp(1.3rem, 4vw, 2.4rem); font-weight: 800; color: var(--cor); }
.patro-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2vw;
  width: 100%;
  max-width: 1400px;
}
.pgrid-cell {
  background: #fff;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  animation: fadeIn .6s ease;
}
.pgrid-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pgrid-nome { color: #1a2036; font-weight: 700; text-align: center; font-size: clamp(.7rem, 1.5vw, 1.1rem); }
@keyframes fadeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Página dos patrocinadores master: poucos, maiores (2 colunas) */
.patro-grid.master {
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  max-width: 1100px;
}
.patro-grid.master .pgrid-cell { aspect-ratio: 16 / 9; padding: 2vh 2vw; }
.patro-grid.master .pgrid-nome { font-size: clamp(1rem, 2.5vw, 2rem); }

@media (max-width: 700px) {
  .patro-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5vw; }
  .patro-grid.master { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .placar { grid-template-columns: repeat(15, 1fr); gap: 2px; }
  .hist-item { min-width: 26vw; }
  .view-top { flex-direction: column; align-items: stretch; }
}

/* ================= OPERADOR ================= */
.op-body { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.op-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.op-header h1 { font-size: 1.3rem; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab { background: var(--bg2); border: 1px solid #2a3352; color: var(--muted); padding: .5rem 1rem; border-radius: .6rem; cursor: pointer; font-weight: 600; }
.tab.active { background: var(--cor); color: #fff; border-color: var(--cor); }
.painel { display: none; }
.painel.active { display: block; }

.card { background: var(--bg2); border: 1px solid #2a3352; border-radius: .8rem; padding: 1rem; margin-bottom: 1rem; }
.card h2 { font-size: 1.05rem; margin-bottom: .6rem; }

label { display: block; font-size: .85rem; color: var(--muted); margin: .5rem 0 .2rem; }
input, select, textarea, button { font-family: inherit; font-size: .95rem; }
input, select, textarea {
  width: 100%; padding: .55rem .7rem; border-radius: .5rem;
  border: 1px solid #2a3352; background: #0e1526; color: var(--texto);
}
.row { display: flex; gap: .6rem; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 140px; }

.btn { background: var(--cor); color: #fff; border: none; padding: .6rem 1rem; border-radius: .6rem; font-weight: 700; cursor: pointer; }
.btn.sec { background: #2a3352; }
.btn.danger { background: var(--vermelho); }
.btn.ok { background: var(--verde); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-grande { font-size: 1.3rem; padding: 1rem 1.5rem; width: 100%; }

.mini { font-size: .8rem; color: var(--muted); }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #222b45; }

.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pill.gen { background: #234; color: #7fd; }
.pill.esp { background: #423; color: #fda; }

.controle-atual { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.bola-atual-op { background: #0e1526; border: 1px solid #2a3352; border-radius: .8rem; padding: .6rem 1rem; text-align: center; }
.numero-op { font-size: 3rem; font-weight: 900; color: var(--cor); text-align: center; line-height: 1; }
.patro-op { font-size: 1.2rem; font-weight: 700; color: var(--texto); margin-top: .2rem; }
.hist-op { display: flex; gap: .5rem; }
.hist-op .b { background: #0e1526; border: 1px solid #2a3352; border-radius: .5rem; padding: .4rem .7rem; font-weight: 800; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal-bg.on { display: flex; }
.modal { background: var(--bg2); border: 1px solid #2a3352; border-radius: .8rem; padding: 1.2rem; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; }

.cartela-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: .8rem 0; }
.cartela-grid .cab { text-align: center; font-weight: 800; color: var(--cor); }
.cartela-grid .cel { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: .4rem; background: #0e1526; border: 1px solid #2a3352; font-weight: 700; }
.cartela-grid .cel.saiu { background: var(--verde); color: #fff; border-color: var(--verde); }
.cartela-grid .cel.coringa { background: var(--amarelo); color: #000; }

.veredito { font-size: 1.3rem; font-weight: 800; text-align: center; padding: .6rem; border-radius: .6rem; margin: .5rem 0; }
.veredito.ok { background: rgba(41,180,107,.2); color: var(--verde); }
.veredito.no { background: rgba(229,72,77,.2); color: var(--vermelho); }

.toast { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); background: #222b45; color: #fff; padding: .7rem 1.2rem; border-radius: .6rem; z-index: 100; display: none; }
.toast.on { display: block; }
.toast.err { background: var(--vermelho); }

.login-wrap { max-width: 360px; margin: 15vh auto; text-align: center; }
.hidden { display: none !important; }

/* Indicador de modo teste */
.teste-badge { background: var(--amarelo); color: #111; font-weight: 800; border-color: var(--amarelo); }
h1 .teste-badge { font-size: .8rem; padding: .2rem .6rem; vertical-align: middle; border-radius: 999px; }

/* Logo dos patrocinadores */
.logo-cell { display: flex; align-items: center; gap: .5rem; }
.logo-thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.logo-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.logo-btns .btn { padding: .3rem .6rem; font-size: .8rem; }

/* Relatório */
.rel-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin: .6rem 0; }
.rel-meta div { background: #0e1526; border: 1px solid #2a3352; border-radius: .5rem; padding: .5rem .7rem; }
.rel-meta .k { font-size: .72rem; color: var(--muted); }
.rel-meta .v { font-weight: 700; }
.rel-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* Seletor de modo de sorteio */
.btn.seg-on { background: var(--verde); color: #fff; }