/**
 * Quiz Master — Template CSS
 * Styles the standard quiz-master HTML structure.
 * Loaded alongside game-framework.css (base reset/buttons).
 */

/* ── Screen Management ─────────────────────────────── */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; min-height: 100vh; }

.screen-content {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  max-width: 600px;
  width: 100%;
  margin: auto;
  text-align: center;
}

/* ── Welcome Screen ────────────────────────────────── */
.game-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.game-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.game-title { margin-bottom: 0.5rem; }
.game-description { color: #666; margin-bottom: 1.5rem; }

/* Difficulty buttons */
.difficulty-selector h3 { margin-bottom: 0.75rem; }
.difficulty-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.btn-difficulty {
  background: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  min-width: 100px;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-difficulty:hover { background: #ede7f6; border-color: #7e57c2; }
.btn-difficulty.selected { background: #7e57c2; color: #fff; border-color: #7e57c2; }
.difficulty-icon { font-size: 1.2rem; }
.difficulty-name { font-weight: 600; font-size: 0.9rem; }

#btn-start {
  margin-top: 0.5rem;
  width: 100%;
  max-width: 280px;
  font-size: 1.1rem;
  padding: 0.8rem 2rem;
}
#btn-tutorial {
  margin-top: 0.5rem;
  width: 100%;
  max-width: 280px;
}

/* ── Tutorial Screen ───────────────────────────────── */
.tutorial-content {
  text-align: left;
  margin: 1rem 0 1.5rem;
}
.tutorial-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.step-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #7e57c2;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Game Screen ───────────────────────────────────── */
#game-screen {
  padding: 0;
  background: transparent;
}
.game-header {
  background: rgba(255,255,255,0.95);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.progress-info {
  flex: 1;
  min-width: 0;
}
#question-counter { font-size: 0.85rem; color: #666; }
.progress-bar {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7e57c2, #42a5f5);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.game-stats { display: flex; gap: 0.75rem; }
.stat-item { display: flex; align-items: center; gap: 0.25rem; font-weight: 600; }
.stat-icon { font-size: 1rem; }
#timer-display { color: #e53935; }

.question-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* Media */
.question-media { margin-bottom: 1rem; text-align: center; }
.question-media img { max-width: 100%; max-height: 200px; border-radius: 12px; }
.btn-play-audio {
  background: #e3f2fd;
  color: #1565c0;
  border: 2px solid #1565c0;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
}

/* Question text */
.question-text { margin-bottom: 1.5rem; }
#question-content {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.4;
}

/* Hint button */
.btn-hint {
  background: #fff8e1;
  color: #f57f17;
  border: 2px solid #ffca28;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

/* Answer containers */
.answer-container { width: 100%; }

.multiple-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.answer-option {
  background: #f8f8ff;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  font-size: 0.95rem;
}
.answer-option:hover:not(:disabled) { background: #ede7f6; border-color: #7e57c2; }
.answer-option.correct { background: #e8f5e9; border-color: #43a047; color: #2e7d32; }
.answer-option.incorrect { background: #ffebee; border-color: #e53935; color: #c62828; }
.option-letter {
  background: #7e57c2;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.answer-option.correct .option-letter  { background: #43a047; }
.answer-option.incorrect .option-letter { background: #e53935; }

.text-input-container {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
#answer-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 12px;
  font-size: 1.1rem;
  outline: none;
  transition: border-color 0.2s;
}
#answer-input:focus { border-color: #7e57c2; }

.true-false-container { display: flex; gap: 1rem; justify-content: center; }
.btn-true-false {
  flex: 1;
  max-width: 160px;
  padding: 1rem;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  flex-direction: column;
  gap: 0.25rem;
  transition: all 0.2s;
}
.btn-true-false[data-answer="true"]  { background: #e8f5e9; color: #2e7d32; border-color: #43a047; }
.btn-true-false[data-answer="false"] { background: #ffebee; color: #c62828; border-color: #e53935; }
.btn-true-false.correct   { ring: 3px solid #43a047; box-shadow: 0 0 0 3px #43a047; }
.btn-true-false.incorrect { box-shadow: 0 0 0 3px #e53935; opacity: 0.6; }
.tf-icon { font-size: 1.5rem; }

/* ── Feedback Screen ───────────────────────────────── */
.feedback-icon { font-size: 4rem; margin-bottom: 0.5rem; }
.icon-correct  { color: #43a047; }
.icon-incorrect { color: #e53935; }
.explanation-box {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
}
.explanation-box h3 { font-size: 0.9rem; color: #666; margin-bottom: 0.35rem; }
.score-update { font-size: 1.2rem; font-weight: 700; color: #43a047; margin: 0.75rem 0; }

#btn-next-question { width: 100%; max-width: 280px; font-size: 1.1rem; }

/* ── Results Screen ────────────────────────────────── */
.results-header { margin-bottom: 1rem; }
.trophy-icon { font-size: 3.5rem; }
.final-score { margin: 1rem 0; }
.score-circle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  background: linear-gradient(135deg, #7e57c2, #42a5f5);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 20px;
  font-weight: 700;
}
#final-score-value { font-size: 2.5rem; }
.score-max { font-size: 1rem; opacity: 0.8; }
.stars-earned { font-size: 1.8rem; margin-top: 0.5rem; }

.results-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}
.result-stat {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 0.75rem;
}
.stat-label { font-size: 0.8rem; color: #888; display: block; }
.stat-value { font-size: 1.3rem; font-weight: 700; color: #333; display: block; }

.skills-improved h3 { font-size: 0.9rem; color: #666; margin-bottom: 0.5rem; }
.skills-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.skill-tag {
  background: #ede7f6;
  color: #5e35b1;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.results-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; margin-top: 1rem; }
#btn-play-again  { width: 100%; max-width: 280px; }
#btn-back-home   { width: 100%; max-width: 280px; }

/* ── Hint Modal ────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-content {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.modal-content h3 { margin-bottom: 0.75rem; }
#hint-text { color: #555; margin-bottom: 1rem; }
#btn-close-hint { width: 100%; }

/* ── Category selector ─────────────────────────────── */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.btn-category {
  background: #e3f2fd;
  color: #1565c0;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-category.selected { background: #1565c0; color: #fff; }

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 480px) {
  .screen-content { padding: 1.25rem 1rem; border-radius: 12px; }
  .multiple-choice { grid-template-columns: 1fr; }
  .difficulty-buttons { flex-direction: column; align-items: center; }
  .btn-difficulty { width: 100%; max-width: 280px; flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Template Modernization (added 2026-04-18, flagship-authorized batch)
   Propagates to all games using this template.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- WCAG 2.1 AA touch targets --- */
button,
[role="button"],
.btn,
input[type="button"],
input[type="submit"],
.tile,
.card,
.choice,
.answer,
.cell,
.option,
.scenario-choice,
.drop-zone {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}
@media (pointer: coarse) {
  button, .btn, .tile, .card, .choice, .option, .cell { padding: 10px 14px; }
}

/* --- Base transitions + micro animations --- */
button, .btn, .tile, .card, .choice, .answer, .cell, .option, .scenario-choice, .drop-zone {
  transition: transform 0.18s ease-out, background-color 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}
button:active, .btn:active, .tile:active, .cell:active, .choice:active, .option:active {
  transform: scale(0.97);
}
button:hover:not(:disabled), .btn:hover:not(:disabled), .tile:hover, .cell:hover, .choice:hover, .option:hover {
  filter: brightness(1.05);
}
@keyframes ln-pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ln-fade-up { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ln-shake-x { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ln-pop-in { animation: ln-pop-in 0.22s ease-out both; }
.ln-fade-up { animation: ln-fade-up 0.22s ease-out both; }
.ln-shake-x { animation: ln-shake-x 0.3s ease-out; }

/* ═══════════════════════════════════════════════════════════════════════
   WCAG 2.1 AA — Accessibility polish (added 2026-04-18, flagship-authorized)
   - SC 2.3.3 Animation from interactions: respects prefers-reduced-motion
   - SC 2.4.11 Focus appearance: visible outline on keyboard focus
   - SC 2.2.2 Pause/stop/hide: animations capped at 5s
   Sources: WCAG 2.1 AA, Accessibility Heuristics for Mobile Games (GameDeveloper.com)
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Reduced motion (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Still allow opacity fade so users see state changes */
  .ln-pop-in, .ln-fade-up, .ln-shake-x {
    animation: none !important;
  }
}

/* --- Focus-visible (WCAG 2.4.11 — kid-friendly keyboard nav) --- */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.tile:focus-visible,
.card:focus-visible,
.choice:focus-visible,
.option:focus-visible,
.cell:focus-visible,
.drop-zone:focus-visible,
.scenario-choice:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove default ugly focus ring only when we provide our own */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* --- Prevent double-tap zoom on games (mobile 2026) --- */
html {
  touch-action: manipulation;
}

/* --- Cap long animations at 5s (WCAG 2.2.2) --- */
@media (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    animation-duration: min(var(--ln-anim-duration, 0.5s), 5s);
  }
}