/* 404 / error page and the grown-ups page. */
.oops { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--space-5); }
.oops p { font-size: var(--fs-m); max-width: 46ch; }
.oops__art { position: relative; width: clamp(160px, 30vw, 240px); margin-bottom: var(--space-4); }
.oops__owl { animation: sway 2.6s ease-in-out infinite; animation-play-state: var(--loops); transform-origin: 50% 100%; }
.oops__owl .mascot__svg { width: 100%; height: auto; }
.oops__q {
  position: absolute;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--purple-deep);
  animation: bob 2.4s ease-in-out infinite;
  animation-play-state: var(--loops);
}
.oops__q--1 { left: -10%; top: 6%; }
.oops__q--2 { right: -8%; top: -4%; animation-delay: -0.8s; color: var(--orange-deep); }
.oops__q--3 { right: -16%; top: 38%; animation-delay: -1.6s; color: var(--blue-deep); }

.gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-1);
  max-width: 640px;
}
.gate__text { font-weight: 800; margin: 0; }
.gate__help { font-size: var(--fs-xs); color: var(--ink-soft); margin: 0; }
.gate.is-open { display: none; }

.grownups { display: grid; gap: var(--space-4); max-width: 820px; }
.info-card {
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-1);
  font-size: var(--fs-s);
  animation: var(--enter-rise) var(--dur-3) var(--ease-out) both;
}
.info-card:nth-child(2) { animation-delay: 80ms; }
.info-card:nth-child(3) { animation-delay: 160ms; }
.info-card:nth-child(4) { animation-delay: 240ms; }
.info-card:nth-child(5) { animation-delay: 320ms; }
.info-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }

/* ---------- grown-ups: progress summary + proposed groups ---------- */
.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: #fff3c4;
  box-shadow: inset 0 0 0 2px #ffe08a;
  font-size: var(--fs-xs);
  font-weight: 800;
  vertical-align: middle;
}
.summary-note { color: var(--ink-soft); }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: #fff3c4; font-weight: 700; }
.summary-block { margin-top: var(--space-5); }
.summary-block h3 small { font-weight: 700; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.progress-table, .groups-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.progress-table th, .progress-table td,
.groups-table th, .groups-table td { padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--line); text-align: left; vertical-align: top; }
.progress-table thead th, .groups-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.progress-table tbody th a, .groups-table tbody th a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; }
.practice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.practice-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  background: #f7f3ea;
}
.practice-list small { color: var(--ink-soft); font-weight: 700; }
.progress-controls { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.progress-controls .btn { justify-self: start; }

/* ---------- grown-ups: game by game (level reached, most often missed) ---------- */
.missed-list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); }
.missed-list small { color: var(--ink-soft); font-weight: 700; }
.progress-table--games td:last-child { white-space: nowrap; }

/* ---------- grown-ups: My quizzes ---------- */
.grownups > *, .quiz-builder > *, .quiz-editor > *, .quiz-field { min-width: 0; } /* never wider than a 320 px phone */
.quiz-card .settings-select { max-width: 100%; }
.quiz-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.quiz-row { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: #f7f3ea; }
.quiz-row__what strong { overflow-wrap: anywhere; }
.quiz-row__what small { color: var(--ink-soft); font-weight: 700; }
.quiz-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quiz-share { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.quiz-share__link { width: 100%; }
.quiz-import { padding: var(--space-4); border-radius: var(--radius-m); background: #eef6ff; box-shadow: inset 0 0 0 2px #cfe6ff; }
.quiz-import[hidden], .quiz-builder[hidden] { display: none; }
.quiz-builder { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-m); background: #fffbf0; box-shadow: inset 0 0 0 2px #ffe08a; }
.quiz-builder h3, .quiz-builder h4 { margin: var(--space-2) 0 0; }
.quiz-field { display: grid; gap: var(--space-1); }
.quiz-field label { font-weight: 800; }
.quiz-field input[type="text"], .quiz-textarea, .quiz-share__link {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid #d9d2c3;
  border-radius: var(--radius-s);
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.quiz-textarea { min-height: 96px; resize: vertical; }
.quiz-field input[type="text"], .quiz-textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.quiz-field__hint { color: var(--ink-soft); font-weight: 700; }
.quiz-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 700; }
.quiz-check input, .quiz-radios input { width: 24px; height: 24px; }
.quiz-radios { display: flex; flex-wrap: wrap; gap: var(--space-4); border: 0; padding: 0; margin: 0; }
.quiz-radios legend { font-weight: 800; margin-bottom: var(--space-1); }
.quiz-radios label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 700; }
.quiz-tables { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.quiz-check--table { min-width: 56px; }
.quiz-quick summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.quiz-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.quiz-quick fieldset, .quiz-picture { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-m); background: #fff; min-width: 0; }
.quiz-quick legend, .quiz-picture legend { font-weight: 800; padding: 0 var(--space-1); }
.quiz-picture__preview { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; font-weight: 800; }
.quiz-picture__thumb { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-s); background: #f7f3ea; }
.quiz-picture__thumb img, .quiz-picture__thumb .swatch { width: 100%; height: 100%; object-fit: cover; }
.quiz-picture__thumb .numeral { font-size: 1.6rem; }
.quiz-picture__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-2); }
.quiz-picture__more { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.quiz-picture .settings-select { width: 100%; }
.quiz-questions { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }
.quiz-question { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.quiz-question__text { overflow-wrap: anywhere; }
.quiz-question__actions { display: flex; gap: var(--space-2); }
.quiz-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.quiz-editor { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.quiz-editor h4 { margin: 0; }
.quiz-problems { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); border-radius: var(--radius-s); background: #fff1ea; color: var(--try); font-weight: 800; }

/* ---------- printing the progress summary ("Print summary") ---------- */
@media print {
  html.printing-summary body { background: #fff; }
  html.printing-summary body > :not(main),
  html.printing-summary main > :not(.grownups),
  html.printing-summary .grownups > :not(.progress-card),
  html.printing-summary .progress-controls,
  html.printing-summary .no-print { display: none !important; }
  html.printing-summary .info-card { box-shadow: none; animation: none; padding: 0; }
  html.printing-summary .table-scroll { overflow: visible; }
}

/* ---------- My Gallery and the My Thoughts book (js/pages/creations.js) ---------- */
.gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-3) 0; }
.gallery-item { margin: 0; padding: var(--space-3); border: 3px solid var(--line); border-radius: var(--radius-m); background: #fff; }
.gallery-item img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); border: 2px solid var(--line); }
.gallery-item figcaption { margin: var(--space-2) 0; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.gallery-item__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.thought-list { margin: var(--space-3) 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.thought-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 3px solid var(--line); border-radius: var(--radius-m); background: #fff; }
.thought-item__text { flex: 1 1 220px; margin: 0; }
.thought-item__picture { border: 2px solid var(--line); border-radius: var(--radius-s); height: auto; }
.thoughts-note { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 3px solid var(--sun-deep); border-radius: var(--radius-m); background: #fff8dc; }
.thoughts-note[hidden] { display: none; }
.thoughts-note p { margin: var(--space-2) 0 0; }

/* printing one picture ("Print" under a gallery picture): only the picture is printed */
.print-picture { display: none; }
@media print {
  html.printing-picture body { background: #fff; }
  html.printing-picture body > :not(main),
  html.printing-picture main > :not(.grownups),
  html.printing-picture .grownups > :not(.print-picture) { display: none !important; }
  html.printing-picture .print-picture { display: block !important; text-align: center; }
  html.printing-picture .print-picture img { max-width: 100%; height: auto; }
}