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

/* KIDS THEME: Toys - building blocks, bright playfulness */

:root {
  --q-font-base: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --q-font-head: 'Sniglet', 'Fredoka', cursive;
  --q-radius: 20px;
  --q-radius-lg: 28px;
  --q-shadow: 0 8px 20px rgba(255, 111, 0, 0.15);
  --q-shadow-sm: 0 2px 8px rgba(255, 111, 0, 0.10);
  --q-frame-bg: linear-gradient(160deg, #fffde7 0%, #fff3e0 50%, #e1f5fe 100%);
  --q-frame-text: #5d4037;
  --q-frame-border: #ffb74d;
  --q-panel: #ffffff;
  --q-panel-2: #fff8e1;
  --q-panel-text: #4e2c23;
  --q-muted: #8d6e63;
  --q-border: #ffe082;
  --q-title: #f57c00;
  --q-accent: #ff9800;
  --q-accent-2: #29b6f6;
  --q-accent-contrast: #ffffff;
  --q-btn-bg: #ff9800;
  --q-btn-text: #ffffff;
  --q-btn-hover-bg: #f57c00;
  --q-btn-hover-text: #ffffff;
  --q-disabled-bg: #ffe0b2;
  --q-disabled-text: #bcaaa4;
  --q-correct-bg: #f1f8e9;
  --q-correct-border: #8bc34a;
  --q-correct-text: #33691e;
  --q-note-bg: #fffde7;
  --q-flag-bg: #ab47bc;
  --q-sep: #ffe082;
  --q-option-bg: #fffde7;
  --q-option-border: #ffe082;
  --q-option-hover: #fff8e1;
  --q-option-selected-bg: #ff9800;
  --q-option-selected-text: #ffffff;
}

.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; }
.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; }
.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; }
.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; }
.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-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-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; }
.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; }
.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; }
.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; }
.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; }

/* Animated Background */
.quizBody { position: relative !important; overflow: hidden !important; }
.quizBody > * { position: relative; z-index: 1; }
.quizBody::before {
  content: ""; 
  display: block;
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; 
  pointer-events: none; 
  opacity: 0.12;
  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><text x='15' y='130' font-size='26'>🚂</text></svg>");
  background-repeat: repeat;
  background-size: 150px 150px; 
  animation: q-theme-drift 52s linear infinite;
}

@keyframes q-theme-drift { 
  from { background-position: 0 0; } 
  to   { background-position: 0 -1400px; } 
}

@media (prefers-reduced-motion: reduce) { 
  .quizBody::before { animation: none; } 
}

#buttonLayer { margin-top: 30px !important; border-top: 2px solid grey !important; box-shadow: none !important; }