:root {
  --primary: #c81d25;
  --dark: #1a1a1a;
  --gray: #666;
  --light-gray: #f4f4f4;
  --border: #e2e2e2;
  --font: 'Noto Sans Devanagari', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); color: var(--dark); background: #fff; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 100; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.logo-text { font-size: 22px; font-weight: 800; color: var(--primary); }
.mobile-menu-toggle { display: block; background: none; border: none; font-size: 24px; cursor: pointer; }
.search-form input { border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; width: 140px; }

.category-nav { background: var(--primary); overflow-x: auto; white-space: nowrap; }
.category-nav ul { display: flex; }
.category-nav li { flex: 0 0 auto; }
.category-nav a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; color: #fff; font-size: 13px; }
.cat-icon { width: 18px; height: 18px; }

.breaking-ticker { display: flex; align-items: center; background: var(--dark); color: #fff; padding: 8px 0; overflow: hidden; }
.ticker-label { background: var(--primary); padding: 4px 12px; font-size: 12px; font-weight: 700; flex: 0 0 auto; margin-right: 10px; }
.ticker-track { flex: 1; overflow: hidden; }
.ticker-list { display: flex; gap: 40px; white-space: nowrap; animation: ticker-scroll 30s linear infinite; }
.ticker-list li a { font-size: 13px; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.live-scores-bar { background: var(--light-gray); overflow-x: auto; }
.live-scores-track { display: flex; gap: 12px; padding: 10px 16px; }
.match-card { flex: 0 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 160px; text-align: center; }
.match-comp { font-size: 10px; color: var(--gray); display: block; margin-bottom: 4px; }
.match-teams { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; }
.match-status { display: inline-block; margin-top: 4px; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--light-gray); }
.status-live { background: var(--primary); color: #fff; }
.status-finished { background: #888; color: #fff; }

/* ---------- Hero ---------- */
.hero-section { display: grid; gap: 16px; padding: 16px; }
.hero-thumb img { border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.hero-text h1 { font-size: 22px; margin: 10px 0 6px; }
.hero-cat { display: inline-block; background: var(--primary); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-bottom: 6px; }
.hero-text p { font-size: 14px; color: var(--gray); margin-bottom: 6px; }
.time-ago { font-size: 12px; color: #999; }
.side-title, .section-title { font-size: 16px; font-weight: 700; border-left: 4px solid var(--primary); padding-left: 8px; margin-bottom: 10px; }
.mini-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mini-thumb img { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; }
.mini-title { font-size: 13px; font-weight: 600; }

/* ---------- Web stories / Reels ---------- */
.web-stories, .reels-strip { padding: 16px; }
.stories-track, .reels-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.story-card, .reel-card { flex: 0 0 auto; width: 120px; border-radius: 10px; overflow: hidden; position: relative; background: var(--dark); }
.story-card img, .reel-card img { aspect-ratio: 9/16; object-fit: cover; opacity: .9; }
.story-title, .reel-title { position: absolute; bottom: 6px; left: 6px; right: 6px; color: #fff; font-size: 11px; font-weight: 600; }
.story-count { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 8px; }

/* ---------- Content layout ---------- */
.content-wrap { display: flex; flex-direction: column; gap: 24px; padding: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.see-all { font-size: 12px; color: var(--primary); }
.category-grid { display: flex; flex-direction: column; gap: 12px; }
.post-card-main img { border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.post-card-main h4 { font-size: 18px; margin: 8px 0 4px; }
.post-card-main p { font-size: 13px; color: var(--gray); margin-bottom: 4px; }
.post-card-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.row-cat { font-size: 11px; color: var(--primary); font-weight: 700; }
.row-title { font-size: 14px; font-weight: 600; }
.row-time { font-size: 11px; color: #999; }

.side-col { width: 100%; }
.widget { background: var(--light-gray); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.widget-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #ccc; padding: 24px 16px; margin-top: 24px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-col { flex: 1 1 200px; }
.footer-col h4 { color: #fff; margin-bottom: 10px; font-size: 14px; }
.footer-col ul li { margin-bottom: 6px; font-size: 13px; }
.footer-bottom { text-align: center; font-size: 12px; margin-top: 20px; color: #888; }

/* ---------- Single post ---------- */
.archive-title { font-size: 20px; margin-bottom: 16px; }
.single-post .post-cat { color: var(--primary); font-weight: 700; font-size: 12px; display: inline-block; margin-bottom: 6px; }
.single-post .post-title { font-size: 24px; margin: 4px 0 10px; }
.post-meta { display: flex; gap: 12px; font-size: 12px; color: var(--gray); margin-bottom: 12px; }
.post-thumb img { border-radius: 8px; margin-bottom: 14px; }
.post-content { font-size: 15px; line-height: 1.8; }
.post-content p { margin-bottom: 14px; }
.btn-home { display: inline-block; margin-top: 16px; background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 6px; }

/* ---------- Web story viewer ---------- */
.webstory-viewer { position: fixed; inset: 0; background: #000; z-index: 9999; }
.story-progress { display: flex; gap: 4px; padding: 8px; }
.progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; }
.progress-bar.done { background: #fff; }
.story-slides { position: relative; height: 100%; }
.story-slide { position: absolute; inset: 0; display: none; align-items: flex-end; }
.story-slide.active { display: flex; }
.story-slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption { position: absolute; bottom: 20px; left: 16px; right: 16px; color: #fff; font-size: 15px; background: rgba(0,0,0,.5); padding: 10px; border-radius: 8px; }
.story-prev, .story-next { position: absolute; top: 50%; background: rgba(255,255,255,.2); color: #fff; border: none; font-size: 30px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.story-prev { left: 10px; }
.story-next { right: 10px; }
.story-close { position: absolute; top: 14px; right: 14px; color: #fff; font-size: 20px; }

/* ---------- Reel viewer ---------- */
.reel-viewer { max-width: 480px; margin: 0 auto; padding: 16px; }
.reel-player video, .reel-player iframe { width: 100%; aspect-ratio: 9/16; border-radius: 10px; border: none; }
.reel-viewer .reel-title { margin-top: 10px; font-size: 16px; font-weight: 700; position: static; color: var(--dark); }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .search-form input { width: 220px; }
  .hero-section { grid-template-columns: 2fr 1fr; padding: 24px; }
  .content-wrap { flex-direction: row; padding: 24px; }
  .main-col { flex: 2.4; }
  .side-col { flex: 1; }
  .mobile-menu-toggle { display: none; }
  .post-card-main h4 { font-size: 22px; }
}