/* Brasil em Disputa - o que foi acrescentado ao visual original:
   painel nacional ao vivo, guerra de conquista de estados e os quatro minijogos.
   Mesma paleta do base.css, sem framework. */

/* ------------------------------------------------------------ painel ao vivo */
.painel { margin-bottom: 40px }
.duelo {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch;
  margin-top: 22px;
}
.duelista {
  border: 1px solid #253246; border-radius: 14px; background: #111925;
  padding: 20px 22px; position: relative; overflow: hidden; min-width: 0;
}
.duelista:before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cor, #4d8eff);
}
.duelista .quem { display: flex; align-items: center; gap: 10px; min-width: 0 }
.duelista .quem strong { font-size: 19px; letter-spacing: -.4px; display: block; overflow-wrap: anywhere }
.duelista .quem small { display: block; color: #8a9bb5; font-size: 12px }
.duelista .numerao {
  font-size: 54px; font-weight: 900; letter-spacing: -2.5px; line-height: 1.05;
  margin: 12px 0 2px; font-variant-numeric: tabular-nums; color: var(--cor, #fff);
}
.duelista .numerao small { font-size: 21px; letter-spacing: -1px; margin-left: 2px }
.duelista .votos { font-size: 13px; color: #93a4bd }
.duelista .faixa { height: 7px; border-radius: 4px; background: #253146; margin-top: 14px; overflow: hidden }
.duelista .faixa span { display: block; height: 100%; background: var(--cor, #4d8eff); transition: width .6s }
.duelo .gap {
  align-self: center; text-align: center; font-size: 12px; color: #8ea0ba;
  letter-spacing: .1em; font-weight: 700; white-space: nowrap;
}
.duelo .gap b { display: block; font-size: 22px; color: #ffe779; letter-spacing: -.5px; margin-top: 4px }

.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px }
.indicador {
  border: 1px solid #253246; border-radius: 12px; background: #0f1724; padding: 15px 16px; min-width: 0;
}
.indicador span { font-size: 11px; letter-spacing: .12em; font-weight: 700; color: #8ca0bd; display: block }
.indicador strong {
  display: block; font-size: 27px; letter-spacing: -1.2px; margin-top: 7px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.indicador small { display: block; font-size: 12px; color: #7e90ad; margin-top: 3px; line-height: 1.5 }
.indicador.quente strong { color: #ffd166 }

.origem {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: #8396b2; margin-top: 16px;
}
.selo {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid #334663;
  border-radius: 20px; padding: 5px 11px; font-weight: 700; letter-spacing: .06em;
}
.selo i { width: 8px; height: 8px; border-radius: 50%; background: #5fd38a; box-shadow: 0 0 10px #5fd38a }
.selo.frio i { background: #ffb64d; box-shadow: 0 0 10px #ffb64d }
.selo.retrato i { background: #8ea0ba; box-shadow: none }

/* -------------------------------------------------- guerra de conquista */
.conquista { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 22px; margin-top: 22px }
.mapaguerra {
  position: relative; border: 1px solid #4a3f76; border-radius: 14px; background: #0e1526;
  background-image: radial-gradient(#2b2a4d 1px, transparent 1px); background-size: 22px 22px;
  padding: 10px; display: flex; align-items: center; justify-content: center;
}
.mapaguerra svg { width: 100%; max-width: 430px; height: auto; display: block; overflow: visible }
.mapaguerra .state { stroke: #0b1019; stroke-width: 1.5 }
.mapaguerra .state.meu { stroke: #ffe779; stroke-width: 3 }
.quartel { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.quartel .escolha { border: 1px solid #4a3f76; border-radius: 12px; background: #141c33; padding: 16px }
.quartel .escolha label { font-size: 11px; letter-spacing: .12em; font-weight: 700; color: #bdb2e4; display: block }
.quartel select.regiontrigger { margin-top: 9px; border-radius: 8px }
.quartel .escolha p { font-size: 12px; color: #a1a9cc; margin: 10px 0 0; line-height: 1.6 }
.quartel .escolha b { color: #ffe987 }
.ranking { border: 1px solid #4a3f76; border-radius: 12px; background: #141c33; padding: 16px }
.ranking h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: .1em; color: #ffe779 }
.ranking p { margin: 0 0 10px; font-size: 12px; color: #a1a9cc }
.ranking ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; max-height: 268px; overflow: auto }
.ranking li { display: flex; align-items: center; gap: 9px; font-size: 13px }
.ranking li i {
  width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
}
.ranking li b { width: 34px; flex-shrink: 0; font-variant-numeric: tabular-nums }
.ranking li span { color: #9fb0c9; margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums }
.ranking li.vazio { color: #8894b4; display: block }

/* ------------------------------------------------------------- minijogos */
.minijogos { margin-top: 43px }
.jogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px }
.jogocard {
  border: 1px solid #2b3a53; border-radius: 16px; padding: 22px;
  background: linear-gradient(160deg, #18203a 0%, #111b2e 100%); min-width: 0;
}
.jogocard h3 { margin: 10px 0 6px; font-size: 22px; letter-spacing: -.6px }
.jogocard > p { margin: 0; font-size: 13px; color: #9aaac1; line-height: 1.6 }
.jogocard .eyebrow { color: #ffe779 }
.palco { margin-top: 16px }
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid #6f7ab8; background: #273255; color: #eef2fa; border-radius: 9px;
  padding: 11px 15px; font-size: 15px; font-weight: 700; box-shadow: 0 4px 0 #161c33;
  transition: transform .08s, filter .12s;
}
.bt:hover { filter: brightness(1.15) }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 #161c33 }
.bt:disabled { filter: saturate(.4); cursor: default }
.bt.forte { background: #f34668; border-color: #ff98ae; box-shadow: 0 4px 0 #7e203e }
.bt.azul { background: #347fee; border-color: #9dcdff; box-shadow: 0 4px 0 #1c4688 }
.bt.pequeno { padding: 8px 11px; font-size: 13px; box-shadow: 0 3px 0 #161c33 }

/* quiz */
.pergunta { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0 0 12px }
.alternativas { display: grid; gap: 9px }
.alternativas button {
  text-align: left; border: 1px solid #3a4873; background: #141c31; color: #dfe6f5;
  border-radius: 9px; padding: 11px 13px; font-size: 14px; line-height: 1.4;
}
.alternativas button:hover:not(:disabled) { background: #1d2745; border-color: #596bab }
.alternativas button.certa { border-color: #4fd08a; background: #15321f; color: #c8f5d9 }
.alternativas button.errada { border-color: #e0536f; background: #30151e; color: #ffd0d9 }
.alternativas button:disabled { cursor: default }
.veredito { margin: 13px 0 0; font-size: 14px; line-height: 1.5; color: #ffe0a3; min-height: 21px }
.quizplaca { display: flex; gap: 14px; font-size: 12px; color: #a1b0c8; margin-top: 12px; letter-spacing: .06em }

/* promessa / santinho */
.santinho {
  border: 3px solid #20182e; border-radius: 13px; background: #fff5d3; color: #241f33;
  padding: 16px 18px; box-shadow: 5px 6px 0 #00000044; transform: rotate(-1deg);
}
.santinho .cabeca { display: flex; align-items: center; gap: 12px }
.santinho .cabeca .doll { max-width: 64px; filter: none }
.santinho .urna {
  font-family: "Courier New", monospace; font-weight: 900; font-size: 28px;
  background: #241f33; color: #ffe779; border-radius: 7px; padding: 4px 10px; letter-spacing: 2px;
}
.santinho h4 { margin: 0; font-size: 19px; line-height: 1.2 }
.santinho .cargo { font-size: 12px; font-weight: 700; color: #6c5f72; letter-spacing: .1em }
.santinho .lema { margin: 13px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35 }
.santinho .promessa { margin: 10px 0 0; font-size: 14px; line-height: 1.55 }
.santinho .miudo { margin: 12px 0 0; font-size: 10px; color: #6c5f72; line-height: 1.4 }

/* tapa no palanque */
.toupeiras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;
  background: radial-gradient(ellipse at 50% 100%, #353474 0%, #141d33 70%);
  border: 1px solid #5a5288; border-radius: 12px; padding: 12px;
}
.buraco {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: #0d1426;
  border: 1px solid #333f6b; overflow: hidden; display: flex; align-items: flex-end;
  justify-content: center; padding: 0; cursor: pointer;
}
.buraco .doll {
  max-width: 76%; transform: translateY(102%); transition: transform .14s ease-out;
  pointer-events: none; filter: drop-shadow(0 6px 3px #06081577);
}
.buraco.fora .doll { transform: translateY(6%) }
.buraco.acertado { background: #2b1a33 }
.buraco.acertado .doll { transform: translateY(102%) rotate(16deg) }
.buraco .pontos {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 19px; font-weight: 900; color: #ffde72; text-shadow: 2px 2px #392737;
  opacity: 0; pointer-events: none;
}
.buraco.acertado .pontos { animation: point-rise .8s ease-out both; opacity: 1 }
.tapaplaca { display: flex; gap: 16px; align-items: baseline; margin-top: 14px; flex-wrap: wrap }
.tapaplaca .grande { font-size: 32px; font-weight: 900; letter-spacing: -1.4px; font-variant-numeric: tabular-nums }
.tapaplaca small { font-size: 12px; color: #a1b0c8 }

/* simulador de 2o turno */
.transfere { display: grid; gap: 13px; margin-top: 6px }
.transfere .linha { min-width: 0 }
.transfere .linha header {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px; align-items: baseline;
}
.transfere .linha header b { overflow-wrap: anywhere }
.transfere .linha header span { color: #9fb0c9; font-size: 12px; white-space: nowrap }
.transfere input[type=range] { width: 100%; accent-color: #f45369; margin: 6px 0 0 }
.transfere .reparte { display: flex; justify-content: space-between; font-size: 11px; color: #8fa1ba }
.resultado2t { margin-top: 16px; border-top: 1px solid #2b3a53; padding-top: 16px }
.resultado2t .barra { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 2px solid #090c1a }
.resultado2t .barra i { display: block; transition: width .35s }
.resultado2t .barra i:first-child { background: #f45369 }
.resultado2t .barra i:last-child { background: #4d8eff }
.resultado2t .legenda { display: flex; justify-content: space-between; margin-top: 9px; font-size: 14px; font-weight: 700 }
.resultado2t .legenda span:first-child { color: #ff9bad }
.resultado2t .legenda span:last-child { color: #9cc8ff }
.resultado2t .vereditao { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: #ffe0a3 }

.nota { font-size: 11px; color: #8395b1; line-height: 1.6; margin: 14px 0 0 }

@media (max-width: 1000px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .jogos { grid-template-columns: 1fr }
}
@media (max-width: 860px) {
  .duelo { grid-template-columns: 1fr }
  .duelo .gap { order: 3 }
  .conquista { grid-template-columns: 1fr }
}
@media (max-width: 700px) {
  .duelista { padding: 16px }
  .duelista .numerao { font-size: 42px }
  .indicador strong { font-size: 22px }
  .jogocard { padding: 17px }
  .jogocard h3 { font-size: 19px }
  .toupeiras { gap: 7px; padding: 8px }
}