/* ═══════════════════════════════════════════════════════════════════════════
   emulator.st — Retro Gaming Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset & Vars ──────────────────────────────────────────────────────── */
:root {
  --bg: #0a0a0f;
  --bg-card: #141420;
  --bg-panel: #12121c;
  --bg-hover: #1c1c2e;
  --text: #e4e4ec;
  --text-dim: #8888a0;
  --accent: #6c5ce7;
  --accent-bright: #a29bfe;
  --accent-glow: rgba(108,92,231,.35);
  --green: #00b894;
  --red: #e74c3c;
  --gold: #f1c40f;
  --border: rgba(255,255,255,.08);
  --shadow-color: rgba(0,0,0,0.6);
  --radius: 8px;
  --radius-lg: 12px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --topbar-h: 56px;
  --card-w: 155px;
  --card-h: 220px;
  --row-gap: 12px;
  --transition: .2s ease;
}

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

html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* ─── Scanlines Overlay ─────────────────────────────────────────────────── */
.scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px, transparent 1px, transparent 3px);
  opacity: .4;
}

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,10,15,.98), rgba(10,10,15,.92));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-badge {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: .7rem;
  border-radius: 6px; letter-spacing: .05em;
}
.brand { font-weight: 700; font-size: .95rem; color: #fff; letter-spacing: .02em; }
.subbrand { font-size: .65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.topbar-center:empty { min-height: 0; }
.header-links { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* Wrapper: desktop unwraps into nav flex; mobile becomes collapsible panel */
.header-links-cluster {
  display: contents;
}
/* Must beat .ghost-btn { display: inline-flex } which comes later in this file */
button.mobile-nav-toggle.ghost-btn {
  display: none !important;
}
/* Middle nav only: desktop flat layout */
.header-links-scroll {
  display: contents;
}
.header-user-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Desktop / tablet: keep header nav on one row — no overlapping stacks */
@media (min-width: 769px) {
  /* overflow must stay visible here: children include .theme-menu (position:absolute).
     Putting overflow-x:auto on this nav clipped the dropdown and showed a bogus header scrollbar. */
  .topbar .header-links {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: visible;
    /* session 70: allow the nav to SHRINK below its content width. It was
       flex-shrink:0 (via .header-links base rule above), so at ≤1280-ish
       viewports the whole nav+user-cluster row pushed documentElement
       scrollWidth past the viewport (authed default theme measured
       dx=251px @1024x768; 22px @1280x720 under arcadeos). Shrinking is
       safe here: the middle strip (.header-links-scroll) is an absolute
       overflow-x:auto scroller by design and absorbs the squeeze; theme
       dropdown stays fixed (flex-shrink:0) and remains unclipped since
       nav overflow stays visible. */
    flex-shrink: 1;
  }
  /* Only the middle link strip scrolls horizontally on tight widths — theme + user cluster stay fixed */
  .topbar .header-links-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .topbar .theme-dropdown-wrap {
    flex-shrink: 0;
  }
  .topbar .header-user-cluster {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.play-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .8rem;
  border: none; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--transition), transform var(--transition);
  text-decoration: none; cursor: pointer;
}
.play-btn:hover { background: var(--accent-bright); transform: translateY(-1px); text-decoration: none; }
.play-btn.compact-btn { padding: 5px 12px; font-size: .72rem; }

.ghost-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  transition: all var(--transition); text-decoration: none; cursor: pointer;
}
.ghost-btn:hover { color: #fff; border-color: var(--accent); background: rgba(108,92,231,.1); text-decoration: none; }
.ghost-btn.is-active { color: var(--accent-bright); border-color: var(--accent); background: rgba(108,92,231,.12); }

.pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: rgba(255,255,255,.06); color: var(--text-dim);
  border-radius: 20px; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ─── Theme Dropdown ────────────────────────────────────────────────────── */
.theme-dropdown-wrap { position: relative; }
.theme-toggle-btn {
  gap: 5px;
}
.theme-toggle-btn svg { width: 14px; height: 14px; }
.theme-toggle-label { }

.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(260px, calc(100vw - 32px)); min-width: 220px;
  max-height: min(420px, 70vh); overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px var(--shadow-color, rgba(0,0,0,.6));
  display: none; z-index: 500;
  padding: 4px;
}
.theme-menu.visible { display: block; }

/* Desktop portal (theme-dropdown.js): #themeMenu is appended to <body> with position:fixed — not a child of the topbar. */
@media (min-width: 769px) {
  .theme-menu.theme-menu--portal.visible {
    display: block !important;
    visibility: visible !important;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px var(--shadow-color, rgba(0, 0, 0, 0.6));
    padding: 4px;
    margin: 0;
    pointer-events: auto;
  }
}

.theme-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-dim); font-size: .75rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: all var(--transition);
}
/* Radio-style indicator (icon · dot · label), matches classic theme picker */
.theme-item::before {
  content: "";
  order: 2;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border, rgba(255,255,255,.22));
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}
.theme-item .theme-item-icon { order: 1; }
.theme-item .theme-item-label { order: 3; flex: 1; min-width: 0; }
.theme-item.is-active::before {
  border-color: var(--accent-bright);
  background: radial-gradient(circle at center, var(--accent-bright) 42%, transparent 44%);
}
.theme-item:hover { background: var(--bg-hover); color: var(--text); }
.theme-item.is-active { color: var(--accent-bright); background: rgba(108,92,231,.12); }

.theme-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* ─── Search ────────────────────────────────────────────────────────────── */
.search-wrap { position: relative; width: 100%; max-width: 420px; }
.search-input {
  width: 100%; padding: 8px 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 24px; color: #fff; font-size: .85rem; outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); max-height: 380px; overflow-y: auto;
  display: none; z-index: 200; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.search-dropdown.visible { display: block; }
.search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; color: var(--text); text-decoration: none;
  transition: background var(--transition);
}
.search-item:hover { background: var(--bg-hover); text-decoration: none; }
.search-item-art { width: 36px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.search-item-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 4px; background: var(--bg-card); }
.search-item-art span { font-size: 1.4rem; }
.search-item-info { min-width: 0; }
.search-item-title { font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item-meta { font-size: .7rem; color: var(--text-dim); }
.search-empty { padding: 16px; text-align: center; color: var(--text-dim); font-size: .82rem; }

/* ─── Containers ────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }
.v5-shell {
  padding-top: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.panel {
  padding: 20px 24px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 16px;
}
.eyebrow {
  font-size: .65rem; font-weight: 700;
  color: var(--accent-bright);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px;
}
.hint { color: var(--text-dim); font-size: .82rem; margin-top: 4px; }
h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }

/* ─── Merged System Rail (SVG icon chips) ───────────────────────────────── */
.system-panel { margin: 0 20px 8px; }
.system-hint { font-size: .68rem; margin-bottom: 8px; }
.system-rail {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
}

.sys-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.sys-chip:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.sys-chip.is-active {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: rgba(108,92,231,.12);
  box-shadow: 0 0 12px var(--accent-glow);
}

.sys-chip-icon {
  width: 28px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sys-chip-icon svg {
  width: 100%; height: 100%;
}
.sys-chip-label { }
.sys-chip-count {
  font-size: .6rem;
  color: #a8a8c0;
  margin-left: 2px;
}

/* ─── Resume Banner ─────────────────────────────────────────────────────── */
.resume-banner {
  margin: 8px 20px 16px;
  background: linear-gradient(135deg, var(--bg-panel), rgba(108,92,231,.12));
  border: 1px solid var(--accent); border-radius: var(--radius-lg); overflow: hidden;
}
.resume-banner.hidden { display: none; }
.resume-inner { display: flex; align-items: center; gap: 20px; padding: 20px 24px; }
.resume-art { width: 80px; height: 110px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg-card); }
.resume-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.resume-copy { min-width: 0; }
.resume-copy h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }

/* ─── System Sections (Grid, Top-Down) ─────────────────────────────────── */
.rom-sections { padding: 0 0 40px; }
.system-section { margin-bottom: 28px; padding: 0 24px; }
.section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.section-icon {
  width: 32px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.section-icon svg { width: 100%; height: 100%; }
.section-title { font-size: 1.1rem; font-weight: 700; }
.section-count { font-size: .7rem; color: var(--text-dim); margin-left: auto; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 16px 12px;
}
.lazy-sentinel { height: 1px; grid-column: 1 / -1; }

/* ─── Game Card (Poster) ────────────────────────────────────────────────── */
.game-card {
  width: 100%; border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition);
  outline: none;
}
.game-card:hover, .game-card:focus-visible {
  transform: scale(1.04); z-index: 5;
}
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { text-decoration: none; }
.card-poster {
  position: relative; width: 100%; height: var(--card-h);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-card);
}
/* session 58c: cover-fit — full artwork visible; letterbox lands on poster bg */
.card-img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: opacity var(--transition); }
.card-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
}
.card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); opacity: 0;
  transition: opacity var(--transition);
}
.game-card:hover .card-overlay, .game-card:focus-visible .card-overlay { opacity: 1; }
.card-play-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border-radius: 50%;
  font-size: 1.2rem; color: #fff;
}
.card-info { padding: 8px 4px 0; }
.card-title {
  font-size: .76rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.card-meta {
  font-size: .65rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

/* ─── Hover Detail Panel ────────────────────────────────────────────────── */
.hover-panel {
  position: absolute; z-index: 150; width: 310px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.hover-panel.visible { opacity: 1; pointer-events: auto; }
.hover-inner { padding: 16px; }
.hover-art { width: 100%; max-height: 180px; object-fit: contain; object-position: center; border-radius: var(--radius); margin-bottom: 12px; background: var(--bg-card); }
.hover-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.hover-meta { font-size: .72rem; color: var(--text-dim); margin-bottom: 8px; }
.hover-desc { font-size: .78rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 12px; max-height: 60px; overflow: hidden; }

/* ─── Console Grid ──────────────────────────────────────────────────────── */
.console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 16px; padding: 8px 24px 40px;
}
.library-search-wrap { margin-top: 12px; max-width: 400px; }

/* ─── Account Panel ─────────────────────────────────────────────────────── */
.account-panel { max-width: 440px; margin: 60px auto; }
.login-form { margin-top: 16px; }
.login-form label { display: block; margin-bottom: 12px; }
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: var(--radius); color: #fff; font-size: .9rem; outline: none;
  transition: border-color var(--transition);
}
.login-form input:focus { border-color: var(--accent); }
.hero-actions { display: flex; gap: 10px; margin-top: 16px; }
.login-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab-btn {
  flex: 1; padding: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-dim);
  font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
  transition: all var(--transition);
}
.tab-btn.is-active { color: var(--accent-bright); border-color: var(--accent); background: rgba(108,92,231,.12); }

/* ─── Stats Grid ────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.stat-card { text-align: center; padding: 16px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-val { font-size: 1.8rem; font-weight: 800; color: var(--accent-bright); }
.stat-label { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ─── Dashboard Grid ────────────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.dash-card {
  display: block; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}
.dash-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.dash-card-sys { font-size: .6rem; color: var(--accent-bright); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dash-card-title { font-size: .82rem; font-weight: 600; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-time { font-size: .65rem; color: var(--text-dim); }

/* ─── Achievements ──────────────────────────────────────────────────────── */
.ach-filter-row { display: flex; gap: 6px; margin-top: 12px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ach-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color var(--transition);
}
.ach-card.ach-unlocked { border-color: var(--green); }
.ach-card.ach-locked { opacity: 1; }
.ach-card.ach-locked .ach-card-desc,
.ach-card.ach-locked .ach-card-progress,
.ach-card.ach-locked .ach-card-rarity,
.ach-card.ach-locked .ach-card-title { color: #9a9ab0; }
.ach-card.ach-locked .ach-card-icon { opacity: .65; }
.ach-card-icon { font-size: 2rem; flex-shrink: 0; }
.ach-card-body { flex: 1; min-width: 0; }
.ach-card-title { font-size: .85rem; font-weight: 700; }
.ach-card-desc { font-size: .72rem; color: var(--text-dim); margin: 2px 0 6px; }
.ach-card-bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.ach-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; }
.ach-card-progress { font-size: .65rem; color: var(--text-dim); margin-top: 3px; }
.ach-card-rarity { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; writing-mode: vertical-rl; color: var(--text-dim); }
.rarity-common .ach-card-rarity { color: var(--text-dim); }
.rarity-rare .ach-card-rarity { color: #3498db; }
.rarity-epic .ach-card-rarity { color: var(--accent-bright); }
.rarity-legendary .ach-card-rarity { color: var(--gold); }

/* ─── Achievement Toast ─────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column-reverse; gap: 8px; z-index: 500; pointer-events: none;
}
.ach-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--bg-panel), rgba(0,184,148,.15));
  border: 1px solid var(--green); border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.22,1,.36,1);
  pointer-events: auto;
}
.ach-toast.visible { transform: translateX(0); }
.ach-toast-icon { font-size: 1.6rem; }
.ach-toast-label { font-size: .6rem; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ach-toast-title { font-size: .9rem; font-weight: 700; }

/* ─── Play Page ─────────────────────────────────────────────────────────── */
.compact-container { max-width: 1100px; }
.compact-panel { padding: 16px 20px; }
.play-title { font-size: 1.2rem; }
.compact-hint { font-size: .75rem; }
.compact-toolbar { margin: 12px 0; }
/* Fixed to viewport — not clipped by .save-button-grid overflow */
.slot-hover-popup {
  position: fixed;
  z-index: 10050;
  margin: 0;
  padding: 7px 12px;
  max-width: min(92vw, 300px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.slot-hover-popup[hidden] {
  display: none !important;
}
/* Play toolbar: one row — slots scroll horizontally on narrow viewports */
.save-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.save-row-wrap .autosave-mini-wrap { flex-shrink: 0; }
.save-row-wrap .save-button-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  align-items: center;
}
.save-row-wrap .save-side-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .save-row-wrap { flex-wrap: wrap; }
}
.save-side-controls { display: flex; align-items: center; gap: 8px; }
.compact-pill { font-size: .65rem; }
.boot-clean-btn { padding: 4px 8px; min-width: 36px; }
.boot-clean-btn .boot-clean-icon { display: block; vertical-align: middle; }
/* Hover/focus timestamps show in #slotTimestampLine below the toolbar row */
.save-select-btn {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  max-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 6px;
  line-height: 1.15;
}
.save-select-btn .slot-main-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.screen-wrap { margin-top: 16px; border-radius: var(--radius-lg); overflow: hidden; }
#game { width: 100%; min-height: 400px; background: #000; }

/* ─── Game Detail Page ──────────────────────────────────────────────────── */
.game-detail-page { margin-top: 24px; }
.game-detail-hero { display: flex; gap: 24px; align-items: flex-start; }
.game-detail-art { width: 200px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.game-detail-art img { width: 100%; }
.game-detail-copy { flex: 1; }
.detail-meta { font-size: .8rem; color: var(--text-dim); margin-bottom: 8px; }
.detail-desc { font-size: .85rem; color: var(--text-dim); line-height: 1.5; }
.detail-actions { margin-top: 16px; display: flex; gap: 10px; }
.resume-card { margin-top: 8px; }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --card-w: 120px; --card-h: 170px; --topbar-h: auto; }

  body.v5-page {
    overflow-x: hidden;
  }

  .topbar {
    position: relative;
    top: auto;
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    min-height: 48px;
    z-index: 80;
  }
  .brand-wrap { flex: 0 0 auto; min-width: 0; max-width: min(100%, 280px); }
  .topbar-center {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .search-wrap { max-width: 100%; width: 100%; }

  /* Hamburger + collapsible panel (replaces always-visible nav rows) */
  button.mobile-nav-toggle.ghost-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    order: 3;
    margin-left: auto;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mobile-nav-toggle-bars {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
  }
  .header-links {
    order: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    overflow: visible;
    padding: 0 0 6px;
  }
  .header-links.mobile-nav-open {
    flex-direction: column;
    align-items: stretch;
  }
  .header-links-cluster {
    display: none;
    width: 100%;
    box-sizing: border-box;
  }
  .header-links.mobile-nav-open .header-links-cluster {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 2px 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Unwrap scroll so links stack as siblings inside the panel */
  .header-links.mobile-nav-open .header-links-scroll {
    display: contents;
  }
  .header-links.mobile-nav-open .header-links-cluster > a.ghost-btn,
  .header-links.mobile-nav-open .header-links-cluster > a.play-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    padding: 12px 14px;
    min-height: 44px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }
  .header-links.mobile-nav-open .header-links-cluster > span.pill,
  .header-links.mobile-nav-open .header-links-cluster > span.sync-indicator {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .theme-dropdown-wrap {
    width: 100%;
    max-width: 100%;
  }
  .theme-toggle-label { display: none; }
  .topbar .theme-toggle-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 12px 14px;
    box-sizing: border-box;
  }
  .header-user-cluster {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .header-user-cluster .ghost-btn {
    flex: 1 1 auto;
    min-width: 96px;
    min-height: 44px;
    justify-content: center;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  .header-user-cluster .pill {
    font-size: 0.68rem;
    padding: 10px 14px;
    max-width: none;
    flex: 1 1 140px;
    justify-content: center;
    min-height: 44px;
  }
  .topbar .notif-bell {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Theme picker: bottom sheet so it stays in the viewport (no horizontal clip) */
  .theme-dropdown-wrap.theme-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 210;
    pointer-events: auto;
  }
  .topbar .theme-menu {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-height: min(420px, 52vh) !important;
    z-index: 220 !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
    border-radius: var(--radius-lg);
  }

  .resume-banner { margin: 8px 12px 12px; max-width: none; }
  .continue-row.panel,
  #discoverSection.panel,
  #libraryControls.panel,
  #genreBarSection.panel {
    margin-left: 12px;
    margin-right: 12px;
    max-width: none;
    width: calc(100% - 24px);
    box-sizing: border-box;
  }

  .system-panel { margin: 0 12px 8px; padding: 12px 14px; max-width: none; width: calc(100% - 24px); box-sizing: border-box; }
  .system-rail { gap: 4px; }
  .sys-chip { padding: 4px 8px; font-size: .62rem; }
  .sys-chip-icon { width: 22px; height: 16px; }
  .sys-chip-count { display: none; }
  .system-hint { display: none; }

  .system-section { padding: 0 12px; }
  .section-head { padding: 0 0 8px; }
  .section-icon { width: 24px; height: 18px; }

  .resume-inner { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .resume-art { width: 60px; height: 80px; }

  .game-detail-hero { flex-direction: column; }
  .game-detail-art { width: 120px; }
  .panel { padding: 14px 16px; margin-bottom: 10px; }
  .container { padding: 16px 12px; }
  .console-grid { padding: 8px 12px 40px; gap: 10px; }
  .hover-panel { display: none; }
  h1 { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  :root { --card-w: 105px; --card-h: 148px; }
  .brand { font-size: .82rem; }
  .sys-chip-label { font-size: .58rem; }
}

/* ─── Focus States ──────────────────────────────────────────────────────── */
.game-card:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.ghost-btn:focus-visible, .play-btn:focus-visible,
.sys-chip:focus-visible, .theme-item:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

/* ─── Theme Dropdown Enhancements ───────────────────────────────────────── */
.theme-group-label {
  padding: 6px 10px 2px;
  font-size: .58rem; font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .1em;
  opacity: .6;
}
.theme-item-icon {
  width: 22px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.theme-item-icon svg { width: 100%; height: 100%; }
.theme-item-label { flex: 1; }

/* ─── Emulator Bezel (themed hardware chrome) ──────────────────────────── */
:root {
  --bezel-bg: #12121c;
  --bezel-frame: #1c1c2e;
  --bezel-radius: 12px;
  --bezel-shadow: 0 4px 24px rgba(0,0,0,.5);
  --bezel-label: #8888a0;
  --bezel-text: #8888a0;
}

.emu-bezel {
  margin-top: 16px;
  padding: 16px 16px 12px;
  background: var(--bezel-bg);
  border: 2px solid var(--bezel-frame);
  border-radius: var(--bezel-radius);
  box-shadow: var(--bezel-shadow);
  transition: all .3s ease;
}

.emu-bezel-top {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 10px;
}
.emu-bezel-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: bezel-pulse 2s ease-in-out infinite;
}
@keyframes bezel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.emu-bezel-title {
  font-size: .7rem; font-weight: 700;
  color: var(--bezel-label);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.emu-screen-frame {
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8);
}
.emu-screen-frame #game {
  width: 100%;
  min-height: 400px;
}

.emu-bezel-bottom {
  display: flex; justify-content: center;
  padding: 10px 4px 0;
}
.emu-bezel-label {
  font-size: .6rem; font-weight: 700;
  color: var(--bezel-label);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ─── System-specific bezel overrides via data-theme ───────────────────── */

/* NES — gray/red cartridge-loader console */
[data-theme="nes"] .emu-bezel {
  background: linear-gradient(180deg, #c8c0b8 0%, #a89888 100%);
  border: 3px solid #706860;
}
[data-theme="nes"] .emu-bezel-title,
[data-theme="nes"] .emu-bezel-label { color: #444; }
[data-theme="nes"] .emu-bezel-indicator { background: #c0392b; box-shadow: 0 0 6px #c0392b; }
[data-theme="nes"] .emu-screen-frame { border: 3px solid #888; border-radius: 2px; }

/* SNES — soft lavender/purple retro */
[data-theme="snes"] .emu-bezel {
  background: linear-gradient(180deg, #d0c8d8 0%, #b0a8c0 100%);
  border: 2px solid #a098b0; border-radius: 16px;
}
[data-theme="snes"] .emu-bezel-title,
[data-theme="snes"] .emu-bezel-label { color: #665880; }
[data-theme="snes"] .emu-screen-frame { border: 2px solid #9990a8; border-radius: 6px; }

/* Game Boy — olive/beige handheld */
[data-theme="gb"] .emu-bezel {
  background: linear-gradient(180deg, #c0b8a0 0%, #a09880 100%);
  border: 3px solid #8a8270; border-radius: 12px 12px 24px 24px;
}
[data-theme="gb"] .emu-bezel-title,
[data-theme="gb"] .emu-bezel-label { color: #555040; }
[data-theme="gb"] .emu-bezel-indicator { background: #c0392b; box-shadow: 0 0 4px #c0392b; }
[data-theme="gb"] .emu-screen-frame {
  border: 4px solid #506030; border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(139,172,15,.15);
}

/* Game Boy Color — purple translucent */
[data-theme="gbc"] .emu-bezel {
  background: linear-gradient(180deg, #6858b0 0%, #4a3a90 100%);
  border: 3px solid #3a2a80; border-radius: 14px 14px 24px 24px;
}
[data-theme="gbc"] .emu-bezel-title,
[data-theme="gbc"] .emu-bezel-label { color: #c0b0e0; }
[data-theme="gbc"] .emu-screen-frame { border: 3px solid #5040a0; border-radius: 4px; }

/* GBA — indigo handheld landscape */
[data-theme="gba"] .emu-bezel {
  background: linear-gradient(180deg, #4a4098 0%, #302878 100%);
  border: 3px solid #201868; border-radius: 24px;
}
[data-theme="gba"] .emu-bezel-title,
[data-theme="gba"] .emu-bezel-label { color: #b0a8e0; }
[data-theme="gba"] .emu-screen-frame { border: 2px solid #5848b0; border-radius: 4px; }

/* N64 — dark plastic */
[data-theme="n64"] .emu-bezel {
  background: #2a2a2a; border: 3px solid #444; border-radius: 6px;
}
[data-theme="n64"] .emu-bezel-indicator { background: #27ae60; box-shadow: 0 0 6px #27ae60; }

/* NDS — white/silver clean */
[data-theme="nds"] .emu-bezel {
  background: linear-gradient(180deg, #d0d0d8 0%, #b8b8c0 100%);
  border: 2px solid #a0a0a8; border-radius: 10px;
}
[data-theme="nds"] .emu-bezel-title,
[data-theme="nds"] .emu-bezel-label { color: #666; }
[data-theme="nds"] .emu-screen-frame { border: 2px solid #aaa; border-radius: 4px; }

/* Genesis — black/red aggressive */
[data-theme="genesis"] .emu-bezel {
  background: #0e0e0e; border: 3px solid #222;
  border-top: 4px solid #c0392b; border-radius: 4px;
}
[data-theme="genesis"] .emu-bezel-indicator { background: #c0392b; box-shadow: 0 0 8px #c0392b; }

/* PlayStation — gray hardware */
[data-theme="ps1"] .emu-bezel {
  background: linear-gradient(180deg, #909098 0%, #707078 100%);
  border: 2px solid #606068; border-radius: 6px;
}
[data-theme="ps1"] .emu-bezel-title,
[data-theme="ps1"] .emu-bezel-label { color: #444; }
[data-theme="ps1"] .emu-screen-frame { border: 2px solid #606068; }

/* PSP — sleek black */
[data-theme="psp"] .emu-bezel {
  background: linear-gradient(180deg, #222 0%, #111 100%);
  border: 2px solid #444; border-radius: 20px;
}

/* Atari 2600 — woodgrain */
[data-theme="a2600"] .emu-bezel {
  background: linear-gradient(180deg, #5a4838 0%, #3a2818 100%);
  border: 3px solid #2c1c0c; border-top: 6px solid #222; border-radius: 2px;
}
[data-theme="a2600"] .emu-bezel-title,
[data-theme="a2600"] .emu-bezel-label { color: #a09070; }

/* Arcade — neon cabinet */
[data-theme="arcade"] .emu-bezel {
  background: #0e0e1c;
  border: 3px solid #3498db;
  box-shadow: 0 0 20px rgba(52,152,219,.2), inset 0 0 40px rgba(0,0,0,.4);
  border-radius: 6px;
}
[data-theme="arcade"] .emu-bezel-indicator { background: #ff00ff; box-shadow: 0 0 10px #ff00ff; }
[data-theme="arcade"] .emu-bezel-title { color: #ff66ff; }
[data-theme="arcade"] .emu-screen-frame {
  border: 2px solid #2980b9;
  box-shadow: inset 0 0 30px rgba(52,152,219,.08);
}

/* DOS — beige CRT monitor */
[data-theme="dos"] .emu-bezel {
  background: linear-gradient(180deg, #d0c8b0 0%, #b0a890 100%);
  border: 4px solid #908870; border-radius: 8px;
}
[data-theme="dos"] .emu-bezel-title,
[data-theme="dos"] .emu-bezel-label { color: #555; }
[data-theme="dos"] .emu-screen-frame {
  border: 4px solid #706848; border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}

/* C64 — brown/tan keyboard computer */
[data-theme="c64"] .emu-bezel {
  background: linear-gradient(180deg, #9b8365 0%, #7b6345 100%);
  border: 3px solid #5b4325; border-radius: 2px;
}
[data-theme="c64"] .emu-bezel-title,
[data-theme="c64"] .emu-bezel-label { color: #ddd; }

/* Amiga — cream/beige computer */
[data-theme="amiga"] .emu-bezel {
  background: linear-gradient(180deg, #e8e0d0 0%, #d0c8b0 100%);
  border: 3px solid #b0a890; border-radius: 4px;
}
[data-theme="amiga"] .emu-bezel-title,
[data-theme="amiga"] .emu-bezel-label { color: #555; }

/* ─── Bezel Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .emu-bezel { padding: 10px 10px 8px; margin-top: 12px; }
  .emu-bezel-top { padding: 0 2px 6px; }
  .emu-bezel-title { font-size: .6rem; }
  .emu-screen-frame #game { min-height: 280px; }
  .emu-bezel-bottom { padding: 6px 2px 0; }
}


/* ==========================================================================
   MOBILE TOPBAR OPTIMIZATION - Compact Header
   ========================================================================== */

@media (max-width: 768px) {
  /* Make topbar more compact */
  .topbar {
    padding: 6px 10px;
    min-height: 44px;
    gap: 6px;
  }
  
  /* Smaller brand/logo */
  .brand-wrap {
    font-size: 0.9rem;
  }
  
  .brand-wrap .brand {
    font-size: 0.95rem;
  }
  
  /* Hide search on mobile - users can use the search page */
  .topbar-center {
    display: none;
  }
  
  /* Compact menu button - just the icon */
  button.mobile-nav-toggle.ghost-btn {
    padding: 8px 10px;
    min-height: 36px;
    gap: 6px;
  }
  
  .mobile-nav-toggle-label {
    display: none; /* Hide "Menu" text, just show hamburger icon */
  }
  
  .mobile-nav-toggle-bars {
    width: 20px;
    height: 2px;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  }
  
  /* When menu is open, make it fullscreen overlay style */
  .header-links.mobile-nav-open {
    position: fixed;
    top: 50px;
    left: 10px;
    right: 10px;
    bottom: auto;
    background: rgba(10, 10, 15, 0.98);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .header-links.mobile-nav-open .header-links-cluster {
    padding: 0;
    margin-top: 0;
    border-top: none;
  }
  
  /* Make menu items larger for touch */
  .header-links.mobile-nav-open .ghost-btn {
    padding: 14px 16px;
    font-size: 1rem;
    justify-content: flex-start;
    border-radius: 8px;
    margin-bottom: 4px;
  }
  
  /* Close button for mobile menu */
  .header-links.mobile-nav-open::before {
    content: "Menu";
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Extra small screens - even more compact */
@media (max-width: 380px) {
  .topbar {
    padding: 4px 8px;
  }
  
  .brand-wrap .brand {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   MOBILE TOPBAR FIX - Force Override (appended last to win cascade)
   ========================================================================== */

@media (max-width: 768px) {
  /* FORCE: Hide search on mobile */
  .topbar .topbar-center { display: none !important; }
  
  /* FORCE: Compact topbar */
  .topbar { 
    padding: 6px 10px !important; 
    min-height: 44px !important; 
    gap: 6px !important; 
  }
  
  /* FORCE: Icon-only menu button */
  .topbar button.mobile-nav-toggle.ghost-btn { 
    padding: 8px 10px !important; 
    min-height: 36px !important;
  }
  
  .topbar .mobile-nav-toggle-label { 
    display: none !important; 
  }
  
  /* Floating menu overlay */
  .header-links.mobile-nav-open {
    position: fixed !important;
    top: 50px !important;
    left: 10px !important;
    right: 10px !important;
    background: rgba(10, 10, 15, 0.98) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
    z-index: 1000 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
}

/* CACHE_BUST_MARKER: 1776988934 */

/* ── Mobile experience (2026-09-14) — applies at ≤768px everywhere ───────── */
@media (max-width: 768px) {
  /* Touch targets: Apple/Android minimum ~44px */
  .sys-chip { padding: 10px 14px !important; font-size: .8rem; }
  .card-fav-btn, .card-wishlist-btn {
    min-width: 44px !important; min-height: 44px !important;
    padding: 8px !important; font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* spacing between adjacent targets */
  .card-actions { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .card-actions .card-details-link { min-width: 0; }
  .ghost-btn { min-height: 40px; }
  .collapse-toggle-accent { min-width: 40px; min-height: 40px; }

  /* Comfortable base font on tiny screens (10px text is unreadable) */
  body { font-size: 15px; }
  .card-title, .game-card h3 { font-size: .95rem !important; }

  /* Buttons never shrink below tappable */
  button, .btn, input[type=submit] { min-height: 40px; }

  /* Prevent accidental double-tap zoom delays on controls */
  a, button, .sys-chip, .card-fav-btn { touch-action: manipulation; }

  /* Cards: single/two-column friendly spacing */
  .games-grid, .cards-grid { gap: 12px !important; }

  /* Card action buttons + meta: legible minimum */
  .card-details-link, .card-fav-btn, .card-wishlist-btn,
  .card-details-link.compact-btn, .card-actions .ghost-btn { font-size: .95rem !important; }
  .card-meta { font-size: .8rem !important; }
  .sys-chip-label, .sys-chip-count, .genre-icon, .genre-label,
  .genre-count, .section-count, .eyebrow, .continue-card-title,
  .continue-card-meta, .theme-group-label, .hint { font-size: .8rem !important; }
  .ghost-btn { font-size: .85rem !important; }
  /* v5-refine's play-page compact rules (.55rem save buttons) are overridden here
     for readability — they load after style.css so needs the stronger selector */
  .save-button-grid .ghost-btn { font-size: .72rem !important; }
  .eyebrow { font-size: .75rem !important; }
  /* badges/counters are decorative-adjacent: 11px floor */
  .brand-badge, .subbrand, .mobile-nav-toggle-label, .genre-toggle-arrow,
  .play-btn, [class*="-count"] { font-size: 11px !important; }

  /* Content-driven horizontal overflow guard: card strips scroll inside
     themselves, never widen the document (fixes 17-24px doc overflow when
     resume/continue cards render past the viewport) */
  body { overflow-x: hidden; }
  .home-hero-grid, .home-hero-grid * { min-width: 0; }
  .continue-grid, .card-grid, .games-grid { overflow-x: auto; }

  /* EJS save-state popup leaks "undefined" text on mobile — hidden; states
     are managed by the site UI */
  .ejs_popup_container { display: none !important; }

  /* ── Translucent touch controller (2026-09-14): see the game through the
     pad; buttons brighten while held. Gaps between buttons stay tappable
     for future gestures. */
  .emu-st-touch { background: transparent !important; pointer-events: none; }
  .emu-st-touch .emu-st-touch-btn,
  .emu-st-touch button {
    pointer-events: auto;
    background: rgba(162, 155, 254, 0.16) !important;
    border: 1.5px solid rgba(162, 155, 254, 0.45) !important;
    color: rgba(234, 234, 236, 0.9) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background 0.12s ease;
    box-shadow: none !important;
  }
  .emu-st-touch .emu-st-touch-btn.emu-st-touch-active,
  .emu-st-touch button:active {
    background: rgba(162, 155, 254, 0.55) !important;
  }
  /* kill opaque strip backgrounds (mobile-force paints #0b1422) */
  .emu-st-touch-nes, .emu-st-touch-snes-area, .emu-st-touch-genesis-area,
  .emu-st-touch-gb-area, .emu-st-touch-actions, .emu-st-touch-dpad,
  #emu-st-touch.emu-st-touch { background: transparent !important; }
  .emu-st-touch .emu-st-touch-inner { background: transparent !important; }
  /* small phones: slimmer pad buttons so the game keeps the screen */
  @media (max-width: 360px) {
    .emu-st-touch-btn { width: 48px !important; height: 48px !important;
                        min-width: 48px !important; min-height: 48px !important; }
  }
  /* NES glass layout: A/B face cluster right of the D-pad */
  .emu-st-touch-nes .emu-st-touch-actions { flex: 1 !important; }
  .emu-st-touch-nes .emu-st-touch-nes-face {
    display: flex; gap: 14px; align-items: center;
  }
  .emu-st-touch-nes .emu-st-face {
    width: 58px !important; height: 58px !important;
    border-radius: 50% !important; font-weight: 700; font-size: 1rem !important;
  }
  /* NES: the SVG controller IS the pad (no duplicate D-pad) — size it for thumbs */
  .emu-st-touch-nes .emu-st-touch-actions { flex: 1 !important; }
  /* touch layer = floating translucent overlay. NO band: the canvas fills
     the screen below the HUD and the pad floats over its bottom corners.
     #emu-st-touch ID rule beats mobile-force.css height:140px !important. */
  #emu-st-touch.emu-st-touch,
  .emu-st-touch-nes,
  .emu-st-touch:has(.emu-st-touch-nes) {
    height: auto !important;
    max-height: none !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: transparent !important;
    padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px !important;
    pointer-events: none;
  }
  .emu-st-touch .emu-st-touch-inner {
    display: flex !important; align-items: flex-end !important;
    justify-content: space-between !important; gap: 12px;
    max-width: 760px; margin: 0 auto;
  }
  /* landscape: compact strip — the screen is short, don't eat half of it */

  #nes-react-mount, .emu-st-touch-nes-react { width: 100% !important; height: 100% !important; }
  .emu-st-touch-nes .emu-st-touch-inner { align-items: stretch; }
  .emu-st-touch-nes .emu-st-touch-actions { align-items: center; justify-content: center; }
  /* NES face cluster sizing (glass overlay) */
  .emu-st-touch-nes .emu-st-touch-actions,
  .emu-st-touch-nes #nes-react-mount { max-height: none !important; }

  /* ── canvas fills the screen below the HUD (both orientations) ──────────
     The JS fit handler sets the wrap/stage heights; the canvas absolute-fills
     the stage. object-fit: contain keeps the bitmap aspect; the translucent
     controller floats over the bottom. */
  .emu-st-stage-wrap { position: relative !important; }
  #emu-st-stage { position: absolute !important; inset: 0 !important;
                  width: 100% !important; height: 100% !important; }
  .emu-st-stage .ejs_canvas_parent { position: static !important; }
  .emu-st-stage canvas, .ejs_canvas {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    max-height: none !important; aspect-ratio: auto !important;
    object-fit: contain !important;
    left: 0 !important; top: 0 !important;
    transform: none !important; margin: 0 !important;
  }

  /* ── Play-page HUD compaction: the game gets the screen, chrome collapses ──
     Desktop buttons (Saves/Cheats/Controls/Settings/Theme/Share/Full) are
     duplicated in the ☰ mobile menu — hide them; drop the boxart thumbnail;
     icon-only hard reset; compact slots. */
  .emu-st-hud { padding: 4px 8px !important; gap: 6px !important; min-height: 0 !important;
                flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .emu-st-hud::-webkit-scrollbar { display: none; }
  .emu-st-hud-left, .emu-st-hud-right { flex-shrink: 0 !important; }
  /* tiny phones: slot bar wraps to 2 rows — hide it (slots in ☰ > Saves) */
  @media (max-width: 420px) {
    .emu-st-hud .emu-st-slot-bar { display: none !important; }
  }
  .emu-st-title { font-size: .8rem !important; line-height: 1.1 !important; max-width: 110px; }
  .emu-st-title-sys { font-size: .62rem !important; }
  .emu-st-hud .emu-st-btn { padding: 6px 9px !important; min-height: 36px !important; font-size: .8rem !important; }
  .emu-st-slot-bar { gap: 3px !important; }
  .emu-st-slot-bar .emu-st-btn { padding: 5px 8px !important; min-height: 32px !important; }
  .emu-st-volume input[type=range] { width: 64px !important; }

  /* Inputs ≥16px so iOS doesn't zoom on focus */
  input[type=text], input[type=search], input[type=email], input[type=password],
  input[type=number], select, textarea { font-size: 16px !important; }
}

/* ── Touch devices: compact HUD at any size/orientation (2026-09-14) ──────
   Desktop-only buttons live in the ☰ mobile menu; the thumbnail and text
   labels waste game space on phones/tablets. */
@media (pointer: coarse) {
  /* Saves/Cheats/Controls/Settings/Theme live in the ☰ menu — hide from the
     bar. Full(screen) stays: best mobile experience. Specificity must beat
     core css ".emu-st-hud-right .emu-st-btn.emu-st-btn-desktop" (min-769px). */
  .emu-st-hud .emu-st-hud-right .emu-st-btn.emu-st-btn-desktop:not([data-action="fullscreen"]),
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-panel="saves"],
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-panel="cheats"],
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-panel="controls"],
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-panel="settings"],
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-action="share-game"],
  .emu-st-hud .emu-st-hud-right #emu-st-theme-btn { display: none !important; }
  /* share lives in the ☰ menu on touch */
  /* ☰ must survive the core's min-769px desktop branch (landscape phones) */
  .emu-st-hud .emu-st-hud-right .emu-st-btn[data-action="mobile-menu"] {
    display: inline-flex !important; }
  .emu-st-boxart-wrap { display: none !important; }
  .emu-st-hud .emu-st-btn[data-action="hard-reset"] {
    font-size: 0 !important; padding: 6px 8px !important; }
  .emu-st-hud .emu-st-btn[data-action="hard-reset"]::before {
    content: "❌"; font-size: .9rem; }
  .emu-st-hud { min-height: 0 !important; }
}

/* ── Landscape mobile: game fills the rotated viewport (2026-09-14) ─────────
   EmulatorJS pins inline pixel sizes and doesn't handle viewport rotation, so
   the canvas stayed at portrait width with dead space. Force the stage to fill
   remaining height and let the canvas letterbox inside it. */
@media (orientation: landscape) and (max-height: 500px) {
  /* HUD: ONE row, never wraps — overflow scrolls instead of ragged wrapping */
  .emu-st-hud { padding: 2px 6px !important; gap: 4px !important;
                flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .emu-st-hud::-webkit-scrollbar { display: none; }
  .emu-st-hud-left, .emu-st-hud-right { flex-wrap: nowrap !important; flex-shrink: 0 !important; }
  .emu-st-title, .emu-st-title-main, .emu-st-title-sys { display: none !important; }
  .emu-st-hud .emu-st-btn { padding: 4px 7px !important; min-height: 30px !important;
                            font-size: .75rem !important; flex-shrink: 0 !important; }
  .emu-st-volume input[type=range] { display: none !important; }  /* mute icon stays */
  /* slot bar: numbers only, no "Slot 1" label button */
  .emu-st-slot-bar { gap: 2px !important; }
  .emu-st-hud #emu-st-slot-pill { display: none !important; }  /* "Slot 1" pill — numbers suffice */

  .emu-st-stage-wrap { flex: 1 1 0 !important; min-height: 0 !important; position: relative !important; }
  #emu-st-stage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
  .ejs_canvas_parent { width: 100% !important; height: 100% !important; }
  .emu-st-stage .ejs_canvas_parent {
    position: relative !important;
    width: 100% !important; height: 100% !important;
  }
  /* kill the core css max-height clamp (100vh - 120px = the 270px ceiling) */
  .emu-st-stage canvas, .ejs_canvas { max-height: none !important; }
  .ejs_canvas {
    aspect-ratio: auto !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    left: 0 !important; top: 0 !important;
    transform: none !important; margin: 0 !important;
  }
}


/* == session 58c cover-fit polish: letterbox gutters look intentional == */
.card-poster { background: var(--bg-card); }
.card-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(37,244,238,0.04), transparent 60%);
}