/* Fontes locais (latin), baixadas do Google Fonts uma vez: sem dependência externa nem rastreamento. */
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  --bg: #e9ece6; --surface: #fff; --ink: #16211b; --muted: #6b7570; --line: #d5dad4;
  --sim: #b5760a; --sim-bg: #fff4dd;
  --lib: #1c4fd6; --pre: #3fa9dc; --sula: #2e8b57; --z4: #d1343a;
  --focus: #16211b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 Barlow, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, .num, .score, button.res, .round-strip button { font-family: 'Barlow Condensed', Barlow, sans-serif; }
header { padding: 20px 16px 8px; max-width: 1200px; margin: 0 auto; }
h1 { margin: 0; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }
h1 span { color: var(--muted); font-weight: 500; }
.status { margin: 6px 0 0; color: var(--muted); }
.status.error { color: var(--z4); }

.controls { max-width: 1200px; margin: 12px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 28px 20px; align-items: center; }
.controls + .controls { margin-top: 36px; }
.controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.controls input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.seg label { padding: 5px 12px; gap: 0; }
.seg label:has(input:checked) { background: var(--ink); color: #fff; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.controls button { font: inherit; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; cursor: pointer; color: var(--ink); }
.controls button:hover { border-color: var(--ink); }
.mode { position: relative; }
.hint { position: absolute; top: 100%; left: 0; margin-top: 4px; white-space: nowrap; color: var(--muted); font-size: 13px; }

main { max-width: 1200px; margin: 16px auto 24px; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
section { background: var(--surface); border-radius: 10px; box-shadow: 0 1px 0 var(--line); }

.round-strip { display: flex; gap: 4px; overflow-x: auto; padding: 12px 12px 8px; scrollbar-width: thin; }
.round-strip button { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 6px; background: none; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; position: relative; }
.round-strip button.done { color: #c9cfca; }
.round-strip button.cur { border-color: var(--ink); color: var(--ink); }
.round-strip button.sim::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--sim); }
.round-strip button.full::after { background: var(--sula); }
.round-strip button:hover { background: var(--bg); }
h2 { margin: 0; padding: 8px 16px 4px; font-size: 22px; font-weight: 600; }
h2 small { font-weight: 500; color: var(--muted); font-size: 15px; font-family: Barlow, sans-serif; margin-left: 8px; }

.games { list-style: none; margin: 0; padding: 4px 8px 12px; }
.game { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 8px; border-top: 1px solid var(--line); }
.game:first-child { border-top: 0; }
.game .team { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.game .team.away { flex-direction: row-reverse; text-align: right; }
.game .team img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.game .team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700; }
.score .x { color: var(--muted); font-size: 16px; font-weight: 500; }
.score input { width: 44px; height: 42px; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--sim-bg); color: var(--sim); -moz-appearance: textfield; }
.score input::-webkit-inner-spin-button, .score input::-webkit-outer-spin-button { -webkit-appearance: none; }
.score input:placeholder-shown { background: #fff; }
.score input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.score .final { width: 44px; text-align: center; }
.res-group { display: flex; gap: 4px; }
button.res { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 16px; font-weight: 600; cursor: pointer; color: var(--muted); }
button.res.on { background: var(--sim-bg); border-color: var(--sim); color: var(--sim); }
button.res:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.game .meta { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: -4px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 6px; text-align: right; white-space: nowrap; }
th { font-weight: 500; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
th[data-k] { cursor: pointer; user-select: none; }
th[data-k]:hover, th.sorted { color: var(--ink); }
th.sorted::after { content: ' ▾'; }
th.sorted.asc::after { content: ' ▴'; }
td { border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.pos { text-align: left; padding-left: 0; width: 44px; }
td.pos b { display: inline-block; width: 4px; height: 20px; vertical-align: middle; margin-right: 8px; border-radius: 2px; background: transparent; }
td.team { text-align: left; font-weight: 500; }
td.team img { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; object-fit: contain; }
td.P { font-weight: 700; font-size: 17px; font-family: 'Barlow Condensed', sans-serif; }
td.delta { width: 28px; text-align: center; font-size: 12px; }
.up { color: var(--sula); } .down { color: var(--z4); }
tr.up5 td { background: #f0f7f2; } tr.down5 td { background: #fcf1f1; }
tr.up7 td { background: #d6ecdf; } tr.down7 td { background: #f9dada; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 14px; color: var(--muted); font-size: 13px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
#table-section[hidden] { display: none; }
.tables { padding: 0 16px; }
.tables > div + div { margin-top: 16px; }
.tables .empty { color: var(--muted); padding: 16px; }
.tables.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.tables.side > div + div { margin-top: 0; }
.tables.side .hide, .tables.side .both-hide { display: none; }
.tables.side th, .tables.side td { padding: 7px 4px; }
.tables.side h2 small { display: block; margin: 0; }
main:has(.tables.side) { grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); }
#fixtures[hidden] { display: none; }
main:has(#fixtures[hidden]) { grid-template-columns: minmax(0, 1fr); }
main:has(#table-section[hidden]) { grid-template-columns: minmax(0, 1fr); }
main:has(#table-section[hidden]) .games { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 32px; padding: 4px 16px 12px; }
main:has(#table-section[hidden]) .game:nth-child(6) { border-top: 0; }
@media (max-width: 860px) { main { grid-template-columns: minmax(0, 1fr); } main:has(#table-section[hidden]) .games { display: block; } main:has(#table-section[hidden]) .game:nth-child(6) { border-top: 1px solid var(--line); } }
@media (max-width: 1100px) { .tables.both { grid-template-columns: 1fr; } }
.controls label:has(input:disabled) { color: var(--muted); cursor: default; }
dialog { border: 0; border-radius: 10px; padding: 20px 24px; max-width: 360px; color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(22,33,27,.45); }
dialog h2 { padding: 0; margin-bottom: 8px; }
dialog p { margin: 0 0 16px; }
dialog .actions { display: flex; gap: 8px; justify-content: flex-end; }
dialog button { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; background: #fff; cursor: pointer; color: var(--ink); }
dialog button.danger { background: var(--z4); border-color: var(--z4); color: #fff; }
@media (max-width: 480px) { th.hide, td.hide { display: none; } h1 { font-size: 32px; } .tables { padding: 0; } }
@media (prefers-reduced-motion: no-preference) { button.res, .score input { transition: background .12s, border-color .12s; } }
.leagues { display: flex; gap: 4px; margin-bottom: 10px; }
.leagues a { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; }
.leagues a:hover { border-color: var(--ink); color: var(--ink); }
.leagues a.cur { background: var(--ink); border-color: var(--ink); color: #fff; }
footer { max-width: 1200px; margin: 0 auto 40px; padding: 0 16px; color: var(--muted); font-size: 13px; text-align: center; }
footer a { color: inherit; }