/*
  =========================================================
  CSS REPAIR NOTE
  =========================================================
  This version removes the CSS editor trouble spots:
  - older glow-size helper syntax
  - old glow variable references
  - newer color helper values
  - single-card line-clamp reset that some editors flag
  - remaining webkit line-clamp rules that VS Code can flag

  The visual style is kept, but the syntax is more compatibility-safe.
  =========================================================
*/

/*
  =========================================================
  JayG Retro Vault 42
  styles.css

  Current features:
  - Retro dark green / gold style
  - Filter buttons
  - Vault item count
  - Card image placeholders
  - Detail popup
  - JayG Memory box
  - Local database controls
  - Favorite and owned badges
  - Better detail image scaling
  - Detail popup internal scrollbar removed
  - Phase 1.8.2 theme dimmer slider

  Rack 42 status:
  Detail panel scrollbar removed.
  Outer overlay handles tall cards now.
  Booby Trap remains contained.
  Big JS Cadillac is still shiny.
  localStorage shelf added.
  =========================================================
*/

* {
  box-sizing: border-box;
}

body {
  --rv-dimmer-opacity: 0;
  --rv-glow-multiplier: 1;

  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at top, rgba(0, 255, 140, 0.20), transparent 35%),
    linear-gradient(135deg, #050706, #101512 45%, #020403);
  color: #f4f4f4;
}
/*
  When a detail card is open, lock the main page scroll.
  This removes the browser/page scrollbar behind the popup.
*/ 

body.detailOpen {
  overflow: hidden;
}

/*
  =========================================================
  STATIC SITE NAVBAR
  =========================================================

  The navbar stays at the top of the page and gives visitors
  a quick Suggestions button without making them hunt for it.
*/
.siteNav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 48%),
    rgba(2, 8, 5, 0.92);
  border-bottom: 1px solid rgba(247, 211, 107, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.siteNavInner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.siteNavBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f7d36b;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px rgba(247, 211, 107, 0.22);
}

.siteNavMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border: 1px solid rgba(247, 211, 107, 0.42);
  box-shadow: 0 0 18px rgba(125, 255, 189, 0.16);
  font-size: 13px;
}

.siteNavSuggestBtn {
  padding: 10px 15px;
  font-size: 13px;
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border: 1px solid rgba(125, 255, 189, 0.45);
}

.siteNavSuggestBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.suggestionCallout {
  margin-top: 18px;
  padding: 15px 16px;
  border-radius: 16px;
  color: #d8dfda;
  line-height: 1.55;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.14), transparent 56%),
    rgba(0, 255, 140, 0.075);
  border: 1px solid rgba(125, 255, 189, 0.22);
}

.suggestionCallout strong {
  color: #f7d36b;
}


/*
  =========================================================
  SUGGESTION PRIVACY POPUP
  =========================================================
*/
body.suggestionModalOpen {
  overflow: hidden;
}

.suggestionModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.suggestionModalOverlay.show {
  display: flex;
}

.suggestionModal {
  position: relative;
  width: min(520px, 100%);
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.16), transparent 54%),
    linear-gradient(135deg, rgba(9, 18, 13, 0.98), rgba(5, 8, 6, 0.98));
  border: 1px solid rgba(247, 211, 107, 0.34);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68);
}

.suggestionModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  color: #f7d36b;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(247, 211, 107, 0.30);
  font-size: 26px;
  line-height: 1;
}

.suggestionModalBadge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.11);
  border: 1px solid rgba(0, 255, 140, 0.28);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.4px;
}

.suggestionModal h2 {
  margin: 0 42px 12px 0;
  color: #f7d36b;
  font-size: 28px;
  line-height: 1.1;
}

.suggestionModal p {
  margin: 0 0 13px;
  color: #d8dfda;
  line-height: 1.55;
}

.suggestionPrivacyNote {
  padding: 13px 14px;
  border-radius: 16px;
  color: #f4f4f4;
  background: rgba(247, 211, 107, 0.09);
  border: 1px solid rgba(247, 211, 107, 0.25);
}

.suggestionModalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.suggestionModalPrimary,
.suggestionModalSecondary {
  padding: 12px 15px;
  font-size: 13px;
}

.suggestionModalSecondary {
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.12);
  border: 1px solid rgba(0, 255, 140, 0.30);
}


/*
  =========================================================
  SUGGESTION DATABASE FORM FIELDS
  =========================================================
*/
.suggestionFormModal {
  width: min(660px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
}

.suggestionForm {
  margin-top: 16px;
}

.suggestionHoneyPot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.suggestionField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
  color: #f7d36b;
  font-size: 13px;
  font-weight: bold;
}

.requiredMark {
  color: #ffb6b6;
}

.suggestionField input,
.suggestionField select,
.suggestionField textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0, 255, 140, 0.30);
  background: rgba(0, 0, 0, 0.28);
  color: #f4f4f4;
  padding: 11px 12px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  outline: none;
}

.suggestionField textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.45;
}

.suggestionField input:focus,
.suggestionField select:focus,
.suggestionField textarea:focus {
  border-color: rgba(125, 255, 189, 0.62);
  box-shadow: 0 0 0 3px rgba(125, 255, 189, 0.10);
}

.suggestionField input::placeholder,
.suggestionField textarea::placeholder {
  color: rgba(199, 210, 201, 0.58);
}

.suggestionTwoColumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.suggestionCheckbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0;
  color: #d8dfda;
  font-size: 13px;
  line-height: 1.35;
}

.suggestionCheckbox input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #7dffbd;
}

.suggestionStatus {
  min-height: 20px;
  margin-top: 12px;
  color: #c7d2c9;
  font-size: 13px;
  font-weight: bold;
}

.suggestionStatus.success {
  color: #7dffbd;
}

.suggestionStatus.error {
  color: #ffb6b6;
}

.suggestionStatus.working {
  color: #f7d36b;
}

.suggestionModalPrimary:disabled {
  opacity: 0.62;
  cursor: wait;
}

@media (max-width: 620px) {
  .suggestionTwoColumn {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .suggestionFormModal {
    padding: 22px;
  }
}
.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
}

header {
  text-align: center;
  margin-bottom: 34px;
}

.badge {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(0, 255, 140, 0.45);
  border-radius: 999px;
  color: #7dffbd;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

h1 {
  margin: 0;
  font-size: 46px;
  color: #f7d36b;
  text-shadow: 0 0 18px rgba(247, 211, 107, 0.25);
}

.subtitle {
  max-width: 760px;
  margin: 14px auto 0;
  color: #c7d2c9;
  font-size: 18px;
  line-height: 1.5;
}

.hero {
  background: rgba(8, 15, 11, 0.86);
  border: 1px solid rgba(247, 211, 107, 0.28);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  margin-bottom: 24px;
}

.hero h2 {
  margin-top: 0;
  color: #7dffbd;
  font-size: 30px;
}

.hero p {
  color: #d8dfda;
  line-height: 1.6;
  font-size: 16px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  align-items: center;
}

.search {
  flex: 1;
  min-width: 230px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 140, 0.35);
  background: rgba(0, 0, 0, 0.28);
  color: #f4f4f4;
  padding: 13px 16px;
  font-size: 15px;
  outline: none;
}

.search::placeholder {
  color: rgba(199, 210, 201, 0.65);
}

button {
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  background: linear-gradient(135deg, #f7d36b, #b8862b);
  color: #111;
  font-weight: bold;
  cursor: pointer;
}

button.secondary {
  background: rgba(0, 255, 140, 0.14);
  color: #7dffbd;
  border: 1px solid rgba(0, 255, 140, 0.35);
}

.section-title {
  margin: 28px 0 16px;
  color: #f7d36b;
  font-size: 24px;
}

/*
  =========================================================
  FILTER BAR
  =========================================================
*/

.filterSection {
  margin-bottom: 12px;
}

.filterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(8, 15, 11, 0.62);
  border: 1px solid rgba(0, 255, 140, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.filterBtn {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #c7d2c9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: bold;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.filterBtn:hover {
  transform: translateY(-2px);
  color: #7dffbd;
  border-color: rgba(0, 255, 140, 0.36);
  background: rgba(0, 255, 140, 0.12);
}

.filterBtn.active {
  color: #111;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border-color: rgba(247, 211, 107, 0.55);
}

.filterBtn.mysteryFilter {
  border-color: rgba(255, 80, 80, 0.32);
  color: #ffb6b6;
}

.filterBtn.mysteryFilter.active {
  color: #1a0808;
  background: linear-gradient(135deg, #ffb6b6, #f7d36b);
}

.filterBtn.databaseFilter {
  border-color: rgba(247, 211, 107, 0.30);
  color: #ffeaa0;
  background: rgba(247, 211, 107, 0.08);
}

.filterBtn.databaseFilter:hover {
  color: #111;
  border-color: rgba(247, 211, 107, 0.62);
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
}

.filterBtn.databaseFilter.active {
  color: #111;
  border-color: rgba(247, 211, 107, 0.72);
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
}

/*
  =========================================================
  LOCAL DATABASE SUMMARY
  =========================================================
*/

.databaseSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(247, 211, 107, 0.13), transparent 50%),
    rgba(8, 15, 11, 0.72);
  border: 1px solid rgba(247, 211, 107, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.databaseSummaryTitle {
  color: #f7d36b;
  font-size: 15px;
  font-weight: bold;
}

.databaseSummaryRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.databaseSummaryStats {
  color: #7dffbd;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0, 255, 140, 0.10);
  border: 1px solid rgba(0, 255, 140, 0.22);
}

.databaseBackupActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.databaseBackupBtn {
  padding: 8px 11px;
  font-size: 12px;
  border-radius: 999px;
}

.exportDatabaseBtn {
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border: 1px solid rgba(125, 255, 189, 0.48);
}

.importDatabaseBtn {
  color: #f7d36b;
  background: rgba(247, 211, 107, 0.08);
  border: 1px solid rgba(247, 211, 107, 0.28);
}

.importDatabaseBtn:hover {
  color: #111;
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
}

.databaseImportInput {
  display: none;
}

.databaseBackupStatus {
  color: #aebbb2;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/*
  =========================================================
  COLLECTION HEADER / ITEM COUNT
  =========================================================
*/

.collectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  margin-bottom: 16px;
}

.collectionHeader .section-title {
  margin: 0;
}

.vaultCount {
  padding: 8px 12px;
  border-radius: 999px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.10);
  border: 1px solid rgba(0, 255, 140, 0.24);
  font-size: 13px;
  font-weight: bold;
}

/*
  =========================================================
  RECENTLY ADDED
  =========================================================

  This is intentionally separate from #vaultGrid so the five new
  memories stay compact and do not alter the main collection layout.
*/
.recentlyAdded {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--rv-border, rgba(247, 211, 107, 0.28));
  border-radius: 20px;
  background: var(--rv-panel-soft, rgba(8, 15, 11, 0.72));
}

.recentlyAddedHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.recentlyAddedEyebrow {
  margin: 0 0 4px;
  color: var(--rv-accent, #7dffbd);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.4px;
}

.recentlyAdded h2 {
  margin: 0;
  color: var(--rv-title, #f7d36b);
  font-size: 25px;
}

.recentlyAddedNote {
  margin: 0;
  color: var(--rv-soft, #aebbb2);
  font-size: 13px;
}

.recentlyAddedGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.recentlyAddedCard {
  position: relative;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  color: var(--rv-text, #f4f4f4);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--rv-accent-border, rgba(0, 255, 140, 0.35));
  border-radius: 15px;
  background: var(--rv-card, rgba(12, 20, 15, 0.92));
}

.recentlyAddedCard:hover {
  border-color: var(--rv-accent, #7dffbd);
}

.recentlyAddedCard:focus-visible {
  outline: 3px solid var(--rv-accent, #7dffbd);
  outline-offset: 3px;
}

.recentlyAddedCard img,
.recentlyAddedCard .cardImagePlaceholder {
  width: 100% !important;
  height: 92px !important;
  margin: 0 0 9px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.recentlyAddedBadge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 4px 7px;
  color: var(--rv-button-text, #111);
  background: var(--rv-accent, #7dffbd);
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.8px;
}

.recentlyAddedName,
.recentlyAddedMeta {
  display: block;
}

.recentlyAddedName {
  overflow: hidden;
  color: var(--rv-accent, #7dffbd);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recentlyAddedMeta {
  margin-top: 5px;
  overflow: hidden;
  color: var(--rv-soft, #aebbb2);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recentlyAddedEmpty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--rv-soft, #aebbb2);
}

@media (max-width: 920px) {
  .recentlyAddedGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .recentlyAddedHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .recentlyAddedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .recentlyAddedGrid {
    grid-template-columns: 1fr;
  }
}

/*
  =========================================================
  VAULT GRID AND CARDS
  =========================================================
*/

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.card {
  background: rgba(12, 20, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 18px;
  min-height: 160px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 255, 189, 0.48);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.card:focus {
  outline: 2px solid rgba(125, 255, 189, 0.65);
  outline-offset: 4px;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/*
  Small card placeholder.

  This shows on cards that do not have an image yet.
  Now placeholder cards look intentional instead of empty.
*/
.cardImagePlaceholder {
  width: 100%;
  height: 150px;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px dashed rgba(247, 211, 107, 0.26);
  background:
    radial-gradient(circle at top, rgba(0, 255, 140, 0.13), transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.16));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f7d36b;
}

.cardPlaceholderTitle {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.cardPlaceholderText {
  color: #7dffbd;
  font-size: 12px;
  opacity: 0.85;
}

.card h3 {
  margin: 0 0 8px;
  color: #7dffbd;
  font-size: 21px;
}

.year {
  color: #f7d36b;
  font-weight: bold;
  margin-bottom: 8px;
}

.maker {
  color: #cfd8d1;
  font-size: 14px;
  margin-bottom: 12px;
}

.desc {
  color: #aebbb2;
  font-size: 14px;
  line-height: 1.5;
}

.note {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #c7d2c9;
  line-height: 1.5;
  font-size: 14px;
}

.mystery {
  border-color: rgba(255, 80, 80, 0.35);
  background: rgba(35, 13, 13, 0.70);
}

.mystery h3 {
  color: #ff9f9f;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #89958d;
  font-size: 13px;
}

/*
  =========================================================
  ITEM DETAIL VIEW
  =========================================================
*/

.detailOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;

  /*
    Top-align the popup so the detail panel itself does not need
    an internal scrollbar. If a card is tall, the overlay can scroll.
  */
  align-items: flex-start;

  justify-content: center;
  padding: 22px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.detailPanel {
  position: relative;
  width: min(940px, 100%);

  /*
    Removed the internal popup scrollbar.
    The detail window can grow naturally.
    The outer .detailOverlay handles scrolling only if needed.
  */
  max-height: none;
  overflow: visible;

  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(0, 255, 140, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(9, 18, 13, 0.98), rgba(5, 8, 6, 0.98));
  border: 1px solid rgba(247, 211, 107, 0.34);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68);
}

.detailCloseBtn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f7d36b;
  border: 1px solid rgba(247, 211, 107, 0.30);
  font-size: 28px;
  line-height: 1;
  z-index: 2;
}

.detailCloseBtn:hover {
  background: rgba(247, 211, 107, 0.16);
}

/*
  Detail layout fix:

  The left image column is now capped at 420px.
  This keeps tall box-art images like Booby Trap from taking over
  the whole popup while still showing the full image.
*/
.detailLayout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 30px;
}

.detailMedia {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/*
  Detail image fix:

  object-fit: contain shows the whole image.
  max-width keeps the image column controlled.
  max-height keeps tall images from getting too huge.
*/
.detailImage {
  width: 100%;
  max-width: 420px;
  max-height: 520px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.detailImagePlaceholder {
  width: 100%;
  max-width: 420px;
  min-height: 320px;
  max-height: 520px;
  border-radius: 20px;
  border: 1px dashed rgba(255, 215, 100, 0.30);
  background:
    radial-gradient(circle at center, rgba(255, 80, 80, 0.16), transparent 56%),
    rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffb6b6;
  padding: 24px;
}

.placeholderTitle {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.placeholderText {
  color: #c7d2c9;
  font-size: 14px;
}

.detailContent {
  padding-right: 24px;
}

.detailBadge {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.12);
  border: 1px solid rgba(0, 255, 140, 0.30);
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 14px;
}

.detailContent h2 {
  margin: 0 0 18px;
  color: #f7d36b;
  font-size: 38px;
  line-height: 1.05;
}

.detailMeta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.detailMeta div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.detailMeta span {
  display: block;
  color: #89958d;
  font-size: 12px;
  margin-bottom: 5px;
}

.detailMeta strong {
  display: block;
  color: #f4f4f4;
  font-size: 14px;
  line-height: 1.25;
}

.detailDescription {
  color: #d8dfda;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
}

/*
  =========================================================
  JAYG MEMORY BOX
  =========================================================
*/

.jaygMemoryBox {
  padding: 18px;
  border-radius: 18px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at top left, rgba(247, 211, 107, 0.18), transparent 55%),
    rgba(247, 211, 107, 0.08);
  border: 1px solid rgba(247, 211, 107, 0.28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.jaygMemoryBox h4 {
  margin: 0 0 10px;
  color: #f7d36b;
  font-size: 18px;
}

.jaygMemoryBox p {
  margin: 0 0 10px;
  color: #f4f4f4;
  line-height: 1.6;
  font-size: 15px;
}

.jaygMemoryBox p:last-child {
  margin-bottom: 0;
}

/*
  =========================================================
  FUN FACTS BOX
  =========================================================
*/

.detailFacts {
  padding: 18px;
  border-radius: 18px;
  background: rgba(0, 255, 140, 0.07);
  border: 1px solid rgba(0, 255, 140, 0.18);
}

.detailFacts h4 {
  margin: 0 0 10px;
  color: #7dffbd;
  font-size: 18px;
}

.detailFacts ul {
  margin: 0;
  padding-left: 20px;
}

.detailFacts li {
  color: #c7d2c9;
  line-height: 1.55;
  margin-bottom: 8px;
}

/*
  =========================================================
  SMALL SCREEN SUPPORT
  =========================================================
*/

@media (max-width: 900px) {
  .detailLayout {
    grid-template-columns: 1fr;
  }

  .detailMedia {
    justify-content: center;
  }

  .detailImage,
  .detailImagePlaceholder {
    max-width: 100%;
  }

  .detailContent {
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  h1 {
    font-size: 36px;
  }

  .hero {
    padding: 22px;
  }

  .filterBar {
    padding: 12px;
    gap: 8px;
  }

  .filterBtn {
    padding: 9px 12px;
    font-size: 12px;
  }

  .detailOverlay {
    padding: 14px;
  }

  .detailLayout {
    padding: 24px;
  }

  .detailMeta {
    grid-template-columns: 1fr;
  }

  .detailContent h2 {
    font-size: 32px;
  }

  .databaseSummaryRight {
    justify-content: flex-start;
    width: 100%;
  }
}

/*
  =========================================================
  LOCAL DATABASE BADGES ON CARDS
  =========================================================
*/
.cardLocalBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 10px;
}

.localBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.2px;
}

.favoriteBadge {
  color: #1a1200;
  background: linear-gradient(135deg, #fff1a8, #f7d36b);
  border: 1px solid rgba(247, 211, 107, 0.55);
}

.ownedBadge {
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #39d98a);
  border: 1px solid rgba(125, 255, 189, 0.55);
}

.noteBadge {
  color: #120818;
  background: linear-gradient(135deg, #ffcfef, #c59cff);
  border: 1px solid rgba(197, 156, 255, 0.55);
}

/*
  =========================================================
  LOCAL DATABASE DETAIL BOX
  =========================================================
*/
.localDatabaseBox {
  padding: 18px;
  border-radius: 18px;
  margin: 0 0 18px;
  background:
    radial-gradient(circle at top right, rgba(125, 255, 189, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(125, 255, 189, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.localDatabaseHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.localDatabaseHeader h4 {
  margin: 0 0 5px;
  color: #7dffbd;
  font-size: 18px;
}

.localDatabaseHeader p {
  margin: 0;
  color: #aebbb2;
  font-size: 13px;
  line-height: 1.4;
}

.localDatabaseStatus {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #f7d36b;
  background: rgba(247, 211, 107, 0.09);
  border: 1px solid rgba(247, 211, 107, 0.22);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.localToggleRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.localToggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 999px;
  color: #d8dfda;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: bold;
}

.localToggle:hover {
  border-color: rgba(125, 255, 189, 0.34);
  background: rgba(0, 255, 140, 0.09);
}

.localToggle input {
  width: 17px;
  height: 17px;
  accent-color: #7dffbd;
}

.memoryNoteLabel {
  display: block;
  color: #f7d36b;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.memoryNoteInput {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border-radius: 14px;
  padding: 12px 13px;
  color: #f4f4f4;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.13);
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.memoryNoteInput:focus {
  border-color: rgba(125, 255, 189, 0.55);
  box-shadow: 0 0 0 3px rgba(125, 255, 189, 0.10);
}

.memoryNoteInput::placeholder {
  color: rgba(199, 210, 201, 0.52);
}

.localDatabaseActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.saveMemoryBtn,
.clearMemoryBtn {
  padding: 11px 14px;
  font-size: 13px;
}

.clearMemoryBtn {
  color: #ffb6b6;
  background: rgba(255, 80, 80, 0.10);
  border: 1px solid rgba(255, 80, 80, 0.28);
}

.clearMemoryBtn:hover {
  background: rgba(255, 80, 80, 0.16);
}


/*
  =========================================================
  PHASE 1.8 — COLOR FUTURE THEME SYSTEM
  =========================================================

  This section is the new paint booth for the Johnny Cash
  Cadillac build.

  index.html adds:
  - themeSelect dropdown
  - dropdown menu color matching selected theme

  app.js will add one of these classes to <body>:
  - theme-retro-green
  - theme-neon-arcade
  - theme-electric-candy
  - theme-saturday-morning
  - theme-80s-mall
  - theme-haunted-vhs

  These overrides are intentionally placed at the bottom of
  the file so they can repaint the existing app without
  breaking the working vault layout.
*/

.themePanel {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(250px, 1fr);
  gap: 14px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 52%),
    rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.themeField {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.themePanel label {
  color: var(--rv-title, #f7d36b);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.4px;
}

.themeSelect {
  width: 100%;
  min-width: 230px;
  border-radius: 999px;
  padding: 11px 14px;
  color: var(--rv-text, #f4f4f4);
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 58%),
    linear-gradient(135deg, var(--rv-bg-start, #050706), var(--rv-bg-mid, #101512));
  border: 1px solid var(--rv-accent-border, rgba(125, 255, 189, 0.34));
  outline: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.themeDimmerField {
  justify-content: center;
}

.themeDimmerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.themeDimmerValue {
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--rv-accent, #7dffbd);
  background: rgba(125, 255, 189, 0.12);
  border: 1px solid rgba(125, 255, 189, 0.28);
  font-size: 12px;
  font-weight: bold;
}

.themeDimmerInput {
  width: 100%;
  accent-color: var(--rv-accent, #7dffbd);
  cursor: pointer;
}

.themeSelect:focus {
  border-color: var(--rv-border, rgba(247, 211, 107, 0.70));
  box-shadow: 0 0 0 3px rgba(247, 211, 107, 0.18);
}

/*
  Native browser dropdown menus are partly controlled by Windows/Chrome.
  These option rules make the opened menu match the selected theme as much
  as the browser allows, instead of falling back to a plain white menu.
*/
.themeSelect option {
  color: var(--rv-text, #f4f4f4);
  background-color: var(--rv-bg-start, #050706);
  font-weight: bold;
}

.themeSelect option:checked {
  color: var(--rv-button-text, #111);
  background-color: var(--rv-accent, #7dffbd);
}

/*
  =========================================================
  THEME VARIABLES
  =========================================================
*/

body.theme-retro-green {
  --rv-bg-radial: rgba(0, 255, 140, 0.20);
  --rv-bg-start: #050706;
  --rv-bg-mid: #101512;
  --rv-bg-end: #020403;
  --rv-panel: rgba(8, 15, 11, 0.86);
  --rv-panel-soft: rgba(8, 15, 11, 0.62);
  --rv-card: rgba(12, 20, 15, 0.88);
  --rv-card-mystery: rgba(35, 13, 13, 0.70);
  --rv-title: #f7d36b;
  --rv-accent: #7dffbd;
  --rv-accent-2: #f7d36b;
  --rv-text: #f4f4f4;
  --rv-muted: #c7d2c9;
  --rv-soft: #aebbb2;
  --rv-danger: #ff9f9f;
  --rv-border: rgba(247, 211, 107, 0.28);
  --rv-accent-border: rgba(0, 255, 140, 0.35);
  --rv-button-text: #111;
}

/*
  =========================================================
  THEME: SOFT NEON ARCADE
  Colors: Dim green + calm cyan + soft violet
  Purpose: Neon flavor without the anxiety dashboard goblin.
  =========================================================
*/
body.theme-soft-neon-arcade {
  --rv-bg-radial: rgba(80, 220, 170, 0.14);
  --rv-bg-start: #050914;
  --rv-bg-mid: #0b1630;
  --rv-bg-end: #030409;
  --rv-panel: rgba(8, 15, 30, 0.91);
  --rv-panel-soft: rgba(8, 15, 30, 0.72);
  --rv-card: rgba(12, 20, 38, 0.92);
  --rv-card-mystery: rgba(32, 12, 38, 0.78);
  --rv-title: #aeefff;
  --rv-accent: #8affc6;
  --rv-accent-2: #b9a7ff;
  --rv-text: #f4fbff;
  --rv-muted: #c8d8e8;
  --rv-soft: #9fb2c5;
  --rv-danger: #ff9bc8;
  --rv-border: rgba(174, 239, 255, 0.24);
  --rv-accent-border: rgba(138, 255, 198, 0.28);
  --rv-button-text: #061015;
}

body.theme-neon-arcade {
  --rv-bg-radial: rgba(57, 255, 20, 0.26);
  --rv-bg-start: #030014;
  --rv-bg-mid: #07112b;
  --rv-bg-end: #000000;
  --rv-panel: rgba(5, 8, 28, 0.90);
  --rv-panel-soft: rgba(5, 8, 28, 0.70);
  --rv-card: rgba(8, 13, 38, 0.92);
  --rv-card-mystery: rgba(43, 8, 38, 0.78);
  --rv-title: #00f5ff;
  --rv-accent: #39ff14;
  --rv-accent-2: #ff2bd6;
  --rv-text: #f7fbff;
  --rv-muted: #c8d7ff;
  --rv-soft: #9fb0d8;
  --rv-danger: #ff6bd6;
  --rv-border: rgba(0, 245, 255, 0.36);
  --rv-accent-border: rgba(57, 255, 20, 0.42);
  --rv-button-text: #05020d;
}

body.theme-electric-candy {
  --rv-bg-radial: rgba(255, 56, 214, 0.25);
  --rv-bg-start: #16001f;
  --rv-bg-mid: #28135f;
  --rv-bg-end: #050014;
  --rv-panel: rgba(31, 8, 62, 0.90);
  --rv-panel-soft: rgba(31, 8, 62, 0.70);
  --rv-card: rgba(38, 12, 75, 0.92);
  --rv-card-mystery: rgba(62, 10, 48, 0.82);
  --rv-title: #ffe66d;
  --rv-accent: #ff5ee7;
  --rv-accent-2: #49d9ff;
  --rv-text: #fff8ff;
  --rv-muted: #ead9ff;
  --rv-soft: #ccb9e8;
  --rv-danger: #ff8fb7;
  --rv-border: rgba(255, 230, 109, 0.34);
  --rv-accent-border: rgba(255, 94, 231, 0.42);
  --rv-button-text: #1b0620;
}

body.theme-saturday-morning {
  --rv-bg-radial: rgba(255, 209, 64, 0.30);
  --rv-bg-start: #083f8f;
  --rv-bg-mid: #0aa4d8;
  --rv-bg-end: #ff6a00;
  --rv-panel: rgba(0, 62, 120, 0.88);
  --rv-panel-soft: rgba(0, 62, 120, 0.68);
  --rv-card: rgba(255, 255, 255, 0.14);
  --rv-card-mystery: rgba(120, 32, 65, 0.72);
  --rv-title: #fff05a;
  --rv-accent: #ffffff;
  --rv-accent-2: #ff8a00;
  --rv-text: #ffffff;
  --rv-muted: #e9fbff;
  --rv-soft: #d4eff8;
  --rv-danger: #ffd1e8;
  --rv-border: rgba(255, 240, 90, 0.42);
  --rv-accent-border: rgba(255, 255, 255, 0.44);
  --rv-button-text: #092a54;
}

body.theme-80s-mall {
  --rv-bg-radial: rgba(255, 82, 179, 0.23);
  --rv-bg-start: #1d1238;
  --rv-bg-mid: #174f67;
  --rv-bg-end: #2a1438;
  --rv-panel: rgba(31, 25, 62, 0.90);
  --rv-panel-soft: rgba(31, 25, 62, 0.70);
  --rv-card: rgba(29, 42, 78, 0.90);
  --rv-card-mystery: rgba(72, 22, 62, 0.80);
  --rv-title: #ffd1a8;
  --rv-accent: #54ffe0;
  --rv-accent-2: #ff5db8;
  --rv-text: #fff6f0;
  --rv-muted: #f1d9ff;
  --rv-soft: #cdbbd7;
  --rv-danger: #ff98c9;
  --rv-border: rgba(255, 209, 168, 0.34);
  --rv-accent-border: rgba(84, 255, 224, 0.42);
  --rv-button-text: #171025;
}

body.theme-haunted-vhs {
  --rv-bg-radial: rgba(168, 64, 255, 0.22);
  --rv-bg-start: #09020f;
  --rv-bg-mid: #1d1026;
  --rv-bg-end: #050206;
  --rv-panel: rgba(19, 9, 27, 0.92);
  --rv-panel-soft: rgba(19, 9, 27, 0.74);
  --rv-card: rgba(24, 15, 32, 0.92);
  --rv-card-mystery: rgba(45, 8, 18, 0.85);
  --rv-title: #ff4d6d;
  --rv-accent: #b967ff;
  --rv-accent-2: #d8d8d8;
  --rv-text: #f4edf8;
  --rv-muted: #c9bacf;
  --rv-soft: #a89aac;
  --rv-danger: #ff4d6d;
  --rv-border: rgba(255, 77, 109, 0.34);
  --rv-accent-border: rgba(185, 103, 255, 0.42);
  --rv-button-text: #16060d;
}

/*
  =========================================================
  THEME: ROYAL PURPLE
  Colors: Purple + gold + deep midnight
  =========================================================
*/
body.theme-royal-purple {
  --rv-bg-radial: rgba(168, 92, 255, 0.24);
  --rv-bg-start: #090017;
  --rv-bg-mid: #24104e;
  --rv-bg-end: #040008;
  --rv-panel: rgba(24, 10, 48, 0.91);
  --rv-panel-soft: rgba(24, 10, 48, 0.72);
  --rv-card: rgba(32, 15, 60, 0.92);
  --rv-card-mystery: rgba(55, 12, 47, 0.82);
  --rv-title: #ffd66d;
  --rv-accent: #c084ff;
  --rv-accent-2: #fff0a8;
  --rv-text: #fff8ff;
  --rv-muted: #ded0f0;
  --rv-soft: #bba8d3;
  --rv-danger: #ff8ac7;
  --rv-border: rgba(255, 214, 109, 0.32);
  --rv-accent-border: rgba(192, 132, 255, 0.44);
  --rv-button-text: #170625;
}

/*
  =========================================================
  THEME: AMERICAN FLAG
  Colors: Red + White + Blue
  =========================================================
*/
body.theme-american-flag {
  --rv-bg-radial: rgba(255, 255, 255, 0.18);
  --rv-bg-start: #071a3b;
  --rv-bg-mid: #0d3b78;
  --rv-bg-end: #30040a;
  --rv-panel: rgba(7, 24, 58, 0.91);
  --rv-panel-soft: rgba(7, 24, 58, 0.72);
  --rv-card: rgba(11, 30, 72, 0.92);
  --rv-card-mystery: rgba(72, 12, 20, 0.80);
  --rv-title: #ffffff;
  --rv-accent: #7db7ff;
  --rv-accent-2: #ff4d5e;
  --rv-text: #ffffff;
  --rv-muted: #dceaff;
  --rv-soft: #b5c7e8;
  --rv-danger: #ff7180;
  --rv-border: rgba(255, 255, 255, 0.30);
  --rv-accent-border: rgba(125, 183, 255, 0.44);
  --rv-button-text: #06152f;
}

/*
  =========================================================
  THEME: HALLOWEEN NIGHT
  Colors: Orange + Purple + Black
  =========================================================
*/
body.theme-halloween-night {
  --rv-bg-radial: rgba(255, 128, 32, 0.20);
  --rv-bg-start: #050308;
  --rv-bg-mid: #1d0b2c;
  --rv-bg-end: #000000;
  --rv-panel: rgba(18, 7, 26, 0.92);
  --rv-panel-soft: rgba(18, 7, 26, 0.74);
  --rv-card: rgba(26, 10, 36, 0.92);
  --rv-card-mystery: rgba(45, 12, 8, 0.84);
  --rv-title: #ffb15c;
  --rv-accent: #bb71ff;
  --rv-accent-2: #ff7a2f;
  --rv-text: #fff2e8;
  --rv-muted: #ffd9b8;
  --rv-soft: #cc914c;
  --rv-danger: #ff8b4d;
  --rv-border: rgba(255, 128, 32, 0.26);
  --rv-accent-border: rgba(187, 113, 255, 0.42);
  --rv-button-text: #220b04;
}


/*
  =========================================================
  THEME: MIDNIGHT VIOLET
  Colors: Midnight Purple + Violet
  Converted from JayG timer-style variables into Retro Vault variables.
  =========================================================
*/
body.theme-midnight-violet {
  --rv-bg-radial: rgba(133, 98, 212, 0.22);
  --rv-bg-start: #08060e;
  --rv-bg-mid: #181027;
  --rv-bg-end: #05040a;
  --rv-panel: rgba(15, 10, 24, 0.92);
  --rv-panel-soft: rgba(24, 15, 39, 0.72);
  --rv-card: rgba(26, 17, 44, 0.92);
  --rv-card-mystery: rgba(44, 18, 54, 0.82);
  --rv-title: #f0e8ff;
  --rv-accent: #ab8be8;
  --rv-accent-2: #ffffff;
  --rv-text: #efe8ff;
  --rv-muted: #d7ccec;
  --rv-soft: #a597c4;
  --rv-danger: #e8dcff;
  --rv-border: rgba(133, 98, 212, 0.30);
  --rv-accent-border: rgba(201, 178, 246, 0.48);
  --rv-button-text: #120a20;
}

/*
  =========================================================
  THEME: EMERALD NIGHT
  Colors: Emerald Green + Night Black
  Converted from JayG timer-style variables into Retro Vault variables.
  =========================================================
*/
body.theme-emerald-night {
  --rv-bg-radial: rgba(70, 221, 153, 0.20);
  --rv-bg-start: #040a08;
  --rv-bg-mid: #071812;
  --rv-bg-end: #020605;
  --rv-panel: rgba(7, 18, 14, 0.92);
  --rv-panel-soft: rgba(10, 29, 22, 0.72);
  --rv-card: rgba(11, 33, 25, 0.92);
  --rv-card-mystery: rgba(22, 35, 24, 0.82);
  --rv-title: #e7fff2;
  --rv-accent: #5ef0af;
  --rv-accent-2: #ffffff;
  --rv-text: #e4fff1;
  --rv-muted: #c9f2dd;
  --rv-soft: #8dc2a6;
  --rv-danger: #86ddb9;
  --rv-border: rgba(70, 221, 153, 0.30);
  --rv-accent-border: rgba(128, 245, 190, 0.48);
  --rv-button-text: #04140e;
}

/*
  =========================================================
  THEME: GOLD NOIR
  Colors: Gold + Noir Black
  Converted from JayG timer-style variables into Retro Vault variables.
  =========================================================
*/
body.theme-gold-noir {
  --rv-bg-radial: rgba(255, 201, 76, 0.20);
  --rv-bg-start: #070604;
  --rv-bg-mid: #141009;
  --rv-bg-end: #030302;
  --rv-panel: rgba(10, 9, 7, 0.92);
  --rv-panel-soft: rgba(20, 16, 9, 0.72);
  --rv-card: rgba(28, 21, 10, 0.92);
  --rv-card-mystery: rgba(38, 19, 12, 0.82);
  --rv-title: #ffe7a8;
  --rv-accent: #ffd86f;
  --rv-accent-2: #fff8dd;
  --rv-text: #fff0c2;
  --rv-muted: #e9d48e;
  --rv-soft: #d2b764;
  --rv-danger: #fff0be;
  --rv-border: rgba(255, 201, 76, 0.34);
  --rv-accent-border: rgba(255, 232, 163, 0.48);
  --rv-button-text: #171104;
}

/*
  =========================================================
  THEME: BLUE ICE
  Colors: Blue + Ice White
  Converted from JayG timer-style variables into Retro Vault variables.
  =========================================================
*/
body.theme-blue-ice {
  --rv-bg-radial: rgba(123, 190, 255, 0.20);
  --rv-bg-start: #040910;
  --rv-bg-mid: #0c1928;
  --rv-bg-end: #02060b;
  --rv-panel: rgba(7, 16, 28, 0.92);
  --rv-panel-soft: rgba(12, 25, 40, 0.72);
  --rv-card: rgba(14, 31, 49, 0.92);
  --rv-card-mystery: rgba(22, 36, 55, 0.82);
  --rv-title: #eef8ff;
  --rv-accent: #99d4ff;
  --rv-accent-2: #ffffff;
  --rv-text: #edf8ff;
  --rv-muted: #d2ebf4;
  --rv-soft: #9cbcd6;
  --rv-danger: #e6f4ff;
  --rv-border: rgba(123, 190, 255, 0.30);
  --rv-accent-border: rgba(186, 228, 255, 0.48);
  --rv-button-text: #07111c;
}

/*
  =========================================================
  THEME: PINK NOIR
  Colors: Pink + Black
  Converted from JayG timer-style variables into Retro Vault variables.
  =========================================================
*/
body.theme-pink-noir {
  --rv-bg-radial: rgba(255, 105, 180, 0.20);
  --rv-bg-start: #060306;
  --rv-bg-mid: #1c0a14;
  --rv-bg-end: #020102;
  --rv-panel: rgba(12, 6, 10, 0.92);
  --rv-panel-soft: rgba(28, 10, 20, 0.72);
  --rv-card: rgba(36, 12, 26, 0.92);
  --rv-card-mystery: rgba(52, 18, 36, 0.84);
  --rv-title: #ffd6e7;
  --rv-accent: #ff8cbe;
  --rv-accent-2: #fff4fa;
  --rv-text: #ffe0f0;
  --rv-muted: #f1c5d8;
  --rv-soft: #d889aa;
  --rv-danger: #ff8ab8;
  --rv-border: rgba(255, 105, 180, 0.34);
  --rv-accent-border: rgba(255, 176, 210, 0.52);
  --rv-button-text: #210711;
}

/*
  =========================================================
  UNIVERSAL THEME OVERRIDES
  =========================================================
*/

body.theme-retro-green,
body.theme-soft-neon-arcade,
body.theme-neon-arcade,
body.theme-electric-candy,
body.theme-saturday-morning,
body.theme-80s-mall,
body.theme-haunted-vhs,
body.theme-royal-purple,
body.theme-american-flag,
body.theme-halloween-night,
body.theme-midnight-violet,
body.theme-emerald-night,
body.theme-gold-noir,
body.theme-blue-ice,
body.theme-pink-noir {
  background:
    radial-gradient(circle at top, var(--rv-bg-radial), transparent 35%),
    linear-gradient(135deg, var(--rv-bg-start), var(--rv-bg-mid) 45%, var(--rv-bg-end));
  color: var(--rv-text);
}

body[class*="theme-"] .badge {
  color: var(--rv-accent);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] h1,
body[class*="theme-"] .section-title,
body[class*="theme-"] .databaseSummaryTitle,
body[class*="theme-"] .year,
body[class*="theme-"] .detailContent h2,
body[class*="theme-"] .jaygMemoryBox h4,
body[class*="theme-"] .memoryNoteLabel,
body[class*="theme-"] .themePanel label {
  color: var(--rv-title);
}

body[class*="theme-"] h1 {
  text-shadow: 0 0 22px rgba(247, 211, 107, 0.24);
}

body[class*="theme-"] .subtitle,
body[class*="theme-"] .hero p,
body[class*="theme-"] .desc,
body[class*="theme-"] .note,
body[class*="theme-"] .maker,
body[class*="theme-"] .detailDescription,
body[class*="theme-"] .detailFacts li,
body[class*="theme-"] .localDatabaseHeader p,
body[class*="theme-"] footer {
  color: var(--rv-muted);
}

body[class*="theme-"] .hero,
body[class*="theme-"] .filterBar,
body[class*="theme-"] .databaseSummary,
body[class*="theme-"] .themePanel {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 52%),
    var(--rv-panel);
  border-color: var(--rv-border);
}

body[class*="theme-"] .hero h2,
body[class*="theme-"] .card h3,
body[class*="theme-"] .detailFacts h4,
body[class*="theme-"] .localDatabaseHeader h4,
body[class*="theme-"] .databaseSummaryStats,
body[class*="theme-"] .vaultCount,
body[class*="theme-"] .cardPlaceholderText,
body[class*="theme-"] .detailBadge {
  color: var(--rv-accent);
}

body[class*="theme-"] .search,
body[class*="theme-"] .themeSelect,
body[class*="theme-"] .memoryNoteInput {
  color: var(--rv-text);
  background: rgba(0, 0, 0, 0.30);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .search::placeholder,
body[class*="theme-"] .memoryNoteInput::placeholder {
  color: rgba(199, 210, 201, 0.65);
}

body[class*="theme-"] button,
body[class*="theme-"] .filterBtn.active,
body[class*="theme-"] .databaseFilter.active,
body[class*="theme-"] .exportDatabaseBtn,
body[class*="theme-"] .saveMemoryBtn {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border-color: var(--rv-border);
}

body[class*="theme-"] button.secondary,
body[class*="theme-"] .filterBtn,
body[class*="theme-"] .importDatabaseBtn,
body[class*="theme-"] .localToggle,
body[class*="theme-"] .databaseBackupStatus,
body[class*="theme-"] .localDatabaseStatus {
  color: var(--rv-accent);
  background: rgba(125, 255, 189, 0.10);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .filterBtn:hover,
body[class*="theme-"] button.secondary:hover,
body[class*="theme-"] .importDatabaseBtn:hover,
body[class*="theme-"] .localToggle:hover {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border-color: var(--rv-border);
}

body[class*="theme-"] .card {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.08), transparent 56%),
    var(--rv-card);
  border-color: rgba(125, 255, 189, 0.22);
}

body[class*="theme-"] .card:hover {
  border-color: var(--rv-accent-border);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(125, 255, 189, 0.14);
}

body[class*="theme-"] .card:focus {
  outline-color: var(--rv-accent);
}

body[class*="theme-"] .card img,
body[class*="theme-"] .detailImage {
  border-color: rgba(125, 255, 189, 0.26);
}

body[class*="theme-"] .cardImagePlaceholder,
body[class*="theme-"] .detailImagePlaceholder {
  color: var(--rv-title);
  border-color: rgba(247, 211, 107, 0.32);
  background:
    radial-gradient(circle at top, rgba(125, 255, 189, 0.14), transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18));
}

body[class*="theme-"] .databaseSummaryStats,
body[class*="theme-"] .vaultCount,
body[class*="theme-"] .detailBadge {
  background: rgba(125, 255, 189, 0.12);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .mystery {
  background: var(--rv-card-mystery);
  border-color: rgba(255, 159, 159, 0.42);
}

body[class*="theme-"] .mystery h3,
body[class*="theme-"] .mysteryFilter,
body[class*="theme-"] .placeholderTitle,
body[class*="theme-"] .clearMemoryBtn {
  color: var(--rv-danger);
}

body[class*="theme-"] .detailOverlay {
  background: rgba(0, 0, 0, 0.74);
}

body[class*="theme-"] .detailPanel {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.13), transparent 38%),
    linear-gradient(135deg, var(--rv-panel), rgba(0, 0, 0, 0.96));
  border-color: var(--rv-border);
}

body[class*="theme-"] .detailMeta div,
body[class*="theme-"] .note,
body[class*="theme-"] .localDatabaseBox,
body[class*="theme-"] .jaygMemoryBox,
body[class*="theme-"] .detailFacts {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(125, 255, 189, 0.24);
}

body[class*="theme-"] .detailCloseBtn {
  color: var(--rv-title);
  border-color: var(--rv-border);
  background: rgba(255, 255, 255, 0.08);
}

body[class*="theme-"] .favoriteBadge {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-title), var(--rv-accent-2));
  border-color: var(--rv-border);
}

body[class*="theme-"] .ownedBadge {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .noteBadge {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent-2), var(--rv-title));
  border-color: var(--rv-border);
}


body[class*="theme-"] .siteNav {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 48%),
    rgba(0, 0, 0, 0.82);
  border-bottom-color: var(--rv-border);
}

body[class*="theme-"] .siteNavBrand,
body[class*="theme-"] .suggestionCallout strong {
  color: var(--rv-title);
}

body[class*="theme-"] .siteNavMark,
body[class*="theme-"] .siteNavSuggestBtn {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .suggestionCallout {
  color: var(--rv-muted);
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 56%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(125, 255, 189, 0.24);
}

/* Haunted VHS gets a subtle scanline/static layer. */
body.theme-haunted-vhs::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 4px
    );
}

body.theme-haunted-vhs .app {
  position: relative;
  z-index: 1;
}

/* Saturday Morning should feel a little bolder and cartoon-bright. */
body.theme-saturday-morning .card,
body.theme-saturday-morning .hero,
body.theme-saturday-morning .filterBar,
body.theme-saturday-morning .databaseSummary {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 0 2px rgba(255, 255, 255, 0.06) inset;
}

@media (max-width: 760px) {
  .themePanel {
    grid-template-columns: 1fr;
  }

  .themeSelect {
    width: 100%;
  }
}



/*
  =========================================================
  PHASE 1.8.2 — THEME DIMMER SWITCH
  =========================================================

  The dimmer slider does not change your data.
  It simply places a soft dark comfort layer over the app.

  app.js updates:
  --rv-dimmer-opacity

  0% slider = no comfort layer
  100% slider = strongest comfort layer
*/
body[class*="theme-"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--rv-dimmer-opacity));
  transition: background 0.18s ease;
}

/* Keep popup/detail views above the comfort layer. */
.detailOverlay {
  z-index: 9999;
}

body[class*="theme-"] .themeDimmerValue {
  color: var(--rv-accent);
  background: rgba(125, 255, 189, 0.12);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .themeDimmerInput {
  accent-color: var(--rv-accent);
}

/*
  =========================================================
  PHASE 1.8.1 — CALMER THEME COMFORT TUNING
  =========================================================
*/
body[class*="theme-"] * {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.18s ease,
    box-shadow 0.22s ease;
}

body.theme-soft-neon-arcade h1 {
  text-shadow: 0 0 12px rgba(174, 239, 255, 0.24);
}

body.theme-soft-neon-arcade .card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}


/*
  =========================================================
  PHASE 1.8.4 EXTRA THEME POLISH
  =========================================================
*/
body.theme-midnight-violet h1,
body.theme-royal-purple h1 {
  text-shadow: 0 0 16px rgba(192, 132, 255, 0.34);
}

body.theme-emerald-night h1 {
  text-shadow: 0 0 16px rgba(94, 240, 175, 0.30);
}

body.theme-gold-noir h1 {
  text-shadow: 0 0 16px rgba(255, 216, 111, 0.34);
}

body.theme-blue-ice h1 {
  text-shadow: 0 0 16px rgba(153, 212, 255, 0.34);
}

body.theme-pink-noir h1 {
  text-shadow: 0 0 16px rgba(255, 140, 190, 0.34);
}

body.theme-pink-noir .card:hover {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(255, 140, 190, 0.16);
}

/*
  =========================================================
  PHASE 1.9B — TIGHTENED PAGE TEST
  =========================================================

  Goal:
  - Reduce long-page scrolling
  - Keep the cards readable
  - Keep the full description inside the detail popup
  - Do not touch vault-data.json or personal-database.json

  Rack 42 status:
  Cadillac seats lowered.
  Card stairway shortened.
  Goblin no longer needs hiking boots to browse 62 items.
  =========================================================
*/

.grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px;
}

.card {
  padding: 14px;
  min-height: auto;
  border-radius: 16px;
}

.card img,
.cardImagePlaceholder {
  height: 118px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 18px;
  line-height: 1.12;
  margin-bottom: 7px;
}

.cardLocalBadges {
  gap: 5px;
  margin: 3px 0 8px;
}

.localBadge {
  padding: 4px 7px;
  font-size: 11px;
}

.year {
  margin-bottom: 5px;
  font-size: 13px;
}

.maker {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desc {
  font-size: 12.5px;
  line-height: 1.38;
  display: block;
  max-height: calc(12.5px * 1.38 * 3);
  overflow: hidden;
}

.cardPlaceholderTitle {
  font-size: 13px;
}

.cardPlaceholderText {
  font-size: 11px;
}

.collectionHeader {
  margin-top: 22px;
  margin-bottom: 13px;
}

.section-title {
  margin: 22px 0 13px;
}

.filterBar {
  padding: 13px;
  gap: 8px;
}

.filterBtn {
  padding: 8px 11px;
  font-size: 12px;
}

.databaseSummary {
  padding: 12px 14px;
  margin: 12px 0 15px;
}

@media (max-width: 760px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 11px;
  }

  .card {
    padding: 12px;
  }

  .card img,
  .cardImagePlaceholder {
    height: 105px;
  }

  .desc {
    max-height: calc(12.5px * 1.38 * 2);
  }
}


/*
  =========================================================
  PHASE 1.9B.1 — RANDOM MEMORY / RETURN BUTTON POLISH
  =========================================================

  Improvements:
  - Single-card results get a larger featured-card layout.
  - This helps Random Memory feel like a spotlight card instead of a tiny card.
  - Added a creative return button at the bottom of the page.
*/

.grid.singleCardMode {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.grid.singleCardMode .card {
  max-width: 860px;
  width: 100%;
  justify-self: center;
  padding: 18px;
}

.grid.singleCardMode .card img,
.grid.singleCardMode .cardImagePlaceholder {
  height: 250px;
  margin-bottom: 14px;
  border-radius: 14px;
}

.grid.singleCardMode .card h3 {
  font-size: 30px;
  line-height: 1.08;
  margin-bottom: 10px;
}

.grid.singleCardMode .cardLocalBadges {
  gap: 8px;
  margin: 6px 0 12px;
}

.grid.singleCardMode .localBadge {
  padding: 7px 11px;
  font-size: 14px;
}

.grid.singleCardMode .year {
  font-size: 28px;
  margin-bottom: 10px;
}

.grid.singleCardMode .maker {
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  margin-bottom: 14px;
}

.grid.singleCardMode .desc {
  display: block;
  overflow: visible;
  font-size: 18px;
  line-height: 1.65;
}

.vaultReturnSection {
  display: flex;
  justify-content: center;
  margin: 26px 0 10px;
}

.backToMarqueeBtn {
  min-width: 250px;
  padding: 14px 22px;
  border: 1px solid rgba(247, 211, 107, 0.38);
  background:
    radial-gradient(circle at top, rgba(125, 255, 189, 0.22), transparent 62%),
    linear-gradient(135deg, rgba(247, 211, 107, 0.96), rgba(125, 255, 189, 0.92));
  color: #102219;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  letter-spacing: 0.2px;
}

.backToMarqueeBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

.backToMarqueeBtn:focus {
  outline: 2px solid rgba(247, 211, 107, 0.75);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .grid.singleCardMode {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid.singleCardMode .card {
    padding: 14px;
  }

  .grid.singleCardMode .card img,
  .grid.singleCardMode .cardImagePlaceholder {
    height: 185px;
  }

  .grid.singleCardMode .card h3 {
    font-size: 24px;
  }

  .grid.singleCardMode .year {
    font-size: 22px;
  }

  .grid.singleCardMode .maker {
    font-size: 16px;
  }

  .grid.singleCardMode .desc {
    font-size: 15px;
    line-height: 1.55;
  }

  .backToMarqueeBtn {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .siteNavInner {
    padding: 9px 14px;
  }

  .siteNavBrand {
    font-size: 14px;
  }

  .siteNavMark {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .siteNavSuggestBtn {
    padding: 9px 12px;
    font-size: 12px;
  }

  .suggestionCallout {
    padding: 13px;
    font-size: 14px;
  }
}


/* Theme support for the suggestion privacy popup. */
body[class*="theme-"] .suggestionModal {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.13), transparent 54%),
    linear-gradient(135deg, var(--rv-panel), rgba(0, 0, 0, 0.96));
  border-color: var(--rv-border);
}

body[class*="theme-"] .suggestionModal h2,
body[class*="theme-"] .suggestionModalClose {
  color: var(--rv-title);
}

body[class*="theme-"] .suggestionModal p {
  color: var(--rv-muted);
}

body[class*="theme-"] .suggestionModalBadge {
  color: var(--rv-accent);
  border-color: var(--rv-accent-border);
  background: rgba(125, 255, 189, 0.12);
}

body[class*="theme-"] .suggestionPrivacyNote {
  color: var(--rv-text);
  border-color: var(--rv-border);
  background: rgba(247, 211, 107, 0.09);
}

body[class*="theme-"] .suggestionModalPrimary {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border-color: var(--rv-border);
}

body[class*="theme-"] .suggestionModalSecondary {
  color: var(--rv-accent);
  background: rgba(125, 255, 189, 0.10);
  border-color: var(--rv-accent-border);
}




body[class*="theme-"] .suggestionField {
  color: var(--rv-title);
}

body[class*="theme-"] .suggestionField input,
body[class*="theme-"] .suggestionField select,
body[class*="theme-"] .suggestionField textarea {
  color: var(--rv-text);
  border-color: var(--rv-accent-border);
  background: rgba(0, 0, 0, 0.30);
}

body[class*="theme-"] .suggestionCheckbox {
  color: var(--rv-muted);
}

body[class*="theme-"] .suggestionCheckbox input {
  accent-color: var(--rv-accent);
}

body[class*="theme-"] .suggestionStatus.success {
  color: var(--rv-accent);
}

body[class*="theme-"] .suggestionStatus.working {
  color: var(--rv-title);
}

/*
  =========================================================
  SUGGESTION POPUP CLOSE BUTTON POLISH
  =========================================================

  Keep the close button circle controlled by the active theme,
  but make the X itself a steady black color so it is easier
  to read on every theme.
*/
.suggestionModalClose,
body[class*="theme-"] .suggestionModalClose {
  color: #050505;
  font-weight: 900;
  text-shadow: none;
}

.suggestionModalClose:hover,
body[class*="theme-"] .suggestionModalClose:hover {
  color: #000000;
}


/*
  =========================================================
  MYSTERY VAULT CHALLENGE — VOODOO DOLL GAME
  =========================================================
*/
.mysteryChallenge {
  margin: 24px 0 26px;
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(247, 211, 107, 0.16), transparent 50%),
    rgba(8, 15, 11, 0.78);
  border: 1px solid rgba(247, 211, 107, 0.28);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.mysteryChallengeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mysteryEyebrow {
  margin: 0 0 7px;
  color: #7dffbd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.mysteryChallenge h2 {
  margin: 0 0 8px;
  color: #f7d36b;
  font-size: 28px;
}

.mysteryChallenge p {
  margin: 0;
  color: #c7d2c9;
  line-height: 1.55;
}

.mysteryFirstClue {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: #f4f4f4;
  background: rgba(247, 211, 107, 0.08);
  border: 1px solid rgba(247, 211, 107, 0.22);
}

.mysteryFirstClue strong {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.mysteryFirstClue span {
  color: #ffeaa0;
  font-weight: bold;
  line-height: 1.45;
}

.mysteryBadge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  color: #111;
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
  border: 1px solid rgba(247, 211, 107, 0.46);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mysteryChallengeBody {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.mysteryImageShell {
  position: relative;
  min-height: 290px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(125, 255, 189, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(125, 255, 189, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mysteryImage {
  width: 100%;
  height: 100%;
  min-height: 290px;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition:
    filter 1.4s ease,
    opacity 0.8s ease,
    transform 1.4s ease;
}

.mysteryImageShell.stage1 .mysteryImage {
  opacity: 0.78;
  filter: blur(18px) brightness(0.72) saturate(0.75);
}

.mysteryImageShell.stage2 .mysteryImage {
  opacity: 0.88;
  filter: blur(10px) brightness(0.82) saturate(0.86);
}

.mysteryImageShell.stage3 .mysteryImage {
  opacity: 0.94;
  filter: blur(5px) brightness(0.93) saturate(0.96);
}

.mysteryImageShell.solved .mysteryImage {
  opacity: 1;
  filter: blur(0) brightness(1) saturate(1);
  transform: scale(1);
}

.mysteryImageCover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 24px;
  color: #f7d36b;
  background:
    radial-gradient(circle at center, rgba(247, 211, 107, 0.18), transparent 52%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.34));
}

.mysteryImageCover span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: #111;
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
  font-size: 46px;
  font-weight: 900;
  box-shadow: 0 0 26px rgba(247, 211, 107, 0.24);
}

.mysteryImageCover strong {
  font-size: 20px;
}

.mysteryImageCover small {
  max-width: 230px;
  color: #c7d2c9;
  line-height: 1.45;
}

.mysteryPlayPanel {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.mysteryProgressText {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.10);
  border: 1px solid rgba(0, 255, 140, 0.24);
  font-size: 12px;
  font-weight: 900;
}

.mysteryGuessForm label {
  display: block;
  margin-bottom: 8px;
  color: #f7d36b;
  font-size: 14px;
  font-weight: 900;
}

.mysteryGuessRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mysteryGuessRow input {
  flex: 1;
  min-width: 210px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 140, 0.35);
  background: rgba(0, 0, 0, 0.30);
  color: #f4f4f4;
  padding: 12px 14px;
  outline: none;
  font-size: 14px;
}

.mysteryGuessRow input:focus {
  border-color: rgba(247, 211, 107, 0.62);
  box-shadow: 0 0 0 3px rgba(247, 211, 107, 0.12);
}

.mysteryGuessRow input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.mysteryStatus {
  min-height: 22px;
  margin: 12px 0;
  color: #c7d2c9;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.mysteryStatus.success {
  color: #7dffbd;
}

.mysteryStatus.error {
  color: #ffb6b6;
}

.mysteryStatus.working {
  color: #f7d36b;
}

.mysteryQuestions {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.10), transparent 55%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(125, 255, 189, 0.18);
}

.mysteryQuestionsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.mysteryQuestionsHeader h3 {
  margin: 0 0 5px;
  color: #f7d36b;
  font-size: 16px;
}

.mysteryQuestionsHeader p {
  margin: 0;
  color: #c7d2c9;
  font-size: 13px;
  line-height: 1.45;
}

.mysteryQuestionCount {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.10);
  border: 1px solid rgba(0, 255, 140, 0.24);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mysteryQuestionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mysteryQuestionBtn {
  border-radius: 14px;
  padding: 10px 11px;
  color: #7dffbd;
  background: rgba(0, 255, 140, 0.08);
  border: 1px solid rgba(0, 255, 140, 0.24);
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}

.mysteryQuestionBtn:hover {
  color: #111;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border-color: rgba(247, 211, 107, 0.50);
  transform: translateY(-1px);
}

.mysteryQuestionBtn.asked,
.mysteryQuestionBtn:disabled {
  color: #111;
  background: linear-gradient(135deg, rgba(125, 255, 189, 0.85), rgba(247, 211, 107, 0.85));
  border-color: rgba(247, 211, 107, 0.44);
  cursor: not-allowed;
  opacity: 0.72;
}

.mysteryQuestionAnswer {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  color: #f4f4f4;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 13px;
  line-height: 1.45;
}

.mysteryQuestionAnswer strong {
  color: #f7d36b;
}

.mysteryHints {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mysteryHint {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.mysteryHint.locked {
  color: rgba(199, 210, 201, 0.62);
  background: rgba(255, 255, 255, 0.045);
}

.mysteryHint.unlocked {
  color: #f4f4f4;
  background: rgba(125, 255, 189, 0.09);
  border-color: rgba(125, 255, 189, 0.22);
}

.mysteryReveal {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  color: #111;
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
  border: 1px solid rgba(247, 211, 107, 0.50);
  box-shadow: 0 0 24px rgba(247, 211, 107, 0.18);
}

.mysteryReveal.show {
  display: block;
}

.mysteryReveal strong,
.mysteryReveal span {
  display: block;
}

.mysteryReveal p {
  margin-top: 8px;
  color: #102219;
  font-weight: 800;
}

.mysteryResetBtn {
  margin-top: 12px;
  padding: 10px 14px;
  color: #f7d36b;
  background: rgba(247, 211, 107, 0.08);
  border: 1px solid rgba(247, 211, 107, 0.28);
  font-size: 12px;
}

.mysteryResetBtn:hover {
  color: #111;
  background: linear-gradient(135deg, #f7d36b, #7dffbd);
}

.mysterySolvedGlow {
  animation: mysteryVictoryPulse 4.2s ease-in-out;
}

@keyframes mysteryVictoryPulse {
  0%, 100% {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
    border-color: rgba(247, 211, 107, 0.28);
  }

  18%, 52%, 82% {
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.36),
      0 0 34px rgba(247, 211, 107, 0.45),
      0 0 58px rgba(125, 255, 189, 0.20);
    border-color: rgba(247, 211, 107, 0.76);
  }

  34%, 68% {
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.36),
      0 0 18px rgba(247, 211, 107, 0.26),
      0 0 36px rgba(125, 255, 189, 0.12);
    border-color: rgba(125, 255, 189, 0.58);
  }
}

body[class*="theme-"] .mysteryChallenge {
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.13), transparent 50%),
    var(--rv-panel);
  border-color: var(--rv-border);
}

body[class*="theme-"] .mysteryChallenge h2,
body[class*="theme-"] .mysteryGuessForm label {
  color: var(--rv-title);
}

body[class*="theme-"] .mysteryEyebrow,
body[class*="theme-"] .mysteryProgressText,
body[class*="theme-"] .mysteryStatus.success {
  color: var(--rv-accent);
}

body[class*="theme-"] .mysteryBadge,
body[class*="theme-"] .mysteryReveal,
body[class*="theme-"] .mysteryImageCover span {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
}

body[class*="theme-"] .mysteryGuessRow input {
  color: var(--rv-text);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .mysteryResetBtn {
  color: var(--rv-accent);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .mysteryResetBtn:hover {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
}

body[class*="theme-"] .mysteryQuestionBtn {
  color: var(--rv-accent);
  border-color: var(--rv-accent-border);
}

body[class*="theme-"] .mysteryQuestionBtn:hover,
body[class*="theme-"] .mysteryQuestionBtn.asked {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
}

@media (max-width: 820px) {
  .mysteryChallengeBody {
    grid-template-columns: 1fr;
  }

  .mysteryChallengeHeader {
    flex-direction: column;
  }
}


@media (max-width: 620px) {
  .mysteryQuestionsHeader {
    flex-direction: column;
  }

  .mysteryQuestionGrid {
    grid-template-columns: 1fr;
  }
}


/*
  =========================================================
  MYSTERY TITLE BANNER
  =========================================================
  Small header callout that points visitors to the Mystery
  Vault Challenge now parked near the bottom of the page.
*/
.mysteryTitleBanner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 860px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border-radius: 999px;
  color: #d8dfda;
  text-decoration: none;
  line-height: 1.4;
  background:
    radial-gradient(circle at top left, rgba(247, 211, 107, 0.14), transparent 54%),
    rgba(0, 255, 140, 0.075);
  border: 1px solid rgba(247, 211, 107, 0.24);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.mysteryTitleBanner:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 255, 189, 0.44);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.mysteryTitleBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[class*="theme-"] .mysteryTitleBanner {
  color: var(--rv-muted);
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.13), transparent 54%),
    rgba(255, 255, 255, 0.055);
  border-color: var(--rv-border);
}

body[class*="theme-"] .mysteryTitleBadge {
  color: var(--rv-button-text);
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
}

/* The mystery challenge is now near the bottom of the page. */
.mysteryChallenge {
  scroll-margin-top: 82px;
  margin-top: 34px;
}

@media (max-width: 760px) {
  .mysteryTitleBanner {
    border-radius: 18px;
    padding: 12px 14px;
  }
}

/*
  =========================================================
  PHASE 1.9D READABILITY FIX
  =========================================================
  The Ask Rack 42 question buttons were too hard to read on
  bright theme gradients. This override keeps the themed
  button glow, but forces dark readable text on every theme.
  =========================================================
*/
.mysteryQuestionBtn,
body[class*="theme-"] .mysteryQuestionBtn {
  color: #06140d !important;
  background: linear-gradient(
    135deg,
    rgba(125, 255, 189, 0.96),
    rgba(247, 211, 107, 0.96)
  ) !important;
  border-color: rgba(247, 211, 107, 0.58) !important;
  font-weight: 900;
  text-shadow: none !important;
  opacity: 1;
}

.mysteryQuestionBtn:hover,
body[class*="theme-"] .mysteryQuestionBtn:hover {
  color: #020805 !important;
  background: linear-gradient(
    135deg,
    rgba(247, 211, 107, 1),
    rgba(125, 255, 189, 1)
  ) !important;
  border-color: rgba(125, 255, 189, 0.72) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.mysteryQuestionBtn.asked,
.mysteryQuestionBtn:disabled,
body[class*="theme-"] .mysteryQuestionBtn.asked,
body[class*="theme-"] .mysteryQuestionBtn:disabled {
  color: #06140d !important;
  background: linear-gradient(
    135deg,
    rgba(198, 255, 218, 0.95),
    rgba(255, 231, 152, 0.95)
  ) !important;
  border-color: rgba(247, 211, 107, 0.52) !important;
  opacity: 0.92;
  cursor: not-allowed;
}


/* =========================================================
   PUBLIC SITE SAFETY PATCH
   ========================================================= */

.databaseSummary,
.databaseFilter,
.favoriteFilter,
.ownedFilter,
.notesFilter,
.cardLocalBadges,
.localDatabaseBox {
  display: none !important;
}

/* =========================================================
   COMPACT SUGGESTION POPUP + THEMED CATEGORY PICKER
   =========================================================

   Goals:
   - no giant popup scrollbar on desktop
   - only the "Tell us what you remember" textarea scrolls if needed
   - category dropdown matches the Retro Vault theme
========================================================= */

.suggestionModalOverlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  overflow-y: auto !important;
}

.suggestionModal,
.suggestionFormModal {
  width: min(620px, 94vw) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
}

.suggestionModalClose {
  width: 34px !important;
  height: 34px !important;
  top: 9px !important;
  right: 9px !important;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.suggestionModalBadge {
  margin-bottom: 6px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
}

.suggestionModal h2 {
  margin: 0 42px 6px 0 !important;
  font-size: 23px !important;
  line-height: 1.05 !important;
}

.suggestionModal p {
  margin: 0 0 7px !important;
  font-size: 13px !important;
  line-height: 1.34 !important;
}

.suggestionPrivacyNote {
  margin: 0 0 9px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
}

.suggestionForm {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.suggestionField {
  margin-bottom: 0 !important;
  gap: 4px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.suggestionTwoColumn {
  gap: 8px !important;
}

.suggestionField input,
.suggestionField textarea {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* This is the only field that should scroll when someone types a lot. */
.suggestionField textarea {
  min-height: 58px !important;
  height: 58px !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  resize: vertical !important;
}

/* Hide the old native category input; the custom picker shows instead. */
#suggestionCategory[type="hidden"] {
  display: none !important;
}

/* Custom category picker button */
.suggestionCategoryPicker {
  position: relative;
  width: 100%;
}

.suggestionCategoryButton {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  color: #f4f4f4;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.10), transparent 48%),
    linear-gradient(180deg, rgba(8, 20, 14, 0.98), rgba(4, 12, 8, 0.98));
  border: 1px solid rgba(0, 255, 140, 0.32);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.suggestionCategoryButton:hover,
.suggestionCategoryPicker.open .suggestionCategoryButton {
  border-color: rgba(247, 211, 107, 0.70);
  box-shadow:
    0 0 0 3px rgba(247, 211, 107, 0.11),
    0 0 18px rgba(125, 255, 189, 0.10);
}

.suggestionCategoryChevron {
  color: #7dffbd;
  font-size: 18px;
  line-height: 1;
}

.suggestionCategoryMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10010;
  display: none;
  max-height: 190px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(8, 20, 14, 0.99), rgba(3, 8, 5, 0.99));
  border: 1px solid rgba(247, 211, 107, 0.34);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.suggestionCategoryPicker.open .suggestionCategoryMenu {
  display: grid;
  gap: 4px;
}

.suggestionCategoryOption {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 9px;
  border-radius: 10px;
  color: #d8dfda;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.suggestionCategoryOption:hover,
.suggestionCategoryOption.selected {
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
  border-color: rgba(247, 211, 107, 0.55);
}

/* Category menu scrollbar only */
.suggestionCategoryMenu {
  scrollbar-width: thin;
  scrollbar-color: #7dffbd rgba(4, 12, 8, 0.95);
}

.suggestionCategoryMenu::-webkit-scrollbar,
.suggestionField textarea::-webkit-scrollbar {
  width: 9px;
}

.suggestionCategoryMenu::-webkit-scrollbar-track,
.suggestionField textarea::-webkit-scrollbar-track {
  background: rgba(4, 12, 8, 0.95);
  border-radius: 999px;
}

.suggestionCategoryMenu::-webkit-scrollbar-thumb,
.suggestionField textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7dffbd, #f7d36b);
  border-radius: 999px;
  border: 2px solid rgba(4, 12, 8, 0.98);
}

.suggestionCheckbox {
  margin: 0 !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

.suggestionStatus {
  min-height: 16px !important;
  margin-top: 0 !important;
  font-size: 12.5px !important;
}

.suggestionModalActions {
  margin-top: 7px !important;
  gap: 8px !important;
}

.suggestionModalPrimary,
.suggestionModalSecondary {
  padding: 9px 14px !important;
  font-size: 12.5px !important;
}

/* Short screens still need safety scroll on the overlay, not inside the card. */
@media (max-height: 700px), (max-width: 620px) {
  .suggestionModalOverlay {
    align-items: flex-start !important;
  }

  .suggestionModal,
  .suggestionFormModal {
    max-height: none !important;
    overflow: visible !important;
  }

  .suggestionTwoColumn {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}


/* =========================================================
   JAYG RETRO VAULT 42 — CATEGORY PICKER THEME VARIABLE FIX
   =========================================================

   Fixes:
   - The suggestion category picker was hardcoded green/gold.
   - That made every theme show green, even Pink Noir / Blue Ice / etc.

   New behavior:
   - The picker uses theme-aware variables.
   - Each body.theme-* block below maps picker colors to that theme.
   - No green is forced unless the active theme is actually green.

   Connected section:
   - Suggest an Item popup
   - .suggestionCategoryPicker
   - .suggestionCategoryButton
   - .suggestionCategoryMenu
   - .suggestionCategoryOption
========================================================= */


/* =========================================================
   PICKER COLOR MAP
   ---------------------------------------------------------
   These variables control only the Suggestion Category picker.
   They are intentionally separate so we do not disturb the rest
   of the Retro Vault page.
========================================================= */

body {
  --picker-bg-top: rgba(8, 20, 14, 0.98);
  --picker-bg-bottom: rgba(4, 12, 8, 0.99);
  --picker-row-bg: rgba(255, 255, 255, 0.045);
  --picker-row-selected-bg: rgba(255, 255, 255, 0.075);

  --picker-text: #f4f4f4;
  --picker-muted: #d8dfda;
  --picker-selected-text: #f7d36b;
  --picker-arrow: #7dffbd;

  --picker-border: rgba(247, 211, 107, 0.34);
  --picker-accent-border: rgba(125, 255, 189, 0.38);
  --picker-soft-glow: rgba(125, 255, 189, 0.10);

  --picker-hover-text: #041b10;
  --picker-hover-a: #7dffbd;
  --picker-hover-b: #f7d36b;
}

/* Retro Green / Gold */
body.theme-retro-green {
  --picker-bg-top: rgba(8, 20, 14, 0.98);
  --picker-bg-bottom: rgba(4, 12, 8, 0.99);
  --picker-selected-text: #f7d36b;
  --picker-arrow: #7dffbd;
  --picker-border: rgba(247, 211, 107, 0.38);
  --picker-accent-border: rgba(125, 255, 189, 0.38);
  --picker-soft-glow: rgba(125, 255, 189, 0.12);
  --picker-hover-a: #7dffbd;
  --picker-hover-b: #f7d36b;
  --picker-hover-text: #041b10;
}



/* Royal Purple */
body.theme-royal-purple {
  --picker-bg-top: rgba(19, 8, 36, 0.98);
  --picker-bg-bottom: rgba(8, 3, 18, 0.99);
  --picker-selected-text: #d6b6ff;
  --picker-arrow: #f7d36b;
  --picker-border: rgba(214, 182, 255, 0.44);
  --picker-accent-border: rgba(247, 211, 107, 0.34);
  --picker-soft-glow: rgba(214, 182, 255, 0.12);
  --picker-hover-a: #d6b6ff;
  --picker-hover-b: #f7d36b;
  --picker-hover-text: #13071f;
}





/* Midnight Violet */
body.theme-midnight-violet {
  --picker-bg-top: rgba(11, 8, 28, 0.98);
  --picker-bg-bottom: rgba(4, 4, 14, 0.99);
  --picker-selected-text: #bfa7ff;
  --picker-arrow: #8bb8ff;
  --picker-border: rgba(191, 167, 255, 0.42);
  --picker-accent-border: rgba(139, 184, 255, 0.34);
  --picker-soft-glow: rgba(191, 167, 255, 0.12);
  --picker-hover-a: #bfa7ff;
  --picker-hover-b: #8bb8ff;
  --picker-hover-text: #090716;
}

/* Emerald Night */
body.theme-emerald-night {
  --picker-bg-top: rgba(4, 21, 14, 0.98);
  --picker-bg-bottom: rgba(2, 10, 7, 0.99);
  --picker-selected-text: #7dffbd;
  --picker-arrow: #f7d36b;
  --picker-border: rgba(125, 255, 189, 0.42);
  --picker-accent-border: rgba(247, 211, 107, 0.34);
  --picker-soft-glow: rgba(125, 255, 189, 0.12);
  --picker-hover-a: #7dffbd;
  --picker-hover-b: #f7d36b;
  --picker-hover-text: #041b10;
}

/* Gold Noir */
body.theme-gold-noir {
  --picker-bg-top: rgba(18, 14, 6, 0.98);
  --picker-bg-bottom: rgba(5, 4, 2, 0.99);
  --picker-selected-text: #f7d36b;
  --picker-arrow: #f7d36b;
  --picker-border: rgba(247, 211, 107, 0.46);
  --picker-accent-border: rgba(247, 211, 107, 0.30);
  --picker-soft-glow: rgba(247, 211, 107, 0.12);
  --picker-hover-a: #f7d36b;
  --picker-hover-b: #fff0a8;
  --picker-hover-text: #161006;
}

/* Blue Ice */
body.theme-blue-ice {
  --picker-bg-top: rgba(5, 17, 28, 0.98);
  --picker-bg-bottom: rgba(2, 8, 14, 0.99);
  --picker-selected-text: #aee7ff;
  --picker-arrow: #d8f6ff;
  --picker-border: rgba(174, 231, 255, 0.44);
  --picker-accent-border: rgba(216, 246, 255, 0.32);
  --picker-soft-glow: rgba(174, 231, 255, 0.12);
  --picker-hover-a: #aee7ff;
  --picker-hover-b: #ffffff;
  --picker-hover-text: #04111a;
}

/* Pink Noir */
body.theme-pink-noir {
  --picker-bg-top: rgba(23, 8, 18, 0.98);
  --picker-bg-bottom: rgba(9, 3, 8, 0.99);
  --picker-selected-text: #ffb6d9;
  --picker-arrow: #ffb6d9;
  --picker-border: rgba(255, 182, 217, 0.44);
  --picker-accent-border: rgba(255, 133, 193, 0.34);
  --picker-soft-glow: rgba(255, 182, 217, 0.12);
  --picker-hover-a: #ffb6d9;
  --picker-hover-b: #ffe08a;
  --picker-hover-text: #180612;
}


/* =========================================================
   ACTUAL PICKER STYLING
========================================================= */

.suggestionCategoryPicker {
  position: relative !important;
  width: 100% !important;
  z-index: 10020 !important;
}

.suggestionCategoryButton,
.suggestionCategoryPicker .suggestionCategoryButton,
button.suggestionCategoryButton {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 11px !important;
  border-radius: 12px !important;

  color: var(--picker-text) !important;
  background:
    radial-gradient(circle at top left, var(--picker-soft-glow), transparent 48%),
    linear-gradient(180deg, var(--picker-bg-top), var(--picker-bg-bottom)) !important;
  border: 1px solid var(--picker-accent-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 0 1px rgba(0, 0, 0, 0.16) !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.suggestionCategoryButton:hover,
.suggestionCategoryButton:focus,
.suggestionCategoryPicker.open .suggestionCategoryButton {
  color: var(--picker-text) !important;
  background:
    radial-gradient(circle at top left, var(--picker-soft-glow), transparent 48%),
    linear-gradient(180deg, var(--picker-bg-top), var(--picker-bg-bottom)) !important;
  border-color: var(--picker-border) !important;
  box-shadow:
    0 0 0 3px var(--picker-soft-glow),
    0 0 18px var(--picker-soft-glow) !important;
  outline: none !important;
}

.suggestionCategoryChevron {
  flex: 0 0 auto !important;
  color: var(--picker-arrow) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.suggestionCategoryMenu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10030 !important;
  display: none !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border-radius: 14px !important;

  background:
    radial-gradient(circle at top left, var(--picker-soft-glow), transparent 52%),
    linear-gradient(180deg, var(--picker-bg-top), var(--picker-bg-bottom)) !important;
  border: 1px solid var(--picker-border) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.suggestionCategoryPicker.open .suggestionCategoryMenu {
  display: grid !important;
  gap: 4px !important;
}

.suggestionCategoryOption,
button.suggestionCategoryOption {
  width: 100% !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;

  color: var(--picker-muted) !important;
  background: var(--picker-row-bg) !important;
  border: 1px solid transparent !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Selected row: dark and theme-colored, not green. */
.suggestionCategoryOption.selected,
button.suggestionCategoryOption.selected {
  color: var(--picker-selected-text) !important;
  background:
    radial-gradient(circle at left, var(--picker-soft-glow), transparent 60%),
    var(--picker-row-selected-bg) !important;
  border: 1px solid var(--picker-border) !important;
  box-shadow:
    inset 0 0 0 1px var(--picker-soft-glow),
    0 0 12px var(--picker-soft-glow) !important;
}

/* Hover: theme highlight, not fixed green unless theme is green. */
.suggestionCategoryOption:hover,
.suggestionCategoryOption:focus,
button.suggestionCategoryOption:hover,
button.suggestionCategoryOption:focus,
.suggestionCategoryOption.selected:hover,
.suggestionCategoryOption.selected:focus,
button.suggestionCategoryOption.selected:hover,
button.suggestionCategoryOption.selected:focus {
  color: var(--picker-hover-text) !important;
  background: linear-gradient(135deg, var(--picker-hover-a), var(--picker-hover-b)) !important;
  border-color: var(--picker-border) !important;
  outline: none !important;
}

/* Scrollbar also follows theme. */
.suggestionCategoryMenu {
  scrollbar-width: thin !important;
  scrollbar-color: var(--picker-arrow) var(--picker-bg-bottom) !important;
}

.suggestionCategoryMenu::-webkit-scrollbar {
  width: 9px !important;
}

.suggestionCategoryMenu::-webkit-scrollbar-track {
  background: var(--picker-bg-bottom) !important;
  border-radius: 999px !important;
}

.suggestionCategoryMenu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--picker-hover-a), var(--picker-hover-b)) !important;
  border-radius: 999px !important;
  border: 2px solid var(--picker-bg-bottom) !important;
}


/* =========================================================
   PUBLIC SITE NO-MEME / NO-LOCAL-TOOLS PATCH
   =========================================================

   Live public site version:
   - Random Meme is hidden for now.
   - Favorites / Owned / Notes local tools are hidden.
   - Export / Import local database tools are hidden.

   This does not remove your actual meme files from the server.
   Delete meme-data.json and /memes manually from cPanel if you
   do not want those files sitting online yet.
========================================================= */

.randomMemeBtn,
#jaygRandomMemeBtn,
#randomMemeBtn,
#jaygMemeOverlay,
#jaygMemeEmergencyOverlay,
#memeModalOverlay {
  display: none !important;
}

.databaseSummary,
.databaseFilter,
.favoriteFilter,
.ownedFilter,
.notesFilter,
.cardLocalBadges,
.localDatabaseBox {
  display: none !important;
}


/* =========================================================
   NO MEMES + LOCAL TOOLS RESTORED
   =========================================================

   This version:
   - Keeps Random Meme hidden/removed.
   - Restores Favorites / Owned / Notes.
   - Restores My Local Vault Database.
   - Keeps no-glow styling.
========================================================= */

/* Keep Random Meme offline/hidden for now. */
.randomMemeBtn,
#jaygRandomMemeBtn,
#randomMemeBtn,
#jaygMemeOverlay,
#jaygMemeEmergencyOverlay,
#memeModalOverlay {
  display: none !important;
}

/* Restore local tools that public-safe CSS may have hidden. */
.databaseSummary {
  display: grid !important;
}

.databaseFilter,
.favoriteFilter,
.ownedFilter,
.notesFilter {
  display: inline-flex !important;
}

.cardLocalBadges {
  display: flex !important;
}

.localDatabaseBox {
  display: block !important;
}

/* My Local Vault Database panel */
.databaseSummary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 22px;
  padding: 16px;
  border-radius: 20px;
  background: var(--rv-panel);
  border: 1px solid var(--rv-accent-border);
  box-shadow: none !important;
}

.databaseSummary h2 {
  margin: 0 0 4px;
  color: var(--rv-title);
  font-size: 18px;
}

.databaseSummary p {
  margin: 0;
  color: var(--rv-muted);
  font-size: 13px;
  line-height: 1.35;
}

.databaseSummaryActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.databaseSummaryStats,
.databaseBackupStatus {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--rv-accent);
  background: rgba(0,0,0,.20);
  border: 1px solid var(--rv-accent-border);
  font-size: 12px;
  font-weight: 900;
  box-shadow: none !important;
}

/* Card badges */
.cardLocalBadges {
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.localBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #050505;
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  font-size: 11px;
  font-weight: 900;
  box-shadow: none !important;
}

/* Local notes box in detail popup */
.localDatabaseBox {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--rv-accent-border);
  box-shadow: none !important;
}

.localDatabaseHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.localDatabaseHeader h4 {
  margin: 0 0 4px;
  color: var(--rv-accent);
}

.localDatabaseHeader p {
  margin: 0;
  color: var(--rv-muted);
  font-size: 13px;
}

.localDatabaseStatus {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--rv-accent);
  border: 1px solid var(--rv-accent-border);
  font-size: 12px;
  font-weight: 900;
  box-shadow: none !important;
}

.localToggleRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.localToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rv-text);
  font-size: 13px;
  font-weight: 800;
}

.localToggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--rv-accent);
}

.memoryNoteLabel {
  display: block;
  margin: 12px 0 6px;
  color: var(--rv-title);
  font-size: 13px;
  font-weight: 900;
}

.memoryNoteInput {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border-radius: 14px;
  color: var(--rv-text);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--rv-accent-border);
  resize: vertical;
  box-shadow: none !important;
}

.localDatabaseActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.saveMemoryBtn,
.clearMemoryBtn {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Clear Note should be darker warning style. */
.clearMemoryBtn,
button.clearMemoryBtn {
  color: #ffb6b6 !important;
  background: linear-gradient(180deg, rgba(55, 12, 18, 0.92), rgba(20, 5, 8, 0.96)) !important;
  border: 1px solid rgba(255, 130, 130, 0.44) !important;
  text-shadow: none !important;
  filter: none !important;
}

.clearMemoryBtn:hover,
.clearMemoryBtn:focus,
button.clearMemoryBtn:hover,
button.clearMemoryBtn:focus {
  color: #ffe1e1 !important;
  background: linear-gradient(180deg, rgba(80, 18, 26, 0.96), rgba(30, 8, 12, 0.98)) !important;
  border-color: rgba(255, 165, 165, 0.62) !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 820px) {
  .databaseSummary {
    grid-template-columns: 1fr !important;
  }

  .databaseSummaryActions {
    justify-content: flex-start;
  }
}


/* =========================================================
   LOCAL TOOLS ON BROWSE LINE
   =========================================================

   Moves:
   - ★ Favorites
   - ✓ Owned
   - 📝 Notes

   out of the category filter block and onto the Browse the Vault
   header row.
========================================================= */

.browseHeaderRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 14px !important;
}

.browseHeaderRow h2 {
  margin: 0 !important;
}

.browseLocalTools {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.browseLocalTools .filterBtn {
  margin: 0 !important;
}

/* Local tools must be visible in this local copy. */
.databaseFilter,
.favoriteFilter,
.ownedFilter,
.notesFilter {
  display: inline-flex !important;
}

/* Keep the category filter panel from looking crowded. */
.filterPanel .databaseFilter,
.filterPanel .favoriteFilter,
.filterPanel .ownedFilter,
.filterPanel .notesFilter {
  display: none !important;
}

/* But when those buttons live in the browse row, show them. */
.browseLocalTools .databaseFilter,
.browseLocalTools .favoriteFilter,
.browseLocalTools .ownedFilter,
.browseLocalTools .notesFilter {
  display: inline-flex !important;
}

/* Keep local card badges and local note box active. */
.cardLocalBadges {
  display: flex !important;
}

.localDatabaseBox {
  display: block !important;
}

.databaseSummary {
  display: grid !important;
}

/* No glow on the moved buttons. */
.browseLocalTools .filterBtn,
.browseLocalTools .filterBtn:hover,
.browseLocalTools .filterBtn:focus,
.browseLocalTools .filterBtn.active {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (max-width: 760px) {
  .browseHeaderRow {
    align-items: flex-start !important;
  }

  .browseLocalTools {
    justify-content: flex-start !important;
  }
}


/* =========================================================
   LOCAL TOOL BUTTON COUNTS
   =========================================================

   Restores the numbers on:
   - ★ Favorites
   - ✓ Owned
   - 📝 Notes

   These counts come from the same localStorage stats used by
   My Local Vault Database.
========================================================= */

.browseLocalTools .filterBtn {
  gap: 7px !important;
}

.localToolLabel {
  display: inline-flex;
  align-items: center;
}

.localToolCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;

  color: #041b10;
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2));
  border: 1px solid rgba(0, 0, 0, 0.22);

  font-size: 11px;
  font-weight: 950;
  line-height: 1;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.browseLocalTools .filterBtn.active .localToolCount {
  color: #050505;
  background: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   LOCAL TOOL COUNT DISPLAY HARD FIX
   =========================================================

   Fixes:
   - Favorites0 / Owned0 / Notes0 stuck together.
   - Counts stuck at 0 even when cards show badges.
   - Stray local buttons mixed into category filters.
========================================================= */

.browseHeaderRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 14px !important;
}

.browseHeaderRow h2 {
  margin: 0 !important;
}

.browseLocalTools {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.browseLocalTools .filterBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Hide any duplicate local buttons that are accidentally still inside category filters. */
.filterPanel > .databaseFilter,
.filterPanel > .favoriteFilter,
.filterPanel > .ownedFilter,
.filterPanel > .notesFilter {
  display: none !important;
}

/* But show the real Browse-line local tools. */
.browseLocalTools .databaseFilter,
.browseLocalTools .favoriteFilter,
.browseLocalTools .ownedFilter,
.browseLocalTools .notesFilter {
  display: inline-flex !important;
}

.localToolLabel {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.localToolCount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;

  color: #041b10 !important;
  background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2)) !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.browseLocalTools .filterBtn.active .localToolCount {
  color: #050505 !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

/* Keep local card badges and local note box active. */
.cardLocalBadges {
  display: flex !important;
}

.localDatabaseBox {
  display: block !important;
}

.databaseSummary {
  display: grid !important;
}


/* =========================================================
   WIDE MEMORY + FUN FACTS DETAIL LAYOUT
   =========================================================

   Goal:
   - Keep all detail sections.
   - Keep Favorite / Owned / Notes.
   - Keep JayG Retro Memory.
   - Keep Fun Facts.
   - Make the popup wider so Retro Memory cards are not so tall.
   - Put JayG Retro Memory and Fun Facts side-by-side on wide screens.

   Connected files:
   - app.js builds the popup in openItemDetail()
   - styles.css controls the layout here
========================================================= */

/* Outer overlay can scroll if a small screen needs it. */
.detailOverlay {
  padding: 16px !important;
  align-items: flex-start !important;
  overflow-y: auto !important;
}

/* Main popup: wider than before, but still fits normal screens. */
.detailPanel {
  width: min(1320px, 97vw) !important;
  max-height: 92vh !important;
  margin: 8px auto !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

/*
  Main popup grid:
  - left image column
  - right details column
*/
.detailLayout {
  display: grid !important;
  grid-template-columns: minmax(340px, 450px) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  padding: 24px !important;
}

/* Image stays big enough to enjoy, but does not force height. */
.detailMedia {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: sticky !important;
  top: 0 !important;
}

.detailImage,
.detailMedia img {
  width: 100% !important;
  max-width: 450px !important;
  max-height: 430px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.detailImagePlaceholder {
  width: 100% !important;
  max-width: 450px !important;
  min-height: 300px !important;
  max-height: 430px !important;
  border-radius: 18px !important;
}

/*
  Right-side detail content becomes a small grid.

  Top information spans full width:
  - category badge
  - title
  - year/decade/company
  - description
  - local notes box

  Bottom information can split:
  - JayG Retro Memory
  - Fun Facts
*/
.detailContent {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  align-items: start !important;
  padding-right: 8px !important;
}

/* These top sections always use the full right-side width. */
.detailBadge,
.detailContent h2,
.detailMeta,
.detailDescription,
.localDatabaseBox {
  grid-column: 1 / -1 !important;
}

/* Title/meta tighter but still readable. */
.detailBadge {
  width: fit-content !important;
  margin-bottom: 10px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.detailContent h2 {
  margin: 0 0 13px !important;
  font-size: clamp(30px, 3.1vw, 42px) !important;
  line-height: 1.04 !important;
}

.detailMeta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 13px !important;
}

.detailMeta div {
  padding: 10px 12px !important;
  border-radius: 13px !important;
}

.detailMeta span {
  font-size: 11px !important;
}

.detailMeta strong {
  font-size: 14px !important;
}

.detailDescription {
  margin: 0 0 13px !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
}

/* Local notes stays full width and fully usable. */
.localDatabaseBox {
  margin-top: 8px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.localDatabaseHeader {
  margin-bottom: 10px !important;
}

.localDatabaseHeader h4 {
  margin-bottom: 3px !important;
  font-size: 18px !important;
}

.localDatabaseHeader p {
  font-size: 12px !important;
}

.localDatabaseStatus {
  padding: 5px 9px !important;
  font-size: 11px !important;
}

.localToggleRow {
  gap: 10px !important;
  margin: 10px 0 !important;
}

.localToggle {
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--rv-accent-border) !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

.memoryNoteLabel {
  margin: 10px 0 6px !important;
}

.memoryNoteInput {
  min-height: 72px !important;
  max-height: 110px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.localDatabaseActions {
  gap: 10px !important;
  margin-top: 10px !important;
}

.saveMemoryBtn,
.clearMemoryBtn {
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/*
  The main fix:
  JayG Retro Memory and Fun Facts sit beside each other on wide screens.
*/
.jaygMemoryBox,
.detailFacts {
  margin-top: 14px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  height: fit-content !important;
}

.jaygMemoryBox {
  grid-column: 1 / 2 !important;
}

.jaygMemoryBox + .detailFacts {
  grid-column: 2 / 3 !important;
}

/*
  If there is no JayG Retro Memory box, Fun Facts should use full width.
  Modern browsers support :has(). If unsupported, it simply stays readable.
*/
.detailContent:not(:has(.jaygMemoryBox)) .detailFacts {
  grid-column: 1 / -1 !important;
}

.detailFacts h4,
.jaygMemoryBox h4 {
  margin: 0 0 9px !important;
  font-size: 18px !important;
}

.jaygMemoryBox p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
}

.detailFacts ul {
  margin: 0 !important;
  padding-left: 18px !important;
}

.detailFacts li {
  margin-bottom: 7px !important;
  line-height: 1.42 !important;
}

/* Cleaner close button. */
.detailCloseBtn {
  width: 40px !important;
  height: 40px !important;
  font-size: 24px !important;
  box-shadow: none !important;
}

/* Popup scrollbar only appears when needed. */
.detailPanel {
  scrollbar-width: thin !important;
  scrollbar-color: var(--rv-accent) rgba(0, 0, 0, 0.25) !important;
}

.detailPanel::-webkit-scrollbar {
  width: 9px !important;
}

.detailPanel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 999px !important;
}

.detailPanel::-webkit-scrollbar-thumb {
  background: var(--rv-accent) !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 0, 0, 0.25) !important;
}

/* Medium screens: still two-column popup, but stack memory/facts. */
@media (max-width: 1100px) {
  .detailPanel {
    width: min(980px, 96vw) !important;
  }

  .detailLayout {
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  .detailContent {
    grid-template-columns: 1fr !important;
  }

  .jaygMemoryBox,
  .jaygMemoryBox + .detailFacts,
  .detailFacts {
    grid-column: 1 / -1 !important;
  }
}

/* Tablet/mobile: stack image above content safely. */
@media (max-width: 850px) {
  .detailPanel {
    width: 96vw !important;
    max-height: 92vh !important;
    margin: 10px auto !important;
  }

  .detailLayout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .detailMedia {
    position: static !important;
  }

  .detailImage,
  .detailMedia img,
  .detailImagePlaceholder {
    max-width: 100% !important;
    max-height: 310px !important;
  }

  .detailContent {
    padding-right: 0 !important;
  }
}

@media (max-width: 620px) {
  .detailOverlay {
    padding: 10px !important;
  }

  .detailLayout {
    padding: 14px !important;
  }

  .detailMeta {
    grid-template-columns: 1fr !important;
  }

  .localToggleRow,
  .localDatabaseActions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .localToggle,
  .saveMemoryBtn,
  .clearMemoryBtn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* =========================================================
   OPTIONAL MEMORY CARD CREDIT NOTE
   ========================================================= */
.suggestionCreditNote {
  margin: 12px 0 0;
  padding: 12px 13px;
  border-radius: 14px;
  color: #d8dfda;
  line-height: 1.45;
  background: rgba(247, 211, 107, 0.075);
  border: 1px solid rgba(247, 211, 107, 0.20);
  font-size: 13px;
}

.suggestionCreditNote strong {
  color: #f7d36b;
}

.suggestionCreditNote em {
  color: #7dffbd;
  font-style: normal;
  font-weight: bold;
}


/* =========================================================
   REQUESTED BY BADGE
   =========================================================
   Shows public first-name credit only when a vault item has:
   "requestedBy": "Johnny"
========================================================= */
.requestedByBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 12px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #f4f4f4;
  background: rgba(255, 182, 220, 0.08);
  border: 1px solid rgba(255, 182, 220, 0.28);
  box-shadow: 0 0 18px rgba(255, 182, 220, 0.08);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
}

.requestedByBadge strong {
  color: #ffb6dc;
}

.requestedByIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #041b10;
  background: linear-gradient(135deg, #ffb6dc, #7dffbd);
  font-size: 12px;
  font-weight: bold;
  flex: 0 0 auto;
}

.detailContent > .requestedByBadge {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 182, 220, 0.24);
}

.card .requestedByBadge {
  margin-top: 0;
  margin-bottom: 12px;
}


/* =========================================================
   MAIN SITE LOCAL VISITOR TOOLS ENABLED
   =========================================================
   Favorites, Owned, and Notes are browser-local visitor tools.
   They do not expose private server database info and do not need accounts.
========================================================= */
.browseLocalTools,
.cardLocalBadges,
.localDatabaseBox {
  display: initial;
}

.browseLocalTools {
  display: flex;
}

.cardLocalBadges {
  display: flex;
}

.localDatabaseBox {
  display: block;
}

/*
  =========================================================
  JayG Retro Vault 42
  LIVE SITE REQUESTED-BY STYLE FIX

  Purpose:
  - Removes the boxed/pill look from Requested by badges.
  - Makes card and detail popup match the clean local version.
  - Keeps the heart icon and the requested person's first name.
  - Safe to paste at the VERY BOTTOM of styles.css.

  This does not change app.js or vault-data.json.
  =========================================================
*/

/* Base requested-by row: clean inline text, no box */
.requestedByBadge {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 8px 0 6px !important;
  padding: 0 !important;

  color: var(--rv-text, #f4f4f4) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Heart icon: no circle/pill, just the heart */
.requestedByIcon {
  display: inline !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--rv-accent, #7dffbd) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Keep the name bold, but not a different badge color */
.requestedByBadge strong {
  color: inherit !important;
  font-weight: 900 !important;
}

/* Small vault card version */
.vaultCard .requestedByBadge,
.card .requestedByBadge,
.vaultItem .requestedByBadge {
  margin: 7px 0 4px !important;
  font-size: 18px !important;
}

/* Detail popup version */
.detailInfo .requestedByBadge,
.detailContent .requestedByBadge,
.detailMain .requestedByBadge,
.detailText .requestedByBadge {
  margin: 10px 0 6px !important;
  font-size: 18px !important;
}

/* Mobile: let it wrap only if the card gets very narrow */
@media (max-width: 520px) {
  .requestedByBadge {
    flex-wrap: wrap !important;
    font-size: 17px !important;
  }

  .requestedByIcon {
    font-size: 17px !important;
  }
}

/*
  =========================================================
  JayG Retro Vault 42
  FINAL LIVE SITE CLEANUP PATCH

  What this fixes:
  - Keeps Requested by badges clean and unboxed.
  - Keeps the duplicate lower Suggest an Item button hidden.
  - Restores 5 cards per row on wide desktop screens.
  - Stops one requested/filter result from stretching into a huge banner.
  - Removes the webkit line-clamp rules that VS Code can flag.
  =========================================================
*/

/*
  Hide only the lower search-row Suggest an Item button.
  The sticky/nav button at the top uses #navSuggestItemBtn and stays visible.
*/
#suggestItemBtn {
  display: none !important;
}

/*
  Requested by row:
  clean local-style text, not a big boxed pill.
*/
.requestedByBadge {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 8px 0 6px !important;
  padding: 0 !important;

  color: var(--rv-text, #f4f4f4) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.requestedByIcon {
  display: inline !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--rv-accent, #7dffbd) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.requestedByBadge strong {
  color: inherit !important;
  font-weight: 900 !important;
}

.card .requestedByBadge {
  margin: 7px 0 5px !important;
  font-size: 18px !important;
}

.detailContent .requestedByBadge {
  margin: 10px 0 8px !important;
  font-size: 18px !important;
}

/*
  Requested filter button belongs with Browse the Vault filter buttons.
*/
.requestedFilterBtn {
  white-space: nowrap !important;
}

/*
  Main card grid:
  Wide desktop gets 5 cards per row.
  This overrides older auto-fit / single-card spotlight rules.
*/
#vaultGrid,
.grid,
.vaultGrid,
.vaultCollectionGrid,
.cardGrid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 13px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

/*
  Do not let a single requested result stretch across the page.
*/
#vaultGrid.singleCardMode,
.grid.singleCardMode,
.vaultGrid.singleCardMode,
.vaultCollectionGrid.singleCardMode,
.cardGrid.singleCardMode {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
}

#vaultGrid > *,
.grid > *,
.vaultGrid > *,
.vaultCollectionGrid > *,
.cardGrid > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#vaultGrid.singleCardMode .card,
.grid.singleCardMode .card,
.vaultGrid.singleCardMode .card,
.vaultCollectionGrid.singleCardMode .card,
.cardGrid.singleCardMode .card {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  padding: 14px !important;
}

/*
  Normal card image size.
  This prevents one filtered result from turning into a banner image.
*/
.card img,
.cardImagePlaceholder,
#vaultGrid .card img,
.grid .card img,
.vaultGrid .card img {
  width: 100% !important;
  height: 118px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/*
  Description clamp without webkit-only line-clamp syntax.
  This avoids the yellow warning style messages some editors show.
*/
.card .desc,
#vaultGrid .card .desc,
.grid .card .desc,
.vaultGrid .card .desc {
  display: block !important;
  max-height: calc(12.5px * 1.38 * 3) !important;
  overflow: hidden !important;
}

/*
  Medium desktop: 4 cards.
*/
@media (max-width: 1180px) {
  #vaultGrid,
  .grid,
  .vaultGrid,
  .vaultCollectionGrid,
  .cardGrid,
  #vaultGrid.singleCardMode,
  .grid.singleCardMode,
  .vaultGrid.singleCardMode,
  .vaultCollectionGrid.singleCardMode,
  .cardGrid.singleCardMode {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/*
  Smaller screens: 3 cards.
*/
@media (max-width: 920px) {
  #vaultGrid,
  .grid,
  .vaultGrid,
  .vaultCollectionGrid,
  .cardGrid,
  #vaultGrid.singleCardMode,
  .grid.singleCardMode,
  .vaultGrid.singleCardMode,
  .vaultCollectionGrid.singleCardMode,
  .cardGrid.singleCardMode {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/*
  Large phones: 2 cards.
*/
@media (max-width: 680px) {
  #vaultGrid,
  .grid,
  .vaultGrid,
  .vaultCollectionGrid,
  .cardGrid,
  #vaultGrid.singleCardMode,
  .grid.singleCardMode,
  .vaultGrid.singleCardMode,
  .vaultCollectionGrid.singleCardMode,
  .cardGrid.singleCardMode {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card img,
  .cardImagePlaceholder,
  #vaultGrid .card img,
  .grid .card img,
  .vaultGrid .card img {
    height: 105px !important;
  }
}

/*
  Small phones: 1 card.
*/
@media (max-width: 430px) {
  #vaultGrid,
  .grid,
  .vaultGrid,
  .vaultCollectionGrid,
  .cardGrid,
  #vaultGrid.singleCardMode,
  .grid.singleCardMode,
  .vaultGrid.singleCardMode,
  .vaultCollectionGrid.singleCardMode,
  .cardGrid.singleCardMode {
    grid-template-columns: 1fr !important;
  }
}

/*
  =========================================================
  JayG Retro Vault 42
  VISITOR MEMORIES CLEAN STYLE FIX
  Added to current styles.css

  What this fixes:
  - Visitor Memories becomes a real styled Retro Vault card.
  - First name and Memory fields stack correctly.
  - Share Memory button lines up correctly.
  - Close Memory Card stays under Visitor Memories.
  =========================================================
*/

.publicMemoryBox {
  display: block !important;
  padding: 18px !important;
  border-radius: 18px !important;
  margin: 18px 0 0 !important;
  background:
    radial-gradient(circle at top left, rgba(125, 255, 189, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(125, 255, 189, 0.22) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
}

.publicMemoryHeader {
  margin-bottom: 12px !important;
}

.publicMemoryHeader h4 {
  margin: 0 0 5px !important;
  color: var(--rv-accent, #7dffbd) !important;
  font-size: 18px !important;
}

.publicMemoryHeader p {
  margin: 0 !important;
  color: var(--rv-muted, #c7d2c9) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.publicMemoryList {
  display: grid !important;
  gap: 10px !important;
  margin: 12px 0 14px !important;
}

.publicMemoryItem,
.publicMemoryEmpty {
  display: block !important;
  padding: 12px 13px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.publicMemoryItem strong {
  display: block !important;
  color: var(--rv-title, #f7d36b) !important;
  margin-bottom: 6px !important;
}

.publicMemoryItem p,
.publicMemoryEmpty {
  color: var(--rv-muted, #c7d2c9) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

.publicMemoryForm {
  display: grid !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.publicMemoryField {
  display: grid !important;
  gap: 7px !important;
}

.publicMemoryField label {
  display: block !important;
  color: var(--rv-title, #f7d36b) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

.publicMemoryField label span {
  color: var(--rv-muted, #c7d2c9) !important;
  font-weight: normal !important;
}

.publicMemoryForm input,
.publicMemoryForm textarea {
  display: block !important;
  width: 100% !important;
  border-radius: 14px !important;
  border: 1px solid var(--rv-accent-border, rgba(0, 255, 140, 0.30)) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: var(--rv-text, #f4f4f4) !important;
  padding: 11px 12px !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  outline: none !important;
}

.publicMemoryForm input::placeholder,
.publicMemoryForm textarea::placeholder {
  color: rgba(199, 210, 201, 0.58) !important;
}

.publicMemoryForm textarea {
  resize: vertical !important;
  min-height: 92px !important;
  line-height: 1.45 !important;
}

.publicMemoryActions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.publicMemorySubmitBtn {
  padding: 11px 14px !important;
  font-size: 13px !important;
}

.publicMemoryStatus {
  color: var(--rv-muted, #c7d2c9) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

.publicMemoryStatus.success {
  color: var(--rv-accent, #7dffbd) !important;
}

.publicMemoryStatus.error {
  color: #ffb6b6 !important;
}

.publicMemoryStatus.working {
  color: var(--rv-title, #f7d36b) !important;
}

/*
  Public Like button safety style.
  This keeps the like button visible and neat across themes.
*/
.publicLikeBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: fit-content !important;
  margin: 8px 0 10px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  color: var(--rv-button-text, #111) !important;
  background: linear-gradient(
    135deg,
    var(--rv-accent, #7dffbd),
    var(--rv-accent-2, #f7d36b)
  ) !important;
  border: 1px solid var(--rv-border, rgba(247, 211, 107, 0.38)) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.publicLikeBtn:hover {
  transform: translateY(-1px) !important;
}

.publicLikeBtn:disabled {
  opacity: 0.72 !important;
  cursor: wait !important;
}

.publicLikeBtn-detail {
  margin: 2px 0 14px !important;
}

.publicLikeHeart {
  font-size: 15px !important;
}

.publicLikeCount {
  min-width: 22px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  color: var(--rv-accent, #7dffbd) !important;
  background: rgba(0, 0, 0, 0.26) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

/* =========================================================
   RETRO VAULT PART 13 — FACEBOOK MERGE 01
   Appears only after a visitor uses the existing Retro Vault
   Like button. These classes are intentionally separate so
   DEV Visual Editor can style them individually or globally.
========================================================= */
.publicLikeArea {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.retroFacebookPrompt[hidden] {
  display: none !important;
}

.retroFacebookPrompt {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-width: 440px !important;
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--rv-border, rgba(247, 211, 107, 0.38)) !important;
  background: rgba(0, 0, 0, 0.22) !important;
}

.retroFacebookMessage {
  display: flex !important;
  flex: 1 1 210px !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: var(--rv-text, #f4f4f4) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.retroFacebookMessage strong {
  color: var(--rv-title, #f7d36b) !important;
  font-size: 13px !important;
}

.retroFacebookFollowBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--rv-border, rgba(247, 211, 107, 0.38)) !important;
  background: var(--rv-accent, #7dffbd) !important;
  color: var(--rv-button-text, #111) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.retroFacebookFollowBtn:hover,
.retroFacebookFollowBtn:focus-visible {
  text-decoration: none !important;
}

@media (max-width: 560px) {
  .publicLikeArea {
    width: 100% !important;
  }

  .retroFacebookPrompt {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .retroFacebookFollowBtn {
    width: 100% !important;
  }
}

/*
  Bottom close button belongs after Visitor Memories.
*/
.detailBottomActions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 18px 0 2px !important;
  padding: 4px 0 0 !important;
}

.detailBottomCloseBtn {
  border-radius: 999px !important;
  padding: 12px 18px !important;
  color: var(--rv-button-text, #111) !important;
  background: linear-gradient(
    135deg,
    var(--rv-accent, #7dffbd),
    var(--rv-accent-2, #f7d36b)
  ) !important;
  border: 1px solid var(--rv-border, rgba(247, 211, 107, 0.38)) !important;
  font-weight: bold !important;
  cursor: pointer !important;
}

.detailBottomCloseBtn:hover {
  transform: translateY(-1px) !important;
}

/* =========================================================
   JAYG RETRO VAULT 42 — SAFE LIVE PATCH
   Adds JayG Projects Home link styling and fixes Visitor
   Memories readability/scrolling. CSS only.
========================================================= */

.siteNavHomeLink {
  color: #f7d36b;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(247, 211, 107, 0.28);
  background: rgba(247, 211, 107, 0.08);
  white-space: nowrap;
}

.siteNavHomeLink:hover {
  color: #041b10;
  background: linear-gradient(135deg, #7dffbd, #f7d36b);
}

.publicMemoryBox {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 22px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(247, 211, 107, 0.26) !important;
}

.publicMemoryHeader {
  display: block !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.publicMemoryHeader h4 {
  margin: 0 0 6px !important;
  color: #f7d36b !important;
  font-size: 20px !important;
}

.publicMemoryHeader p {
  margin: 0 !important;
  color: #c7d2c9 !important;
  line-height: 1.45 !important;
}

.publicMemoryList {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 8px 4px 0 !important;
  margin: 12px 0 16px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #f7d36b rgba(0, 0, 0, 0.35) !important;
}

.publicMemoryList::-webkit-scrollbar {
  width: 10px !important;
}

.publicMemoryList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 999px !important;
}

.publicMemoryList::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f7d36b, #7dffbd) !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 0, 0, 0.35) !important;
}

.publicMemoryItem,
.publicMemoryEmpty {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 13px 14px !important;
  border-radius: 15px !important;
  background: rgba(0, 0, 0, 0.26) !important;
  border: 1px solid rgba(125, 255, 189, 0.20) !important;
}

.publicMemoryItem strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #7dffbd !important;
  font-size: 14px !important;
}

.publicMemoryItem p,
.publicMemoryEmpty {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #f4f4f4 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.publicMemoryForm,
.publicMemoryField,
.publicMemoryNameInput,
.publicMemoryTextInput {
  width: 100% !important;
  max-width: 100% !important;
}

.publicMemoryTextInput {
  min-height: 110px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

@media (max-width: 720px) {
  .siteNavInner {
    justify-content: center;
  }

  .siteNavHomeLink {
    order: 3;
    width: 100%;
    text-align: center;
  }
}

/*
  =====================================================
  RETRO VAULT BUTTON CLEANUP + BACK TO TOP RESTORE
  Patch date: 2026-07-29

  Purpose:
  - Remove glow, gradient, shine, animation, hover lift, and text-wash effects from buttons.
  - Use solid high-contrast colors so text is easier to read on desktop, phone, and iPad.
  - Restore a simple fixed Back to Top button.

  Safety:
  - This CSS-only override does not change the navbar structure, card data, Big Wheel layout,
    Mystery Vault Challenge logic, PHP, database, or admin login code.
  =====================================================
*/

button,
.button,
.filterBtn,
.siteNavSuggestBtn,
.siteNavHomeLink,
.backToTopBtn,
.backToMarqueeBtn,
.databaseBackupBtn,
.exportDatabaseBtn,
.importDatabaseBtn,
.saveMemoryBtn,
.clearMemoryBtn,
.localToggle,
.detailCloseBtn,
.suggestionModalClose,
.suggestionModalPrimary,
.suggestionModalSecondary,
.suggestionCategoryButton,
.suggestionCategoryOption,
.mysteryQuestionBtn,
.mysteryResetBtn,
body[class*="theme-"] button,
body[class*="theme-"] .filterBtn,
body[class*="theme-"] .siteNavSuggestBtn,
body[class*="theme-"] .siteNavHomeLink,
body[class*="theme-"] .backToTopBtn,
body[class*="theme-"] .backToMarqueeBtn,
body[class*="theme-"] .databaseBackupBtn,
body[class*="theme-"] .exportDatabaseBtn,
body[class*="theme-"] .importDatabaseBtn,
body[class*="theme-"] .saveMemoryBtn,
body[class*="theme-"] .clearMemoryBtn,
body[class*="theme-"] .localToggle,
body[class*="theme-"] .detailCloseBtn,
body[class*="theme-"] .suggestionModalClose,
body[class*="theme-"] .suggestionModalPrimary,
body[class*="theme-"] .suggestionModalSecondary,
body[class*="theme-"] .suggestionCategoryButton,
body[class*="theme-"] .suggestionCategoryOption,
body[class*="theme-"] .mysteryQuestionBtn,
body[class*="theme-"] .mysteryResetBtn {
  background: #f7d36b !important;
  background-image: none !important;
  color: #111111 !important;
  border: 2px solid #f7d36b !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

button:hover,
.button:hover,
.filterBtn:hover,
.siteNavSuggestBtn:hover,
.siteNavHomeLink:hover,
.backToTopBtn:hover,
.backToMarqueeBtn:hover,
.databaseBackupBtn:hover,
.exportDatabaseBtn:hover,
.importDatabaseBtn:hover,
.saveMemoryBtn:hover,
.clearMemoryBtn:hover,
.localToggle:hover,
.detailCloseBtn:hover,
.suggestionModalClose:hover,
.suggestionModalPrimary:hover,
.suggestionModalSecondary:hover,
.suggestionCategoryButton:hover,
.suggestionCategoryOption:hover,
.mysteryQuestionBtn:hover,
.mysteryResetBtn:hover,
body[class*="theme-"] button:hover,
body[class*="theme-"] .filterBtn:hover,
body[class*="theme-"] .siteNavSuggestBtn:hover,
body[class*="theme-"] .siteNavHomeLink:hover,
body[class*="theme-"] .backToTopBtn:hover,
body[class*="theme-"] .backToMarqueeBtn:hover,
body[class*="theme-"] .databaseBackupBtn:hover,
body[class*="theme-"] .exportDatabaseBtn:hover,
body[class*="theme-"] .importDatabaseBtn:hover,
body[class*="theme-"] .saveMemoryBtn:hover,
body[class*="theme-"] .clearMemoryBtn:hover,
body[class*="theme-"] .localToggle:hover,
body[class*="theme-"] .detailCloseBtn:hover,
body[class*="theme-"] .suggestionModalClose:hover,
body[class*="theme-"] .suggestionModalPrimary:hover,
body[class*="theme-"] .suggestionModalSecondary:hover,
body[class*="theme-"] .suggestionCategoryButton:hover,
body[class*="theme-"] .suggestionCategoryOption:hover,
body[class*="theme-"] .mysteryQuestionBtn:hover,
body[class*="theme-"] .mysteryResetBtn:hover {
  background: #f7d36b !important;
  background-image: none !important;
  color: #111111 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

button.secondary,
.suggestionModalSecondary,
.importDatabaseBtn,
.clearMemoryBtn,
.localToggle,
.filterBtn,
body[class*="theme-"] button.secondary,
body[class*="theme-"] .suggestionModalSecondary,
body[class*="theme-"] .importDatabaseBtn,
body[class*="theme-"] .clearMemoryBtn,
body[class*="theme-"] .localToggle,
body[class*="theme-"] .filterBtn {
  background: #143b28 !important;
  background-image: none !important;
  color: #fff4b8 !important;
  border-color: #fff4b8 !important;
}

.filterBtn.active,
.filterBtn.databaseFilter.active,
.filterBtn.mysteryFilter.active,
.suggestionCategoryOption.selected,
.mysteryQuestionBtn.asked,
body[class*="theme-"] .filterBtn.active,
body[class*="theme-"] .filterBtn.databaseFilter.active,
body[class*="theme-"] .filterBtn.mysteryFilter.active,
body[class*="theme-"] .suggestionCategoryOption.selected,
body[class*="theme-"] .mysteryQuestionBtn.asked {
  background: #7dffbd !important;
  background-image: none !important;
  color: #061015 !important;
  border-color: #7dffbd !important;
}

button:disabled,
.mysteryQuestionBtn:disabled,
body[class*="theme-"] button:disabled,
body[class*="theme-"] .mysteryQuestionBtn:disabled {
  background: #575757 !important;
  background-image: none !important;
  color: #f2f2f2 !important;
  border-color: #777777 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

button::before,
button::after,
.filterBtn::before,
.filterBtn::after,
.backToTopBtn::before,
.backToTopBtn::after,
.backToMarqueeBtn::before,
.backToMarqueeBtn::after,
.siteNavSuggestBtn::before,
.siteNavSuggestBtn::after,
.mysteryQuestionBtn::before,
.mysteryQuestionBtn::after,
.mysteryResetBtn::before,
.mysteryResetBtn::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  transition: none !important;
}

.backToTopBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.backToTopBtn:focus-visible,
button:focus-visible,
.filterBtn:focus-visible,
.siteNavSuggestBtn:focus-visible,
.siteNavHomeLink:focus-visible,
.mysteryQuestionBtn:focus-visible,
.mysteryResetBtn:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  .backToTopBtn {
    right: 12px;
    bottom: 12px;
    min-width: 116px;
    min-height: 42px;
    padding: 10px 13px;
    font-size: 14px;
  }
}

/* Clean no-effect button for hidden Mystery Vault placeholder */
.mysteryComingSoonBtn,
.mysteryComingSoonBtn:hover,
.mysteryComingSoonBtn:focus,
.mysteryComingSoonBtn:active {
  display: inline-block;
  background: #ffe66d !important;
  background-image: none !important;
  color: #06150f !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Kills shine/glow pseudo effects if any global button style tries to add them */
.mysteryComingSoonBtn::before,
.mysteryComingSoonBtn::after {
  content: none !important;
  display: none !important;
}

/*
  =====================================================
  MYSTERY COMING SOON BANNER — NO EFFECTS FIX
  Patch date: 2026-07-30

  Purpose:
  - Keeps the new Mystery Coming Soon banner visible.
  - Removes glow, hover lift, shine, gradient wash, animation, and pointer behavior.
  - The hidden Mystery Vault Challenge code stays saved for later.
  =====================================================
*/
.mysteryTitleBanner,
.mysteryTitleBanner:hover,
.mysteryTitleBanner:focus,
.mysteryTitleBanner:active,
body[class*="theme-"] .mysteryTitleBanner,
body[class*="theme-"] .mysteryTitleBanner:hover,
body[class*="theme-"] .mysteryTitleBanner:focus,
body[class*="theme-"] .mysteryTitleBanner:active {
  background: rgba(0, 255, 140, 0.075) !important;
  background-image: none !important;
  color: #d8dfda !important;
  border: 1px solid rgba(247, 211, 107, 0.24) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  cursor: default !important;
}

.mysteryTitleBadge,
body[class*="theme-"] .mysteryTitleBadge {
  background: #ffe66d !important;
  background-image: none !important;
  color: #06150f !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

.mysteryTitleBanner::before,
.mysteryTitleBanner::after,
.mysteryTitleBadge::before,
.mysteryTitleBadge::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}



/* =========================================================
   Retro Vault Ver 7 - Big Wheel YouTube button
   Added only to detail cards that include youtubeUrl data.
   Solid, high-contrast styling with no effects.
========================================================= */
.detailVideoAction {
  margin: 18px 0;
}

.detailYouTubeBtn,
body[class*="theme-"] .detailYouTubeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  background: #c90000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.25;
}

.detailYouTubeBtn:hover,
.detailYouTubeBtn:focus,
.detailYouTubeBtn:active,
body[class*="theme-"] .detailYouTubeBtn:hover,
body[class*="theme-"] .detailYouTubeBtn:focus,
body[class*="theme-"] .detailYouTubeBtn:active {
  background: #a80000 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

.detailYouTubeBtn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.detailYouTubeIcon {
  flex: 0 0 auto;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .detailYouTubeBtn,
  body[class*="theme-"] .detailYouTubeBtn {
    width: 100%;
  }
}

/* =========================================================
   RECENTLY ADDED CARD — GLOBAL BUTTON STYLE OVERRIDE

   Recently Added cards are real buttons for keyboard access.
   Retro Vault's global button cleanup intentionally paints every
   button gold, so this final rule restores the dark card appearance.
========================================================= */
.recentlyAddedCard,
.recentlyAddedCard:hover,
.recentlyAddedCard:focus,
.recentlyAddedCard:active,
body[class*="theme-"] .recentlyAddedCard,
body[class*="theme-"] .recentlyAddedCard:hover,
body[class*="theme-"] .recentlyAddedCard:focus,
body[class*="theme-"] .recentlyAddedCard:active {
  background: var(--rv-card, rgba(12, 20, 15, 0.92)) !important;
  background-image: none !important;
  color: var(--rv-text, #f4f4f4) !important;
  border: 1px solid var(--rv-accent-border, rgba(0, 255, 140, 0.35)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

.recentlyAddedCard:hover,
body[class*="theme-"] .recentlyAddedCard:hover {
  border-color: var(--rv-accent, #7dffbd) !important;
}

.recentlyAddedCard:focus-visible,
body[class*="theme-"] .recentlyAddedCard:focus-visible {
  outline: 3px solid var(--rv-accent, #7dffbd) !important;
  outline-offset: 3px !important;
}

.recentlyAddedRequestedBy {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--rv-text, #f4f4f4);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recentlyAddedRequestedBy > span {
  color: var(--rv-accent, #7dffbd);
  font-weight: 900;
}

.recentlyAddedRequestedBy strong {
  color: var(--rv-title, #f7d36b);
  font-weight: 900;
}


/* =========================================================
   RETRO VAULT — REQUESTED BY READABILITY PATCH
   Date: 2026-08-11

   Requested by:
   - slightly larger on Recently Added cards
   - visitor name is always yellow
   - regular card/detail visitor name is also yellow
   - no glow, animation, gradient, or hover effect added
========================================================= */

/* Recently Added row */
.recentlyAddedRequestedBy {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.recentlyAddedRequestedBy > span {
  font-size: 13px !important;
}

.recentlyAddedRequestedBy strong {
  color: #ffd54a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Normal Vault cards and detail popup */
.requestedByBadge {
  font-size: 18px !important;
}

.requestedByBadge strong {
  color: #ffd54a !important;
  font-weight: 900 !important;
}

.card .requestedByBadge strong {
  color: #ffd54a !important;
  font-size: 18px !important;
}

.detailContent .requestedByBadge strong {
  color: #ffd54a !important;
  font-size: 19px !important;
}

@media (max-width: 520px) {
  .recentlyAddedRequestedBy {
    font-size: 12px !important;
  }

  .recentlyAddedRequestedBy strong {
    font-size: 13px !important;
  }
}
/* Retro Vault themed dropdowns */
select,
.themeSelect {
  background: var(--panel, #0f3525);
  color: var(--text, #ffffff);
  border: 1px solid var(--line, #35c57b);
}

/* Dropdown option list */
select option,
.themeSelect option {
  background: var(--panel, #0f3525);
  color: var(--text, #ffffff);
}
/* =========================================================
   RETRO VAULT — DEV SUBTITLE POINTER
   Added 2026-08-20

   Purpose:
   - The entire subtitle line shows a normal hand pointer.
   - No underline, color change, glow, or hover hint is added.
   - The hidden DEV trigger on the first "A" can inherit the same pointer.
========================================================= */
.subtitle {
  cursor: pointer !important;
}

#devModeTrigger,
#devModeTrigger:hover,
#devModeTrigger:focus,
#devModeTrigger:active {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: inherit !important;
  text-decoration: none !important;
  cursor: inherit !important;
  transform: none !important;
  filter: none !important;
}

/* =========================================================
   RETRO VAULT — HIDDEN DEV MODE LOGO TRIGGER
   Date: 2026-08-20

   The invisible trigger sits over the "J" in the JGP logo.
   - No tooltip
   - No hover effect
   - No underline
   - Normal arrow pointer
   - Looks completely non-clickable
========================================================= */

.retroVaultLogoWrap {
  position: relative !important;
}

.devModeLogoTrigger,
.devModeLogoTrigger:hover,
.devModeLogoTrigger:focus,
.devModeLogoTrigger:active {
  position: absolute !important;

  /* Approximate J area inside the responsive logo image */
  left: 8% !important;
  top: 16% !important;
  width: 22% !important;
  height: 70% !important;

  display: block !important;
  z-index: 5 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  cursor: default !important;

  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;

  user-select: none !important;
  -webkit-user-select: none !important;
}

/* The subtitle is normal text again; no pointer hint. */
.subtitle {
  cursor: default !important;
}

/* =========================================================
   RETRO VAULT — ADVANCED VISUAL EDITOR 01
   DEV-only floating visual styling system.
========================================================= */

.devVisualEditor {
  display: none;
}

body.dev-mode .devVisualEditor {
  display: block;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30000;
  width: min(470px, calc(100vw - 24px));
  max-height: calc(100vh - 28px);
}

.devVisualEditorWindow {
  width: 100%;
  max-height: calc(100vh - 28px);
  overflow: hidden;
  background: #101826;
  background-image: none;
  border: 2px solid #4fd1c5;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.devVisualEditorHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border-bottom: 1px solid #344158;
}

.devVisualEditorTitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.devVisualEditorTitle strong {
  color: #7dffbd;
  font-size: 18px;
}

.devVisualEditorTitle span {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.35;
}

.devVisualEditorHeaderActions {
  display: flex;
  gap: 6px;
}

.devVisualEditorBody {
  max-height: calc(100vh - 95px);
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: #7dffbd #0b1220;
}

.devVisualEditor button,
body[class*="theme-"] .devVisualEditor button,
.devVisualEditor select,
.devVisualEditor input,
.devVisualEditor textarea {
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.devVisualEditor button,
body[class*="theme-"] .devVisualEditor button {
  background: #143b28 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #7dffbd !important;
  border-radius: 9px !important;
  padding: 8px 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.devVisualEditor button:hover,
.devVisualEditor button:focus,
body[class*="theme-"] .devVisualEditor button:hover,
body[class*="theme-"] .devVisualEditor button:focus {
  background: #1b5137 !important;
  border-color: #a7ffd2 !important;
  color: #ffffff !important;
}

.devVisualEditor button:disabled {
  opacity: .4 !important;
  cursor: default !important;
}

.devVisualEditorHeaderActions button {
  min-width: 36px;
  width: 36px;
  padding: 7px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.devVESelectRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
}

.devVESelectRow input,
.devVisualEditor input[type="text"],
.devVisualEditor input[type="number"],
.devVisualEditor select,
.devVisualEditor textarea {
  width: 100%;
  background: #0b1220 !important;
  color: #ffffff !important;
  border: 1px solid #40516d !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

.devVETarget {
  margin: 10px 0;
  padding: 9px 10px;
  background: #0b1220;
  border: 1px solid #33455f;
  border-radius: 9px;
}

.devVETarget span {
  color: #9fb2c5;
}

.devVETarget strong {
  color: #ffffff;
  overflow-wrap: anywhere;
}

.devVENavigate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.devVEWorkOn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  padding: 9px;
  background: #172033;
  border: 1px solid #40516d;
  border-radius: 10px;
}

.devVEWorkOn label {
  color: #7dffbd;
  font-size: 12px;
  font-weight: 900;
}

.devVEPanel {
  padding: 10px;
  background: #0d1522;
  border: 1px solid #2d3d54;
  border-radius: 11px;
}

.devVEGrid2,
.devVEGrid3 {
  display: grid;
  gap: 9px;
}

.devVEGrid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.devVEGrid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.devVEPanel label {
  display: grid;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.devVEPanel input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 2px;
  border: 1px solid #7dffbd;
  border-radius: 8px;
  background: #0b1220;
}

.devVENumberUnit {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 5px;
}

.devVECheckLabel {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
}

.devVECheckLabel input {
  width: auto !important;
}

.devVEMovePad {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.devVEMovePad > div {
  display: flex;
  gap: 7px;
}

.devVEToolButtons {
  margin-top: 9px;
}

.devVEHelp,
.devVEFooterHelp {
  color: #c7d2c9;
  font-size: 12px;
  line-height: 1.4;
}

.devVEFooterHelp {
  margin: 10px 2px 0;
}

.devVEHiddenFile {
  display: none !important;
}

#devVELiveCss {
  min-height: 210px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  white-space: pre;
}

body.dev-ve-picking,
body.dev-ve-picking * {
  cursor: crosshair !important;
}

.dev-ve-selected {
  outline: 3px solid #ffbf19 !important;
  outline-offset: 3px !important;
}

.retro-ve-youtube-card {
  position: relative !important;
  border-color: var(--retro-ve-yt-border, #4aa3ff) !important;
}

.retro-ve-youtube-card h1,
.retro-ve-youtube-card h2,
.retro-ve-youtube-card h3,
.retro-ve-youtube-card h4,
.retro-ve-youtube-card .title,
.retro-ve-youtube-card .cardTitle,
.retro-ve-youtube-card .card-title {
  color: var(--retro-ve-yt-title, #8ec8ff) !important;
}

.retro-ve-youtube-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--retro-ve-yt-badge, #ff0000) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 700px) {
  body.dev-mode .devVisualEditor {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .devVisualEditorWindow {
    max-height: calc(100vh - 16px);
  }

  .devVisualEditorBody {
    max-height: calc(100vh - 85px);
  }

  .devVEGrid2,
  .devVEGrid3 {
    grid-template-columns: 1fr;
  }

  .devVENavigate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devVESelectRow {
    grid-template-columns: 1fr auto;
  }

  .devVESelectRow .devVEPickBtn {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   RETRO VAULT — DEV MODE STATUS PANEL
   Visual Editor 02
   Compact floating DEV status.
========================================================= */

.devModeStatusPanel {
  display: none;
}

body.dev-mode .devModeStatusPanel {
  display: flex;
  align-items: center;
  gap: 10px;

  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 29990;

  width: auto;
  max-width: min(390px, calc(100vw - 28px));
  margin: 0;
  padding: 8px 10px;

  background: #172033;
  background-image: none;
  border: 1px solid #ffbf19;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.devModeStatusText {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.devModeStatusText strong {
  color: #ffbf19;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
}

.devModeStatusText span {
  color: #ffffff;
  font-size: 10px;
  line-height: 1.25;
}

.disableDevModeBtn,
body[class*="theme-"] .disableDevModeBtn,
.disableDevModeBtn:hover,
.disableDevModeBtn:focus,
.disableDevModeBtn:active,
body[class*="theme-"] .disableDevModeBtn:hover,
body[class*="theme-"] .disableDevModeBtn:focus,
body[class*="theme-"] .disableDevModeBtn:active {
  flex: 0 0 auto;

  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px 9px !important;

  background: #ffbf19 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid #ffbf19 !important;
  border-radius: 9px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  white-space: nowrap;
}

@media (max-width: 700px) {
  body.dev-mode .devModeStatusPanel {
    left: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }

  .devModeStatusText span {
    display: none;
  }
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 03
   FORCE COMPACT FLOATING DEV STATUS
   This intentionally uses #devModeStatusPanel + !important
   so older accumulated Retro Vault CSS cannot override it.
========================================================= */

#devModeStatusPanel {
  display: none !important;
}

body.dev-mode #devModeStatusPanel {
  display: flex !important;
  position: fixed !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  z-index: 99998 !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 360px !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 7px 9px !important;

  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 8px !important;

  background: #172033 !important;
  background-image: none !important;
  border: 1px solid #ffbf19 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}

body.dev-mode #devModeStatusPanel .devModeStatusText {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dev-mode #devModeStatusPanel .devModeStatusText strong {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffbf19 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.dev-mode #devModeStatusPanel .devModeStatusText span {
  display: none !important;
}

body.dev-mode #devModeStatusPanel #disableDevModeBtn,
body.dev-mode #devModeStatusPanel .disableDevModeBtn,
body.dev-mode #devModeStatusPanel #disableDevModeBtn:hover,
body.dev-mode #devModeStatusPanel #disableDevModeBtn:focus,
body.dev-mode #devModeStatusPanel #disableDevModeBtn:active {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 6px 8px !important;

  background: #ffbf19 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid #ffbf19 !important;
  border-radius: 8px !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 700px) {
  body.dev-mode #devModeStatusPanel {
    left: 8px !important;
    bottom: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 04 THEME MANAGER
========================================================= */

.devVEThemePreview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 10px 0;
  padding: 7px;
  background: #0b1220;
  border: 1px solid #344158;
  border-radius: 9px;
}

.devVEThemeSwatch {
  display: block;
  height: 28px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
}

.devVEPanel[data-panel="themes"] .devVEHelp {
  margin-top: 0;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 05 BORDER PRECISION
========================================================= */

/* Less confusing selection marker: dashed cyan instead of solid gold. */
.dev-ve-selected {
  outline: 2px dashed #5ee7ff !important;
  outline-offset: 4px !important;
}

/* Allows the actual border to be viewed without the editor outline. */
body.dev-ve-hide-selection-outline .dev-ve-selected {
  outline: none !important;
}

/* Border fine-adjust buttons stay compact. */
.devVEPanel[data-panel="border"] .devVEToolButtons {
  margin-top: 10px;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 06 QUICK RESET
========================================================= */

.devVEQuickActions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 9px;
}

#devVEQuickResetElement,
body[class*="theme-"] #devVEQuickResetElement {
  background: #4b1d1d !important;
  border-color: #ff8a8a !important;
  color: #ffffff !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
}

#devVEQuickResetElement:hover,
#devVEQuickResetElement:focus,
body[class*="theme-"] #devVEQuickResetElement:hover,
body[class*="theme-"] #devVEQuickResetElement:focus {
  background: #6a2727 !important;
  border-color: #ffb3b3 !important;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 07 SAVE VERSION
========================================================= */

.devVisualEditorHeaderActions .devVESaveVersionBtn,
body[class*="theme-"] .devVisualEditorHeaderActions .devVESaveVersionBtn {
  width: auto !important;
  min-width: 52px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  background: #274e37 !important;
  border-color: #8ff0bb !important;
  color: #ffffff !important;
}

.devVESaveDialog[hidden] {
  display: none !important;
}

.devVESaveDialog {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
}

.devVESaveDialogCard {
  width: min(620px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 20px;
  background: #111c17;
  color: #ffffff;
  border: 2px solid #7dffbd;
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.devVESaveDialogCard h2 {
  margin-top: 0;
  color: #7dffbd;
}

.devVESaveIntro {
  margin-bottom: 8px;
}

.devVESaveFileList {
  margin: 8px 0 14px;
  padding-left: 24px;
}

.devVESaveFileList li {
  margin: 5px 0;
}

.devVESaveWarning {
  margin: 12px 0;
  padding: 12px;
  background: #2a2108;
  border-left: 5px solid #ffbf19;
  border-radius: 9px;
  line-height: 1.45;
}

.devVESaveNameLabel {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  font-weight: 800;
}

.devVESaveNameLabel input {
  width: 100%;
  padding: 10px;
  background: #08130e;
  color: #ffffff;
  border: 1px solid #46765b;
  border-radius: 9px;
}

.devVESaveButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.devVESaveButtons button {
  background: #173c2a !important;
  color: #ffffff !important;
  border: 1px solid #72e8ae !important;
  border-radius: 9px !important;
  padding: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

#devVESaveEverything {
  background: #315e42 !important;
  border-color: #9bffc6 !important;
}

#devVECloseSaveDialog {
  background: #3a1e1e !important;
  border-color: #ff9a9a !important;
}

.devVESaveStatus {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: #bfffd9;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .devVESaveButtons {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 08
   SAVE EVERYTHING + START FRESH
========================================================= */

.devVESaveFreshNote {
  margin: 12px 0;
  padding: 12px;
  background: #0b2030;
  border-left: 5px solid #79c7ff;
  border-radius: 9px;
  line-height: 1.45;
}

#devVESaveAndStartFresh {
  background: #173b55 !important;
  border-color: #79c7ff !important;
  color: #ffffff !important;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 09
   WHOLE PROJECT BACKUP + EXACT COLOR THEME CLONE
========================================================= */

.devVEProjectBackupBox,
.devVEColorCloneBox {
  margin-top: 14px;
  padding: 12px;
  background: #0b1b24;
  border: 1px solid #3c6b7d;
  border-radius: 11px;
}

.devVEProjectBackupBox h3 {
  margin: 0 0 6px;
  color: #79c7ff;
  font-size: 16px;
}

.devVEProjectBackupBox p,
.devVEColorCloneBox p {
  margin: 5px 0 10px;
  color: #d7e5ea;
  font-size: 12px;
  line-height: 1.45;
}

.devVEProjectFolderSummary,
.devVEColorThemeStatus {
  margin-top: 10px;
  padding: 9px 10px;
  background: #081319;
  color: #bfffd9;
  border: 1px solid #2f5260;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.devVEAskSaveLocation {
  margin-top: 10px;
}

.devVESaveBrowserNote {
  margin: 8px 0 0;
  color: #cbd8dc;
  font-size: 11px;
  line-height: 1.4;
}

.devVEColorCloneBox > strong {
  display: block;
  color: #79c7ff;
  font-size: 13px;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 10
   PAGE / BODY CONTROLS
========================================================= */

.devVEPageScopeBox {
  margin-top: 10px;
  padding: 10px;
  background: #081319;
  border: 1px solid #2f5260;
  border-radius: 9px;
  color: #d7e5ea;
  font-size: 12px;
  line-height: 1.4;
}

.devVEPageScopeBox strong {
  display: block;
  color: #79c7ff;
  margin-bottom: 3px;
}

#devVEMakePageBlack,
body[class*="theme-"] #devVEMakePageBlack {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #808080 !important;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 12
   PROJECT ZIP FIX
========================================================= */

.devVEProjectBackupHelp {
  margin-top: 8px;
  padding: 8px 10px;
  background: #11202a;
  border: 1px solid #3b6170;
  border-radius: 8px;
  color: #d9edf5;
  font-size: 11px;
  line-height: 1.4;
}



/* =========================================================
   RETRO VAULT — VISUAL EDITOR 13
   CONFIRM BEFORE EVERY DEV DOWNLOAD
========================================================= */

.devVEConfirmDownloadNote {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #211b08;
  border-left: 5px solid #ffbf19;
  border-radius: 9px;
  color: #fff5c7;
  font-size: 12px;
  line-height: 1.45;
}

/* =========================================================
   RETRO VAULT — SUGGESTION TEXTAREA AUTO-GROW FIX
   Current guinea pig update
   ========================================================= */
#suggestionNote,
.suggestionField #suggestionNote,
body[class*="theme-"] #suggestionNote {
  min-height: 58px !important;
  max-height: none !important;
  overflow-y: hidden !important;
  resize: vertical !important;
}

/* =========================================================
   RETRO VAULT CATEGORY PICKER CLICK SAFETY
   Keeps the custom category menu above nearby form fields and clickable.
========================================================= */
.suggestionCategoryPicker {
  position: relative !important;
  z-index: 10040 !important;
}

.suggestionCategoryMenu {
  z-index: 10050 !important;
  pointer-events: auto !important;
}

.suggestionCategoryOption {
  pointer-events: auto !important;
}



/* =========================================================
   RETRO VAULT — CATEGORY DROPDOWN SELECTION FIX
   Keeps the working expanded Submit section and fixes selection.
========================================================= */
.suggestionCategoryPicker,
.suggestionCategoryMenu,
.suggestionCategoryOption {
  pointer-events: auto !important;
}

.suggestionCategoryMenu {
  z-index: 10050 !important;
}

.suggestionCategoryOption {
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   RETRO VAULT 15 — CATEGORY VISIBLE LABEL SAFETY
   Keeps the category's visible text as a dedicated flex item.
   Does not alter Suggest/Submit expansion behavior.
   ========================================================= */
.suggestionCategoryButton .suggestionCategoryLabel,
.suggestionCategoryButton [data-category-label="true"] {
  display: inline-block;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  pointer-events: none;
}

.suggestionCategoryButton .suggestionCategoryChevron {
  flex: 0 0 auto;
  pointer-events: none;
}

/* =========================================================
   RETRO VAULT — VERSION 13 REPAIR 01
   Restores newer layout + hidden J DEV trigger while keeping
   the older proven DEV/category JavaScript.
   ========================================================= */

/* Why should it be added? — starts compact, expands after first focus,
   and remains expanded when focus moves elsewhere. */
#suggestionNote,
.suggestionField #suggestionNote,
body[class*="theme-"] #suggestionNote {
  min-height: 58px !important;
  height: 58px !important;
  max-height: none !important;
  overflow-y: hidden !important;
  resize: vertical !important;
  transition: none !important;
}

#suggestionNote.rv-note-expanded,
.suggestionField #suggestionNote.rv-note-expanded,
body[class*="theme-"] #suggestionNote.rv-note-expanded {
  min-height: 150px !important;
  height: var(--rv-note-height, 150px) !important;
}

/* Remove decorative public-site glow/shadow. DEV editor/status are excluded
   so the element picker and editor feedback remain visible. */
body *:not(#devVisualEditor):not(#devVisualEditor *):not(#devModeStatusPanel):not(#devModeStatusPanel *) {
  text-shadow: none !important;
}

body .siteNav,
body .siteNav *,
body .app > :not(#devVisualEditor):not(#devModeStatusPanel),
body .app > :not(#devVisualEditor):not(#devModeStatusPanel) *,
body .suggestionModalOverlay,
body .suggestionModalOverlay *:not(.devVisualEditor):not(.devVisualEditor *) {
  box-shadow: none !important;
}

/* Keep buttons flat and readable: no decorative transitions/lift. */
body button:not(#devVisualEditor button):not(#devModeStatusPanel button),
body .filterBtn,
body .backToTopBtn,
body .siteNavSuggestBtn {
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}


/* =========================================================
   RETRO VAULT — VERSION 13 REPAIR 02
   CATEGORY MENU FOLLOWS THE ACTIVE VAULT THEME
   ---------------------------------------------------------
   This is deliberately an override only. It does not touch
   the working Category picker JavaScript, DEV Mode, the J-logo
   trigger, or the expanding suggestion textarea.
   ========================================================= */
body {
  --picker-bg-top: var(--rv-panel, rgba(8, 15, 11, 0.96));
  --picker-bg-bottom: var(--rv-bg-start, #050706);
  --picker-row-bg: var(--rv-panel-soft, rgba(8, 15, 11, 0.72));
  --picker-row-selected-bg: var(--rv-card, rgba(12, 20, 15, 0.92));
  --picker-text: var(--rv-text, #f4f4f4);
  --picker-muted: var(--rv-muted, #c7d2c9);
  --picker-selected-text: var(--rv-title, #f7d36b);
  --picker-arrow: var(--rv-accent, #7dffbd);
  --picker-border: var(--rv-border, rgba(247, 211, 107, 0.34));
  --picker-accent-border: var(--rv-accent-border, rgba(125, 255, 189, 0.38));
  --picker-soft-glow: transparent;
  --picker-hover-a: var(--rv-accent, #7dffbd);
  --picker-hover-b: var(--rv-accent-2, #f7d36b);
  --picker-hover-text: var(--rv-button-text, #111111);
}

/* Use the same theme surfaces as the rest of Retro Vault. */
.suggestionCategoryButton,
.suggestionCategoryPicker .suggestionCategoryButton,
button.suggestionCategoryButton {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-card, rgba(12, 20, 15, 0.92)) !important;
  border-color: var(--rv-accent-border, rgba(125, 255, 189, 0.38)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.suggestionCategoryButton:hover,
.suggestionCategoryButton:focus,
.suggestionCategoryPicker.open .suggestionCategoryButton {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-panel, rgba(8, 15, 11, 0.96)) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: 2px solid var(--rv-accent, #7dffbd) !important;
  outline-offset: 2px !important;
}

.suggestionCategoryChevron {
  color: var(--rv-accent, #7dffbd) !important;
}

.suggestionCategoryMenu {
  background: var(--rv-panel, rgba(8, 15, 11, 0.98)) !important;
  border-color: var(--rv-border, rgba(247, 211, 107, 0.34)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  scrollbar-color: var(--rv-accent, #7dffbd) var(--rv-bg-start, #050706) !important;
}

.suggestionCategoryOption,
button.suggestionCategoryOption {
  color: var(--rv-muted, #c7d2c9) !important;
  background: var(--rv-panel-soft, rgba(8, 15, 11, 0.72)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.suggestionCategoryOption.selected,
button.suggestionCategoryOption.selected {
  color: var(--rv-title, #f7d36b) !important;
  background: var(--rv-card, rgba(12, 20, 15, 0.92)) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.suggestionCategoryOption:hover,
.suggestionCategoryOption:focus,
button.suggestionCategoryOption:hover,
button.suggestionCategoryOption:focus,
.suggestionCategoryOption.selected:hover,
.suggestionCategoryOption.selected:focus,
button.suggestionCategoryOption.selected:hover,
button.suggestionCategoryOption.selected:focus {
  color: var(--rv-button-text, #111111) !important;
  background: var(--rv-accent, #7dffbd) !important;
  border-color: var(--rv-accent-2, var(--rv-accent, #7dffbd)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

.suggestionCategoryMenu::-webkit-scrollbar-track {
  background: var(--rv-bg-start, #050706) !important;
}

.suggestionCategoryMenu::-webkit-scrollbar-thumb {
  background: var(--rv-accent, #7dffbd) !important;
  border-color: var(--rv-bg-start, #050706) !important;
}

/* =========================================================
   RETRO VAULT — VERSION 13 REPAIR 03
   FULL THEME MATCH: VAULT THEME MENU + SUGGEST / SUBMIT
   ---------------------------------------------------------
   CSS only. No JavaScript or working behavior is changed.
   ========================================================= */

/* Suggest / Submit popup follows the active Retro Vault theme. */
body[class*="theme-"] .suggestionModal {
  background: var(--rv-panel, #08100c) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
  color: var(--rv-text, #f4f4f4) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body[class*="theme-"] .suggestionModalBadge {
  color: var(--rv-accent, #7dffbd) !important;
  background: var(--rv-card, rgba(12,20,15,.92)) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
}

body[class*="theme-"] .suggestionModal h2,
body[class*="theme-"] .suggestionField,
body[class*="theme-"] .suggestionStatus.working {
  color: var(--rv-title, #f7d36b) !important;
}

body[class*="theme-"] .suggestionModal p,
body[class*="theme-"] .suggestionCheckbox,
body[class*="theme-"] .suggestionStatus {
  color: var(--rv-text, #f4f4f4) !important;
}

body[class*="theme-"] .suggestionPrivacyNote,
body[class*="theme-"] .suggestionMemoryCredit,
body[class*="theme-"] .suggestionEmailNotice,
body[class*="theme-"] .suggestionFormNotice,
body[class*="theme-"] .suggestionNotificationBox {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-card, rgba(12,20,15,.92)) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
  box-shadow: none !important;
}

body[class*="theme-"] .suggestionField input,
body[class*="theme-"] .suggestionField select,
body[class*="theme-"] .suggestionField textarea {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-bg-start, #050706) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
  box-shadow: none !important;
}

body[class*="theme-"] .suggestionField input:focus,
body[class*="theme-"] .suggestionField select:focus,
body[class*="theme-"] .suggestionField textarea:focus {
  border-color: var(--rv-accent, #7dffbd) !important;
  outline: 2px solid var(--rv-accent, #7dffbd) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

body[class*="theme-"] .suggestionField input::placeholder,
body[class*="theme-"] .suggestionField textarea::placeholder {
  color: var(--rv-muted, #c7d2c9) !important;
  opacity: .68 !important;
}

body[class*="theme-"] .suggestionCheckbox input {
  accent-color: var(--rv-accent, #7dffbd) !important;
}

/* Primary/secondary Submit popup buttons use active theme colors instead of fixed gold/green. */
body[class*="theme-"] .suggestionModalPrimary,
body[class*="theme-"] .suggestionModalClose {
  background: var(--rv-accent, #7dffbd) !important;
  color: var(--rv-button-text, #111111) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
  box-shadow: none !important;
}

body[class*="theme-"] .suggestionModalSecondary {
  background: var(--rv-card, rgba(12,20,15,.92)) !important;
  color: var(--rv-title, #f7d36b) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
  box-shadow: none !important;
}

/* Category picker in Suggest / Submit — active theme, including selected row. */
body[class*="theme-"] .suggestionCategoryButton,
body[class*="theme-"] .suggestionCategoryPicker .suggestionCategoryButton,
body[class*="theme-"] button.suggestionCategoryButton {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-card, rgba(12,20,15,.92)) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
}

body[class*="theme-"] .suggestionCategoryMenu {
  background: var(--rv-panel, #08100c) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
}

body[class*="theme-"] .suggestionCategoryOption,
body[class*="theme-"] button.suggestionCategoryOption {
  color: var(--rv-text, #f4f4f4) !important;
  background: var(--rv-card, rgba(12,20,15,.92)) !important;
  border-color: var(--rv-accent-border, rgba(125,255,189,.38)) !important;
}

body[class*="theme-"] .suggestionCategoryOption.selected,
body[class*="theme-"] button.suggestionCategoryOption.selected,
body[class*="theme-"] .suggestionCategoryOption:hover,
body[class*="theme-"] .suggestionCategoryOption:focus,
body[class*="theme-"] button.suggestionCategoryOption:hover,
body[class*="theme-"] button.suggestionCategoryOption:focus {
  color: var(--rv-button-text, #111111) !important;
  background: var(--rv-accent, #7dffbd) !important;
  border-color: var(--rv-accent, #7dffbd) !important;
}

body[class*="theme-"] .suggestionCategoryChevron {
  color: var(--rv-accent-2, var(--rv-title, #f7d36b)) !important;
}

/* Firefox/Windows native Theme dropdown does not reliably resolve inherited
   CSS variables inside the opened option list. These explicit theme rules
   prevent it from falling back to Retro Green. */
body.theme-retro-green .themeSelect option { background:#050706 !important; color:#f4f4f4 !important; }
body.theme-soft-neon-arcade .themeSelect option { background:#050914 !important; color:#f4fbff !important; }
body.theme-neon-arcade .themeSelect option { background:#030014 !important; color:#f7fbff !important; }
body.theme-electric-candy .themeSelect option { background:#16001f !important; color:#fff8ff !important; }
body.theme-saturday-morning .themeSelect option { background:#083f8f !important; color:#ffffff !important; }
body.theme-80s-mall .themeSelect option { background:#1d1238 !important; color:#fff6f0 !important; }
body.theme-haunted-vhs .themeSelect option { background:#09020f !important; color:#f4edf8 !important; }
body.theme-royal-purple .themeSelect option { background:#090017 !important; color:#fff8ff !important; }
body.theme-american-flag .themeSelect option { background:#071a3b !important; color:#ffffff !important; }
body.theme-halloween-night .themeSelect option { background:#050308 !important; color:#fff2e8 !important; }
body.theme-midnight-violet .themeSelect option { background:#08060e !important; color:#efe8ff !important; }
body.theme-emerald-night .themeSelect option { background:#040a08 !important; color:#e4fff1 !important; }
body.theme-gold-noir .themeSelect option { background:#070604 !important; color:#fff0c2 !important; }
body.theme-blue-ice .themeSelect option { background:#071a3b !important; color:#ffffff !important; }
body.theme-pink-noir .themeSelect option { background:#1a0713 !important; color:#fff0f8 !important; }

/* Checked item uses each theme's main accent. Explicit values are used because
   the native popup has the same CSS-variable limitation as the option list. */
body.theme-retro-green .themeSelect option:checked { background:#7dffbd !important; color:#111 !important; }
body.theme-soft-neon-arcade .themeSelect option:checked { background:#8affc6 !important; color:#111 !important; }
body.theme-neon-arcade .themeSelect option:checked { background:#39ff14 !important; color:#111 !important; }
body.theme-electric-candy .themeSelect option:checked { background:#ff5ee7 !important; color:#111 !important; }
body.theme-saturday-morning .themeSelect option:checked { background:#ffffff !important; color:#111 !important; }
body.theme-80s-mall .themeSelect option:checked { background:#54ffe0 !important; color:#111 !important; }
body.theme-haunted-vhs .themeSelect option:checked { background:#b967ff !important; color:#111 !important; }
body.theme-royal-purple .themeSelect option:checked { background:#c084ff !important; color:#111 !important; }
body.theme-american-flag .themeSelect option:checked { background:#7db7ff !important; color:#111 !important; }
body.theme-halloween-night .themeSelect option:checked { background:#bb71ff !important; color:#111 !important; }
body.theme-midnight-violet .themeSelect option:checked { background:#ab8be8 !important; color:#111 !important; }
body.theme-emerald-night .themeSelect option:checked { background:#5ef0af !important; color:#111 !important; }
body.theme-gold-noir .themeSelect option:checked { background:#ffd86f !important; color:#111 !important; }
body.theme-blue-ice .themeSelect option:checked { background:#7db7ff !important; color:#111 !important; }
body.theme-pink-noir .themeSelect option:checked { background:#ff78bb !important; color:#111 !important; }

/* =========================================================
   REPAIR 04 — MAIN VAULT THEME PICKER ONLY
   Match the native main Theme dropdown to the same active-theme
   card/accent palette used by the working Suggest / Submit menu.
   No Suggest / Submit rules are changed here.
   ========================================================= */

/* Firefox/Windows needs explicit opaque colors for native <option> rows.
   These use each theme's CARD color rather than the old near-black menu. */
body.theme-retro-green .themeSelect option { background:#0c140f !important; color:#f4f4f4 !important; }
body.theme-soft-neon-arcade .themeSelect option { background:#0c1426 !important; color:#f4fbff !important; }
body.theme-neon-arcade .themeSelect option { background:#080d26 !important; color:#f7fbff !important; }
body.theme-electric-candy .themeSelect option { background:#260c4b !important; color:#fff8ff !important; }
body.theme-saturday-morning .themeSelect option { background:#155aa0 !important; color:#ffffff !important; }
body.theme-80s-mall .themeSelect option { background:#1d2a4e !important; color:#fff6f0 !important; }
body.theme-haunted-vhs .themeSelect option { background:#180f20 !important; color:#f4edf8 !important; }
body.theme-royal-purple .themeSelect option { background:#200f3c !important; color:#fff8ff !important; }
body.theme-american-flag .themeSelect option { background:#0b1e48 !important; color:#ffffff !important; }
body.theme-halloween-night .themeSelect option { background:#1a0a24 !important; color:#fff2e8 !important; }
body.theme-midnight-violet .themeSelect option { background:#1a112c !important; color:#efe8ff !important; }
body.theme-emerald-night .themeSelect option { background:#0b2119 !important; color:#e4fff1 !important; }
body.theme-gold-noir .themeSelect option { background:#1c150a !important; color:#fff0c2 !important; }
body.theme-blue-ice .themeSelect option { background:#0e1f31 !important; color:#edf8ff !important; }
body.theme-pink-noir .themeSelect option { background:#240c1a !important; color:#ffe0f0 !important; }

/* Selected row uses the exact current theme accent, matching Submit's
   category-selected treatment. */
body.theme-retro-green .themeSelect option:checked { background:#7dffbd !important; color:#111 !important; }
body.theme-soft-neon-arcade .themeSelect option:checked { background:#8affc6 !important; color:#111 !important; }
body.theme-neon-arcade .themeSelect option:checked { background:#39ff14 !important; color:#111 !important; }
body.theme-electric-candy .themeSelect option:checked { background:#ff5ee7 !important; color:#111 !important; }
body.theme-saturday-morning .themeSelect option:checked { background:#ffffff !important; color:#111 !important; }
body.theme-80s-mall .themeSelect option:checked { background:#54ffe0 !important; color:#111 !important; }
body.theme-haunted-vhs .themeSelect option:checked { background:#b967ff !important; color:#111 !important; }
body.theme-royal-purple .themeSelect option:checked { background:#c084ff !important; color:#111 !important; }
body.theme-american-flag .themeSelect option:checked { background:#7db7ff !important; color:#111 !important; }
body.theme-halloween-night .themeSelect option:checked { background:#bb71ff !important; color:#111 !important; }
body.theme-midnight-violet .themeSelect option:checked { background:#ab8be8 !important; color:#111 !important; }
body.theme-emerald-night .themeSelect option:checked { background:#5ef0af !important; color:#111 !important; }
body.theme-gold-noir .themeSelect option:checked { background:#ffd86f !important; color:#111 !important; }
body.theme-blue-ice .themeSelect option:checked { background:#99d4ff !important; color:#111 !important; }
body.theme-pink-noir .themeSelect option:checked { background:#ff8cbe !important; color:#111 !important; }

/* =========================================================
   RETRO VAULT — VERSION 13 REPAIR 05
   MAIN VAULT THEME PICKER: CUSTOM MENU ONLY
   ---------------------------------------------------------
   The browser-native select remains as the working data/control source,
   but its opened Firefox menu is hidden. The visible picker deliberately
   reuses the SAME suggestionCategory classes as the already-working
   Suggest / Submit Category picker, so hover/selected rows match it.
   No Submit/Suggest rules are changed here.
   ========================================================= */

/* Keep the original select available to app.js but remove its native UI. */
#themeSelect.mainThemeNativeSelect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main Theme picker sits in the exact space formerly used by the select. */
.themeField .mainThemeCustomPicker {
  width: 100% !important;
  z-index: 10060 !important;
}

.themeField .mainThemeCustomButton {
  min-height: 42px !important;
  font-size: 15px !important;
}

.themeField .mainThemeCustomMenu {
  z-index: 10070 !important;
  max-height: 360px !important;
}

.themeField .mainThemeCustomOption {
  min-height: 34px !important;
  font-size: 14px !important;
}

/* =========================================================
   RETRO VAULT — VERSION 13 REPAIR 06
   MAIN VAULT THEME PICKER: MODAL LAYER FIX ONLY
   ---------------------------------------------------------
   Repair 05 correctly created the custom main Theme picker, but the
   shared suggestionCategoryPicker z-index placed it above the Suggest
   modal overlay (z-index 10000). This override keeps the main Theme
   picker in the normal page layer so the modal fully covers it.
   No Submit/Suggest picker styling or behavior is changed.
   ========================================================= */
.themeField .mainThemeCustomPicker {
  z-index: 30 !important;
}

.themeField .mainThemeCustomMenu {
  z-index: 40 !important;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 17
   APPLY TO ONE / ALL MATCHING
========================================================= */

.devVEScopeBox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 9px;
  align-items: center;
  margin: 0 0 10px;
  padding: 9px 10px;
  background: #101b2a;
  border: 1px solid #40516d;
  border-radius: 10px;
}

.devVEScopeBox label {
  color: #7dffbd;
  font-size: 12px;
  font-weight: 900;
}

.devVEScopeBox select {
  width: 100%;
}

.devVEScopeStatus {
  grid-column: 1 / -1;
  padding: 7px 9px;
  border-radius: 8px;
  color: #d7e5ea;
  background: #081319;
  border: 1px solid #2f5260;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#devVEResetMatching {
  grid-column: 1 / -1;
  justify-self: end;
  background: #4b1d1d !important;
  border-color: #ff8a8a !important;
  color: #ffffff !important;
}

/* =========================================================
   RETRO VAULT — VISUAL EDITOR 17
   SMALL DRAGGABLE NATIVE COLOR PANEL
   ---------------------------------------------------------
   The color SWATCHES are normal <input type="color"> fields.
   Clicking one opens the visitor's normal browser/OS picker.
   This small DEV panel itself is draggable by its header.
========================================================= */

.devVENativeColorPanel[hidden] {
  display: none !important;
}

.devVENativeColorPanel {
  position: fixed;
  left: 18px;
  top: 120px;
  z-index: 1000000;
  width: min(310px, calc(100vw - 16px));
  padding: 0;
  overflow: hidden;
  color: #ffffff;
  background: #101826;
  border: 2px solid #4fd1c5;
  border-radius: 13px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48);
  font-family: Arial, sans-serif;
}

.devVENativeColorHeader {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #ffffff;
  background: #172033;
  border-bottom: 1px solid #40516d;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.devVENativeColorHeader strong {
  color: #7dffbd;
  font-size: 14px;
}

.devVENativeColorHeader span {
  color: #b8c8d8;
  font-size: 10px;
}

.devVENativeColorClose,
body[class*="theme-"] .devVENativeColorClose {
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: #143b28 !important;
  border: 1px solid #7dffbd !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.devVENativeColorBody {
  padding: 10px;
}

.devVENativeColorBody .devVEGrid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.devVENativeColorBody label {
  display: grid;
  gap: 5px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.devVENativeColorBody input[type="color"] {
  width: 100% !important;
  height: 42px !important;
  padding: 2px !important;
  border: 1px solid #7dffbd !important;
  border-radius: 8px !important;
  background: #0b1220 !important;
  cursor: pointer !important;
}

.devVENativeColorHint {
  padding: 0 10px 10px;
  color: #b8c8d8;
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .devVENativeColorPanel {
    width: calc(100vw - 16px);
    left: 8px;
    top: 90px;
  }
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 18
   PAGE / BODY COLOR CONTROLS
========================================================= */

.devVEPanel[data-panel="page"] #devVEMakePageBlack {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #8ca0b8 !important;
}

.devVEPanel[data-panel="page"] #devVEResetPageBody {
  background: #4b1d1d !important;
  color: #ffffff !important;
  border-color: #ff8a8a !important;
}

.devVENativeColorBody .devVEGrid3 {
  width: 100%;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 19
   DRAGGABLE ADVANCED STYLE EDITOR
========================================================= */

.devVisualEditorHeader {
  cursor: move !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}

.devVisualEditorHeader button,
.devVisualEditorHeader input,
.devVisualEditorHeader select,
.devVisualEditorHeader textarea,
.devVisualEditorHeader a {
  cursor: pointer !important;
}

.devVisualEditor.devVEEditorDragging .devVisualEditorWindow {
  outline: 2px solid #7dffbd;
  outline-offset: 2px;
}

.devVisualEditor.devVEEditorDragging .devVisualEditorHeader {
  cursor: grabbing !important;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 20
   RESET DEV TO DEFAULT BUTTON
========================================================= */

.devVEQuickActions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.devVEResetToDefault,
body[class*="theme-"] .devVEResetToDefault {
  background: #5a1f1f !important;
  color: #ffffff !important;
  border: 1px solid #ff8a8a !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.devVEResetToDefault:hover,
.devVEResetToDefault:focus,
body[class*="theme-"] .devVEResetToDefault:hover,
body[class*="theme-"] .devVEResetToDefault:focus {
  background: #742929 !important;
  color: #ffffff !important;
  border-color: #ffb0b0 !important;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 24
   STYLE LIBRARY
========================================================= */

.devVEStyleLibraryPanel > label {
  display: grid;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.devVEStyleLibraryBox {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #0b1220;
  border: 1px solid #40516d;
}

.devVEStyleLibraryBox label {
  display: grid;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.devVEStyleLibraryInfo {
  min-height: 32px;
  padding: 8px 9px;
  border-radius: 8px;
  color: #c9d6e2;
  background: #101826;
  border: 1px solid #33455f;
  font-size: 11px;
  line-height: 1.35;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 25
   STABLE DARK BACKGROUND AFTER CATEGORY FILTERS
   ---------------------------------------------------------
   The original Retro Green page background used a large gradient.
   When category filters changed the number of visible cards, the
   document height changed and the gradient could appear lighter or
   darker in the Browse area.

   Keep Retro Green consistently dark regardless of which category
   is selected.

   DEV Page / Body colors are intentionally NOT blocked.
========================================================= */

html {
  background: #050706;
}

body.theme-retro-green:not(.retro-ve-page-body-active) {
  background: #050706 !important;
  background-image: none !important;
}

/* Keep other theme gradients stable relative to the viewport rather than
   stretching differently when a filter shows more or fewer cards. */
body[class*="theme-"] {
  background-attachment: fixed !important;
}


/* =========================================================
   RETRO VAULT — VISUAL EDITOR 26
   SAME COLOR PANEL + HEX BOXES
========================================================= */

.devVEColorWithHex {
  display: grid;
  grid-template-columns: 54px minmax(90px, 1fr);
  gap: 7px;
  align-items: center;
  margin-top: 5px;
}

.devVEColorWithHex input[type="color"] {
  width: 54px !important;
  min-width: 54px !important;
  height: 38px !important;
  padding: 2px !important;
}

.devVEHexBox,
body[class*="theme-"] .devVEHexBox {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 7px 8px !important;
  border-radius: 7px !important;
  border: 1px solid #40516d !important;
  background: #0d1725 !important;
  color: #ffffff !important;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.devVEHexBox.devVEHexInvalid,
body[class*="theme-"] .devVEHexBox.devVEHexInvalid {
  border-color: #ff6b6b !important;
  outline: 1px solid #ff6b6b !important;
}

/* =========================================================
   RETRO VAULT — VISUAL EDITOR 26
   BAKE CURRENT STYLE
========================================================= */

.devVEBakeStyleBox {
  margin-top: 12px;
  padding: 11px;
  border-radius: 10px;
  background: #102316;
  border: 1px solid #7dffbd;
}

.devVEBakeStyleBox strong {
  display: block;
  margin-bottom: 5px;
  color: #7dffbd;
  font-size: 13px;
}

.devVEBakeStyleBox p {
  margin: 0 0 9px;
  color: #d9e7df;
  font-size: 11px;
  line-height: 1.4;
}

.devVEBakeStyleBox code {
  color: #ffffff;
}

#devVEBakeStylesLiveCss,
body[class*="theme-"] #devVEBakeStylesLiveCss {
  width: 100% !important;
  background: #145c35 !important;
  color: #ffffff !important;
  border: 1px solid #7dffbd !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.devVEBakeStatus {
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #09150e;
  border: 1px solid #2e6543;
  color: #c8d8cf;
  font-size: 10px;
  line-height: 1.35;
}


/* =========================================================
   RETRO VAULT — VIDEO AVAILABLE BADGE
   Added: 2026-09-15

   Shows only on cards whose item has youtubeUrl.
   Location: directly under the card image, aligned right.
   Solid/no-glow styling to match Retro Vault's button rules.
========================================================= */
.cardVideoBadgeRow {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin: -3px 0 7px !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.cardVideoBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  padding: 3px 7px !important;

  color: #ffffff !important;
  background: #171717 !important;
  background-image: none !important;
  border: 1px solid var(--rv-accent, #7dffbd) !important;
  border-radius: 6px !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.45px !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.cardVideoBadgeIcon {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Recently Added cards use a tighter image/card layout. */
.recentlyAddedCard .cardVideoBadgeRow {
  margin-top: -4px !important;
  margin-bottom: 6px !important;
}

@media (max-width: 520px) {
  .cardVideoBadge {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  .cardVideoBadgeIcon {
    font-size: 12px !important;
  }
}


/* =========================================================
   RETRO VAULT — LIKE / UNLIKE TOGGLE
   Added 2026-09-16

   A liked item shows a filled heart and "Liked".
   Clicking again removes the visitor's like.
========================================================= */
.publicLikeBtn.liked,
body[class*="theme-"] .publicLikeBtn.liked {
  background: #143b28 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--rv-accent, #7dffbd) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.publicLikeBtn.liked .publicLikeHeart {
  color: #ff6b7a !important;
}

.publicLikeBtn.liked .publicLikeCount {
  color: #ffffff !important;
}

/* ===== RETRO VAULT DEV BAKED STYLE — START ===== */
/*
  Generated by Retro Vault DEV Visual Editor 26.
  These rules are PUBLIC site CSS — DEV Mode is not required.
  Re-baking replaces this block instead of stacking duplicates.
*/
/* Retro Vault Advanced Visual Editor 18 — exported changes */

/* Optional flash animations; reduced-motion friendly */
@keyframes rv-dev-fade { 50% { opacity: 0; } }
@keyframes rv-dev-blink { 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { * { animation-name: none !important; } }
/* ===== RETRO VAULT DEV BAKED STYLE — END ===== */