/* ==========================================================================
   LIVE-STREAMS WIDGET  (game-hub "Live on Twitch" module)
   All rules scoped under .live-feed so nothing leaks into the rest of the site.
   Uses the design tokens defined in style.css :root (loaded first).
   Docs: docs/CONTENT-PLAYBOOK.md §I
   ========================================================================== */
.live-feed { position: relative; margin: 3rem 0; }
/* #live anchor target (game-hub widget): offset so the sticky header doesn't cover
   the top when arriving via /<hub>/#live from the homepage "What to watch" links. */
.live-feed[data-game] { scroll-margin-top: 90px; }
.live-feed::before {
    content: ''; position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--c-neon-cyan), transparent);
}
.live-feed .lsw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.live-feed .lsw-title h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0.4rem 0 0; }
.live-feed .lsw-title h2 .accent { color: var(--c-accent); }
.live-feed .lsw-title p { color: var(--c-text-secondary); font-size: 1rem; margin: 0.3rem 0 0; max-width: 52ch; }
.live-feed .lsw-event-line { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-neon-gold); margin-top: 0.5rem; display: none; }
.live-feed .lsw-event-line.show { display: block; }

.live-feed .lsw-sort {
    font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.45rem 0.85rem; border-radius: 50px; border: 1px solid var(--c-border); background: var(--c-bg-card);
    color: var(--c-text-secondary); cursor: pointer; transition: all 0.2s ease;
}
.live-feed .lsw-sort:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* notices (fallback states) */
.live-feed .lsw-notice { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; border-radius: var(--border-radius-sm); font-size: 0.88rem; margin-bottom: 1.4rem; }
.live-feed .lsw-notice[hidden] { display: none; }
.live-feed .lsw-notice.info { background: rgba(145,70,255,0.08); border: 1px solid rgba(145,70,255,0.3); color: var(--c-text-secondary); }
.live-feed .lsw-notice.warn { background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.35); color: var(--c-neon-orange); }
.live-feed .lsw-notice b { color: var(--c-text-primary); }

/* grid + cards */
.live-feed .lsw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.live-feed .lsw-card {
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--border-radius);
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.live-feed .lsw-card:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: var(--glow-cyan); }
.live-feed .lsw-card.is-event { border-color: rgba(255,215,0,0.4); }
.live-feed .lsw-card.is-event:hover { border-color: var(--c-neon-gold); box-shadow: 0 0 20px rgba(255,215,0,0.35); }

.live-feed .lsw-thumb {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(160deg, #14141d 0%, #0b0b10 100%);
}
.live-feed .lsw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(40%) brightness(0.92) contrast(1.04); transition: filter 0.4s ease, transform 0.4s ease; }
.live-feed .lsw-card:hover .lsw-thumb img { filter: grayscale(0%) brightness(1) contrast(1.08); transform: scale(1.03); }

.live-feed .lsw-badges { position: absolute; top: 0.55rem; left: 0.55rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; z-index: 1; }
.live-feed .lsw-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 0.2rem 0.45rem; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.live-feed .lsw-badge.live { background: var(--c-neon-red); }
.live-feed .lsw-badge.clip { background: var(--c-twitch); }
.live-feed .lsw-badge.event { background: linear-gradient(135deg, var(--c-neon-gold), var(--c-neon-orange)); color: #0d0d0f; }
.live-feed .lsw-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: lsw-pulse 1.5s ease-in-out infinite; }
@keyframes lsw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.live-feed .lsw-metric { position: absolute; top: 0.55rem; right: 0.55rem; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.7rem; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0,0,0,0.6); padding: 0.2rem 0.45rem; border-radius: 4px; z-index: 1; }
.live-feed .lsw-metric::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-neon-red); }
.live-feed .lsw-metric.views::before { background: var(--c-twitch); }
.live-feed .lsw-corner { position: absolute; bottom: 0.55rem; right: 0.55rem; font-family: var(--font-mono); font-size: 0.66rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.55); padding: 0.12rem 0.35rem; border-radius: 3px; z-index: 1; }

.live-feed .lsw-body { display: flex; gap: 0.7rem; padding: 0.85rem 0.9rem 1rem; }
.live-feed .lsw-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: #0d0d0f; outline: 2px solid var(--c-accent); }
.live-feed .lsw-meta { min-width: 0; }
.live-feed .lsw-name { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; line-height: 1.3; color: var(--c-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.2rem; }
.live-feed .lsw-chan { font-size: 0.8rem; color: var(--c-text-secondary); font-weight: 500; }
.live-feed .lsw-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.live-feed .lsw-tag { font-family: var(--font-mono); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-text-muted); background: var(--c-bg-elevated); border: 1px solid var(--c-border); padding: 0.15rem 0.45rem; border-radius: 50px; }
.live-feed .lsw-tag.first { color: var(--c-neon-lime); border-color: rgba(0,255,136,0.3); background: rgba(0,255,136,0.07); }
.live-feed .lsw-tag.clip { color: var(--c-twitch); border-color: rgba(145,70,255,0.3); background: rgba(145,70,255,0.08); }

/* divider labels between event cluster and normal streams */
.live-feed .lsw-rowlabel { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-muted); margin: 0.1rem 0 -0.4rem; }
.live-feed .lsw-rowlabel::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.live-feed .lsw-rowlabel.event { color: var(--c-neon-gold); }

/* skeleton (initial load) */
.live-feed .lsw-skel { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--border-radius); aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.live-feed .lsw-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.05) 50%, transparent 80%); background-size: 200% 100%; animation: lsw-shimmer 1.2s linear infinite; }
@keyframes lsw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* footer */
.live-feed .lsw-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.live-feed .lsw-all { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--c-twitch); padding: 0.75rem 1.4rem; border-radius: var(--border-radius-sm); text-decoration: none; transition: all 0.2s ease; }
.live-feed .lsw-all:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(145,70,255,0.5); }
.live-feed .lsw-all svg { width: 15px; height: 15px; fill: currentColor; }
.live-feed .lsw-note { font-size: 0.75rem; color: var(--c-text-muted); max-width: 52ch; line-height: 1.5; margin: 0; }

/* ---- betting-events module (#49): live table under "Bet on Your Favorite Esports" ---- */
.live-feed.betting-feed .lsw-title h3.lsw-h { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.01em; margin: 0.3rem 0 0; }
.live-feed.betting-feed .lsw-grid { display: block; }   /* betting module holds a table, not the card grid — scoped so the per-game hub widget keeps its 3-up grid */

/* CSS-only scroll shadows (Lea Verou technique): the right-edge shadow appears
   whenever the table is scrolled off to the right and fades out at the end, so
   mobile users can tell the Bet column is hiding past the edge. */
.live-feed .bc-tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border); border-radius: var(--border-radius);
    background:
        linear-gradient(to right, var(--c-bg-card) 30%, rgba(0,0,0,0)) 0 0,
        linear-gradient(to left,  var(--c-bg-card) 30%, rgba(0,0,0,0)) 100% 0,
        radial-gradient(farthest-side at 0    50%, rgba(0,0,0,0.35), rgba(0,0,0,0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: var(--c-bg-card);
}
.live-feed .bc-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9rem; }
.live-feed .bc-table thead th { text-align: left; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); font-weight: 600; padding: 0.8rem 1rem; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.live-feed .bc-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.live-feed .bc-table tbody tr:last-child td { border-bottom: none; }
.live-feed .bc-row { transition: background 0.2s ease; }
.live-feed .bc-row:hover { background: var(--c-bg-elevated); }
.live-feed .bc-row.is-event { box-shadow: inset 3px 0 0 var(--c-neon-gold); }

.live-feed .lsw-badge.game { position: static; box-shadow: none; background: rgba(255,255,255,0.06); color: var(--c-text-secondary); border: 1px solid var(--c-border); white-space: nowrap; }

/* Game column: small live Twitch preview + game name under it (clickable → stream) */
.live-feed .bc-c-game { width: 1%; }
.live-feed .bc-gamecell { display: inline-flex; flex-direction: column; gap: 0.4rem; text-decoration: none; width: 104px; }
.live-feed .bc-gamethumb { position: relative; width: 104px; aspect-ratio: 16 / 9; border-radius: var(--border-radius-sm); overflow: hidden; background: var(--c-bg-elevated); border: 1px solid var(--c-border); }
.live-feed .bc-gamethumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.live-feed .bc-gamethumb::after { content: '\25B6'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; background: rgba(0,0,0,0.28); opacity: 0; transition: opacity 0.2s ease; }
.live-feed .bc-gamecell:hover .bc-gamethumb::after { opacity: 1; }
.live-feed .bc-gamecell:hover .bc-gamethumb img { transform: scale(1.05); }
.live-feed .bc-gamethumb.is-empty { background: linear-gradient(135deg, #9146ff, var(--c-neon-cyan)); }
.live-feed .bc-gamename { font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; color: var(--c-text-secondary); line-height: 1.2; }
.live-feed .bc-gamecell:hover .bc-gamename { color: var(--c-accent); }
.live-feed .bc-c-what { padding: 0 !important; }
.live-feed .bc-what-link { display: block; padding: 0.85rem 1rem; text-decoration: none; color: inherit; }
.live-feed .bc-what-link:hover .bc-what { color: var(--c-accent); }
.live-feed .bc-c-what .lsw-badge { position: static; box-shadow: none; margin-bottom: 0.4rem; }
.live-feed .bc-what { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--c-text-primary); max-width: 34ch; transition: color 0.2s ease; }
.live-feed .bc-chan { font-size: 0.78rem; color: var(--c-text-muted); margin-top: 0.15rem; }
.live-feed .bc-chan b { color: var(--c-text-secondary); font-weight: 600; }
.live-feed .bc-c-why { color: var(--c-text-secondary); max-width: 34ch; line-height: 1.45; }
.live-feed .bc-c-view { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-text-primary); white-space: nowrap; }

.live-feed .bc-skel { height: 52px; border-bottom: 1px solid var(--c-border); position: relative; overflow: hidden; background: var(--c-bg-card); }
.live-feed .bc-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.05) 50%, transparent 80%); background-size: 200% 100%; animation: lsw-shimmer 1.2s linear infinite; }
.live-feed .lsw-all--bet { background: var(--c-accent); color: #0d0d0f; }
.live-feed .lsw-all--bet:hover { box-shadow: var(--glow-cyan); }
@media (max-width: 640px) {
    .live-feed .bc-h-why, .live-feed .bc-c-why { display: none; }
    .live-feed .bc-table { min-width: 560px; }
}
/* per-game hub widget (#72): break the Twitch grid out of the 900px article
   reading column on wide screens so it spans near-full-bleed and keeps adding
   columns as the viewport grows. Scoped to [data-game] so the homepage betting
   table (.betting-feed) is untouched. */
@media (min-width: 1024px) {
    /* Only the card grid breaks out to near-full-bleed; the header (badge/title/
       subtitle) and footer stay in the article reading column so they line up
       with the surrounding body copy.
       Centre on the viewport, not on the parent reading column: the article body
       (max 900px) sits left-aligned inside the 1000px content container (2x1.5rem
       padding), so its centre is offset (1000 - 3rem - 900)/2 = 26px left of the
       viewport centre; add that back to land dead-centre. */
    .live-feed[data-game] .lsw-grid {
        width: 100vw;
        margin-left: calc(50% - 50vw + (1000px - 3rem - 900px) / 2);
        margin-right: calc(50% - 50vw - (1000px - 3rem - 900px) / 2);
        padding-inline: 2rem;
        box-sizing: border-box;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

.live-feed[hidden] { display: none; }
@media (max-width: 560px) {
    .live-feed .lsw-head { flex-direction: column; align-items: flex-start; }
    .live-feed .lsw-grid { grid-template-columns: 1fr; }
}

/* ---- freshness cues (game hub): recency label, card-flash on auto-refresh, and
   the "Live on Twitch" badge warming from cyan to bright red in the ~15s before a
   refresh so the streams read as live/cycling, not static. Auto-disabled under the
   reduced-motion guard below. ---- */
.live-feed[data-game] .lsw-updated { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--c-text-muted); margin: 0.5rem 0 0; }
@keyframes lsw-cardin { from { opacity: 0.3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.live-feed[data-game] .lsw-grid.lsw-flash .lsw-card { animation: lsw-cardin 0.55s ease both; }
@keyframes lsw-due-ramp {
    0%   { background: rgba(0,212,255,0.1);  border-color: rgba(0,212,255,0.3);  color: var(--c-accent); box-shadow: none; }
    100% { background: rgba(255,51,102,0.16); border-color: rgba(255,51,102,0.85); color: var(--c-neon-red); box-shadow: 0 0 14px 1px rgba(255,51,102,0.55); }
}
@keyframes lsw-due-dot {
    0%   { background: var(--c-accent);   box-shadow: 0 0 0 0 rgba(255,51,102,0); }
    100% { background: var(--c-neon-red); box-shadow: 0 0 8px 2px rgba(255,51,102,0.9); }
}
.live-feed[data-game] .section-badge.lsw-due { animation: lsw-due-ramp 15s ease-in forwards; }
.live-feed[data-game] .section-badge.lsw-due .badge-dot { animation: lsw-due-dot 15s ease-in forwards; }

@media (prefers-reduced-motion: reduce) { .live-feed *, .live-feed *::before, .live-feed *::after { animation: none !important; transition: none !important; } }