:root{
  --yellow:#FFD200; --blue:#0033A0; --red:#CE1126;
  --bg:#0b1622; --panel:#111f31; --panel2:#16273d; --line:#243a57;
  --txt:#eaf2fb; --dim:#9fb3cc; --accent:#33c5ff;
  --ok:#2ee06a; --bad:#ff5b5b; --warn:#ffc233;
  --maxw:760px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.45;
  overflow-x:hidden; -webkit-text-size-adjust:100%;
}
.topbar{position:sticky; top:0; z-index:20; background:linear-gradient(135deg,#0b2a4a,#05101f); border-bottom:3px solid var(--accent); padding-bottom:8px}
.tricolor-bar{height:6px; background:linear-gradient(to right,var(--yellow) 0 50%,var(--blue) 50% 75%,var(--red) 75% 100%)}
.brand{display:flex; align-items:center; gap:12px; padding:12px 14px 6px; max-width:var(--maxw); margin:0 auto}
.brand-logo{flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--yellow),var(--red)); color:#0b1622; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:18px}
.brand-title{margin:0; font-size:22px; font-weight:800; letter-spacing:.3px}
.brand-sub{margin:2px 0 0; font-size:12.5px; color:var(--dim)}
.brand-updated{margin:3px 0 0; font-size:11px; color:var(--accent)}
.brand-trust{margin:4px 0 0; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; display:inline-block}
.brand-trust.live{background:rgba(255,194,51,.18); color:var(--warn); border:1px solid var(--warn)}
.brand-trust.mock{background:rgba(255,91,91,.18); color:var(--bad); border:1px solid var(--bad)}
.brand-trust.verified{background:rgba(46,224,106,.15); color:var(--ok); border:1px solid var(--ok)}
.tabs{display:flex; gap:6px; overflow-x:auto; padding:4px 14px; max-width:var(--maxw); margin:0 auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--txt); background:var(--panel2); border:1px solid var(--line); padding:7px 12px; border-radius:999px; text-decoration:none}
.tabs a:active{background:var(--accent); color:#04121f}
.actions{display:flex; gap:8px; padding:8px 14px 0; max-width:var(--maxw); margin:0 auto}
.btn{flex:1; border:none; border-radius:12px; padding:14px 12px; font-size:15px; font-weight:800; cursor:pointer; min-height:48px}
.btn-primary{background:var(--accent); color:#04121f}
.btn-ghost{background:var(--panel2); color:var(--txt); border:1px solid var(--line)}
.btn:active{filter:brightness(1.15)}

main{max-width:var(--maxw); margin:0 auto; padding:12px 12px 24px}
.banner{display:none; margin:8px 0; padding:12px 14px; border-radius:12px; font-weight:700; font-size:14px}
.banner.show{display:block}
.banner.pending{background:rgba(255,194,51,.12); color:var(--warn); border:1px solid var(--warn)}
.banner.error{background:rgba(255,91,91,.12); color:var(--bad); border:1px solid var(--bad)}
.banner.loading{background:rgba(51,197,255,.12); color:var(--accent); border:1px solid var(--accent)}
.banner.stale{background:rgba(255,194,51,.1); color:var(--warn); border:1px solid var(--warn)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0}
.card.highlight{border-color:var(--yellow)}
.card.subtle{background:var(--panel2)}
.card h2{margin:0 0 10px; font-size:16px; color:var(--accent); text-transform:uppercase; letter-spacing:.6px; border-left:4px solid var(--accent); padding-left:9px}
.card.highlight h2{color:var(--yellow); border-left-color:var(--yellow)}
.section-body{font-size:14px}
.empty{color:var(--dim); font-size:13.5px; padding:6px 2px}

/* match cards */
.match{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--panel2)}
.match .teams{flex:1; min-width:0}
.match .teams b{display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis}
.match .meta{font-size:11.5px; color:var(--dim); margin-top:2px}
.match .score{flex:0 0 auto; font-size:20px; font-weight:800; letter-spacing:1px}
.tag{display:inline-block; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:6px}
.tag.live{background:var(--red); color:#fff}
.tag.final{background:var(--line); color:var(--dim)}
.consequence{font-size:12.5px; color:var(--dim); margin:4px 0 0; padding-left:2px}
.scorers-line{font-size:12px; color:var(--accent); margin-top:4px}
.live-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--red); animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* tables: responsive, no horizontal scroll - compact columns + scroll wrapper fallback */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:0}
table.tbl th,table.tbl td{padding:7px 5px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl th{color:var(--dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px}
table.tbl td.team{text-align:left; font-weight:700; white-space:normal}
table.tbl tr.col-row{background:rgba(255,210,0,.13)}
table.tbl tr.col-row td.team{color:var(--yellow)}
.pos{display:inline-block; width:20px; color:var(--dim)}

/* scorers + qualification */
.scorer{display:flex; justify-content:space-between; gap:8px; padding:8px 6px; border-bottom:1px solid var(--line); font-size:13.5px}
.scorer .who{font-weight:700}
.qual{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 8px; border:1px solid var(--line); border-radius:10px; margin:6px 0; background:var(--panel2)}
.badge{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px}
.badge.q{background:rgba(46,224,106,.15); color:var(--ok); border:1px solid var(--ok)}
.badge.e{background:rgba(255,91,91,.15); color:var(--bad); border:1px solid var(--bad)}
.badge.alive{background:rgba(51,197,255,.15); color:var(--accent); border:1px solid var(--accent)}
.badge.pend{background:rgba(159,179,204,.15); color:var(--dim); border:1px solid var(--dim)}

/* fixtures */
.fixture{padding:10px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--panel2)}
.fixture .ft{font-weight:800; font-size:15px}
.fixture .times{font-size:12px; color:var(--dim); margin-top:3px}
.fixture .why{font-size:12.5px; color:var(--accent); margin-top:4px}

.footer{max-width:var(--maxw); margin:0 auto; padding:18px 14px 28px; text-align:center; border-top:1px solid var(--line)}
.footer p{margin:4px 0}
#footerText{font-weight:800}
.footer-note{font-size:11.5px; color:var(--dim)}

.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); background:var(--ok); color:#04220f; font-weight:800; padding:12px 20px; border-radius:999px; opacity:0; pointer-events:none; transition:all .25s; z-index:50; font-size:14px}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (min-width:560px){
  .brand-title{font-size:26px}
  table.tbl th,table.tbl td{padding:8px 8px; font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){ .live-dot{animation:none} .toast{transition:none} }

/* ---- v2 confidence-aware labels (multi-source web data) ---- */
.match .conf{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:10px;line-height:1.4;border:1px solid var(--line)}
.match .conf.c-ok{background:rgba(46,224,106,.12);color:var(--ok);border-color:rgba(46,224,106,.4)}
.match .conf.c-live{background:rgba(51,197,255,.12);color:var(--accent);border-color:rgba(51,197,255,.4)}
.match .conf.c-pend{background:rgba(255,194,51,.12);color:var(--warn);border-color:rgba(255,194,51,.4)}
.match .conf.c-conflict{background:rgba(255,91,91,.14);color:var(--bad);border-color:rgba(255,91,91,.45)}
.match .conf.c-stale{background:rgba(159,179,204,.12);color:var(--dim);border-color:var(--line)}
.match .conf-msg{margin-top:4px;font-size:12px;color:var(--warn);font-weight:600}
.match .attr{margin-top:4px;font-size:10.5px;color:var(--dim);opacity:.85}

/* ---- provisional (single-source) standings table ---- */
.prov-table{margin:0 0 6px;font-size:11.5px;font-weight:700;color:var(--warn);
  background:rgba(255,194,51,.10);border:1px solid rgba(255,194,51,.35);border-radius:8px;padding:5px 9px}
table.tbl.provisional{outline:1px dashed rgba(255,194,51,.35)}

/* ---- live-match indicators on group tables ---- */
.live-badge{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:var(--bad);border-radius:6px;padding:1px 5px;vertical-align:middle;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}
tr[data-live="1"] .team{font-weight:700}
.prov-table.live{color:var(--bad);background:rgba(255,91,91,.10);border-color:rgba(255,91,91,.4)}
.live-line{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--bad);margin:2px 0 6px}
.live-dot-inline{width:8px;height:8px;border-radius:50%;background:var(--bad);flex:0 0 auto;animation:livePulse 1.6s ease-in-out infinite}