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

/* KIDS THEME: Circus - carnival red & gold, big top energy */

:root {
  --q-font-base: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --q-font-head: 'Bubblegum Sans', 'Fredoka', cursive;
  --q-radius: 18px;
  --q-radius-lg: 24px;
  --q-shadow: 0 8px 20px rgba(229, 57, 53, 0.15);
  --q-shadow-sm: 0 2px 8px rgba(229, 57, 53, 0.10);
  --q-frame-bg: linear-gradient(160deg, #fff3e0 0%, #ffe0b2 50%, #ffcdd2 100%);
  --q-frame-text: #4a154b;
  --q-frame-border: #ff7043;
  --q-panel: #ffffff;
  --q-panel-2: #fff8e1;
  --q-panel-text: #3e2723;
  --q-muted: #8d6e63;
  --q-border: #ffe082;
  --q-title: #d81b60;
  --q-accent: #e53935;
  --q-accent-2: #ffb300;
  --q-accent-contrast: #ffffff;
  --q-btn-bg: #e53935;
  --q-btn-text: #ffffff;
  --q-btn-hover-bg: #c62828;
  --q-btn-hover-text: #ffffff;
  --q-disabled-bg: #ffcdd2;
  --q-disabled-text: #ef9a9a;
  --q-correct-bg: #f1f8e9;
  --q-correct-border: #7cb342;
  --q-correct-text: #33691e;
  --q-note-bg: #fffde7;
  --q-flag-bg: #8e24aa;
  --q-sep: #ffb74d;
  --q-option-bg: #fffde7;
  --q-option-border: #ffe082;
  --q-option-hover: #fff8e1;
  --q-option-selected-bg: #e53935;
  --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; }

.quizBody { position: relative !important; }
.quizBody > * { position: relative; z-index: 1; }
.quizBody::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .10;
  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-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; }