/* worldcuptvguide.co.uk — mobile-first, no framework */
:root{
  --bg:#12121f; --bg2:#1a1a2e; --card:#1f1f33; --line:#2e2e48;
  --ink:#f2f2f7; --muted:#a6a6c2; --accent:#37e0a0; --accent2:#5b8cff;
  --bbc:#c2185b; --itv:#00a878; --tbc:#5a5a78;
  --radius:12px; --wrap:880px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);
  line-height:1.55;font-size:17px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:1.4em 0 .5em}
img{max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* header */
.site-header{background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;flex-direction:column;gap:6px;padding-top:10px;padding-bottom:10px}
.brand{color:var(--ink);font-size:1.15rem;font-weight:600}
.brand:hover{text-decoration:none}
.brand strong{color:var(--accent)}
.brand__ball{margin-right:2px}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.92rem}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--ink)}
@media(min-width:680px){
  .site-header .wrap{flex-direction:row;align-items:center;justify-content:space-between}
}

/* text blocks */
main{padding:18px 0 40px}
.page-title{font-size:1.55rem;margin-top:.2em}
.page-title__flag{font-size:1.4em;vertical-align:-2px}
.lede{color:var(--muted);font-size:1.02rem;margin-top:0}
.crumbs{font-size:.85rem;color:var(--muted);margin:.2em 0}
.crumbs a{color:var(--muted)}
.note{color:var(--muted);font-size:.9rem}

/* hero */
.hero{background:linear-gradient(135deg,#23234a,#1a1a2e);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;text-align:center;margin:16px 0}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  color:var(--accent);margin:0 0 6px}
.hero__match{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  font-size:1.25rem;font-weight:600;color:var(--ink)}
.hero__match:hover{text-decoration:none}
.hero__v{color:var(--muted);font-weight:400}
.hero__meta{margin:8px 0 4px;color:var(--muted);font-size:.95rem}
.countdown{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600;margin:6px 0 0}

/* buttons / chips */
.btn{display:inline-block;background:var(--card);border:1px solid var(--line);
  color:var(--ink);padding:9px 14px;border-radius:999px;font-size:.9rem;font-weight:500}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn--buy{background:var(--accent);color:#06231a;border-color:var(--accent);font-weight:600}
.quicklinks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{display:inline-block;padding:1px 8px;border-radius:6px;font-size:.82rem;font-weight:600;color:#fff}
.chip-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip-list a{display:inline-block;background:var(--card);border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;color:var(--ink);font-size:.9rem}
.chip-list a:hover{border-color:var(--accent);text-decoration:none}

/* schedule / fixtures */
.sched{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.sched__day{font-size:.95rem;color:var(--muted);margin:14px 0 2px;font-weight:600}
.sched__day a{color:var(--muted)}
.fx{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--ink)}
.fx:hover{border-color:var(--accent);text-decoration:none}
.fx--tbc{opacity:.72}
.fx__date{display:none;color:var(--muted);font-size:.8rem}
.fx__time{font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem}
.fx__match{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:500}
.fx__flag{margin-right:5px}
.fx__v{color:var(--muted);font-weight:400;font-size:.85rem}
.fx__stage{color:var(--muted);font-style:italic}
.fx__chan{font-size:.72rem;font-weight:700;color:#fff;padding:3px 7px;border-radius:6px;white-space:nowrap}
.chan--bbc{background:var(--bbc)}
.chan--itv{background:var(--itv)}
.chan--tbc{background:var(--tbc)}
@media(min-width:560px){
  .fx{grid-template-columns:54px 90px 1fr auto}
  .fx__date{display:block}
}

/* answer box + match facts */
.answer{background:#10231c;border:1px solid #1f6e52;border-left:4px solid var(--accent);
  border-radius:10px;padding:12px 14px;margin:14px 0;font-size:1.05rem}
.answer p{margin:0}
.matchfacts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin:14px 0}
.matchfacts>div{display:grid;grid-template-columns:130px 1fr;background:var(--card);padding:9px 12px;gap:8px}
.matchfacts dt{color:var(--muted);font-size:.9rem;margin:0}
.matchfacts dd{margin:0;font-weight:500}

/* faq */
.faq{margin:22px 0}
.faq__item{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--card)}
.faq__item summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";float:right;color:var(--accent)}
.faq__item[open] summary::after{content:"–"}
.faq__a{padding:0 14px 12px;color:var(--muted)}
.faq__a a{color:var(--accent)}

/* device cards */
.cards{display:grid;gap:12px;margin:12px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.card h3{margin:.1em 0 .3em}
.card__badge{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:6px}
.card__badge.ok{background:#12351f;color:var(--accent)}
.card__price{font-weight:700;margin:6px 0}
.card__best{color:var(--accent2);font-weight:500;margin:.2em 0}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.avoid{background:#2a1620;border:1px solid #5a2740;border-radius:var(--radius);padding:14px 16px;margin:16px 0}
.avoid-list{margin:.4em 0 0;padding-left:1.1em}
.avoid-list li{margin:.4em 0}
.affiliate-note,.note{font-size:.88rem;color:var(--muted)}
.affiliate-note{background:var(--bg2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px}

/* ads */
.ad{margin:18px 0;text-align:center}
.ad__ph{border:1px dashed var(--line);border-radius:10px;padding:20px;color:var(--muted);
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}

/* groups */
.group{border-top:1px solid var(--line);padding-top:8px;margin-top:18px}
.group-jump{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.group-jump a{background:var(--card);border:1px solid var(--line);border-radius:8px;
  width:34px;text-align:center;padding:5px 0;color:var(--ink);font-weight:600}
.ko-stage{margin-top:18px}

/* TL;DR quick-answers box (match pages) */
.tldr{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--accent2);
  border-radius:10px;padding:12px 14px;margin:14px 0}
.tldr__h{margin:0 0 8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-weight:700}
.tldr dl{margin:0;display:grid;gap:1px}
.tldr dl>div{display:grid;grid-template-columns:140px 1fr;gap:8px;padding:5px 0}
.tldr dt{color:var(--muted);font-size:.9rem;margin:0}
.tldr dd{margin:0;font-weight:600}

/* contextual 4K blocks */
.block-4k{border-radius:10px;padding:11px 14px;margin:14px 0;font-size:.97rem}
.block-4k.ok{background:#10231c;border:1px solid #1f6e52}
.block-4k.warn{background:#2a1f10;border:1px solid #6e521f}
.block-4k a{display:inline-block;margin-top:4px}

/* watch-4k page: hook / matrix / PAA / wall of shame */
.hook p,.paa p{font-size:1.02rem}
.matrix-list{list-style:none;padding:0;margin:10px 0}
.matrix-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:8px 0}
.paa{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px 16px 14px;margin:18px 0}
.avoid-badge{display:inline-block;background:#5a2740;color:#ffd9e6;font-size:.7rem;font-weight:700;
  padding:1px 7px;border-radius:6px;margin-right:4px;white-space:nowrap}
.device-card-cta{background:var(--accent);color:#06231a;border-color:var(--accent);font-weight:600}

/* late-night marker + local time */
.fx__late{display:block;font-size:.62rem;font-weight:600;color:var(--accent2);text-transform:uppercase;letter-spacing:.03em}
.localtime{color:var(--accent2);font-size:.85em;font-weight:600;white-space:nowrap}

/* misc */
.related{margin-top:26px}
.watch{margin:18px 0}
.site-footer{border-top:1px solid var(--line);background:var(--bg2);padding:22px 0;margin-top:30px;
  font-size:.88rem;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.footer-links a{color:var(--muted)}
.disclosure,.updated{margin:6px 0}