/* ---------- 1. BASE LIGHT (paste ONCE) ---------- */
:root {
  /* core hue/sat/lum make it very easy to recolour the whole UI */
  --primary-h: 221; /* Classic Blue defaults */
  --primary-s: 83%;
  --primary-l: 57%;

  --primary-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-dark: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 15%));
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 15%)); /* Adjusted for better lightness */

  --secondary-color: #e5e7eb;
  --success-color: #16a34a; /* Updated success */
  --danger-color: #dc2626; /* Updated danger */
  /* --warning-color: #f59e0b; /* Original warning color, define if used */

  --bg-color: #f3f4f6;
  --surface-color: #ffffff;

  --text-darker: #111827;
  --text-light: #ffffff;
  --text-muted: #6b7280;

  --radius-sm: .25rem; /* 4px */
  --radius-md: .45rem; /* Approx 7px, slightly adjusted from original 0.4rem */
  --container-max-width: 750px;
  --spacing-unit: 0.5rem; /* 8px, can be multiplied */
}

/* ---------- 2. BASE DARK ---------- */
body.dark {
  --bg-color: #0f172a;
  --surface-color: #1e293b;
  --secondary-color: #334155;

  --text-darker: #e2e8f0;
  --text-light: #e2e8f0; /* Often same as --text-darker in dark mode for body text */
  --text-muted: #94a3b8;

  /* accent shifts slightly brighter on dark so it ‘pops’ */
  --primary-l: 65%;
  /* --primary-light might need adjustment for dark mode if used on dark surfaces */
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 25%)); /* Darker shade for dark mode "light" effect */


  /* Specific overrides for success/danger on dark if needed, otherwise they use root definitions */
  /* For example, if #16a34a is too dark on #1e293b, you might define a brighter version here */
  /* --success-color: #22c55e; */
  /* --danger-color: #f87171; */
}

/* ---------- 3. SOLAR DARK (optional extra theme) ---------- */
body.theme-solar {
  --bg-color: #0d1117;
  --surface-color: #161b22;
  --secondary-color: #30363d;

  --text-darker: #c9d1d9;
  --text-light: #c9d1d9;
  --text-muted: #8b949e;

  --primary-h: 197;
  --primary-s: 89%;
  --primary-l: 48%; /* teal-ish accent */
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 10%)); /* Adjusted for solar */
}

/* Smooth color transitions */
body, .app-header, .container, .choice,
button, .progress-bar, .subject-card, .mode-card,
.theme-toggle .slider, .theme-toggle .slider::before {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}


/* Basic Reset and Body Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-darker);
  line-height: 1.6;
}

.app-header {
  width: 100%;
  /* background-color: var(--primary-color); */ /* Replaced by gradient */
    background: linear-gradient(90deg, hsl(0deg 10.43% 5.84%) 0%, var(--primary-dark) 80%);
    color: var(--text-light);
    padding: calc(var(--spacing-unit) * 2) 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    margin-bottom: calc(var(--spacing-unit) * 2);
    position: relative;
}
.app-header h1 {
  margin: 0;
  font-size: 1.8em;
  color: var(--text-light); /* Ensures text is light on gradient */
  letter-spacing: .5px;
  font-weight: 600;
}

/* Main Application Container */
.container {
  max-width: var(--container-max-width);
  width: 100%;
  padding: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 4);
  background-color: var(--surface-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 300px;
}

.loading-message {
  text-align: center;
  color: var(--primary-color);
  margin-top: calc(var(--spacing-unit) * 4);
  font-size: 1.2em;
}

/* Headings */
h1, h2, h3 {
  text-align: center;
  color: var(--primary-color); /* Default for h1 (screen titles) and h3 (mode card titles) */
}
h1 { /* For screen titles within .container */
  margin-bottom: calc(var(--spacing-unit) * 3);
  font-size: 1.75em;
}
h2 { /* For question text or section titles */
  margin-top: 0;
  margin-bottom: calc(var(--spacing-unit) * 3);
  font-size: 1.4em;
  line-height: 1.4;
  color: var(--text-darker); /* Questions are darker */
}
h3 { /* For sub-sections or info */
    font-size: 1.2em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-unit);
}


/* Buttons */
.button, button {
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
  background-color: var(--primary-color);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.1s ease; /* Base transition, global adds bgcolor */
  user-select: none;
}
.button:hover:not([disabled]), button:hover:not([disabled]) {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
}
.button:active:not([disabled]), button:active:not([disabled]) {
  transform: translateY(0px);
}
.button[disabled], button[disabled] {
  background-color: var(--secondary-color);
  color: var(--text-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

.button-secondary {
  background-color: #6b7280; /* Using a specific gray, could be var(--text-muted) if desired */
  color: var(--text-light);
}
.button-secondary:hover:not([disabled]) {
  background-color: #4b5563; /* Darker Gray */
}

.button-success {
  background-color: var(--success-color);
  color: var(--text-light);
}
.button-success:hover:not([disabled]) {
  background-color: #15803d; /* Darker shade of new success-color */
}
.button-danger {
  background-color: var(--danger-color);
  color: var(--text-light);
}
.button-danger:hover:not([disabled]) {
  background-color: #b91c1c; /* Darker shade of new danger-color */
}

/* === Initial Choice & Custom Exam Setup & Mode Selection === */
.initial-choice-screen,
.subject-selection-screen,
.mode-selection-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2.5);
  padding-top: calc(var(--spacing-unit) * 2); /* For initial-choice */
}
.initial-choice-screen .mode-card {
    max-width: 550px;
}

.subject-card, .mode-card {
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing-unit) * 2.5);
  width: 100%;
  max-width: 500px; /* Default for subject/mode */
  text-align: center;
  background-color: var(--surface-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.07);
  /* transition handled globally */
}
.subject-card:hover, .mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
.subject-card h3, .mode-card h3 { /* Card titles */
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
  color: var(--primary-color);
  font-size: 1.3em;
}
.subject-card p, .mode-card p { /* Card descriptions */
  color: var(--text-muted);
  font-size: 0.95em;
  margin-bottom: calc(var(--spacing-unit) * 2.5);
  min-height: 40px;
}

.custom-exam-setup-screen {
  padding: var(--spacing-unit);
}
.custom-exam-setup-screen form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2.5);
}
.subject-config-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 2);
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-color); /* Slightly different from surface for visual separation */
}
body.dark .subject-config-item {
  background-color: hsl(var(--primary-h), var(--primary-s), 15%); /* Darker distinct background for dark mode */
}
.subject-config-item label {
  flex-grow: 1;
  font-weight: 500;
  color: var(--text-darker);
}
.subject-config-item input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: var(--spacing-unit);
  accent-color: var(--primary-color);
}
.subject-config-item input[type="number"] {
  padding: var(--spacing-unit);
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-sm);
  width: 70px;
  text-align: center;
  background-color: var(--surface-color);
  color: var(--text-darker);
}
.subject-config-item input[type="number"]:disabled {
  background-color: var(--secondary-color); /* Use secondary for disabled bg */
  color: var(--text-muted);
  cursor: not-allowed;
}
.custom-exam-setup-screen form .button[type="submit"] {
  margin-top: calc(var(--spacing-unit) * 2);
  background-color: var(--success-color);
}
.custom-exam-setup-screen form .button[type="submit"]:hover {
  background-color: #15803d; /* Darker success */
}


/* Answer Choices */
.choices-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1.2);
}
.choice {
  display: flex;
  align-items: center;
  border: 2px solid var(--secondary-color);
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: calc(var(--spacing-unit) * 0.8);
  /* transition handled globally */
  text-align: left;
  background-color: var(--surface-color);
  user-select: none;
  color: var(--text-darker);
}
.choice input[type="radio"],
.choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1em;
  height: 1em;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  outline: none;
  position: relative;
  margin-right: calc(var(--spacing-unit) * 1.5);
  transform: scale(1.3);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.2s ease;
  background: var(--surface-color);
}
.choice input[type="radio"]:checked::before,
.choice input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--primary-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.choice input[type="radio"]:hover,
.choice input[type="checkbox"]:hover {
  border-color: var(--primary-color);
}
.choice input[type="radio"]:focus-visible,
.choice input[type="checkbox"]:focus-visible {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.choice .choice-label {
  flex-grow: 1;
  cursor: pointer;
}
.choice:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-light); /* Use primary-light for hover */
  transform: translateX(2px);
}
.choice.selected {
  background-color: var(--primary-color);
  color: var(--text-light);
  border-color: var(--primary-color);
  font-weight: 500;
}
.choice.correct {
  background-color: var(--success-color);
  border-color: #15803d; /* Darker success for border */
  color: var(--text-light);
}
.choice.incorrect {
  background-color: var(--danger-color);
  border-color: #b91c1c; /* Darker danger for border */
  color: var(--text-light);
  opacity: 0.9; /* Slightly less opacity */
}
.choice.actual-correct {
  border: 3px solid var(--success-color) !important;
  box-shadow: 0 0 8px var(--success-color);
}
.choice.disabled, .choice[disabled] { /* Added .choice[disabled] for consistency */
    cursor: not-allowed;
    opacity: 0.7;
}
.choice.disabled .choice-label, .choice[disabled] .choice-label {
    cursor: not-allowed;
}
.choice[disabled] input {
    pointer-events: none;
}


/* Feedback Area */
.feedback-area {
  margin-top: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 500;
}
.feedback-area.correct {
  background-color: #d1fae5; /* Light Green - keeping static for now */
  color: #065f46; /* Dark Green text - keeping static */
  border: 1px solid #6ee7b7; /* Light Green border - keeping static */
}
.feedback-area.incorrect {
  background-color: #fee2e2; /* Light Red - keeping static */
  color: #991b1b; /* Dark Red text - keeping static */
  border: 1px solid #fca5a5; /* Light Red border - keeping static */
}
/* Consider theming feedback areas if they clash with dark/solar themes */
body.dark .feedback-area.correct {
    background-color: #065f46; color: #d1fae5; border-color: #10b981;
}
body.dark .feedback-area.incorrect {
    background-color: #991b1b; color: #fee2e2; border-color: #ef4444;
}
.feedback-area .explanation {
    font-size: 0.9em;
    margin-top: var(--spacing-unit);
    font-weight: normal;
    text-align: left;
    color: inherit; /* Inherit from parent feedback-area */
}

/* Progress Bar */
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-unit);
}
.progress-text {
  font-size: 0.9em;
  color: var(--text-muted);
}
.score-text {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--primary-color);
}
.progress-container {
  height: 12px;
  background-color: var(--secondary-color);
  border-radius: var(--radius-sm);
  margin-bottom: calc(var(--spacing-unit) * 3);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  width: 0%;
  /* transition handled globally */
  border-radius: var(--radius-sm);
}

/* Navigation Buttons Container */
.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--spacing-unit) * 4);
  padding-top: calc(var(--spacing-unit) * 2);
  border-top: 1px solid var(--secondary-color);
}
.navigation-buttons .button {
  min-width: 120px;
}

/* Results View */
.result-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-unit) * 1.5);
  padding-top: calc(var(--spacing-unit) * 2);
  text-align: center;
}
.result-view h1 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}
.result-view p {
  font-size: 1.15em;
  margin: calc(var(--spacing-unit) * 0.8) 0;
  color: var(--text-darker);
}
.result-view strong {
  color: var(--primary-color);
  font-weight: 600;
}
.result-buttons {
  margin-top: calc(var(--spacing-unit) * 3);
  display: flex;
  gap: calc(var(--spacing-unit) * 2);
  flex-wrap: wrap;
  justify-content: center;
}

/* God Mode Specific Styles */
.god-mode-challenge {
  text-align: center;
}
.god-mode-presented{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin: calc(var(--spacing-unit) * 2) 0;
}
.god-mode-challenge .presented-choice { /* Renamed to match HTML if it's a single element */
  background: var(--primary-light);
  color: var(--primary-dark); /* Text on light primary bg */
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px dashed var(--primary-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  max-width: 90%;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
body.dark .god-mode-challenge .presented-choice {
    color: var(--text-darker); /* Adjust if primary-light is too dark in dark mode */
}

.god-mode-instruction{
  font-size:.95rem;
  color:var(--text-muted);
  margin:.75rem 0 1.5rem;
  text-align:center;
}
.variant-badge{
  display:inline-block;
  background:var(--secondary-color);
  color:var(--text-darker); /* text-darker on secondary-color */
  font-size:.8rem;
  padding:.15rem .5rem;
  border-radius:9999px;
  margin-left:.5rem;
}
body.dark .variant-badge {
    color: var(--text-light); /* Light text on dark secondary color */
}

.god-mode-buttons {
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 4);
  margin-top: calc(var(--spacing-unit) * 3);
}
.god-mode-buttons .button {
  min-width: 100px;
}
.god-mode-feedback {
    margin-top: calc(var(--spacing-unit) * 2);
    font-size: 1.1em;
    font-weight: bold;
}
.god-mode-feedback.correct { color: var(--success-color); }
.god-mode-feedback.incorrect { color: var(--danger-color); }

.god-mode-correct-answer-reveal {
    margin-top: var(--spacing-unit);
    font-size: 1em;
    color: var(--text-muted);
}
.god-mode-correct-answer-reveal strong {
    color: var(--success-color);
}


/* Review Mode */
.review-container h1 {
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.review-question-item {
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
    background-color: var(--surface-color); /* Use surface color */
}
body.dark .review-question-item {
    background-color: hsl(var(--primary-h), var(--primary-s), 12%); /* Slightly different dark shade */
}
.review-question-item h3 {
    font-size: 1.1em;
    text-align: left;
    color: var(--text-darker);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.review-answer {
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-unit);
    font-size: 0.95em;
    border-left: 4px solid transparent;
    color: var(--text-darker); /* Default text color */
}
.review-answer strong {
    font-weight: 600;
}

/* Specific Review Answer States - using more descriptive classes */
.review-user-answer.is-correct {
    background-color: hsl(var(--primary-h), var(--primary-s), 92%); /* Lighter primary shade */
    border-left-color: var(--primary-color);
}
.review-user-answer.is-incorrect {
    background-color: hsl(var(--danger-h, 0), var(--danger-s, 90%), 92%); /* Lighter danger shade */
    border-left-color: var(--danger-color);
    /* text-decoration: line-through; */ /* Optional, can be distracting */
}
.review-user-answer.not-answered {
    background-color: var(--secondary-color); /* Use secondary for not answered */
    border-left-color: var(--text-muted);
    font-style: italic;
    color: var(--text-muted);
}
.review-correct-answer-text { /* This is the one that shows the actual correct answer */
    background-color: hsl(var(--success-h, 145), var(--success-s, 63%), 92%); /* Lighter success shade */
    border-left-color: var(--success-color);
    font-weight: 500;
    margin-top: calc(var(--spacing-unit) * 1.5); /* More space if user was wrong or didn't answer */
}

/* Dark mode adjustments for review answers */
body.dark .review-user-answer.is-correct {
    background-color: hsl(var(--primary-h), var(--primary-s), 20%);
    color: var(--text-light);
}
body.dark .review-user-answer.is-incorrect {
    background-color: hsl(var(--danger-h, 0), var(--danger-s, 50%), 20%);
    color: var(--text-light);
}
body.dark .review-user-answer.not-answered {
    background-color: hsl(var(--primary-h), var(--primary-s), 15%);
    color: var(--text-muted);
}
body.dark .review-correct-answer-text {
    background-color: hsl(var(--success-h, 145), var(--success-s, 50%), 20%);
    color: var(--text-light);
}


/* ── Footer container (optional wrapping for centering) ── */
.app-footer {
  background-color: #f9f9f9;      /* or whatever background you prefer */
  padding: 1.5rem 0 1rem;         /* space above/below */
  text-align: center;
  border-top: 1px solid #e0e0e0;  /* subtle top border */
}

/* A wrapper around the copyright/text + links */
.app-footer .footer-container {
  max-width: 800px;
  margin: 0 auto;             /* center in the footer */
  padding: 0 1rem;            /* small left/right padding */
}

/* ── The UL of footer links ── */
.footer-links {
  list-style: none;      /* remove bullets */
  margin: 0;             /* remove default UL margin */
  padding: 0;            /* remove default UL padding */
  display: flex;         /* lay out children in a row */
  justify-content: center; /* center the row horizontally */
  flex-wrap: wrap;       /* wrap to next line on small screens */
  gap: 0.75rem;          /* horizontal/vertical gap between items */
}

/* Each LI is inline-flex so that you can easily adjust vertical alignment */
.footer-links li {
  display: inline-flex;
  align-items: center;
}

/* The A tag inside each LI */
.footer-links li a {
  color: var(--primary-color, #007bff);
  text-decoration: none;
  font-size: 0.95rem;         /* slightly smaller text */
  padding: 0.25rem 0.5rem;    /* clickable “padding” area */
  transition: color 0.2s ease, background-color 0.2s ease;
}

.footer-links li a:hover {
  /* On hover, you can change color or background */
  color: var(--primary-color-hover, #0056b3);
  background-color: rgba(0, 123, 255, 0.05);
  border-radius: 4px;
}

/* If you want a separator (e.g. “•”) between links instead of bullets,
   you can use a pseudo-element on each li (except the first). For example: */
.footer-links li + li::before {
  content: "•";                /* bullet-like dot */
  padding: 0 0.5rem;           /* space around the dot */
  color: #666;                 /* color of the separator */
  font-size: 0.8rem;           /* slightly smaller than link text */
  display: inline-block;
  vertical-align: middle;
}

/* Theme Toggle Styles (from your initial CSS, verified for new vars) */
.theme-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--spacing-unit) * 3); /* Adjust positioning */
  width: 42px;
  height: 22px;
  z-index: 25; /* Ensure it's above header content */
}
.theme-toggle input { display: none; }
.theme-toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--secondary-color);
  border-radius: 9999px;
  cursor: pointer;
  /* transition handled globally */
}
.theme-toggle .slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color); /* Knob color in light mode */
  /* transition handled globally */
}
.theme-toggle input:checked + .slider {
  background: var(--primary-dark); /* Slider background when "dark" (or active) */
}
.theme-toggle input:checked + .slider::before {
  transform: translateX(20px);
  background: var(--surface-color); /* Knob color when "dark" (or active) */
}
body.dark .theme-toggle .slider { /* Specific for body.dark state */
    background: var(--primary-color); /* Brighter primary for slider track in dark mode */
}
body.dark .theme-toggle .slider::before {
    background: var(--surface-color); /* Knob on dark mode slider */
}
body.dark .theme-toggle input:checked + .slider { /* If toggle is for "light" when in dark mode */
    background: var(--secondary-color);
}
body.dark .theme-toggle input:checked + .slider::before {
    background: var(--primary-color);
}


/* ─────────── Responsive Adjustments ─────────── */
@media (max-width: 768px) {
  .app-header h1          { font-size: 1.5em; }

  .container {
    padding: calc(var(--spacing-unit) * 2);
    margin: var(--spacing-unit) 0 calc(var(--spacing-unit) * 2);
  }

  h1                      { font-size: 1.5em; }   /* contextual */
  h2                      { font-size: 1.2em; }

  .button, button {
    font-size: 0.95em;
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2);
  }

  .subject-card,
  .mode-card,
  .initial-choice-screen .mode-card {
    padding: calc(var(--spacing-unit) * 2);
  }

  .navigation-buttons .button { min-width: 100px; }

  /* fixed: wrap multiplication in calc() */
  .theme-toggle { right: calc(var(--spacing-unit) * 2); }
}


@media (max-width: 480px) {
  .app-header        { padding: var(--spacing-unit) 0; }
  .app-header h1     { font-size: 1.3em; }

  /* Keep the slider fully visible on tiny screens */
  .theme-toggle{
    top: .5rem;
    right: .5rem;
    transform:none;         /* cancel the 50% translate from desktop */
  }

  /* stack nav buttons */
  .navigation-buttons{
    flex-direction: column;
    gap: var(--spacing-unit);
  }
  .navigation-buttons .button { width: 100%; }

  /* likewise in results view */
  .result-buttons{
    flex-direction: column;
  }
  .result-buttons .button { width: 100%; }

  /* God-mode buttons one per row */
  .god-mode-buttons{
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
  }
  .god-mode-buttons .button{
    font-size: .9em;
    padding: calc(var(--spacing-unit) * 1.5);
    width: 100%;
  }

  /* tighter choice layout */
  .choice{
    padding: calc(var(--spacing-unit) * 1.2);
  }
  .choice input[type="radio"],
  .choice input[type="checkbox"]{
    margin-right: var(--spacing-unit);
    transform: scale(1.1);
  }
}