:root {
  --paper: #f3efe6;
  --ink: #1b1914;
  --ink-soft: #4a453c;
  --rule: #d5cec2;
  --track: #e4ddd0;
  --stamp: #8d2b24;
  --field: #cfc6b6;
  --tinta-13: #9d2c24;
  --tinta-22: #0f6e3d;
  color-scheme: light;
}

html.noite {
  color-scheme: dark;
  --paper: #0c1a12;
  --ink: #f6f1df;
  --ink-soft: #e6debc;
  --rule: #34543f;
  --track: #163528;
  --stamp: #ffb4a8;
  --field: #06110b;
  --tinta-13: #e23b32;
  --tinta-22: #ffdf00;
}

* { box-sizing: border-box; }

html { background: var(--field); }

body {
  margin: 0 auto;
  max-width: 980px;
  min-height: 100vh;
  padding: 28px 22px 72px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 1.05rem;
  line-height: 1.4;
  box-shadow: 0 18px 40px rgba(40, 32, 18, 0.18);
}

.topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

h1 {
  margin: 0 0 12px;
  max-width: 16ch;
  font-size: clamp(3.2rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

html.noite h1:not(.vazio) { color: #ffdf00; }

.trava {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1.15rem;
}

.trava.travado {
  color: var(--stamp);
  font-weight: 700;
}

.erro {
  margin: 0 0 8px;
  color: var(--stamp);
  font-weight: 700;
}

.comandos {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.comandos a,
.comandos button {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
}

.comandos a:hover,
.comandos button:hover { background: var(--track); }

.comandos a:active,
.comandos button:active { transform: scale(0.97); }

.comandos a:focus-visible,
.comandos button:focus-visible {
  outline: 2px solid var(--tinta-22);
  outline-offset: 2px;
}

.guerra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.lado {
  display: grid;
  grid-template-columns: 72px auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-width: 0;
}

.lado img {
  grid-row: 1 / span 3;
  width: 72px;
  height: 96px;
  object-fit: cover;
  object-position: center 15%;
  background: var(--track);
  border: 1px solid var(--rule);
}

.lado.dir {
  grid-template-columns: minmax(0, 1fr) auto 72px;
  text-align: right;
}

.lado.dir img {
  grid-column: 3;
  grid-row: 1 / span 3;
}

.pct-foto {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  align-self: center;
}

.lado.dir .pct-foto { grid-column: 2; }

.lado.dir .nome,
.lado.dir .placar,
.lado.dir .chapa { grid-column: 1; }

.nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 0;
  grid-column: 3;
}

.lado.dir .nome { justify-content: flex-end; }

.lado.esq.na-frente .votos { color: var(--tinta-13); }
.lado.dir.na-frente .votos { color: var(--tinta-22); }

.num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.4rem;
}

.nome strong {
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.marca {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--stamp);
}

html.noite .marca { color: #ffdf00; }

.corda {
  --puxo: 50;
  position: relative;
  grid-column: 1 / -1;
  height: 28px;
  margin-top: 22px;
  background: var(--track);
}

.tinta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tinta-esq {
  background: var(--tinta-13);
  transform-origin: left center;
}

.tinta-dir {
  background: var(--tinta-22);
  transform-origin: right center;
}

.meio {
  position: absolute;
  left: 50%;
  top: -1.4rem;
  z-index: 2;
  transform: translateX(-50%);
  color: var(--stamp);
  font-size: 0.8rem;
  font-weight: 700;
}

.meio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.15rem;
  width: 2px;
  height: 36px;
  background: var(--stamp);
}

.no {
  position: absolute;
  z-index: 3;
  top: -7px;
  left: calc(var(--puxo) * 1%);
  width: 4px;
  height: 42px;
  margin-left: -2px;
  background: var(--ink);
  transition: left 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chapa {
  margin: 4px 0 0;
  grid-column: 3;
  color: var(--ink-soft);
}

.placar {
  margin: 6px 0 0;
  grid-column: 3;
  font-variant-numeric: tabular-nums;
}

.votos {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lado.esq .pct { color: var(--tinta-13); }
.lado.dir .pct { color: var(--tinta-22); }

.pct {
  display: block;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.diferenca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  grid-column: 1 / -1;
  margin: 16px 0 0;
  font-variant-numeric: tabular-nums;
}

.diferenca strong {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.diferenca[data-lado="13"] strong { color: var(--tinta-13); }
.diferenca[data-lado="22"] strong { color: var(--tinta-22); }
.diferenca[data-lado="0"] strong { color: var(--ink-soft); }

.diferenca span {
  color: var(--ink-soft);
  font-size: 1.15rem;
  font-weight: 700;
}

.sem-volta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}

.sem-volta[hidden] { display: none; }

.sem-volta strong {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.sem-volta[data-lado="13"] strong { color: var(--tinta-13); }
.sem-volta[data-lado="22"] strong { color: var(--tinta-22); }

.sem-volta span {
  color: var(--ink-soft);
  font-size: 1.15rem;
  font-weight: 700;
}

.secoes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 18px 0 0;
  font-variant-numeric: tabular-nums;
}

.secoes strong {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.secoes span {
  color: var(--ink-soft);
  font-size: 1.15rem;
  font-weight: 700;
}

.secoes .quem {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.secoes .quem[data-lado="13"] { color: var(--tinta-13); }
.secoes .quem[data-lado="22"] { color: var(--tinta-22); }

.miudos,
.fonte,
.exterior {
  margin: 8px 0 0;
  max-width: 68ch;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.avisos {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 8px 0;
  background: var(--paper);
  color: var(--stamp);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}

.avisos p {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avisos a {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.falhas-bloco { margin-top: 28px; }

.falhas-bloco summary {
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.falhas-bloco summary:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}

.falhas-bloco ol {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.falhas-bloco li {
  display: grid;
  grid-template-columns: 5.4rem 6.4rem minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.falhas-bloco time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.falhas-bloco .tipo {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.falhas-bloco li[data-tipo="troca"] .tipo { color: var(--stamp); }

.falhas-bloco li[data-tipo="queda"] .tipo,
.falhas-bloco li[data-tipo="secao"] .tipo { color: var(--ink); }

.falhas-bloco li[data-tipo="conta"] {
  color: var(--ink-soft);
  font-weight: 500;
}

.falhas-bloco .fato { min-width: 0; }

.falhas-vazio { margin: 0; color: var(--ink-soft); }

.relato {
  margin-top: 56px;
  max-width: min(68ch, 100%);
  scroll-margin-top: 48px;
}

.relato h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.relato h3 {
  margin: 1.7em 0 0.35em;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.relato p,
.relato li { color: var(--ink); }

.relato p { margin: 0.55em 0; }

.relato ul {
  margin: 0.4em 0 0.8em;
  padding-left: 1.15em;
}

.relato li { margin: 0.25em 0; }

.relato table {
  width: 100%;
  margin: 0.8em 0 0.4em;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.relato caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-bottom: 6px;
}

.relato th,
.relato td {
  text-align: left;
  vertical-align: top;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--rule);
}

.relato a:focus-visible { outline: 2px solid var(--tinta-22); outline-offset: 2px; }

.mapa-bloco {
  margin: 28px 0 0;
}

.mapa {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin: 0 auto;
}

.mapa path {
  fill: var(--track);
  stroke: var(--paper);
  stroke-width: 1.4;
}

.mapa path[data-lado="13"] { fill: var(--tinta-13); }
.mapa path[data-lado="22"] { fill: var(--tinta-22); }
.mapa path[data-lado="empate"] { fill: var(--ink-soft); }

.mapa text {
  fill: #f7f3ea;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}

.mapa text[data-modo="curto"] { font-size: 15px; }

.mapa text .sigla {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mapa text .frente { font-size: 18px; font-weight: 800; }

.mapa text[data-modo="curto"] .frente { font-size: 15px; }

.mapa text .apurado {
  font-size: 13px;
  font-weight: 700;
}

.mapa text[data-modo="curto"] .apurado { font-size: 12px; }

.mapa text[data-lado="0"] { fill: var(--ink-soft); }

html.noite .mapa text[data-lado="22"],
html.noite .mapa text[data-lado="22"] tspan { fill: #1b1914; }

.mapa-legenda {
  margin: 8px 0 0;
  text-align: center;
  font-weight: 700;
}

.mapa-legenda .e13 { color: var(--tinta-13); }
.mapa-legenda .e22 { color: var(--tinta-22); }

.ufs-wrap {
  margin-top: 32px;
  overflow-x: auto;
}

.ufs {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ufs caption {
  margin: 0 0 8px;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ufs th,
.ufs td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
}

.ufs th:first-child,
.ufs td:first-child { text-align: left; }

.ufs th {
  color: var(--ink-soft);
  font-weight: 700;
}

.ufs .v13 { color: var(--tinta-13); }
.ufs .v22 { color: var(--tinta-22); }
.ufs td.frente { font-weight: 800; }

.ufs tr[data-lado="13"] .uf { color: var(--tinta-13); font-weight: 800; }
.ufs tr[data-lado="22"] .uf { color: var(--tinta-22); font-weight: 800; }

.ufs tbody tr:hover { background: var(--track); }

@media (max-width: 680px) {
  body { padding: 18px 14px 56px; }
  .topo { flex-direction: column-reverse; gap: 16px; }
  .guerra { column-gap: 10px; }
  .lado,
  .lado.dir { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
  .lado.dir { grid-template-columns: minmax(0, 1fr) 48px; }
  .lado img { width: 48px; height: 64px; grid-column: 1; grid-row: 1; }
  .lado.dir img { grid-column: 2; }
  .pct-foto { grid-column: 2; grid-row: 1; }
  .lado.dir .pct-foto { grid-column: 1; justify-self: end; }
  .lado .nome,
  .lado .placar,
  .lado .chapa,
  .lado.dir .nome,
  .lado.dir .placar,
  .lado.dir .chapa { grid-column: 1 / -1; }
  .num { font-size: 1rem; }
  .nome strong { font-size: 0.95rem; }
  .votos { font-size: 1rem; }
  .pct { font-size: 1.35rem; }
  .chapa { font-size: 0.8rem; }
  .corda { margin-top: 28px; }
  .falhas-bloco li { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .falhas-bloco .fato { grid-column: 1 / -1; }
  .relato table { font-size: 0.82rem; }
  .relato th,
  .relato td { padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tinta,
  .no { transition: none; }
  .comandos a:active,
  .comandos button:active { transform: none; }
}