:root {
  /* Main Theme Colors */
  --color-bg-main: #1b214e; /* body bg */
  --color-bg-alt: #232a4d; /* modal bg, alt */
  --color-bg-container: #293165; /* container bg */
  --color-bg-translucent: rgba(14, 14, 22, 0.6);
  --color-bg-footer: rgba(34, 37, 60, 0.75);
  --color-bg-footer-catalyst: rgba(34, 37, 60, 0.45);
  --color-bg-footer-border: #fff;
  --color-bg-drop: #6f55b6;

  /* Violet/Purple Accent */
  --color-accent: #6f55b6;
  --color-accent-hover: #825eff;
  --color-accent-border: #5f559a;
  --color-accent-focus: #9e81fa;

  /* Shape/Gradient Colors */
  --color-shape: #323c6f;
  --color-shape2: #3a5580;
  --color-shape-diamond: #fff;
  --color-shape-diamond-alt: #67564c;

  /* Text/Font */
  --color-text: #eeeeee;
  --color-text-muted: #bbb;
  --color-footer-text: #fff;
  --color-label: #ececec;
  --color-h1: #fff;

  /* Misc UI */
  --color-border: #ccc;
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-strong: #2e205999;
  --color-modal-bg: rgba(18, 18, 40, 0.85);
  --color-modal-date: #bbe;
  --rect-color: #825eff;

  /* Tag colors */
  --tag-update: #ff4b4b;
  --tag-version: #2fd46c;
  --tag-beta: #ad7aff;
  --tag-alpha: #49baff;

  /* Misc */
  --radius: 10px;
  --radius-large: 16px;
  --blur-bg: blur(8px);
}

/* setting pulse glow colour to change */
.pulse-rect {
  stroke: var(--rect-color);
}

/* ---- theme: catalyst ---- */
body.theme-catalyst {
  --color-bg-main: #32149b;
  --color-bg-container: rgba(14, 14, 22, 0.6);
  --color-bg-alt: rgba(14, 14, 22, 0.8);

  --color-accent: #310b54;
  --color-accent-hover: #511247;
  --color-accent-focus: #4d1498;
  --color-accent-border: #5d11bd;

  --color-input: #c74cfd;
  --color-splash-text: #ff6fd8;
  --color-bg-drop: #5d11bd;
  --rect-color: #c74cfd;

  --color-quiz-selector: rgba(14, 14, 22, 0.9);
}

/* also previously nested lol */
body.theme-catalyst #quizScreen,
body.theme-catalyst #resultsScreen,
body.theme-catalyst #reviewScreen,
body.theme-catalyst .container.bg {
  background: var(--color-bg-container) !important;
  transition: background 0.3s ease;
}

/* ---- theme: dark ---- */
body.theme-dark {
  --color-bg-main: #181f30;
  --color-bg-container: #141a2b;
  --color-bg-alt: #181f30;

  --color-accent: #1a9fc8;
  --color-accent-hover: #109294;
  --color-accent-focus: #23a9f6;
  --color-accent-border: #23d6e0;
  --color-accent-selected: #23a9f6;

  --color-text: #e9eefa;
  --color-shape: #2e3d54;
  --color-shape2: #294065;
  --color-shape-diamond: #3b7cc0;
  --color-shape-diamond-alt: #f5f7fa;

  --color-input: #23a9f6;
  --color-splash-text: #23a9f6;
  --color-bg-drop: #23d6e0;
  --rect-color: #e0d6ff;

  --color-question-count: #181f30;
  --color-quiz-selector: var(--color-bg-container);
}

/* ---- theme: light ---- */
body.theme-light {
  --color-bg-main: #f6f9fa;
  --color-bg-container: #e9ebf0;
  --color-bg-alt: #f3f4f7;

  --color-accent: #ff7d36;
  --color-accent-hover: #ff9652;
  --color-accent-focus: #4eb3f2;
  --color-accent-border: #ff9652;
  --color-accent-selected: #f16100;
  --settings-border: #21232a;

  --color-text: #21232a;
  --color-text-muted: #777777;
  --color-h1: #21232a;
  --color-shape: #d3d6db;
  --color-shape2: #4eb3f2;
  --color-shape-diamond: #4eb3f2;
  --color-shape-diamond-alt: #ff7d36;

  --color-input: #ff7d36;
  --color-splash-text: #ff7d36;
  --color-bg-drop: #ff9652;
  --rect-color: #53d2fa;

  --theme-bg: #e9ebf0;
  --color-question-count: #d3d6db;
  --color-quiz-selector: rgba(233, 235, 240, 0.88);
}

/* these were nested originally, flattened them so they actually apply */
body.theme-light h2 {
  color: #21232a;
}
body.theme-light .large-modal-content {
  color: #21232a;
}

/* ---- theme: rain ---- */
body.theme-rain {
  --color-bg-container: rgba(38, 48, 56, 0.38);
  --color-bg-main: #3e7d8c;
  --color-bg-alt: rgba(38, 48, 56, 0.38);

  --color-accent: #2b6471;
  --color-accent-hover: #3a7b8a;
  --color-accent-focus: #5b98a6;
  --color-accent-border: #3a7b8a;
  --color-accent-selected: #649daa;

  --color-input: #6ca2ae;
  --color-splash-text: #7cf9fc;
  --color-bg-drop: #3a7b8a;
  --rect-color: #7cf9fc;

  --color-quiz-selector: rgba(38, 48, 56, 0.88);
  --color-question-count: rgba(38, 48, 56, 0.88);
  --theme-bg: #2b3f48;

  --settings-border: rgba(255, 255, 255, 0.7);

  /* glasseous look */
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(24, 32, 60, 0.16);
  backdrop-filter: blur(9px) saturate(1.18);
  -webkit-backdrop-filter: blur(9px) saturate(1.18);
}

/* ---- global theme hooks ---- */
body {
  background: var(--color-bg-main) !important;
}
.quiz-footer {
  background: var(--color-bg-footer) !important;
}

/* ---- speech bubbles ---- */
.speech-bubble {
  position: absolute;
  left: 130%;
  top: 50%;
  transform: translateY(-50%);
  background: #232a4d;
  color: #fff;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  white-space: pre-line;
  min-width: 260px;
  max-width: 300px;
  max-height: 70px;
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
  animation: bubbleIn 0.2s;
  display: block;
}

#catalystSpeechBubble #settip,
#rainSpeechBubble #settip {
  display: flex;
  justify-content: center;
}

#rainSpeechBubble .bubble-intro {
  display: inline;
  padding: 25px;
}

.speech-bubble .bubble-arrow {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 14px solid #232a4d;
}

.speech-bubble.hidden {
  display: none;
  opacity: 0;
}

@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}