:root{
  --bg:#0b1020; --bg2:#121a33; --card:#15203f; --card2:#1b274a;
  --line:#26315a; --ink:#eef2ff; --muted:#9aa6c9; --faint:#818bb0;
  --accent:#00d27a; --accent2:#3b82f6; --pt:#e63946; --gold:#f4c542;
  --r:14px; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%, #1a2547 0%, var(--bg) 55%) fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; padding-bottom:60px;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 22px; background:rgba(11,16,32,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px; margin-right:auto}
.trophy{font-size:34px; filter:drop-shadow(0 2px 6px rgba(244,197,66,.5))}
.brand h1{margin:0; font-size:22px; letter-spacing:.3px}
.sub{margin:2px 0 0; color:var(--muted); font-size:12.5px}

/* spoiler toggle */
.spoiler-toggle{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-size:14px; font-weight:600}
.spoiler-toggle input{display:none}
.track{width:46px; height:26px; border-radius:20px; background:#2a3358; position:relative; transition:.2s; flex:none}
.thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s}
.spoiler-toggle input:checked + .track{background:var(--accent)}
.spoiler-toggle input:checked + .track .thumb{left:23px}
.spoiler-label{color:var(--muted)}
.spoiler-toggle input:checked ~ .spoiler-label{color:var(--accent)}

/* ---------- Filters ---------- */
/* menu (burger) — troca entre Jogos e Estatísticas */
.burger{
  flex:none; width:40px; height:40px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:18px; line-height:1; transition:.15s;
}
.burger:hover{border-color:var(--accent2); color:#fff}
.burger[aria-expanded="true"]{background:var(--accent2); border-color:var(--accent2); color:#fff}
.menu{
  position:absolute; top:calc(100% + 6px); right:14px; z-index:30;
  display:flex; flex-direction:column; gap:4px; min-width:200px; padding:7px;
  background:var(--card2); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
.menu[hidden]{display:none}
.menu-item{
  text-align:left; padding:10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--muted);
  font-size:14px; font-weight:700; transition:.12s;
}
.menu-item:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.menu-item.on{background:var(--accent2); color:#fff}

.filters{
  position:sticky; top:var(--topbar-h, 73px); z-index:15;
  padding:14px 22px; background:rgba(11,16,32,.8); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px;
}
.search-row{display:flex; gap:8px; align-items:stretch}
#search{
  flex:1; min-width:0; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); font-size:15px; outline:none;
}
/* botão para abrir/fechar os filtros (a pesquisa fica sempre visível) */
.filters-toggle{
  flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px;
  padding:0 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:13.5px; font-weight:700; cursor:pointer; transition:.15s;
}
.filters-toggle:hover{color:var(--ink); border-color:var(--accent2)}
.filters-toggle .ft-caret{font-size:11px; transition:transform .2s}
.filters.panel-open .filters-toggle{color:var(--ink); border-color:var(--accent2)}
.filters.panel-open .filters-toggle .ft-caret{transform:rotate(180deg)}
/* ponto de aviso quando há um filtro ativo e o painel está fechado */
.filters-toggle.has-active{border-color:var(--accent); color:var(--accent)}
.filters-toggle.has-active::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:1px;
}
.filters.panel-open .filters-toggle.has-active::after{display:none}

/* painel colapsável */
.filter-panel{display:flex; flex-direction:column; gap:10px}
.filters:not(.panel-open) .filter-panel{display:none}
#search:focus{border-color:var(--accent2)}
/* visible keyboard focus */
.chip:focus-visible, .qbtn:focus-visible, #search:focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px;
}
.spoiler-toggle input:focus-visible + .track{
  outline:2px solid var(--accent2); outline-offset:3px;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:inline-flex; align-items:center; min-height:40px;
  padding:6px 14px; border-radius:20px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:12.5px; cursor:pointer; transition:.15s; font-weight:600;
}
.chip:hover{border-color:var(--accent2); color:var(--ink)}
.chip.on{background:var(--accent2); border-color:var(--accent2); color:#fff}
.quick{display:flex; gap:8px; flex-wrap:wrap}
.qbtn{
  display:inline-flex; align-items:center; min-height:44px;
  padding:8px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card);
  color:var(--muted); font-size:13px; cursor:pointer; font-weight:600; transition:.15s;
}
.qbtn:hover{color:var(--ink); border-color:var(--accent2)}
.qbtn.on{background:var(--accent); border-color:var(--accent); color:#05210f}

/* ---------- Schedule ---------- */
main{max-width:860px; margin:0 auto; padding:18px 16px 0}
.daygroup{margin-bottom:26px}
.dayhead{
  display:flex; align-items:center; gap:10px; margin:0 -4px 12px; padding:9px 4px;
  position:sticky; top:var(--stick, 188px); z-index:5; background:var(--bg);
}
.dayhead h2{margin:0; font-size:15px; color:var(--gold); text-transform:capitalize}
.dayhead .count{color:var(--faint); font-size:12px; font-weight:600}
.dayhead::after{content:""; flex:1; height:1px; background:var(--line)}

.match{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden;
  box-shadow:var(--shadow); transition:border-color .15s;
}
.match.pt{border-color:rgba(230,57,70,.55); box-shadow:0 0 0 1px rgba(230,57,70,.25), var(--shadow)}
.match.final-row{border-color:rgba(244,197,66,.6)}
.match-head{display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer}
.match-head:hover{background:rgba(255,255,255,.02)}

.mtime{flex:none; width:60px; text-align:center}
.mtime .hh{font-size:18px; font-weight:700; letter-spacing:.5px}
.mtime .tag{display:block; font-size:10px; color:var(--faint); margin-top:1px}

.teams{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0}
.team{display:flex; align-items:center; gap:9px}
.team .fl{font-size:20px; line-height:1; flex:none}
.team .nm{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.team .sc{margin-left:auto; font-size:17px; font-weight:800; min-width:20px; text-align:right; color:var(--ink)}
.team.win .nm{color:#fff}
.team.lose .nm,.team.lose .fl{opacity:.62}
.schidden{color:var(--faint); font-weight:700}

.meta{flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; max-width:200px}
.venue{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px}
.channels{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.ch{font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px; letter-spacing:.3px; white-space:nowrap}
.ch-sporttv{background:#0a3d2c; color:#3ff0a8}
.ch-rtp{background:#1d3a6b; color:#9cc2ff}
.ch-sic{background:#5a1d1d; color:#ff9d9d}
.ch-tvi{background:#4a2a5e; color:#e0aaff}
.ch-yt{background:#5a1414; color:#ff8a8a}
.ch-other{background:#2a3358; color:#aab4d8}

.expand{font-size:13px; color:var(--faint); flex:none; transition:transform .2s; margin-left:2px}
.match.open .expand{transform:rotate(180deg)}

/* details */
.details{display:none; padding:0 15px 16px; border-top:1px solid var(--line); margin-top:2px}
.match.open .details{display:block}
.det-empty{color:var(--faint); font-size:13px; padding:14px 0; text-align:center; font-style:italic}
.demo-flag{background:rgba(244,197,66,.14); border:1px solid rgba(244,197,66,.4); color:var(--gold);
  font-size:11.5px; padding:6px 10px; border-radius:8px; margin:13px 0; text-align:center}
.det-section{margin-top:14px}
.det-section h4{margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--accent2)}
.goal-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.goal-list li{font-size:13.5px; display:flex; gap:8px; align-items:center}
.goal-list .min{color:var(--gold); font-weight:700; font-size:12px; min-width:34px}
/* golo anulado (VAR): bola vermelha + nome rasurado + etiqueta */
.goal-list li.disallowed strong{color:var(--faint); text-decoration:line-through}
.goal-list li.disallowed .ball-off{filter:grayscale(1) sepia(1) saturate(7) hue-rotate(-25deg) brightness(.95)}
.goal-list .anulado{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--pt); border:1px solid var(--pt); border-radius:5px; padding:0 5px; line-height:1.5}
/* link para o resumo (LiveModeTV / YouTube) */
.highlight-link{display:inline-flex; align-items:center; gap:7px; margin-top:11px; font-size:13px; font-weight:700; text-decoration:none;
  color:#ff8a8a; background:rgba(230,57,70,.12); border:1px solid rgba(230,57,70,.4); padding:6px 12px; border-radius:8px}
.highlight-link:hover{color:#fff; background:rgba(230,57,70,.22); border-color:var(--pt)}
.highlight-link .hl-src{font-weight:600; font-size:11px; color:var(--faint)}
/* live (jogo a decorrer) */
.live-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.live-status{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.live-phase{font-size:12px; font-weight:600; color:var(--muted); text-transform:capitalize}
.live-pill{background:rgba(230,57,70,.16); color:#ff8a8a; border:1px solid rgba(230,57,70,.4);
  padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap}

/* onzes + substituições: uma coluna por equipa (casa | fora) */
.teamcols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
/* cabeçalho da coluna: nome em cima, tática sempre por baixo (alinha as colunas) */
.teamcol h5{margin:0 0 7px; font-size:13px; display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.teamcol h5 .team-name{display:flex; gap:6px; align-items:center}
.teamcol h5 .tn{font-weight:700}
.teamcol .form{font-size:11px; color:var(--faint); font-weight:700; border:1px solid var(--line); padding:1px 6px; border-radius:5px}
.xi-list{list-style:none; margin:0; padding-left:0; font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:2px}
.xi-list li{display:flex; align-items:baseline; gap:7px}
.xi-num{flex:none; min-width:18px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--faint)}
.xi-name{min-width:0}
.team-subs{margin-top:11px}
.team-subs h6{margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); font-weight:700}
.team-subs .sub{display:flex; gap:8px; align-items:flex-start; font-size:12px; margin-bottom:6px}
.team-subs .sub .min{color:var(--accent); font-weight:700; min-width:26px}
.team-subs .sub .io{display:flex; flex-direction:column; gap:1px; min-width:0}
.team-subs .sub .on{color:#9be6c0}
.team-subs .sub .off{color:#ff9d9d}

.empty-state{text-align:center; color:var(--faint); padding:60px 20px; font-size:15px}

/* ---------- Estatísticas ---------- */
.stats-view{max-width:860px; margin:0 auto; padding:18px 16px 0}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.stat-card h3{margin:0 0 12px; font-size:14px; letter-spacing:.3px}
.stat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.stat-list li{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line)}
.stat-list li:first-child{border-top:0}
.stat-list .rk{flex:none; width:22px; text-align:center; font-weight:700; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.stat-list .pl{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.stat-list .pl-name{font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat-list .pl-team{font-size:11px; color:var(--faint)}
.stat-list .val{flex:none; font-size:15px; color:var(--gold); display:flex; gap:5px; align-items:center}
.stat-list .val strong{font-weight:800}
.stat-list .cd{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:4px; font-size:12px; font-weight:800; color:#1a1205}
.stat-list .cd.yel{background:var(--gold)}
.stat-list .cd.red{background:var(--pt); color:#fff}
.stat-list li:nth-child(1) .rk{color:var(--gold)}

/* ---------- Classificação do grupo (no detalhe) ---------- */
.grp-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.grp-table{width:100%; border-collapse:collapse; font-size:12.5px}
.grp-table th{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--faint);
  padding:5px 6px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
.grp-table td{padding:7px 6px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(38,49,90,.5); white-space:nowrap}
.grp-table th.tm, .grp-table td.tm{text-align:left}
.grp-table td.tm{color:var(--ink)}
.grp-table td.tm span{font-weight:600}
.grp-table td.pos{color:var(--faint); font-weight:700; width:20px}
.grp-table td.pts{font-weight:800; color:var(--ink)}
.grp-table tr.qual td.pos{color:var(--accent)}
.grp-table tr.here td{background:rgba(59,130,246,.13)}
.grp-table tr.here td.tm span{color:var(--ink); font-weight:800}

/* ---------- Footer ---------- */
.foot{max-width:860px; margin:30px auto 0; padding:18px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
.foot .ch{display:inline-block; vertical-align:middle}
.last-sync{margin:0 0 12px; font-size:12.5px; font-weight:600; color:var(--accent)}
.tiny{font-size:11.5px; color:var(--faint); margin-top:10px}

@media (max-width:620px){
  /* stack the card: time + teams + chevron on top, venue/channels full-width below */
  .match-head{flex-wrap:wrap; row-gap:9px}
  .mtime{order:1}
  .teams{order:2}
  .expand{order:3}
  .meta{
    order:4; flex-basis:100%; max-width:none;
    flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:flex-start; text-align:left; gap:6px 10px;
    padding-left:72px;            /* align under team names (time col 60px + gap 12px) */
  }
  .venue{max-width:none; white-space:normal}
  .channels{justify-content:flex-start}
  .team .nm{font-size:14px; white-space:normal}   /* names wrap, never truncate */
  /* onzes mantêm 2 colunas (casa | fora) mesmo no telemóvel; nomes podem partir */
  .teamcols{gap:10px}
  .teamcol .xi-list li{white-space:normal}
  main{padding-top:10px}
}