/* ---------------------------------------------------------------- the quiz (js/activities.js, js/questions.js) */
.quiz { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.quiz > .prompt-row { min-height: 0; flex: none; }
/* .q-choice / .q-pad / .q-widget: how the question is answered (not .choice – that is the round answer button) */
.q-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3vw; }
.q-body.q-choice { flex-direction: column; justify-content: space-evenly; }
/* the number pad / the ✓ of a widget on the right side (the page is right-to-left: row-reverse puts them right) */
.q-body.q-pad, .q-body.q-widget { flex-direction: row-reverse; }
.q-prompt {
  flex: 1; min-width: 0; min-height: 0; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.q-body.q-choice .q-prompt { flex: 0 1 auto; }
/* the question keeps its size: when the room is short, the hint under it gives way (it does not cover the answer
   boxes). Not with a widget – its column shrinks to the room that is left. */
.q-body.q-choice > .q-prompt > :not(.q-hint), .q-body.q-pad > .q-prompt > :not(.q-hint) { flex-shrink: 0; }
.q-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; max-width: 100%; }
.q-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 100%; }
.q-op { font-size: min(9vmin, 64px); font-weight: 700; color: var(--purple); }
.q-number { font-size: min(18vmin, 140px); font-weight: 700; line-height: 1.15; color: var(--purple); background: #fff; border-radius: 34px; padding: 0 36px; box-shadow: var(--shadow); }
.q-number.digits { display: flex; gap: 2px; direction: ltr; }
.q-number .hl { color: var(--pink); text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: 10px; }
.q-text { font-size: min(5vmin, 34px); line-height: 1.5; text-align: center; color: var(--ink); background: rgba(255, 255, 255, .75); border-radius: 18px; padding: 2px 18px; }
.q-text.small { font-size: min(3.6vmin, 24px); background: transparent; color: var(--ink2); padding: 0; }
.q-text.big { font-size: min(7vmin, 52px); }
.q-text.words { font-size: min(8vmin, 60px); color: var(--purple); background: #fff; box-shadow: var(--shadow); padding: 4px 30px; }
.q-text.hint-line { font-size: min(6vmin, 42px); color: var(--ink2); background: #fff7c2; direction: rtl; }
.q-pic { font-size: min(18vmin, 130px); line-height: 1.1; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .12)); }
.q-pic.small { font-size: min(9vmin, 60px); }
.q-ear { font-size: min(20vmin, 150px); animation: wiggle 1.2s ease-in-out infinite; }
.sym { font-family: 'Fredoka', sans-serif; font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* the picture help that appears after a wrong answer */
.q-hint { display: none; }
.q-hint.show {
  display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 32vh; min-height: 0;
  background: rgba(255, 247, 194, .9); border-radius: 24px; padding: 8px 14px; box-shadow: inset 0 0 0 3px #fde68a;
  animation: popIn .35s ease-out; overflow: hidden;
}
.q-hint.show > * { max-height: calc(32vh - 16px); max-width: 100%; }

/* answer boxes inside the pictures (made by models.js as .m-box) – what the child types goes in here */
.m-box.active { box-shadow: 0 0 0 5px var(--yellow), 0 6px 14px rgba(0, 0, 0, .12); animation: boxPulse 1.2s ease-in-out infinite; }
.m-box.active.shake { animation: shake .45s ease-in-out; }
.m-box.filled { border-style: solid; color: var(--purple); background: #fff; }
.m-box.right { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; animation: bounceIn .45s ease-out; }
.m-box.mirror { border-style: dotted; opacity: .85; pointer-events: none; }
@keyframes boxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* choices */
.quiz .choices { gap: 3vw; }
.choice.wide {
  width: auto; aspect-ratio: auto; min-width: min(22vmin, 170px); min-height: min(13vmin, 96px);
  padding: 8px 26px; border-radius: 34px; font-size: min(6.5vmin, 46px); line-height: 1.3;
}
.choice.wide.pic { padding: 10px 16px; }
.choice.wide > * { max-width: 100%; }
.choice .ku, .choice.wide .ku { font-family: 'Naskh', serif; font-weight: 700; }
.choice.pic { color: var(--ink); }
.choice.pic svg { max-height: min(22vmin, 170px); width: auto; }
/* (all choices are disabled once it is found or shown – the right one stays bright, not faded like a disabled button) */
.quiz .choice.right { animation: bounceIn .5s ease-out; background: radial-gradient(circle at 30% 25%, #bbf7d0, #22c55e 60%); color: #fff; box-shadow: 0 9px 0 #15803d, 0 0 0 6px #fff; opacity: 1; }
.quiz .choice.wide.pic.right, .quiz .choice.pic.right { background: #dcfce7; color: var(--ink); }
.quiz .choice.wrong { opacity: .35; filter: grayscale(1); animation: none; }
.choice.wide .m-eq { font-size: inherit; }

/* the number pad */
.numpad { display: grid; grid-template-columns: repeat(3, min(10vmin, 78px)); gap: min(1.6vmin, 12px); flex: none; direction: ltr; }
.np-key {
  aspect-ratio: 1; border-radius: 20px; background: #fff; color: var(--ink);
  font-size: min(6vmin, 44px); font-weight: 700; line-height: 1;
  box-shadow: 0 5px 0 #ddd6fe, 0 8px 16px rgba(0, 0, 0, .08);
  display: grid; place-items: center; touch-action: manipulation;
}
.np-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #ddd6fe; }
.np-key.back { background: #fff1c2; box-shadow: 0 5px 0 #fcd34d; }
.np-key.ok { background: var(--green); color: #fff; box-shadow: 0 5px 0 #15803d; }
.np-key.ok.ready { animation: pulse 1.1s ease-in-out infinite; }
.np-key:disabled { opacity: .5; }

/* the ✓ beside a widget */
.w-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: none; }

/* mental addition: tens, ones, both */
.partial { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255, 255, 255, .7); border-radius: 26px; padding: 8px 20px; box-shadow: inset 0 0 0 3px #e9e3ff; }
.partial .m-eq { font-size: min(5.5vmin, 40px); }

/* a helping fact shown small above the question (7 + 8 = 15 → 15 − 7 = □) */
.helper { opacity: .75; transform: scale(.82); }

/* neighbours: three points of a little number line (just before / after / between) */
.neighbors { display: flex; align-items: flex-start; gap: min(8vw, 90px); position: relative; padding: 14px 30px 4px; direction: ltr; }
.neighbors::before { content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 4px; border-radius: 3px; background: var(--ink2); }
/* an arrowhead at each end: the one space between them is stretched over the whole width */
.neighbors::after { content: '◀ ▶'; position: absolute; left: -12px; right: -12px; top: 9px; display: block; text-align: justify; text-align-last: justify; color: var(--ink2); font-size: 20px; }
.nb-pt { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.nb-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff; }
.nb-n { font-size: min(9vmin, 64px); font-weight: 700; color: var(--ink); }
.nb-box { min-width: min(18vmin, 130px); font-size: min(8vmin, 58px); }

/* ordinals: a queue with a flag at the front (on the right) – 8 animals and the flag fit the width of the screen
   (the vw caps: a tablet held upright; phones: below) */
.queue { display: flex; align-items: flex-end; gap: min(2vw, 16px); padding: 10px 16px; background: rgba(255, 255, 255, .7); border-radius: 26px; flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.q-flag { font-size: min(9vmin, 64px, 5.6vw); }
.q-animal { font-size: min(8vmin, 58px, 5vw); line-height: 1.1; padding: 4px; border-radius: 18px; }
.q-animal.marked { background: #fff3a6; box-shadow: 0 0 0 4px var(--yellow); animation: bob 1.2s ease-in-out infinite; }
/* in a game card (games.js shrinks the picture until it fits) the queue keeps its whole width: all of it is shrunk */
.g-fit .queue { max-width: none; }
.g-fit .q-col:has(> .queue) { max-width: none; }

/* a fact family: three numbers in a little house */
.family { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 10px 22px 14px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); font-size: min(7vmin, 50px); font-weight: 700; text-align: center; }
.family .fam-top { grid-column: 1 / -1; color: var(--purple); border-bottom: 4px solid #e9e3ff; }

/* hidden blocks under a cloth */
.cloth {
  width: min(22vmin, 160px); aspect-ratio: 1.2; border-radius: 26px 26px 14px 14px;
  background: repeating-linear-gradient(45deg, #fb7185, #fb7185 14px, #fda4af 14px, #fda4af 28px);
  color: #fff; font-size: min(12vmin, 90px); font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 8px 0 #be123c, 0 14px 24px rgba(0, 0, 0, .15); text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}

/* stories with big numbers: a card with the picture and the number */
.story-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border-radius: 26px; padding: 8px 22px 10px; box-shadow: var(--shadow); min-width: min(18vmin, 130px);
}
.story-card .emo { font-size: min(10vmin, 72px); line-height: 1.1; }
.story-card > b { font-size: min(7vmin, 52px); color: var(--ink); }
.story-card .sc-sign { position: absolute; top: -14px; inset-inline-start: -14px; width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }

/* two-step stories */
.two-steps { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ts-step { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, .75); border-radius: 22px; padding: 6px 16px 10px; box-shadow: inset 0 0 0 3px #e9e3ff; }
.ts-step .m-eq { font-size: min(5vmin, 38px); }

/* portrait: the pad under the question – two rows of 6 keys over the width (keys up to 64 px on a tablet) */
@media (orientation: portrait) {
  .q-body.q-pad, .q-body.q-widget { flex-direction: column; justify-content: space-between; gap: 10px; }
  .numpad { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 444px); }
  .w-side { flex-direction: row; }
}
@media (max-width: 600px) {
  .q-number { font-size: min(24vw, 110px); padding: 0 22px; border-radius: 26px; }
  .q-text { font-size: min(5.6vw, 26px); }
  .q-text.small { font-size: min(4.8vw, 20px); }
  .q-text.words { font-size: min(9vw, 40px); }
  .q-pic { font-size: min(24vw, 100px); }
  .choice.wide { min-width: min(36vw, 150px); min-height: 56px; font-size: min(7vw, 32px); padding: 6px 16px; }
  .numpad { gap: 6px; }
  .np-key { font-size: min(7vw, 30px); border-radius: 14px; }
  .neighbors { gap: 9vw; padding: 12px 18px 4px; }
  .story-card { padding: 6px 14px 8px; }
  .queue { gap: 2px; padding: 10px 8px; }
  .q-flag { font-size: 7vw; }
  .q-animal { font-size: 6.2vw; padding: 2px; border-radius: 12px; }
  .q-hint.show { max-height: 24vh; }
  .q-hint.show > * { max-height: calc(24vh - 16px); }
}
@media (max-height: 560px) {
  .q-number { font-size: min(16vmin, 100px); }
  .numpad { grid-template-columns: repeat(3, min(12vmin, 64px)); gap: 8px; width: auto; }
}

/* solids and flat shapes as choices: the picture with its name under it */
.solid-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.solid-pick > svg, .solid-pick > .m-svg { width: min(16vmin, 118px); height: auto; max-height: min(16vmin, 118px); }
.solid-pick .ku { font-size: min(3.6vmin, 24px); line-height: 1.3; color: var(--ink); }

/* a fraction of a set: one of the things is coloured */
.frac-set { display: flex; gap: min(3vw, 22px); padding: 10px 18px; background: rgba(255, 255, 255, .8); border-radius: 26px; direction: rtl; }
.frac-set .fs-item { font-size: min(13vmin, 92px); line-height: 1.1; filter: grayscale(1) opacity(.45); }
.frac-set .fs-item.on { filter: none; transform: scale(1.08); text-shadow: 0 0 0 transparent; }
.frac-set.small { padding: 4px 8px; gap: 6px; }
.frac-set.small .fs-item { font-size: 34px; }

/* who ate more? two pizzas with names */
.pizza-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 26px; padding: 8px 14px; box-shadow: var(--shadow); }
.pizza-card > svg, .pizza-card > .m-svg { width: min(22vmin, 160px); height: auto; }
.pizza-card .ku { font-size: min(4.4vmin, 30px); }

/* 100 less | number | 100 more – the book's table */
.ml-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #fff; min-width: min(80vw, 560px); }
.ml-cell { display: flex; flex-direction: column; border-inline-start: 3px solid #ede9fe; }
.ml-cell:first-child { border-inline-start: 0; }
.ml-head { background: #c4b5fd; color: #3b2a77; font-size: min(4vmin, 28px); text-align: center; padding: 4px 8px; }
.ml-body { display: grid; place-items: center; min-height: min(16vmin, 110px); font-size: min(8vmin, 58px); font-weight: 700; padding: 8px; }
.ml-body .m-box { min-width: min(18vmin, 130px); }

/* "use a table": animals and their weights */
.data-table { border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); font-size: min(4.2vmin, 30px); }
.data-table th { background: #fde68a; color: #7c4a03; padding: 4px 18px; font-weight: 700; }
.data-table td { padding: 2px 18px; border-top: 2px solid #fef3c7; text-align: center; font-weight: 700; }
.data-table td:first-child { text-align: start; }
.data-table .dt-animal { font-size: 1.3em; margin-inline-end: 8px; vertical-align: middle; }
@media (max-width: 600px) {
  .data-table { font-size: 17px; }
  .data-table th, .data-table td { padding: 2px 8px; }
  .ml-table { min-width: 0; width: 100%; }
}