/*
  =========================================================
  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: cover;
  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;
}

/* Soft Neon Arcade */
body.theme-soft-neon-arcade {
  --picker-bg-top: rgba(8, 18, 22, 0.98);
  --picker-bg-bottom: rgba(5, 10, 16, 0.99);
  --picker-selected-text: #9fffe0;
  --picker-arrow: #9fffe0;
  --picker-border: rgba(255, 216, 119, 0.34);
  --picker-accent-border: rgba(159, 255, 224, 0.34);
  --picker-soft-glow: rgba(159, 255, 224, 0.12);
  --picker-hover-a: #9fffe0;
  --picker-hover-b: #ffd877;
  --picker-hover-text: #061113;
}

/* Neon Arcade */
body.theme-neon-arcade {
  --picker-bg-top: rgba(6, 8, 24, 0.98);
  --picker-bg-bottom: rgba(3, 4, 14, 0.99);
  --picker-selected-text: #00f5ff;
  --picker-arrow: #ff4df3;
  --picker-border: rgba(255, 77, 243, 0.42);
  --picker-accent-border: rgba(0, 245, 255, 0.38);
  --picker-soft-glow: rgba(255, 77, 243, 0.12);
  --picker-hover-a: #00f5ff;
  --picker-hover-b: #ff4df3;
  --picker-hover-text: #070714;
}

/* Electric Candy */
body.theme-electric-candy {
  --picker-bg-top: rgba(25, 5, 20, 0.98);
  --picker-bg-bottom: rgba(11, 3, 15, 0.99);
  --picker-selected-text: #ff8fd8;
  --picker-arrow: #8df7ff;
  --picker-border: rgba(255, 143, 216, 0.42);
  --picker-accent-border: rgba(141, 247, 255, 0.36);
  --picker-soft-glow: rgba(255, 143, 216, 0.12);
  --picker-hover-a: #ff8fd8;
  --picker-hover-b: #8df7ff;
  --picker-hover-text: #170318;
}

/* Saturday Morning */
body.theme-saturday-morning {
  --picker-bg-top: rgba(30, 18, 5, 0.98);
  --picker-bg-bottom: rgba(14, 9, 4, 0.99);
  --picker-selected-text: #ffd56a;
  --picker-arrow: #ff8f4a;
  --picker-border: rgba(255, 213, 106, 0.42);
  --picker-accent-border: rgba(255, 143, 74, 0.36);
  --picker-soft-glow: rgba(255, 143, 74, 0.12);
  --picker-hover-a: #ffd56a;
  --picker-hover-b: #ff8f4a;
  --picker-hover-text: #1d1003;
}

/* 80s Mall */
body.theme-80s-mall {
  --picker-bg-top: rgba(22, 10, 25, 0.98);
  --picker-bg-bottom: rgba(8, 6, 16, 0.99);
  --picker-selected-text: #f7b7ff;
  --picker-arrow: #8ee8ff;
  --picker-border: rgba(247, 183, 255, 0.42);
  --picker-accent-border: rgba(142, 232, 255, 0.36);
  --picker-soft-glow: rgba(247, 183, 255, 0.12);
  --picker-hover-a: #f7b7ff;
  --picker-hover-b: #8ee8ff;
  --picker-hover-text: #140617;
}

/* Haunted VHS */
body.theme-haunted-vhs {
  --picker-bg-top: rgba(19, 12, 24, 0.98);
  --picker-bg-bottom: rgba(7, 5, 11, 0.99);
  --picker-selected-text: #c9a7ff;
  --picker-arrow: #90ffcf;
  --picker-border: rgba(201, 167, 255, 0.40);
  --picker-accent-border: rgba(144, 255, 207, 0.32);
  --picker-soft-glow: rgba(201, 167, 255, 0.11);
  --picker-hover-a: #c9a7ff;
  --picker-hover-b: #90ffcf;
  --picker-hover-text: #0c0710;
}

/* 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;
}

/* American Flag */
body.theme-american-flag {
  --picker-bg-top: rgba(7, 12, 28, 0.98);
  --picker-bg-bottom: rgba(3, 5, 15, 0.99);
  --picker-selected-text: #ffffff;
  --picker-arrow: #ff6b6b;
  --picker-border: rgba(255, 255, 255, 0.32);
  --picker-accent-border: rgba(94, 160, 255, 0.38);
  --picker-soft-glow: rgba(94, 160, 255, 0.12);
  --picker-hover-a: #ffffff;
  --picker-hover-b: #ff6b6b;
  --picker-hover-text: #071026;
}

/* Halloween Night */
body.theme-halloween-night {
  --picker-bg-top: rgba(24, 11, 3, 0.98);
  --picker-bg-bottom: rgba(8, 4, 2, 0.99);
  --picker-selected-text: #ff9a3c;
  --picker-arrow: #c77dff;
  --picker-border: rgba(255, 154, 60, 0.44);
  --picker-accent-border: rgba(199, 125, 255, 0.32);
  --picker-soft-glow: rgba(255, 154, 60, 0.12);
  --picker-hover-a: #ff9a3c;
  --picker-hover-b: #c77dff;
  --picker-hover-text: #1b0b02;
}

/* 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: cover !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;
}

/*
  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;
  }
}