@media screen and (max-width: 850px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace > *, .question-row > *, .library-picker > *, .wheel-layout > * { min-width: 0; }
  .question-row input, .library-picker select { min-width: 0; font-size: 16px; }
  .library-picker select { min-height: 36px; }
  .actions, .scoreline { flex-wrap: wrap; gap: 10px; }
  .question-card h1, .quiz-stage h1, .memory-stage h1, .word-stage h1, .answer-reveal, .word-answer, .memory-grid button { overflow-wrap: anywhere; }
  .wheel-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wheel { width: min(70vw, 390px); height: auto; aspect-ratio: 1; }
}
@media screen and (max-width: 560px) {
  .topbar { height: auto; min-height: 76px; padding: 12px; flex-wrap: wrap; gap: 10px; }
  .brand { flex-wrap: wrap; font-size: 18px; }
  .save-state { font-size: 12px; }
  .hero { padding-inline: 16px; gap: 30px; }
  .hero h1 { font-size: clamp(36px, 11vw, 47px); }
  .formula { padding: 16px; gap: 8px; box-shadow: 5px 5px #d9cbb5; transform: none; }
  .formula span { font-size: 10px; letter-spacing: .04em; }
  .editor-panel, .mode-panel { padding: 16px; }
  .section-heading { flex-wrap: wrap; }
  .section-heading h2 { font-size: 24px; }
  .library-picker { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .question-row { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .mode-list button { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .mode-icon { width: 40px; height: 40px; }
  .mode-list i { grid-column: 2; }
  .play-controls { justify-content: space-between; align-items: flex-start; padding: 16px; gap: 12px; flex-wrap: wrap; }
  .play-controls .play-title { display: block; font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
  .play-controls .ghost { position: static; }
  .play-area { padding: 20px 16px 40px; }
  .question-card, .quiz-stage, .word-stage { padding: 20px; box-shadow: 5px 5px #dfd5c4; }
  .memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-tools { margin-left: 0; }
  .data-tools button, .data-tools label, .ghost, .primary, .secondary, .reset { min-height: 44px; }
}