/*
Theme Name:   Hoopline
Description:  Multi-sport live-scores theme: scores by league, live ticker, standings, game, league, team and player pages, and your own stream player. Requires the Hoopline Core plugin.
Version:      2.12.0
Requires at least: 6.0
Requires PHP: 7.4
Author:       Hoopline
License:      GPL-2.0-or-later
Text Domain:  hoopline
*/

:root {
  --hl-bg: #00243b;
  --hl-head: #092b41;
  --hl-card: #0f3045;
  --hl-input: #17374b;
  --hl-hover: #1a3a4e;
  --hl-raise: #213f53;
  --hl-line-2: #1e3d50;
  --hl-line: #284559;
  --hl-pill: #2b485b;
  --hl-chip: #3f5b6c;
  --hl-text: #f4f7fa;
  --hl-body-text: #d2dbe2;
  --hl-muted: #a3b2be;
  --hl-faint: #708594;
  --hl-accent: #e5283c;
  --hl-accent-text: #ffffff;
  --hl-link: #ff5c6c;
  --hl-link-hover: #ff96a0;
  --hl-live-bg: #192439;
  --hl-live-line: #5c2a3d;
  --hl-player-ph: #001726;
  --hl-court: #335065;
  --hl-store-text: #ff5c6c;
  --hl-home: #2f7dd6;
  --hl-away: #c9a227;
  --hl-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --hl-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--hl-bg); color: var(--hl-text); font-family: var(--hl-body); font-size: 16px; line-height: 1.4; }
a { color: var(--hl-link); text-decoration: none; }
a:hover { color: var(--hl-link-hover); }
img { max-width: 100%; height: auto; }
button { font: inherit; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--hl-accent); color: var(--hl-accent-text); border-radius: 8px; }
:focus-visible { outline: 2px solid var(--hl-link); outline-offset: 2px; }

.hl-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .hl-container { padding: 0 16px; } }

/* ---------- header ---------- */
.hl-header { background: var(--hl-head); border-bottom: 1px solid var(--hl-line); }
.hl-header .hl-container { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 16px; padding-bottom: 16px; }
.hl-brand { display: flex; align-items: center; gap: 10px; color: var(--hl-text); }
.hl-brand:hover { color: var(--hl-text); }
.hl-brand img { max-height: 40px; width: auto; }
.hl-brand-name { font-family: var(--hl-display); font-weight: 800; font-size: 28px; letter-spacing: .02em; text-transform: uppercase; }
.hl-nav { flex: 1 1 auto; }
.hl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.hl-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; color: var(--hl-muted); font-weight: 600; }
.hl-nav a:hover { color: var(--hl-text); }
.hl-nav .current-menu-item > a, .hl-nav .current_page_item > a { background: var(--hl-pill); color: var(--hl-text); }
.hl-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.hl-search { display: flex; align-items: center; gap: 8px; min-width: 220px; height: 44px; padding: 0 12px; background: var(--hl-input); border: 1px solid var(--hl-line); border-radius: 10px; }
.hl-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--hl-text); font: inherit; outline: none; }
.hl-search input::placeholder { color: var(--hl-muted); }
@media (max-width: 720px) { .hl-search { flex: 1 1 100%; } }

/* ---------- live ticker ---------- */
.hl-ticker { background: var(--hl-accent); color: var(--hl-accent-text); }
.hl-ticker[hidden] { display: none; }
.hl-ticker .hl-container { display: flex; gap: 32px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-weight: 600; font-size: 15px; scrollbar-width: none; }
.hl-ticker a { color: var(--hl-accent-text); }
.hl-ticker a:hover { text-decoration: underline; color: var(--hl-accent-text); }
.hl-ticker-label { font-family: var(--hl-display); font-weight: 800; letter-spacing: .08em; }

/* ---------- layout ---------- */
.hl-main { padding-top: 32px; padding-bottom: 64px; }
.hl-split { display: flex; flex-wrap: wrap; gap: 32px; }
.hl-primary { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hl-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hl-stack { display: flex; flex-direction: column; gap: 24px; }

.hl-card { background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 16px; }
.hl-card-pad { padding: 20px; }
.hl-h2 { margin: 0; font-family: var(--hl-display); font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.hl-muted { color: var(--hl-muted); }

/* ---------- day header ---------- */
.hl-dayhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hl-eyebrow { margin: 0; color: var(--hl-muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.hl-h1 { margin: 4px 0 0; font-family: var(--hl-display); font-weight: 800; font-size: 48px; line-height: 1; }
.hl-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--hl-card); border-radius: 12px; }
.hl-pills button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--hl-muted); font-weight: 600; cursor: pointer; }
.hl-pills button:hover { color: var(--hl-text); }
.hl-pills button[aria-pressed="true"], .hl-pills button[aria-selected="true"] { background: var(--hl-pill); color: var(--hl-text); }

/* ---------- league + game rows ---------- */
.hl-league { overflow: hidden; }
.hl-league-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hl-line); }
.hl-league-head .hl-h2 { display: flex; align-items: center; gap: 10px; }
.hl-league-head img { width: 24px; height: 24px; object-fit: contain; }
.hl-game { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px auto; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--hl-line-2); color: var(--hl-text); }
.hl-game:last-child { border-bottom: 0; }
.hl-game:hover { background: var(--hl-hover); color: var(--hl-text); }
.hl-game-status { display: flex; flex-direction: column; gap: 4px; color: var(--hl-muted); font-size: 14px; }
.hl-live { display: inline-flex; align-items: center; gap: 6px; color: var(--hl-link); font-weight: 700; font-size: 13px; }
.hl-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hl-accent); }
.hl-teams, .hl-scores { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hl-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hl-team-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-team.is-winner .hl-team-name { color: var(--hl-text); }
.hl-team.is-loser .hl-team-name { color: var(--hl-muted); }
.hl-logo { width: 28px; height: 28px; flex: none; border-radius: 8px; object-fit: contain; background: var(--hl-raise); }
.hl-logo-fallback { display: flex; align-items: center; justify-content: center; font-family: var(--hl-display); font-weight: 800; font-size: 13px; color: #fff; }
.hl-scores { align-items: flex-end; font-family: var(--hl-display); font-size: 24px; font-weight: 700; line-height: 28px; }
.hl-scores .is-loser { color: var(--hl-muted); }
@media (max-width: 480px) { .hl-game { grid-template-columns: 64px minmax(0, 1fr) 40px auto; gap: 8px; padding: 12px 12px; } .hl-go-text { display: none; } .hl-go { padding: 0 10px; } }

.hl-empty, .hl-error { padding: 32px 20px; text-align: center; color: var(--hl-muted); }
.hl-skeleton { height: 220px; border-radius: 16px; background: linear-gradient(90deg, var(--hl-card) 0%, var(--hl-hover) 50%, var(--hl-card) 100%); background-size: 200% 100%; animation: hl-shimmer 1.4s infinite; }
@keyframes hl-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hl-skeleton { animation: none; } }

/* ---------- standings ---------- */
.hl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hl-table th { color: var(--hl-muted); font-size: 13px; font-weight: 500; text-align: left; padding: 0 0 8px; }
.hl-table td { padding: 6px 0; }
.hl-table .num { text-align: right; width: 40px; }
.hl-table .rank { width: 28px; color: var(--hl-muted); }
.hl-table .team { font-weight: 600; }

/* ---------- widgets ---------- */
.hl-widget { padding: 20px; }
.hl-widget .widget-title, .hl-widget h2 { margin: 0 0 12px; font-family: var(--hl-display); font-size: 22px; font-weight: 700; }
.hl-widget p { color: var(--hl-muted); line-height: 1.5; }
.hl-button, .hl-widget .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--hl-accent); color: var(--hl-accent-text); font-weight: 700; border: 0; cursor: pointer; }
.hl-button:hover { color: var(--hl-accent-text); filter: brightness(1.08); }

/* ---------- game page ---------- */
.hl-player { overflow: hidden; border-radius: 20px; border: 1px solid var(--hl-line); background: #000; }
.hl-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.hl-board { padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; border-radius: 20px; }
.hl-board-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--hl-muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hl-board-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.hl-board-team { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.hl-board-team .hl-logo { width: 72px; height: 72px; border-radius: 18px; font-size: 28px; }
.hl-board-team-name { font-family: var(--hl-display); font-weight: 700; font-size: 26px; }
.hl-board-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hl-board-status { color: var(--hl-muted); font-weight: 600; font-size: 14px; }
.hl-board-score { font-family: var(--hl-display); font-weight: 800; font-size: 80px; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 640px) {
  .hl-board-score { font-size: 48px; }
  .hl-board-team .hl-logo { width: 52px; height: 52px; }
  .hl-board-team-name { font-size: 18px; }
}
.hl-periods { overflow-x: auto; }
.hl-periods table { margin: 0 auto; border-collapse: collapse; font-size: 15px; text-align: center; }
.hl-periods th { color: var(--hl-muted); font-weight: 500; padding: 4px 12px; }
.hl-periods td { padding: 4px 12px; }
.hl-periods td:first-child, .hl-periods th:first-child { text-align: left; font-weight: 600; padding-left: 0; padding-right: 32px; }
.hl-periods .total { font-weight: 700; }

.hl-tabs { align-self: flex-start; }
.hl-panel h2 { margin-bottom: 20px; }
.hl-stat { display: flex; flex-direction: column; gap: 8px; }
.hl-stat + .hl-stat { margin-top: 18px; }
.hl-stat-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.hl-stat-row .label { color: var(--hl-muted); font-weight: 500; }
.hl-bar { display: flex; gap: 4px; height: 8px; }
.hl-bar span { border-radius: 4px; min-width: 4px; }
.hl-bar .h { background: var(--hl-home); }
.hl-bar .a { background: var(--hl-away); }
.hl-scorers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hl-scorers h3 { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--hl-muted); }
.hl-scorer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; }
.hl-kv { display: flex; justify-content: space-between; gap: 8px; }
.hl-kv + .hl-kv { margin-top: 10px; }
.hl-kv dt { color: var(--hl-muted); }
.hl-kv dd { margin: 0; font-weight: 600; }

/* ---------- generic content (pages/posts) ---------- */
.hl-content { max-width: 760px; }
.hl-content h1 { font-family: var(--hl-display); font-size: 44px; margin: 0 0 16px; }
.hl-content p, .hl-content li { line-height: 1.65; color: var(--hl-body-text); }
.hl-embed iframe { display: block; width: 100%; border-radius: 12px; }

.hl-footer { border-top: 1px solid var(--hl-line); color: var(--hl-muted); font-size: 14px; }
.hl-footer .hl-container { padding-top: 24px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ======================================================================
   v2: multi-sport pages
   ====================================================================== */
.hl-ticker-items { display: flex; gap: 32px; }
.hl-nav ul { gap: 2px; }
.hl-nav a { padding: 0 12px; }

.hl-game.is-race { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.hl-race-title { font-weight: 600; }
.hl-race-sub { color: var(--hl-muted); font-size: 14px; }
.hl-game .hl-date { color: var(--hl-muted); font-size: 13px; }
.hl-league-head a.hl-h2 { color: var(--hl-text); }
.hl-league-head a.hl-h2:hover { color: var(--hl-link); }
.hl-league-head .hl-country { color: var(--hl-muted); font-size: 14px; font-family: var(--hl-body); font-weight: 500; letter-spacing: 0; }

.hl-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px; border-radius: 20px; }
.hl-hero .hl-logo { width: 80px; height: 80px; border-radius: 20px; font-size: 30px; }
.hl-hero-photo { width: 120px; height: 120px; border-radius: 20px; object-fit: cover; background: var(--hl-raise); }
.hl-hero h1 { margin: 0; font-family: var(--hl-display); font-size: 44px; line-height: 1.05; }
.hl-hero .hl-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--hl-muted); }
.hl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 24px; margin: 0; }
.hl-facts div { display: flex; flex-direction: column; gap: 2px; }
.hl-facts dt { color: var(--hl-muted); font-size: 13px; }
.hl-facts dd { margin: 0; font-weight: 600; }
.hl-bio { color: var(--hl-body-text); line-height: 1.6; white-space: pre-line; }

.hl-section { display: flex; flex-direction: column; gap: 12px; }
.hl-section > h2 { margin: 0; font-family: var(--hl-display); font-size: 26px; font-weight: 700; }
.hl-scroll { overflow-x: auto; }
.hl-table-wide { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.hl-table-wide th { color: var(--hl-muted); font-size: 13px; font-weight: 500; text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--hl-line); }
.hl-table-wide td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--hl-line-2); white-space: nowrap; }
.hl-table-wide th:first-child, .hl-table-wide td:first-child { width: 36px; color: var(--hl-muted); }
.hl-table-wide th.l, .hl-table-wide td.l { text-align: left; }
.hl-table-wide tr:last-child td { border-bottom: 0; }
.hl-table-wide .strong { font-weight: 700; }
.hl-teamcell { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--hl-text); }
a.hl-teamcell:hover { color: var(--hl-link); }
.hl-teamcell .hl-logo { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.hl-group-name { margin: 0; padding: 14px 20px 0; color: var(--hl-muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hl-form { display: inline-flex; gap: 3px; }
.hl-form span { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: #0f1115; }
.hl-form .W { background: #4cc38a; } .hl-form .D { background: #a3a9b5; } .hl-form .L { background: #ff7a6b; }

.hl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }

.hl-timeline { list-style: none; margin: 0; padding: 0; }
.hl-timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hl-line-2); }
.hl-timeline li:last-child { border-bottom: 0; }
.hl-timeline .t { color: var(--hl-muted); font-weight: 600; }
.hl-timeline .away { text-align: right; }
.hl-timeline .tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: var(--hl-pill); font-size: 12px; font-weight: 700; }
.hl-timeline .tag.Goal { background: var(--hl-accent); color: var(--hl-accent-text); }
.hl-timeline .tag.Card { background: #e3c13b; color: #1a1406; }

.hl-leaders { list-style: none; margin: 0; padding: 0; }
.hl-leaders li { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hl-line-2); }
.hl-leaders li:last-child { border-bottom: 0; }
.hl-leaders .rank { color: var(--hl-muted); }
.hl-leaders img, .hl-leaders .hl-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--hl-raise); }
.hl-leaders .who { min-width: 0; }
.hl-leaders .who a, .hl-leaders .who span:first-child { display: block; font-weight: 600; color: var(--hl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-leaders .who small { color: var(--hl-muted); }
.hl-leaders .val { font-family: var(--hl-display); font-size: 22px; font-weight: 700; }

.hl-squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hl-person { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--hl-input); color: var(--hl-text); min-width: 0; }
a.hl-person:hover { background: var(--hl-raise); color: var(--hl-text); }
.hl-person img, .hl-person .hl-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.hl-person .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-person small { color: var(--hl-muted); display: block; }

.hl-results { list-style: none; margin: 0; padding: 0; }
.hl-results li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hl-line-2); }
.hl-results li:last-child { border-bottom: 0; }
.hl-results .pos { font-family: var(--hl-display); font-size: 20px; font-weight: 700; color: var(--hl-muted); }
.hl-results .pos.p1 { color: var(--hl-accent); }

.hl-note { color: var(--hl-muted); font-size: 14px; }
.hl-footer-menu { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }

@media (max-width: 640px) {
  .hl-periods th, .hl-periods td { padding: 4px 6px; }
  .hl-periods td:first-child, .hl-periods th:first-child { padding-right: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hl-hero h1 { font-size: 32px; }
  .hl-h1 { font-size: 40px; }
}

/* Player placeholder (no stream linked yet) */
.hl-player-ph { position: relative; aspect-ratio: 16 / 9; background: var(--hl-player-ph); }
.hl-player-ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-player-ph-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; color: var(--hl-muted); }
.hl-player-ph-msg strong { color: var(--hl-text); font-family: var(--hl-display); font-size: 28px; font-weight: 700; }
.hl-ph-live { background: var(--hl-accent); color: var(--hl-accent-text); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.hl-player-ph-msg .hl-button { margin-top: 6px; }
@media (max-width: 520px) { .hl-player-ph-msg strong { font-size: 20px; } }

/* ---------- live indicators & row buttons ---------- */
@keyframes hl-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.75); } }
.hl-live::before { animation: hl-blink 1.2s ease-in-out infinite; }
.hl-go { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--hl-pill); color: var(--hl-text); font-weight: 600; font-size: 14px; white-space: nowrap; }
.hl-game:hover .hl-go { background: var(--hl-chip); }
.hl-go.is-live { background: var(--hl-accent); color: var(--hl-accent-text); }
.hl-go.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hl-accent-text); animation: hl-blink 1.2s ease-in-out infinite; }
.hl-go-arrow { font-size: 18px; line-height: 1; }

.hl-pill-dot { display: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,.6); animation: hl-blink 1.2s ease-in-out infinite; }
.hl-nav a.is-live .hl-pill-dot { display: inline-block; }
.hl-nav a.is-live { color: var(--hl-text); }

.hl-live-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--hl-accent); color: var(--hl-accent-text); font-family: var(--hl-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hl-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hl-accent-text); animation: hl-blink 1.2s ease-in-out infinite; }
.hl-league.has-live { border-color: var(--hl-live-line); }
.hl-subhead { margin: 0; padding: 12px 20px 4px; color: var(--hl-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hl-all { font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hl-live::before, .hl-go.is-live::before, .hl-pill-dot, .hl-live-badge::before { animation: none; } }
.hl-aside .hl-game { grid-template-columns: 64px minmax(0, 1fr) 36px auto; gap: 8px; }
.hl-aside .hl-go-text { display: none; }
.hl-aside .hl-go { padding: 0 10px; }
.hl-live-badge { white-space: nowrap; }
.hl-league-head { flex-wrap: wrap; }
@media (max-width: 520px) {
  .hl-league-head .hl-h2 { font-size: 20px; }
  .hl-all { font-size: 13px; }
}

/* ======================================================================
   v2.3: three-column scores, browse sidebar, news
   ====================================================================== */
.hl-3col { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; grid-template-areas: "dir main side"; gap: 28px; align-items: start; }
.hl-col-dir { grid-area: dir; }
.hl-col-main { grid-area: main; }
.hl-col-side { grid-area: side; }
@media (max-width: 1180px) {
  .hl-3col { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main side" "dir dir"; }
}
@media (max-width: 860px) {
  .hl-3col { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "dir"; }
}

.hl-dir { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 16px; }
@media (max-width: 1180px) { .hl-dir { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.hl-dir-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; color: var(--hl-muted); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hl-dir-title a { color: var(--hl-text); font-size: 20px; line-height: 1; padding: 4px 8px; }
.hl-dir ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-dir-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--hl-card); color: var(--hl-text); font: inherit; text-align: left; cursor: pointer; }
a.hl-dir-item:hover, button.hl-dir-item:hover { background: var(--hl-hover); color: var(--hl-text); }
.hl-dir-item .hl-logo { width: 26px; height: 26px; border-radius: 6px; background: transparent; }
.hl-dir-item .hl-logo-fallback { background: var(--hl-pill); font-size: 11px; }
.hl-dir-item span { display: flex; flex-direction: column; min-width: 0; }
.hl-dir-item strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-dir-item small { color: var(--hl-muted); font-size: 13px; }
.hl-flag { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; flex: none; background: var(--hl-pill); }

.hl-filter { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--hl-pill); font-weight: 600; font-size: 14px; }
.hl-filter button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--hl-chip); color: var(--hl-text); font-size: 18px; line-height: 1; cursor: pointer; }
.hl-more { min-height: 48px; border: 1px dashed var(--hl-chip); border-radius: 14px; background: transparent; color: var(--hl-text); font: inherit; font-weight: 600; cursor: pointer; }
.hl-more:hover { background: var(--hl-card); }

/* Live row: orange bar on the left, like the reference */
.hl-game { position: relative; }
.hl-game.is-live { background: var(--hl-live-bg); }
.hl-game.is-live::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--hl-accent); }
.hl-game.is-live .hl-game-status span:last-child { color: var(--hl-link); font-weight: 700; }

/* Latest news */
.hl-news-wrap { margin-top: 48px; }
.hl-news-heading { margin: 0 0 20px; font-family: var(--hl-display); font-size: 40px; font-weight: 800; }
.hl-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hl-news-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 150px; overflow: hidden; border-radius: 12px; background: var(--hl-card); color: var(--hl-text); }
.hl-news-card:hover { background: var(--hl-hover); color: var(--hl-text); }
.hl-news-card.no-img { grid-template-columns: minmax(0, 1fr); }
.hl-news-img { position: relative; overflow: hidden; background: var(--hl-raise); }
.hl-news-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-news-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; }
.hl-news-body h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-news-body p { margin: 0; color: var(--hl-muted); line-height: 1.5; }
.hl-news-meta { margin-top: auto; display: flex; gap: 16px; color: var(--hl-muted); font-size: 14px; }
.hl-news-meta span + span { padding-left: 16px; border-left: 1px solid var(--hl-line); }
.hl-news-card.is-big { grid-column: 1; grid-row: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-top: 3px solid var(--hl-accent); }
.hl-news-card.is-big .hl-news-img { aspect-ratio: 16 / 9; }
.hl-news-card.is-big h3 { font-size: 24px; -webkit-line-clamp: 4; }
@media (max-width: 860px) {
  .hl-news { grid-template-columns: minmax(0, 1fr); }
  .hl-news-card.is-big { grid-row: auto; }
  .hl-news-card { grid-template-columns: 110px minmax(0, 1fr); min-height: 110px; }
  .hl-news-body h3 { font-size: 16px; }
  .hl-news-heading { font-size: 30px; }
}
.hl-dir-more { margin-top: 6px; width: 100%; min-height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--hl-link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hl-dir-more:hover { background: var(--hl-card); }

/* Latest news in the right sidebar */
.hl-news-wrap.is-side { margin-top: 0; }
.hl-news-wrap.is-side .hl-news { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hl-news-wrap.is-side .hl-news-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 88px; background: var(--hl-input); border-radius: 10px; }
.hl-news-wrap.is-side .hl-news-card:hover { background: var(--hl-raise); }
.hl-news-wrap.is-side .hl-news-card.no-img { grid-template-columns: minmax(0, 1fr); }
.hl-news-wrap.is-side .hl-news-body { padding: 10px 12px; gap: 6px; }
.hl-news-wrap.is-side .hl-news-body h3 { font-size: 15px; -webkit-line-clamp: 3; }
.hl-news-wrap.is-side .hl-news-meta { font-size: 12px; gap: 10px; }
.hl-news-wrap.is-side .hl-news-meta span + span { padding-left: 10px; }
.hl-news-wrap.is-side .hl-news-card.is-big { grid-row: auto; grid-template-columns: minmax(0, 1fr); border-top-width: 3px; }
.hl-news-wrap.is-side .hl-news-card.is-big h3 { font-size: 18px; }
.hl-news-wrap.is-side .hl-news-card.is-big p { font-size: 14px; }

.hl-admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px dashed var(--hl-live-line); border-radius: 14px; background: var(--hl-live-bg); color: var(--hl-muted); }
.hl-admin-bar span { color: var(--hl-text); font-weight: 600; }
.hl-admin-bar small { font-size: 13px; }

/* ---------- Live chat (2.9) ---------- */
.hl-watch { display: grid; gap: 16px; }
.hl-watch.has-chat { grid-template-columns: minmax(0, 1fr) 340px; }
.hl-watch > .hl-player[hidden] + .hl-chat { grid-column: 1 / -1; }
.hl-watch.has-chat.no-player { grid-template-columns: 1fr; }
.hl-chat { position: relative; min-height: 360px; background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 20px; overflow: hidden; }
.hl-watch.no-player .hl-chat { height: 480px; }
.hl-chat-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hl-chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hl-line); }
.hl-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .18); flex: none; }
.hl-chat-title { margin: 0; font-family: var(--hl-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.hl-chat-online { color: var(--hl-muted); font-size: 13px; }
.hl-chat-rules-btn { margin-left: auto; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hl-line); background: var(--hl-pill); color: var(--hl-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hl-chat-rules-btn[aria-expanded="true"] { background: var(--hl-accent); color: var(--hl-accent-text); border-color: transparent; }
.hl-chat-rules { padding: 10px 14px; border-bottom: 1px solid var(--hl-line); background: var(--hl-head); font-size: 13px; color: var(--hl-muted); max-height: 45%; overflow: auto; }
.hl-chat-rules p { margin: 0 0 6px; }
.hl-chat-rules ul { margin: 0 0 6px; padding-left: 18px; }
.hl-chat-rules li { margin: 2px 0; }
.hl-chat-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 8px 14px; list-style: none; overscroll-behavior: contain; }
.hl-chat-msg { position: relative; padding: 4px 0; line-height: 1.4; font-size: 14px; overflow-wrap: anywhere; }
.hl-chat-time { color: var(--hl-faint); font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.hl-chat-nick { margin-right: 6px; }
.hl-chat-nick::after { content: ":"; color: var(--hl-faint); }
.hl-chat-badge { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; background: var(--hl-accent); color: var(--hl-accent-text); font-size: 10px; font-weight: 800; vertical-align: 1px; }
.hl-chat-msg.is-mod .hl-chat-nick { color: var(--hl-link); }
.hl-chat-empty { color: var(--hl-muted); font-size: 14px; padding: 12px 0; }
.hl-chat-tools { display: none; margin-left: 6px; }
.hl-chat-msg:hover .hl-chat-tools, .hl-chat-msg:focus-within .hl-chat-tools { display: inline; }
.hl-chat-tools button { margin-left: 4px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--hl-line); background: var(--hl-pill); color: var(--hl-text); font: inherit; font-size: 12px; cursor: pointer; }
.hl-chat-err { margin: 0 14px 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, #e5283c 14%, transparent); color: var(--hl-error, #ff8f99); font-size: 13px; line-height: 1.4; }
.hl-chat-foot { padding: 10px 14px 12px; border-top: 1px solid var(--hl-line); }
.hl-chat-form { display: flex; gap: 8px; }
.hl-chat-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hl-line); background: var(--hl-input); color: var(--hl-text); font: inherit; font-size: 16px; }
.hl-chat-input:focus { outline: 2px solid var(--hl-accent); outline-offset: 1px; }
.hl-chat-send { min-width: 72px; padding: 0 14px; }
.hl-chat-send:disabled { opacity: .55; cursor: not-allowed; }
.hl-chat-hint { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; color: var(--hl-muted); font-size: 12px; }
.hl-chat-hint strong { color: var(--hl-text); }
.hl-chat-sp { flex: 1; }
.hl-chat-count { font-variant-numeric: tabular-nums; color: var(--hl-faint); }
.hl-chat-link { padding: 0; border: 0; background: none; color: var(--hl-link); font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 1000px) {
  .hl-watch.has-chat { grid-template-columns: 1fr; }
  .hl-chat { min-height: 0; height: 420px; }
}
.hl-chat-rules-foot { display: flex; align-items: center; gap: 8px; }
.hl-chat-rules-foot .hl-chat-hint { margin: 0; flex: 1; }
.hl-chat-rules-foot .hl-chat-rules-btn { margin-left: 0; flex: none; }

/* ---------- App bar + footer (2.10) ---------- */
.hl-appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--hl-line); background: linear-gradient(100deg, color-mix(in srgb, var(--hl-accent) 16%, transparent), transparent 60%), var(--hl-card); }
.hl-appbar-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; background: var(--hl-pill); }
.hl-appbar-copy, .hl-footer-app-copy > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.hl-appbar-copy strong, .hl-footer-app-copy strong { font-family: var(--hl-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; color: var(--hl-text); }
.hl-appbar-copy span, .hl-footer-app-copy span { color: var(--hl-muted); font-size: 15px; line-height: 1.35; }
.hl-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.hl-store { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--hl-store-text); font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.hl-store:hover, .hl-store:focus-visible { background: var(--hl-hover); color: var(--hl-store-text); transform: translateY(-1px); }
.hl-store svg { flex: none; width: 24px; height: 24px; }
.hl-store-app_store svg, .hl-store-amazon svg { color: var(--hl-text); }
.hl-store-txt { display: flex; flex-direction: column; line-height: 1.05; }
.hl-store-txt small { display: none; }
.hl-store-txt strong { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
/* "Store badges" style (Hoopline → App & legal pages) */
.hl-stores.is-badges .hl-store { min-height: 48px; padding: 6px 14px 6px 11px; background: #000; border-color: #5b5f68; color: #fff; font-weight: 400; }
.hl-stores.is-badges .hl-store:hover { border-color: #fff; }
.hl-stores.is-badges .hl-store svg { width: 22px; height: 22px; }
.hl-stores.is-badges .hl-store-app_store svg, .hl-stores.is-badges .hl-store-amazon svg { color: #fff; }
.hl-stores.is-badges .hl-store-txt small { display: block; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; opacity: .85; }
.hl-stores.is-badges .hl-store-txt strong { font-weight: 600; letter-spacing: -.01em; }
.hl-footer-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px !important; padding-bottom: 24px !important; border-bottom: 1px solid var(--hl-line); }
.hl-footer-app-copy { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; }
.hl-footer-bottom { align-items: center; }
.hl-footer-bottom nav { display: contents; }
.hl-footer-menu { flex-wrap: wrap; }
.hl-footer-menu a { color: var(--hl-muted); }
.hl-footer-menu a:hover { color: var(--hl-text); }
@media (max-width: 600px) {
  .hl-appbar { padding: 14px; }
  .hl-stores { width: 100%; }
  .hl-stores.is-badges .hl-store { flex: 1 1 150px; justify-content: center; }
  .hl-footer-bottom { flex-direction: column; align-items: flex-start; }
}
.hl-watch > .hl-appbar { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .hl-watch > .hl-player { order: 1; }
  .hl-watch > .hl-appbar { order: 2; }
  .hl-watch > .hl-chat { order: 3; }
}

/* ---------- Dark / white switch (2.12) ---------- */
.hl-mode { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--hl-line); background: var(--hl-input); color: var(--hl-text); cursor: pointer; transition: background .15s; }
.hl-mode:hover { background: var(--hl-hover); }
.hl-mode:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 2px; }
.hl-mode-moon { display: none; }
:root[data-theme="light"] .hl-mode-sun { display: none; }
:root[data-theme="light"] .hl-mode-moon { display: block; }
:root[data-theme="light"] .hl-header { box-shadow: 0 1px 0 var(--hl-line); }
:root[data-theme="light"] .hl-card, :root[data-theme="light"] .hl-chat, :root[data-theme="light"] .hl-appbar { box-shadow: 0 1px 2px rgba(10, 30, 50, .06); }
@media (max-width: 720px) { .hl-search { flex: 1 1 0; min-width: 0; } }
.hl-mark { color: var(--hl-accent); flex: none; }
:root[data-theme="dark"] .hl-mark { color: var(--hl-link); }
.hl-widget input[type="search"], .hl-widget input[type="text"], .hl-widget select { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hl-line); background: var(--hl-input); color: var(--hl-text); font: inherit; }
.hl-widget .wp-block-search__button, .hl-widget button, .hl-widget input[type="submit"] { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--hl-accent); color: var(--hl-accent-text); font: inherit; font-weight: 700; cursor: pointer; }