:root {
  --mar-primary: #e0b0ff;
  --mar-secondary: #2d2433;
  --mer-primary: #b0e0ff;
  --mer-secondary: #242d33;
  --primary-dark: #0a0a14;
  --primary: #17172d;
  --secondary: #4a4a5e;
  --tertiary: #c8c8ff;
}

/* --== Base Elements ==-- */
a {
  color: var(--tertiary);
}

html {
  background-color: black;
  color: var(--tertiary);
}
html::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
}

/* --== Page Layout ==-- */
#ourPage {
  background-color: var(--primary-dark);
}

#habitatPage {
  background-color: rgb(68 107 68);
}

/* --== Introduction Sections ==-- */
#marIntroduction {
  color: var(--mar-primary);
}

#merIntroduction {
  color: var(--mer-primary);
}

#ourIntroduction {
  color: white;
}

/* --== Text Sliders ==-- */
#marTextSlider,
#marHomeButtonTextSlider {
  background: linear-gradient(
    to right,
    #00000000 0%,
    #725a813b 30% 70%,
    #00000000 100%
  );
}

#merTextSlider,
#merHomeButtonTextSlider {
  background: linear-gradient(
    to right,
    #00000000 0%,
    #5a72813b 30% 70%,
    #00000000 100%
  );
}

#ourTextSlider,
#ourHomeButtonTextSlider,
.cardTextSlider {
  background: linear-gradient(
    to right,
    #00000000 0%,
    #18181de0 30%,
    70%,
    #00000000 100%
  );
}

/* --== Overlay ==-- */
.overlay-divider {
  background-color: #07070e;
}

/* --== Home Button ==-- */
.homeButton {
  border-bottom: 1px white solid;
}

/* --== Cards ==-- */
.card {
  border: var(--primary) 1px solid;
}

/* --== Settings Panel ==-- */
.settings {
  background-color: #131327c5;
  border: solid 5px #131327e0;
}

/* --== Footer ==-- */
footer {
  background: linear-gradient(
    to right,
    #4a4a5e28 0%,
    #2e2e3f59 50%,
    #4a4a5e28 100%
  );
}

/* --== Icons ==-- */
.medIcon,
.miniIcon,
.tinyIcon {
  filter: invert(100%);
}

/* --== Movie Journal ==-- */
#movieJournalPage {
  background: linear-gradient(
    180deg,
    rgba(29, 24, 37, 0.65),
    rgba(6, 5, 10, 0.9)
  );
}

.moviePageHeader p {
  color: #8d68d3;
}

.movieActionButton,
.authModalActions button {
  background: linear-gradient(135deg, #211430, #49337b);
  color: #fff8ef;
  box-shadow: 0 8px 20px rgba(61, 43, 31, 0.2);
  transition: box-shadow 0.15s ease;
}
.movieActionButton:hover,
.authModalActions button:hover {
  box-shadow: 0 10px 24px rgba(45, 31, 61, 0.24);
}

.authModalActions button.secondary {
  background: #5a448d;
}

.authStatus {
  color: #412f5f;
}

#movieSearch {
  border: 1px solid rgba(39, 31, 61, 0.25);
  background: rgba(33, 32, 39, 0.95);
  box-shadow: inset 0 1px 3px rgba(40, 31, 61, 0.08);
  color: var(--tertiary);
}

.searchResults {
  background: rgba(33, 32, 39, 0.95);
  border: 1px solid rgba(42, 31, 61, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.searchResultItem {
  background: rgba(33, 32, 39, 0.308);
  color: var(--tertiary);
}

.searchResultItem:hover {
  background: rgba(36, 31, 61, 0.952);
  color: white;
}

.movieJournalMessage.error {
  color: #8d2f2f;
}

.movieJournalMessage.success {
  color: #2f6e3c;
}

.movieCard {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.15s ease;
}

.movieCard:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

.movieCardOverlay {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.86));
  color: white;
}

.movieDetailDescription p {
  color: white;
}

.movieDetailPanel {
  background: rgba(11, 10, 14, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(40, 31, 61, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.08);
}

.movieDetailMeta {
  color: white;
}

.movieDetailBody textarea,
.movieDetailBody input,
.movieDetailBody select,
.movieDetailBody button {
  border: 1px solid rgba(41, 31, 61, 0.2);
  background: rgb(8, 8, 8);
  background-color: var(--primary);
  color: white;
}

.movieDetailCard label {
  color: var(--tertiary);
}

.authModal {
  background: rgba(0, 0, 0, 0.3);
}

.authModalCard,
.authModalCard input {
  background: rgba(22, 17, 29, 0.8);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(61, 43, 31, 0.12);
  color: white;
}

.authModalCard input {
  border: 1px solid rgba(61, 43, 31, 0.2);
}

.authMessage {
  color: #c93d3d;
}

/* --== Game Journal (blue accent, mirrors Movie Journal) ==-- */
#gameJournalPage {
  background: linear-gradient(
    180deg,
    rgba(24, 30, 37, 0.65),
    rgba(5, 7, 10, 0.9)
  );
}

.gamePageHeader p {
  color: #4f9fd6;
}

.gameActionButton {
  background: linear-gradient(135deg, #142430, #2d6a9b);
  color: #f0faff;
  box-shadow: 0 8px 20px rgba(31, 49, 61, 0.2);
  transition: box-shadow 0.15s ease;
}
.gameActionButton:hover {
  box-shadow: 0 10px 24px rgba(31, 55, 61, 0.24);
}

#gameSearch {
  border: 1px solid rgba(31, 51, 61, 0.25);
  background: rgba(32, 35, 39, 0.95);
  box-shadow: inset 0 1px 3px rgba(31, 46, 61, 0.08);
  color: var(--tertiary);
}

.sourceToggle {
  background: rgba(32, 35, 39, 0.95);
  border: 1px solid rgba(31, 51, 61, 0.25);
}

.sourceToggleOption {
  background: linear-gradient(135deg, #001c31, #24313d);
  color: #6f6f6f;
}

.sourceToggleOption:hover {
  color: white;
}

.sourceToggleOption.active {
  background: linear-gradient(135deg, #142430, #2d6a9b);
  color: #f0faff;
}

.gameJournalMessage.error {
  color: #8d2f2f;
}

.gameJournalMessage.success {
  color: #2f6e3c;
}

.gameCard {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.15s ease;
}

.gameCard:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

.gameCardOverlay {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.86));
  color: white;
}

.gameDetailDescription p {
  color: white;
}

.gameDetailPanel {
  background: rgba(10, 12, 14, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(31, 51, 61, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.08);
}

.gameDetailMeta {
  color: white;
}

.gameDetailBody textarea,
.gameDetailBody input,
.gameDetailBody select,
.gameDetailBody button {
  border: 1px solid rgba(31, 46, 61, 0.2);
  background: rgb(8, 8, 8);
  background-color: var(--primary);
  color: white;
}

.gameDetailCard label {
  color: var(--tertiary);
}

/* --== Star Ratings & Favorites ==-- */
.starRatingTrack {
  color: rgba(200, 200, 255, 0.25);
}

.starRatingFill {
  color: #ffd60a;
}

.merFavoriteStar {
  filter: drop-shadow(-1px 0px 0px var(--mer-primary))
    drop-shadow(0px 1px 0px var(--mer-primary)) drop-shadow(1px 0px 0px #000)
    drop-shadow(0px -1px 0px #000);
}
.marFavoriteStar {
  filter: drop-shadow(-1px 0px 0px var(--mar-primary))
    drop-shadow(0px 1px 0px var(--mar-primary)) drop-shadow(1px 0px 0px #000)
    drop-shadow(0px -1px 0px #000);
}