/* SUIT — folha de estilo única.
   Paleta do protótipo (§22): tinta #1A2420, acento #1F5C46, neutro #5A6862,
   linha #C9D2CC, fundo #EDF2EE. Vermelho é exclusivo de Conduta e perdas. */

:root {
  --tinta: #1A2420;
  --acento: #1F5C46;
  --acento-claro: #2E7A5E;
  --neutro: #5A6862;
  --linha: #C9D2CC;
  --fundo: #EDF2EE;
  --papel: #FBFAF6;
  --papel-2: #F3F1E9;
  --madeira: #6B563F;
  --perda: #B03A3A;
  --alerta: #C9822A;
  --ouro: #C9A227;

  --est: #2F6DB5;
  --cap: #B5762F;
  --atu: #1F5C46;
  --lid: #6B3FA0;
  --rel: #A03F52;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --r: 6px;
  --sombra: 0 1px 2px rgba(26,36,32,.10), 0 4px 14px rgba(26,36,32,.07);
}

* { box-sizing: border-box; }

/* O jogo assume um mundo só: papel creme, madeira, verde jurídico (§22). Não há
   tema escuro de propósito — mas isso precisa ser declarado, senão o navegador
   de quem estiver no modo escuro desenha os controles de formulário em preto
   sobre a nossa mesa clara. */
html { color-scheme: light; }

html, body {
  margin: 0; height: 100%;
  background: var(--fundo);
  color: var(--tinta);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------- estrutura */

.app { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.topo {
  display: flex; align-items: center; gap: 1rem;
  /* Numa tela de celular a barra não cabe numa linha só: sem isto, "Ano 1 de 5"
     quebra letra por letra e as fichas de Critério saem pela direita, cortadas.
     Com a ficha da sala online a barra ficou mais longa ainda. */
  flex-wrap: wrap; row-gap: .35rem;
  padding: .5rem .9rem;
  background: var(--tinta); color: var(--fundo);
  border-bottom: 3px solid var(--acento);
  flex: 0 0 auto;
  position: relative; z-index: 40;
}
.marca { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .18em; font-weight: 700; }
.marca small { display: block; font-size: .52rem; letter-spacing: .14em; opacity: .65;
               font-family: var(--sans); font-weight: 400; margin-top: -2px; }
.ano { font-family: var(--serif); font-size: 1rem; white-space: nowrap; }
.ano b { color: var(--ouro); }
.criterios { display: flex; gap: .4rem; overflow-x: auto; max-width: 100%;
             scrollbar-width: thin; }
.fase-atual {
  font-size: .7rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .1em;
  background: rgba(255,255,255,.12); padding: .2rem .5rem; border-radius: 999px;
}
.topo .criterios { display: flex; gap: .35rem; margin-left: auto; }
.topo .botoes { display: flex; gap: .35rem; }
.topo button {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: var(--fundo); border-radius: var(--r); padding: .3rem .55rem; font-size: .78rem;
}
.topo button:hover { background: rgba(255,255,255,.2); }

.principal {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 25rem;
  gap: .8rem; padding: .8rem; overflow: hidden;
}
.coluna { min-width: 0; overflow-y: auto; overflow-x: hidden; padding-right: .2rem; }
.coluna-mesa { border-left: 1px solid var(--linha); padding-left: .8rem; }

@media (max-width: 1100px) {
  .principal { grid-template-columns: 1fr; }
  .coluna-mesa { border-left: 0; border-top: 1px solid var(--linha); padding-left: 0; padding-top: .8rem; }
}

.painel {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r); box-shadow: var(--sombra); margin-bottom: .8rem;
}
.painel > header {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .45rem .7rem; border-bottom: 1px solid var(--linha);
  background: var(--papel-2); border-radius: var(--r) var(--r) 0 0;
}
.painel > header h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--neutro); }
.painel > .corpo { padding: .7rem; }

/* ---------------------------------------------------------- tabuleiro */

.salas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 780px) { .salas { grid-template-columns: repeat(2, 1fr); } }

.sala {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r);
  padding: .55rem .6rem .6rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .4rem; position: relative;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sala h4 { font-size: .95rem; display: flex; align-items: center; gap: .35rem; }
.sala .icone { font-size: 1rem; }
.sala .efeitos { font-size: .72rem; color: var(--neutro); line-height: 1.35; margin: 0; padding-left: .9rem; }
.sala .efeitos li { margin-bottom: .1rem; }
.sala .quem { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--neutro); }

/* O Fórum é a única sala fora do escritório e a única que produz reputação. */
.sala--forum { background: linear-gradient(#F0F4F7, #E8EFF3); border-color: #B9C7D2; }
.sala--forum h4 { color: #234E63; }
.sala--disponivel { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(31,92,70,.16), var(--sombra); }
.sala--bloqueada { opacity: .5; }

.espacos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .25rem; }
.espaco {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px dashed var(--linha); background: #fff;
  display: grid; place-items: center; padding: 0;
  font-size: .7rem; font-weight: 700; color: var(--neutro);
}
.espaco--livre.espaco--legal { border-style: solid; border-color: var(--acento); background: #E6F0EA; cursor: pointer; }
.espaco--livre.espaco--legal:hover { background: var(--acento); color: #fff; transform: scale(1.08); }
.espaco--livre.espaco--ilegal { cursor: not-allowed; opacity: .55; }
.espaco--ocupado { border-style: solid; cursor: default; }

.disco {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: .68rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.disco--titular { box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 2px rgba(26,36,32,.55); }

/* mercado e baralhos */
.mercado { display: flex; gap: .5rem; flex-wrap: wrap; }
.baralhos { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.monte {
  background: var(--madeira); color: #F6F1E8; border-radius: var(--r);
  padding: .4rem .55rem; min-width: 5.4rem; box-shadow: var(--sombra);
  border: 1px solid rgba(0,0,0,.2);
}
.monte b { display: block; font-size: 1.15rem; font-family: var(--serif); }
.monte span { font-size: .66rem; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.monte--vazio { background: #8C8577; opacity: .6; }

/* ---------------------------------------------------------- cartas */

.carta {
  width: 9.4rem; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
  display: flex; flex-direction: column; text-align: left; padding: 0;
  position: relative; transition: transform .12s, box-shadow .12s;
}
.carta--clicavel { cursor: pointer; }
.carta--clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,36,32,.18); }
.carta--selecionada { outline: 3px solid var(--acento); outline-offset: 1px; }
.carta--bloqueada { opacity: .45; cursor: not-allowed; }
.carta--atalho { outline: 2px dashed var(--alerta); outline-offset: 1px; }

.carta .faixa {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .18rem .4rem; color: #fff; display: flex; justify-content: space-between; align-items: center;
}
.carta .selo {
  background: rgba(255,255,255,.9); color: var(--tinta); border-radius: 3px;
  padding: 0 .22rem; font-weight: 700; font-size: .6rem;
}
.carta .titulo { font-family: var(--serif); font-size: .78rem; line-height: 1.2;
                 padding: .35rem .4rem .25rem; min-height: 2.6em; }
.carta .linhas { display: flex; border-top: 1px solid var(--linha); font-size: .68rem; }
.carta .custos, .carta .ganhos { flex: 1; padding: .3rem .4rem; }
.carta .custos { border-right: 1px solid var(--linha); background: #F7F4EC; }
.carta .ganhos { background: #F0F5F1; }
.carta .rot { display: block; font-size: .55rem; text-transform: uppercase;
              letter-spacing: .07em; color: var(--neutro); margin-bottom: .12rem; }
.carta .exig { display: block; margin-top: .15rem; color: var(--madeira); font-size: .63rem; }
.carta .honor { font-family: var(--serif); font-size: .95rem; font-weight: 700; }
.carta .prazo { display: flex; gap: .15rem; padding: .25rem .4rem; border-top: 1px solid var(--linha);
                align-items: center; font-size: .6rem; color: var(--neutro); }
.cubo { width: 9px; height: 9px; background: var(--acento); border-radius: 2px; }
.cubo--gasto { background: var(--linha); }
.carta--urgente { animation: pisca 1.1s ease-in-out infinite; }
.carta--urgente .prazo { color: var(--perda); font-weight: 700; }
.carta--urgente .cubo { background: var(--perda); }
@keyframes pisca { 0%,100% { box-shadow: 0 0 0 0 rgba(176,58,58,.55), var(--sombra); }
                   50% { box-shadow: 0 0 0 5px rgba(176,58,58,0), var(--sombra); } }
.motivo-bloqueio { font-size: .62rem; color: var(--perda); padding: .25rem .4rem; background: #FBEDED; }

.cartas { display: flex; gap: .5rem; flex-wrap: wrap; }

/* cliente */
.cliente {
  width: 8.6rem; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r); box-shadow: var(--sombra); padding: .4rem .45rem;
  display: flex; flex-direction: column; gap: .25rem; text-align: left;
}
.cliente--clicavel { cursor: pointer; }
.cliente--clicavel:hover { border-color: var(--acento); background: #F2F8F4; }
.cliente--selecionado { outline: 3px solid var(--acento); outline-offset: 1px; }
.cliente .nome { font-family: var(--serif); font-size: .78rem; line-height: 1.15; }
.cliente .area { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--neutro); }
.niveis { display: flex; gap: .18rem; }
.niveis i {
  width: 100%; height: 5px; border-radius: 2px; background: var(--linha);
}
.niveis i.ativo { background: var(--acento); }
.niveis i.ativo--baixo { background: var(--alerta); }

/* critério do sócio — a regra da partida, não um recurso */
.criterio {
  background: var(--tinta); color: #EDE7D8; border: 1px solid #000;
  border-radius: var(--r); padding: .3rem .5rem; max-width: 13rem;
}
.criterio b { font-family: var(--serif); font-size: .76rem; display: block; color: var(--ouro); }
.criterio span { font-size: .63rem; line-height: 1.25; display: block; opacity: .9; }
.criterios-grid { display: flex; gap: .5rem; flex-wrap: wrap; }

/* verso da carta de Critério, na variante Critério Oculto */
.criterio--virado {
  width: 2.1rem; min-height: 1.7rem; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ouro);
  background: repeating-linear-gradient(45deg, #1A2420 0 5px, #222D28 5px 10px);
  border-color: var(--ouro); opacity: .9;
}

/* ---------------------------------------------------------- mesa */

.mesa-cabeca { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.mesa-cabeca h2 { font-size: 1.15rem; }
.pino { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); flex: 0 0 auto; }
.etiqueta { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
            background: var(--linha); color: var(--tinta); border-radius: 999px; padding: .1rem .4rem; }
.etiqueta--primeiro { background: var(--ouro); }

/* avaliação: o único elemento "de sistema" da mesa */
.avaliacao { background: var(--tinta); border-radius: var(--r); padding: .5rem .6rem; }
.avaliacao h4 { color: #9FB3A9; font-size: .62rem; text-transform: uppercase;
                letter-spacing: .12em; margin-bottom: .35rem; font-family: var(--sans); }
.frente { display: grid; grid-template-columns: 1.1rem 2.1rem 1fr 1.5rem; align-items: center;
          gap: .35rem; margin-bottom: .22rem; }
.frente .sig { font-size: .62rem; font-weight: 700; color: #C9D2CC; letter-spacing: .04em; }
.frente .barra { height: 8px; background: rgba(255,255,255,.10); border-radius: 3px; overflow: hidden; }
.frente .barra i { display: block; height: 100%; border-radius: 3px; }
.frente .valor { color: #EDF2EE; font-size: .76rem; text-align: right; font-weight: 600; }
.frente--menor .valor { color: var(--ouro); }
.frente--menor .sig::after { content: " ▾"; color: var(--ouro); }

.recursos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.recurso {
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: .28rem .45rem; min-width: 4.1rem; flex: 1 1 auto;
}
.recurso span { display: block; font-size: .58rem; text-transform: uppercase;
                letter-spacing: .07em; color: var(--neutro); }
.recurso b { font-family: var(--serif); font-size: 1.05rem; }
.recurso--perda { background: #FBEDED; border-color: #E5BDBD; }
.recurso--perda b { color: var(--perda); }

.pips { display: flex; gap: .12rem; margin-top: .15rem; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--linha); }
.pips i.cheio { background: var(--acento); }
.pips--energia i.cheio { background: var(--madeira); }

.equipe { display: flex; gap: .35rem; flex-wrap: wrap; }
.peca {
  display: flex; align-items: center; gap: .3rem; padding: .25rem .45rem .25rem .3rem;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--papel);
}
.peca--livre { cursor: pointer; }
.peca--livre:hover { border-color: var(--acento); background: #EFF6F1; }
.peca--selecionada { outline: 3px solid var(--acento); outline-offset: 1px; }
.peca--alocada { opacity: .45; }
.peca--deitada { opacity: .5; transform: rotate(-6deg); border-style: dashed; }
.peca .rotulo { font-size: .68rem; }

.postits { display: flex; gap: .25rem; flex-wrap: wrap; }
.postit {
  background: #E8564F; color: #fff; font-size: .58rem; padding: .18rem .3rem;
  border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  font-weight: 700; letter-spacing: .04em;
}
.postit:nth-child(even) { transform: rotate(2.5deg); }

/* rivais */
.rivais { display: flex; gap: .5rem; flex-wrap: wrap; }
.rival {
  flex: 1 1 12rem; background: var(--papel); border: 1px solid var(--linha);
  border-left: 4px solid var(--linha); border-radius: var(--r); padding: .4rem .5rem;
  font-size: .72rem; box-shadow: var(--sombra);
}
.rival--vez { border-color: var(--acento); background: #F2F8F4; }
.rival .cabeca { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.rival .cabeca b { font-family: var(--serif); font-size: .84rem; }
.rival .reps { display: flex; gap: .28rem; margin-bottom: .2rem; }
.rival .reps span { font-size: .64rem; display: inline-flex; align-items: center; gap: .12rem; }
.rival .reps i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.rival .linha2 { color: var(--neutro); display: flex; gap: .5rem; flex-wrap: wrap; font-size: .68rem; }

/* ------------------------------------------------- legenda ao passar o mouse
   Qualquer elemento com [data-dica="texto"] mostra uma tarjinha explicando o
   que ele é. Existe porque ícone sem nome só é óbvio para quem desenhou. */

[data-dica] { position: relative; cursor: help; }

[data-dica]::after,
[data-dica]::before {
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .12s ease, visibility 0s linear .32s;
}

[data-dica]::after {
  content: attr(data-dica);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #26241F; color: #F7F4EC;
  font-family: var(--sans); font-size: .68rem; font-weight: 400;
  line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: nowrap;
  padding: .28rem .45rem; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(26,36,32,.28);
}

[data-dica]::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #26241F;
}

[data-dica]:hover::after, [data-dica]:hover::before,
[data-dica]:focus-visible::after, [data-dica]:focus-visible::before {
  opacity: 1; visibility: visible; transition-delay: .18s, .18s;
}

/* Perto da borda direita a tarja sairia da coluna: encosta pela direita. */
[data-dica].dica--esq::after { left: auto; right: 0; transform: none; }
[data-dica].dica--esq::before { left: auto; right: .5rem; transform: none; }

/* No alto da tela não cabe tarja para cima: desce. */
[data-dica].dica--baixo::after { bottom: auto; top: calc(100% + 6px); }
[data-dica].dica--baixo::before {
  bottom: auto; top: calc(100% + 1px);
  border-top-color: transparent; border-bottom-color: #26241F;
}

/* Texto longo precisa quebrar linha. */
[data-dica].dica--larga::after { white-space: normal; width: 15rem; text-align: left; }

/* ---------------------------------------------------------- botões */

.btn {
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  border-radius: var(--r); padding: .42rem .8rem; font-size: .82rem; font-weight: 600;
}
.btn:hover { background: var(--acento-claro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--fantasma { background: transparent; color: var(--acento); }
.btn--fantasma:hover { background: #E6F0EA; }
.btn--neutro { background: var(--papel-2); border-color: var(--linha); color: var(--tinta); }
.btn--neutro:hover { background: var(--linha); }
.btn--perigo { background: var(--perda); border-color: var(--perda); }
.btn--perigo:hover { background: #C94D4D; }
.btn--grande { padding: .6rem 1.4rem; font-size: .95rem; }
.acoes-turno { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.dica { font-size: .72rem; color: var(--neutro); }

/* ---------------------------------------------------------- modais */

.veu {
  position: fixed; inset: 0; background: rgba(26,36,32,.55);
  display: grid; place-items: center; padding: 1.2rem; z-index: 40;
  animation: surge .16s ease-out;
}
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--fundo); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  max-width: min(58rem, 96vw); max-height: 92vh; overflow: auto; width: 100%;
}
.modal--estreito { max-width: 30rem; }
.modal > header {
  padding: .7rem 1rem; background: var(--tinta); color: var(--fundo);
  border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: .6rem;
}
.modal > header h3 { font-size: 1.05rem; }
.modal > header .sub { font-size: .72rem; opacity: .75; margin-left: auto; }
.modal > .corpo { padding: 1rem; }
.modal > footer {
  padding: .7rem 1rem; border-top: 1px solid var(--linha); display: flex;
  gap: .5rem; justify-content: flex-end; align-items: center; background: var(--papel-2);
  border-radius: 0 0 10px 10px; position: sticky; bottom: 0;
}
.modal > footer .esquerda { margin-right: auto; font-size: .75rem; color: var(--neutro); }

.previa {
  background: var(--tinta); color: var(--fundo); border-radius: var(--r);
  padding: .5rem .7rem; font-size: .84rem; display: flex; gap: .8rem; flex-wrap: wrap;
  align-items: center;
}
.previa .delta { font-weight: 700; }
.previa .delta--mais { color: #8FD3B0; }
.previa .delta--menos { color: #F0A9A9; }

.aviso {
  background: #FBEDED; border: 1px solid #E5BDBD; border-left: 4px solid var(--perda);
  border-radius: var(--r); padding: .55rem .7rem; font-size: .8rem; margin: .6rem 0;
}
.aviso h4 { color: var(--perda); font-size: .85rem; margin-bottom: .2rem; }
.nota {
  background: #FDF6E7; border: 1px solid #E8D9AE; border-left: 4px solid var(--alerta);
  border-radius: var(--r); padding: .55rem .7rem; font-size: .8rem; margin: .6rem 0;
}

.opcoes { display: flex; flex-direction: column; gap: .5rem; }
.opcao {
  display: flex; gap: .6rem; align-items: flex-start; text-align: left;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r);
  padding: .6rem .7rem; width: 100%;
}
.opcao:hover:not(:disabled) { border-color: var(--acento); background: #F2F8F4; }
.opcao:disabled { opacity: .5; cursor: not-allowed; }
.opcao b { font-family: var(--serif); font-size: .92rem; }
.opcao span { display: block; font-size: .74rem; color: var(--neutro); }
.opcao .preco { margin-left: auto; font-family: var(--serif); font-size: 1rem; white-space: nowrap; }

/* ---------------------------------------------------------- telas */

.tela {
  position: fixed; inset: 0; background: var(--fundo); z-index: 50;
  display: grid; place-items: center; padding: 1.5rem; overflow: auto;
}
.tela-caixa { width: 100%; max-width: 46rem; }
.tela--passagem { background: var(--tinta); color: var(--fundo); text-align: center; }
.tela--passagem h1 { font-size: 2.4rem; margin-bottom: .3rem; }
.tela--passagem p { color: #9FB3A9; margin: 0 0 1.4rem; }

.setup-campo { margin-bottom: .9rem; }
.setup-campo > label { display: block; font-size: .7rem; text-transform: uppercase;
                       letter-spacing: .09em; color: var(--neutro); margin-bottom: .25rem; }
input[type="text"], input[type="number"], select {
  font: inherit; padding: .38rem .5rem; border: 1px solid var(--linha);
  border-radius: var(--r); background: #fff; color: var(--tinta); width: 100%;
}
.linha-jogador { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.linha-jogador .pino { width: 18px; height: 18px; }
.escolha { display: flex; gap: .5rem; flex-wrap: wrap; }
.escolha button {
  flex: 1 1 12rem; text-align: left; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r); padding: .6rem .7rem;
}
.escolha button[aria-pressed="true"] { border-color: var(--acento); background: #EAF3EE;
                                        box-shadow: 0 0 0 2px rgba(31,92,70,.18); }
.escolha b { display: block; font-family: var(--serif); font-size: .95rem; }
.escolha span { font-size: .74rem; color: var(--neutro); }

/* fechamento */
.fechamento-lista { display: flex; flex-direction: column; gap: .5rem; }
.fechamento-jogador {
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--linha);
  border-radius: var(--r); padding: .5rem .7rem;
}
.fechamento-jogador h4 { font-size: .92rem; margin-bottom: .25rem; }
.fechamento-jogador ul { margin: 0; padding-left: 1.1rem; font-size: .78rem; }
.fechamento-jogador li { margin-bottom: .12rem; animation: entra .25s ease-out both; }
.fechamento-jogador li.perda, .fechamento-jogador li.multa,
.fechamento-jogador li.divida, .fechamento-jogador li.demissao { color: var(--perda); }
.fechamento-jogador li.alerta { color: var(--alerta); }
@keyframes entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* placar final */
.placar { width: 100%; border-collapse: collapse; font-size: .82rem; }
.placar th, .placar td { padding: .35rem .5rem; border-bottom: 1px solid var(--linha); text-align: left; }
.placar th { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--neutro); }
.placar td.n { text-align: right; font-variant-numeric: tabular-nums; }
.placar tr.desq { opacity: .6; }
.placar tr.desq td:first-child::after { content: " ✕"; color: var(--perda); }
.placar .total { font-family: var(--serif); font-size: 1rem; font-weight: 700; }
.detalhe-linha td { border-bottom: 0; padding-top: .1rem; padding-bottom: .1rem;
                    font-size: .74rem; color: var(--neutro); }
.radares { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; }
.radar-caixa { text-align: center; }
.radar-caixa b { font-family: var(--serif); font-size: .85rem; }

/* log */
.log { position: fixed; top: 0; right: 0; bottom: 0; width: 24rem; max-width: 92vw;
       background: var(--papel); border-left: 1px solid var(--linha); z-index: 45;
       display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.16); }
.log header { padding: .6rem .8rem; background: var(--tinta); color: var(--fundo);
              display: flex; align-items: center; gap: .5rem; }
.log header h3 { font-size: .95rem; }
.log header button { margin-left: auto; background: transparent; border: 0; color: var(--fundo);
                     font-size: 1.1rem; line-height: 1; }
.log ol { list-style: none; margin: 0; padding: .5rem .8rem 2rem; overflow-y: auto; font-size: .76rem; }
.log li { padding: .22rem 0; border-bottom: 1px solid #EDEBE3; line-height: 1.35; }
.log li.rodada { font-family: var(--serif); font-size: .9rem; text-align: center;
                 color: var(--acento); border-bottom: 1px solid var(--acento); margin-top: .5rem; }
.log li.vitoria { color: var(--acento); font-weight: 600; }
.log li.perda { color: var(--perda); }
.log li.conduta { color: var(--perda); font-weight: 600; }
.log li.fase, .log li.baralho { color: var(--neutro); font-style: italic; }

/* utilidades */
.linha-flex { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.vazio { color: var(--neutro); font-size: .76rem; font-style: italic; padding: .3rem 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ml-auto { margin-left: auto; }

/* Torre da Sala de reunião: o contratado fica encaixado sob o disco do titular
   e a torre inteira ocupa um espaço só (§6.3). */
.espaco--torre { position: relative; overflow: visible; }
.disco--contratado {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -34%) scale(.86);
  opacity: .75; filter: saturate(.6);
  border-style: dashed;
}
.espaco--torre .disco:not(.disco--contratado) { position: relative; z-index: 1; }

/* Custo de energia já com o desconto de área: o valor real em destaque,
   o impresso riscado ao lado. */
.carta .com-desconto { color: var(--acento); font-weight: 700; }
.carta .com-desconto s { color: var(--neutro); font-weight: 400; opacity: .8; }

/* Jogadores controlados pela máquina */
.etiqueta--bot { background: var(--madeira); color: #F6F1E8; }
.etiqueta--pensando {
  background: var(--acento); color: #fff;
  animation: respira 1.1s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Alternador Humano/Bot na tela de setup */
.alternador { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--r);
              overflow: hidden; flex: 0 0 auto; }
.alternador button {
  border: 0; background: var(--papel); color: var(--neutro);
  padding: .34rem .6rem; font-size: .76rem;
}
.alternador button + button { border-left: 1px solid var(--linha); }
.alternador button[aria-pressed="true"] { background: var(--acento); color: #fff; font-weight: 600; }
.alternador button:hover:not([aria-pressed="true"]) { background: var(--papel-2); }

/* Critério que este jogador já espiou (conhecimento 5+, variante oculta) */
.criterio--espiado { border-color: var(--ouro); background: #241F14; }
.criterio--espiado b { font-size: .7rem; }

/* ------------------------------------------------- logotipo com a gravata
   O "I" de SUIT é a gravata da capa. A altura da gravata é 1em de caixa alta
   (0.72em), alinhada pela base junto com as letras. */

/* Inline, não flex: com `vertical-align: baseline` a borda de baixo da gravata
   pousa exatamente na linha de base, e a altura dela vira a altura de caixa
   alta. Em flex o alinhamento briga com a baseline e a gravata encolhe. */
.logo-suit {
  font-family: var(--serif); font-weight: 700; letter-spacing: .18em;
  line-height: 1; white-space: nowrap;
}
.logo-suit__letras { letter-spacing: inherit; }
.logo-suit__i {
  display: inline-block; vertical-align: baseline;
  width: .295em; height: .70em;          /* 42:100 do viewBox, na altura de caixa alta */
  margin: 0 .17em 0 .06em;
}
.logo-suit .gravata { display: block; width: 100%; height: 100%; overflow: visible; }

/* ==================================================================== *
 * A ARTE DAS CARTAS
 *
 * Acrescentado na versão Vercel. A carta impressa tem a foto sangrando no
 * fundo inteiro e o texto sobrevive em cima de CHAPAS translúcidas a 70% —
 * não de um véu que clareia a foto toda. A diferença importa: o véu deixa a
 * carta lavada, a chapa deixa a foto no talo em metade da carta.
 *
 * Aqui é a mesma regra. A arte entra como background do elemento raiz e cada
 * faixa de texto ganha o seu próprio fundo semitransparente.
 * ==================================================================== */

.carta--arte {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* As chapas. Na carta impressa elas são RECUADAS dos dois lados e separadas
   por um vão — e é justamente o vão que deixa a foto aparecer. Chapa colada na
   borda cobre a carta inteira e a arte vira uma tonalidade de fundo que
   ninguém percebe. Aqui o recuo é menor que no papel (a carta na tela tem um
   terço da largura), mas a regra é a mesma: a arte separa, a linha não.

   0,86 de opacidade em vez dos 0,70 do papel porque tela emite luz e papel
   reflete: o mesmo valor que fica legível impresso fica sujo no monitor. */
.carta--arte .titulo,
.carta--arte .custos,
.carta--arte .ganhos,
.carta--arte .prazo {
  border-radius: 4px;
}
.carta--arte .titulo {
  background: rgba(251, 250, 246, .88);
  margin: .22rem .3rem .16rem;
  padding: .3rem .35rem .28rem;
  min-height: 2.4em;
}
.carta--arte .linhas {
  border-top: 0;
  gap: .22rem;
  padding: 0 .3rem;
}
.carta--arte .custos {
  background: rgba(247, 244, 236, .9);
  border-right: 0;
}
.carta--arte .ganhos { background: rgba(240, 245, 241, .9); }
.carta--arte .prazo {
  background: rgba(251, 250, 246, .88);
  border-top: 0;
  margin: .2rem .3rem .28rem;
  padding: .22rem .35rem;
}

/* Cliente: a carta é pequena e tem pouco texto, então a chapa fica só atrás
   do bloco de texto e a arte ocupa a metade de cima. */
.cliente.carta--arte {
  background-size: cover;
  background-position: center top;
  position: relative;
  border-color: rgba(201, 210, 204, .85);
  padding-top: 2.6rem;
}
.cliente.carta--arte > * { position: relative; z-index: 1; }
.cliente.carta--arte::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 2.4rem;
  background: rgba(251, 250, 246, .88);
}

/* Critério do Sócio: aqui a arte é um ROSTO, e rosto coberto não comunica.
   Por isso o retrato fica livre no alto e o texto desce para o rodapé, que é
   exatamente o que a carta impressa faz. */
.criterio--arte {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}
.criterio--arte b,
.criterio--arte span {
  padding-inline: .45rem;
  background: rgba(26, 36, 32, .8);
  color: #F3F1E9;
}
.criterio--arte b { padding-top: .35rem; }
.criterio--arte span { padding-bottom: .4rem; opacity: 1; }

/* ==================================================================== *
 * A ARTE DAS SALAS (painel O ESCRITÓRIO)
 *
 * Mesmo tratamento das cartas de Processo, e pelo mesmo motivo. A primeira
 * tentativa foi um véu em degradê sobre o cartão inteiro, apostando que o
 * texto deixaria o terço direito livre. MEDIDO: não deixa. Num cartão de
 * 320 px o texto ocupa a largura toda, e o fim das linhas caía na parte
 * aberta do véu — contraste de 1,8:1 onde o mínimo legível é 4,5:1.
 *
 * A saída é a que o baralho de papel já usava: nada de véu geral. CHAPAS
 * recuadas atrás de cada bloco de texto, e a arte aparecendo pelos vãos —
 * pela margem do cartão, entre o título e a lista, e embaixo. O texto fica
 * sempre sobre chapa; a foto fica sempre visível em volta.
 * ==================================================================== */

.sala--arte {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* As chapas. Cada bloco de texto ganha a sua, recuada e arredondada. */
.sala--arte > h4,
.sala--arte > .efeitos,
.sala--arte > .quem {
  background: rgba(251, 250, 246, .945);
  border-radius: 4px;
  padding: .2rem .4rem;
  backdrop-filter: blur(2px);
}
.sala--arte > .efeitos { padding: .3rem .4rem .3rem 1.25rem; }
.sala--arte > .quem { align-self: flex-start; }

/* O Fórum tem fundo azulado próprio — a chapa acompanha, senão a sala perde
   a cor que a distingue das outras quatro. */
.sala--forum.sala--arte > h4,
.sala--forum.sala--arte > .efeitos,
.sala--forum.sala--arte > .quem {
  background: rgba(238, 243, 246, .945);
}

/* As bolinhas de espaço ficam direto sobre a foto: elas são desenho, não
   texto, mas o contorno tracejado some sobre imagem. Chapa própria devolve
   o contraste sem tapar a arte em volta. */
.sala--arte .espaco {
  background: rgba(251, 250, 246, .82);
  backdrop-filter: blur(2px);
}