/* Assuming your main theme variables are defined in a separate block like this: */
/*
:root {
  --katex-gradient-start: #6a11cb;
  --katex-gradient-end: #2575fc;
  --katex-font-size: 21px;
  --katex-line-height: 1.8;
  --katex-fallback-color: #eaf4ff;

  --primary: #2575fc;
  --accent: #4897fc;
  --highlight: #6a11cb;
  --alert: #ff3b3f;
  --success-color: #10b981; // Added success color

  --bg-primary: #0b0c14;
  --bg-secondary: #121320;
  --bg-tertiary: #1a1b2a;

  --text-primary: #f1f5ff;
  --text-secondary: #9ea5bc;

  --card-bg: var(--bg-secondary);
  --btn-color: var(--primary);
  --btn-hover: var(--highlight);

  --dots-color: var(--accent);
  --radius: 1rem;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --transition: background 0.3s ease, color 0.3s ease;

  --on-surface-base: #ffffff; // Text color for primary/accent/success/alert backgrounds (ensure contrast)
}

body.theme-light {
    // ... light theme variable overrides
    --alert: #d32f2f;
    --success-color: #2e7d32;
    --on-surface-base: #000000; // Dark text for light backgrounds
     --card-bg: #ffffff; // Use pure white for cards in light mode
      --bg-primary: #ffffff;
      --bg-secondary: #f0f2f5;
      --bg-tertiary: #e9ecef;
      --text-primary: #212529;
      --text-secondary: #6c757d;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // Lighter shadow for light theme
}

body.theme-dark {
    // ... dark theme variable overrides
     --alert: #ef4444; // Ensure alert is visible on dark background
     --success-color: #4ade80; // Lighter green for dark theme success
      --on-surface-base: #ffffff; // Light text for dark backgrounds
       --bg-primary: #0a0a13;
       --bg-secondary: #13131f;
       --bg-tertiary: #1e1e2e;
       --text-primary: #f0f4ff;
       --text-secondary: #8992a9;
}
*/

/* ------------------------------
🌐 Global Reset & Layout
------------------------------ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  /* Use theme variables for body background and text color */
  background-color: var(--bg-primary);
  font-family: 'Segoe UI', sans-serif;
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Body transition handled by theme classes */
}
/* ------------------------------
🐾 Hide Default List Markers & Enable Emoji Fonts
------------------------------ */

/* Target only your two lists */
#fraction-leaderboard-list,
#fraction-history-list {
  list-style: none;    /* no bullets */
  margin: 0;
  padding: 0;
}

/* Make sure list items don’t re-introduce markers */
#fraction-leaderboard-list li,
#fraction-history-list li {
  list-style: none;
  font-family:sans-serif;        /* fallbacks for any emoji glyphs */
  margin-bottom: 4px;  /* optional spacing */
  /* Color will be inherited */
}

/* ------------------------------
📦 Game Container
------------------------------ */
#fraction-container {
  width: 92%;
  max-width: 420px;
  padding: 16px;
  border-radius: var(--radius); /* Use theme radius */
  box-shadow: var(--shadow); /* Use theme shadow */
  text-align: center;
  background-color: var(--card-bg); /* Use theme's card background */
  margin: 0 auto;
  position: relative; /* NEW */
  /* Text color will be inherited */
}

/* ------------------------------
🧠 Header & Stats
------------------------------ */
#fraction-title {
  font-size: 24px; /* Keep specific size or use theme font variable */
  margin-bottom: 10px;
   color: var(--text-primary); /* Use primary text color for title */
}

#fraction-stats {
  display: flex;
  justify-content: center;
  font-size: 16px; /* Keep specific size or use theme font variable */
  margin-bottom: 8px;
  color: var(--text-secondary); /* Use secondary text color for stats */
}

/* ------------------------------
💬 Message
------------------------------ */
#fraction-message {
  min-height: 24px; /* Keep specific size */
  font-size: 15px; /* Keep specific size or use theme font variable */
  margin-bottom: 12px;
  /* Color will be set by JS or a class like .error or .success */
}

/* Add classes for message colors */
#fraction-message.success {
    color: var(--success-color);
}
#fraction-message.error {
    color: var(--alert);
}


/* ------------------------------
🎲 Game Grid Layout
------------------------------ */
#fraction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Keep layout */
  gap: 8px; /* Keep spacing */
}

/* ------------------------------
🃏 Card Container
------------------------------ */
.fraction-card {
  perspective: 800px; /* Keep perspective */
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: block;
}

.fraction-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease; /* Keep transition */
  transform-style: preserve-3d;
  cursor: pointer;
}

.fraction-card.flipped .fraction-inner {
  transform: rotateY(180deg); /* Keep transform */
}

/* ------------------------------
🧩 Card Faces
------------------------------ */
.fraction-front,
.fraction-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px; /* Keep specific radius or use theme variable */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; /* Keep specific size or use theme font variable */
  font-weight: bold;
  /* Color will be set below */
}

.fraction-back {
  /* Use a darker background color from theme */
  background-color: var(--bg-tertiary);
  color: var(--text-primary); /* Text color for the back */
}

.fraction-front {
  /* Use accent color for the front */
  background-color: var(--accent);
  transform: rotateY(180deg);
  /* Use text color suitable for accent background */
  color: var(--on-surface-base);
}

/* ─── UPDATED BLOCK: Hide “?” when card is flipped ───────────────── */
.fraction-card.flipped .fraction-back {
  visibility: hidden; /* Keep visibility */
}
/* ─────────────────────────────────────────────────────────────── */

/* ------------------------------
✨ Match/Fail Flash
------------------------------ */
.fraction-card.matched .fraction-front {
  background-color: var(--success-color); /* Use success color for match */
  color: var(--on-surface-base); /* Text color suitable for success background */
}

@keyframes fraction-flash {
  0%   { transform: scale(1); }
  50%  { background-color: var(--alert); transform: scale(1.05); } /* Use alert color for mismatch flash, keep transform */
  100% { transform: scale(1); }
}

.fraction-card.mismatched {
  animation: fraction-flash 0.3s ease-in-out; /* Keep animation */
}

/* ------------------------------
⏱️ Timer
------------------------------ */
#fraction-timer {
  font-size: 18px; /* Keep specific size or use theme font variable */
  margin-bottom: 10px;
  color: var(--accent); /* Use accent color for timer */
}

/* Add a class for low time if needed */
#fraction-timer.time-low {
    color: var(--alert); /* Use alert color for low time */
}


/* ------------------------------
🎮 Fraction Matcher Buttons Styling
------------------------------ */

/* Base styling for both buttons */
.fraction-button {
  background-color: var(--accent); /* Use accent color for buttons */
  color: var(--on-surface-base); /* Text color suitable for accent background */
  font-size: 16px; /* Keep specific size or use theme font variable */
  font-weight: bold;
  border: none;
  border-radius: 12px; /* Keep specific radius or use theme variable */
  padding: 12px 30px; /* Keep padding */
  cursor: pointer;
  transition: var(--transition); /* Use theme transition */
  outline: none;
  width: 90%; /* Keep width */
  max-width: 350px; /* Keep max-width */
  margin: 10px auto; /* Keep margin */
  display: block;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Keep specific shadow or use theme variable */
}

.fraction-button:hover:not(:disabled), /* Add :not(:disabled) for better hover behavior */
.fraction-button:focus:not(:disabled) {
  background-color: var(--highlight); /* Use highlight color on hover/focus */
  transform: translateY(-2px); /* Keep transform */
}

.fraction-button:active:not(:disabled) { /* Add :not(:disabled) */
  transform: scale(0.98); /* Press effect */
}

/* Disabled button styles */
.fraction-button:disabled {
    background-color: var(--bg-tertiary); /* Use tertiary background when disabled */
    color: var(--text-secondary); /* Use secondary text color when disabled */
    cursor: not-allowed;
    opacity: 0.7; /* Keep opacity */
}


/* ------------------------------
🔄 Fraction Replay Button
------------------------------ */
.fraction-replay-button {
  background-color: var(--text-secondary); /* Use secondary text color */
  color: var(--bg-primary); /* Text color suitable for secondary text background (often a dark color) */
}

/* ------------------------------
💡 Fraction Hint Button
------------------------------ */
.fraction-hint-button {
  background-color: var(--text-secondary); /* Use secondary text color */
  color: var(--bg-primary); /* Text color suitable for secondary text background */
  margin-top: 10px; /* Keep margin */
}

/* ------------------------------
📈 Streak Progress Bar
------------------------------ */
#fraction-streak {
  margin-top: 15px; /* Keep margin */
  font-size: 14px; /* Keep specific size or use theme font variable */
}

/* Progress Bar Track */
.fraction-progress-bar {
  width: 100%; /* Keep width */
  background-color: var(--bg-tertiary); /* Use tertiary background for track */
  border-radius: 8px; /* Keep specific radius */
  height: 14px; /* Keep height */
  overflow: hidden;
}

/* Progress Bar Fill */
.fraction-progress-fill {
  background-color: var(--success-color); /* Use success color for the fill */
  width: 0;                     /* will be updated via JS */
  height: 100%;
  transition: width 0.3s ease; /* Keep transition */
}

/* ------------------------------
🏆 Leaderboard (Note: Duplicate section in original, consolidating)
------------------------------ */
/* #fraction-leaderboard {
  margin-top: 20px;
}

#fraction-leaderboard-list {
  list-style-type: none;
  padding: 0;
} */

/* ------------------------------
🎯 Fraction Streak Counter (Duplicate section in original, consolidating)
------------------------------ */
/* .fraction-streak {
  margin: 12px 0;
}

.fraction-progress-bar {
  width: 100%;
  background-color: #444;
  border-radius: 8px;
  height: 14px;
  overflow: hidden;
}

.fraction-progress-fill {
  background-color: var(--fraction-accent);
  width: 0;
  height: 100%;
  transition: width 0.3s ease;
} */

/* ------------------------------
✨ Fraction XP Floating Animation
------------------------------ */
.fraction-xp-float {
  position: absolute;
  pointer-events: none;
  font-size: 40px;             /* BIGGER text */
  font-weight: bold;             /* Bolder */
  color: var(--success-color); /* Use success color for XP text */
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: fraction-float-center 2.5s ease-out forwards; /* Keep animation */
  z-index: 9999; /* Keep z-index */
  text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Keep text shadow for visibility */
}

@keyframes fraction-float-center {
  0% {
    opacity: 1;
    /* starts at center */
  }
  100% {
    opacity: 0;
    top: 20%; /* moves up to 20% from top of container */
    transform: translateX(-50%); /* keep horizontally centered */
  }
}

/* ------------------------------
🏅 Fraction Badge Progress
------------------------------ */
.fraction-badge-container {
  margin: 12px 0; /* Keep margin */
  position: relative; /* for popup positioning */
}

.fraction-badge-label {
  font-size: 16px; /* Keep specific size or use theme font variable */
  margin-bottom: 6px; /* Keep margin */
  color: var(--text-primary); /* Use primary text color for label */
}

.fraction-badge-bar {
  width: 100%; /* Keep width */
  background-color: var(--bg-tertiary); /* Use tertiary background for track */
  border-radius: 8px; /* Keep specific radius */
  height: 14px; /* Keep height */
  overflow: hidden;
}

.fraction-badge-progress {
  background-color: var(--primary); /* Use primary color for badge progress */
  width: 0;
  height: 100%;
  transition: width 0.5s ease; /* Keep transition */
}

/* Badge Unlock Popup */
.fraction-badge-popup {
  position: absolute;
  top: 40%; /* Keep position */
  left: 50%;
  transform: translateX(-50%) scale(0.8); /* Keep transform */
  background-color: var(--accent); /* Use accent color for popup background */
  color: var(--on-surface-base); /* Text color suitable for accent background */
  padding: 8px 16px; /* Keep padding */
  border-radius: 8px; /* Keep specific radius */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease; /* Keep transition */
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000; /* Keep z-index */
}

.fraction-badge-popup.show {
  opacity: 1;
  transform: translateX(-50%) scale(1); /* Keep transform */
}

/* ------------------------------
🏆 Fraction Leaderboard (Consolidated section)
------------------------------ */
.fraction-leaderboard-container {
  margin-top: 20px; /* Keep margin */
  text-align: left;
  max-width: 420px; /* Keep max-width */
  margin: 20px auto 0; /* Keep margin */
  padding-bottom: 10px; /* Keep padding */
  /* Use a theme color for the border */
  border-top: 1px solid var(--bg-tertiary); /* Use tertiary background for border */
}

.fraction-leaderboard-title {
  margin: 12px 0 8px; /* Keep margin */
  font-size: 18px; /* Keep specific size or use theme font variable */
  color: var(--text-primary); /* Use primary text color */
   /* Use a theme color for the border */
  border-bottom: 1px solid var(--bg-secondary); /* Use secondary background for border */
  padding-bottom: 4px; /* Keep padding */
}

.fraction-leaderboard-list {
  list-style: none; /* Keep list style */
  padding: 0; /* Keep padding */
  margin: 0; /* Keep margin */
}

.fraction-leaderboard-list li {
  background-color: var(--bg-secondary); /* Use secondary background */
  margin-bottom: 4px; /* Keep margin */
  padding: 6px 8px; /* Keep padding */
  border-radius: 6px; /* Keep specific radius */
  font-size: 14px; /* Keep specific size or use theme font variable */
  color: var(--text-primary); /* Use primary text color */
  line-height: 1.3; /* Keep line height */
}

/* ------------------------------
📜 Fraction History (Consolidated section)
------------------------------ */
.fraction-history-container {
  margin-top: 20px; /* Keep margin */
  text-align: left;
  max-width: 420px; /* Keep max-width */
  margin: 20px auto 0; /* Keep margin */
  padding-bottom: 10px; /* Keep padding */
   /* Use a theme color for the border */
  border-top: 1px solid var(--bg-tertiary); /* Use tertiary background for border */
}

.fraction-history-title {
  margin: 12px 0 8px; /* Keep margin */
  font-size: 18px; /* Keep specific size or use theme font variable */
  color: var(--text-primary); /* Use primary text color */
   /* Use a theme color for the border */
  border-bottom: 1px solid var(--bg-secondary); /* Use secondary background for border */
  padding-bottom: 4px; /* Keep padding */
}

.fraction-history-list {
  list-style: none; /* Keep list style */
  padding: 0; /* Keep padding */
  margin: 0 0 10px 0; /* Keep margin */
}

.fraction-history-list li {
  background-color: var(--bg-secondary); /* Use secondary background */
  margin-bottom: 4px; /* Keep margin */
  padding: 6px 8px; /* Keep padding */
  border-radius: 6px; /* Keep specific radius */
  font-size: 14px; /* Keep specific size or use theme font variable */
  color: var(--text-primary); /* Use primary text color */
  line-height: 1.3; /* Keep line height */
}

/* ------------------------------
🏆 Fraction Record-Breaker Overlay
------------------------------ */
.fraction-record-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Use a semi-transparent dark color derived from theme */
  background: color-mix(in srgb, var(--bg-primary) 90%, black 10%); /* Use primary background mixed with black */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Keep z-index */
  padding: 16px; /* Keep padding */
}
.fraction-record-overlay.hidden {
  display: none; /* Keep display */
}

.fraction-record-popup {
  background-color: var(--card-bg); /* Use theme's card background */
  padding: 24px; /* Keep padding */
  border-radius: var(--radius); /* Use theme radius */
  text-align: center;
  color: var(--text-primary); /* Use primary text color */
  max-width: 80%; /* Keep max-width */
}

/* Buttons within record popup */
.fraction-next-level-button {
  margin-top: 16px; /* Keep margin */
  background-color: var(--success-color); /* Use success color */
  color: var(--on-surface-base); /* Text color suitable for success background */
}

.fraction-restart-all-button {
  margin-top: 8px; /* Keep margin */
  background-color: var(--text-secondary); /* Use secondary text color */
  color: var(--bg-primary); /* Text color suitable for secondary text background */
}



/* ------------------------------
🛠️ Overlay “You Did It!” Popup Fixes
------------------------------ */
.fraction-record-popup {
  max-width: 300px;            /* don’t let it stretch too wide */
  padding: 16px 24px;          /* tighten padding */
}

.fraction-record-popup h2 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text-primary); /* Ensure consistent title color */
}

.fraction-record-popup p {
  margin: 0 0 16px 0;
  font-size: 14px; /* Keep size */
   color: var(--text-secondary); /* Use secondary text color for paragraph */
}

/* Make only the two action buttons full width, and the sound toggle small */
.fraction-record-popup .fraction-button {
  width: 100%; /* Keep width */
  margin: 8px 0; /* Keep margin */
  /* Colors are handled by the specific button rules */
}

.fraction-record-popup .fraction-sound-toggle {
  width: auto; /* Keep width */
  padding: 6px 12px; /* Keep padding */
  font-size: 14px; /* Keep size */
  margin: 0 auto 12px; /* Keep margin */
  display: inline-block;
   color: var(--text-secondary); /* Use secondary text color for toggle */
    background: none; /* Ensure no background */
    border: none; /* Ensure no border */
}

/* ------------------------------
📊 Leaderboard & History List Fixes
------------------------------ */
.fraction-leaderboard-container,
.fraction-history-container {
  max-width: 420px; /* Keep max-width */
  margin: 20px auto 0; /* Keep margin */
  padding-bottom: 10px; /* Keep padding */
  /* Use a theme color for the border */
  border-top: 1px solid var(--bg-tertiary); /* Use tertiary background for border */
}

.fraction-leaderboard-title,
.fraction-history-title {
  margin: 12px 0 8px; /* Keep margin */
  font-size: 18px; /* Keep size */
  color: var(--text-primary); /* Use primary text color */
  /* Use a theme color for the border */
  border-bottom: 1px solid var(--bg-secondary); /* Use secondary background for border */
  padding-bottom: 4px; /* Keep padding */
}

.fraction-leaderboard-list li,
.fraction-history-list li {
  margin: 4px 0; /* Keep margin */
  padding: 6px 8px; /* Keep padding */
  background: var(--bg-secondary); /* Use secondary background */
  border-radius: 4px; /* Keep specific radius */
  font-size: 14px; /* Keep size */
  color: var(--text-primary); /* Use primary text color */
  line-height: 1.3; /* Keep line height */
}

/* Ensure “Clear History” sits below without overlapping */
#fraction-clear-history {
  display: block;
  margin: 12px auto 0; /* Keep margin */
  width: auto; /* Keep width */
  padding: 8px 16px; /* Keep padding */
  /* Color handled by fraction-button styles and specific hover below */
}

/* Specific styling for the clear history button (already handled above) */
/* #fraction-clear-history.fraction-button { ... } */
/* #fraction-clear-history.fraction-button:hover:not(:disabled) { ... } */


/* ─── MOBILE: SHOW ONLY FIRST 5 ITEMS (Layout/Animation) ─────────────────────────────────── */
.accordion-container {
  overflow: hidden;
  max-height: calc(1.5rem * 5); /* 5 items × 1.5rem line-height */
  transition: max-height 0.3s ease;
}

/* style your toggle button */
.accordion-button {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  font-size: 0.875rem; /* Keep specific size or use theme font variable */
  font-weight: 500;
  text-align: center;
  background: none;
  border: none;
  color: var(--accent); /* Use accent color for toggle button */
  cursor: pointer;
}

/* ─── WHEN EXPANDED: REMOVE HEIGHT LIMIT (Layout/Animation) ─────────────────────────────── */
.accordion-container.expanded {
  max-height: 999px;               /* big enough to fit all items */
}

/* ─── Accordion: scrollable + animated expand/collapse (Layout/Animation) ───────────────── */

/* Collapsed: show 5 items, enable inner scrolling on mobile */
.accordion-container {
  max-height: calc(1.5rem * 5);    /* 5 lines high */
  overflow-y: auto;                /* allow scrolling to see the rest */
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
  transition: max-height 0.3s ease;  /* animate height change */
}

/* Expanded: lift the height cap (numeric for animation) */
.accordion-container.expanded {
  max-height: 999px;               /* big enough to fit all items */
}

/* ─── NEW: Tour Overlay Styles ─────────────────────────────── */
.tour-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  /* Use a semi-transparent dark color derived from theme */
  background: color-mix(in srgb, var(--bg-primary) 90%, black 10%); /* Use primary background mixed with black */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* Keep z-index */
  padding: 16px; /* Keep padding */
}

.tour-content {
  position: relative;
  background: var(--card-bg); /* Use theme's card background */
  color: var(--text-primary); /* Use primary text color */
  width: 100%; /* Keep width */
  max-width: 360px; /* Keep max-width */
  border-radius: var(--radius); /* Use theme radius */
  padding: 20px 16px 24px; /* Keep padding */
  box-shadow: var(--shadow); /* Use theme shadow */
  text-align: left;
  font-size: 16px; /* Keep specific size or use theme font variable */
}

.tour-close {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  font-size: 24px; /* Keep specific size */
  color: var(--text-secondary); /* Use secondary text color for close button */
  cursor: pointer;
  line-height: 1;
}

.tour-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 20px; /* Keep specific size or use theme font variable */
  text-align: center;
  color: var(--text-primary); /* Use primary text color for title */
}

.tour-steps {
  padding-left: 20px; /* Keep padding */
  margin: 0; /* Keep margin */
   /* Color will be inherited */
}

.tour-steps li {
  margin-bottom: 8px; /* Keep margin */
  line-height: 1.4; /* Keep line height */
   /* Color will be inherited */
}
/* ───────────────────────────────────────────────────────────── */
/* ─── NEW: Tour Play Button ───────────────────────────────────── */
.tour-play-btn {
  display: block;
  width: 100%; /* Keep width */
  margin: 16px 0 0; /* Keep margin */
  padding: 12px; /* Keep padding */
  background-color: var(--accent); /* Use accent color */
  color: var(--on-surface-base); /* Text color suitable for accent background */
  border: none;
  border-radius: 8px; /* Keep specific radius or use theme variable */
  font-size: 16px; /* Keep specific size or use theme font variable */
  font-weight: bold;
  cursor: pointer;
}
.tour-play-btn:hover {
  background-color: var(--highlight); /* Use highlight color on hover */
}
/* ─────────────────────────────────────────────────────────────── */