* { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            /* Backgrounds — warm dark, not dead black */
            --bg: #0f1012;
            --bg-card: #16171a;
            --bg-card-hover: #1c1d21;
            --bg-hover: #1c1d21;
            --bg-surface: #131416;
            /* Borders — warm, slightly visible */
            --border: rgba(255,255,255,0.07);
            --border-hover: rgba(255,255,255,0.12);
            /* Text hierarchy — warm greys, not cold.
             * Third bump tonight. Earlier rounds (#5c5753 → #8a847f → #b8b0a8)
             * each satisfied successively stricter contrast targets and Sean
             * still reported "text is grey or faint." Visual hierarchy on the
             * chrome (WINDOW pills, Sort buttons, genre chips, filter tabs)
             * is carried entirely by the active-state background pill —
             * inactive vs active doesn't need ANOTHER cue from text dimming.
             *
             * Pulling muted + secondary to near-white. The remaining
             * brightness drop from --text is small enough to read as "same
             * tier of UI chrome" rather than "this text is less important
             * than that text." Hierarchy moves to weight, size, and pill.
             *
             *   --text          #e8e6e3  primary (game names, logo)
             *   --text-secondary #dcd6cf  sub-labels (evidence, headline)
             *   --text-muted    #d4cec7  chrome (inactive tabs, labels)
             */
            --text: #e8e6e3;
            --text-secondary: #dcd6cf;
            --text-muted: #d4cec7;
            /* Semantic colors — slightly warmer */
            --steam: #4a90e2;
            --twitch: #9147ff;
            --kick: #53fc18;
            --danger: #e85d5d;
            --warning: #e8a84a;
            --success: #3dbd6e;
            --info: #4a90e2;
            --purple: #a78bfa;
            --orange: #e88d3a;
            /* CTA — warm blue */
            --cta: #4a90e2;
            --cta-hover: #6ba3e8;
            /* Type scale */
            --font-display: 24px;
            --font-h1: 18px;
            --font-h2: 15px;
            --font-body: 13px;
            --font-small: 12px;
            --font-xs: 11px;
            /* Spacing scale */
            --space-section: 32px;
            --space-card-gap: 12px;
            --space-card-pad: 16px;
            --space-element: 12px;
            --space-tight: 8px;
            /* Backward compat aliases */
            --accent: var(--cta);
            --hot: var(--danger);
            --rising: var(--success);
            --falling: var(--orange);
            --new: var(--purple);
            --green: var(--success);
            --red: var(--danger);
            --yellow: var(--warning);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 13px;
            line-height: 1.55;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            font-variant-numeric: tabular-nums;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* ============ LIVE ACTIVITY TICKER ============ */
        /* === THE TAPE (go-wild Act I, 2026-07-11) ===
           Resurrects the previously-killed ticker as the signature market tape:
           monospace, red/green glyphs only, observed crossings with receipts.
           Freezes (greyed, paused) whenever the pipeline isn't live. */
        .live-ticker {
            display: flex;
            align-items: stretch;
            border-bottom: 1px solid var(--border);
            background: #0c0c0f;
            font-family: "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
            font-size: 12px;
        }
        .live-ticker.tape-stale .ticker-items {
            opacity: 0.4;
            filter: grayscale(0.6);
        }
        .live-ticker.tape-stale .ticker-label {
            background: var(--falling, #e85d5d);
        }
        .live-ticker.tape-stale .ticker-label::after {
            content: " · STALE";
        }
        .tape-name { font-weight: 700; color: var(--text); }
        .tape-up { color: var(--rising, #3dbd6e); }
        .tape-down { color: var(--falling, #e85d5d); }
        .tape-dim { color: var(--text-muted); }
        .tape-sep { color: #33333c; margin: 0 14px; }
        .tape-entry { cursor: pointer; }
        .tape-entry:hover .tape-name { text-decoration: underline; }

        .ticker-label {
            background: #1a1a20;
            color: var(--text-secondary);
            padding: 4px 12px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.4px;
            font-variant-numeric: tabular-nums;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            z-index: 2;
            white-space: nowrap;
        }

        .ticker-pulse {
            width: 7px;
            height: 7px;
            background: var(--rising, #3dbd6e);
            border-radius: 50%;
            animation: tickerPulse 1.5s ease-in-out infinite;
        }

        @keyframes tickerPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .ticker-track {
            flex: 1;
            overflow: hidden;
            position: relative;
            mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
        }

        .ticker-items {
            display: flex;
            align-items: center;
            gap: 0; /* tape separators handle spacing */
            white-space: nowrap;
            /* No leading 100% padding (was the eyeline dead-space: the strip
             * started fully off-screen and the row sat empty most of the time).
             * Content starts filled at x=0 and loops seamlessly. */
            padding: 6px 0;
            /* Animation controlled by JS for smooth pause/resume */
        }

        .ticker-items.paused {
            /* Paused state - transform preserved by JS */
        }

        @keyframes tickerScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .ticker-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 4px;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .ticker-item:hover {
            background: var(--bg-hover);
        }

        .ticker-item.hot { color: var(--hot); }
        .ticker-item.rising { color: var(--rising); }
        .ticker-item.falling { color: var(--falling); }
        .ticker-item.new { color: var(--new); }

        .ticker-game {
            font-weight: 600;
            color: var(--text);
        }

        .ticker-event {
            color: var(--text-secondary);
        }

        .ticker-value {
            font-weight: 700;
        }

        .ticker-time {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* ============ ANIMATED NUMBER COUNTER ============ */
        .animated-number {
            display: inline-block;
            transition: all 0.3s ease;
        }

        .animated-number.changing {
            animation: numberBounce 0.4s ease;
        }

        @keyframes numberBounce {
            0% { transform: scale(1); }
            30% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .stat-value.pulsing {
            animation: valuePulse 2s ease-in-out infinite;
        }

        @keyframes valuePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Compact Header */
        .header {
            background: rgba(12, 12, 13, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 0 16px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-weight: 600;
            font-size: 15px;
            color: var(--text);
            letter-spacing: -0.02em;
            text-decoration: none;
        }

        .alpha-tag { display: none; }

        .header-nav { display: flex; align-items: center; gap: 2px; margin-left: 16px; }
        .header-nav a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 4px; transition: all 0.15s; }
        .header-nav a:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }

        .stats-row {
            display: flex;
            gap: 12px;
            font-size: 12px;
        }

        .stat {
            color: var(--text-secondary);
        }

        .stat-value {
            color: var(--text);
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .stat-value.hot { color: var(--hot); }
        .stat-value.rising { color: var(--rising); }

        .stat-value.updating {
            animation: statPulse 0.5s ease;
        }

        @keyframes statPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); color: var(--accent); }
            100% { transform: scale(1); }
        }

        .live-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: var(--text-muted);
        }

        .live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--rising);
            animation: pulse 2s infinite;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-box {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 5px 10px;
            color: var(--text);
            font-size: 12px;
            width: 220px;
        }

        .search-box:focus {
            outline: none;
            border-color: var(--accent);
        }

        .btn {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px 10px;
            color: var(--text);
            font-size: 11px;
            cursor: pointer;
        }

        .btn:hover { background: var(--bg-hover); }
        .btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
        .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
        .btn-accent:hover { background: #79c0ff; }

        .live-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: var(--rising);
        }

        .live-dot {
            width: 6px;
            height: 6px;
            background: var(--rising);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Since Your Last Visit Panel */
        .since-panel {
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
            padding: 6px 12px;
            display: none; /* hidden by default, shown via JS */
            align-items: center;
            gap: 12px;
            font-size: 11px;
        }
        .since-panel.visible { display: flex; }
        .since-panel-label {
            color: #7eb8da;
            font-weight: 700;
            font-size: 10px;
            /* uppercase removed — de-slop */
            white-space: nowrap;
        }
        .since-panel-stats {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            flex: 1;
        }
        .since-stat {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #a0a0b8;
        }
        .since-stat-value {
            color: #fff;
            font-weight: 600;
        }
        .since-stat-value.positive { color: #4ade80; }
        .since-stat-value.negative { color: #f87171; }
        .since-movers {
            display: flex;
            gap: 8px;
            overflow: hidden;
        }
        .since-mover {
            background: rgba(255,255,255,0.05);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            color: #c0c0d0;
            white-space: nowrap;
        }
        .since-mover .mover-name { color: #fff; font-weight: 600; }
        .since-dismiss {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 14px;
            padding: 2px 6px;
        }
        .since-dismiss:hover { color: #fff; }

        /* Filter Bar */
        /* === Unified utility bar (2026-07-11) === */
        .utility-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 7px 16px;
            border-bottom: 1px solid var(--border);
            background: transparent;
        }
        .ub-tabs { display: flex; gap: 2px; }
        .ub-tab {
            background: transparent; border: none; color: var(--text-muted);
            font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 3px;
            cursor: pointer; font-family: inherit; display: flex; align-items: baseline; gap: 5px;
            transition: background .12s, color .12s;
        }
        .ub-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
        .ub-tab.active { color: var(--text); background: rgba(255,255,255,0.07); }
        .ub-tab .count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .ub-tab.active .count { color: var(--text-secondary); }

        .ub-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
        .ub-search {
            width: 200px; max-width: 34vw; font-size: 12px; padding: 6px 10px;
            border-radius: 3px; background: var(--bg-card, rgba(255,255,255,0.04));
            border: 1px solid var(--border); color: var(--text);
        }
        .ub-menu-wrap { position: relative; }
        .ub-menu-btn {
            background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
            font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 3px;
            cursor: pointer; font-family: inherit; white-space: nowrap;
        }
        .ub-menu-btn:hover { color: var(--text); border-color: var(--border-hover, rgba(255,255,255,0.2)); }
        .ub-active-dot {
            display: inline-block; width: 6px; height: 6px; border-radius: 50%;
            background: var(--primary, #3d8bfd); margin-left: 2px; vertical-align: middle;
        }
        .ub-menu {
            position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
            background: var(--bg-elevated, #17171b); border: 1px solid var(--border);
            border-radius: 5px; padding: 10px; min-width: 220px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        .ub-menu-section { margin-bottom: 12px; }
        .ub-menu-section:last-child { margin-bottom: 0; }
        .ub-menu-label {
            font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
            color: var(--text-muted); font-weight: 600; margin-bottom: 6px;
        }
        .ub-menu-item, .ub-menu .sort-btn {
            display: inline-flex; align-items: center; gap: 5px;
            background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
            font-size: 12px; padding: 5px 10px; border-radius: 3px; cursor: pointer;
            font-family: inherit; margin: 0 4px 4px 0;
        }
        .ub-menu-item:hover, .ub-menu .sort-btn:hover { color: var(--text); border-color: var(--border-hover, rgba(255,255,255,0.25)); }
        .ub-menu-item.active, .ub-menu .sort-btn.active { background: rgba(255,255,255,0.08); color: var(--text); border-color: transparent; }

        .filter-bar {
            background: transparent;
            padding: 6px 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--border);
        }

        .filter-group {
            display: flex;
            gap: 2px;
        }

        .filter-btn {
            background: transparent;
            border: none;
            border-radius: 3px;
            padding: 6px 12px;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }

        .filter-btn:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
        .filter-btn.active { background: rgba(255,255,255,0.06); color: var(--text); }

        .time-window-pill {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 2px;
            padding: 3px 8px;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }
        .time-window-pill:hover { color: var(--text-secondary); border-color: var(--text-muted); }
        .time-window-pill.active {
            background: rgba(255,255,255,0.06);
            color: var(--text);
            border-color: var(--text-secondary);
        }

        .filter-btn .count {
            margin-left: 4px;
            color: var(--text-muted);
            font-size: 11px;
            display: inline-block;
        }

        .filter-btn .count.changing {
            animation: numberBounce 0.4s ease;
        }

        .filter-btn.signal-gap {
            background: var(--hot);
            border-color: transparent;
            color: #fff;
            font-weight: 600;
        }

        .filter-btn.signal-gap:hover {
            opacity: 0.9;
        }

        .load-more-btn {
            background: var(--accent);
            color: #000;
            border: none;
            border-radius: 4px;
            padding: 10px 24px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .load-more-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* Signal Gaps Panel */
        .signal-gaps-panel {
            display: none;
            padding: 8px;
        }

        .signal-gaps-panel.active {
            display: block;
        }

        .signal-gap-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            gap: 10px;
        }

        .signal-gap-header h2 {
            font-size: 16px;
            font-weight: 700;
        }

        .signal-gap-actions, .deals-actions {
            display: flex;
            gap: 8px;
        }

        .btn-sm {
            padding: 4px 12px;
            font-size: 11px;
            border-radius: 4px;
            background: var(--accent);
            color: #000;
            border: none;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-sm:hover { opacity: 0.9; }
        .btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-sm.loading { position: relative; color: transparent; }
        .btn-sm.loading::after {
            content: "";
            position: absolute;
            width: 12px; height: 12px;
            border: 2px solid rgba(0,0,0,0.3);
            border-top-color: #000;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            top: 50%; left: 50%;
            margin: -6px 0 0 -6px;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .deals-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .deals-header h2 {
            font-size: 16px;
            font-weight: 700;
        }

        .empty-state-action {
            margin-top: 16px;
        }

        .empty-state-action .btn-sm {
            font-size: 12px;
            padding: 8px 20px;
        }

        .signal-gap-filters {
            display: flex;
            gap: 6px;
        }

        .signal-filter-btn {
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-size: 10px;
            cursor: pointer;
        }

        .signal-filter-btn.active {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
        }

        .signal-gap-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 12px;
        }

        .signal-gap-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }

        .signal-gap-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .signal-gap-card.velocity_spike { border-left: 4px solid var(--rising); }
        .signal-gap-card.coverage_gap { border-left: 4px solid var(--accent); }
        .signal-gap-card.timing_window { border-left: 4px solid var(--new); }
        .signal-gap-card.novelty { border-left: 4px solid var(--hot); }
        .signal-gap-card.hot_game { border-left: 4px solid var(--hot); }

        .signal-card-header {
            display: flex;
            gap: 12px;
            padding: 12px;
        }

        .signal-thumb {
            width: 100px;
            height: 47px;
            border-radius: 4px;
            object-fit: cover;
            background: var(--bg);
        }

        .signal-thumb-placeholder {
            width: 100px;
            height: 47px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: rgba(255,255,255,0.6);
        }

        .signal-info {
            flex: 1;
            min-width: 0;
        }

        .signal-name {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .signal-type {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            /* uppercase removed */
            margin-bottom: 4px;
        }

        .signal-type.velocity_spike { background: rgba(63, 185, 80, 0.2); color: var(--rising); }
        .signal-type.coverage_gap { background: rgba(88, 166, 255, 0.2); color: var(--accent); }
        .signal-type.timing_window { background: rgba(163, 113, 247, 0.2); color: var(--new); }
        .signal-type.novelty { background: rgba(248, 81, 73, 0.2); color: var(--hot); }
        .signal-type.hot_game { background: rgba(248, 81, 73, 0.2); color: var(--hot); }

        .signal-reason {
            font-size: 10px;
            color: var(--text-secondary);
        }

        .signal-score {
            text-align: right;
        }

        .signal-score-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--accent);
        }

        .signal-score-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
        }

        .signal-metrics {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--border);
            padding: 8px 12px;
            background: var(--bg);
        }

        .signal-metric {
            text-align: center;
        }

        .signal-metric-value {
            font-size: 12px;
            font-weight: 600;
        }

        .signal-metric-value.high { color: var(--rising); }
        .signal-metric-value.medium { color: var(--accent); }
        .signal-metric-value.low { color: var(--text-muted); }

        .signal-metric-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
        }

        /* Deals Panel — same grid as games */
        .deals-panel {
            display: none;
            padding: 0;
        }

        .deals-panel.active {
            display: block;
        }

        .deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 2px;
        }

        .deal-card {
            display: block;
            background: transparent;
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
            color: var(--text);
            position: relative;
        }

        .deal-card:hover {
            background: rgba(255,255,255,0.03);
        }

        .deal-thumb-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 460/215;
            background: #111;
            overflow: hidden;
        }

        .deal-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .deal-discount-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            background: rgba(34,197,94,0.9);
            color: #fff;
            padding: 2px 5px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 2px;
            line-height: 1.2;
        }

        .deal-historical-badge {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(239,68,68,0.85);
            color: #fff;
            padding: 2px 5px;
            font-size: 9px;
            font-weight: 500;
            border-radius: 2px;
            line-height: 1.2;
        }

        .deal-info {
            padding: 6px 5px 4px;
        }

        .deal-name {
            font-weight: 500;
            font-size: 13px;
            letter-spacing: -0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text);
            margin-bottom: 2px;
        }

        .deal-prices {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

        .deal-current {
            font-size: 13px;
            font-weight: 600;
            color: var(--success);
        }

        .deal-regular {
            font-size: 11px;
            color: var(--text-muted);
            text-decoration: line-through;
        }

        .deal-shop {
            font-size: 11px;
            color: var(--text-muted);
        }

        .filter-btn.deals {
            background: var(--success);
            border-color: transparent;
            color: #fff;
            font-weight: 600;
        }

        .filter-btn.deals:hover {
            opacity: 0.9;
        }

        /* Main Layout */
        /* ============ COMMAND CENTER ============ */
        .main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* Game Grid - Takes most space */
        .game-grid-container {
            flex: 1;
            overflow-y: auto;
            padding: 4px 4px;
        }

        .grid-header {
            display: none;
        }

        .grid-title {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .grid-title span { color: var(--text); font-weight: 600; }

        /* ============ SORT + GENRE ROW ============ */
        .sort-genre-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .sort-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .sort-btn {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 3px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.12s;
            white-space: nowrap;
        }
        .sort-btn:hover { border-color: var(--border-hover); color: var(--text); }
        .sort-btn.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: var(--steam); }

        .sort-genre-divider {
            width: 1px;
            height: 14px;
            background: var(--border);
            flex-shrink: 0;
        }

        .genre-chips {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .genre-chips::-webkit-scrollbar { display: none; }

        .genre-chip {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.12s;
        }
        .genre-chip:hover { border-color: var(--border-hover); color: var(--text-secondary); }
        .genre-chip.active { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.35); color: var(--purple); }

        .view-toggles {
            display: flex;
            gap: 4px;
        }

        /* Time-tier section headers for New releases view */
        .time-tier-header {
            grid-column: 1 / -1;
            padding: 12px 4px 4px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .time-tier-header .tier-count {
            font-size: 11px;
            font-weight: 400;
            color: var(--text-muted);
        }
        .time-tier-header:first-child { padding-top: 0; }

        /* Dossier collapsible sections */
        .dossier-details summary { list-style: none; }
        .dossier-details summary::-webkit-details-marker { display: none; }
        .dossier-details summary::before { content: '▸ '; }
        .dossier-details[open] summary::before { content: '▾ '; }
        .dossier-details { border-top: 1px solid var(--border); }

        /* Treemap heatmap view */
        .game-treemap {
            position: relative;
            width: 100%;
            height: calc(100vh - 140px);
            overflow: hidden;
        }
        .treemap-cell {
            position: absolute;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.3);
            transition: opacity 0.15s;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 4px 5px;
        }
        .treemap-cell:hover { opacity: 0.85; }
        .treemap-cell-name {
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .treemap-cell-stat {
            font-size: 9px;
            color: rgba(255,255,255,0.75);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .treemap-cell.small .treemap-cell-name { font-size: 9px; }
        .treemap-cell.small .treemap-cell-stat { display: none; }
        .treemap-cell.tiny .treemap-cell-name { display: none; }
        .treemap-cell.tiny .treemap-cell-stat { display: none; }

        /* Hero row — top 3 featured games */
        .hero-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 3px;
            margin-bottom: 3px;
        }
        .hero-card {
            position: relative;
            overflow: hidden;
            border-radius: 3px;
            cursor: pointer;
            transition: opacity 0.2s;
            /* Fixed card aspect so all three siblings are the same height and the
             * image fills it — fixes the dead-space gap where a shorter-aspect
             * image left black space above the absolute-positioned overlay
             * (2026-07-11). The image covers the whole card via object-fit. */
            aspect-ratio: 16 / 9;
        }
        .hero-card:hover { opacity: 0.92; }
        /* Stale signal subduing was too aggressive (opacity 0.82 + grayscale
         * 0.35 + brightness 0.82 = ~67% effective brightness with desaturation).
         * On a top-ranked stale game like Slay the Spire 2 in the #1 hero
         * slot, the card read as broken rather than "older data." The Stale
         * badge already tells the user; the artwork should stay visible. */
        .hero-card.stale-signals { opacity: 0.96; }
        .hero-card .hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .hero-card.stale-signals .hero-img {
            filter: grayscale(0.1) brightness(0.95);
        }
        .hero-card .hero-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: 10px 10px 8px;
            /* Stronger backdrop so text sits over near-solid dark regardless
             * of the image underneath. Was rgba(0,0,0,0.85) at 40% — text over
             * bright artwork (Slay the Spire's painterly highlights, GTA V's
             * card collage) was washing out. Now near-opaque from 50% down. */
            background: linear-gradient(transparent, rgba(0,0,0,0.95) 50%);
        }
        .hero-card .hero-name {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 2px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.7);
        }
        .hero-card:first-child .hero-name { font-size: 18px; }
        .hero-card .hero-stats {
            font-size: 11px;
            /* Was rgba(255,255,255,0.8) — over a complex image background that's
             * unreliable. Solid white + text-shadow gives consistent contrast. */
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.7);
            margin-bottom: 3px;
        }
        .hero-card .hero-brief {
            font-size: 11px;
            /* Was rgba(255,255,255,0.65) italic — three readability problems
             * compounded: 65% opacity dimmer than the stats line, italic
             * thinner strokes, image-variable backdrop. Now solid near-white
             * non-italic with text-shadow. */
            color: rgba(255,255,255,0.92);
            text-shadow: 0 1px 2px rgba(0,0,0,0.7);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .hero-card:first-child .hero-brief { -webkit-line-clamp: 3; }
        .hero-card .hero-badge {
            position: absolute;
            top: 6px; left: 6px;
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 2px;
            background: rgba(232,93,93,0.85);
            color: #fff;
        }
        .hero-card .hero-badge.stale {
            background: rgba(92,87,83,0.9);
            color: var(--text);
        }
        @media (max-width: 768px) {
            .hero-row { grid-template-columns: 1fr; }
            .hero-card .hero-img { aspect-ratio: 16/7 !important; }
        }

        /* Dense Game Grid */
        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 2px;
            padding: 0;
        }

        @keyframes cardFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes skeletonPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .game-card {
            background: var(--bg-card);
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease;
            position: relative;
            border-top: 1px solid transparent;
            border-bottom: 1px solid rgba(255,255,255,0.02);
            animation: cardFadeIn 0.2s ease-out both;
        }

        .game-card:hover {
            background: var(--bg-card-hover);
            border-bottom-color: rgba(255,255,255,0.04);
        }

        .game-card.keyboard-selected {
            outline: 1px solid var(--accent);
            outline-offset: 1px;
        }

        .game-card.hot-glow {
            border-top-color: var(--hot);
        }

        .game-card.rising-glow {
            border-top-color: var(--rising);
        }

        .game-card.stale-signals {
            border-top-color: var(--text-muted);
            opacity: 0.96;
        }

        .game-card.stale-signals .game-thumb img {
            filter: grayscale(0.1) brightness(0.95);
        }

        .game-thumb {
            width: 100%;
            aspect-ratio: 460/215;
            background: #111;
            position: relative;
            overflow: hidden;
            border-radius: 2px 2px 0 0;
        }

        .game-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
            z-index: 1;
        }

        .game-score {
            display: none;
        }

        .game-score.hot {
            color: #000;
            background: var(--hot);
            border-color: var(--hot);
            text-shadow: none;
        }
        .game-score.rising {
            color: #000;
            background: var(--rising);
            border-color: var(--rising);
            text-shadow: none;
        }
        .game-score.falling {
            color: #fff;
            background: var(--falling);
            border-color: var(--falling);
            text-shadow: none;
        }

        .game-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            padding: 1px 5px;
            border-radius: 2px;
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.03em;
            z-index: 2;
        }

        .game-badge.surging {
            background: rgba(239,68,68,0.85);
            color: #fff;
        }
        .game-badge.new { background: rgba(139,92,246,0.7); color: #fff; }
        .game-badge.sale {
            background: rgba(34,197,94,0.85);
            color: #fff;
        }
        .game-badge.stale {
            background: rgba(92,87,83,0.9);
            color: var(--text);
        }
        /* Hide rising/falling badges - too noisy */
        .game-badge.rising, .game-badge.falling { display: none; }

        /* "Updated since your last visit" pip — top-right corner of thumb */
        .updated-dot {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
            z-index: 2;
            pointer-events: auto;
            cursor: help;
        }

        .creator-tags { display: none; /* hidden in grid — shown in modal */ }
        .creator-tag {
            font-size: 10px; padding: 1px 4px; border-radius: 2px;
            font-weight: 600;
        }
        .creator-tag.small { background: #1a3a2a; color: #4caf50; }
        .creator-tag.mid { background: #1a2a3a; color: #42a5f5; }
        .creator-tag.large { background: #3a2a1a; color: #ffa726; }

        .game-trend {
            position: absolute;
            bottom: 6px;
            right: 6px;
            font-size: 11px;
            font-weight: 600;
            background: rgba(0,0,0,0.7);
            padding: 2px 5px;
            border-radius: 3px;
        }

        .game-trend.up { color: var(--rising); }
        .game-trend.down { color: var(--falling); }

        .game-info {
            padding: 6px 5px 4px 5px;
        }

        .game-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
            text-decoration: none;
            display: block;
            letter-spacing: -0.01em;
        }

        .game-name:hover {
            color: var(--text);
        }

        .game-thumb {
            display: block;
        }

        .game-why-hot {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
        }

        .game-why-hot .stat-steam { color: var(--steam); }
        .game-why-hot .stat-twitch { color: var(--twitch); }
        .game-why-hot .stat-kick { color: var(--kick); }

        .game-meta {
            display: none; /* Hide cluttered meta info */
        }

        /* Confidence indicator - hide it */
        .confidence-indicator { display: none; }

        /* Live stats - cleaner inline display */
        .live-stats-mini {
            display: flex;
            gap: 8px;
            margin-top: 4px;
            font-size: 11px;
        }

        .live-stats-mini .live-stat {
            color: var(--text-muted);
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .live-stats-mini .live-stat.steam { color: var(--steam); }
        .live-stats-mini .live-stat.twitch { color: var(--twitch); }

        /* Card sparkline — visible in grid; primary trend signal */
        .card-sparkline {
            display: block;
            height: 18px;
            width: 100%;
            margin-top: 3px;
            opacity: 0.85;
        }

        /* Source pills with colors */
        .source-pill {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            /* uppercase removed */
            cursor: pointer;
        }

        .source-pill { background: var(--bg-hover); color: var(--text-secondary); }
        .source-pill.steam, .source-pill.steamspy { background: #1b2838; color: var(--steam); }
        .source-pill.twitch { background: rgba(167,139,250,0.12); color: var(--twitch); }

        /* Genre tags on cards */
        .genre-tag {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 500;
            background: rgba(255,255,255,0.04);
            color: var(--text-muted);
            white-space: nowrap;
        }
        .card-genres { display: flex; gap: 3px; margin-bottom: 1px; }
        .card-brief {
            font-size: 10px;
            color: var(--text-secondary);
            line-height: 1.35;
            margin-top: 2px;
            font-style: italic;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* News feed */
        .news-source-btn {
            font-size: 10px;
            padding: 2px 7px;
            border-radius: 3px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
        }
        .news-source-btn:hover { border-color: var(--border-hover); color: var(--text); }
        .news-source-btn.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: var(--cta); }
        .news-item {
            display: flex;
            gap: 10px;
            padding: 10px 8px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            cursor: pointer;
            transition: background 0.15s;
        }
        .news-item:hover { background: rgba(255,255,255,0.02); }
        .news-item-thumb {
            width: 80px;
            min-width: 80px;
            height: 38px;
            border-radius: 2px;
            object-fit: cover;
            background: var(--bg-card);
        }
        .news-item-content { flex: 1; min-width: 0; }
        .news-item-headline {
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }
        .news-item-summary {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .news-item-meta {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-top: 3px;
            font-size: 10px;
            color: var(--text-muted);
        }
        .news-source-badge {
            display: inline-block;
            padding: 1px 4px;
            border-radius: 2px;
            font-size: 9px;
            font-weight: 600;
            background: var(--bg-hover);
            color: var(--text-secondary);
        }

        /* In-modal game news */
        .modal-news-item {
            padding: 5px 0;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            font-size: 11px;
        }
        .modal-news-item:last-child { border-bottom: none; }
        .modal-news-headline { color: var(--text); font-weight: 500; margin-bottom: 2px; }
        .modal-news-meta { font-size: 9px; color: var(--text-muted); display: flex; gap: 6px; }

        /* Anomaly / Breakout alerts */
        .anomaly-item {
            display: flex;
            gap: 6px;
            padding: 5px 6px;
            border-radius: 2px;
            cursor: pointer;
            border-left: 2px solid var(--hot);
            margin-bottom: 2px;
        }
        .anomaly-item:hover { background: rgba(255,255,255,0.03); }
        .anomaly-item.critical { border-left-color: #ff3333; }
        .anomaly-item.high { border-left-color: var(--hot); }
        .anomaly-item.medium { border-left-color: #f59e0b; }
        .anomaly-name { font-size: 11px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .anomaly-detail { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
        .anomaly-pct { font-weight: 600; }
        .anomaly-pct.steam { color: var(--steam); }
        .anomaly-pct.twitch { color: var(--twitch); }

        /* Coverage Sources Grid in Activity Tab */
        .source-pills-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .source-pill-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .source-pill-item:hover {
            background: var(--bg-hover);
            border-color: var(--accent);
        }

        .source-pill-name {
            font-size: 11px;
            font-weight: 500;
            color: var(--text);
        }

        .source-pill-count {
            font-size: 10px;
            font-weight: 600;
            color: var(--accent);
            background: var(--bg-hover);
            padding: 2px 6px;
            border-radius: 3px;
        }

        /* Event count badge for deduped events */
        .event-count {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            background: var(--bg-hover);
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 4px;
        }

        /* Placeholder image for missing thumbnails */
        .game-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 500;
            color: rgba(255,255,255,0.15);
            background: #111;
        }

        /* Sources popup */
        .sources-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 0;
            z-index: 1001;
            width: 720px;
            max-width: 95vw;
            max-height: 85vh;
            overflow: hidden;
        }

        .sources-popup.active { display: block; }

        .sources-header {
            padding: 14px 18px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sources-header h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            margin: 0;
        }

        .sources-header .src-summary {
            display: flex;
            gap: 14px;
            font-size: 10px;
            color: var(--text-muted);
        }

        .sources-header .src-summary .sv { font-weight: 800; color: var(--text); }

        .sources-body {
            padding: 12px 16px 16px;
            overflow-y: auto;
            max-height: calc(85vh - 50px);
        }

        .sources-body::-webkit-scrollbar { width: 4px; }
        .sources-body::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.2); border-radius: 2px; }

        .src-section-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            /* uppercase removed — de-slop */
            margin: 10px 0 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .src-section-title .src-badge {
            font-size: 10px;
            font-weight: 700;
            background: rgba(96,165,250,0.1);
            color: var(--accent);
            padding: 1px 5px;
            border-radius: 3px;
        }

        .sources-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }

        @media (max-width: 600px) {
            .sources-grid { grid-template-columns: repeat(2, 1fr); }
            .sources-popup { width: 95vw; }
        }

        .source-item {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 6px 8px;
            background: var(--bg);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.15s;
            border: 1px solid transparent;
            position: relative;
        }

        .source-item:hover {
            border-color: var(--border);
            background: rgba(255,255,255,0.03);
        }

        .source-icon {
            width: 26px;
            height: 26px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 11px;
            flex-shrink: 0;
        }

        .source-icon.steam { background: #1b2838; color: var(--steam); }
        .source-icon.twitch { background: var(--twitch); color: #fff; }
        .source-icon.youtube { background: #ff0000; color: #fff; }
        .source-icon.reddit { background: #ff4500; color: #fff; }
        .source-icon.metacritic { background: #ffcc33; color: #000; }
        .source-icon.opencritic { background: #52b4b9; color: #fff; }
        .source-icon.steamspy { background: #4a90a4; color: #fff; }
        .source-icon.gog { background: #86328a; color: #fff; }
        .source-icon.itchio { background: #fa5c5c; color: #fff; }
        .source-icon.gaming { background: #2563eb; color: #fff; }
        .source-icon.pcgamer { background: #e11d48; color: #fff; }
        .source-icon.eurogamer { background: #1d4ed8; color: #fff; }
        .source-icon.polygon { background: #f97316; color: #fff; }
        .source-icon.kotaku { background: #16a34a; color: #fff; }
        .source-icon.ign { background: #bf0000; color: #fff; }
        .source-icon.rps { background: #0ea5e9; color: #fff; }
        .source-icon.wccftech { background: #7c3aed; color: #fff; }
        .source-icon.hltv { background: #2563eb; color: #fff; }
        .source-icon.default { background: rgba(96,165,250,0.15); color: var(--accent); }

        .source-info {
            flex: 1;
            min-width: 0;
        }

        .source-name {
            font-weight: 600;
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .source-count {
            font-size: 10px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .source-count .sc-bar {
            flex: 1;
            height: 2px;
            background: rgba(255,255,255,0.04);
            border-radius: 1px;
            overflow: hidden;
            max-width: 40px;
        }

        .source-count .sc-bar-fill {
            height: 100%;
            border-radius: 1px;
            background: var(--accent);
            opacity: 0.5;
        }

        .source-active-dot {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--green);
        }

        .source-active-dot.inactive { background: var(--text-muted); opacity: 0.4; }

        /* Header sources stat clickable */
        .stat.clickable {
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 3px;
            transition: background 0.15s;
        }

        .stat.clickable:hover {
            background: var(--bg-hover);
        }

        /* Compact List View */
        .game-list {
            display: none;
        }

        .game-list.active {
            display: block;
        }

        .game-grid.hidden {
            display: none;
        }

        /* Bloomberg-density data table */
        .table-header {
            display: grid;
            grid-template-columns: 28px 40px 1fr 80px 80px 64px 80px 60px 48px;
            gap: 0;
            padding: 0 8px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            position: sticky;
            top: 0;
            background: var(--bg);
            z-index: 5;
        }

        .table-header .th {
            font-size: 10px;
            font-weight: 500;
            color: var(--text-muted);
            padding: 6px 4px;
            cursor: pointer;
            user-select: none;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
        }

        .table-header .th:hover { color: var(--text-secondary); }
        .table-header .th.sorted { color: var(--text); }
        .table-header .th.right { text-align: right; }

        .list-item {
            display: grid;
            grid-template-columns: 28px 40px 1fr 80px 80px 64px 80px 60px 48px;
            gap: 0;
            align-items: center;
            padding: 0 8px;
            height: 30px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            cursor: pointer;
            font-variant-numeric: tabular-nums;
        }

        .list-item:hover { background: rgba(255,255,255,0.02); }

        .list-rank {
            font-size: 10px;
            color: var(--text-muted);
            padding: 0 4px;
        }

        .list-thumb {
            width: 36px;
            height: 17px;
            border-radius: 1px;
            object-fit: cover;
        }

        .list-name {
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 4px;
        }

        .list-cell {
            font-size: 12px;
            text-align: right;
            padding: 0 4px;
            white-space: nowrap;
        }

        .list-cell.steam { color: var(--steam); }
        .list-cell.twitch { color: var(--twitch); }
        .list-cell.kick { color: var(--kick); }

        .list-cell .delta {
            font-size: 10px;
            margin-left: 3px;
        }

        .list-cell .delta.up { color: var(--success); }
        .list-cell .delta.down { color: var(--danger); }

        .list-score {
            font-size: 12px;
            font-weight: 600;
            text-align: right;
            padding: 0 4px;
        }

        .list-score.hot { color: var(--hot); }
        .list-score.rising { color: var(--rising); }

        .list-trend {
            text-align: center;
            font-size: 9px;
            padding: 2px 4px;
            border-radius: 2px;
        }

        .list-trend.surging { color: var(--hot); background: rgba(239,68,68,0.1); }
        .list-trend.rising { color: var(--success); background: rgba(34,197,94,0.1); }
        .list-trend.stable { color: var(--text-muted); }
        .list-trend.cooling { color: var(--warning); background: rgba(245,158,11,0.1); }
        .list-trend.falling { color: var(--danger); background: rgba(239,68,68,0.1); }

        /* Right Sidebar */
        .sidebar {
            width: 220px;
            background: var(--bg);
            border-left: 1px solid var(--border);
            overflow-y: auto;
            flex-shrink: 0;
        }

        .sidebar-section {
            border-bottom: 1px solid var(--border);
        }

        .sidebar-header {
            padding: 10px 10px 6px;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sidebar-header .badge {
            background: var(--hot);
            color: #fff;
            padding: 1px 4px;
            border-radius: 2px;
            font-size: 10px;
        }

        /* Top Movers */
        .mover-item {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            cursor: pointer;
            gap: 6px;
        }

        .mover-item:hover { background: rgba(255,255,255,0.03); }

        .mover-rank {
            width: 16px;
            font-size: 10px;
            color: var(--text-muted);
        }

        .mover-info { flex: 1; min-width: 0; }

        .mover-name {
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mover-change {
            font-size: 10px;
            font-weight: 700;
        }

        .mover-change.up { color: var(--rising); }
        .mover-change.down { color: var(--falling); }

        /* Biggest Losers */
        .loser-item {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            cursor: pointer;
            gap: 6px;
        }
        .loser-item:hover { background: rgba(255,255,255,0.03); }
        .loser-info { flex: 1; min-width: 0; }
        .loser-name {
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .loser-drop {
            font-size: 10px;
            font-weight: 700;
            color: var(--falling);
        }
        .loser-meta {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* Activity Feed */
        .feed-item {
            padding: 6px 10px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .feed-item:last-child { border-bottom: none; }

        .feed-pulse {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            margin-top: 4px;
            flex-shrink: 0;
            animation: pulse 2s infinite;
        }

        .feed-item.new .feed-pulse {
            background: var(--new);
            animation-delay: 0s;
        }

        .feed-content { flex: 1; min-width: 0; }

        .feed-source {
            font-size: 10px;
            color: var(--text-muted);
            margin-bottom: 2px;
        }

        .feed-text {
            font-size: 10px;
            color: var(--text);
            line-height: 1.3;
        }

        .feed-time {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* Source colors */
        .src-twitch { color: var(--twitch); }
        .src-youtube { color: #ff0000; }
        .src-steam { color: var(--steam); }
        .src-reddit { color: #ff4500; }
        .src-rss { color: var(--accent); }

        /* Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-overlay.active { display: flex; }

        .modal {
            background: #141416;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 6px;
            width: 90%;
            max-width: 860px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .modal-header {
            display: flex;
            align-items: flex-start;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            gap: 16px;
        }

        .modal-thumb {
            width: 200px;
            border-radius: 4px;
        }

        .modal-trailer {
            width: 100%;
            max-height: 340px;
            background: #000;
            display: none;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .modal-trailer.active { display: block; }
        .modal-trailer video { width: 100%; max-height: 340px; display: block; }

        .modal-title-area { flex: 1; }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }

        .modal-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .modal-badge {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
        }

        .modal-badge.score { background: var(--accent); color: #000; cursor: pointer; }
        .modal-badge.score:hover { filter: brightness(1.1); }
        .modal-badge.trend-up { background: var(--rising); color: #000; }
        .modal-badge.trend-down { background: var(--falling); color: #000; }
        .modal-badge.meta { background: var(--bg); color: var(--text); }
        .modal-badge.clickable { cursor: pointer; }
        .modal-badge.clickable:hover { filter: brightness(1.2); }

        .modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        .modal-close:hover { color: var(--text); }

        .modal-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-btn-full {
            font-size: 11px;
            padding: 6px 10px;
            background: var(--accent);
            color: #fff;
            border-radius: 4px;
            text-decoration: none;
            white-space: nowrap;
        }

        .modal-btn-full:hover {
            background: #79c0ff;
        }

        .modal-body { padding: 16px; }

        .modal-section {
            margin-bottom: 16px;
        }

        .modal-section-title {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
            /* uppercase removed */
            margin-bottom: 8px;
        }

        .modal-why {
            background: var(--bg);
            padding: 10px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1.5;
        }

        .signal-group {
            margin-bottom: 12px;
        }

        .signal-group-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            /* uppercase removed — de-slop */
            margin-bottom: 6px;
            padding-left: 4px;
        }

        .signal-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .signal-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: var(--bg);
            border-radius: 3px;
            border-left: 3px solid var(--accent);
        }

        .signal-item.hot { border-left-color: var(--hot); }
        .signal-item.rising { border-left-color: var(--rising); }
        .signal-item.new { border-left-color: var(--new); }

        /* Intelligence section styling */
        .signal-group.intelligence .signal-group-title {
            color: var(--accent);
        }
        .signal-item.high-severity {
            border-left-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
        }
        .signal-item.rarity-legendary { border-left-color: #ffd700; }
        .signal-item.rarity-epic { border-left-color: #a855f7; }
        .signal-item.rarity-rare { border-left-color: #3b82f6; }
        .signal-item.rarity-uncommon { border-left-color: #22c55e; }
        .signal-item.rarity-common { border-left-color: #6b7280; }
        .signal-icon {
            font-size: 14px;
            min-width: 18px;
            text-align: center;
        }

        .signal-pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse 2s infinite;
        }

        .signal-item.hot .signal-pulse { background: var(--hot); }
        .signal-item.rising .signal-pulse { background: var(--rising); }
        .signal-item.new .signal-pulse { background: var(--new); }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .signal-text {
            flex: 1;
            font-size: 12px;
        }

        .signal-strength {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
        }

        /* Intelligence section in Trends tab */
        .intelligence-section {
            background: var(--bg);
            border-radius: 3px;
            padding: 12px;
            border: 1px solid var(--border);
        }
        .intel-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
        }
        .intel-row:last-child { margin-bottom: 0; }
        .intel-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed — de-slop */
        }
        .intel-value {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
        }
        .intel-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--card);
            color: var(--text-muted);
            /* uppercase removed */
        }
        .intel-badge.stable { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
        .intel-badge.moderate { background: rgba(234, 179, 8, 0.2); color: #eab308; }
        .intel-badge.volatile { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
        .intel-confidence {
            font-size: 10px;
            color: var(--text-muted);
        }
        .intel-description {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 2px;
        }
        .intel-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .intel-milestone {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            background: var(--card);
        }
        .intel-milestone.legendary { background: rgba(255, 215, 0, 0.2); color: #ffd700; }
        .intel-milestone.epic { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
        .intel-milestone.rare { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
        .intel-milestone.uncommon { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
        .intel-anomaly-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .intel-anomaly {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 11px;
            background: var(--card);
        }
        .intel-anomaly.high { background: rgba(239, 68, 68, 0.15); border-left: 2px solid #ef4444; }
        .intel-anomaly.medium { background: rgba(234, 179, 8, 0.15); border-left: 2px solid #eab308; }
        .intel-anomaly-pct {
            font-weight: 700;
            color: var(--hot);
        }

        .modal-sources {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .modal-source {
            padding: 4px 10px;
            background: var(--bg-hover);
            border-radius: 4px;
            font-size: 10px;
            color: #fff;
            text-decoration: none;
            border: 1px solid var(--border);
        }

        .modal-source:hover {
            background: var(--accent);
            border-color: var(--accent);
        }

        .external-link {
            display: inline-block;
            padding: 6px 12px;
            background: var(--bg-hover);
            color: #fff;
            border-radius: 4px;
            font-size: 11px;
            text-decoration: none;
            font-weight: 500;
        }

        .external-link:hover {
            background: var(--accent);
        }

        .external-link.steam {
            background: #1b2838;
            color: #a3d4ff;
        }

        .external-link.steam:hover {
            background: #2a475e;
            color: #fff;
        }

        .external-link.metacritic {
            background: #333;
            color: #ffcc33;
        }

        .external-link.metacritic:hover {
            background: #444;
        }

        .modal-events {
            max-height: 200px;
            overflow-y: auto;
        }

        .modal-event {
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
            font-size: 11px;
        }

        .modal-event:last-child { border-bottom: none; }

        .modal-event-source {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* Score Breakdown Panel */
        .score-breakdown {
            display: none;
            background: var(--bg);
            border-radius: 3px;
            padding: 12px;
            margin-top: 8px;
        }

        .score-breakdown.active { display: block; }

        .score-breakdown-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 8px;
            /* uppercase removed */
        }

        .score-component {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
            font-size: 11px;
            border-bottom: 1px solid var(--border);
        }

        .score-component:last-child { border-bottom: none; }

        .score-component-label { color: var(--text-secondary); }
        .score-component-value { font-weight: 600; color: var(--accent); }
        .score-component-value.high { color: var(--rising); }
        .score-component-value.medium { color: var(--accent); }
        .score-component-value.low { color: var(--text-muted); }

        /* Events Panel (expanded) */
        .events-panel {
            display: none;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 3px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            z-index: 1002;
            overflow: hidden;
        }

        .events-panel.active { display: block; }

        .events-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }

        .events-panel-title {
            font-weight: 700;
            font-size: 14px;
        }

        .events-panel-body {
            padding: 16px;
            max-height: calc(80vh - 60px);
            overflow-y: auto;
        }

        .event-item {
            padding: 12px;
            background: var(--bg);
            border-radius: 3px;
            margin-bottom: 8px;
        }

        .event-item:last-child { margin-bottom: 0; }

        .event-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .event-source-badge {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            /* uppercase removed */
        }

        .event-source-badge.steam { background: #1b2838; color: var(--steam); }
        .event-source-badge.twitch { background: rgba(167,139,250,0.12); color: var(--twitch); }
        .event-source-badge.youtube { background: #ff000020; color: #ff0000; }
        .event-source-badge.reddit { background: #ff450020; color: #ff4500; }
        .event-source-badge.rss { background: var(--bg-hover); color: var(--text-secondary); }

        .event-time {
            font-size: 10px;
            color: var(--text-muted);
        }

        .event-subject {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .event-summary {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Modal loading state */
        .modal-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: var(--text-muted);
        }

        .modal-loading::after {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Enhanced Modal Tabs */
        .modal-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            background: transparent;
            padding: 0 16px;
        }

        .modal-tab {
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 400;
            color: var(--text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .modal-tab:hover { color: var(--text-secondary); }
        .modal-tab.active {
            color: var(--text);
            font-weight: 500;
            border-bottom-color: var(--cta);
        }

        .modal-tab-content {
            display: none;
            padding: 16px;
        }

        .modal-tab-content.active { display: block; }

        /* Metadata Grid */
        .metadata-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .metadata-item {
            background: var(--bg);
            padding: 10px;
            border-radius: 3px;
        }

        .metadata-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
            margin-bottom: 4px;
        }

        .metadata-value {
            font-size: 12px;
            color: var(--text);
        }

        .metadata-value.highlight { color: var(--accent); font-weight: 600; }

        /* Modal Sparkline Chart */
        .modal-tab-content .sparkline-container {
            background: var(--bg);
            border-radius: 3px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .sparkline-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .sparkline-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            /* uppercase removed — de-slop */
        }

        .sparkline-value {
            font-size: 14px;
            font-weight: 700;
        }

        .sparkline-value.up { color: var(--rising); }
        .sparkline-value.down { color: var(--falling); }
        .sparkline-value.flat { color: var(--text-muted); }

        .modal-tab-content .sparkline-canvas {
            width: 100%;
            height: 80px;
            display: block;
        }

        /* No data state for sparklines */
        .sparkline-no-data {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 11px;
            background: var(--card);
            border-radius: 4px;
        }

        /* Price Section */
        .price-card {
            background: var(--bg);
            border-radius: 3px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .price-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .price-current {
            font-size: 24px;
            font-weight: 700;
            color: var(--rising);
        }

        .price-original {
            font-size: 14px;
            color: var(--text-muted);
            text-decoration: line-through;
        }

        .price-platforms {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .price-platform {
            display: flex;
            justify-content: space-between;
            padding: 6px 8px;
            background: var(--bg-card);
            border-radius: 4px;
            font-size: 11px;
        }

        .price-platform-name { color: var(--text-secondary); }
        .price-platform-value { font-weight: 600; }

        /* Activity Timeline */
        .activity-timeline {
            position: relative;
            padding-left: 20px;
        }

        .activity-timeline::before {
            content: '';
            position: absolute;
            left: 6px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }

        .timeline-item {
            position: relative;
            padding: 8px 0 8px 12px;
            font-size: 11px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -17px;
            top: 12px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
        }

        .timeline-source {
            font-size: 10px;
            color: var(--text-muted);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .timeline-item.positive::before { background: var(--rising); }
        .timeline-item.negative::before { background: var(--falling); }

        .sentiment-indicator {
            padding: 1px 4px;
            border-radius: 2px;
            font-size: 10px;
            /* uppercase removed */
        }
        .sentiment-indicator.positive { background: var(--rising); color: #000; }
        .sentiment-indicator.negative { background: var(--falling); color: #000; }

        .event-link {
            font-size: 10px;
            color: var(--accent);
            margin-top: 4px;
            display: inline-block;
        }
        .event-link:hover { text-decoration: underline; }

        /* Score Breakdown Enhanced */
        .score-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 12px;
        }

        .score-item {
            background: var(--bg);
            padding: 10px;
            border-radius: 3px;
            text-align: center;
        }

        .score-item.clickable {
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }

        .score-item.clickable:hover {
            background: var(--card-hover);
            transform: scale(1.02);
        }

        .score-item.clickable:active {
            transform: scale(0.98);
        }

        .activity-stat-item.clickable:hover {
            background: var(--bg-hover) !important;
            transform: scale(1.02);
        }

        .activity-stat-item.clickable:active {
            transform: scale(0.98);
        }

        .score-item-value {
            font-size: 18px;
            font-weight: 700;
            color: var(--accent);
        }

        .score-item-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
        }

        /* Explanation Panels */
        .explanation-panel {
            display: none;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 3px;
            margin: 8px 0;
            overflow: hidden;
        }

        .explanation-panel.active {
            display: block;
            animation: slideDown 0.2s ease-out;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .explanation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
        }

        .explanation-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text);
            /* uppercase removed — de-slop */
        }

        .explanation-close {
            cursor: pointer;
            font-size: 16px;
            color: var(--text-muted);
            line-height: 1;
        }

        .explanation-close:hover {
            color: var(--text);
        }

        .explanation-content {
            padding: 12px;
            max-height: 300px;
            overflow-y: auto;
        }

        /* Score breakdown styling */
        .score-formula {
            background: var(--card);
            padding: 10px;
            border-radius: 3px;
            margin-bottom: 10px;
            font-family: 'Monaco', 'Consolas', monospace;
            font-size: 11px;
            color: var(--text-muted);
        }

        .score-formula .formula-title {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }

        .score-component-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 12px;
        }

        .score-component-row:last-child {
            border-bottom: none;
        }

        .score-component-name {
            color: var(--text-muted);
        }

        .score-component-val {
            font-weight: 600;
            color: var(--text);
        }

        .score-component-val.positive {
            color: var(--glow-hot);
        }

        .score-component-val.negative {
            color: var(--danger);
        }

        /* Event list styling */
        .event-row {
            display: flex;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
            font-size: 11px;
        }

        .event-row:last-child {
            border-bottom: none;
        }

        .event-source {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--card);
            color: var(--text-muted);
            /* uppercase removed */
            flex-shrink: 0;
        }

        .event-source.reddit { background: #ff4500; color: white; }
        .event-source.twitter { background: #1da1f2; color: white; }
        .event-source.twitch { background: var(--twitch); color: white; }
        .event-source.youtube { background: #ff0000; color: white; }
        .event-source.steam { background: #1b2838; color: white; }
        .event-source.rss { background: #f26522; color: white; }

        .event-text {
            flex: 1;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .event-time {
            color: var(--text-muted);
            font-size: 10px;
            flex-shrink: 0;
        }

        /* Source quality styling */
        .source-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }

        .source-row:last-child {
            border-bottom: none;
        }

        .source-icon {
            width: 28px;
            height: 28px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .source-icon.reddit { background: #ff4500; }
        .source-icon.twitter { background: #1da1f2; }
        .source-icon.twitch { background: var(--twitch); }
        .source-icon.youtube { background: #ff0000; }
        .source-icon.steam { background: #1b2838; }
        .source-icon.rss { background: #f26522; }

        .source-details {
            flex: 1;
        }

        .source-name {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
        }

        .source-meta {
            font-size: 10px;
            color: var(--text-muted);
        }

        .source-quality {
            text-align: right;
        }

        .source-quality-score {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .source-quality-score.high { background: rgba(0, 255, 136, 0.2); color: var(--glow-hot); }
        .source-quality-score.medium { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
        .source-quality-score.low { background: rgba(255, 107, 107, 0.2); color: var(--danger); }

        /* Live Stats Grid */
        .live-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 8px;
        }

        .live-stat-item {
            background: var(--bg);
            padding: 10px 8px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-left: 3px solid var(--border);
        }

        .live-stat-item.steam { border-left-color: #1b2838; }
        .live-stat-item.twitch { border-left-color: var(--twitch); }
        .live-stat-item.kick { border-left-color: var(--kick); }
        .live-stat-item.social { border-left-color: #ff6b6b; }

        .live-stat-icon {
            font-size: 18px;
            line-height: 1;
        }

        .live-stat-content {
            flex: 1;
            min-width: 0;
        }

        .live-stat-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
        }

        .live-stat-value.active { color: var(--rising); }

        .live-stat-label {
            font-size: 10px;
            color: var(--text-muted);
            /* uppercase removed */
        }

        .social-breakdown {
            display: flex;
            gap: 16px;
            padding: 8px 12px;
            background: var(--bg);
            border-radius: 4px;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .social-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .social-icon {
            font-size: 12px;
        }

        @media (max-width: 600px) {
            .live-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Full Page Link */
        .view-full-page {
            display: block;
            text-align: center;
            padding: 12px;
            background: var(--accent);
            color: #000;
            font-weight: 600;
            font-size: 12px;
            border-radius: 3px;
            text-decoration: none;
            margin-top: 12px;
            cursor: pointer;
        }

        .view-full-page:hover {
            filter: brightness(1.1);
        }

        /* Signal categories */
        .signal-category {
            margin-bottom: 12px;
        }

        .signal-category-header {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            /* uppercase removed */
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .signal-category-icon {
            font-size: 12px;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        /* Loading */
        .loading {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }

        /* Card Sparkline (tiny inline version) */
        .game-card .sparkline {
            width: 100%;
            height: 20px;
            margin-top: 4px;
        }

        .game-card .sparkline-container {
            position: relative;
            width: 100%;
            height: 20px;
        }

        /* Watchlist save control */
        .watchlist-btn {
            position: absolute;
            bottom: 4px;
            left: 4px;
            background: rgba(0,0,0,0.72);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 3px;
            padding: 2px 6px;
            cursor: pointer;
            font-size: 10px;
            line-height: 14px;
            color: #fff;
            opacity: 0.74;
            transition: opacity 0.15s, background 0.15s, border-color 0.15s;
            z-index: 10;
        }

        .game-card:hover .watchlist-btn,
        .watchlist-btn:focus-visible { opacity: 1; }
        .watchlist-btn.active {
            opacity: 1;
            background: var(--hot);
            border-color: var(--hot);
            color: #fff;
        }
        .watchlist-btn:hover {
            opacity: 1;
            border-color: rgba(255,255,255,0.38);
        }

        /* Compare checkbox — hidden in grid view, available in modal */
        .compare-btn {
            display: none;
            position: absolute;
            top: 4px;
            right: 32px;
            background: rgba(0,0,0,0.7);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 2px 5px;
            cursor: pointer;
            font-size: 10px;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 10;
        }

        .game-card:hover .compare-btn { display: none; /* moved to modal */ }
        .compare-btn.active { opacity: 1; background: var(--accent); color: #000; border-color: var(--accent); }
        .compare-btn:hover { color: var(--text); border-color: var(--text-muted); }

        /* Watchlist filter button */
        .filter-btn.watchlist {
            background: var(--hot);
            border-color: transparent;
            color: #fff;
            font-weight: 600;
        }

        .filter-btn.watchlist:not(.active) {
            background: transparent;
            border-color: var(--border);
            color: var(--text-secondary);
        }

        /* Compare bar */
        .compare-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border-top: 1px solid var(--border);
            padding: 8px 16px;
            z-index: 200;
            align-items: center;
            gap: 12px;
        }

        .compare-bar.active { display: flex; }

        .compare-items {
            display: flex;
            gap: 8px;
            flex: 1;
        }

        .compare-item {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--bg);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
        }

        .compare-item img {
            width: 32px;
            height: 18px;
            border-radius: 2px;
            object-fit: cover;
        }

        .compare-item .remove {
            cursor: pointer;
            color: var(--text-muted);
            margin-left: 4px;
        }

        .compare-item .remove:hover { color: var(--hot); }

        .compare-btn-action {
            background: var(--accent);
            border: none;
            border-radius: 4px;
            padding: 6px 16px;
            color: #000;
            font-weight: 600;
            font-size: 11px;
            cursor: pointer;
        }

        .compare-btn-action:hover { filter: brightness(1.1); }
        .compare-btn-action.disabled { opacity: 0.5; cursor: not-allowed; }

        /* Comparison modal */
        .comparison-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            z-index: 1100;
            overflow-y: auto;
            padding: 20px;
        }

        .comparison-modal.active { display: block; }

        .comparison-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .comparison-header h2 {
            font-size: 18px;
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .comparison-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 3px;
            overflow: hidden;
        }

        .comparison-card img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
        }

        .comparison-card-body {
            padding: 12px;
        }

        .comparison-card h3 {
            font-size: 14px;
            margin-bottom: 8px;
        }

        .comparison-stat {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 11px;
            border-bottom: 1px solid var(--border);
        }

        .comparison-stat:last-child { border-bottom: none; }

        .comparison-stat-label { color: var(--text-secondary); }
        .comparison-stat-value { font-weight: 600; }
        .comparison-stat-value.best { color: var(--rising); }

        .comparison-sparklines {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 16px;
        }

        .comparison-sparklines h3 {
            font-size: 12px;
            margin-bottom: 12px;
            color: var(--text-secondary);
        }

        .comparison-sparklines canvas {
            width: 100%;
            height: 120px;
        }

        @keyframes tickerHighlight {
            0% { background: var(--accent); }
            100% { background: transparent; }
        }


        /* Mobile Responsive */
        @media (max-width: 768px) {
            .header {
                padding: 8px 12px;
                height: auto;
                min-height: 40px;
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 6px;
            }
            .header-left {
                width: 100%;
                margin-bottom: 0;
                flex-wrap: wrap;
                gap: 8px;
            }
            .header-nav { margin-left: auto; }
            .header-nav a { padding: 4px 7px; font-size: 11px; }
            .header-right {
                width: 100%;
                justify-content: space-between;
                gap: 6px;
            }
            .stats-row {
                width: 100%;
                order: 2;
                flex-wrap: nowrap;
                gap: 10px;
                font-size: 11px;
            }
            .search-box { width: auto; min-width: 0; flex: 1; }
            #daily-headline {
                padding: 6px 12px !important;
                line-height: 1.25;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .filter-bar {
                padding: 8px 12px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .filter-group { flex-shrink: 0; }

            .main { padding: 8px; }

            .games-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
            }

            .game-card .game-info { padding: 4px 2px; }
            .game-name { font-size: 11px; }
            .game-why-hot { font-size: 10px; }
            .card-sparkline { height: 16px; }

            .sidebar {
                position: fixed; bottom: 0; left: 0; right: 0;
                width: 100%; height: auto; max-height: 50vh;
                border-radius: 12px 12px 0 0;
                border: 1px solid var(--border); border-bottom: none;
                transform: translateY(calc(100% - 44px));
                transition: transform 0.3s ease;
                z-index: 90; overflow-y: auto;
                padding-top: 0;
            }
            .sidebar.expanded { transform: translateY(0); }
            .sidebar::before {
                content: 'Top Movers';
                display: block; text-align: center;
                padding: 12px 0 8px; font-size: 12px; font-weight: 600;
                color: var(--text-secondary); cursor: pointer;
                border-bottom: 1px solid var(--border);
                position: sticky; top: 0; background: var(--bg-card);
                z-index: 1;
            }
            /* Modal on mobile */
            .modal-overlay { padding: 0; }
            .modal-content {
                width: 100%;
                height: 100%;
                max-height: 100vh;
                border-radius: 0;
            }
            .modal-header { padding: 12px; }
            .modal-body { padding: 12px; }
            .modal-tabs { overflow-x: auto; }
        }

        @media (max-width: 480px) {
            .games-grid {
                grid-template-columns: 1fr !important;
            }
            .logo { font-size: 14px; }
            .filter-btn { padding: 4px 8px; font-size: 10px; }
        }