/* A cidade — Vice/Leonida em papel claro. Cada cor significa. */

:root {
  --fundo:    #FFF4EA;
  --sup:      #FFFFFF;
  --sup-2:    #FFF8F1;
  --sup-3:    #FDEBDD;
  --borda:    #F3DCCB;
  --borda-2:  #E7C3AC;
  --tinta:    #1B1F3B;
  --tinta-2:  #4A4E69;
  --tinta-3:  #8A8FA8;

  --rosa:     #FF2D95;
  --laranja:  #FF7A2F;
  --aqua:     #19C9B7;
  --violeta:  #8A4FFF;
  --amarelo:  #FFD166;
  --verde:    #06D6A0;
  --errado:   #FF1F4B;

  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 0 28px 80px;
  background: var(--fundo);
  background-image: radial-gradient(1200px 500px at 90% -10%, rgba(255, 45, 149, .10), transparent 60%),
                    radial-gradient(900px 420px at 0% 0%, rgba(255, 122, 47, .10), transparent 60%);
  color: var(--tinta); font-family: var(--sans); font-size: 15px; line-height: 1.55;
}
.envolve { max-width: 1320px; margin: 0 auto; }

.cabeca { max-width: 82ch; padding: 40px 0 22px; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 12px;
}
h1 {
  font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 14px;
  background: linear-gradient(92deg, var(--rosa), var(--laranja) 55%, var(--violeta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.abertura { color: var(--tinta-2); margin: 0 0 12px; max-width: 76ch; }
.abertura strong { color: var(--tinta); font-weight: 700; }

h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 44px 0 14px; }

/* ── a cena ───────────────────────────────────────────────────────────── */

.maquete {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  background: var(--sup); border: 1px solid var(--borda); border-radius: 14px;
  overflow: hidden; box-shadow: 0 8px 30px rgba(255, 45, 149, .08), 0 1px 2px rgba(27, 31, 59, .06);
}
@media (max-width: 900px) { .maquete { grid-template-columns: minmax(0, 1fr); } }

.maquete-palco {
  position: relative; min-height: 520px; cursor: grab; touch-action: none;
  /* o céu de Vice: laranja no horizonte, rosa, violeta no alto */
  background: linear-gradient(180deg, #8A4FFF 0%, #FF6FAE 48%, #FFB25E 100%);
}
.maquete-palco.cidade { min-height: 640px; }
.maquete-palco:active { cursor: grabbing; }
.maquete-palco canvas { display: block; width: 100%; height: 100%; position: relative; }
.maquete-vazio { margin: 0; padding: 40px 24px; color: #fff; font-size: 14px; }

/* os rótulos flutuando sobre cada obra */
.rotulos3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.rotulo3d {
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 8px 5px; border-radius: 8px;
  background: rgba(27, 31, 59, .78); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .12s, border-color .12s;
}
.rotulo3d.ativo { background: rgba(27, 31, 59, .95); border-color: var(--aqua); }
.rotulo3d .r-cod { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; font-weight: 700; }
.rotulo3d .r-sit { display: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.rotulo3d.ativo .r-sit, .rotulo3d .r-sit.s-paralisada, .rotulo3d .r-sit.s-nao_iniciada, .rotulo3d .r-sit.s-concluida { display: block; }
.rotulo3d .r-sit.s-paralisada { color: #FF9AB0; }
.rotulo3d .r-sit.s-nao_iniciada { color: #FFC48A; }
.rotulo3d .r-sit.s-concluida { color: #7EF2D2; }
.rotulo3d .r-missao {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 20px;
  background: var(--laranja); color: #1B1F3B;
}
.rotulo3d .r-missao.alta { background: var(--errado); color: #fff; }

/* ── o painel ao lado ─────────────────────────────────────────────────── */

.maquete-legenda {
  padding: 22px 24px; border-left: 1px solid var(--borda); display: flex; flex-direction: column; gap: 14px;
  min-width: 0; max-height: 640px; overflow: auto;
}
@media (max-width: 900px) { .maquete-legenda { border-left: none; border-top: 1px solid var(--borda); } }

.leg-geral { display: flex; flex-direction: column; gap: 3px; }
.leg-cod { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--rosa); font-weight: 700; }
.leg-nome { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.leg-familia { margin: 0; font-size: 12.5px; color: var(--tinta-3); }
.leg-familia b { color: var(--tinta-2); font-weight: 700; }
.leg-dica { margin: 0; font-size: 12.5px; color: var(--tinta-3); }

.leg-chaves { display: grid; gap: 7px; }
.leg-chave { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--tinta-2); }
.leg-chave .amostra { width: 13px; height: 13px; border-radius: 3px; flex: none; border: 1px solid transparent; }
.leg-chave .amostra.solido   { background: linear-gradient(135deg, #3B3E48 0 33%, #C7C0B3 33% 66%, #B8563B 66%); }
.leg-chave .amostra.semi     { background: rgba(255, 45, 149, .45); border-color: var(--rosa); box-shadow: inset 0 0 6px rgba(255,45,149,.8); }
.leg-chave .amostra.fantasma { background: rgba(138, 79, 255, .14); border: 1px dashed var(--violeta); }

.leg-dados { margin: 0; display: grid; }
.leg-dados > div { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borda); }
.leg-dados > div:last-child { border-bottom: none; }
.leg-dados.compacta > div { padding: 5px 0; }
.leg-dados dt { font-size: 12.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 8px; min-width: 0; }
.leg-dados dt::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; border: 1px solid var(--borda-2); }
.leg-dados .apropriado dt::before   { background: var(--aqua); border-color: var(--aqua); }
.leg-dados .comprometido dt::before { background: var(--rosa); border-color: var(--rosa); }
.leg-dados .livre dt::before, .leg-dados .esgotado dt::before { background: var(--sup-3); }
.leg-dados .erro dt::before  { background: var(--errado); border-color: var(--errado); }
.leg-dados .alerta dt::before { background: var(--laranja); border-color: var(--laranja); }
.leg-dados dd { margin: 0 0 0 auto; font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.leg-dados .livre dd { color: var(--aqua); }
.leg-dados .esgotado dd { color: var(--tinta-3); }
.leg-dados .erro dd { color: var(--errado); }
.leg-dados .alerta dd { color: var(--laranja); }

.leg-aviso { margin: 0; font-size: 12.5px; color: var(--laranja); font-weight: 700; }
.leg-erro  { margin: 0; font-size: 12.5px; color: var(--errado); font-weight: 800; }
.leg-missoes-total { margin: 0; font-size: 13px; font-weight: 800; color: var(--laranja); }
.leg-fechou { margin: 0; font-size: 13px; font-weight: 800; color: var(--verde); }

/* as missões: a fila, com marcador e ação */
.leg-missoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.missao {
  display: grid; gap: 2px; padding: 8px 10px 9px 12px; border-radius: 8px;
  background: var(--sup-2); border: 1px solid var(--borda); position: relative;
}
.missao::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--laranja); }
.missao.alta::before { background: var(--errado); }
.missao .m-titulo { font-size: 13px; font-weight: 700; }
.missao .m-acao { font-size: 11.5px; color: var(--rosa); font-weight: 700; }

/* ── controles ────────────────────────────────────────────────────────── */

.maquete-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 2px 0; }
.mq-bt {
  appearance: none; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; border: 1px solid var(--borda-2); background: var(--sup); color: var(--tinta);
}
.mq-bt:hover { border-color: var(--rosa); }
.mq-bt:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.mq-bt[aria-pressed="true"] { background: linear-gradient(92deg, var(--rosa), var(--laranja)); color: #fff; border-color: transparent; }
.mq-tempo { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 220px; }
.mq-tempo label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.mq-tempo input[type="range"] { flex: 1 1 auto; accent-color: var(--rosa); min-width: 120px; }
.mq-tempo output { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
select.mq-sel {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--borda-2); background: var(--sup); color: var(--tinta); min-width: 280px;
}

.rodape { margin-top: 24px; font-size: 12.5px; color: var(--tinta-3); display: flex; gap: 8px 18px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .rotulo3d, .mq-bt { transition: none; } }

/* ── rótulos de fase e de bairro ──────────────────────────────────────── */

.rotulo3d.fase { flex-direction: row; gap: 7px; padding: 4px 9px; background: rgba(27,31,59,.82); cursor: pointer; }
.rotulo3d.fase .r-nome { font-size: 11px; font-weight: 600; opacity: .9; }
.rotulo3d.fase .r-pct { font-size: 11px; font-weight: 800; color: #7EF2D2; font-variant-numeric: tabular-nums; }
.rotulo3d.fase .r-pct.alerta { color: #FFC48A; }
.rotulo3d.fase.ativo { border-color: #fff; background: rgba(27,31,59,.98); transform-origin: center; }

.rotulo3d.bairro {
  flex-direction: column; gap: 1px; padding: 6px 12px 7px; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--tinta); border: 1px solid var(--borda-2);
}
.rotulo3d.bairro .r-bairro { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.rotulo3d.bairro .r-conta { font-size: 10.5px; color: var(--tinta-3); font-weight: 600; }
.rotulo3d.bairro.com-missao { border-color: var(--laranja); }
.rotulo3d.bairro.com-missao .r-conta { color: var(--laranja); }

/* ── as etapas ────────────────────────────────────────────────────────── */

.leg-secao { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.etapas { display: grid; gap: 6px; }
.etapa {
  appearance: none; font: inherit; text-align: left; width: 100%; cursor: pointer;
  display: grid; gap: 6px; padding: 9px 11px 10px; border-radius: 9px;
  border: 1px solid var(--borda); background: var(--sup-2); color: var(--tinta);
  transition: border-color .12s, background .12s;
}
.etapa:hover, .etapa.ativo { border-color: var(--rosa); background: #fff; }
.etapa:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.etapas.compacta .etapa { cursor: default; padding: 6px 9px 7px; }
.etapa-cab { display: flex; align-items: baseline; gap: 8px; }
.etapa-cod { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--rosa); letter-spacing: .04em; }
.etapa-nome { font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapa-pct { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.etapa-pct.alerta { color: var(--laranja); }
.etapa-barra { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(138,79,255,.16); border: 1px dashed rgba(138,79,255,.5); }
.etapa-barra i { display: block; height: 100%; }
.etapa-barra .apr { background: linear-gradient(90deg, #B3ACA0, #C7C0B3); }
.etapa-barra .comp { background: rgba(255,45,149,.6); box-shadow: inset 0 0 4px rgba(255,45,149,.9); }
.etapa-det { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.etapa-det .apr::before, .etapa-det .comp::before, .etapa-det .livre::before, .etapa-det .med::before, .etapa-det .erro::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0;
}
.etapa-det .apr::before { background: #B3ACA0; }
.etapa-det .comp::before { background: var(--rosa); }
.etapa-det .livre::before { background: rgba(138,79,255,.25); border: 1px dashed var(--violeta); box-sizing: border-box; }
.etapa-det .med::before { background: var(--aqua); }
.etapa-det .erro { color: var(--errado); font-weight: 700; }
.etapa-det .erro::before { background: var(--errado); }
.etapa-nota { font-size: 11px; color: var(--laranja); font-weight: 700; }
.etapa-nota.erro { color: var(--errado); }
.leg-chaves.compacta { grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
.leg-chaves.compacta .leg-chave { font-size: 11.5px; }

.m-rodape { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.m-classe { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }

/* ── bairros, na legenda ──────────────────────────────────────────────── */

.bairros-lista { display: grid; gap: 4px; }
.bairro-item {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup-2); color: var(--tinta);
}
.bairro-item:hover { border-color: var(--rosa); background: #fff; }
.bairro-item.apagado { opacity: .45; }
.b-nome { font-size: 13px; font-weight: 700; }
.b-conta { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.b-missoes { font-size: 12px; font-weight: 800; color: var(--laranja); min-width: 2ch; text-align: right; }
.b-missoes.zero { color: var(--tinta-3); font-weight: 400; }

/* ── os filtros ───────────────────────────────────────────────────────── */

.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.filtros-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-right: 4px; }
.filtros-sep { width: 1px; height: 22px; background: var(--borda-2); margin: 0 4px; }
.filtro {
  appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 20px;
  border: 1px solid var(--borda-2); background: var(--sup); color: var(--tinta-2); cursor: pointer;
}
.filtro:hover { border-color: var(--tinta-3); color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtro.classe[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); }
.filtro:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }

/* `[hidden]` tem de ganhar do `display: flex` do rótulo — a mesma lição de
   05/09 no frontend: sem isto, o rótulo escondido fica preso no canto (0,0). */
.rotulo3d[hidden] { display: none !important; }

/* ── o mapa ───────────────────────────────────────────────────────────── */

.maquete-palco.mapa { background: #FFF8F1; height: 400px; min-height: 0; cursor: grab; }
.maquete-palco.mapa + .maquete-legenda { max-height: 400px; }
@media (max-width: 600px) {
  .maquete-palco.mapa { height: 340px; }
  .maquete-palco.mapa + .maquete-legenda { max-height: 280px; }
  .mapa .rotulo3d.pino { padding: 5px 8px; }
  .mapa .rotulo3d.pino .r-bairro { font-size: 11.5px; }
}
.mapa .maquete-vazio { color: var(--tinta-2); }
.mapa-chaves { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mapa-chave { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); font-size: 11.5px; }
.mapa-chave::before { content: ""; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.mapa-chave.com-obras::before { background: #B49ACF; }
.mapa-chave.sem-obras::before { background: #EAE5EE; }
.rotulo3d.pino { flex-direction: column; gap: 3px; padding: 8px 12px; cursor: pointer; background: rgba(255,255,255,.97); color: var(--tinta); border: 1px solid #DDD3E7; border-radius: 9px; box-shadow: 0 3px 12px rgba(50,33,74,.10); }
.rotulo3d.pino:hover { border-color: #9A7ABF; background: #FFF; }
.rotulo3d.pino .r-bairro { font-size: 12.5px; font-weight: 800; }
.rotulo3d.pino .r-conta { font-size: 10.5px; color: var(--tinta-3); font-weight: 600; }
.rotulo3d.pino.media .r-conta { color: #A95414; }
.rotulo3d.pino.alta .r-conta { color: #B52A4C; }
.rotulo3d.ref { padding: 2px 7px; font-size: 10px; background: rgba(27,31,59,.6); }

/* ── o botão jogo / clássico ──────────────────────────────────────────── */

.modo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.modo-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.modo-grupo { display: inline-flex; border: 1px solid var(--borda-2); border-radius: 22px; overflow: hidden; background: var(--sup); }
.modo-bt { appearance: none; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 16px; border: none; background: transparent; color: var(--tinta-2); cursor: pointer; }
.modo-bt[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.modo-bt[data-modo="jogo"][aria-pressed="true"] { background: linear-gradient(92deg, var(--rosa), var(--laranja)); }
.modo-bt:disabled { opacity: .45; cursor: not-allowed; }
.modo-bt:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.modo-aviso { margin: 0; font-size: 12.5px; color: var(--tinta-2); }
.bairro-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bairro-cab .todos { font: inherit; font-size: 13px; font-weight: 700; color: var(--rosa); background: none; border: none; cursor: pointer; padding: 0; }

/* ── o clássico: a tela editorial já aprovada ─────────────────────────── */

:root[data-modo="classico"] body { background-image: none; background: #FBFAF7; }
:root[data-modo="classico"] h1 { background: none; -webkit-text-fill-color: initial; color: #1A1915; }
.caixa-tabela { border: 1px solid var(--borda); border-radius: 10px; background: #fff; overflow: auto; box-shadow: 0 1px 2px rgba(40,34,24,.05); }
.tabela-classica { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-classica thead th { background: #F7F5EF; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #857E72; text-align: left; padding: 11px 16px; border-bottom: 1px solid #E3DFD3; white-space: nowrap; }
.tabela-classica thead th.num { text-align: right; }
.tabela-classica tbody td { padding: 9px 16px; border-bottom: 1px solid #E3DFD3; }
.tabela-classica tbody tr:last-child td { border-bottom: none; }
.tabela-classica tbody tr.clicavel { cursor: pointer; }
.tabela-classica tbody tr.clicavel:hover { background: #F7F5EF; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cod2 { font-size: 13.5px; font-weight: 600; }
.nm2 { display: block; color: #857E72; font-size: 12px; margin-top: 1px; }
.pil { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 560; padding: 3px 9px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pil.and { color: #14566B; border-color: #9EC2CE; background: #E4F1F4; }
.pil.nao { color: #A8681A; border-color: #DCC094; background: #FAF0DF; }
.pil.par { color: #A62B22; border-color: #DFAFA9; background: #FBEAE7; }
.pil.con { color: #1C7048; border-color: #A8C9B6; background: #E6F2EA; }
.cinza { color: #857E72; }
.neg { color: #A8681A; font-weight: 560; }
.erro { color: #A62B22; font-weight: 700; }
#classico-etapas { margin-top: 26px; }
#classico-etapas h3 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; }
#classico-etapas .tabela-classica { background: #fff; border: 1px solid #E3DFD3; border-radius: 10px; overflow: hidden; }

/* ── a página do jogo (fatia 1): HUD, estado da consulta, modo ────────── */

.cabeca.curta { padding-bottom: 12px; }

.hud {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: rgba(27,31,59,.86); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden;
  color: #fff; margin-bottom: 22px;
}
.hud > div { padding: 12px 16px; border-left: 1px solid rgba(255,255,255,.1); }
.hud > div:first-child { border-left: none; }
.hud .r { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.hud .v { font-size: 24px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.hud .v.aqua { color: #7EF2D2; }
.hud .v.laranja { color: #FFB27A; }
.hud .v.verde { color: #B8FF9A; }
.hud .s { font-size: 11px; opacity: .75; margin-top: 3px; }

.jogo-estado {
  margin: -6px 0 22px; font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3);
}
.jogo-estado.ruim { color: var(--errado); font-weight: 700; }
.jogo-nota { margin: 0 0 10px; font-size: 13px; min-height: 1.2em; }
.jogo-seletor { padding-top: 0; padding-bottom: 10px; }
a.modo-bt, span.modo-bt { text-decoration: none; display: inline-block; }
a.mq-bt { text-decoration: none; display: inline-flex; align-items: center; }
.leg-erro a { color: var(--rosa); }

/* ── rótulos por atributo de SVG (CSP `style-src 'self'`) ─────────────── */
svg.rotulos3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
svg.rotulos3d foreignObject { overflow: visible; }
.rotulo-caixa { position: relative; width: 360px; height: 120px; pointer-events: none; }
.rotulo-caixa .rotulo3d { position: absolute; top: auto; left: 50%; bottom: 0; transform: translateX(-50%); will-change: auto; max-width: 340px; }
.rotulo3d.clicavel { pointer-events: auto; }
.maquete-palco.apontando { cursor: pointer; }
svg.etapa-barra { display: block; width: 100%; height: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(138,79,255,.16); border: 1px dashed rgba(138,79,255,.5); }
svg.etapa-barra .apr { fill: #BDB5A8; }
svg.etapa-barra .comp { fill: rgba(255,45,149,.6); }

/* ── o rio na página do jogo ─────────────────────────────────────────── */
.painel-branco { background: var(--sup); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; }
.painel-branco + .painel-branco, .mesa-2 { margin-top: 14px; }
.painel-branco h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.painel-branco .sub { margin: 0 0 14px; font-size: 12.5px; color: var(--tinta-3); }
.mesa-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .mesa-2 { grid-template-columns: minmax(0, 1fr); } }
.hud .v.errado, .hud .v.ruim { color: #FF6F87; }
#rio-atualizar { margin-left: 10px; vertical-align: middle; font-size: 12.5px; padding: 6px 12px; }

/* ── o rio ────────────────────────────────────────────────────────────── */

.rio-svg { display: block; width: 100%; height: auto; border-radius: 10px; overflow: hidden; font-family: var(--sans); }
.margem.pagar { fill: #FFF1EA; }
.margem.receber { fill: #E8F8F5; }
.passado { fill: rgba(27,31,59,.06); }
.hoje { stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 4 3; }
.rio-hoje { font-size: 11px; font-weight: 800; fill: var(--tinta); }
.rio-rotulo { font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--tinta-3); }
.tique { stroke: var(--borda-2); stroke-width: 1; }
.rio-dia { font-size: 10px; fill: var(--tinta-3); font-variant-numeric: tabular-nums; }
.titulo.pagar { fill: var(--rosa); opacity: .85; }
.titulo.receber { fill: var(--aqua); opacity: .9; }
.titulo.vencido { fill: var(--errado); opacity: .95; }
.titulo:hover { opacity: 1; stroke: var(--tinta); stroke-width: 1.5; }

.mesa-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .mesa-3 { grid-template-columns: minmax(0, 1fr); } }
.portao { display: grid; gap: 6px; }
.porta-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "quem valor" "obra dias" "acao acao"; gap: 2px 10px; padding: 9px 11px 9px 13px; border-radius: 8px; background: var(--sup-2); border: 1px solid var(--borda); position: relative; font-size: 12.5px; }
.porta-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--errado); }
.porta-item.receber::before { background: var(--laranja); }
.pi-quem { grid-area: quem; font-weight: 800; }
.pi-obra { grid-area: obra; color: var(--tinta-3); font-size: 11px; }
.pi-valor { grid-area: valor; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.pi-dias { grid-area: dias; color: var(--errado); font-size: 11px; font-weight: 700; text-align: right; }
.pi-acao { grid-area: acao; margin-top: 5px; font-size: 11.5px; font-weight: 800; color: var(--rosa); }

.casar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.casar-col { display: grid; gap: 4px; align-content: start; }
.casar-h { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); padding-bottom: 2px; }
.casar-item { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 5px 8px; border-radius: 6px; background: var(--sup-2); border: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.casar-item.ok { border-color: var(--verde); background: #E8F5EC; }
.casar-item.pend { border-color: var(--laranja); background: #FFF1CC; }
.casar-item .v { font-weight: 800; white-space: nowrap; }
.casar-placar { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.casar-placar b { color: var(--tinta); } .casar-placar b.ruim { color: var(--errado); }

.cobrar { display: grid; gap: 6px; }
.cobrar-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "obra valor" "dias dias" "acao acao"; gap: 2px 10px; padding: 9px 11px; border-radius: 8px; background: var(--sup-2); border: 1px solid var(--borda); font-size: 12.5px; }
.ci-obra { grid-area: obra; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ci-valor { grid-area: valor; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ci-dias { grid-area: dias; font-size: 11px; color: var(--tinta-3); }
.ci-dias.ruim { color: var(--errado); font-weight: 700; }
.ci-acao { grid-area: acao; margin-top: 5px; font-size: 11.5px; font-weight: 800; color: var(--rosa); }
.cobrar-total { font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--laranja); font-variant-numeric: tabular-nums; }
.m-fazer { display: inline-flex; width: fit-content; margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--ciano, #29d3e2); color: #07151a; font-weight: 750; text-decoration: none; }
.m-fazer:hover, .m-fazer:focus-visible { filter: brightness(1.1); }
.jogo-mesa { margin: 18px 0; }
#jogo-mesa-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.jogo-mesa-item { border: 1px solid var(--borda); border-left: 4px solid var(--laranja); border-radius: 9px; padding: 11px; }
.jogo-mesa-item.alta { border-left-color: var(--errado); }
.jogo-mesa-item h3, .jogo-mesa-item p { margin: 0 0 6px; }
.jogo-mesa-item .meta { color: var(--tinta-3); font-size: 12px; }