/* ── Page-level design tokens ── */
      :root {
        /* --navbar-height defined in styles.css :root */
        --z-sticky: 100;           /* z-index for sticky controls bar */
        --bp-tablet: 900px;        /* hide genre col, show filter toggle */
        --bp-mobile: 690px;        /* hide system col */
      }

      .content-section { max-width: 1150px; padding: 1.5rem 1rem 2.5rem; }
      .beats-table th { padding: 0.5rem 0.625rem; }
      .beats-table td { padding: 0.45rem 0.625rem; }
      .beats-table th[data-col="num"], .beats-table td.num { padding-left:0.5rem; padding-right:0.3125rem; }
      .beats-table th[data-col="event"], .beats-table td:nth-child(2) { padding-left:0.3125rem; padding-right:0.3125rem; }
      .beats-table th[data-col="game"], .beats-table td.game { padding-left:0.3125rem; padding-right:0.3125rem; }
      .beats-table tbody tr.sub-row td.num { padding-left:0.875rem; }
      .beats-table tbody tr.sub-row td.game { padding-left:0.875rem; }

      /* Stats strip */
      .stats-strip { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:0.4rem; align-items:center; justify-content:flex-end; padding:1.5rem 0; }
      .stat { display:flex; align-items:center; gap:0.4rem; color:var(--text-muted); font-size:0.8rem; }
      .stat strong { color:var(--gold); font-family:'Press Start 2P',monospace; font-size:0.9rem; }

      /* Sticky controls wrapper */
      .controls-sticky { position:sticky; top:var(--navbar-height); z-index:var(--z-sticky); background:rgba(8,8,16,0.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); margin:0 -1rem 0.75rem; padding:0.6rem 1rem 0.5rem; }

      /* Controls (search + selects + clear) */
      .log-controls { display:flex; flex-direction:row; gap:0.75rem; flex-wrap:wrap; align-items:center; margin-bottom:0.4rem; }
      .search-row { display:contents; }
      .filters-drawer { display:contents; }
      .search-wrap { position:relative; flex:1; min-width:0; max-width:360px; }
      .search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
      .log-controls input[type=text] { width:100%; background:var(--bg-card2); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.75rem 0.5rem 2.2rem; color:var(--white); font-size:0.85rem; outline:none; transition:border-color 0.2s; }
      .log-controls input[type=text]:focus { border-color:var(--orange); }
      .log-controls input[type=text]::placeholder { color:var(--text-muted); }
      .log-controls select { background:var(--bg-card2); border:1px solid var(--border); border-radius:8px; padding:0.5rem 2rem 0.5rem 0.75rem; color:var(--white); font-size:0.8rem; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239999bb' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; transition:border-color 0.2s; }
      .log-controls select:focus { border-color:var(--orange); }
      .log-controls select option { background:var(--bg-card2); }
      .btn-clear-log { background:transparent; border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.875rem; color:var(--text-muted); font-size:0.8rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
      .btn-clear-log:hover { border-color:var(--red-bright); color:var(--red-bright); }
      .btn-filter-toggle { display:none; align-items:center; gap:0.4rem; background:var(--bg-card2); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.875rem; color:var(--text-muted); font-size:0.8rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
      .btn-filter-toggle:hover, .btn-filter-toggle.active { border-color:var(--orange); color:var(--orange); }
      .filter-badge { background:var(--orange); color:#000; border-radius:10px; padding:1px 6px; font-size:0.65rem; font-weight:700; display:none; }

      /* Results bar */
      .results-bar { color:var(--text-muted); font-size:0.8rem; margin-bottom:0; }
      .results-bar span { color:var(--gold); font-weight:700; }

      /* Sortable th additions */
      .beats-table th { cursor:pointer; user-select:none; transition:color 0.15s; vertical-align:middle; }
      .beats-table th:hover { color:var(--orange); }
      .beats-table th.active { color:var(--orange); }
      .sort-icon { display:inline-block; margin-left:4px; opacity:0.4; font-size:0.7rem; }
      .beats-table th.active .sort-icon { opacity:1; }

      /* Event badge */
      .event-badge { display:inline-block; background:rgba(255,140,0,0.12); color:var(--gold); border:1px solid rgba(255,140,0,0.3); border-radius:5px; padding:2px 8px; font-family:'Press Start 2P',monospace; font-size:0.55rem; letter-spacing:1px; white-space:nowrap; }

      /* ── System badge base ── */
      .system-badge { display:inline-flex; align-items:center; justify-content:center; width:80px; min-height:28px; border-radius:5px; padding:3px 4px; border:1px solid #555; background:#1a1a1a; box-sizing:border-box; vertical-align:middle; overflow:hidden; }
      .system-badge .sys-logo { max-height:25px; max-width:72px; width:auto; height:auto; display:block; object-fit:contain; }
      .system-badge .sys-text { font-size:0.6rem; white-space:normal; word-break:normal; overflow-wrap:normal; text-align:center; line-height:1.25; letter-spacing:0.04em; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

      /* ══ SYSTEM BADGES — grouped by font family ══ */

      /* Xbox — Orbitron 700 0.65rem, Xbox green */
      .sys-xbox, .sys-xbox-360, .sys-xbla, .sys-xbox-one, .sys-xbox-series-x {
        font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.65rem; letter-spacing:0.06em;
        color:#449e43; border-color:#478d22; text-shadow:0 0 8px rgba(16,124,16,0.55); }
      .sys-xbox { background:#000; }
      .sys-xbox-360, .sys-xbla { background:#d9d9d9; border-color:#93c66f}
      .sys-xbox-one { background:#0E7A0D; }
      .sys-xbox-series-x { background:#dfdfdf; }

      /* PlayStation (PS1-PS3) — Exo 2 900 */
      .sys-playstation, .sys-ps2, .sys-ps3 { font-family:'Exo 2',sans-serif; font-weight:900; }
      .sys-playstation { font-style:italic; background:#7f7f81; color:#c8d8f8; border-color:#4a5fa0; }
      .sys-ps2 { background:#0f0f11; color:#5b9fff; border-color:#003087; }
      .sys-ps3 { font-style:italic; letter-spacing:0.02em; background:#18224b; color:#7ab0ff; border-color:#0050c8; }

      /* PS4 / PS5 — Orbitron 700 0.65rem */
      .sys-ps4, .sys-ps5 {
        font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.65rem; letter-spacing:0.05em;
        background:#18224b; color:#4a90e2; border-color:#003ca0; }

      /* PSP / PC / PS Vita / TurboGrafx / Android — Exo 2 700 */
      .sys-psp, .sys-ps-vita, .sys-pc, .sys-turbografx-16, .sys-android {
        font-family:'Exo 2',sans-serif; font-weight:700; }
      .sys-psp, .sys-ps-vita { background:#080818; color:#6a9fd8; border-color:#003c96; }
      .sys-pc { letter-spacing:0.05em; background:#141c24; color:#94a3b8; border-color:#3d5068; }
      .sys-turbografx-16 { letter-spacing:0.03em; background:#1e0c00; color:#fdba74; border-color:#c85014; }
      .sys-android { letter-spacing:0.04em; background:#37d672; color:#4ade80; border-color:#0a4221; }

      /* NES / SNES / Super Famicom / Arcade — Press Start 2P 0.55rem */
      .sys-nes, .sys-snes, .sys-super-famicom, .sys-arcade {
        font-family:'Press Start 2P',monospace; font-size:0.55rem; }
      .sys-nes { letter-spacing:0.05em; background:#919090; color:#ff8080; border-color:#e60012; }
      .sys-snes { letter-spacing:0.05em; background:#161616; color:#c8a0ff; border-color:#c80000; }
      .sys-super-famicom { letter-spacing:0.05em; background:#919090; color:#c8a0ff; border-color:#c80000; }
      .sys-arcade { letter-spacing:0.06em; background:#1e0000; color:#fbbf24; border-color:#c81e1e;
        text-shadow:0 0 8px rgba(251,191,36,0.55); }

      /* Nintendo (N64–3DS) — Nunito 800 */
      .sys-n64, .sys-gamecube, .sys-wii, .sys-switch, .sys-switch-2, .sys-nintendo-ds, .sys-3ds {
        font-family:'Nunito',sans-serif; font-weight:800; }
      .sys-n64 { letter-spacing:0.03em; background:#000; color:#ff8080; border-color:#c80000; }
      .sys-gamecube { letter-spacing:0.02em; background:#000000; color:#a78bfa; border-color:#4b44a0; }
      .sys-wii { letter-spacing:0.04em; background:#282830; color:#e0e0e8; border-color:#aaaabc; }
      .sys-switch, .sys-switch-2 { letter-spacing:0.02em; background:#2a0005; color:#ff4757; border-color:#e4000f; }
      .sys-nintendo-ds { background:#e6e6e6; color:#60a5fa; border-color:#0064b4; }
      .sys-3ds { background:#e6e6e6; color:#ff7070; border-color:#d20000; }

      /* Game Boy / GBC — Press Start 2P 0.5rem 0.04em */
      .sys-gameboy, .sys-gameboy-color {
        font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:0.04em; }
      .sys-gameboy { background:#919090; color:#a8b870; border-color:#5a6e32; }
      .sys-gameboy-color { background:#280a30; color:#e0a0ff; border-color:#b450dc; }

      /* GBA — Press Start 2P 0.4rem */
      .sys-game-boy-advance {
        font-family:'Press Start 2P',monospace; font-size:0.4rem; letter-spacing:0.04em;
        background:#100828; color:#9f8fe0; border-color:#6432c8; }

      /* Sega (italic) — Russo One italic 0.04em */
      .sys-genesis, .sys-sega-saturn, .sys-sega-cd {
        font-family:'Russo One',sans-serif; font-style:italic; letter-spacing:0.04em; }
      .sys-genesis { background:#001030; color:#4da6ff; border-color:#003087; }
      .sys-sega-saturn { background:#081428; color:#7ab0e8; border-color:#1e468c; }
      .sys-sega-cd { background:#081428; color:#5bc8e0; border-color:#1e468c; }

      /* Sega (non-italic) — Russo One 0.04em */
      .sys-dreamcast, .sys-game-gear { font-family:'Russo One',sans-serif; letter-spacing:0.04em; }
      .sys-dreamcast { background:#d8d8d8; color:#fb923c; border-color:#f05a00; }
      .sys-game-gear { background:#454549; color:#9ca3af; border-color:#16161f; }

      /* Sega Master System — Russo One italic 0.03em */
      .sys-sega-master-system {
        font-family:'Russo One',sans-serif; font-style:italic; letter-spacing:0.03em;
        background:#ffffff; color:#f87171; border-color:#000000; }

      /* Neo Geo — Orbitron 700 0.62rem 0.06em, gold */
      .sys-neo-geo, .sys-neo-geo-pocket {
        font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.62rem; letter-spacing:0.06em;
        background:#acacac; color:#d4af37; border-color:#a07800;
        text-shadow:0 0 6px rgba(212,175,55,0.45); }

      /* Virtual Boy / Atari — Press Start 2P 0.5rem 0.05em */
      .sys-virtual-boy, .sys-atari, .sys-atari-jaguar {
        font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:0.05em; }
      .sys-virtual-boy { background:#1a0000; color:#ff2222; border-color:#c80000;
        text-shadow:0 0 10px rgba(255,0,0,0.7); }
      .sys-atari, .sys-atari-jaguar { background:#2b2b2b; color:#fdfdfd; border-color:#c5c5c5; }

      /* VR — Orbitron 700 0.62rem */
      .sys-vr {
        font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.62rem; letter-spacing:0.07em;
        background:#0e0820; color:#a78bfa; border-color:#5032c8; }

      /* Genre tag */
      .genre-tag { display:inline-block; background:rgba(185,79,255,0.12); color:var(--purple); border-radius:4px; padding:2px 7px; font-size:0.72rem; }

      /* Player chips */
      .player-chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
      .player-chip { display:inline-block; background:rgba(255,215,0,0.1); color:var(--gold); border:1px solid rgba(255,215,0,0.25); border-radius:20px; padding:2px 9px; font-size:0.72rem; white-space:nowrap; }
      .player-chip mark.hl { background:rgba(255,140,0,0.35); border-radius:2px; color:inherit; }

      /* Hero beat badge */
      .hero-beat { display:inline-flex; align-items:center; gap:4px; background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,140,0,0.15)); color:var(--gold); border:1px solid rgba(255,215,0,0.35); border-radius:4px; padding:1px 7px; font-size:0.65rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; white-space:nowrap; margin-left:6px; vertical-align:middle; }
      .hero-beat::before { content:'⭐'; font-size:0.6rem; }

      /* Sub-rows */
      .beats-table tbody tr.sub-row { background:rgba(15,16,32,0.6); }
      .beats-table tbody tr.sub-row td { padding-top:4px; padding-bottom:6px; border-bottom:1px solid rgba(255,140,0,0.05); font-size:0.8rem; color:var(--text-muted); }
      .beats-table tbody tr.sub-row td.num { color:rgba(255,215,0,0.3); padding-left:1.75rem; }
      .beats-table tbody tr.sub-row td.game { padding-left:1.75rem; }

      /* Search highlight */
      mark.hl { background:rgba(255,140,0,0.25); border-radius:2px; padding:0 1px; color:inherit; }

      /* Empty state */
      .empty-state { text-align:center; padding:4rem 1rem; color:var(--text-muted); }
      .empty-state .icon { font-size:3rem; margin-bottom:0.75rem; }

      /* Screen-reader only */
      .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); clip:rect(0,0,0,0); white-space:nowrap; border:0; }

      /* td classes */
      .beats-table td.num { color:var(--text-muted); font-size:0.75rem; font-weight:600; width:50px; }
      .beats-table td.game { font-weight:500; max-width:220px; }

      /* Column padding overrides moved to top content-section block */
      .beats-table td.players { color:var(--text-muted); font-size:0.82rem; max-width:220px; }

      /* Responsive — breakpoints match --bp-tablet (900px) and --bp-mobile (690px) in :root */
      @media (max-width:900px) { /* --bp-tablet */
        .beats-table th[data-col="genre"], .beats-table td:nth-child(5) { display:none; }
        .btn-filter-toggle { display:flex; }
        .log-controls { flex-direction:column; align-items:stretch; }
        .search-row { display:flex; gap:0.75rem; align-items:center; }
        .filters-drawer { display:none; flex-direction:column; gap:0.5rem; padding-top:0.4rem; border-top:1px solid var(--border); }
        .filters-drawer.open { display:flex; }
        .filters-drawer select, .filters-drawer .btn-clear-log { width:100%; box-sizing:border-box; }
        .search-wrap { max-width:360px; }
      }
      @media (max-width:690px) { /* --bp-mobile */
        .beats-table th[data-col="genre"], .beats-table td:nth-child(5) { display:none; }
        .beats-table th[data-col="system"], .beats-table td:nth-child(4) { display:none; }
        .filters-drawer select { font-size:0.72rem; }
      }