:root{
  --ink:#14213d; --accent:#fca311; --paper:#ffffff; --wash:#f4f5f7;
  --muted:#5b6472; --line:#e2e5ea; --ad:#eef1f5;
}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper);line-height:1.6}
a{color:var(--ink)}
.masthead{border-bottom:3px solid var(--ink);padding:18px 20px 12px;text-align:center}
.masthead .brand{font-size:2.2rem;font-weight:700;letter-spacing:.5px;text-decoration:none}
.masthead .brand span{color:var(--accent)}
.tagline{color:var(--muted);font-style:italic;margin:2px 0 10px}
nav.main{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
nav.main a{text-decoration:none}
nav.main a:hover{color:var(--accent)}
.trending{background:var(--ink);color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;padding:8px 20px;text-align:center}
.trending strong{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-right:8px}
.trending a{color:#fff;text-decoration:none;margin:0 8px;white-space:nowrap}
.wrap{max-width:980px;margin:0 auto;padding:24px 20px 48px}
.adslot{background:var(--ad);border:1px dashed #b9c0cb;color:#7a8494;font-family:Helvetica,Arial,sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;min-height:90px;margin:18px 0;text-align:center}
.adslot.tall{min-height:250px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:28px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.kicker{font-family:Helvetica,Arial,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b97e06}
h1{font-size:2rem;line-height:1.2;margin:.3em 0}
h2{font-size:1.35rem;margin-top:1.4em}
.meta{color:var(--muted);font-family:Helvetica,Arial,sans-serif;font-size:.85rem}
.card{border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:18px;background:#fff}
.card h3{margin:.2em 0;font-size:1.2rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:#b97e06}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.95rem}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{background:var(--wash)}
.sources{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);margin-top:28px;padding-top:12px}
footer{border-top:3px solid var(--ink);padding:18px 20px;text-align:center;color:var(--muted);font-family:Helvetica,Arial,sans-serif;font-size:.85rem}
footer a{margin:0 10px;text-decoration:none}

/* Live scores board */
.scoreboard { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; margin: 22px 0; background: #fbfcfe; }
.scoreboard > h2 { margin-top: 0; }
.sb-league h3 { margin: 12px 0 6px; font-size: 15px; letter-spacing: .04em; color: #1e40af; }
.sb-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #eef1f5; font-size: 15px; }
.sb-row:last-child { border-bottom: none; }
.sb-row a { color: #111827; text-decoration: none; font-weight: 600; }
.sb-row a:hover { text-decoration: underline; }
.sb-detail { color: #6b7280; white-space: nowrap; font-size: 14px; }
.sb-live { background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; vertical-align: 2px; }
.sb-sub { margin: 10px 0 2px; font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.sb-none { color: #6b7280; font-size: 14px; margin: 6px 0; }
.sb-foot { color: #9ca3af; font-size: 12px; margin: 10px 0 0; }
/* TradingView widgets */
.tv-tape { margin: 14px 0 6px; }
.tv-chart { margin: 18px 0; }

/* Sticky header + share row + related */
header.masthead { position: sticky; top: 0; z-index: 60; background: #fff; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; font-size: 13px; color: #6b7280; }
.share a, .share button { border: 1px solid #e5e7eb; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: #fff; color: #111827; text-decoration: none; cursor: pointer; font-family: inherit; }
.share a:hover, .share button:hover { border-color: #1e40af; color: #1e40af; }
.more-h { margin-top: 30px; }

/* v6: trending strip inside sticky header; icon share buttons */
header.masthead { box-shadow: 0 2px 10px rgba(20,33,61,.08); }
header .trending { margin: 12px -20px -12px; }
.share a, .share button { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.share svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.share button svg { fill: none; }
.share button.copied { border-color: #16a34a; color: #16a34a; }

/* v7: mobile smart header — trending strip only on scroll down, full header on scroll up */
@media (max-width: 760px) {
  body { padding-top: var(--hdr-h, 0px); }
  header.masthead { position: fixed; top: 0; left: 0; right: 0; transition: transform .25s ease; will-change: transform; }
  header.masthead[data-state="strip"] { transform: translateY(calc(-100% + var(--strip-h, 42px))); }
}

/* v8: soft off-white wash + trending hub */
body { background: #f6f7f9; }
.wrap { background: #fff; box-shadow: 0 0 0 1px #e9edf2, 0 4px 18px rgba(20,33,61,.05); }
.trending a.trend-home { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hub-cat { margin: 30px 0 4px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 6px; }
.hub-grid .card { margin: 0; }
.card .src { font-size: 12px; color: #9aa3af; margin: 6px 0 0; letter-spacing: .02em; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } }

/* v9: category pages, mobile trending scroll, latest grid, link styles */
.kicker a { color: #b97e06; text-decoration: none; border-bottom: 1px dotted #b97e06; }
.hub-cat a { color: inherit; text-decoration: none; }
.hub-cat a:hover { color: #b97e06; text-decoration: underline; }
@media (min-width: 761px) {
  .latest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .latest-grid .card { margin: 0; }
}
@media (max-width: 980px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  header.masthead { transition: transform .5s ease; }
  .trending { display: flex; overflow-x: auto; justify-content: flex-start; align-items: center; text-align: left; scrollbar-width: none; -ms-overflow-style: none; }
  .trending::-webkit-scrollbar { display: none; }
  .trending > * { flex: 0 0 auto; }
}

/* v10: wider layout, right rail, latest 3-per-row */
.wrap { max-width: 1180px; }
article { max-width: 800px; margin-left: auto; margin-right: auto; }
.grid { grid-template-columns: 3fr 1fr; }
.local-item { margin: 0 0 10px; }
.local-item a { font-weight: 600; text-decoration: none; }
.local-item p { margin: 2px 0 0; font-size: 13px; color: #6b7280; }
.qlinks a { display: block; padding: 3px 0; text-decoration: none; }
.qlinks a:hover { color: #b97e06; }
@media (min-width: 1000px) { .latest-grid { grid-template-columns: repeat(3, 1fr); } }

/* v11: article hero images */
.hero { margin: 16px 0 20px; }
.hero img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 10px; display: block; }
.hero figcaption { font-size: 12.5px; color: #6b7280; margin-top: 6px; }
.hero figcaption a { color: #6b7280; }

/* v12: UX pass — typography, card thumbs, loot gallery, sticky rail, dark mode */
html { scroll-behavior: smooth; }
article p, article li { font-size: 1.06rem; line-height: 1.72; }
.card img.thumb { width: 100%; height: 132px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 9px; }
.loot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 6px; }
.loot-grid figure { background: var(--wash); border-radius: 10px; padding: 16px 10px 12px; text-align: center; margin: 0; }
.loot-grid img { max-width: 100%; max-height: 150px; object-fit: contain; }
.loot-grid figcaption { font-size: 13px; margin-top: 9px; line-height: 1.45; }
.loot-grid figcaption strong { display: block; font-size: 14px; }
.loot-credit { font-size: 12.5px; color: #6b7280; margin: 4px 0 14px; }
#pbar { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 80; }
#toTop { position: fixed; right: 16px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; border: none; font-size: 20px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer; z-index: 80; }
#toTop.show { display: flex; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
nav.main a { padding: 6px 2px; }
@media (min-width: 1000px) {
  .grid > aside { position: sticky; top: calc(var(--hdr-h, 130px) + 10px); align-self: start; }
}
@media (max-width: 760px) {
  h1 { font-size: 1.62rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .card img.thumb { height: 118px; }
  .loot-grid { grid-template-columns: repeat(2, 1fr); }
  .trending a { display: inline-block; padding: 5px 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --ink: #e8ecf4; --paper: #141926; --wash: #1c2334; --line: #2b344a; --muted: #9aa3b5; }
:root:not([data-theme="light"]) body { background: #0c1017; }
:root:not([data-theme="light"]) .wrap { background: #141926; box-shadow: 0 0 0 1px #232b3f, 0 10px 34px rgba(0,0,0,.5); }
:root:not([data-theme="light"]) .masthead { background: #141926; }
:root:not([data-theme="light"]) .card { background: #171e2d; border-color: #2b344a; }
:root:not([data-theme="light"]) .trending { background: #05070c; color: #e8ecf4; }
:root:not([data-theme="light"]) footer { border-top-color: #2b344a; }
:root:not([data-theme="light"]) .share a, .share button { background: #171e2d; color: #e8ecf4; border-color: #2b344a; }
:root:not([data-theme="light"]) .sb-league h3 { color: #7aa2ff; }
:root:not([data-theme="light"]) .sb-row { border-bottom-color: #232b3f; }
:root:not([data-theme="light"]) article a { color: #8ab4ff; }
:root:not([data-theme="light"]) .hero figcaption, .loot-credit { color: #9aa3b5; }
:root:not([data-theme="light"]) #toTop { background: #fca311; color: #14213d; }
}
:root[data-theme="dark"] { --ink: #e8ecf4; --paper: #141926; --wash: #1c2334; --line: #2b344a; --muted: #9aa3b5; }
:root[data-theme="dark"] body { background: #0c1017; }
:root[data-theme="dark"] .wrap { background: #141926; box-shadow: 0 0 0 1px #232b3f, 0 10px 34px rgba(0,0,0,.5); }
:root[data-theme="dark"] .masthead { background: #141926; }
:root[data-theme="dark"] .card { background: #171e2d; border-color: #2b344a; }
:root[data-theme="dark"] .trending { background: #05070c; color: #e8ecf4; }
:root[data-theme="dark"] footer { border-top-color: #2b344a; }
:root[data-theme="dark"] .share a, .share button { background: #171e2d; color: #e8ecf4; border-color: #2b344a; }
:root[data-theme="dark"] .sb-league h3 { color: #7aa2ff; }
:root[data-theme="dark"] .sb-row { border-bottom-color: #232b3f; }
:root[data-theme="dark"] article a { color: #8ab4ff; }
:root[data-theme="dark"] .hero figcaption, .loot-credit { color: #9aa3b5; }
:root[data-theme="dark"] #toTop { background: #fca311; color: #14213d; }

/* v15: masthead tint + dark-mode toggle support */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) header.masthead { background: #dfe5ec; border-bottom: 1px solid #ccd5e0; }
}
:root[data-theme="light"] header.masthead { background: #dfe5ec; border-bottom: 1px solid #ccd5e0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.masthead { background: #141926; }
}
:root[data-theme="dark"] header.masthead { background: #141926; }
.theme-btn { background: #fff; border: 2px solid #14213d; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; color: #14213d; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px; padding: 0; box-shadow: 0 1px 4px rgba(20,33,61,.25); }
:root[data-theme="dark"] .theme-btn { background: #fca311; border-color: #fca311; color: #14213d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn { background: #fca311; border-color: #fca311; color: #14213d; }
}

/* v16: click-to-play video facades + linked card thumbnails */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; margin: 14px 0 0; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border: none; border-radius: 12px; background: rgba(200, 0, 0, .92); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.yt:hover .yt-play { background: #ff0000; }
.yt-cap { font-size: 12.5px; color: var(--muted); margin: 6px 0 16px; }
.card a.thumb-link { display: block; }

/* v17: mobile bottom navigation (combo nav: top bar stays, bottom bar for thumbs) */
.bottombar { display: none; }
@media (max-width: 760px) {
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottombar a { flex: 1; text-align: center; padding: 13px 4px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
  body { padding-bottom: 54px; }
  #toTop { bottom: 70px; }
}

/* v18: live local weather + alerts inside the "your area" panel */
.local-alert { border-left: 3px solid #dc2626; padding-left: 9px; }
.local-alert a { color: #b91c1c; }
:root[data-theme="dark"] .local-alert a { color: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .local-alert a { color: #f87171; } }
.local-wx { border-left: 3px solid var(--accent); padding-left: 9px; }

/* v19: homepage trends dropdown toggle */
.hub-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 12px 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 14.5px/1 Georgia, serif; cursor: pointer; }
.hub-toggle:hover { background: var(--wash); }
#hubDrop { margin-top: 2px; }