/* Degola — visual "sports daily": papel, verde CBF, amarelo Brasil. */
:root {
  --paper: #f4f1e6;
  --card: #fffdf6;
  --ink: #1d2a1c;
  --muted: #66735f;
  --line: #e2dcc8;
  --green-900: #063d22;
  --green-700: #046a38;
  --green-500: #009c3b;
  --green-100: #e3f0e4;
  --yellow: #ffdf00;
  --blue: #1d6fd1;
  --orange: #d97a06;
  --red: #cf2e2e;
  --red-wash: #fbe9e7;
  --radius: 16px;
  --ease: cubic-bezier(.2, 0, 0, 1); /* saída suave p/ todas as transições de interface */
  /* ruído sutil (SVG inline, sem requisição): papel na página, giz claro no cabeçalho */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .16 0 0 0 0 .08 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* linhas de campo (círculo central + meio de campo), traço branco bem fraco */
  --pitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='210' cy='210' r='150'/%3E%3Cpath d='M210 0V420'/%3E%3Ccircle cx='210' cy='210' r='7' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  --shadow-card: 0 0 0 1px rgba(6, 61, 34, .02), 0 1px 2px rgba(6, 61, 34, .06), 0 10px 26px -14px rgba(6, 61, 34, .28);
  --pad: clamp(12px, 1.6vw, 16px); /* padding dos cards (a tabela sangra até a borda com ele) */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink);
  background:
    var(--grain-dark),
    radial-gradient(1100px 360px at 50% 0, rgba(255, 223, 0, .07), transparent 70%),
    linear-gradient(#f7f4e9, var(--paper) 720px);
  background-color: var(--paper);
  font-family: var(--font); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
a { color: var(--green-700); }
::selection { background: var(--yellow); color: var(--green-900); }
a:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

/* ---------- header ---------- */
.topbar {
  position: relative; isolation: isolate;
  width: 100%;
  background:
    radial-gradient(900px 320px at 85% -10%, rgba(255, 223, 0, .13), transparent 70%),
    radial-gradient(700px 300px at 0% 120%, rgba(0, 156, 59, .35), transparent 70%),
    var(--green-900);
  color: #f5f7f2;
  border-bottom: 6px solid var(--yellow);
  box-shadow: 0 12px 28px -18px rgba(6, 61, 34, .6);
  padding: max(10px, env(safe-area-inset-top)) 0 clamp(10px, 1.4vw, 14px);
}
/* textura do cabeçalho: faixas de gramado + ruído (::before) e linhas de campo à direita (::after); tudo atrás do texto e com contraste mínimo */
.topbar::before, .topbar::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.topbar::before {
  background:
    var(--grain-light),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 76px, transparent 76px 152px);
}
.topbar::after {
  background: var(--pitch) no-repeat right 6% top 52% / 300px 300px;
  opacity: .055;
}
.wrap {
  max-width: 1280px; margin: 0 auto;
  padding-left: max(clamp(14px, 3vw, 24px), env(safe-area-inset-left));
  padding-right: max(clamp(14px, 3vw, 24px), env(safe-area-inset-right));
}
.brandbar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.brandbar .langpick { margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); transition: transform .2s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
.brand-word { font-size: 21px; font-weight: 900; letter-spacing: -0.03em; }
.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap;
  padding-top: clamp(8px, 1.3vw, 12px);
}
.hero-copy { max-width: 600px; }
/* telas largas: copy e ações lado a lado (cabeçalho com ~66px a menos); em todas as línguas */
@media (min-width: 1160px) {
  .hero { flex-wrap: nowrap; }
  .hero-copy { flex: 1 1 0; min-width: 0; }
  .actions { flex: 0 0 auto; }
  .btn.sim .sim-txt { max-width: 262px; } /* o subtítulo do botão quebra em 2 linhas em vez de alargar a barra (es/fr/de são mais longos) */
  .sim-txt small { text-wrap: balance; }
}
.kicker {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--yellow);
}
h1 {
  margin: 0 0 6px; font-weight: 900; letter-spacing: -0.035em;
  font-size: clamp(28px, 4.2vw, 40px); line-height: 1; text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.subtitle { margin: 0; color: #d3ddcf; font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.45; text-wrap: pretty; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.league-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.league-tabs::-webkit-scrollbar { display: none; }
.league-tabs a {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; scroll-snap-align: start;
  font-family: var(--font); color: #d7e1d3; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); border-radius: 999px;
  padding: 6px 13px 6px 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.league-tabs a:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(255, 223, 0, .06); }
.league-tabs a:active { transform: scale(.96); }
.league-tabs a.active { background: var(--yellow); border-color: var(--yellow); color: var(--green-900); box-shadow: 0 6px 16px -8px rgba(255, 223, 0, .6); }
.league-tabs a.active:hover { background: var(--yellow); color: var(--green-900); }
.lg-flag { width: 20px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }

.btn {
  font-family: var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; color: #f5f7f2; border: 1.5px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 10px 17px; cursor: pointer; font-size: 14.5px; font-weight: 700; line-height: 1.1;
  transition: transform .12s var(--ease), filter .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:hover { border-color: var(--yellow); color: var(--yellow); }
.btn:active { transform: scale(.96); }
.btn:focus-visible, .league-tabs a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn.primary {
  background: var(--yellow); border-color: var(--yellow); color: var(--green-900); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -10px rgba(255,223,0,.7);
}
.btn.primary:hover { filter: brightness(1.06); color: var(--green-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 26px -10px rgba(255,223,0,.8); }
.btn.sim { padding: 9px 20px 9px 16px; gap: 11px; text-align: left; border-radius: 18px; }
.btn.sim svg { width: 20px; height: 20px; }
.sim-txt { display: flex; flex-direction: column; gap: 2px; }
.sim-txt small { font-size: 12px; font-weight: 600; opacity: .72; letter-spacing: 0; }
.btn.light { background: #fff; border-color: #fff; color: var(--green-900); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
.btn.light:hover { color: var(--green-700); border-color: #fff; filter: brightness(.97); }
.btn.ghost { color: #d7e1d3; background: rgba(255, 255, 255, .03); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.small svg { width: 14px; height: 14px; }
.btn.icon { width: 36px; height: 36px; padding: 0; }
.btn.icon svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- layout ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: 20px; padding-top: 14px; padding-bottom: 10px; align-items: start;
}
/* minmax(0, …): sem isso a coluna não encolhe abaixo da largura da tabela e o card vaza da tela */
@media (max-width: 1100px) { .league-tabs { order: 3; flex-basis: 100%; } }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.card { min-width: 0; }
.card {
  background: linear-gradient(#fffefa, var(--card) 160px); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--pad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-card);
}
.card-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head .hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; text-wrap: pretty; }
/* classificação: título + filtros na mesma linha, dica logo abaixo (cabeça de ~58px em vez de ~124px) */
.std-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-bottom: 6px; }
.std-head .card-title { margin: 0; flex: 0 0 auto; }
.std-head .ch-toggles { margin: 0 0 0 auto; }
.std-head .hint { flex: 1 0 100%; margin: 0; font-size: 12.5px; line-height: 1.35; }
.card-head.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- standings ---------- */
.table-scroll { overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(#0a4a2a, var(--green-900)); color: #eef3ea;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 7px; white-space: nowrap;
}
thead th:first-child { border-radius: 10px 0 0 10px; }
thead th:last-child { border-radius: 0 10px 10px 0; }
tbody td { padding: 3px 7px; border-bottom: 1px solid rgba(226, 220, 200, .75); text-align: center; white-space: nowrap; font-size: 14.5px; }
tbody tr { transition: background-color .15s var(--ease); }
tbody tr:nth-child(even) { background: #faf7ec; }
tbody tr:hover { background: var(--green-100); }
tbody tr:last-child td { border-bottom: none; }
.c-pos { width: 40px; }
.pos-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(#0a4a2a, var(--green-900)); color: #fff; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* o selo de posição já carrega a zona (além da barra lateral e da legenda) */
tr.zone-g4 .pos-num { background: linear-gradient(#2a82e0, var(--blue)); }
tr.zone-g6 .pos-num { background: linear-gradient(#e8890f, var(--orange)); }
tr.zone-playoff .pos-num { background: linear-gradient(#c9622a, #b3541e); }
tr.zone-z4 .pos-num { background: linear-gradient(#dc4040, var(--red)); }
.c-team { text-align: left !important; font-weight: 600; }
.team-cell { display: flex; align-items: center; gap: 9px; }
.name-short { display: none; }
.crest { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; flex-shrink: 0; }
.crest img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 1.5px rgba(6, 61, 34, .22)); }
.crest .badge { display: none; }
.crest.noimg .badge { display: inline-flex; }
.badge {
  align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.delta { font-size: 11px; margin-left: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green-500); } .delta.down { color: var(--red); } .delta.same { color: #b7bfae; }
tr.zone-g4 td.c-pos { box-shadow: inset 4px 0 0 var(--blue); }
tr.zone-g6 td.c-pos { box-shadow: inset 4px 0 0 var(--orange); }
tr.zone-z4 td.c-pos { box-shadow: inset 4px 0 0 var(--red); }
tr.zone-z4 { background: var(--red-wash); }
tr.zone-z4:nth-child(even) { background: #f7ddd8; }
tr.zone-z4:hover { background: #f5d3cd; }
tr.z4-first td { border-top: 2px solid var(--red); padding-top: 6px; }
.c-pct { min-width: 0; }
/* chances: tinta (intensidade ~ raiz da chance) + filete inferior proporcional (--v = chance 0..1); o número segue sendo a leitura principal */
.pct-val {
  position: relative; isolation: isolate;
  display: block; text-align: right; padding: 3px 7px; border-radius: 6px;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.pct-val::before, .pct-val::after { content: ""; position: absolute; z-index: -1; right: 0; border-radius: 6px; }
.pct-val::before { inset: 0; background: var(--tint, transparent); }
.pct-val::after { bottom: 0; height: 3px; width: calc(var(--v, 0) * 100%); background: var(--bar, transparent); border-radius: 2px; }
.pct-val.lv-min { font-weight: 500; }
.pct-val.lv-min::before, .pct-val.lv-min::after, .pct-val.lv-lo::after { display: none; }
.pct-val.lv-mid { font-weight: 700; }
.pct-val.lv-hi { font-weight: 800; }
#standings .c-sub { min-width: 72px; text-align: right; }
#standings .c-sub[data-ch="title"] .pct-val { --tint: rgb(184 134 11 / calc(.05 + var(--w) * .24)); --bar: rgb(166 120 8 / .85); color: #6a4e00; }
#standings .c-sub[data-ch="rel"] .pct-val { --tint: rgb(207 46 46 / calc(.05 + var(--w) * .2)); --bar: rgb(207 46 46 / .8); color: #a02121; }
#standings .c-sub[data-ch="title"] .pct-val.lv-hi { color: #5e4500; }
#standings .c-sub[data-ch="rel"] .pct-val.lv-hi { color: #8a1515; }
#standings .c-sub svg { display: block; margin: 0 auto; }
#standings.hide-title [data-ch="title"], #standings.hide-rel [data-ch="rel"],
#standings.empty-title [data-ch="title"], #standings.empty-rel [data-ch="rel"] { display: none; }
/* recalculando: só um esmaecer discreto nas colunas de chances (com pequeno atraso p/ não piscar em cálculos rápidos) */
#standings tbody .c-sub > span { transition: opacity .25s; }
#standings.calc tbody .c-sub > span { opacity: .45; transition-delay: .15s; }
.no-chance { color: #d6cfba; font-weight: 400; padding-right: 7px; }
.chtoggle.is-empty { opacity: .55; }
.ch-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.chtoggle {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid #c9c2ab; border-radius: 999px; padding: 4px 11px;
  font-size: 13px; font-weight: 700; color: var(--green-900); cursor: pointer;
  background: #f4efe0; transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.chtoggle:hover { border-color: var(--green-700); background: #f0ebd8; }
.chtoggle:active { transform: scale(.96); }
.chtoggle:has(input:focus-visible) { outline: 3px solid var(--green-500); outline-offset: 2px; }
.chtoggle input { accent-color: var(--green-700); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.langpick { position: relative; }
#lang-btn { display: inline-flex; align-items: center; gap: 8px; }
#lang-btn img { width: 22px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); display: block; }
#lang-btn .caret { width: 12px; height: 12px; opacity: .8; }
#lang-btn { padding: 8px 12px; }
#lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: #0d3b26; border: 1.5px solid #4c7a5e; border-radius: 14px;
  padding: 6px; min-width: 150px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px -12px rgba(0,0,0,.5);
}
#lang-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; border-radius: 9px; cursor: pointer;
  color: #f5f7f2; font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 8px 10px;
}
#lang-menu button { transition: background-color .15s var(--ease); }
#lang-menu button:hover { background: rgba(255, 223, 0, .14); }
#lang-menu button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
#lang-menu img { width: 22px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: -1px; }
.sw.g4 { background: var(--blue); } .sw.g6 { background: var(--orange); } .sw.z4 { background: var(--red); }
.sw.zplay { background: #b3541e; }
tr.zone-playoff td.c-pos { box-shadow: inset 4px 0 0 #b3541e; }
tr.zone-playoff { background: #faf0e2; }
tr.zone-playoff:hover { background: #f6e6d0; }
.up { color: var(--green-500); } .down { color: var(--red); }

/* ---------- rounds ---------- */
.round-nav { display: flex; gap: 6px; align-items: center; }
#round-select {
  font-family: var(--font); font-weight: 700; background: var(--green-900); color: #fff;
  border: none; border-radius: 999px; padding: 7px 12px; font-size: 14px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: filter .18s var(--ease);
}
#round-select:hover { filter: brightness(1.15); }
#round-select:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.rounds-card .btn.small { white-space: nowrap; }
.rounds-card .btn { color: var(--green-900); border-color: #c9d6c4; background: #fff; }
.rounds-card .btn:hover { border-color: var(--green-700); color: var(--green-700); }
.rounds-card .btn.ai { background: var(--green-900); border-color: var(--green-900); color: var(--yellow); }
.rounds-card .btn.ai:hover { filter: brightness(1.15); color: var(--yellow); }
.round-actions { display: flex; gap: 6px; }
.rounds-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rounds-toggle {
  font-family: var(--font); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; color: var(--green-700); border: 1.5px solid #c9d6c4; border-radius: 999px;
  padding: 5px 10px 5px 9px; font-size: 12.5px; font-weight: 700; line-height: 1.1;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.rounds-toggle:active { transform: scale(.96); }
.rounds-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
.rounds-toggle .caret { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.rounds-toggle.open .caret { transform: rotate(180deg); }
.rounds-toggle:hover { border-color: var(--green-700); }
.rounds-toggle.open { background: var(--green-100); border-color: #9cc4a0; }
.rounds-toggle:focus-visible, .round-strip .seg:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
/* faixa de progresso: um segmento clicável por rodada */
.round-strip { display: flex; gap: 2px; margin: 10px 0 2px; }
.round-strip .seg {
  flex: 1 1 0; min-width: 0; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; border-radius: 4px;
}
.round-strip .seg i { display: block; width: 100%; height: 8px; border-radius: 3px; background: #ddd5ba; transition: height .15s var(--ease), filter .15s var(--ease); }
.round-strip .seg.part i { background: linear-gradient(90deg, var(--orange) calc(var(--f) * 100%), #ddd5ba 0); }
.round-strip .seg.done i { background: var(--green-500); }
.round-strip .seg:hover i { height: 12px; filter: brightness(.92); }
.round-strip .seg.active i { height: 14px; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--green-900); }
.round-grid[hidden] { display: none; }
.round-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin: 12px 0 4px; }
.round-grid button {
  font-family: var(--font); background: #f0ebda; border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 7px 0; font-size: 13px; font-weight: 600; cursor: pointer; position: relative;
  font-variant-numeric: tabular-nums; transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease), transform .12s var(--ease);
}
.round-grid button:active { transform: scale(.96); }
.round-grid button:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.round-grid button:hover { border-color: var(--green-500); color: var(--green-700); }
.round-grid button.active { background: var(--green-900); color: #fff; font-weight: 800; border-color: var(--green-900); }
.round-grid button.done { background: var(--green-100); border-color: #9cc4a0; color: var(--green-700); }
.round-grid button.done::before { content: "✓ "; font-size: 11px; }
.round-grid button.has-pending::after {
  content: ""; position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px; border-radius: 99px; background: var(--orange);
}
.round-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 2px; }
.round-head h3 { margin: 0; white-space: nowrap; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 9px 4px; border-bottom: 1px dashed #d9d2ba;
}
.match:last-child { border-bottom: none; }
.mteam { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; }
.mteam.home { justify-content: flex-end; text-align: right; }
.mteam span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mteam.pickable {
  cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.mteam.pickable:hover { background: var(--green-100); }
.mteam.pickable:active { transform: scale(.98); }
.mteam.pickable:focus-visible { outline: 2px solid var(--green-500); outline-offset: 1px; }
.mteam.picked { background: var(--green-100); box-shadow: inset 0 0 0 1.5px var(--green-500); }
.mteam.picked span.name { color: var(--green-900); font-weight: 800; }
/* resultado oficial: mais quieto que um palpite (sem caixa verde nem anel; só o vencedor em negrito e o perdedor esmaecido) */
.match.is-official .mteam.picked { background: transparent; box-shadow: none; }
.match.is-official .mteam.picked:hover { background: var(--green-100); }
.match.is-official .mteam.pickable:not(.picked) span.name { color: #56634f; font-weight: 600; }
.match.is-official .mteam.picked span.name { color: var(--ink); font-weight: 800; }
.pick-tip { margin: 4px 0 6px; font-size: 13px; color: var(--muted); text-wrap: pretty; }
/* dica de primeira visita: mini exemplo (time = vitória, × = empate, caixas = placar) */
.first-hint {
  margin: 8px 0 6px; padding: 8px 10px 10px 12px; border-radius: 12px;
  background: var(--green-100); border: 1px solid #bcd8bd;
}
.first-hint[hidden] { display: none; }
.first-hint:not([hidden]) + .pick-tip { display: none; }
.fh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fh-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); }
.fh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; font-weight: 600; color: var(--green-900); }
.fh-steps li { display: inline-flex; align-items: center; gap: 7px; }
.fh-glyph { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; }
.fh-team { background: #fff; box-shadow: inset 0 0 0 1.5px var(--green-500); border-radius: 8px; padding: 4px 7px; }
.fh-crest { width: 12px; height: 12px; border-radius: 50%; background: var(--green-900); }
.fh-bar { width: 20px; height: 5px; border-radius: 3px; background: #9cc4a0; }
.fh-x { width: 22px; height: 22px; border-radius: 6px; background: var(--green-900); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.fh-in b {
  width: 20px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff8ea; border: 1.5px solid var(--orange); border-radius: 6px; font-size: 13px; font-weight: 800; color: var(--ink);
}
.fh-ok {
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--green-900); background: #fff; border: 1.5px solid #9cc4a0; border-radius: 999px; padding: 5px 13px;
}
.fh-ok:hover { border-color: var(--green-700); color: var(--green-700); }
.fh-ok:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.linklike {
  font-family: var(--font); background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; text-decoration: underline; padding: 2px 4px;
}
.linklike:hover { color: var(--red); }
.linklike:focus-visible { outline: 2px solid var(--green-500); outline-offset: 1px; border-radius: 4px; }
.match:not(.is-edited) .linklike { visibility: hidden; }
.match .crest { width: 34px; height: 34px; }
.match .crest img { width: 34px; height: 34px; }
.score { display: flex; align-items: center; gap: 5px; }
.score input {
  font-family: var(--font); width: 46px; text-align: center; font-size: 19px; font-weight: 800;
  padding: 6px 2px; border-radius: 10px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); caret-color: var(--green-700);
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 2px rgba(6, 61, 34, .06);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.score input:hover { border-color: #cdc6ad; }
.score input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.score input.user { border-color: var(--orange); background: #fff8ea; }
.match.is-official .score input { background: transparent; border-color: transparent; box-shadow: none; color: #3d4a3b; }
.match.is-official .score input:hover { border-color: var(--line); }
.match.is-official .score input:focus { background: #fff; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.score button.x {
  font-family: var(--font); background: #f0ebda; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); font-weight: 800; font-size: 14px; line-height: 1;
  width: 30px; height: 30px; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease), transform .12s var(--ease);
}
.score button.x:hover { border-color: var(--green-500); color: var(--green-700); }
.score button.x:active { transform: scale(.96); }
.score button.x:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.score button.x.picked { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.match.is-official .score button.x.picked { background: #e4dfca; border-color: #d3ccb0; color: #56634f; }
.mrow2 { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: center; }
.tag {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 99px; padding: 2px 9px;
}
.tag { white-space: nowrap; }
.tag.oficial { background: transparent; color: #56634f; box-shadow: inset 0 0 0 1px #d3ccb0; }
.tag.palpite { background: #f7e8c8; color: #9a5b00; }
.tag.jev { background: var(--green-900); color: var(--yellow); letter-spacing: .04em; }
.tag.aberto { background: #eee9d8; color: var(--muted); }
.rounds-foot { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-wrap: pretty; }

/* ---------- como funciona ---------- */
.faq { padding-top: 26px; }
.faq h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.025em; margin: 0 0 12px; text-wrap: balance; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(6, 61, 34, .05);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq details:hover { border-color: #d3ccb0; }
.faq details[open] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-card); }
.faq summary {
  cursor: pointer; font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 12px;
  text-wrap: balance;
}
.faq summary:focus-visible { outline: 3px solid var(--green-500); outline-offset: 4px; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--green-700); font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: #3d4a3b; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

/* ---------- footer ---------- */
.foot-in {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.foot { color: var(--muted); font-size: 13px; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
.foot p { max-width: 760px; margin: 0 0 6px; text-wrap: pretty; }
.foot-meta { flex: 1 1 320px; min-width: 0; }
.foot-meta p:last-child { margin-bottom: 0; }
.foot .to-top {
  font-family: var(--font); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0;
  background: var(--card); color: var(--green-700); border: 1.5px solid #c9d6c4; border-radius: 999px;
  padding: 7px 14px 7px 12px; font-size: 13px; font-weight: 700; line-height: 1.1;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.foot .to-top svg { width: 13px; height: 13px; }
.foot .to-top:hover { border-color: var(--green-700); background: var(--green-100); }
.foot .to-top:active { transform: scale(.96); }
.foot .to-top:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 100;
  transform: translate(-50%, 16px); opacity: 0; transition: opacity .2s, transform .2s;
  max-width: min(92vw, 460px); background: var(--green-900); color: #fff; border: 1.5px solid rgba(255,223,0,.5);
  border-radius: 14px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; text-align: center;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* sem movimento: tudo (transições, rolagem suave, contagem das chances no JS) vira troca instantânea */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .btn:active, .league-tabs a:active, .chtoggle:active, .mteam.pickable:active, .score button.x:active,
  .round-grid button:active, .rounds-toggle:active, .foot .to-top:active { transform: none; }
  .brand:hover .brand-mark { transform: none; }
}
@media print {
  .topbar::before, .topbar::after, .actions, .league-tabs, .langpick, .toast, .foot .to-top, .first-hint { display: none !important; }
  body { background: #fff; }
  .topbar { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); box-shadow: none; }
  .topbar .brand, .topbar h1, .topbar .subtitle { color: var(--ink); text-shadow: none; }
  .kicker { color: var(--green-700); }
  .card, .faq details { box-shadow: none; break-inside: avoid; }
  .layout { display: block; }
  .layout .card + .card { margin-top: 16px; }
}

@media (max-width: 640px) {
  /* tabela rola na horizontal (colunas sticky removidas: Chrome sobrepõe células sticky em tabelas) */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .mteam span.name { font-size: 13px; }
  .score input { width: 44px; font-size: 18px; padding: 9px 2px; }
  .score button.x { width: 40px; height: 44px; font-size: 16px; }
  /* evita zoom automático do iOS ao focar (<16px) e delay de double-tap */
  #round-select { font-size: 16px; }
  button, input, select { touch-action: manipulation; }
  .mteam.pickable, .score button.x { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  thead th { font-size: 10.5px; padding: 8px 5px; }
  tbody td { font-size: 13.5px; padding: 6px 5px; }
  /* modo compacto: mostra as colunas pedidas (P J V SG GP %) e esconde E D GC */
  .m-hide { display: none; }
  tbody td { font-size: 13px; padding: 5px 4px; }
  thead th { padding: 6px 4px; }
  .team-cell { gap: 6px; }
  .crest, .crest img { width: 26px; height: 26px; }
  .match .crest, .match .crest img { width: 30px; height: 30px; }
  .c-pct { min-width: 0; }
  .round-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .round-grid button { padding: 11px 0; }
  .mteam.pickable { padding: 8px 6px; margin: -8px -6px; }
  .fh-ok { min-height: 40px; }
  .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .actions .btn.primary { grid-column: 1 / -1; padding: 9px 17px; font-size: 15.5px; justify-content: center; }
  .actions .btn { padding: 11px 12px; }
  .hero { gap: 10px 28px; }
  .brandbar { gap: 8px 20px; }
  #round-select { flex: 1; }
}
/* telas bem estreitas: siglas no lugar dos nomes p/ tudo caber sem rolagem */
@media (max-width: 480px) {
  .s-hide { display: none; }
  /* ganha ~60px de tabela acima da dobra: o título, o botão e a dica da classificação já dizem o que o site faz */
  .hero .subtitle { display: none; }
  .std-head .ch-toggles { gap: 6px; }
  .chtoggle { padding: 4px 9px; gap: 5px; font-size: 12.5px; }
  .pos-num { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
  #standings .c-sub { min-width: 54px; }
  .pct-val { padding: 3px 4px; }
  .no-chance { padding-right: 4px; }
  tbody td, thead th { padding-left: 3px; padding-right: 3px; }
  .team-cell .name-full, .mteam .name-full { display: none; }
  .team-cell .name-short, .mteam .name-short { display: inline; font-weight: 800; }
}

/* ---------- desktop calmo (≥ 981px) ----------
   Seções planas sobre a página (sem cartão), tabela leve com linhas finas, respiro e largura total.
   Só vale em telas largas; o layout de celular/tablet (≤ 980px) segue como acima. */
@media (min-width: 981px) {
  :root {
    --page: #fbfaf5;
    --hair: #e7e3d3;      /* linha fina entre linhas */
    --hair-strong: #cfc9b3; /* linha sob o cabeçalho */
    --label: #6f7a68;     /* rótulos de coluna (contraste ≥ 4,5:1 no fundo da página) */
    --shade: rgba(29, 42, 28, .03); /* coluna alternada, bem fraca (estilo globo.com) */
  }
  body {
    background: var(--page);
    background-image: linear-gradient(rgba(255, 223, 0, .06), transparent 280px);
    background-repeat: no-repeat;
  }
  /* cabeçalho continua fino; textura bem mais discreta p/ não brigar com a página calma */
  .topbar::before { background: var(--grain-light); opacity: .5; }
  .topbar::after { opacity: .035; }
  .wrap {
    max-width: 1600px;
    padding-left: max(clamp(28px, 3.4vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(28px, 3.4vw, 56px), env(safe-area-inset-right));
  }

  /* layout: tabela (~2/3) | divisória fina | jogos (~1/3), tudo direto na página */
  .layout { gap: 0; padding-top: 34px; padding-bottom: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .card {
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .table-card { padding-right: clamp(24px, 2.2vw, 48px); }
  .rounds-card { border-left: 1px solid var(--hair-strong); padding-left: clamp(24px, 2.2vw, 48px); }
  .card-head h2 { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }

  /* cabeça da classificação: título grande + filtros discretos na mesma linha, dica embaixo */
  .std-head { align-items: baseline; margin-bottom: 18px; gap: 6px 14px; }
  .std-head .hint { font-size: 13px; line-height: 1.4; margin-top: 2px; }
  .ch-toggles { gap: 6px; }
  .chtoggle {
    gap: 6px; padding: 3px 10px 3px 8px; font-size: 12.5px; font-weight: 600; color: #3d4a3b;
    background: transparent; border: 1px solid var(--hair-strong);
  }
  .chtoggle:hover { background: rgba(6, 61, 34, .04); border-color: var(--green-700); }
  .chtoggle input { width: 13px; height: 13px; }
  .chtoggle svg { width: 13px; height: 13px; }

  /* tabela: colunas distribuídas em toda a largura, cabeçalho claro, linhas altas */
  .table-scroll { overflow: visible; margin: 0; padding: 0; }
  table { table-layout: fixed; }
  thead th {
    position: static; background: none; box-shadow: none; border-radius: 0 !important;
    color: var(--label); font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
    padding: 12px 6px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair-strong);
  }
  thead th:first-child, thead th:last-child { border-radius: 0; }
  thead th.c-team { text-align: left; padding-left: 4px; }
  thead th svg { width: 16px; height: 16px; opacity: .8; }
  thead th:nth-child(1) { width: 56px; }
  thead th:nth-child(n+3):nth-child(-n+10) { width: 5.3%; }
  thead th.c-sub { width: 9.5%; }
  tbody td {
    padding: 10px 6px; font-size: 15.5px; border-bottom: 0; border-top: 1px solid var(--hair);
    height: 52px;
  }
  tbody tr:first-child td { border-top: 0; }
  tbody tr:nth-child(even) { background: none; }
  tbody tr:hover { background: rgba(6, 61, 34, .035); }
  tbody tr:last-child td { border-bottom: 1px solid var(--hair-strong); }
  /* colunas alternadas (P, V, D, GC e Título) com sombra bem fraca, sem linhas verticais */
  tbody td:nth-child(3), tbody td:nth-child(5), tbody td:nth-child(7), tbody td:nth-child(9), tbody td:nth-child(11),
  thead th:nth-child(3), thead th:nth-child(5), thead th:nth-child(7), thead th:nth-child(9), thead th:nth-child(11) { background: var(--shade); }
  tbody td:nth-child(n+3) { font-weight: 400; color: #2c382b; }
  tbody td:nth-child(3) { font-weight: 800; color: var(--ink); }
  tbody .c-team { font-weight: 500; font-size: 16px; padding-left: 4px !important; overflow: hidden; }
  .team-cell { gap: 12px; min-width: 0; }
  .team-cell .name-full { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .crest, .crest img { width: 30px; height: 30px; }
  .crest img { filter: none; }
  .delta { margin-left: 4px; }

  /* posição: selo cheio, porém menor e chapado (sem gradiente/brilho) — a zona segue legível de relance */
  .pos-num {
    width: 26px; height: 26px; border-radius: 7px; font-size: 13px; font-weight: 700;
    background: #4f5d4c; box-shadow: none;
  }
  tr.zone-g4 .pos-num { background: var(--blue); }
  tr.zone-g6 .pos-num { background: #c46d05; }
  tr.zone-playoff .pos-num { background: #b3541e; }
  tr.zone-z4 .pos-num { background: var(--red); }

  /* zonas: cada linha carrega a cor da zona (selo + marcador de 4px + véu leve); o rebaixamento é o mais marcado, com filete vermelho no limite */
    tr.zone-g4 td.c-pos { box-shadow: inset 4px 0 0 var(--blue); }
  tr.zone-g6 td.c-pos { box-shadow: inset 4px 0 0 #c46d05; }
  tr.zone-playoff td.c-pos { box-shadow: inset 4px 0 0 #b3541e; }
  tr.zone-z4 td.c-pos { box-shadow: inset 4px 0 0 var(--red); }
  tr.zone-g4, tr.zone-g4:nth-child(even) { background: rgba(29, 111, 209, .05); }
  tr.zone-g4:hover { background: rgba(29, 111, 209, .09); }
  tr.zone-g6, tr.zone-g6:nth-child(even) { background: rgba(217, 122, 6, .06); }
  tr.zone-g6:hover { background: rgba(217, 122, 6, .1); }
  tr.zone-z4, tr.zone-z4:nth-child(even) { background: rgba(207, 46, 46, .07); }
  tr.zone-z4:hover { background: rgba(207, 46, 46, .11); }
  tr.zone-playoff, tr.zone-playoff:nth-child(even) { background: rgba(179, 84, 30, .06); }
  tr.zone-playoff:hover { background: rgba(179, 84, 30, .1); }
  tr.z4-first td { border-top: 1px solid rgba(207, 46, 46, .6); padding-top: 10px; }

  /* chances: números com tinta bem mais calma, sem filete; peso e cor sobem com o valor */
  #standings .c-sub { min-width: 0; text-align: center; }
  .pct-val { display: inline-block; min-width: 3.4em; padding: 4px 6px; border-radius: 7px; font-weight: 500; }
  .pct-val::after { display: none; }
  #standings .c-sub[data-ch="title"] .pct-val { --tint: rgb(184 134 11 / calc(.04 + var(--w) * .17)); color: #7a5c06; }
  #standings .c-sub[data-ch="rel"] .pct-val { --tint: rgb(207 46 46 / calc(.03 + var(--w) * .14)); color: #a02121; }
  #standings .pct-val.lv-min { color: var(--label); font-weight: 400; }
  #standings .pct-val.lv-lo { font-weight: 500; }
  #standings .pct-val.lv-mid { font-weight: 700; }
  #standings .pct-val.lv-hi { font-weight: 800; }
  #standings .c-sub[data-ch="title"] .pct-val.lv-hi { color: #5e4500; }
  #standings .c-sub[data-ch="rel"] .pct-val.lv-hi { color: #8a1515; }
  .no-chance { color: #b9b39c; padding-right: 0; }
  .legend { margin-top: 18px; font-size: 12.5px; gap: 6px 20px; }
  .sw { border-radius: 50%; width: 10px; height: 10px; box-shadow: none; }
  .sw.g6 { background: #c46d05; }

  /* jogos: heading em negrito, seletor de rodada entre filetes, partidas centradas com mais ar */
  .rounds-card .card-head.row { flex-direction: column; align-items: stretch; gap: 0; }
  .rounds-title { justify-content: space-between; flex-wrap: nowrap; margin-bottom: 18px; }
  .rounds-toggle { border: 0; background: none; padding: 4px 6px; color: var(--green-700); font-weight: 600; font-size: 12.5px; border-radius: 8px; }
  .rounds-toggle:hover, .rounds-toggle.open { background: rgba(6, 61, 34, .06); border: 0; }
  .round-nav { justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair-strong); }
  .round-nav .btn.icon { width: 36px; height: 36px; border: 0; background: transparent; color: var(--green-500); }
  .round-nav .btn.icon svg { width: 20px; height: 20px; }
  .round-nav .btn.icon:hover { background: rgba(6, 61, 34, .06); color: var(--green-700); }
  #round-select {
    flex: 1; text-align: center; text-align-last: center; text-transform: uppercase; letter-spacing: .04em;
    background: none; color: var(--ink); font-size: 15px; font-weight: 800; padding: 8px 12px; border-radius: 8px;
    appearance: none; -webkit-appearance: none;
  }
  #round-select:hover { filter: none; background: rgba(6, 61, 34, .05); }
  .round-strip { margin: 14px 0 0; }
  .round-strip .seg { height: 22px; }
  .round-strip .seg i { height: 5px; background: #e2dcc6; }
  .round-strip .seg.done i { background: #57b377; }
  .round-strip .seg.part i { background: linear-gradient(90deg, #d9962b calc(var(--f) * 100%), #e2dcc6 0); }
  .round-strip .seg:hover i { height: 8px; }
  .round-strip .seg.active i { height: 9px; box-shadow: 0 0 0 2px var(--page), 0 0 0 3px var(--green-900); }
  /* o seletor já diz a rodada: o título repetido fica só p/ leitor de tela (é o nome acessível da seção) */
  .round-head { margin: 14px 0 0; justify-content: flex-end; }
  .round-head h3 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .rounds-card .btn.small { background: transparent; border: 1px solid var(--hair-strong); font-weight: 600; font-size: 12.5px; padding: 6px 12px; color: #3d4a3b; }
  .rounds-card .btn.small:hover { border-color: var(--green-700); color: var(--green-700); }
  .rounds-card .btn.ai { background: transparent; border-color: var(--green-700); color: var(--green-700); font-weight: 700; }
  .rounds-card .btn.ai:hover { filter: none; background: rgba(6, 61, 34, .05); color: var(--green-900); }
  .first-hint { margin: 14px 0 4px; background: rgba(0, 156, 59, .06); border: 0; padding: 10px 14px 12px; }
  .pick-tip { margin: 12px 0 0; text-align: center; font-size: 12.5px; }
  .match { padding: 16px 4px 14px; border-bottom: 1px solid var(--hair); gap: 8px 10px; }
  .match:first-child { padding-top: 14px; }
  .match:last-child { border-bottom: 0; }
  .mteam { font-weight: 500; font-size: 14.5px; gap: 8px; }
  .mteam.pickable { padding: 6px 8px; margin: -6px -8px; }
  .mteam.picked span.name { font-weight: 700; }
  .match.is-official .mteam.picked span.name { font-weight: 700; }
  .match.is-official .mteam.pickable:not(.picked) span.name { font-weight: 400; }
  .match .crest, .match .crest img { width: 30px; height: 30px; }
  .score { gap: 4px; }
  .score input { width: 40px; font-size: 18px; font-weight: 700; border-width: 1px; border-radius: 9px; padding: 6px 2px; }
  .score button.x { width: 28px; height: 28px; font-size: 13px; background: transparent; border-color: var(--hair); }
  .mrow2 { gap: 6px; margin-top: -2px; }
  .tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 1px 8px; }
  .tag.oficial { box-shadow: none; color: var(--label); padding: 0; }
  .rounds-foot { margin-top: 20px; }
  /* 981–1119px: duas colunas ficariam apertadas; empilha (tabela inteira, jogos embaixo) mantendo o visual plano */
  @media (max-width: 1119px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .table-card { padding-right: 0; }
    .rounds-card { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair-strong); margin-top: 40px; padding-top: 32px; }
  }
  /* telas muito largas: container um pouco maior (sem esticar a tabela a ponto de perder o olho) */
  @media (min-width: 2200px) { .wrap { max-width: 1840px; } }
  /* "Como funciona": mesma calma — sem sombra, só filete */
  .faq details, .faq details[open] { background: transparent; box-shadow: none; border-color: var(--hair-strong); }
  .faq details:hover { border-color: var(--green-700); }
}