@import url("quizDynamicView.css");
@import url("shared_non_default_styles.css");
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");

/* KIDS THEME: Space - cosmic frame, light reading panels, drifting stars */

:root {
  --q-font-base: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --q-font-head: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --q-radius: 14px;
  --q-radius-lg: 20px;
  --q-shadow: 0 8px 24px rgba(10,18,45,.35);
  --q-shadow-sm: 0 2px 10px rgba(10,18,45,.12);
  --q-frame-bg: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 75% 60%, #ffe27a 50%, transparent 51%), radial-gradient(1.5px 1.5px at 50% 85%, #9ad0ff 50%, transparent 51%), linear-gradient(160deg, #14224a 0%, #221a5a 50%, #0b2350 100%);
  --q-frame-text: #e8ecff;
  --q-frame-border: #3a2f7a;
  --q-panel: #ffffff;
  --q-panel-2: #eef0ff;
  --q-panel-text: #1c2440;
  --q-muted: #5a6a8a;
  --q-border: #d8dcff;
  --q-title: #ffd86b;
  --q-accent: #8a7bff;
  --q-accent-2: #00cec9;
  --q-accent-contrast: #0d1b3a;
  --q-btn-bg: #6c5ce7;
  --q-btn-text: #ffffff;
  --q-btn-hover-bg: #00cec9;
  --q-btn-hover-text: #06302e;
  --q-disabled-bg: #3a2f7a;
  --q-disabled-text: #9b93c9;
  --q-correct-bg: #ecfffb;
  --q-correct-border: #00cec9;
  --q-correct-text: #064e46;
  --q-note-bg: #f4f4ff;
  --q-flag-bg: #fd79a8;
  --q-sep: #3a2f7a;
  --q-option-bg: #f3f4ff;
  --q-option-border: #d8dcff;
  --q-option-hover: #eceeff;
  --q-option-selected-bg: #6c5ce7;
  --q-option-selected-text: #ffffff;
}

/* =====================================================================
   DECORATIVE APPLICATION  (shared across themes; values come from :root)
   Only colours / borders / fonts / radius / shadow are touched.
   Layout, display and positioning are intentionally left to the base CSS.
   ===================================================================== */

.quizBody {
  font-family: var(--q-font-base) !important;
  background: var(--q-frame-bg) !important;
  color: var(--q-frame-text) !important;
  border: 2px solid var(--q-frame-border) !important;
  border-radius: var(--q-radius-lg) !important;
  box-shadow: var(--q-shadow) !important;
}

h1, .quizTitle, .documentFirstHeading {
  color: var(--q-title) !important;
  font-family: var(--q-font-head) !important;
}

.section_title,
.fieldsetLegendStyle { color: var(--q-accent) !important; }

.questionTitleClass {
  color: var(--q-panel-text) !important;
  font-family: var(--q-font-head) !important;
}

/* Per-question reading surface (kept light & legible in every theme) */
.questionStyle {
  background: var(--q-panel) !important;
  color: var(--q-panel-text) !important;
  border: 1px solid var(--q-border) !important;
  border-radius: var(--q-radius) !important;
  box-shadow: var(--q-shadow-sm) !important;
}

/* Meta / info card */
.step1Meta {
  background: var(--q-panel) !important;
  border: 1px solid var(--q-border) !important;
  border-radius: var(--q-radius) !important;
  box-shadow: var(--q-shadow-sm) !important;
}
.metaLabel { color: var(--q-panel-text) !important; }
.metaValue { color: var(--q-muted) !important; }
.font-icon-wrapper {
  background: var(--q-panel) !important;
  color: var(--q-accent) !important;
  border-radius: var(--q-radius) !important;
}

/* Style / Mode option cards */
.option-card {
  background: var(--q-option-bg) !important;
  border: 2px solid var(--q-option-border) !important;
  border-radius: var(--q-radius) !important;
  color: var(--q-panel-text) !important;
}
.option-card:hover {
  background: var(--q-option-hover) !important;
  border-color: var(--q-accent) !important;
}
.option-card input[type="radio"]:checked + label::before {
  border-left-color: var(--q-accent) !important;
}

/* Buttons */
.navigationButton,
#startQuiz,
#buttonLayer input,
.show-answer-class,
.hide-answer-class,
.quiz-modal-footer button,
#statsViewDisplay button {
  background: var(--q-btn-bg) !important;
  color: var(--q-btn-text) !important;
  border: 1px solid var(--q-btn-bg) !important;
  border-radius: var(--q-radius) !important;
}
.navigationButton:hover,
#startQuiz:hover,
.quiz-modal-footer button:hover,
#statsViewDisplay button:hover {
  background: var(--q-btn-hover-bg) !important;
  color: var(--q-btn-hover-text) !important;
}
.navigationButton.disabled-button {
  background: var(--q-disabled-bg) !important;
  color: var(--q-disabled-text) !important;
}

/* Correct answer / explanation panel */
.correct-answer-class {
  background: var(--q-correct-bg) !important;
  border: 2px dotted var(--q-correct-border) !important;
  color: var(--q-correct-text) !important;
  border-radius: var(--q-radius) !important;
}

/* Notes, flag, action icons */
.notes-content {
  background: var(--q-note-bg) !important;
  border-left: 3px solid var(--q-accent) !important;
  box-shadow: inset 5px 0 0 0 var(--q-accent) !important;
  color: var(--q-muted) !important;
}
.add-question-notes,
.question-flag {
  background: var(--q-panel-2) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
.question-flag.flagged { background: var(--q-flag-bg) !important; color: #fff !important; }
.quiz_actions, .quiz_action_text, .quiz_action_icon { color: var(--q-accent) !important; }

/* Separator / tracker / points / current question */
.q_separator { background: var(--q-sep) !important; }
#tracker .trackItem, .trackItem {
  background: var(--q-panel-2) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
#currentQuestion { color: var(--q-accent) !important; }
.question-points { color: var(--q-muted) !important; }

/* Modals */
.modal-content,
#statsViewDisplay .modal-content {
  background: var(--q-panel) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
.close_modal { background: var(--q-accent) !important; color: var(--q-accent-contrast) !important; }
.close_modal:hover { background: var(--q-accent-2) !important; }

/* Drag & drop answer chips */
.dragDropInplaceLocked {
  background: var(--q-accent) !important;
  border: 2px solid var(--q-accent-2) !important;
  color: var(--q-accent-contrast) !important;
}
.DragDropInplaceLockEditField,
.DragDropInplaceLockEditFieldDropped { background: var(--q-panel-2) !important; }
.DragDropInplaceLockEditAnswerOption { border-color: var(--q-accent) !important; color: var(--q-panel-text) !important; }

/* ---- Answer options (override answers_styles_formatter.css) ---- */
.q-answer-options-container label { color: var(--q-panel-text) !important; }
.q-answer-options-container:hover { background: var(--q-option-hover) !important; }
.button-style-input label {
  background: var(--q-option-bg) !important;
  color: var(--q-panel-text) !important;
}
.button-style-input:has(input:checked),
.button-style-input input:checked + label {
  background: var(--q-option-selected-bg) !important;
  color: var(--q-option-selected-text) !important;
}

/* =====================================================================
   PLAYFUL ANIMATED BACKGROUND  (CSS only, lives on .quizBody::before)
   ===================================================================== */
.quizBody { position: relative !important; }
.quizBody > * { position: relative; z-index: 1; }
.quizBody::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><text x='22' y='58' font-size='42'>⭐</text><text x='92' y='124' font-size='34'>✨</text></svg>");
  background-size: 150px 150px;
  animation: q-theme-drift 70s linear infinite;
}
@keyframes q-theme-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 1300px; }
}
@media (prefers-reduced-motion: reduce) {
  .quizBody::before { animation: none; }
}

/* Educator override: submit button footer - plain top border, no shadow */
#buttonLayer {
  margin-top: 30px !important;
  border-top: 2px solid grey !important;
  box-shadow: none !important;
}