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

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