/* Matchflix 1.1 — PlayFlix-inspired dark cinematic UI */
:root {
  --bg: #0a0a10; --surface: #14141c; --surface2: #1d1d28; --line: #262633;
  --fg: #f2f2f5; --muted: #9a9aa8; --faint: #5c5c6e;
  --live: #d10e35; --live-deep: #b30d30; --live-ink: #ffffff;
  --gold: #ffb020; --gold-ink: #2a1c08;
  --radius: .9rem; --font: "Outfit", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
}
html[data-theme="ocean"] {
  --bg: #0a1628; --surface: #12243a; --surface2: #1a3350; --line: #2a4a6a;
  --fg: #e8f1fa; --muted: #8aa8c4; --faint: #5a7898;
  --live: #38bdf8; --live-deep: #0ea5e9; --live-ink: #0a1f2e; --gold: #fbbf24;
}
html[data-theme="sunset"] {
  --bg: #1a0f0a; --surface: #2a1810; --surface2: #3a2418; --line: #5a3a28;
  --fg: #faf0e8; --muted: #c4a48a; --faint: #8a6a50;
  --live: #fb923c; --live-deep: #ea7a1f; --live-ink: #2a1408; --gold: #fde68a;
}
html[data-theme="violet"] {
  --bg: #120a1f; --surface: #1e1230; --surface2: #2a1a42; --line: #3e2a5c;
  --fg: #f0e8fa; --muted: #a88ac4; --faint: #785a98;
  --live: #a78bfa; --live-deep: #8b5cf6; --live-ink: #1a0a2e; --gold: #f0abfc;
}
html[data-theme="rose"] {
  --bg: #1a0a10; --surface: #2a1218; --surface2: #3a1c24; --line: #5a2e38;
  --fg: #fae8ec; --muted: #c48a98; --faint: #8a5a68;
  --live: #fb7185; --live-deep: #f43f5e; --live-ink: #2a0a12; --gold: #fda4af;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font-family: var(--font); line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mf-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* ── Header ─────────────────────────── */
.mf-topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.mf-topbar-inner { display: flex; align-items: center; gap: .75rem; height: 3.75rem; }
.mf-logo { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: .03em; flex-shrink: 0; }
.mf-logo-mark {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: .55rem; background: linear-gradient(135deg, var(--live), var(--live-deep));
  color: var(--live-ink); font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--live) 45%, transparent);
}
.mf-logo-img {
  height: 2.4rem; width: auto; display: block;
  border-radius: .55rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--live) 45%, transparent);
}
.mf-search { flex: 1; display: flex; justify-content: center; min-width: 0; }
.mf-search form { position: relative; width: 100%; max-width: 26rem; }
.mf-search input {
  width: 100%; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg);
  padding: .55rem 1rem .55rem 2.5rem; font-size: .875rem; outline: none;
}
.mf-search input:focus { border-color: var(--live); }
.mf-search form::before {
  content: ""; position: absolute; left: .9rem; top: 50%; width: .95rem; height: .95rem;
  transform: translateY(-50%); opacity: .55;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa8' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.mf-top-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.mf-icon-btn {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 1.05rem;
}
.mf-icon-btn:hover { background: var(--surface); color: var(--fg); }
.mf-nav-desktop { display: none; align-items: center; gap: .25rem; }
.mf-nav-desktop a {
  display: inline-flex; height: 2.5rem; align-items: center; padding: 0 .9rem;
  border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--muted);
}
.mf-nav-desktop a.active, .mf-nav-desktop a:hover { background: var(--surface); color: var(--fg); }
.mf-theme-wrap { position: relative; }
@media (min-width: 768px) { .mf-nav-desktop { display: inline-flex; } .mf-burger { display: none; } }
.mf-mobile-nav { display: none; border-top: 1px solid var(--line); padding: .5rem 1rem 1rem; }
.mf-mobile-nav.open { display: block; }
.mf-mobile-nav a {
  display: block; padding: .7rem .5rem; border-radius: .5rem; color: var(--muted); font-weight: 500;
}
.mf-mobile-nav a.active, .mf-mobile-nav a:hover { background: var(--surface); color: var(--fg); }

/* Theme picker */
.mf-theme-menu { position: absolute; right: 0; top: calc(100% + .25rem); width: 11rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; z-index: 50;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.mf-theme-menu button { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .55rem .75rem;
  border: none; background: transparent; color: var(--muted); border-radius: .5rem; font-size: .875rem; }
.mf-theme-menu button:hover { background: var(--surface2); color: var(--fg); }
.mf-dot { width: .75rem; height: .75rem; border-radius: 50%; flex-shrink: 0; }

.mf-main { padding: 1.25rem 0 3rem; }
.mf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* ── Homepage ───────────────────────── */
.mf-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.mf-eyebrow span { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.mf-eyebrow a { font-size: .8rem; color: var(--muted); }
.mf-eyebrow a:hover { color: var(--fg); }
.mf-sec-title { font-family: var(--display); font-size: 1.9rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: .01em; }
.mf-sec-title .accent { color: var(--live); }
.mf-sec-head { display: flex; align-items: center; gap: .6rem; margin: 2.25rem 0 1rem; }
.mf-sec-head h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.mf-live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--live); animation: live-pulse 1.3s ease-in-out infinite; }
.mf-count { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); border: 1px solid color-mix(in srgb, var(--live) 35%, transparent); padding: .2rem .7rem; border-radius: 999px; }
.mf-date { font-size: .8rem; color: var(--faint); }

/* Sport pills */
.mf-sport-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1.25rem; scrollbar-width: none; }
.mf-sport-pills::-webkit-scrollbar { display: none; }
.mf-sport-pills a {
  flex-shrink: 0; display: inline-flex; height: 2.4rem; align-items: center; padding: 0 1.05rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.mf-sport-pills a.active { background: var(--live); border-color: var(--live); color: var(--live-ink); font-weight: 600; }

/* Hero featured */
.mf-hero { position: relative; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--line); margin-bottom: 1rem;
  background: linear-gradient(115deg, #17171f 0 52%, color-mix(in srgb, var(--live) 55%, #17171f) 52% 100%); }
.mf-hero a { display: block; padding: 2rem 1.5rem; min-height: 13rem; position: relative; }
.mf-badge-live {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--live); color: var(--live-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  padding: .3rem .7rem; border-radius: .4rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--live) 50%, transparent);
}
.mf-hero-teams { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 46rem; margin: 0 auto; }
.mf-hero-team { flex: 1; text-align: center; min-width: 0; }
.mf-hero-team img { width: 4.5rem; height: 4.5rem; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.mf-hero-team h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 700; margin: .6rem 0 0; line-height: 1.15; }
.mf-hero-mid { flex-shrink: 0; text-align: center; }
.mf-hero-league {
  display: inline-grid; place-items: center; min-width: 3.4rem; height: 3.4rem; padding: 0 .6rem;
  border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .04em; color: var(--gold);
}
.mf-hero-tag { display: block; margin-top: .4rem; font-size: .75rem; color: var(--muted); letter-spacing: .1em; }
.mf-btn-watch {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--live), var(--live-deep)); color: var(--live-ink);
  font-weight: 700; font-size: .85rem; letter-spacing: .05em;
  padding: .65rem 1.4rem; border-radius: 999px; border: none;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--live) 45%, transparent);
}
.mf-hero .mf-btn-watch { position: absolute; right: 1.25rem; bottom: 1.25rem; }
@media (max-width: 640px) {
  .mf-hero a { min-height: 11rem; padding: 1.5rem 1rem 4rem; }
  .mf-hero-team h3 { font-size: 1.2rem; }
  .mf-hero-team img { width: 3.4rem; height: 3.4rem; }
}

/* Featured grid */
.mf-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .5rem; }
.mf-feat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mf-feat-card a { display: block; padding: 1rem; }
.mf-feat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.mf-feat-label { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.mf-badge-live.sm { position: static; font-size: .62rem; padding: .22rem .55rem; }
.mf-feat-vs { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: .8rem; }
.mf-feat-team { flex: 1; text-align: center; min-width: 0; }
.mf-feat-team img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.mf-feat-team span { display: block; font-size: .78rem; font-weight: 600; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-feat-vs b { font-family: var(--display); color: var(--faint); font-size: .9rem; }
.mf-feat-card .mf-btn-watch { width: 100%; justify-content: center; font-size: .8rem; padding: .6rem 1rem; }

/* Live match cards */
.mf-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (min-width: 900px) { .mf-cards-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mf-mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, border-color .15s; }
.mf-mcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--live) 55%, var(--line)); }
.mf-mcard-media { position: relative; aspect-ratio: 16/9; background: #101018; overflow: hidden; }
.mf-mcard-media img.poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-mcard-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  background: linear-gradient(120deg, #191922 0 55%, color-mix(in srgb, var(--live) 38%, #191922) 55% 100%); }
.mf-mcard-fallback img { width: 3.6rem; height: 3.6rem; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.mf-mcard-fallback .vs { font-family: var(--display); font-weight: 700; color: var(--faint); font-size: 1.1rem; }
.mf-mcard-league {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600; color: var(--gold);
  background: rgba(0,0,0,.55); padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.mf-mcard-body { padding: .85rem .95rem 1rem; }
.mf-mcard-teams { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.mf-mcard-team { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; min-width: 0; }
.mf-mcard-team:last-child { justify-content: flex-end; text-align: right; }
.mf-mcard-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-crest { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: contain; background: var(--surface2); flex-shrink: 0; }
.mf-mcard-vs { font-family: var(--display); color: var(--faint); font-size: .8rem; font-weight: 600; flex-shrink: 0; }
.mf-mcard .mf-btn-watch { width: 100%; justify-content: center; font-size: .78rem; padding: .55rem 1rem; }
.mf-mcard-time { display:block; text-align:center; font-size:.75rem; color:var(--muted); margin-top:.5rem; }

/* Today's list */
.mf-tlist { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (min-width: 900px) { .mf-tlist { grid-template-columns: 1fr 1fr 1fr; } }
.mf-tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mf-tcard a { display: block; }
.mf-tcard-top { position: relative; min-height: 5.5rem; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #15151d 0 55%, color-mix(in srgb, var(--live) 22%, #15151d) 55% 100%); padding: 1rem; }
.mf-tcard-teams { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .88rem; }
.mf-tcard-teams img { width: 2rem; height: 2rem; object-fit: contain; }
.mf-tcard-teams .vs { font-family: var(--display); color: var(--faint); font-size: .8rem; }
.mf-tcard-bot { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-top: 1px solid var(--line); }
.mf-tcard-league { font-size: .72rem; color: var(--gold); display: inline-flex; align-items: center; gap: .3rem; }
.mf-tcard-time { font-size: .75rem; color: var(--muted); font-weight: 600; }

.mf-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); }
.mf-skeleton { border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 40%, var(--surface2) 50%, var(--surface) 60%); background-size: 200% 100%; animation: sk 1.2s infinite; min-height: 10rem; }
@keyframes sk { to { background-position: -200% 0; } }

/* ── Footer ─────────────────────────── */
.mf-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2.5rem 0 2rem; text-align: center; }
.mf-footer .mf-community { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.mf-footer-sports { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.mf-footer-sports a { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); padding: .35rem .8rem; border-radius: 999px; }
.mf-footer-sports a:hover { color: var(--fg); border-color: var(--live); }
.mf-footer-links { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 1.25rem; font-size: .85rem; }
.mf-footer-links a { color: var(--muted); } .mf-footer-links a:hover { color: var(--fg); }
.mf-disclaimer { font-size: .72rem; color: var(--faint); max-width: 46rem; margin: 0 auto; line-height: 1.6; }
.mf-copy { font-size: .75rem; color: var(--faint); margin-top: 1rem; }

/* ── Watch page (logic untouched) ───── */
.mf-watch-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .mf-watch-grid { grid-template-columns: 2fr 1fr; } }
.mf-player-wrap { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.mf-player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mf-phase { font-family: var(--display); font-size: .8rem; font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .35rem; }
.mf-phase.live { background: var(--live); color: var(--live-ink); padding: .15rem .6rem; border-radius: 999px; }
.mf-sources { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; }
.mf-server-list { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.mf-server-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); text-align: left; cursor: pointer; transition: background .15s; }
.mf-server-row:last-child { border-bottom: none; }
.mf-server-row:hover { background: var(--surface2); }
.mf-server-row.active { background: color-mix(in srgb, var(--live) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--live); }
.mf-server-num { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: .45rem; background: var(--bg); border: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--muted); }
.mf-server-row.active .mf-server-num { background: var(--live); color: var(--live-ink); border-color: var(--live); }
.mf-server-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mf-server-name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.mf-server-meta { display: flex; flex-wrap: wrap; gap: .35rem .65rem; font-size: .75rem; color: var(--muted); }
.mf-server-host { font-family: ui-monospace, monospace; color: var(--faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-server-badges { flex-shrink: 0; }
.mf-badge-q { display: inline-block; padding: .2rem .5rem; border-radius: 999px; font-family: var(--display); font-size: .75rem; font-weight: 600; letter-spacing: .03em; }
.mf-badge-q.hd { background: color-mix(in srgb, var(--gold) 25%, transparent); color: var(--gold); }
.mf-badge-q.sd { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* Chat (logic untouched) */
.mf-chat { display: flex; flex-direction: column; height: 420px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.mf-chat-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.mf-chat-body { flex: 1; overflow-y: auto; padding: .75rem; }
.mf-chat-msg { background: color-mix(in srgb, var(--bg) 60%, transparent); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.mf-chat-msg .name { font-weight: 600; color: var(--live); font-size: .875rem; }
.mf-chat-msg .text { font-size: .875rem; word-break: break-word; }
.mf-chat-foot { border-top: 1px solid var(--line); padding: .75rem; }
.mf-chat-foot input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: .5rem 1rem; font-size: .875rem; outline: none; }
.mf-chat-foot input:focus { border-color: var(--live); }
.mf-btn-live { background: linear-gradient(135deg, var(--live), var(--live-deep)); color: var(--live-ink); border: none; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .875rem; }

/* Ads */
.mf-ad { margin: 1rem 0; text-align: center; overflow: hidden; }
.mf-ad img, .mf-ad iframe { max-width: 100%; }

@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.live-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: live-pulse 1.3s ease-in-out infinite; }

/* ── Sport pills with arrows ────────── */
.mf-pills-wrap { display: flex; align-items: center; gap: .4rem; margin-bottom: 1.25rem; }
.mf-pills-wrap .mf-sport-pills { flex: 1; margin-bottom: 0; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.mf-pill-arrow {
  flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
}
.mf-pill-arrow:hover { color: var(--fg); border-color: var(--live); }
.mf-pill-arrow:disabled { opacity: .3; pointer-events: none; }
.mf-clear-btn {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: .35rem .9rem; font-size: .78rem;
}
.mf-clear-btn:hover { color: var(--fg); border-color: var(--live); }
#mf-search-sec .mf-sec-head { margin-top: 0; }

/* ── Time-slot groups ──────────────── */
.mf-slot { margin-bottom: 1.75rem; }
.mf-slot:last-child { margin-bottom: 0; }
.mf-slot-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; padding: 0 .1rem; }
.mf-slot-label { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; }
.mf-slot-range { font-size: .75rem; color: var(--faint); white-space: nowrap; }

/* ── Eye-candy pack v1.6 ──────────── */
/* Wider canvas: fills empty sides on desktop */
.mf-wrap { max-width: 88rem; }

/* Ambient cinematic background */
body {
  background:
    radial-gradient(60rem 28rem at 50% -8%, color-mix(in srgb, var(--live) 9%, transparent), transparent 70%),
    radial-gradient(45rem 24rem at 88% 108%, color-mix(in srgb, #7c3aed 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Live ticker */
.mf-ticker {
  display: flex; align-items: center; gap: .8rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--live) 20%, #140609), color-mix(in srgb, var(--live) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--live) 32%, transparent);
  border-radius: 999px; padding: .42rem .5rem .42rem .45rem; margin-bottom: 1.1rem; overflow: hidden;
}
.mf-ticker[hidden] { display: none; }
.mf-ticker-label {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem;
  background: var(--live); color: var(--live-ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  padding: .32rem .7rem; border-radius: 999px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--live) 55%, transparent);
}
.mf-ticker-view { flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mf-ticker-track { display: inline-flex; gap: 2.75rem; white-space: nowrap; padding-right: 2.75rem; animation: mf-ticker-scroll 30s linear infinite; }
.mf-ticker:hover .mf-ticker-track { animation-play-state: paused; }
@keyframes mf-ticker-scroll { to { transform: translateX(-50%); } }
.mf-ticker-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); }
.mf-ticker-item b { color: var(--fg); font-weight: 600; }
.mf-ticker-item .live-dot { background: var(--live); }

/* Hero: drama */
.mf-hero {
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 90px color-mix(in srgb, var(--live) 14%, transparent);
}
.mf-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
  background-size: 280% 100%; animation: mf-sheen 7s ease-in-out infinite;
}
@keyframes mf-sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.mf-hero-team h3 { text-shadow: 0 2px 20px rgba(0,0,0,.65); }
.mf-hero-league { box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent); }

/* Section titles with glow */
.mf-sec-title { text-shadow: 0 2px 26px color-mix(in srgb, var(--live) 28%, transparent); }
.mf-sec-head h2 { text-shadow: 0 2px 18px rgba(0,0,0,.5); }

/* Cards: lift + glow on hover */
.mf-mcard { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mf-mcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--live) 60%, var(--line));
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--live) 20%, transparent);
}
.mf-feat-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mf-feat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--live) 55%, var(--line));
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px color-mix(in srgb, var(--live) 16%, transparent);
}
.mf-tcard { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mf-tcard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--live) 50%, var(--line));
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

/* Poster readability + media zoom */
.mf-mcard-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none;
}
.mf-mcard-media img.poster { transition: transform .35s ease; }
.mf-mcard:hover .mf-mcard-media img.poster { transform: scale(1.05); }

/* Pills: active glow */
.mf-sport-pills a { transition: background .15s, color .15s, box-shadow .15s, border-color .15s; }
.mf-sport-pills a.active { box-shadow: 0 4px 20px color-mix(in srgb, var(--live) 50%, transparent); }
.mf-sport-pills a:not(.active):hover { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); color: var(--fg); }

/* Buttons: stronger glow */
.mf-btn-watch { transition: transform .15s ease, box-shadow .15s ease; }
.mf-btn-watch:hover { transform: translateY(-1px); box-shadow: 0 6px 22px color-mix(in srgb, var(--live) 60%, transparent); }

/* Header: subtle glow line */
.mf-topbar { box-shadow: 0 1px 0 color-mix(in srgb, var(--live) 14%, transparent); }

/* ── Banner cards v1.7 (reference-inspired, original crimson skin) ── */
.mfx-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mfx-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--live) 55%, var(--line));
  box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 28px color-mix(in srgb, var(--live) 20%, transparent);
}
.mfx-poster { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #1d1d27, #101016); overflow: hidden; }
.mfx-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mfx-card:hover .mfx-poster img { transform: scale(1.045); }
.mfx-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.mfx-noimg img { width: 64px; height: 64px; object-fit: contain; }
.mfx-poster-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,10,.6) 0%, transparent 32%, transparent 52%, rgba(5,5,10,.92) 100%);
}
.mfx-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: .6rem .7rem; gap: .5rem; }
.mfx-league {
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-size: .68rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px;
  max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mfx-top-right { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.mfx-streams { background: rgba(34,197,94,.92); color: #04120a; font-size: .68rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; }
.mfx-time {
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-size: .68rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px;
}
.mfx-names {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem .8rem .75rem;
}
.mfx-name { font-weight: 700; font-size: .92rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.85); text-align: center; line-height: 1.25; }
.mfx-names .mfx-vs {
  flex-shrink: 0; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2); color: #fff;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.mfx-cta { display: block; text-align: center; padding: .72rem; font-weight: 700; font-size: .85rem; }
.mfx-cta.live { background: linear-gradient(135deg, var(--acc), var(--acc-d)); color: #fff; transition: filter .15s; }
.mfx-card:hover .mfx-cta.live { filter: brightness(1.12); }
.mfx-cta.up { border-top: 1px solid var(--line); color: var(--muted); }
.mfx-card:hover .mfx-cta.up { color: var(--fg); }

/* Today's Matches: cards grid like the reference */
.mf-tlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (max-width: 640px) { .mf-tlist { grid-template-columns: 1fr; } }

/* ── Featured v1.8: big hero + 2x2 mini cards ── */
.mf-feat-layout { display: grid; grid-template-columns: 1.12fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.mf-feat-minis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-content: stretch; }
@media (max-width: 920px) { .mf-feat-layout { grid-template-columns: 1fr; } }

/* Big hero — diagonal split, giant crests */
.mf-fhero {
  position: relative; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(115deg, #15151e 0 46%, #0b0b10 46% 53%, #8e0f2b 53% 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 90px color-mix(in srgb, var(--live) 14%, transparent);
}
.mf-fhero > a { position: relative; display: block; min-height: 21rem; padding: 2.5rem 2rem 5.5rem; }
.mf-fhero .mf-badge-live { position: absolute; top: 1rem; right: 1rem; }
.mf-fhero-split { display: flex; align-items: center; justify-content: space-between; gap: .8rem; height: 100%; }
.mf-fhero-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.mf-fhero-side img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(0,0,0,.65)); }
.mf-fhero-side h3 { font-size: 1.4rem; font-weight: 800; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.75); line-height: 1.25; }
.mf-fhero-mid { flex-shrink: 0; }
.mf-fhero-league {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.28);
  color: var(--gold); font-weight: 800; font-size: .95rem; letter-spacing: .04em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 0 26px rgba(0,0,0,.5);
}
.mf-fhero-tag { position: absolute; left: 1.2rem; bottom: 1.2rem; font-size: .72rem; font-weight: 700; color: var(--fg); line-height: 1.6; }
.mf-fhero-tag .live-dot { margin-right: .3rem; }
.mf-fhero .mf-btn-watch { position: absolute; right: 1.2rem; bottom: 1.2rem; }
@media (max-width: 640px) {
  .mf-fhero > a { min-height: 17rem; padding: 2rem 1rem 5rem; }
  .mf-fhero-side img { width: 82px; height: 82px; }
  .mf-fhero-side h3 { font-size: 1.02rem; }
  .mf-fhero-league { width: 3.2rem; height: 3.2rem; font-size: .75rem; }
}

/* Mini cards */
.mf-mini { background: var(--card); border: 1px solid var(--line); border-radius: .9rem; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mf-mini > a { display: flex; flex-direction: column; gap: .75rem; padding: .95rem; height: 100%; }
.mf-mini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--live) 50%, var(--line));
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 20px color-mix(in srgb, var(--live) 14%, transparent); }
.mf-mini-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mf-mini-label { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-mini-vs { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mf-mini-team { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; min-width: 0; }
.mf-mini-team img { width: 54px; height: 54px; object-fit: contain; }
.mf-mini-team span:last-child { font-size: .76rem; font-weight: 600; color: var(--fg); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-mini-vs b { color: var(--muted); font-size: .68rem; flex-shrink: 0; }
.mf-mini-btn { display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; margin-top: auto; }
.mf-mini-btn.live { background: color-mix(in srgb, var(--live) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 55%, transparent); color: var(--live); }
.mf-mini-btn.up { border: 1px solid var(--line); color: var(--muted); }
.mf-mini:hover .mf-mini-btn.up { color: var(--fg); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }

/* Today's: 4 per row */
.mf-tlist { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .mf-tlist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mf-tlist { grid-template-columns: 1fr; } }

/* Today's count pill — the ONLY count on the page */
.mf-today-meta { display: flex; align-items: center; gap: .6rem; }
.mf-count-pill { background: color-mix(in srgb, var(--live) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); color: var(--live);
  font-size: .75rem; font-weight: 700; padding: .28rem .75rem; border-radius: 999px; white-space: nowrap; }
.mf-count-pill[hidden] { display: none; }

/* ── Watch page v1.9 ── */
.mfw-back { margin-bottom: 1rem; }
.mfw-back a { color: var(--muted); font-size: .875rem; }
.mfw-back a:hover { color: var(--fg); }

.mfw-title { margin-bottom: 1.25rem; }
.mfw-title .mf-badge-live { margin-bottom: .6rem; }
.mfw-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mfw-title-row h1 { font-family: var(--display); font-size: clamp(2rem, 4.2vw, 2.6rem); font-weight: 700; margin: 0; line-height: 1.08; letter-spacing: .01em; overflow-wrap: break-word; }
.mfw-h1-crest { width: .95em; height: .95em; object-fit: contain; vertical-align: -.12em; margin-right: .22em; }
.mfw-h1-vs { color: var(--muted); font-size: .52em; font-weight: 600; vertical-align: .16em; margin: 0 .12em; }
.mfw-title-row h1 .mfx-follow-watch { font-size: .45em; vertical-align: .38em; padding: 0 .08rem; }
.mfw-share { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; padding-top: .25rem; }
.mfw-share > span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-right: .2rem; }
.mfw-share a, .mfw-share button {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, transform .15s;
}
.mfw-share a:hover, .mfw-share button:hover { color: var(--fg); border-color: color-mix(in srgb, var(--live) 50%, var(--line)); transform: translateY(-2px); }
.mfw-share button.copied { color: #22c55e; border-color: #22c55e; }
.mfw-meta { color: var(--muted); font-size: 1rem; margin: .55rem 0 0; }
/* Live viewer cluster (2.8.8; above the chat in 2.8.9; header band
   in 2.8.11; inside the CHAT HEADER in 2.8.12, owner direction):
   badge + eye count + "Started ... ago" as a right-aligned second
   row of the chat panel's header (.mfw-chat-clusterow). The span
   markup and these cluster rules are unchanged since 2.8.8 - only
   the location moved. Sitting inside the side column again is
   safe for the 2.8.11 player/chat edge alignment because it is
   INSIDE the panel now, not stacked above it: the panel is still
   the side column's first item and its height is still JS-synced
   to the player. In theater mode the whole side column is hidden
   (.mfw-grid.mfw-theater .mfw-side), so the count hides with the
   chat - no separate theater rule needed. The [hidden] guards
   matter - these are flex boxes, which would otherwise override
   the hidden attribute. */
.mfw-livecluster { display: inline-flex; align-items: center; gap: .55rem; }
.mfw-livecluster[hidden] { display: none; }
.mfw-livecluster .mf-badge-live.sm { position: static; }
/* 2.8.13: the badge is always in the cluster markup but [hidden]
   outside the live state - .mf-badge-live is a flex box, which
   would otherwise override the hidden attribute. */
.mfw-livecluster .mf-badge-live[hidden] { display: none; }
.mfw-chat-clusterow { display: flex; justify-content: flex-end; flex: 1 1 100%; margin-top: .3rem; }
.mf-chat-head .mfw-livecluster { font-size: .8rem; }
.mfw-live-view { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--text, #fff); white-space: nowrap; }
.mfw-live-view[hidden] { display: none; }
.mfw-live-started { white-space: nowrap; color: var(--muted); }
/* Mobile cluster instance (2.8.14, owner ask): a SECOND copy of the
   cluster lives inside the meta line - on phones the layout stacks
   and the chat (with the canonical cluster in its header) sits
   far below the player, so the count was effectively invisible
   there. Hidden by default, so desktop (>=1025px) stays
   pixel-identical to 2.8.13. At <=1024px the meta line becomes a
   flex row: date/sources text left, cluster right-aligned on the
   SAME row, vertically centered with the text; if a very narrow
   screen cannot fit both, the row wraps and the cluster drops
   under the meta text, still right-aligned. app.js drives both
   instances together from the single heartbeat. */
.mfw-livecluster-m { display: none; }
@media (max-width: 1024px) {
  .mfw-meta:has(.mfw-livecluster-m) { display: flex; align-items: center; flex-wrap: wrap; column-gap: .75rem; row-gap: .3rem; }
  .mfw-meta .mfw-livecluster-m { display: inline-flex; margin-left: auto; font-size: .8rem; }
}

/* Player + chat grid (player bigger) */
.mfw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; align-items: start; margin-bottom: 2rem; }
.mfw-grid.mfw-theater { grid-template-columns: minmax(0, 1fr); }
.mfw-grid.mfw-theater .mfw-side { display: none; }
@media (max-width: 1024px) { .mfw-grid { grid-template-columns: minmax(0, 1fr); } }

/* Watch page only (2.8.10, owner ask): a slightly wider canvas so the
   player is a bit bigger and the empty black side margins shrink on
   large screens. .mf-wrap is the shared site-wide wrapper, so this is
   scoped with :has() to the wrapper that actually contains the watch
   grid — every other page keeps the standard 88rem canvas.
   88rem (1408px) → 103rem (1648px): the extra 240px goes entirely to
   the fluid player column (the chat column stays 380px). The wrap is
   fluid below the cap and the ≤1024px breakpoint is untouched, so
   laptop/tablet/mobile rendering is unchanged. */
.mf-wrap:has(.mfw-grid) { max-width: 103rem; }

.mfw-playerbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }
.mfw-theater-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  font-size: .8rem; font-weight: 600; padding: .45rem .9rem; border-radius: .6rem; cursor: pointer;
  transition: border-color .15s;
}
.mfw-theater-btn:hover, .mfw-theater-btn.on { border-color: color-mix(in srgb, var(--live) 55%, var(--line)); }
.mfw-streaminfo { font-size: .78rem; color: var(--muted); }
.mfw-newtab { margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.mfw-newtab a { color: var(--live); font-weight: 600; }

.mfw-sec { font-family: var(--display); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.75rem 0 .9rem; }

/* Source pills — wrap, centered */
.mfw-sources { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.mfw-src {
  min-width: 8.5rem; padding: .6rem .9rem; border-radius: .8rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  display: flex; flex-direction: column; gap: .15rem; align-items: center; text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mfw-src:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.mfw-src.active {
  border-color: var(--live);
  background: color-mix(in srgb, var(--live) 12%, var(--card));
  box-shadow: 0 0 22px color-mix(in srgb, var(--live) 28%, transparent);
}
.mfw-src-top { font-size: .85rem; font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.mfw-q { font-size: .62rem; font-weight: 800; background: var(--gold); color: #1a1206; padding: .1rem .35rem; border-radius: .3rem; }
.mfw-src-sub { font-size: .72rem; color: var(--muted); max-width: 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Prediction */
.mfw-predict { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem 1.2rem; margin-top: 1.75rem; }
.mfw-predict-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.mfw-eyebrow { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em; color: var(--live); text-transform: uppercase; margin-bottom: .15rem; }
.mfw-predict-head b { font-size: 1.05rem; }
.mfw-votes { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.mfw-predict-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 560px) { .mfw-predict-opts { grid-template-columns: 1fr; } }
.mfw-predict-opts button {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: .8rem; color: var(--fg);
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .6rem;
  transition: border-color .15s, transform .15s;
}
.mfw-predict-opts button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.mfw-predict-opts button.picked { border-color: var(--live); box-shadow: 0 0 18px color-mix(in srgb, var(--live) 25%, transparent); }
.mfw-opt-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--live) 14%, transparent); transition: width .4s ease; pointer-events: none; }
.mfw-opt-crest {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: .8rem; position: relative;
}
.mfw-opt-name { font-size: .8rem; font-weight: 600; position: relative; text-align: center; }
.mfw-opt-pct { font-size: .72rem; color: var(--muted); font-weight: 700; position: relative; }

/* Chat sidebar — height synced to player via JS */
.mfw-side { display: flex; flex-direction: column; min-width: 0; }
.mfw-chat { flex-shrink: 0; }
.mfw-chat .mf-chat-head { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-weight: 700; }
/* Foul-language advisory (2.8.12): a strip at the top of the chat
   panel, directly under the header - always visible, never
   blurred, in the theme's own muted tones. */
.mfw-advisory { margin: 0; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--muted); font-size: .78rem; line-height: 1.5; text-align: center; }
/* Join block (2.8.12): no longer a centered full-panel gate - it is
   the panel's bottom section, sitting where the message form will
   be, under the blurred message list. Same element, ids, classes
   and JS hooks as the old gate; after joining, the existing
   #mf-chat-gate[hidden] guard (below) removes it completely and
   the message form takes its place. */
.mfw-gate { border-top: 1px solid var(--line); padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .55rem; }
.mfw-gate-row { display: flex; gap: .5rem; width: 100%; }
.mfw-gate-row input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: .55rem 1rem; font-size: .875rem; }
.mfw-gate small { color: var(--faint); font-size: .72rem; }
.mfw-chat .mf-btn-live { border-radius: 999px; padding: .55rem 1.6rem; font-weight: 800; letter-spacing: .06em; }

/* ── Chat extras v2.0 ── */
.mfw-chatting-as { font-size: .78rem; color: var(--muted); margin-bottom: .45rem; }
.mfw-chatting-as b { color: var(--fg); }
.mfw-chat-hints { display: flex; justify-content: space-between; gap: .5rem; margin-top: .45rem; font-size: .7rem; color: var(--faint); }
.mfw-chat .mf-chat-msg .name { cursor: pointer; }
.mfw-chat .mf-chat-msg .name:hover { text-decoration: underline; }
.mfw-enter {
  border-radius: 999px; padding: .55rem 1.7rem; font-weight: 800; letter-spacing: .05em; cursor: pointer;
  background: linear-gradient(135deg, var(--acc), var(--acc-d)); color: #fff; border: 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--live) 40%, transparent);
  transition: transform .15s, filter .15s; white-space: nowrap;
}
.mfw-enter:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* ── Chat blur gate (2.8.12) ──
 * Until the visitor joins, the message list is rendered and keeps
 * polling/auto-scrolling underneath, but shows blurred and takes
 * no pointer interaction. The locked state is read straight off
 * the gate element: the existing join flow hides #mf-chat-gate
 * (the [hidden] guard further below), so :has() lifts the blur
 * the moment the visitor joins - no JS change at all. Returning
 * visitors (name already stored; gate hidden during init) never
 * see the blur. Panel height is untouched in both states (the
 * body keeps its flex slot; blur/opacity do not affect layout).
 * Browsers without :has() simply show the list unblurred above
 * the bottom join block - the gate flow still works as before. */
.mf-chat:has(#mf-chat-gate:not([hidden])) #mf-chat-body {
  filter: blur(6px); opacity: .45; pointer-events: none; user-select: none;
}
#mf-chat-body { transition: filter .35s ease, opacity .35s ease; }

/* Sidebar prediction (moved under chat) */
.mfw-side .mfw-predict { margin-top: 1.25rem; }
.mfw-side .mfw-predict-opts { grid-template-columns: 1fr 1fr 1fr; }

/* ── Mobile chat: natural height (2.8.15) ──
 * At <=1024px the watch layout stacks into one column and the chat
 * panel takes its NATURAL height. Before this, two fixed heights
 * reached mobile: the base .mf-chat height above (420px) and -
 * worse - the desktop JS height-sync in app.js (chat = player
 * height, added for the 2.8.11 edge alignment), which ran at every
 * width. The phone-width player is only ~200px tall, so the panel
 * was squeezed to ~200px while its flex children (header, advisory,
 * message list, form) cannot shrink below their content - the
 * "Chatting as ..." line clipped at the panel's bottom edge and
 * the message form spilled out of the panel border over the
 * MATCH PREDICTION section laid out right after the squeezed box
 * (owner phone report). The JS sync is now desktop-only and clears
 * its inline height when crossing into mobile; here the panel's
 * fixed base height is lifted at this width and the message list
 * gets a comfortable slot of its own - tall enough to read a few
 * messages, capped so a long list scrolls internally instead of
 * stretching the page. Header -> advisory -> list -> gate (guest)
 * or form (joined) all stay in normal flow, inside the panel
 * border, in both states; the chat keeps its position in the
 * mobile stack (after sources, before prediction). Desktop
 * >=1025px is completely untouched. */
@media (max-width: 1024px) {
  .mf-chat { height: auto; }
  .mf-chat-body { flex: 0 1 auto; min-height: 320px; max-height: 60vh; }
}

/* ── Chat bugfixes v2.0.1 ── */
/* 1. Gate must fully vanish after joining (CSS display was overriding [hidden]) */
#mf-chat-gate[hidden] { display: none !important; }

/* 2. Dark thin scrollbar — no white bar */
.mf-chat-body { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mf-chat-body::-webkit-scrollbar { width: 6px; }
.mf-chat-body::-webkit-scrollbar-track { background: transparent; }
.mf-chat-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.mf-chat-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Featured heading sits directly above featured content (v2.0.2) */
.mf-sec-head .accent { color: var(--live); }
#mf-sec-featured { margin-top: 0; }

/* ── v2.1: Live + Upcoming (4 + See All), mobile-first ── */
.mf-sec-head { justify-content: space-between; }
.mf-seeall {
  background: none; border: 0; cursor: pointer; flex-shrink: 0;
  color: var(--live); font-size: .85rem; font-weight: 700; padding: .3rem .2rem;
}
.mf-seeall:hover { text-decoration: underline; }
.mf-seeall[hidden] { display: none; }

/* 4-col cards grid */
.mf-cards-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .mf-cards-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1200px) { .mf-cards-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 480px) { .mf-cards-grid { grid-template-columns: 1fr; } }

/* Banner card tightening for small widths */
@media (max-width: 560px) {
  .mfx-name { font-size: .82rem; }
  .mfx-league { font-size: .62rem; max-width: 48%; }
  .mfx-streams, .mfx-time { font-size: .62rem; }
  .mfx-cta { font-size: .8rem; padding: .65rem; }
  .mf-sec-head h2 { font-size: 1.25rem; }
}

/* ── v2.2: countdown, remind-me bell, day groups, toast ── */
.mfx-countdown { color: var(--gold); font-weight: 600; }
.mfx-bell {
  background: rgba(10,10,16,.72); border: 1px solid var(--line); color: #fff;
  border-radius: 999px; padding: .12rem .42rem; font-size: .72rem; line-height: 1.5;
  cursor: pointer; margin-right: .35rem;
}
.mfx-bell.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,176,32,.5); }
/* Follow-team stars */
.mfx-follow {
  background: transparent; border: none; color: rgba(255,255,255,.35);
  font-size: .95rem; line-height: 1; cursor: pointer; padding: .1rem .25rem;
  transition: color .15s, transform .15s;
}
.mfx-follow:hover { color: var(--gold); transform: scale(1.2); }
.mfx-follow.on { color: var(--gold); text-shadow: 0 0 8px rgba(255,176,32,.6); }
.mfx-names .mfx-follow { flex: 0 0 auto; }
.mfx-follow-watch { font-size: 1.15rem; vertical-align: middle; }
.mf-day { margin-bottom: 1.5rem; }
.mf-day:last-child { margin-bottom: 0; }
.mf-day-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; }
.mf-day-label { font-weight: 700; font-size: 1.02rem; }
.mf-day-count {
  background: rgba(255,176,32,.14); color: var(--gold); border: 1px solid rgba(255,176,32,.35);
  font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem;
}
#mfw-toast {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 9999;
  transform: translateX(-50%) translateY(1rem); opacity: 0; pointer-events: none;
  background: #1b1b26; border: 1px solid var(--line); color: #fff;
  padding: .7rem 1.15rem; border-radius: .7rem; font-size: .85rem;
  max-width: 92vw; text-align: center;
  transition: opacity .25s, transform .25s;
}
#mfw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Ad slots — render nothing when empty/disabled */
.mf-ad-slot { display: flex; justify-content: center; align-items: center; margin: 1.25rem auto; max-width: 100%; overflow: hidden; }
.mf-ad-slot:empty { display: none; }

/* ── Fix pass 2.8.6 additions ──
 * Card link overlay (Gap-7): the poster itself is the link; the ★/🔔
 * buttons live in .mfx-top / .mfx-names above it, never inside an <a>. */
.mfx-poster-link { position: absolute; inset: 0; z-index: 1; display: block; }
.mfx-top, .mfx-names { z-index: 2; }
a.mfx-cta { text-decoration: none; }

/* Owner-entered score chip on cards (manual matches only) */
.mfx-score {
  background: rgba(255,255,255,.92); color: #111; font-size: .68rem; font-weight: 800;
  padding: .3rem .6rem; border-radius: 999px; letter-spacing: .02em;
}

/* Watch page: score line + chat "watching now" (Idea-5 / Idea-8) */
.mfw-score-line { margin: .45rem 0 0; }
.mfw-score-chip {
  display: inline-block; background: var(--acc); color: #fff; font-weight: 800;
  font-size: .8rem; padding: .32rem .8rem; border-radius: 999px; letter-spacing: .03em;
}
.mfw-viewers { font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Live viewer chip on cards + sport rows (2.8.8) — sized to sit next
   to the existing .mf-badge-live.sm in the card's top row. */
.mf-viewers-chip { display: inline-flex; align-items: center; gap: .28rem; background: rgba(0,0,0,.45); color: #fff; font-size: .62rem; font-weight: 600; padding: .22rem .55rem; border-radius: .4rem; white-space: nowrap; }
.mf-viewers-chip[hidden] { display: none; }
.mf-viewers-chip.hmseo { margin-left: .6rem; vertical-align: middle; }