/* ===================================================================
   BLC Independent Phonics Assessments — quiz engine styles
   Builds on assets/blc.css (brand tokens, header, gold bar).
   Designed for young children working independently on a tablet.
   =================================================================== */

/* Never auto-hyphenate anything in the assessments — broken words with
   hyphens confuse children reading the questions and answers. */
.quiz-wrap, .q-card, .reading-passage { -webkit-hyphens: none; hyphens: none; }

.quiz-wrap { max-width: 720px; margin: 26px auto 90px; padding: 0 16px; }

/* -- Progress -- */
.quiz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.quiz-progress {
  flex: 1; height: 12px; background: #e7e0ea; border-radius: 20px; overflow: hidden;
}
.quiz-progress > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blc-purple), var(--blc-gold));
  border-radius: 20px; transition: width 0.35s ease;
}
.quiz-count {
  font-size: 0.82rem; font-weight: 800; color: var(--blc-purple);
  white-space: nowrap; letter-spacing: 0.4px;
}

/* -- Question card -- */
.q-card {
  background: #fff; border-radius: 18px; padding: 26px 24px 28px;
  box-shadow: 0 4px 20px rgba(87,0,94,0.10); text-align: center;
}
.q-kind {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 2px; color: var(--blc-gold-dark); margin-bottom: 6px;
}
.q-prompt {
  font-size: 1.55rem; font-weight: 800; color: var(--blc-ink);
  line-height: 1.35; margin-bottom: 4px;
}
.q-sentence {
  font-size: 1.55rem; font-weight: 800; color: var(--blc-purple);
  line-height: 1.4; margin: 6px 0 4px;
}
.q-help { font-size: 0.9rem; color: var(--blc-muted); margin-bottom: 18px; }

/* -- Reasoning stimulus + question -- */
.q-stim {
  font-size: 1.25rem; font-weight: 600; color: var(--blc-ink); line-height: 1.5;
  background: #faf6fb; border-radius: 14px; padding: 18px 20px; margin: 4px 0 14px; text-align: left;
}
.q-ask { font-size: 1.4rem; font-weight: 800; color: var(--blc-purple); margin: 4px 0 16px; }

/* -- Listen button -- */
.listen-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blc-purple); color: #fff; border: none;
  padding: 15px 26px; border-radius: 40px; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.3px; margin: 8px 0 22px;
  box-shadow: 0 4px 12px rgba(87,0,94,0.25); transition: transform 0.1s, background 0.15s;
}
.listen-btn:hover { background: var(--blc-purple-dark); }
.listen-btn:active { transform: scale(0.96); }
.listen-btn .ic { font-size: 1.4rem; line-height: 1; }
.listen-btn.playing { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 4px 12px rgba(87,0,94,0.25); } 50% { box-shadow: 0 4px 22px rgba(208,175,53,0.65); } }

/* Child-friendly answer font (Comic Sans, with a web fallback for Chromebooks) */
:root { --blc-answer-font: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', 'Comic Sans', cursive; }

/* -- Text option tiles (sound / word / true-false) -- */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.opt-grid.tf { max-width: 420px; margin-left: auto; margin-right: auto; }
.opt {
  position: relative;
  background: #faf6fb; border: 3px solid #e4d4ea; border-radius: 14px;
  padding: 22px 10px; cursor: pointer; font-family: var(--blc-answer-font);
  font-size: 2rem; font-weight: 700; color: var(--blc-purple);
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
  min-height: 84px; display: flex; align-items: center; justify-content: center;
  /* A long single word (e.g. "uninterrupted") must break inside its tile,
     never spill sideways into the neighbouring option — but NEVER with a
     hyphen (hyphenation is disabled globally below). */
  text-align: center; min-width: 0; overflow-wrap: break-word;
}
.opt:hover:not(.locked) { border-color: var(--blc-purple); background: #f3e8f6; }
.opt:active:not(.locked) { transform: scale(0.97); }
.opt.locked { cursor: default; }
.opt.selected { border-color: var(--blc-purple); background: #efe0f4; box-shadow: 0 0 0 2px rgba(87,0,94,0.15) inset; }
.opt.correct { border-color: #2e9e46; background: #e7f7ea; color: #1f7a33; }
.opt.wrong   { border-color: #d0342c; background: #fdecea; color: #b71c1c; }

/* Maths answers: a little smaller so longer options (times, sentences) fit neatly */
.opt-grid.maths { gap: 12px; }
.opt-grid.maths .opt { font-size: 1.35rem; min-height: 58px; padding: 14px 12px; line-height: 1.2; }
.opt-grid.maths.tf .opt { font-size: 1.5rem; }
.opt .mark {
  position: absolute; top: 8px; right: 10px; font-size: 1.2rem; font-weight: 900;
}

/* -- Picture options (match) -- */
.pic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.pic {
  position: relative; border: 4px solid #e4d4ea; border-radius: 14px;
  overflow: hidden; cursor: pointer; background: #fff; aspect-ratio: 4/3;
  transition: transform 0.08s, border-color 0.15s;
}
.pic:hover:not(.locked) { border-color: var(--blc-purple); }
.pic:active:not(.locked) { transform: scale(0.98); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic.locked { cursor: default; }
.pic.correct { border-color: #2e9e46; }
.pic.wrong   { border-color: #d0342c; }
.pic .badge {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 900; color: #fff;
}
.pic.correct .badge { display: flex; background: #2e9e46; }
.pic.wrong   .badge { display: flex; background: #d0342c; }

/* -- Spell with on-screen keyboard (Phase 5) -- */
.kbd-wrap { margin-top: 4px; }
.kbd-word {
  max-width: 460px; margin: 0 auto 8px; min-height: 62px; padding: 12px 16px;
  border: 3px solid #e4d4ea; border-radius: 14px; background: #fbf8fc;
  font-family: var(--blc-answer-font); font-size: 2rem; font-weight: 700;
  letter-spacing: 3px; color: var(--blc-purple); text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.kbd-word[data-empty="1"]::before {
  content: attr(data-placeholder); color: #bfa9c6; font-size: 1rem; letter-spacing: normal; font-weight: 600;
}
.kbd-word.correct { border-color: #2e9e46; background: #e7f7ea; color: #1f7a33; }
.kbd-word.wrong   { border-color: #d0342c; background: #fdecea; color: #b71c1c; }
.kbd-solution { min-height: 20px; margin: 6px 0 14px; font-size: 1rem; font-weight: 700; color: #1f7a33; }
.kbd-solution .bad { color: #b71c1c; }
.kbd { max-width: 520px; margin: 0 auto; }
.kbd-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.kbd-key {
  flex: 1 1 0; min-width: 0; padding: 14px 0; border: 2px solid #e4d4ea; border-radius: 9px;
  background: #faf6fb; color: var(--blc-purple); font-family: var(--blc-answer-font);
  font-size: 1.25rem; font-weight: 700; cursor: pointer;
  transition: transform 0.06s, border-color 0.12s, background 0.12s;
}
.kbd-key:hover:not(.locked) { border-color: var(--blc-purple); background: #f3e8f6; }
.kbd-key:active:not(.locked) { transform: scale(0.92); }
.kbd-key.locked { cursor: default; opacity: 0.85; }
.kbd-key.kbd-back { flex: 1.5 1 0; color: #b06a00; }
@media (max-width: 480px) {
  .kbd-key { padding: 12px 0; font-size: 1.05rem; }
  .kbd-word { font-size: 1.6rem; }
}

/* -- Tap-the-sound speller -- */
.build-wrap { margin-top: 4px; }
.build-hint { font-size: 0.9rem; color: var(--blc-muted); margin-bottom: 14px; }
.build-answer {
  min-height: 76px; border: 3px dashed #d3bcda; border-radius: 14px; background: #fbf8fc;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 12px; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s;
}
.build-answer[data-empty="1"]::before {
  content: attr(data-placeholder); color: #bfa9c6; font-size: 0.95rem; font-weight: 600;
}
.build-answer.correct { border-style: solid; border-color: #2e9e46; background: #e7f7ea; }
.build-answer.wrong   { border-style: solid; border-color: #d0342c; background: #fdecea; }
.build-bank {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px;
  min-height: 60px;
}
.build-tile {
  font-family: var(--blc-answer-font); font-size: 1.6rem; font-weight: 700;
  color: var(--blc-purple); background: #faf6fb; border: 3px solid #e4d4ea; border-radius: 12px;
  padding: 10px 18px; min-width: 54px; cursor: pointer;
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.build-tile:hover:not(.locked) { border-color: var(--blc-purple); background: #f3e8f6; }
.build-tile:active:not(.locked) { transform: scale(0.94); }
.build-tile.placed { background: #ede0f5; border-color: #c8a0cc; }
.build-tile.locked { cursor: default; }
.build-solution { min-height: 20px; margin-top: 12px; font-size: 1rem; font-weight: 700; color: #1f7a33; }
.build-solution .bad { color: #b71c1c; }

/* -- Maths: number pad -- */
.sum-expr {
  font-size: 2.4rem; font-weight: 800; color: var(--blc-ink); text-align: center;
  margin: 4px 0 16px; letter-spacing: 1px;
}
/* Big picture/letter/word cue for EAL placement questions. */
.q-big { text-align: center; font-size: 4rem; line-height: 1.1; margin: 6px 0 20px;
  font-family: var(--blc-answer-font); font-weight: 700; color: var(--blc-purple); }

.sum-imgwrap { text-align: center; margin: 2px 0 18px; }
.sum-img { max-width: 100%; width: 620px; height: auto; display: inline-block; }
.sum-wrap { margin-top: 2px; }
.num-op { color: var(--blc-gold-dark); }
.num-space { flex: 2 1 0; color: var(--blc-muted); font-size: 1rem; }
.num-wide { flex: 2 1 0; }
.sum-answer {
  max-width: 300px; margin: 0 auto 8px; min-height: 62px; padding: 12px 16px;
  border: 3px solid #e4d4ea; border-radius: 14px; background: #fbf8fc;
  font-family: var(--blc-answer-font); font-size: 2rem; font-weight: 700;
  color: var(--blc-purple); text-align: center; display: flex; align-items: center; justify-content: center;
}
.sum-answer[data-empty="1"]::before { content: attr(data-placeholder); color: #bfa9c6; font-size: 1rem; font-weight: 600; }
.sum-answer.correct { border-color: #2e9e46; background: #e7f7ea; color: #1f7a33; }
.sum-answer.wrong   { border-color: #d0342c; background: #fdecea; color: #b71c1c; }
/* Tap-in fraction answer: a whole-number box, then numerator over denominator.
   Replaces typing "2 3/5" on the keypad, which was fiddly for younger children. */
.frac-answer { max-width: 340px; gap: 14px; padding: 12px; font-size: 1rem; }
.frac-answer .frac-part { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.frac-answer .frac-whole { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.frac-answer .frac-cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 62px; height: 54px; padding: 0 8px; background: #fff;
  border: 2.5px dashed #cbb3d6; border-radius: 12px;
  font-family: var(--blc-answer-font); font-size: 1.8rem; font-weight: 800; color: var(--blc-ink);
  transition: border-color .12s, box-shadow .12s;
}
.frac-answer .frac-part.filled .frac-cell { border-style: solid; border-color: #b79bc6; }
.frac-answer .frac-part.on .frac-cell {
  border-style: solid; border-color: var(--blc-purple); box-shadow: 0 0 0 4px rgba(87,0,94,.13);
}
.frac-answer .frac-part.locked { cursor: default; }
.frac-lbl { font-size: 0.6rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blc-muted); }
.frac-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.frac-bar { width: 74px; height: 4px; border-radius: 2px; background: var(--blc-ink); }
/* keep the whole-number label aligned with the fraction, not the bar */
.frac-answer .frac-whole { margin-top: 17px; }
.sum-answer.frac-answer.correct .frac-cell { border-color: #2e9e46; color: #1f7a33; background: #f2fbf4; }
.sum-answer.frac-answer.wrong   .frac-cell { border-color: #d0342c; color: #b71c1c; background: #fef6f5; }
.sum-answer.frac-answer.correct .frac-bar { background: #1f7a33; }
.sum-answer.frac-answer.wrong   .frac-bar { background: #b71c1c; }
@media (max-width: 560px) {
  .frac-answer { gap: 10px; padding: 8px; }
  .frac-answer .frac-cell { min-width: 52px; height: 46px; font-size: 1.5rem; }
  .frac-bar { width: 62px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .frac-answer { gap: 9px; padding: 6px; }
  .frac-answer .frac-cell { min-width: 46px; height: 38px; font-size: 1.3rem; }
  .frac-bar { width: 54px; }
  .frac-answer .frac-whole { margin-top: 13px; }
}

.sum-solution { min-height: 20px; margin: 6px 0 14px; font-size: 1rem; font-weight: 700; color: #1f7a33; }
.sum-solution .bad { color: #b71c1c; }
.numpad { max-width: 300px; margin: 0 auto; }
.numpad-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.num-key {
  flex: 1 1 0; padding: 16px 0; border: 2px solid #e4d4ea; border-radius: 12px;
  background: #faf6fb; color: var(--blc-purple); font-family: var(--blc-answer-font);
  font-size: 1.6rem; font-weight: 700; cursor: pointer;
  transition: transform 0.06s, border-color 0.12s, background 0.12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.num-key:hover:not(.locked) { border-color: var(--blc-purple); background: #f3e8f6; }
.num-key:active:not(.locked) { transform: scale(0.92); }
.num-key.locked { cursor: default; opacity: 0.85; }
.num-back { color: #b06a00; }
.num-minus { color: #444; }

/* -- Feedback + Next -- */
.q-feedback {
  min-height: 30px; margin-top: 20px; font-size: 1.15rem; font-weight: 800;
}
.q-feedback.good { color: #1f7a33; }
.q-feedback.bad  { color: #b71c1c; }
.q-actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }
.btn-next, .btn-check {
  background: var(--blc-gold); color: var(--blc-ink); border: none;
  padding: 14px 34px; border-radius: 40px; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.3px; box-shadow: 0 3px 10px rgba(208,175,53,0.35);
  transition: transform 0.1s, background 0.15s;
}
.btn-next:hover, .btn-check:hover { background: var(--blc-gold-dark); }
.btn-next:active, .btn-check:active { transform: scale(0.97); }
.btn-check[disabled] { background: #d9d2c0; cursor: not-allowed; box-shadow: none; }

/* -- Missing-picture placeholder (Phase 5 match) -- */
.missing-note {
  background: #fff8e1; border: 2px dashed var(--blc-gold-dark); border-radius: 14px;
  padding: 22px; color: #7b5800; font-weight: 700; font-size: 0.95rem; margin-top: 8px;
}

/* -- Intro screen -- */
.intro-card { background: #fff; border-radius: 18px; padding: 34px 28px; text-align: center;
  box-shadow: 0 4px 20px rgba(87,0,94,0.10); }
.intro-card .big-emoji { font-size: 3rem; }
.intro-card h1 { font-size: 1.7rem; color: var(--blc-purple); font-weight: 800; margin: 8px 0 6px; }
.intro-card p { color: var(--blc-muted); font-size: 1rem; line-height: 1.6; max-width: 460px; margin: 0 auto 8px; }
.intro-steps { text-align: left; max-width: 380px; margin: 18px auto 24px; }
.intro-steps li { margin: 10px 0; font-size: 1rem; font-weight: 600; color: #444; list-style: none;
  display: flex; align-items: center; gap: 12px; }
.intro-steps .n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blc-purple);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.loc-field { max-width: 400px; margin: 4px auto 18px; }
.loc-field > label {
  display: block; font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--blc-purple); margin-bottom: 8px; text-align: center;
}
.loc-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.loc-btn {
  padding: 13px 8px; border: 2.5px solid #e4d4ea; border-radius: 12px; background: #faf6fb;
  color: var(--blc-purple); font-family: 'Raleway', sans-serif; font-size: 0.98rem; font-weight: 800;
  cursor: pointer; transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.loc-btn:hover { border-color: var(--blc-purple); background: #f3e8f6; }
.loc-btn:active { transform: scale(0.97); }
.loc-btn.sel { background: var(--blc-purple); color: #fff; border-color: var(--blc-purple); }
.loc-field .hint-req { display: none; text-align: center; color: #b71c1c; font-size: 0.82rem;
  font-weight: 700; margin-top: 8px; }
.loc-field.needs .hint-req { display: block; }
.loc-field.needs .loc-buttons { outline: 2px solid #e57373; outline-offset: 4px; border-radius: 12px; }

.name-field { max-width: 360px; margin: 4px auto 22px; text-align: left; }
.name-field label {
  display: block; font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--blc-purple); margin-bottom: 6px; text-align: center;
}
.name-field input {
  width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700;
  padding: 14px; border: 2.5px solid #e4d4ea; border-radius: 12px; color: var(--blc-ink);
  font-family: 'Raleway', sans-serif;
}
.name-field input:focus { border-color: var(--blc-purple); outline: none; }
.name-field .hint-req { display: none; text-align: center; color: #b71c1c; font-size: 0.82rem;
  font-weight: 700; margin-top: 7px; }
.name-field.needs .hint-req { display: block; }
.name-field.needs input { border-color: #e57373; }

.dob-field { max-width: 360px; margin: 4px auto 22px; text-align: left; }
.dob-field label {
  display: block; font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--blc-purple); margin-bottom: 6px; text-align: center;
}
.dob-field input {
  width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700;
  padding: 13px 14px; border: 2.5px solid #e4d4ea; border-radius: 12px; color: var(--blc-ink);
  font-family: 'Raleway', sans-serif; background: #fff; -webkit-appearance: none; appearance: none;
}
.dob-field input:focus { border-color: var(--blc-purple); outline: none; }
.dob-field .hint-req { display: none; text-align: center; color: #b71c1c; font-size: 0.82rem;
  font-weight: 700; margin-top: 7px; }
.dob-field.needs .hint-req { display: block; }
.dob-field.needs input { border-color: #e57373; }

.btn-start {
  background: var(--blc-purple); color: #fff; border: none; padding: 18px 46px;
  border-radius: 44px; cursor: pointer; font-family: 'Raleway', sans-serif;
  font-size: 1.2rem; font-weight: 800; letter-spacing: 0.4px;
  box-shadow: 0 5px 16px rgba(87,0,94,0.3); transition: transform 0.1s, background 0.15s;
}
.btn-start:hover { background: var(--blc-purple-dark); }
.btn-start:active { transform: scale(0.97); }

/* -- Result screen -- */
.result-card { background: #fff; border-radius: 18px; padding: 34px 28px; text-align: center;
  box-shadow: 0 4px 20px rgba(87,0,94,0.10); }
.result-card .stars { font-size: 2.6rem; letter-spacing: 4px; margin: 6px 0 10px; }
.result-card h1 { font-size: 1.6rem; color: var(--blc-purple); font-weight: 800; margin-bottom: 4px; }
.score-num { font-size: 3.4rem; font-weight: 800; color: var(--blc-gold-dark); line-height: 1.1; }
.score-of { font-size: 1.05rem; color: var(--blc-muted); font-weight: 700; margin-bottom: 18px; }
.result-msg { font-size: 1.1rem; color: #444; font-weight: 600; margin-bottom: 12px; }
.result-commentary {
  font-size: 0.95rem; color: #555; line-height: 1.55; max-width: 460px;
  margin: 0 auto 20px; background: #faf6fb; border-radius: 12px; padding: 14px 18px;
}
.result-name { font-size: 1.05rem; color: var(--blc-purple); font-weight: 800; margin-bottom: 2px; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-cert  { background: var(--blc-gold); color: var(--blc-ink); box-shadow: 0 4px 14px rgba(208,175,53,0.45); }
.btn-pdf   { background: var(--blc-purple); color: #fff; box-shadow: 0 4px 12px rgba(87,0,94,0.25); }
.btn-retry { background: #efe7f1; color: var(--blc-purple); }
.btn-home  { background: #efe7f1; color: var(--blc-purple); }
.btn-cert, .btn-pdf, .btn-retry, .btn-home {
  border: none; padding: 15px 30px; border-radius: 40px; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 1.02rem; font-weight: 800;
  transition: transform 0.1s, filter 0.15s; text-decoration: none; display: inline-block;
}
.btn-cert:hover, .btn-pdf:hover, .btn-retry:hover, .btn-home:hover { filter: brightness(0.95); }
.btn-cert:active, .btn-pdf:active, .btn-retry:active, .btn-home:active { transform: scale(0.97); }
.pdf-note { margin-top: 14px; font-size: 0.82rem; color: var(--blc-muted); }
.save-status { margin-top: 8px; font-size: 0.85rem; font-weight: 700; min-height: 20px; }
.save-status.saving  { color: var(--blc-muted); }
.save-status.saved   { color: #1f7a33; }
.save-status.pending { color: var(--blc-muted); }
.save-status.err     { color: #b71c1c; }

@media (max-width: 520px) {
  /* Give phones more usable width (less text wrapping) and a tighter vertical rhythm. */
  .quiz-wrap { margin: 14px auto 64px; padding: 0 10px; }
  .intro-card, .result-card { padding: 24px 16px; border-radius: 14px; }
  .q-card { padding: 20px 14px 22px; border-radius: 14px; }

  /* Intro screen */
  .intro-card .big-emoji { font-size: 2.4rem; }
  .intro-card h1 { font-size: 1.4rem; }
  .intro-card p { font-size: 0.95rem; line-height: 1.5; }
  .intro-steps { margin: 12px auto 16px; max-width: 100%; }
  .intro-steps li { font-size: 0.95rem; margin: 8px 0; gap: 10px; }
  .intro-steps .n { width: 27px; height: 27px; font-size: 0.82rem; }
  .loc-field, .name-field, .dob-field { max-width: 100%; margin-bottom: 16px; }
  .loc-buttons { gap: 8px; }
  .loc-btn { padding: 12px 3px; font-size: 0.9rem; }
  .name-field input, .dob-field input { font-size: 1.05rem; padding: 12px; }   /* >=16px so iOS doesn't zoom on focus */
  .btn-start { padding: 15px 40px; font-size: 1.1rem; }

  /* Question screens */
  .q-kind { font-size: 0.68rem; letter-spacing: 1.5px; }
  .q-prompt { font-size: 1.15rem; }
  .q-sentence { font-size: 1.25rem; }
  .q-ask { font-size: 1.05rem; }
  .q-stim { font-size: 1.1rem; padding: 14px 15px; }
  .opt { font-size: 1.5rem; min-height: 64px; padding: 16px 8px; }
  .opt-grid.maths .opt { font-size: 1.2rem; min-height: 54px; }
  .listen-btn { padding: 13px 22px; font-size: 1rem; margin-bottom: 18px; }

  /* Results screen */
  .result-card .stars { font-size: 2.2rem; }
  .result-card h1 { font-size: 1.35rem; }
  .score-num { font-size: 2.9rem; }
  .result-msg { font-size: 1.02rem; }
  .result-commentary { font-size: 0.92rem; padding: 12px 14px; }
  .btn-cert, .btn-pdf, .btn-retry, .btn-home { padding: 13px 22px; font-size: 0.95rem; }

  /* Number pad (arithmetic): compact keys + display so "Confirm" is reachable
     without lots of scrolling. Keys stay >=44px tall for easy tapping. */
  .sum-imgwrap { margin: 0 0 12px; }
  .sum-answer { min-height: 48px; padding: 8px 14px; font-size: 1.7rem; margin-bottom: 6px; }
  .sum-answer[data-empty="1"]::before { font-size: 0.9rem; }
  .sum-solution { margin: 4px 0 10px; }
  .numpad { max-width: 300px; }
  .numpad-row { gap: 7px; margin-bottom: 7px; }
  .num-key { padding: 11px 0; font-size: 1.4rem; }
  .q-feedback { margin-top: 12px; font-size: 1.05rem; }
  .q-actions { margin-top: 12px; }
  .btn-next, .btn-check { padding: 12px 30px; }
}

/* -- Matching (link) type: two columns joined by tap-to-connect -- */
.link-wrap { margin-top: 6px; }
.link-hint { font-size: 0.95rem; color: var(--blc-muted, #6b6b6b); margin-bottom: 14px; text-align: center; }
.link-board { position: relative; display: flex; justify-content: space-between; gap: 12px; }
.link-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.link-col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-width: 0; position: relative; z-index: 1; }
.link-left { align-items: stretch; }
.link-right { align-items: stretch; }
.link-tile {
  background: #faf6fb; border: 3px solid #e4d4ea; border-radius: 14px;
  padding: 16px 12px; cursor: pointer; font-family: var(--blc-answer-font);
  font-size: 1.4rem; font-weight: 700; color: var(--blc-purple);
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
  min-height: 60px; display: flex; align-items: center; justify-content: center; text-align: center;
}
.link-tile:hover:not(.locked) { background: #f3e8f6; }
.link-tile:active:not(.locked) { transform: scale(0.98); }
.link-tile.active { background: var(--blc-purple); color: #fff; border-color: var(--blc-purple); }
.link-tile.locked { cursor: default; }
.link-solution { margin-top: 16px; font-size: 1.05rem; font-weight: 700; min-height: 1.4em; text-align: center; }
.link-solution .bad { color: #b71c1c; font-weight: 600; font-size: 0.98rem; }
.link-solution .hint-more { color: var(--blc-gold-dark, #a8791d); font-weight: 600; font-size: 0.98rem; }

/* -- Grammar: tap words to circle / underline -- */
.pick-wrap { margin-top: 6px; }
.pick-hint { font-size: 0.95rem; color: var(--blc-muted, #6b6b6b); margin-bottom: 14px; text-align: center; }
.pick-board { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; align-items: center; }
.pick-list .pick-board { gap: 12px 16px; }
.pick-sentence .pick-board { gap: 4px 2px; justify-content: flex-start; line-height: 2.1; }
.pick-word {
  font-family: var(--blc-answer-font); font-size: 1.35rem; font-weight: 700; color: var(--blc-purple);
  background: #faf6fb; border: 3px solid #e4d4ea; border-radius: 12px; padding: 10px 16px; cursor: pointer;
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.pick-sentence .pick-word {
  background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 2px 4px; font-size: 1.4rem;
}
.pick-word:hover:not(.locked) { background: #f3e8f6; }
.pick-sentence .pick-word:hover:not(.locked) { background: #f3e8f6; }
.pick-word:active:not(.locked) { transform: scale(0.97); }
.pick-word.picked { background: #efe0f4; border-color: var(--blc-purple); }
.pick-sentence .pick-word.picked { background: transparent; border-bottom-color: var(--blc-purple); text-decoration: underline; text-decoration-color: var(--blc-purple); text-decoration-thickness: 3px; }
.pick-word.locked { cursor: default; }
.pick-word.answer { background: #e7f7ea; border-color: #2e9e46; color: #1f7a33; }
.pick-sentence .pick-word.answer { background: #e7f7ea; border-bottom-color: #2e9e46; color: #1f7a33; text-decoration-color: #2e9e46; }
.pick-word.bad { background: #fdecea; border-color: #d0342c; color: #b71c1c; }

/* "Choice" questions: fixed sentence words are plain text; the options to pick
   between are shown as clearly highlighted, tappable chips. */
.pick-fixed { font-family: var(--blc-answer-font); font-size: 1.4rem; font-weight: 700; color: var(--blc-purple); padding: 2px 4px; }
.pick-sentence .pick-choice {
  background: #fdf6e3; border: 2px dashed var(--blc-gold-dark, #b8860b); border-radius: 10px;
  padding: 3px 12px; margin: 0 2px; text-decoration: none;
}
.pick-sentence .pick-choice:hover:not(.locked) { background: #f7ecc8; }
.pick-sentence .pick-choice.picked { background: #efe0f4; border: 2px solid var(--blc-purple); text-decoration: none; }
.pick-sentence .pick-choice.answer { background: #e7f7ea; border: 2px solid #2e9e46; color: #1f7a33; text-decoration: none; }
.pick-sentence .pick-choice.bad { background: #fdecea; border: 2px solid #d0342c; color: #b71c1c; text-decoration: none; }

/* "Choose the form" questions: alternatives shown as "chases / is chasing". */
.pick-slash { font-family: var(--blc-answer-font); font-size: 1.4rem; font-weight: 800;
  color: var(--blc-muted, #9a8aa5); padding: 0 1px; align-self: center; }
.pick-word.pick-form { font-weight: 800; }
.pick-list .pick-slash { font-size: 1.3rem; }
.pick-solution { margin-top: 16px; font-size: 1.05rem; font-weight: 700; min-height: 1.4em; text-align: center; }
.pick-solution .bad { color: #b71c1c; font-weight: 600; font-size: 0.98rem; }
.pick-solution .hint-more { color: var(--blc-gold-dark, #a8791d); font-weight: 600; font-size: 0.98rem; }

/* -- Reading comprehension: passage panel kept on screen for every question -- */
.reading-passage {
  background: #fbf8fc; border: 2px solid #e4d4ea; border-left: 6px solid var(--blc-purple);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
  max-height: 42vh; overflow-y: auto; text-align: left;
}
.reading-title {
  font-family: var(--blc-answer-font); font-size: 1.3rem; font-weight: 700;
  color: var(--blc-purple); margin-bottom: 8px;
}
.reading-body p { font-size: 1.05rem; line-height: 1.6; color: var(--blc-ink, #2b2b2b); margin: 0 0 10px; }
.reading-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .reading-passage { max-height: 38vh; } .reading-body p { font-size: 1rem; } }

/* ---- Placement test: countdown timer + placement result ---- */
.quiz-timer { position: fixed; top: 12px; right: 12px; z-index: 60;
  background: var(--blc-purple); color: #fff; font-weight: 800; font-size: 1.05rem;
  padding: 8px 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.20);
  font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.quiz-timer .ic { margin-right: 5px; }
.quiz-timer.low { background: #c62828; animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.timeup-note { color: #c62828; font-weight: 700; margin: 6px 0 10px; }
.place-level { margin: 16px auto 8px; }
.place-level .lvl-name { display: block; font-size: 1.8rem; font-weight: 800; color: var(--blc-purple); line-height: 1.15; }
.place-level .lvl-cefr { display: block; font-size: 1rem; font-weight: 700; color: #8a6d00;
  letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }

/* Dialogue gap-fill prompt (placement test) */
.q-ask .sp { font-weight: 800; color: var(--blc-purple); }
.q-ask .gap { color: #c62828; font-weight: 800; letter-spacing: 1px; }

/* ================================================================
   Landscape: phones AND tablets (short-and-wide viewports)
   ----------------------------------------------------------------
   Turned sideways, a phone is ~390px tall and an iPad ~768px. The
   stacked layout overflows both, so the child has to scroll while
   answering. Tier 1 restructures the layout (number pad beside the
   question, reading passage beside the answers) and trims the page
   chrome. Tier 2 and 3 then shrink sizes further as height gets
   tighter. Portrait is handled by the width-based rules above.
   ================================================================ */

/* -- Tier 1: any short landscape viewport (phones through iPads) -- */
@media (orientation: landscape) and (max-height: 920px) {

  /* slim the page chrome */
  .blc-header { padding: 8px 14px 7px; }
  .blc-logo.wide { height: 44px; }
  .blc-logo.stacked { display: none; }
  .blc-tagline { display: none; }
  .blc-header a.back { position: static; display: inline-block; margin: 0 0 2px; font-size: 0.76rem; }
  /* the wrap ships 26px top + 90px bottom margin — far too much here */
  .quiz-wrap { margin-top: 8px; margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
  .quiz-top { margin-bottom: 8px; }

  .q-card { padding: 16px 18px; }
  .sum-imgwrap { margin: 0 0 10px; }
  .sum-img { width: auto; max-width: 100%; max-height: 34vh; }
  .sum-solution { margin: 2px 0 8px; }
  .listen-btn { margin: 8px auto 14px; }

  /* put the number pad beside the question, not below it.
     Explicit rows are required so the pad can span the full height
     (grid-row: 1 / -1 only reaches the last *explicit* row line). */
  .q-card.q-type-sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: repeat(8, min-content);
    column-gap: 24px;
    align-content: start;
  }
  .q-card.q-type-sum > * { grid-column: 1; }
  .q-card.q-type-sum > .sum-wrap {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-top: 0;
  }

  /* Keep the question clearly larger than the answers. */
  .q-ask, .q-prompt, .q-sentence { font-size: 1.6rem; line-height: 1.3; margin-bottom: 14px; }
  .q-stim { font-size: 1.35rem; }

  /* answer tiles: use the width instead of stacking 2x2. Columns are wide
     enough (220px) for long words/phrases; the trimmer tiles + smaller font
     stop the answers dominating the question and keep options like
     "uninterrupted" on a single line. */
  .opt-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .opt-grid .opt { font-size: 1.35rem; padding: 12px 12px; min-height: 52px; }
  .opt-grid.maths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pic-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

  /* reading: passage beside the question, each scrolling on its own,
     so the prompt stays put and Confirm stays visible */
  .has-passage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  .has-passage > .quiz-top { grid-column: 1 / -1; }
  .has-passage > .reading-passage {
    grid-column: 1; margin: 0;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
  /* The whole question column scrolls as one block if it's ever too tall.
     (Do NOT put overflow on a grid nested in a flex column — iOS Safari
     squishes the answer tiles shorter than their text and it spills out.) */
  .has-passage > .q-card {
    grid-column: 2;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  .has-passage .opt-grid.maths { grid-template-columns: 1fr; }
  /* answer tiles must always be tall enough for their text */
  .has-passage .opt-grid.maths .opt { min-height: 0; height: auto; }
  .has-passage .opt-grid { grid-auto-rows: max-content; }
  /* reading answers are full sentences — size them so the whole column,
     Confirm included, fits without needing to scroll on a tablet */
  .has-passage .q-kind { margin-bottom: 2px; }
  .has-passage .q-ask { font-size: 1rem; margin: 2px 0 8px; line-height: 1.3; }
  .has-passage .opt-grid.maths .opt { font-size: 1.05rem; padding: 9px 11px; line-height: 1.3; }
  .has-passage .q-feedback { min-height: 0; margin-top: 6px; }
  .has-passage .q-actions { margin-top: 8px; }
}

/* -- Tier 2: landscape phones (~600px tall and under) -- */
@media (orientation: landscape) and (max-height: 600px) {
  .blc-header { padding: 6px 14px 5px; }
  .blc-logo.wide { height: 36px; }
  .blc-header a.back { font-size: 0.72rem; }
  .quiz-wrap { margin-top: 6px; margin-bottom: 8px; }
  .quiz-top { margin-bottom: 4px; }

  .q-card { padding: 10px 12px; }
  .q-kind { margin-bottom: 4px; }
  .q-stim, .q-ask, .q-sentence, .q-prompt { font-size: 0.95rem; margin-bottom: 6px; line-height: 1.35; }
  .sum-imgwrap { margin: 0 0 6px; }
  .sum-img { max-height: 30vh; }
  .sum-expr { font-size: 1.6rem; margin: 0 0 8px; }
  .q-big { font-size: 2.4rem; margin: 2px 0 8px; }

  .q-feedback { min-height: 0; margin-top: 6px; font-size: 0.95rem; }
  .q-actions { margin-top: 8px; }
  .btn-next, .btn-check { padding: 9px 26px; font-size: 0.92rem; }

  .sum-answer { min-height: 42px; padding: 5px 12px; font-size: 1.45rem; margin: 0 auto 6px; max-width: 250px; }
  .numpad { max-width: 250px; }
  .numpad-row { gap: 5px; margin-bottom: 5px; }
  .num-key { padding: 6px 0; font-size: 1.12rem; border-radius: 9px; }
  .q-card.q-type-sum { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 20px; }

  .listen-btn { margin: 6px auto 10px; padding: 11px 22px; font-size: 0.98rem; }
  .opt-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 8px; margin-top: 4px; }
  .opt { padding: 12px 8px; font-size: 1.4rem; }
  .opt-grid.tf .opt { font-size: 1.15rem; }
  .opt-grid.maths .opt { font-size: 1rem; padding: 9px 10px; line-height: 1.3; }
  .pic-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .kbd-word, .build-answer { margin-bottom: 6px; }
  .kbd-row { gap: 5px; margin-bottom: 5px; }
  .kbd-key { padding: 7px 0; font-size: 1.05rem; }
  .pick-hint { margin-bottom: 6px; font-size: 0.88rem; }
  .pick-board, .pick-solution { margin-bottom: 4px; }
  .pick-solution { margin-top: 4px; min-height: 0; }
  .link-board { gap: 10px; }
  .reading-body p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 6px; }
  .has-passage { column-gap: 14px; }
  .has-passage > .reading-passage,
  .has-passage > .q-card { max-height: calc(100vh - 118px); }
  .has-passage .q-ask { font-size: 0.92rem; }
  .has-passage .opt-grid.maths .opt { font-size: 0.9rem; padding: 6px 9px; }

  .intro-card { padding: 14px 18px; }
  .intro-card h1 { font-size: 1.3rem; margin-bottom: 4px; }
  .intro-card p { font-size: 0.9rem; line-height: 1.35; margin-bottom: 8px; }
  .name-field, .loc-field, .dob-field { margin-bottom: 8px; }
}

/* -- Tier 3: very short landscape (small/older phones, ~360px tall) -- */
@media (orientation: landscape) and (max-height: 380px) {
  .quiz-wrap { margin-top: 4px; margin-bottom: 6px; padding-top: 4px; padding-bottom: 4px; }
  .q-card { padding: 8px 10px; }
  .sum-answer { min-height: 36px; font-size: 1.3rem; margin-bottom: 5px; }
  .numpad-row { gap: 4px; margin-bottom: 4px; }
  .num-key { padding: 5px 0; font-size: 1.05rem; }
  .q-actions { margin-top: 6px; }
  .btn-next, .btn-check { padding: 8px 22px; font-size: 0.88rem; }
  .sum-img { max-height: 26vh; }
}

/* ================================================================
   Portrait on shorter phones (iPhone SE / 8 / 8 Plus, ~667-736px tall)
   ----------------------------------------------------------------
   The page chrome and number pad are sized for tall screens, which
   pushed the Confirm button below the fold on these devices. Trim the
   vertical spacing so the whole question fits without scrolling.
   Taller phones (812px+) keep the roomier sizing.
   ================================================================ */
@media (orientation: portrait) and (max-height: 780px) {
  .blc-header { padding: 8px 14px 8px; }
  .blc-logo.stacked { height: 66px; }
  .blc-tagline { font-size: 0.66rem; margin-top: 4px; }
  .quiz-wrap { margin-top: 8px; margin-bottom: 12px; }
  .quiz-top { margin-bottom: 8px; }

  .q-card { padding: 14px 14px 16px; }
  .sum-imgwrap { margin-bottom: 8px; }
  .sum-answer { min-height: 44px; margin-bottom: 5px; }
  .numpad-row { gap: 6px; margin-bottom: 6px; }
  .num-key { padding: 9px 0; font-size: 1.3rem; }
  .q-feedback { margin-top: 8px; min-height: 22px; font-size: 1rem; }
  .q-actions { margin-top: 8px; }
  .btn-next, .btn-check { padding: 11px 28px; }
  .listen-btn { margin: 6px auto 12px; }
}