/* Nosso espaço — painel da Brasa Interactive.
   Mesmo DNA do site (escuro quente, acento brasa), em formato de app. Sem CSS em linha (CSP). */

@font-face {
  font-family: 'Big Shoulders';
  src: url('/fonts/big-shoulders-700.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-400.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-700.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

/* Mesma direção do site (lambe-lambe): papel, tinta chapada e um laranja só. */
:root {
  --fundo: #eeede8;
  --fundo-2: #e3e1d9;
  --lado: #18161f;
  --sup: #faf9f6;
  --sup-2: #f3f2ee;
  --sup-3: #e3e1d9;
  --borda: #18161f;
  --borda-2: #18161f;
  --texto: #18161f;
  --texto-2: #3a3740;
  --mudo: #6e6a66;
  --brasa: #ff4f12;
  --brasa-2: #c93a06;
  --brasa-3: #8f2800;
  --tinta: #18161f;
  --ok: #1f7a3f;
  --aviso: #8a5a00;
  --erro: #c4250b;
  --azul: #1f4fb0;
  --roxo: #6a3fb0;
  --raio: 0;
  --raio-p: 0;
  --sombra: 5px 5px 0 #18161f;
  --titulo: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --fonte: 'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brasa-2);
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--brasa-3);
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
p {
  margin: 0 0 0.75em;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--brasa-2);
  outline-offset: 2px;
  border-radius: 6px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mudo {
  color: var(--mudo);
}
.pequeno {
  font-size: 0.85rem;
}
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================ carregando */
.carregando {
  display: grid;
  place-items: center;
  min-height: 100vh;
  gap: 1rem;
  color: var(--mudo);
}
.carregando img {
  width: 3.5rem;
  animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa {
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 18px rgb(255 122 51 / 0.6));
  }
}

/* ============================================================ botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--borda-2);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  color: var(--texto);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.btn:hover {
  color: var(--texto);
  border-color: var(--brasa);
  background: rgb(255 122 51 / 0.08);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn--brasa {
  border-color: transparent;
  color: var(--tinta);
  background: linear-gradient(180deg, var(--brasa-2), var(--brasa));
  box-shadow: 0 6px 20px rgb(255 122 51 / 0.25);
}
.btn--brasa:hover {
  color: var(--tinta);
  background: linear-gradient(180deg, #ffb87a, var(--brasa-2));
}
.btn--fantasma {
  border-color: transparent;
  background: transparent;
  color: var(--texto-2);
}
.btn--fantasma:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: transparent;
}
.btn--perigo:hover {
  border-color: var(--erro);
  background: rgb(255 143 122 / 0.1);
  color: var(--erro);
}
.btn--p {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.84rem;
}
.btn--icone {
  width: 2.3rem;
  padding: 0;
}
.btn--steam {
  min-height: 3.1rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  color: #e9f0f7;
  border-color: #3d5068;
  background: linear-gradient(180deg, #23344a, #142030);
}
.btn--steam:hover {
  color: #fff;
  border-color: #66c0f4;
  background: linear-gradient(180deg, #2a4360, #182a3e);
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ============================================================ estrutura */
.app {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}
.lado {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.1rem 0.85rem;
  border-right: 1px solid var(--borda);
  background:
    radial-gradient(20rem 16rem at 0% 0%, rgb(255 122 51 / 0.1), transparent 70%),
    var(--lado);
  overflow-y: auto;
}
.lado__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.55rem 1.1rem;
  color: var(--texto);
  text-decoration: none;
}
.lado__marca img {
  width: 2rem;
}
.lado__marca b {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.lado__marca small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brasa-2);
}
.lado__grupo {
  margin: 1rem 0.6rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mudo);
}
.nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.93rem;
}
.nav a:hover {
  background: rgb(255 255 255 / 0.05);
  color: var(--texto);
}
.nav a[aria-current] {
  background: linear-gradient(90deg, rgb(255 122 51 / 0.16), rgb(255 122 51 / 0.04));
  color: var(--texto);
  box-shadow: inset 2px 0 0 var(--brasa);
}
.nav a[aria-current] .ic {
  color: var(--brasa-2);
}
.nav .selo {
  margin-left: auto;
}
.lado__pe {
  margin-top: auto;
  padding-top: 1rem;
}
.eu {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
}
.eu__nome {
  min-width: 0;
  flex: 1;
}
.eu__nome b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.eu__nome small {
  color: var(--mudo);
  font-size: 0.78rem;
}
.lado__links {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.82rem;
}
.lado__links a,
.lado__links button {
  padding: 0.25rem 0.4rem;
  border: 0;
  background: none;
  color: var(--mudo);
  text-decoration: none;
  cursor: pointer;
}
.lado__links a:hover,
.lado__links button:hover {
  color: var(--texto);
}

.topo-movel {
  display: none;
}
.app > div {
  min-width: 0;
}
.principal {
  min-width: 0;
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem;
}
.faixa-teste {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0.55rem 0.9rem;
  border: 1px dashed rgb(240 196 106 / 0.5);
  border-radius: var(--raio-p);
  background: rgb(240 196 106 / 0.07);
  color: var(--aviso);
  font-size: 0.86rem;
}

@media (max-width: 62rem) {
  .app {
    grid-template-columns: 1fr;
  }
  .lado {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 17rem;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: var(--sombra);
  }
  .lado--aberto {
    transform: none;
  }
  .topo-movel {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--borda);
    background: rgb(14 11 9 / 0.88);
    backdrop-filter: blur(12px);
  }
  .topo-movel img {
    width: 1.7rem;
  }
  .topo-movel b {
    flex: 1;
  }
  .veu {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgb(0 0 0 / 0.5);
  }
  .principal {
    padding-top: 1.25rem;
  }
}

/* ============================================================ cabeçalho de página */
.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cabeca h1 {
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
  letter-spacing: -0.025em;
}
.cabeca p {
  margin: 0.3rem 0 0;
  color: var(--texto-2);
}
.rotulo {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brasa-2);
}

/* ============================================================ cartões, selos */
.cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--sup), var(--fundo-2));
}
.cartao__in {
  padding: 1.1rem 1.2rem;
}
.cartao__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--borda);
}
.cartao__cabeca h2,
.cartao__cabeca h3 {
  font-size: 1rem;
}
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: rgb(255 255 255 / 0.07);
  color: var(--texto-2);
}
.selo--brasa {
  background: rgb(255 122 51 / 0.16);
  color: var(--brasa-2);
}
.selo--cheio {
  background: var(--brasa);
  color: var(--tinta);
}
.selo--ok {
  background: rgb(127 209 138 / 0.14);
  color: var(--ok);
}
.selo--aviso {
  background: rgb(240 196 106 / 0.14);
  color: var(--aviso);
}
.selo--erro {
  background: rgb(255 143 122 / 0.14);
  color: var(--erro);
}
.selo--azul {
  background: rgb(138 180 255 / 0.14);
  color: var(--azul);
}
.selo--roxo {
  background: rgb(195 161 255 / 0.14);
  color: var(--roxo);
}
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brasa), #7a2a0c);
  color: var(--tinta);
  font-weight: 800;
  font-size: 0.85rem;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar--g {
  width: 3rem;
  height: 3rem;
  font-size: 1.05rem;
}
.vazio {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mudo);
}
.vazio img {
  width: 2.6rem;
  opacity: 0.8;
}
.vazio b {
  color: var(--texto);
  font-size: 1.05rem;
}

/* ============================================================ KPIs */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.kpi {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
  text-decoration: none;
  color: var(--texto);
}
a.kpi:hover {
  border-color: var(--borda-2);
  color: var(--texto);
}
.kpi::after {
  content: '';
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: radial-gradient(rgb(255 122 51 / 0.14), transparent 70%);
}
.kpi span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--mudo);
}
.kpi strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi--quente strong {
  color: var(--brasa-2);
}

/* ============================================================ Mesa: quadro de etapas */
.mesa {
  display: grid;
  gap: 1.25rem;
}
.mesa__lado {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 62rem) {
  .mesa__lado {
    grid-template-columns: 1fr;
  }
}
.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13.5rem, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
}
.coluna {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 9rem;
  padding: 0.7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
  scroll-snap-align: start;
}
.coluna__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0.25rem 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texto-2);
}
.coluna__num {
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  text-align: center;
  font-size: 0.75rem;
}
.coluna__vazia {
  padding: 1rem 0.5rem;
  border: 1px dashed var(--borda);
  border-radius: var(--raio-p);
  text-align: center;
  font-size: 0.8rem;
  color: var(--mudo);
}
.ficha-jogo {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--texto);
  text-decoration: none;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.ficha-jogo:hover {
  color: var(--texto);
  border-color: var(--brasa);
  transform: translateY(-2px);
}
.ficha-jogo b {
  font-size: 0.93rem;
  line-height: 1.3;
}
.ficha-jogo small {
  color: var(--mudo);
  font-size: 0.78rem;
}
.ficha-jogo__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* feed */
.feed {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feed li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--borda);
}
.feed li:last-child {
  border-bottom: 0;
}
.feed b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}
.feed small {
  color: var(--mudo);
  font-size: 0.78rem;
}
.feed a {
  color: inherit;
  text-decoration: none;
}
.feed a:hover b {
  color: var(--brasa-2);
}

/* bolinha de ícone por tipo */
.bola {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: var(--texto-2);
}
.bola .ic {
  width: 1rem;
  height: 1rem;
}
.bola--brasa {
  background: rgb(255 122 51 / 0.16);
  color: var(--brasa-2);
}
.bola--ok {
  background: rgb(127 209 138 / 0.14);
  color: var(--ok);
}
.bola--azul {
  background: rgb(138 180 255 / 0.14);
  color: var(--azul);
}
.bola--roxo {
  background: rgb(195 161 255 / 0.14);
  color: var(--roxo);
}
.bola--aviso {
  background: rgb(240 196 106 / 0.14);
  color: var(--aviso);
}

/* ============================================================ lista de jogos */
.grade-jogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.cartao-jogo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
  color: var(--texto);
  text-decoration: none;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.cartao-jogo:hover {
  color: var(--texto);
  transform: translateY(-3px);
  border-color: var(--brasa);
}
.capa {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 460 / 215;
  overflow: hidden;
  background: var(--sup-3);
}
.capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.capa__letras {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgb(255 255 255 / 0.9);
  text-shadow: 0 4px 24px rgb(0 0 0 / 0.4);
}
.capa .selo {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
}
.cartao-jogo__corpo {
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem 1.05rem 1.05rem;
}
.cartao-jogo__corpo h3 {
  font-size: 1.08rem;
}
.cartao-jogo__meta {
  font-size: 0.83rem;
  color: var(--mudo);
}
.progresso {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
}
.progresso i {
  height: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.08);
}
.progresso i.feito {
  background: linear-gradient(90deg, var(--brasa), var(--brasa-2));
}
.progresso i.agora {
  background: var(--brasa-3);
  box-shadow: 0 0 10px rgb(255 163 92 / 0.6);
}
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.busca {
  flex: 1 1 14rem;
  max-width: 24rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--borda-2);
  border-radius: 999px;
  background: var(--fundo-2);
}
.pilulas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 999px;
}
.pilulas button {
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-2);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.pilulas button[aria-pressed='true'] {
  background: var(--brasa);
  color: var(--tinta);
}

/* ============================================================ Sala do jogo */
.sala-cabeca {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.sala-cabeca .capa {
  border-radius: var(--raio);
  border: 1px solid var(--borda-2);
  box-shadow: var(--sombra);
}
.sala-cabeca h1 {
  font-size: clamp(1.6rem, 1.6vw + 1.1rem, 2.3rem);
  letter-spacing: -0.03em;
}
.sala-cabeca__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0.45rem 0 0.8rem;
  color: var(--texto-2);
  font-size: 0.9rem;
}
.migalha {
  display: inline-flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--mudo);
}
.migalha a {
  color: var(--texto-2);
}
@media (max-width: 46rem) {
  .sala-cabeca {
    grid-template-columns: 1fr;
  }
  .sala-cabeca .capa {
    max-width: 22rem;
  }
}

/* trilha de etapas */
.trilha {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
.trilha li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0 0.2rem;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mudo);
  counter-increment: etapa;
}
.trilha li::before {
  content: counter(etapa);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--borda-2);
  border-radius: 50%;
  background: var(--fundo);
  font-size: 0.8rem;
  font-weight: 800;
}
.trilha li:not(:first-child)::after {
  content: '';
  position: absolute;
  top: 0.95rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--borda-2);
}
.trilha li.feito {
  color: var(--texto-2);
}
.trilha li.feito::before {
  content: '✓';
  border-color: var(--brasa);
  background: var(--brasa);
  color: var(--tinta);
}
.trilha li.feito::after,
.trilha li.agora::after {
  background: linear-gradient(90deg, var(--brasa), var(--brasa-2));
}
.trilha li.agora {
  color: var(--texto);
}
.trilha li.agora::before {
  border: 2px solid var(--brasa-2);
  color: var(--brasa-2);
  box-shadow:
    0 0 0 4px rgb(255 122 51 / 0.18),
    0 0 18px rgb(255 122 51 / 0.45);
}
@media (max-width: 56rem) {
  .trilha {
    grid-template-columns: repeat(9, 4.6rem);
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
}

.agora-cartao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 1px solid rgb(255 122 51 / 0.35);
  border-radius: var(--raio);
  background:
    radial-gradient(30rem 10rem at 0% 0%, rgb(255 122 51 / 0.14), transparent 70%),
    var(--sup);
}
.agora-cartao > div {
  padding: 1rem 1.2rem;
}
.agora-cartao > div + div {
  border-left: 1px solid var(--borda);
}
.agora-cartao h3 {
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brasa-2);
}
.agora-cartao p {
  margin: 0;
  color: var(--texto-2);
}
@media (max-width: 46rem) {
  .agora-cartao {
    grid-template-columns: 1fr;
  }
  .agora-cartao > div + div {
    border-left: 0;
    border-top: 1px solid var(--borda);
  }
}

/* abas */
.abas {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--borda);
}
.abas a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--texto-2);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.abas a:hover {
  color: var(--texto);
}
.abas a[aria-current] {
  border-bottom-color: var(--brasa);
  color: var(--texto);
}

.duas-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 72rem) {
  .duas-col {
    grid-template-columns: 1fr;
  }
}

/* linha do tempo */
.tempo {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tempo__dia {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
}
.tempo__item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0 0 1rem;
}
.tempo__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 2.2rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--borda-2);
}
.tempo__corpo {
  padding: 0.55rem 0.85rem 0.65rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--sup);
}
.tempo__corpo--interno {
  border-style: dashed;
  background: var(--fundo-2);
}
.tempo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-weight: 650;
  font-size: 0.93rem;
}
.tempo__quando {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mudo);
}
.tempo__texto {
  margin: 0.3rem 0 0;
  color: var(--texto-2);
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* compositor */
.compor {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
}
.compor__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.compor__linha > .campo {
  flex: 1 1 12rem;
}

/* formulários */
.campo {
  display: grid;
  gap: 0.3rem;
}
.campo > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-2);
}
.campo small {
  color: var(--mudo);
  font-size: 0.78rem;
}
.campo input,
.campo select,
.campo textarea,
.entrada {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-p);
  background: var(--fundo);
  color: var(--texto);
}
.campo textarea {
  min-height: 6rem;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.entrada:focus,
.busca:focus {
  outline: none;
  border-color: var(--brasa);
  box-shadow: 0 0 0 3px rgb(255 122 51 / 0.22);
}
.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
}
.campos .inteiro {
  grid-column: 1 / -1;
}
@media (max-width: 40rem) {
  .campos {
    grid-template-columns: 1fr;
  }
}
.marcar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--texto-2);
  cursor: pointer;
}
.marcar input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brasa);
}

/* mensagens */
.conversa {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.msg {
  max-width: 46rem;
  border: 1px solid var(--borda);
  border-radius: 14px 14px 14px 4px;
  background: var(--sup);
}
.msg--saida {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  border-color: rgb(255 122 51 / 0.35);
  background: linear-gradient(180deg, rgb(255 122 51 / 0.1), rgb(255 122 51 / 0.04)), var(--sup);
}
.msg--oculta {
  opacity: 0.6;
  border-style: dashed;
}
.msg__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.65rem 0.9rem 0;
  font-size: 0.85rem;
}
.msg__cabeca b {
  font-size: 0.9rem;
}
.msg__assunto {
  padding: 0.25rem 0.9rem 0;
  font-weight: 650;
  font-size: 0.93rem;
}
.msg__texto {
  margin: 0;
  padding: 0.4rem 0.9rem 0.8rem;
  color: var(--texto-2);
  font-size: 0.92rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg__mais {
  margin: 0 0.9rem 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brasa-2);
  font-size: 0.82rem;
  cursor: pointer;
}
.msg__anexos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.9rem 0.8rem;
}
.anexo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--borda-2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--texto-2);
  text-decoration: none;
}
.anexo:hover {
  border-color: var(--brasa);
  color: var(--texto);
}
.msg__pe {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 0 0.6rem 0.5rem;
}

/* documentos */
.docs {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.doc:last-child {
  border-bottom: 0;
}
.doc__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.8rem;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.06);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--texto-2);
}
.doc__icone--pdf {
  background: rgb(255 122 51 / 0.15);
  color: var(--brasa-2);
}
.doc__icone--docx {
  background: rgb(138 180 255 / 0.14);
  color: var(--azul);
}
.doc b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc small {
  color: var(--mudo);
  font-size: 0.8rem;
}
.doc__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
@media (max-width: 40rem) {
  .doc {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .doc .acoes {
    grid-column: 1 / -1;
  }
}
.soltar {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border: 1.5px dashed var(--borda-2);
  border-radius: var(--raio);
  background: var(--fundo-2);
  text-align: center;
  color: var(--mudo);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.soltar:hover,
.soltar--sobre {
  border-color: var(--brasa);
  background: rgb(255 122 51 / 0.06);
  color: var(--texto-2);
}
.soltar b {
  color: var(--texto);
}

/* planejador */
.marcos {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marco {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--sup);
}
.marco--feito {
  opacity: 0.6;
}
.marco--feito b {
  text-decoration: line-through;
}
.marco__data {
  display: grid;
  justify-items: center;
  padding: 0.35rem 0;
  border-radius: 8px;
  background: rgb(255 122 51 / 0.12);
  color: var(--brasa-2);
  line-height: 1.1;
}
.marco__data strong {
  font-size: 1.35rem;
}
.marco__data small {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* dados */
.dados-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}
.loja {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.loja img {
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-2);
}
@media (max-width: 46rem) {
  .loja {
    grid-template-columns: 1fr;
  }
}
.travado {
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--borda-2);
  border-radius: var(--raio);
  background: var(--fundo-2);
}
.travado strong {
  display: block;
  margin: 0.2rem 0;
  font-size: 1.6rem;
  color: var(--borda-2);
  letter-spacing: 0.1em;
}

/* tabela */
.tabela-rolagem {
  overflow-x: auto;
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tabela th,
.tabela td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
}
.tabela th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
  background: var(--fundo-2);
}
.tabela tr:last-child td {
  border-bottom: 0;
}
.tabela a {
  color: var(--texto);
}

/* caixa de entrada */
.caixa {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  min-height: 60vh;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
}
.caixa__lista {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 72vh;
  border-right: 1px solid var(--borda);
  list-style: none;
}
.caixa__lista button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: none;
  text-align: left;
  cursor: pointer;
}
.caixa__lista button:hover {
  background: rgb(255 255 255 / 0.03);
}
.caixa__lista button[aria-current] {
  background: rgb(255 122 51 / 0.09);
  box-shadow: inset 3px 0 0 var(--brasa);
}
.caixa__lista .linha1 {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.88rem;
}
.caixa__lista .linha1 b {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caixa__lista .nao-lido b::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--brasa);
  vertical-align: 0.05em;
}
.caixa__lista .assunto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--texto-2);
}
.caixa__lista .previa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--mudo);
}
.caixa__leitura {
  padding: 1.2rem 1.4rem;
  overflow-y: auto;
  max-height: 72vh;
}
.caixa__leitura h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.caixa__leitura pre {
  margin: 1rem 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--texto-2);
}
.vincular {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed rgb(240 196 106 / 0.5);
  border-radius: var(--raio-p);
  background: rgb(240 196 106 / 0.06);
}
@media (max-width: 62rem) {
  .caixa {
    grid-template-columns: 1fr;
  }
  .caixa__lista {
    max-height: 40vh;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }
}

/* diálogo */
dialog {
  width: min(36rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--borda-2);
  border-radius: calc(var(--raio) + 2px);
  background: var(--sup);
  color: var(--texto);
  box-shadow: var(--sombra);
}
dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(3px);
}
.dialogo__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--borda);
}
.dialogo__cabeca h2 {
  font-size: 1.1rem;
}
.dialogo__corpo {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  max-height: 70vh;
  overflow-y: auto;
}
.dialogo__pe {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--borda);
}
.copiar {
  display: flex;
  gap: 0.5rem;
}
.copiar input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

/* avisos */
.avisos {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: grid;
  gap: 0.5rem;
}
.aviso-flutuante {
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-p);
  background: var(--sup-2);
  box-shadow: var(--sombra);
  font-size: 0.9rem;
  animation: entra 0.2s ease;
}
.aviso-flutuante--erro {
  border-color: rgb(255 143 122 / 0.6);
  color: var(--erro);
}
.aviso-flutuante--ok {
  border-color: rgb(127 209 138 / 0.5);
}
@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ============================================================ tela de entrada */
.entrada-tela {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 100vh;
}
.entrada-tela__arte {
  position: relative;
  overflow: hidden;
  background: url('/img/fundo-cerco-1280.webp') center / cover;
}
.entrada-tela__arte::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30rem 20rem at 20% 100%, rgb(255 110 40 / 0.35), transparent 70%),
    linear-gradient(90deg, rgb(14 11 9 / 0.35), var(--fundo));
}
.entrada-tela__frase {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 5vw, 3.5rem);
  max-width: 28rem;
}
.entrada-tela__frase h2 {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  letter-spacing: -0.03em;
}
.entrada-tela__frase p {
  margin-top: 0.6rem;
  color: var(--texto-2);
}
.entrada-tela__painel {
  display: grid;
  align-content: center;
  gap: 1.25rem;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.entrada-tela__painel h1 {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
  letter-spacing: -0.03em;
}
.entrada-tela__lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texto-2);
}
.entrada-tela__lista li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.entrada-tela__lista .ic {
  margin-top: 0.2rem;
  color: var(--brasa-2);
}
@media (max-width: 56rem) {
  .entrada-tela {
    grid-template-columns: 1fr;
  }
  .entrada-tela__arte {
    min-height: 13rem;
  }
}

/* páginas avulsas do servidor (login de teste, convite, erros) */
.avulsa {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background:
    radial-gradient(40rem 24rem at 50% 0%, rgb(255 122 51 / 0.12), transparent 70%),
    var(--fundo);
}
.avulsa__caixa {
  width: min(30rem, 100%);
  padding: 2rem;
  border: 1px solid var(--borda-2);
  border-radius: 18px;
  background: var(--sup);
  box-shadow: var(--sombra);
}
.avulsa__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: var(--texto);
  font-weight: 800;
  text-decoration: none;
}
.avulsa__marca span {
  font-weight: 450;
  color: var(--texto-2);
}
.avulsa h1 {
  margin-bottom: 0.75rem;
  font-size: 1.6rem;
}
.avulsa p {
  color: var(--texto-2);
}
.avulsa .pilha {
  display: grid;
  gap: 0.6rem;
}
.avulsa .botao {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borda-2);
  border-radius: 12px;
  background: var(--sup-2);
  color: var(--texto);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.avulsa .botao:hover {
  border-color: var(--brasa);
}
.avulsa .botao small {
  color: var(--mudo);
}
.avulsa .botao--steam {
  text-align: center;
  font-weight: 700;
  background: linear-gradient(180deg, #23344a, #142030);
  border-color: #3d5068;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================ serviços, pendências, contrato */
.grade-jogos + .guia-cartao,
.cartao + .guia-cartao {
  margin-top: 1.25rem;
}
.guia-cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgb(255 122 51 / 0.35);
  border-radius: var(--raio);
  background:
    radial-gradient(26rem 10rem at 0% 0%, rgb(255 122 51 / 0.15), transparent 70%),
    var(--sup);
}
.guia-cartao h2 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
.guia-cartao p {
  margin: 0;
}

.servicos-lista {
  display: grid;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
}
.servico-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 1.2rem;
  font-size: 0.88rem;
}
.servico-item__nome {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.servico-item--off .servico-item__nome {
  color: var(--mudo);
  font-weight: 500;
}
.servico-item--ativo .servico-item__nome .ic {
  color: var(--ok);
}
.mini-select {
  min-height: 1.9rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--borda-2);
  border-radius: 8px;
  background: var(--fundo);
  font-size: 0.8rem;
}

.progresso-tarefas {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: var(--texto-2);
}
.progresso-tarefas__barra {
  flex: 1;
  max-width: 24rem;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.08);
}
.progresso-tarefas__barra i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brasa), var(--ok));
}
.tarefas {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.tarefa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
}
.tarefa--pendente {
  border-color: rgb(240 196 106 / 0.35);
}
.tarefa--aprovado {
  background: var(--fundo-2);
}
.tarefa__check {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border: 2px solid var(--borda-2);
  border-radius: 50%;
}
.tarefa__check.feito {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--tinta);
}
.tarefa__check .ic {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 3;
}
.tarefa__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin-bottom: 0.35rem;
}
.tarefa__titulo b {
  font-size: 1rem;
}
.tarefa__corpo {
  display: grid;
  gap: 0.6rem;
}
.tarefa__desc {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.tarefa__ajuste {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--aviso);
  background: rgb(240 196 106 / 0.07);
  font-size: 0.9rem;
}
.tarefa__resposta {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo-2);
}
.tarefa__resposta .anexo {
  justify-self: start;
}
.tarefa__admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--borda);
}
.tarefa > div > .acoes {
  margin-top: 0.75rem;
}
.verificacao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio-p);
  font-size: 0.9rem;
}
.verificacao p {
  margin: 0.15rem 0;
  color: var(--texto-2);
}
.verificacao--ok {
  border: 1px solid rgb(127 209 138 / 0.4);
  background: rgb(127 209 138 / 0.07);
}
.verificacao--ok > .ic {
  color: var(--ok);
}
.verificacao--espera {
  border: 1px solid rgb(195 161 255 / 0.4);
  background: rgb(195 161 255 / 0.06);
}
.verificacao--espera > .ic {
  color: var(--roxo);
}
.feitas summary {
  margin: 0.5rem 0 0.75rem;
  color: var(--texto-2);
  cursor: pointer;
  font-weight: 600;
}
.grade-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem;
}
.opcao-servico {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-p);
  background: var(--fundo-2);
  cursor: pointer;
}
.opcao-servico:has(input:checked) {
  border-color: var(--brasa);
  background: rgb(255 122 51 / 0.08);
}
.opcao-servico input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--brasa);
}
.opcao-servico b {
  display: block;
  font-size: 0.9rem;
}
.opcao-servico small {
  display: block;
  color: var(--mudo);
  font-size: 0.78rem;
  line-height: 1.4;
}

.contrato-acoes {
  margin-bottom: 1rem;
}
.contrato-form,
.contrato-assinar {
  margin-bottom: 1rem;
}
.contrato-papel {
  padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--raio);
  background: #fbf8f4;
  color: #1d1714;
  box-shadow: var(--sombra);
}
.contrato-rascunho {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed #c58a2c;
  border-radius: 8px;
  background: #fff4dd;
  color: #7a4d06;
  font-size: 0.88rem;
}
.contrato-doc {
  max-width: 46rem;
  margin: 0 auto;
  font: 15px/1.6 Georgia, 'Times New Roman', serif;
}
.contrato-doc .lacuna {
  background: none;
  color: var(--aviso, #b26a00);
  border-bottom: 1px dashed currentColor;
  font-style: italic;
}
.contrato-doc h1 {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: 0;
}
.contrato-doc h2 {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0;
}
.contrato-doc p,
.contrato-doc li {
  color: #2b2420;
}
.contrato-doc ol,
.contrato-doc ul {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}
.contrato-doc li {
  margin-bottom: 0.35rem;
}
.contrato-doc table {
  width: 100%;
  margin: 0.4rem 0 1rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.contrato-doc th,
.contrato-doc td {
  padding: 0.45rem 0.6rem;
  border: 1px solid #d8cfc6;
  text-align: left;
  vertical-align: top;
}
.contrato-doc th {
  background: #efe7de;
}
.assinaturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.assinatura {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d8cfc6;
  border-radius: 8px;
}
.assinatura--ok {
  border-color: #6aa874;
  background: #f0f8f1;
}
.assinatura small {
  color: #6b5f56;
  font-size: 0.78rem;
}
.assinatura__nome {
  font: italic 1.35rem/1.3 'Brush Script MT', 'Segoe Script', cursive;
  color: #1d1714;
}
.contrato-doc__hash {
  margin-top: 1.2rem;
  font: 0.75rem/1.4 ui-monospace, Consolas, monospace;
  color: #6b5f56 !important;
  overflow-wrap: anywhere;
}
@media (max-width: 40rem) {
  .assinaturas {
    grid-template-columns: 1fr;
  }
}

/* negociação do contrato: ações por cláusula, pedidos e versões */
.clausula-acoes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-family: var(--fonte);
}
.contrato-doc .clausula-acoes .btn {
  color: #1d1714;
  border-color: #b9ada2;
  background: transparent;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  box-shadow: none;
}
.clausula-num {
  color: #6b5f56;
  font: 0.72rem/1 ui-monospace, Consolas, monospace;
}
.contrato-doc .clausula--mudou {
  background: #fff2c6;
  box-shadow: -4px 0 0 #e0a100;
}
.clausula-texto {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--mudo);
  background: var(--sup-2);
  color: var(--texto);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.clausula-texto--nova {
  border-left-color: var(--ok);
}
.form-pedido,
.pedido-compor {
  display: grid;
  gap: 0.7rem;
}
.form-pedido textarea,
.pedido-compor textarea {
  width: 100%;
  resize: vertical;
}
.contrato-pedidos,
.contrato-versoes {
  margin: 1rem 0;
}
.pedidos,
.versoes,
.pedido-conversa {
  display: grid;
  gap: 0.8rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.pedido {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda);
  background: var(--sup);
}
.pedido--aberto {
  border-left: 5px solid var(--aviso);
}
.pedido__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pedido-msg {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sup-3);
}
.pedido-msg--brasa {
  border-left: 3px solid var(--brasa);
}
.pedido-msg--dev {
  border-left: 3px solid var(--azul);
}
.pedido-msg p {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.4rem;
}
.diff__antes,
.diff__depois {
  display: block;
  padding: 0.4rem 0.6rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff__antes {
  background: color-mix(in srgb, var(--erro) 12%, transparent);
  color: var(--texto-2);
}
.diff__depois {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--texto);
  text-decoration: none;
}
.alerta-pedidos {
  margin-bottom: 1rem;
  border-left: 6px solid var(--aviso);
}
.alerta-pedidos ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

/* impressão: só o contrato (Imprimir / salvar PDF) */
@media print {
  @page {
    margin: 18mm;
  }
  body {
    background: #fff;
  }
  .lado,
  .topo-movel,
  .faixa-teste,
  .sala-cabeca,
  .trilha,
  .agora-cartao,
  .abas,
  .contrato-acoes,
  .contrato-form,
  .contrato-assinar,
  .contrato-rascunho,
  .contrato-pedidos,
  .contrato-versoes,
  .clausula-acoes,
  .avisos {
    display: none !important;
  }
  .contrato-doc .clausula--mudou {
    background: none;
    box-shadow: none;
  }
  .app {
    display: block;
  }
  .principal {
    padding: 0;
  }
  .contrato-papel {
    padding: 0;
    box-shadow: none;
    background: #fff;
  }
}

/* ============================================================ lambe-lambe (camada final)
   Cantos retos, traço de tinta, sombra de prensa só onde há ação. Sem brilhos nem degradês. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}
h1,
h2,
.cartao__cabeca h3 {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.95;
  text-transform: uppercase;
}
.cabeca h1 {
  font-size: clamp(2.2rem, 2.5vw + 1.2rem, 3.4rem);
  letter-spacing: 0;
}
.cartao__cabeca h2,
.cartao__cabeca h3 {
  font-size: 1.35rem;
}
.rotulo,
.lado__grupo,
.lado__marca small,
.agora-cartao h3 {
  letter-spacing: 0.02em;
  text-transform: none;
}
:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 2px;
}

/* lateral: bloco de tinta, como o rodapé do site */
.lado {
  --texto: #f4f2ec;
  --texto-2: #cfccc4;
  --mudo: #8f8b85;
  --sup: #24212b;
  --borda: #3a3740;
  --brasa-2: #ff7a45;
  border-right: 0;
  background: var(--lado);
  color: var(--texto);
}
.lado__marca b {
  font-family: var(--titulo);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.nav a {
  font-weight: 700;
}
.nav a:hover {
  background: #24212b;
}
.nav a[aria-current] {
  background: var(--brasa);
  color: var(--tinta);
  box-shadow: none;
}
.nav a[aria-current] .ic {
  color: var(--tinta);
}
.topo-movel {
  background: var(--lado) !important;
  color: #f4f2ec;
  backdrop-filter: none !important;
}
.topo-movel .btn {
  border-color: #f4f2ec;
  background: transparent;
  color: #f4f2ec;
}

/* botões: retângulo de tinta, prensa no principal */
.btn {
  border: 2px solid var(--tinta);
  background: var(--sup);
  color: var(--tinta);
  font-weight: 700;
  transition:
    transform 0.08s,
    box-shadow 0.08s,
    background 0.12s;
}
.btn:hover {
  color: var(--tinta);
  border-color: var(--tinta);
  background: var(--fundo-2);
}
.btn--brasa {
  border-color: var(--tinta);
  background: var(--brasa);
  color: var(--tinta);
  box-shadow: 3px 3px 0 var(--tinta);
}
.btn--brasa:hover {
  background: #ff6a33;
  color: var(--tinta);
}
.btn--brasa:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--tinta);
}
.btn--fantasma {
  border-color: transparent;
  background: transparent;
  color: var(--texto-2);
}
.btn--fantasma:hover {
  border-color: transparent;
  background: var(--fundo-2);
}
.lado .btn {
  border-color: #f4f2ec;
  background: transparent;
  color: #f4f2ec;
}
.btn--steam,
.avulsa .botao--steam {
  border: 2px solid var(--tinta);
  background: #1b2838;
  color: #fff;
  box-shadow: 3px 3px 0 var(--tinta);
}
.btn--steam:hover {
  border-color: var(--tinta);
  background: #24364c;
  color: #fff;
}

/* superfícies: papel claro com traço; sem degradê, sem halo */
.cartao,
.cartao-jogo,
.ficha-jogo,
.agora-cartao,
.guia-cartao,
.eu,
.avulsa__caixa {
  background: var(--sup);
}
.cartao,
.cartao-jogo,
.agora-cartao,
.guia-cartao,
.avulsa__caixa {
  border: 2px solid var(--tinta);
}
.kpi {
  border: 0;
  border-top: 3px solid var(--tinta);
  background: transparent;
  padding-left: 0;
}
.kpi::after {
  display: none;
}
.kpi strong {
  font-family: var(--titulo);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.kpi--quente strong {
  color: var(--brasa);
}
.coluna {
  background: var(--fundo-2);
  border: 0;
  border-top: 3px solid var(--tinta);
}
.coluna__num {
  background: var(--tinta);
  color: var(--fundo);
}
.coluna__vazia {
  border-color: var(--mudo);
}
.ficha-jogo,
.cartao-jogo {
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}
.ficha-jogo:hover,
.cartao-jogo:hover {
  border-color: var(--tinta);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--tinta);
}
.cartao-jogo .capa {
  border-bottom: 2px solid var(--tinta);
}
.cartao-jogo__corpo h3 {
  font-family: var(--titulo);
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}
.guia-cartao {
  background: #ffc93d;
}
.agora-cartao {
  box-shadow: var(--sombra);
}
.avulsa {
  background: var(--fundo);
}
.avulsa__caixa {
  box-shadow: var(--sombra);
}
.avulsa .botao {
  border: 2px solid var(--tinta);
}
.faixa-teste {
  border: 2px dashed var(--tinta);
  background: #ffc93d;
  color: var(--tinta);
  font-weight: 700;
}

/* selos e marcas: carimbos chapados */
.selo {
  border: 1.5px solid currentColor;
  background: transparent;
  font-weight: 700;
}
.selo--cheio {
  border-color: var(--tinta);
  background: var(--brasa);
  color: var(--tinta);
}
.capa .selo {
  background: var(--sup);
}
.bola,
.bola--brasa,
.bola--ok,
.bola--azul,
.bola--roxo,
.bola--aviso {
  background: transparent;
  border: 2px solid currentColor;
}
.avatar {
  background: var(--brasa);
  border: 2px solid var(--tinta);
}
.progresso i {
  background: var(--fundo-2);
  outline: 1px solid var(--tinta);
}
.progresso i.feito {
  background: var(--tinta);
}
.progresso i.agora {
  background: var(--brasa);
  box-shadow: none;
}
.trilha li.feito::after,
.trilha li.agora::after {
  background: var(--tinta);
}
.trilha li.feito::before {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--fundo);
}
.trilha li.agora::before {
  border: 3px solid var(--tinta);
  background: var(--brasa);
  color: var(--tinta);
  box-shadow: none;
}

/* campos */
input:not([type='checkbox']):not([type='radio']),
select,
textarea,
.busca {
  border: 2px solid var(--tinta) !important;
  background: var(--sup) !important;
  color: var(--texto);
}
.pilulas {
  border: 2px solid var(--tinta);
}

/* tela de entrada: arte limpa à esquerda, sem véu colorido */
.entrada-tela__arte {
  border-right: 3px solid var(--tinta);
}
.entrada-tela__arte::after {
  background: linear-gradient(0deg, rgb(24 22 31 / 0.88), rgb(24 22 31 / 0.05) 65%);
}
.entrada-tela__frase {
  --texto: #f4f2ec;
  --texto-2: #dedad2;
  color: #f4f2ec;
}
.entrada-tela__frase h2 {
  font-size: clamp(1.9rem, 1.6vw + 1rem, 2.8rem);
}
.entrada-tela__painel h1 {
  font-size: clamp(2.6rem, 3vw + 1rem, 4rem);
}
.entrada-tela__lista .ic {
  color: var(--brasa);
}
.carregando img {
  animation: none;
}

/* ============================================================ ajustes do jogo
   Página de ajustes em faixas: título à esquerda, campos à direita, traço de tinta entre elas. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.entrada:focus,
.busca:focus {
  border-color: var(--brasa) !important;
  box-shadow: 3px 3px 0 var(--brasa);
}
.ajustes {
  display: grid;
}
.ajuste {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.9rem 2.5rem;
  padding: 1.6rem 0 1.9rem;
  border-top: 3px solid var(--tinta);
}
.ajuste__corpo {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}
.ajuste__cabeca h2 {
  font-size: 2rem;
}
.ajuste__cabeca p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}
@media (max-width: 56rem) {
  .ajuste {
    grid-template-columns: 1fr;
  }
}

/* passos da Steam: sequência de verdade, então numerada */
.passos-steam {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.passo-steam {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--tinta);
}
.passo-steam:first-child {
  padding-top: 0;
}
.passo-steam:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.passo-steam__n {
  font-family: var(--titulo);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 0.85;
  color: var(--tinta);
}
.passo-steam--feito .passo-steam__n {
  color: var(--ok);
}
.passo-steam__corpo {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
.passo-steam__corpo p {
  margin: 0;
}
.passo-steam__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}
.passo-steam__titulo h3 {
  font-size: 1.05rem;
}
.passo-steam--feito .passo-steam__titulo h3 {
  color: var(--texto-2);
}
.linha-campo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.linha-campo > .entrada {
  flex: 1 1 18rem;
  width: auto;
}
.copiavel {
  padding: 0.35rem 0.6rem;
  border: 2px dashed var(--tinta);
  background: var(--sup);
  font-family: var(--fonte);
  font-weight: 700;
  font-size: 0.9rem;
  user-select: all;
}
.nota-steam {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 4px solid var(--aviso);
  background: var(--sup);
  color: var(--texto-2);
}
.nota-steam--ok {
  border-left-color: var(--ok);
}
.grupo-marcar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.grupo-marcar legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-2);
}
.grupo-marcar--coluna {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.marcar--caixa {
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--tinta);
  background: var(--sup);
  color: var(--tinta);
}
.marcar--caixa:has(input:checked) {
  background: var(--tinta);
  color: var(--fundo);
}
.ajuste .acoes {
  margin-top: 0.3rem;
}

/* abas da sala: quebram linha no desktop (nada escondido), rolam no celular */
.abas {
  flex-wrap: wrap;
  gap: 0;
  overflow: visible;
  border-bottom: 3px solid var(--tinta);
}
.abas a {
  padding: 0.6rem 0.8rem;
  border-bottom: 0;
  font-weight: 700;
}
.abas a:hover {
  background: var(--fundo-2);
}
.abas a[aria-current] {
  background: var(--tinta);
  color: var(--fundo);
}
.abas a[aria-current] .selo {
  border-color: var(--fundo);
}
@media (max-width: 40rem) {
  .abas {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* ============================================================ aba Dados */
.dados {
  display: grid;
  gap: 1.5rem;
}
.dados > .nota-steam {
  margin: 0;
}
.dados .kpis {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.kpi small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
}
.dados-duas {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 62rem) {
  .dados-duas {
    grid-template-columns: 1fr;
  }
}
.dados-bloco {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--tinta);
  min-width: 0;
}
.dados-bloco__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.dados-bloco h2 {
  font-size: 1.6rem;
}
.dados-bloco.loja {
  grid-template-columns: 16rem minmax(0, 1fr);
}
.dados-bloco.loja img {
  border: 2px solid var(--tinta);
}
.pilulas button[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--fundo);
}
.pilulas button {
  font-weight: 700;
  color: var(--tinta);
}

/* gráfico de uma série: linha laranja de 2px, grade recessiva, um rótulo só (o pico) */
.grafico-caixa {
  position: relative;
}
.grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.grafico__grade {
  stroke: var(--sup-3);
  stroke-width: 1;
}
.grafico__base {
  stroke: var(--tinta);
  stroke-width: 2;
}
.grafico__eixo {
  fill: var(--mudo);
  font-size: 11px;
  font-family: var(--fonte);
}
.grafico__area {
  fill: var(--brasa);
  opacity: 0.12;
}
.grafico__linha {
  fill: none;
  stroke: var(--brasa);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico__ponto {
  fill: var(--brasa);
  stroke: var(--fundo);
  stroke-width: 2;
}
.grafico__rotulo {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--fonte);
}
.grafico__regua {
  stroke: var(--tinta);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.grafico-dica {
  position: absolute;
  top: 0;
  display: grid;
  gap: 0.1rem;
  min-width: 140px;
  padding: 0.45rem 0.65rem;
  border: 2px solid var(--tinta);
  background: var(--sup);
  box-shadow: 3px 3px 0 var(--tinta);
  font-size: 0.82rem;
  pointer-events: none;
}
.grafico-dica small {
  color: var(--mudo);
}

/* barras horizontais (países) */
.barras {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.barras li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.88rem;
}
.barras__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barras__trilho {
  height: 0.75rem;
  background: var(--fundo-2);
}
.barras__trilho i {
  display: block;
  height: 100%;
  background: var(--tinta);
}
.barras li:first-child .barras__trilho i {
  background: var(--brasa);
}
.barras__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.previa-email {
  max-height: 22rem;
  margin: 0;
  padding: 0.9rem;
  overflow: auto;
  border: 2px dashed var(--tinta);
  background: var(--sup);
  color: var(--texto-2);
  font: 0.82rem/1.5 var(--fonte);
  white-space: pre-wrap;
}

/* prazos, metas e UTM (melhorias) */
.tarefa--atrasada {
  border-color: var(--erro);
  box-shadow: inset 3px 0 0 var(--erro);
}
.aviso-atraso {
  border: 1px solid var(--erro);
  background: rgb(255 143 122 / 0.08);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}
.utm-url {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.85rem;
}

/* ============================================================ responsivo (cabe na tela) */
/* A página nunca rola para o lado; o que é largo rola dentro da sua caixa. */
html,
body {
  overflow-x: clip;
}
.principal {
  overflow-wrap: break-word;
}
.principal :where(.tabela) {
  overflow-wrap: normal;
}
.cabeca > *,
.mesa > *,
.barra-filtros > * {
  min-width: 0;
}
.cabeca p {
  max-width: 75ch;
}
.ficha-jogo b,
.ficha-jogo small,
.cabeca p,
.feed a {
  overflow-wrap: anywhere;
}
.tabela-rolagem {
  max-width: 100%;
  overscroll-behavior-x: contain;
}
/* Mesa: as etapas quebram em linhas em vez de virar uma faixa de 2000px que rola
   de lado (a barra de rolagem ficava lá embaixo, depois da coluna mais alta). */
.quadro {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  align-items: start;
  overflow-x: visible;
  padding-bottom: 0;
}
.coluna {
  min-width: 0;
  min-height: 0;
}
/* E-mails: as duas colunas cabem na altura da janela (sem rolagem dupla). */
@media (min-width: 62.01rem) {
  .caixa__lista,
  .caixa__leitura {
    max-height: max(22rem, calc(100dvh - 17rem));
  }
}

/* ================================================================== Notícias (editor) */
.noticia-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: start;
}
.noticia-editor__principal,
.noticia-editor__lado {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 70rem) {
  .noticia-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}
.noticia-capa-previa {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  border: 2px solid var(--borda);
}
.editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sup);
}
.editor-rico,
.editor-fonte {
  min-height: 24rem;
}
.editor-rico {
  padding: 1rem 1.25rem;
  border: 1px solid var(--borda-2);
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.editor-rico:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(255 122 51 / 0.22);
}
.editor-fonte {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
}
.editor-rico h2 {
  font-family: var(--titulo);
  font-size: 1.9rem;
  margin: 1.5rem 0 0.5rem;
}
.editor-rico h3 {
  font-family: var(--titulo);
  font-size: 1.4rem;
  margin: 1.25rem 0 0.4rem;
}
.editor-rico img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--borda);
}
.editor-rico figure {
  margin: 1rem 0;
}
.editor-rico figcaption,
.editor-rico .bloco-citacao p {
  font-size: 0.85rem;
  color: var(--mudo);
}
.editor-rico blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 5px solid var(--brasa);
  font-weight: 600;
}
.editor-rico .bloco-destaque,
.editor-rico .bloco-cartao,
.editor-rico .bloco-passos li,
.editor-rico .bloco-numeros li {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 2px solid var(--borda);
  background: #ffd5c2;
  color: #18161f;
}
.editor-rico .bloco-destaque--escuro {
  background: #18161f;
  color: #faf9f6;
}
.editor-rico .bloco-cartao {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  background: var(--sup);
  color: var(--texto);
}
.editor-rico .bloco-galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.editor-rico .bloco-numeros ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.editor-rico .bloco-numeros li {
  margin: 0;
  background: #ffc93d;
}
.editor-rico .bloco-numeros strong {
  display: block;
  font-family: var(--titulo);
  font-size: 1.6rem;
}
.editor-rico .bloco-passos li {
  background: var(--sup);
  color: var(--texto);
}
.editor-rico .botao {
  display: inline-block;
  margin: 0.25rem 0.25rem 0.25rem 0;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--borda);
  font-weight: 700;
  text-decoration: none;
  color: #18161f;
  background: var(--sup);
}
.editor-rico .botao--brasa {
  background: var(--brasa);
}
.grade-imagens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
  max-height: 55vh;
  overflow: auto;
  margin-top: 0.75rem;
}
.grade-imagens__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 2px solid var(--borda);
  background: var(--sup);
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.grade-imagens__item:hover,
.grade-imagens__item:focus-visible {
  border-color: var(--brasa);
}
.grade-imagens__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.grade-imagens__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}

/* sala: "ver como o desenvolvedor" e atalho das pendências */
.aviso-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(240 196 106 / 0.45);
  border-radius: var(--raio-p);
  background: rgb(240 196 106 / 0.08);
  font-size: 0.9rem;
}
.aviso-faixa > span { flex: 1 1 16rem; }
.aviso-faixa--visao { border-style: dashed; }