/* ================================================================
   KICKOFFIST DESIGN SYSTEM
   Newsprint sports paper × live digital dashboard.
   Extends the existing masthead/newsprint identity to all sports.
   ================================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;}

:root{
  --paper:#F5F0E8;
  --paper2:#EDE8DF;
  --ink:#111111;
  --ink2:#333333;
  --muted:#666666;
  --rule:#C8BFB0;
  --white:#FFFFFF;

  /* brand */
  --red:#C41E3A;
  --gold:#C8960C;

  /* sport accents — used only as small tags/stripes, never full re-themes */
  --football:#0A5C2E;
  --tennis:#B8A100;
  --cricket:#1565C0;
  --f1:#B00020;
  --basketball:#C0632B;
  --other:#5C4A8A;

  --live:#D8232A;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}

/* ---------- MASTHEAD ---------- */
.masthead{background:var(--ink);border-bottom:5px solid var(--red);}
.mast-top{background:var(--red);text-align:center;padding:5px 16px;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.06em;}
.mast-main{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.mast-meta-left,.mast-meta{display:flex;flex-direction:column;gap:4px;}
.mast-meta{align-items:flex-end;}
.mast-edition,.mast-issue{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.08em;}
.mast-logo{text-align:center;flex:1;}
.mast-title{font-family:'Playfair Display',serif;font-size:clamp(30px,6vw,58px);font-weight:900;color:#fff;letter-spacing:-1px;line-height:1;}
.mast-title .ist{color:var(--gold);font-style:normal;}
.mast-tagline{font-family:'Oswald',sans-serif;font-size:11px;font-weight:400;color:rgba(255,255,255,.55);letter-spacing:.3em;text-transform:uppercase;margin-top:3px;}
.mast-clock{font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--gold);letter-spacing:1px;}

/* ---------- NAV ---------- */
.navbar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:50;}
.navbar::-webkit-scrollbar{display:none;}
.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;white-space:nowrap;padding:0 20px;}
.nav-inner a{display:inline-block;padding:12px 14px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.75);border-bottom:3px solid transparent;}
.nav-inner a:hover,.nav-inner a.active{color:#fff;border-bottom-color:var(--red);}
.nav-icons{margin-left:auto;display:flex;gap:14px;padding-left:10px;}
.nav-icons button{background:none;border:0;color:rgba(255,255,255,.7);font-size:15px;}

/* ---------- SECTION HEADERS ---------- */
.sec{padding:34px 0;border-bottom:1px solid var(--rule);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.sec-title{font-family:'Playfair Display',serif;font-weight:900;font-size:26px;color:var(--ink);}
.sec-sub{font-family:'Oswald',sans-serif;font-size:12px;color:var(--muted);letter-spacing:.06em;}
.sec-link{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;color:var(--red);}

/* ---------- LIVE BADGE ---------- */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:6px;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tag-live{display:inline-flex;align-items:center;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--live);}

/* ---------- SPORT TAG ---------- */
.tag{display:inline-block;font-family:'Oswald',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:2px;color:#fff;}
.tag-football{background:var(--football);}
.tag-tennis{background:var(--tennis);color:#1a1a00;}
.tag-cricket{background:var(--cricket);}
.tag-f1{background:var(--f1);}
.tag-basketball{background:#C0632B;}
.tag-other{background:var(--other);}

/* ---------- EVENT CARD ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.card{background:var(--white);border:1px solid var(--rule);padding:16px;display:flex;flex-direction:column;gap:10px;}
.card-top{display:flex;justify-content:space-between;align-items:center;}
.card-comp{font-family:'Oswald',sans-serif;font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}
.card-teams{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;color:var(--ink);line-height:1.3;}
.card-teams .vs{color:var(--muted);font-size:12px;font-weight:400;display:block;margin:2px 0;}
.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--rule);padding-top:10px;}
.card-time{font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
.card-time .ist-lbl{font-size:10px;color:var(--gold);letter-spacing:.05em;margin-left:3px;}
.card-cta{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--red);}
.card-score{font-family:'Oswald',sans-serif;font-weight:800;font-size:20px;}
.card-status{font-family:'Oswald',sans-serif;font-size:11px;color:var(--muted);}

/* ---------- TIMELINE (India Time Machine) ---------- */
.timeline{border-left:2px solid var(--rule);margin-left:8px;}
.tl-hour{position:relative;padding:0 0 22px 26px;}
.tl-hour::before{content:'';position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);}
.tl-hour.has-events::before{background:var(--gold);border-color:var(--gold);}
.tl-label{font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;color:var(--ink2);margin-bottom:8px;letter-spacing:.03em;}
.tl-events{display:flex;flex-direction:column;gap:8px;}
.tl-event{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--rule);padding:9px 12px;}
.tl-event .t-tag{flex-shrink:0;}
.tl-event .t-body{flex:1;min-width:0;}
.tl-event .t-comp{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.tl-event .t-match{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;}
.tl-empty{font-size:12px;color:var(--muted);font-style:italic;}

/* ---------- FILTER PILLS ---------- */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.pill{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:.03em;padding:6px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);}
.pill.active{background:var(--ink);color:#fff;}

/* ---------- MATCH CENTRE ---------- */
.mc-head{background:var(--ink);color:#fff;padding:28px 0;}
.mc-comp{font-family:'Oswald',sans-serif;font-size:12px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;}
.mc-teams{display:flex;align-items:center;justify-content:center;gap:24px;margin:18px 0;flex-wrap:wrap;}
.mc-team{font-family:'Playfair Display',serif;font-size:clamp(22px,4vw,34px);font-weight:900;text-align:center;}
.mc-vs{font-family:'Oswald',sans-serif;color:rgba(255,255,255,.4);font-size:14px;}
.mc-time{text-align:center;font-family:'Oswald',sans-serif;font-size:15px;color:rgba(255,255,255,.85);}
.mc-time b{color:var(--gold);}
.mc-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:2px solid var(--ink);margin-top:8px;}
.mc-tab{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;padding:10px 16px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;}
.mc-tab.active{color:var(--ink);border-bottom-color:var(--red);}

/* ---------- TABLE ---------- */
table.std{width:100%;border-collapse:collapse;font-family:'Oswald',sans-serif;font-size:13px;}
table.std th{text-align:left;padding:8px 10px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink);}
table.std td{padding:9px 10px;border-bottom:1px solid var(--rule);}
table.std tr:hover td{background:var(--paper2);}
table.std td.num{text-align:center;}
table.std .pos{width:24px;color:var(--muted);}

/* ---------- WATCH BLOCK ---------- */
.watch{background:var(--paper2);border:1px dashed var(--rule);padding:16px;font-family:'Oswald',sans-serif;font-size:13px;}
.watch b{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
.watch-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px;}

/* ---------- NOTICE / DISCLAIMER ---------- */
.notice{background:#FCF4E3;border-left:4px solid var(--gold);padding:12px 16px;font-size:13px;color:var(--ink2);}

/* ---------- HERO ---------- */
.hero{padding:30px 0 10px;}
.hero-kicker{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--muted);}
.hero-date{font-family:'Playfair Display',serif;font-size:clamp(24px,5vw,36px);font-weight:900;margin-top:4px;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:40px 0 90px;margin-top:20px;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;font-family:'Oswald',sans-serif;font-size:13px;}
.foot-grid h4{color:#fff;font-size:12px;letter-spacing:.06em;margin-bottom:10px;text-transform:uppercase;}
.foot-grid li{margin-bottom:6px;}
.foot-bottom{max-width:1120px;margin:24px auto 0;padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.4);}

/* ---------- BOTTOM MOBILE NAV ---------- */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--ink);border-top:1px solid rgba(255,255,255,.15);display:flex;z-index:60;}
.bnav a{flex:1;text-align:center;padding:9px 4px 8px;font-family:'Oswald',sans-serif;font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.03em;}
.bnav a.active{color:var(--gold);}
@media (min-width:860px){.bnav{display:none;}}
@media (max-width:859px){body{padding-bottom:56px;}}

/* ---------- UTIL ---------- */
.muted{color:var(--muted);}
.last-updated{font-family:'Oswald',sans-serif;font-size:11px;color:var(--muted);letter-spacing:.03em;}

/* ---------- DATE HEADER (reusable) ---------- */
.date-header{padding:18px 0 4px;border-bottom:2px solid var(--ink);margin-bottom:4px;}
.dh-day{font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:.15em;color:var(--red);}
.dh-date{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.1;margin-top:2px;}
.dh-note{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.1em;color:var(--gold);margin-top:4px;}

/* ---------- DUAL TIME (venue → IST) ---------- */
.venue-time{color:var(--muted);font-weight:400;font-size:12px;}
.arrow{color:var(--rule);}

/* ---------- WHY WATCH BLOCK ---------- */
.why-watch{background:var(--paper2);border-left:3px solid var(--red);padding:14px 16px;margin-top:14px;}
.why-title{font-family:'Playfair Display',serif;font-weight:900;font-size:15px;margin-bottom:8px;}
.why-row{display:flex;gap:10px;font-size:13px;padding:4px 0;flex-wrap:wrap;}
.why-row b{font-family:'Oswald',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);width:130px;flex-shrink:0;}

/* ---------- SCORE STRIP TICKER ---------- */
.score-strip{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;white-space:nowrap;}
.score-strip-inner{display:inline-flex;gap:0;animation:ticker 45s linear infinite;padding:7px 0;}
.score-strip:hover .score-strip-inner{animation-play-state:paused;}
.ss-item{display:inline-flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-size:12px;color:rgba(255,255,255,.8);padding:0 20px;border-right:1px solid rgba(255,255,255,.12);}
.ss-item b{color:#fff;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.score-strip-inner{animation:none;overflow-x:auto;}}

/* ---------- "MORE SPORTS" DROPDOWN ---------- */
.nav-more{position:relative;}
.nav-more-panel{display:none;position:absolute;top:100%;left:0;background:var(--ink);border:1px solid rgba(255,255,255,.15);min-width:180px;flex-direction:column;z-index:70;}
.nav-more.open .nav-more-panel{display:flex;}
.nav-more-panel a{padding:10px 16px;border-bottom:none;}
.nav-more-panel a:hover{background:rgba(255,255,255,.08);}

/* ---------- SPOTLIGHT (3 games you shouldn't miss) ---------- */
.spotlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){.spotlight-grid{grid-template-columns:1fr;}}
.spotlight-card{border:1px solid var(--ink);}
.spotlight-card .card{border:none;}
.spotlight-num{font-family:'Playfair Display',serif;font-weight:900;font-size:13px;color:var(--red);padding:8px 14px 0;}

/* ---------- SPORT TILES (multi-sport visibility) ---------- */
.sport-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.sport-tile{border:1px solid var(--rule);background:var(--white);padding:14px 10px;text-align:center;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.03em;}
.sport-tile .emoji{display:block;font-size:22px;margin-bottom:6px;}
.sport-tile:hover{border-color:var(--ink);}

/* ---------- TONIGHT PAGE GROUPS ---------- */
.tonight-group-label{font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--red);margin:26px 0 6px;text-transform:uppercase;}
.tonight-group-label:first-child{margin-top:0;}