/* =============================================================
   Game Vault -- site-specific styles, layered over styles.css
   ============================================================= */

/* CRT theme: phosphor green on near-black, scanline-era homage */
[data-theme="crt"] {
  --bg:      #050a05;
  --bg-alt:  #0a120a;
  --black:   #33ff66;
  --text:    #9fdfae;
  --dim:     #4d8f5e;
  --faint:   #2e5c3a;
  --muted:   #1f3d27;
  --rule:    #15291a;
  --success: #33ff66;
  --shadow:    0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.6);
}
[data-theme="crt"] nav.site-nav { background: rgba(5, 10, 5, 0.95); border-bottom: 1px solid #15291a; }
[data-theme="crt"] .section-body p { color: #7cba8b; }
[data-theme="crt"] .section-body strong { color: #33ff66; }
[data-theme="crt"] .hero p.lede { color: #7cba8b; }
[data-theme="crt"] body { font-family: var(--mono); }

/* Famicom theme: console crimson + cream, the 1983 plastic */
[data-theme="famicom"] {
  --bg:      #8b1a24;
  --bg-alt:  #781520;
  --black:   #f5e9d6;
  --text:    #f0e0cb;
  --dim:     #d4a8a0;
  --faint:   #a86058;
  --muted:   #8f4840;
  --rule:    #5e0f18;
  --success: #ffd24a;
  --shadow:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
}
[data-theme="famicom"] nav.site-nav { background: rgba(120, 21, 32, 0.95); border-bottom: 2px solid #5e0f18; }
[data-theme="famicom"] .section-body p { color: #e8d2bc; }
[data-theme="famicom"] .section-body strong { color: #ffd24a; }
[data-theme="famicom"] .hero p.lede { color: #e8d2bc; }
[data-theme="famicom"] .num-value { color: #ffd24a; }

/* ---- Library view toggle ---- */
.view-toggle { display: flex; gap: 0; margin-bottom: 18px; }
.vt-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dim);
  background: var(--bg-alt); border: 1px solid var(--rule);
  padding: 10px 22px; cursor: pointer; transition: all 0.2s;
}
.vt-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.vt-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.vt-btn:hover { color: var(--black); }
.vt-btn.active {
  color: var(--bg); background: var(--black); border-color: var(--black);
}

/* drill-in header when a console is opened from console view */
.drill-bar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 4px 0 16px;
}
.drill-title { font-size: 20px; font-weight: 600; color: var(--black); letter-spacing: -0.3px; }
.drill-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--dim); }
.drill-back {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--rule); border-radius: 20px;
  padding: 4px 12px; cursor: pointer; background: none; transition: all 0.2s;
}
.drill-back:hover { color: var(--black); border-color: var(--dim); }

/* ---- Browse controls ---- */
.controls {
  display: flex; gap: 12px; align-items: center;
  padding: 4px 0 22px; flex-wrap: wrap;
}
.controls input[type="search"] {
  flex: 1 1 280px; min-width: 0;
  font-family: var(--sans); font-size: 15px;
  color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px; transition: border-color 0.2s;
}
.controls input[type="search"]:focus { outline: none; border-color: var(--dim); }
.controls select {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 11px 12px; cursor: pointer;
}
.result-bar {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}

/* ---- Console list (expandable rows) ---- */
.cat-list { list-style: none; padding: 0; margin: 0; max-width: 1000px; }
details.title-row { border-bottom: 1px solid var(--rule); }
details.title-row > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px 18px; align-items: center;
  padding: 12px 4px 12px 0; transition: padding-left 0.25s;
}
details.title-row > summary::-webkit-details-marker { display: none; }
details.title-row > summary:hover,
details.title-row[open] > summary { padding-left: 10px; }

/* cover thumbnail in the row */
.t-thumb { width: 40px; height: 54px; object-fit: contain; border-radius: 3px;
  align-self: center; background: var(--bg-alt);
  box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: zoom-in; }
img.t-thumb { transition: transform .15s ease; }
img.t-thumb:hover { transform: scale(1.08); }
.t-noart { box-shadow: none; background: var(--rule);
  border-radius: 3px; cursor: default;
  -webkit-mask: linear-gradient(135deg, transparent 46%, #000 46%, #000 54%, transparent 54%);
          mask: linear-gradient(135deg, transparent 46%, #000 46%, #000 54%, transparent 54%); }

.t-head { min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.t-title { font-size: 17px; font-weight: 600; color: var(--black); letter-spacing: -0.2px; }
.t-year { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--dim); }
.t-manuf {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--rule); border-radius: 20px; padding: 2px 9px;
}

.t-right {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--dim); white-space: nowrap; text-align: right;
  display: flex; align-items: center; gap: 14px; justify-content: flex-end; flex-wrap: wrap;
}
.t-files { color: var(--text); font-weight: 500; }
.t-size { color: var(--dim); }
.t-regions { color: var(--dim); letter-spacing: 1.5px; font-size: 10px; }
.t-console { color: var(--faint); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }

/* status flags on a title (proto / unlicensed / homebrew) */
.t-flag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.5px;
  border: 1px solid var(--rule); border-radius: 20px; padding: 2px 8px;
  color: var(--dim);
}
.t-flag.f-proto      { color: #b3122b; border-color: #b3122b55; }
.t-flag.f-unlicensed { color: #b07c00; border-color: #b07c0055; }
.t-flag.f-homebrew   { color: #1f7a4d; border-color: #1f7a4d55; }
[data-theme="dark"] .t-flag.f-proto      { color: #ff5c77; }
[data-theme="dark"] .t-flag.f-unlicensed { color: #ffc94a; }
[data-theme="dark"] .t-flag.f-homebrew   { color: #4ade8c; }

/* load-more button */
.load-more-wrap { padding: 26px 0 0; }
#load-more { background: none; border: none; cursor: pointer; }

/* console rows are clickable (filter the library) */
.console-row { cursor: pointer; }

/* consoles whose library is not yet indexed: listed for the record, not drillable */
.console-row.ni-row { cursor: default; }
.console-row.ni-row:hover { padding-left: 0; }
.ni {
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  color: var(--faint); border: 1px dashed var(--muted);
  border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}

/* console rows rendered inside the library list (BY CONSOLE view) reuse
   the area-list row look even though they live in .cat-list */
.cat-list .console-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left 0.25s;
}
.cat-list .console-row:hover { padding-left: 10px; }
.cat-list .console-row .area-right {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  white-space: nowrap; flex: none;
}
.cat-list .console-row .files { color: var(--text); font-weight: 500; }
@media (max-width: 760px) {
  .cat-list .console-row { flex-direction: column; gap: 6px; }
}
summary .chev { color: var(--faint); transition: transform 0.2s; display: inline-block; margin-left: 2px; }
details.title-row[open] summary .chev { transform: rotate(90deg); }

/* expanded body */
.t-body { padding: 2px 4px 24px 0; max-width: 760px; }
.t-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.t-field .k {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--faint); display: block; margin-bottom: 3px;
}
.t-field .v { font-size: 14px; color: var(--text); }
.t-field .v.accl { color: var(--success); }

/* share-of-collection bar */
.t-bar {
  margin-top: 14px; max-width: 420px;
  height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.t-bar i { display: block; height: 100%; background: var(--black); border-radius: 2px; }
.t-bar-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--faint); margin-top: 6px;
}

/* ---- Drive areas list ---- */
.area-list { list-style: none; padding: 0; margin: 26px 0 0; max-width: 1000px; }
.area-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left 0.25s;
}
.area-list li:hover { padding-left: 10px; }
.area-left { min-width: 0; }
.area-name { display: block; font-size: 16px; font-weight: 600; color: var(--black); font-family: var(--mono); letter-spacing: 0.5px; }
.area-desc { display: block; font-size: 13px; color: var(--dim); line-height: 1.55; margin-top: 4px; max-width: 560px; }
.area-right {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--dim); white-space: nowrap; text-align: right; flex: none;
}
.area-right .files { color: var(--text); font-weight: 500; display: block; }

/* ---- Explainer cards (shared rule-grid pattern) ---- */
.rule-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-top: 26px; max-width: 1000px;
}
.rule-card {
  background: var(--bg-alt); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 24px;
}
.rule-card .rc-n { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--success); }
.rule-card h3 { font-size: 16px; font-weight: 600; color: var(--black); margin: 10px 0 8px; letter-spacing: -0.2px; }
.rule-card p { font-size: 13.5px; color: var(--dim); line-height: 1.6; }

/* ---- Sub-page hero (consoles.html) ---- */
.hero.hero-sub { padding: 100px 60px 50px; }
.hero.hero-sub h1 { font-size: clamp(30px, 4.5vw, 52px); }
@media (max-width: 900px) { .hero.hero-sub { padding: 64px 20px 30px; } }

/* ---- Hero logo (black line-art emblem; inverts on dark themes) ---- */
.hero-logo {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 0 22px;
}
[data-theme="dark"] .hero-logo,
[data-theme="crt"] .hero-logo,
[data-theme="famicom"] .hero-logo,
[data-theme="dracula"] .hero-logo { filter: invert(1); }
@media (max-width: 760px) {
  .hero-logo { max-width: 190px; margin-bottom: 16px; }
}

/* ---- Bar charts (consoles.html "By the numbers") ---- */
.charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 44px 56px; margin-top: 26px; max-width: 1100px;
}
.chart h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dim); margin-bottom: 16px;
}
.bar-row {
  display: grid; grid-template-columns: minmax(90px, 130px) 1fr 56px;
  gap: 12px; align-items: center; padding: 5px 0;
}
.bar-label {
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-track {
  height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden;
}
.bar-track i { display: block; height: 100%; background: var(--black); border-radius: 3px; }
.bar-val {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px;
  color: var(--dim); text-align: right;
}

/* ---- Theme toggle label ---- */
.theme-toggle .label { min-width: 64px; text-align: left; display: inline-block; }

/* ---- Maker's mark ---- */
.footer-inner .maker { letter-spacing: 2px; color: var(--dim); }
.footer-inner .maker .sep { color: var(--faint); opacity: 0.55; margin: 0 3px; font-weight: 300; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .controls { gap: 10px; padding-bottom: 18px; }
  .controls input[type="search"] { flex: 1 1 100%; font-size: 16px; }
  .controls select { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 10px; }

  .cat-list, .area-list, .t-body { max-width: 100%; }
  details.title-row > summary { grid-template-columns: auto 1fr; gap: 6px 12px; padding: 11px 4px 11px 0; }
  details.title-row > summary .t-right { grid-column: 2; }
  details.title-row > summary:hover,
  details.title-row[open] > summary { padding-left: 0; }
  .t-title { font-size: 16px; }
  .t-head { gap: 8px 10px; }
  .t-right { justify-content: flex-start; text-align: left; gap: 10px; }
  .t-meta { gap: 10px 18px; }

  .rule-grid { grid-template-columns: 1fr; gap: 14px; }
  .area-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .area-right { text-align: left; }
  .area-right .files { display: inline; margin-right: 10px; }
}
@media (max-width: 440px) {
  .controls select { flex: 1 1 100%; }
}

/* ---- Homebrew/unlicensed count on console rows ---- */
.hbct { color: var(--dim); font-size: 11px; letter-spacing: 0.5px; }

/* ---- Mobile drawer (per MOBILE-DRAWER-MENU-GUIDE) ---- */
.nav-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  padding: 14px 20px 26px; max-height: 100vh; max-height: 100dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%); pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-drawer.open { transform: translateY(0); pointer-events: auto; }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.nav-drawer-brand { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 3px; color: var(--black); }
.nav-drawer-brand .sep { color: var(--faint); font-weight: 300; }
.nav-drawer-close {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 22px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nav-drawer-close:hover { border-color: var(--dim); color: var(--black); }
.nav-drawer-links a {
  display: flex; align-items: center; min-height: 50px;
  padding: 12px 4px; font-size: 18px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--rule); text-decoration: none;
}
.nav-drawer-links a:active, .nav-drawer-links a:hover { color: var(--black); }
body.nav-open { overflow: hidden; }
@media (max-width: 900px) {
  .nav-drawer { display: block; }
  .nav-drawer-backdrop { display: block; }
}

/* ---- Matrix mode (Konami code easter egg) ---- */
[data-theme="matrix"] {
  --bg: #000000; --bg-alt: #0a0a0a; --black: #00ff41; --text: #00ff41;
  --dim: #00aa33; --faint: #006622; --rule: #006622;
}
[data-theme="matrix"] body { background: #000; color: #00ff41; }
[data-theme="matrix"] * { font-family: 'Courier New', monospace !important; text-shadow: 0 0 4px rgba(0,255,65,0.55); }
[data-theme="matrix"] img, [data-theme="matrix"] canvas { text-shadow: none; }
[data-theme="matrix"] img { filter: hue-rotate(110deg) saturate(2.5) brightness(0.65) contrast(1.4); }
[data-theme="matrix"] nav.site-nav { background: rgba(0,0,0,0.95); border-bottom: 1px solid #006622; }
[data-theme="matrix"] .hero-logo { filter: invert(1) sepia(1) saturate(5) hue-rotate(70deg) brightness(0.9); }

/* ---- Per-console page ---- */
.con-back {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--rule); border-radius: 20px; padding: 5px 14px;
  text-decoration: none; margin-bottom: 28px;
}
.con-back:hover { color: var(--black); border-color: var(--dim); }
.con-head { display: flex; gap: 48px; align-items: flex-start; }
.con-head-text { flex: 1 1 auto; min-width: 0; }
.con-head h1 { margin-bottom: 12px; }
.con-meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 8px;
}
.con-stats { font-family: var(--mono); font-size: 13px; letter-spacing: 0.5px; color: var(--text); margin-bottom: 18px; }
.con-desc { font-size: 16px; font-weight: 300; color: var(--dim); line-height: 1.7; max-width: 560px; }
.con-photo { flex: 0 0 320px; max-width: 320px; margin: 6px 0 0; }
.con-photo img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-alt); padding: 14px;
}
.con-photo figcaption {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
  color: var(--faint); margin-top: 8px; text-transform: uppercase;
}
@media (max-width: 900px) {
  .con-head { flex-direction: column; gap: 24px; }
  .con-photo { flex: none; max-width: 280px; }
}

/* console rows are real links (new-tab friendly); display:contents keeps the
   row's flex layout exactly as before */
.console-row .row-link { display: contents; color: inherit; text-decoration: none; }

/* ---- Box art in the expanded row ---- */
.t-boxfig { margin: 0 0 16px; }
.t-box {
  display: block; max-height: 180px; max-width: 160px; width: auto; height: auto;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-alt); padding: 6px; cursor: zoom-in;
}
@media (min-width: 761px) {
  .t-body { display: flex; gap: 24px; align-items: flex-start; }
  .t-boxfig { flex: 0 0 auto; margin: 0; }
  .t-meta { flex: 1 1 auto; }
}

/* ---- Box art lightbox ---- */
.gv-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.gv-lightbox img {
  max-width: 88vw; max-height: 86vh; width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  image-rendering: auto; background: #111; padding: 10px;
}
.gv-lb-close {
  position: absolute; top: 18px; right: 22px;
  width: 46px; height: 46px; font-size: 26px; line-height: 1;
  background: none; color: #fff; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px; cursor: pointer;
}

/* ---- Stats page: retro-palette charts ---- */
.sk-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); margin: -6px 0 20px;
}
.skyline {
  display: flex; align-items: flex-end; gap: 2px;
  height: 220px; max-width: 1100px; margin-bottom: 30px; padding-bottom: 22px;
}
.sk-col {
  flex: 1 1 0; min-width: 0; height: 100%; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sk-col i { display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; opacity: 0.92; }
.sk-col:hover i { opacity: 1; box-shadow: 0 0 0 1px var(--bg), 0 0 8px rgba(0,0,0,0.25); }
.sk-col span {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--faint);
}
.stats-charts { margin-top: 50px; }
.bar-track i { transition: width 0.5s ease; }
@media (max-width: 760px) {
  .skyline { height: 150px; gap: 1px; }
  #stats-page .charts { gap: 34px; }
}

/* ---- Owned chip + permalink + random button ---- */
.t-flag.f-owned { color: #0084a8; border-color: #0084a855; font-weight: 500; }
[data-theme="dark"] .t-flag.f-owned { color: #4cc9f0; }
.t-perma {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  color: var(--dim); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 20px; padding: 4px 12px;
}
.t-perma:hover { color: var(--black); border-color: var(--dim); }
.controls button.mono-link {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 11px 14px; background: var(--bg-alt); cursor: pointer;
}
.controls button.mono-link:hover { color: var(--black); border-color: var(--dim); }