/* PrimaryMath: what is its own (the Young Reader look is in yr.css). Sizes use the same --dvh / --dvw units, so the page fits the screen
   without scrolling: an upright phone is laid on its side by app.js (html.rot), exactly as in Young Reader. */

/* the grade buttons: five big candy buttons in one row */
.gradegrid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--dvw) * 1.6); padding: 0 calc(var(--dvw) * 1); }
.gradegrid .lesson { aspect-ratio: 1 / 1.25; gap: calc(var(--dvh) * 2); }
.gradegrid .lesson .num { width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 24); font-size: calc(var(--dvh) * 15); }
.gradegrid .lesson .ttl { font-size: max(13px, calc(var(--dvh) * 5.2)); }
.gradegrid .lesson small { position: relative; font-size: max(10px, calc(var(--dvh) * 3.2)); font-weight: 700; opacity: .92; }
.gradegrid .lesson:nth-child(1) { background: linear-gradient(135deg, #5b4bff, #3a2bd0 55%, #1c1165); }

/* topic buttons (same candy buttons as Young Reader's lessons): a symbol in the circle, a progress bar and the best score */
.lesson .num.long { font-size: max(12px, calc(var(--dvh) * 4.2)); }
.lesson .num.sym { font-size: max(16px, calc(var(--dvh) * 6.2)); }
.lesson .mini { position: absolute; left: 12%; right: 12%; bottom: calc(var(--dvh) * 1.4); height: calc(var(--dvh) * 1.8); min-height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.lesson .mini i { display: block; height: 100%; background: #ffd34d; border-radius: 999px; }
.lesson .bst { position: absolute; z-index: 2; top: 5%; right: 5%; min-width: calc(var(--dvh) * 8); height: calc(var(--dvh) * 8); min-height: 26px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #ffd34d; border: 2px solid #fff; color: #5a3d00; font-weight: 900; font-size: max(11px, calc(var(--dvh) * 3.6)); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.lesson.mixed { background: linear-gradient(135deg, #ff7ab8, #c9428d 55%, #7a1d57); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #5e1442, 0 calc(var(--dvh) * 2.6) 14px rgba(94, 20, 66, .32), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lesson.mixed .num { color: #c9428d; }
.lesson .ttl { padding-bottom: calc(var(--dvh) * 2.2); }

/* ------------------------------------------------------------------ the question page */
#play { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; touch-action: manipulation; color: #1c1165; background: #bfe6ff; }
.stage { position: absolute; left: 0; right: 0; top: calc(var(--dvh) * 16); bottom: calc(var(--dvh) * 3); display: flex; align-items: stretch; gap: calc(var(--dvw) * 2.4); padding: 0 calc(var(--dvw) * 3); }
.qcol { flex: 1.15; min-width: 0; display: flex; }
.acol { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.qcard { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 1.6); padding: calc(var(--dvh) * 2) calc(var(--dvw) * 1.6); overflow: hidden;
  background: rgba(255, 255, 255, .88); border: calc(var(--dvh) * 1) solid #fff; border-radius: calc(var(--dvh) * 5); box-shadow: 0 calc(var(--dvh) * 1.4) 0 rgba(28, 17, 101, .22); }
.qrow { display: flex; align-items: center; gap: calc(var(--dvw) * 1); width: 100%; }
.qrow h2 { flex: 1; margin: 0; text-align: center; font-weight: 900; font-size: calc(var(--dvh) * 6.4); line-height: 1.2; color: #1c1165; }
.qrow h2.s { font-size: calc(var(--dvh) * 9.4); }
.qrow h2.m { font-size: calc(var(--dvh) * 5.2); } .qrow h2.l { font-size: calc(var(--dvh) * 4.2); }
.qrow .round.soft { width: calc(var(--dvh) * 9); height: calc(var(--dvh) * 9); min-width: 36px; min-height: 36px; background: #efe9fb; color: #5b4bff; border: 2px solid #e6e1f0; box-shadow: 0 2px 0 rgba(28, 17, 101, .2); }
.vis { display: flex; justify-content: center; max-width: 100%; min-height: 0; }
.vis:empty { display: none; }
.vis .pic { height: calc(var(--dvh) * 36); width: auto; max-width: 100%; }
.vis .pic.wide { height: auto; width: 100%; max-height: calc(var(--dvh) * 40); }
.objs { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; font-size: calc(var(--dvh) * 9); line-height: 1.1; }
.objs.two { gap: calc(var(--dvh) * 1.5) calc(var(--dvw) * 2); }
.objs .gone { opacity: .25; filter: grayscale(1); }
.groups { display: flex; flex-wrap: wrap; gap: calc(var(--dvh) * 1.4); justify-content: center; }
.grp { border: 2px dashed #7040e0; border-radius: 14px; padding: 4px 8px; max-width: 30%; font-size: calc(var(--dvh) * 5); display: flex; flex-wrap: wrap; justify-content: center; }
.coins { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.coin { width: calc(var(--dvh) * 11); height: calc(var(--dvh) * 11); min-width: 38px; min-height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: max(12px, calc(var(--dvh) * 3.6)); color: #3b2a00; border: 3px solid rgba(0, 0, 0, .15); background: #ffd666; }
.coin.c1 { background: #d9dde4; } .coin.c2 { background: #e8c27a; } .coin.c5 { background: #f0d36b; } .coin.c10 { background: #f2c14e; }
.note { width: calc(var(--dvh) * 20); height: calc(var(--dvh) * 11); min-width: 64px; min-height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: #1c1165; border: 2px solid rgba(0, 0, 0, .15); background: #cfe8d5; font-size: max(13px, calc(var(--dvh) * 4)); }
.note.n20 { background: #f2d7b0; } .note.n50 { background: #bfe3ee; }
.picto { display: flex; flex-direction: column; gap: calc(var(--dvh) * 1); align-items: stretch; }
.picto > div { display: flex; align-items: center; gap: 10px; }
.picto b { width: calc(var(--dvw) * 9); text-align: right; font-size: max(11px, calc(var(--dvh) * 3.4)); flex: none; }
.picto span { font-size: calc(var(--dvh) * 5); letter-spacing: 2px; }
.picto small { color: #7a7390; font-weight: 700; text-align: center; font-size: max(11px, calc(var(--dvh) * 3.2)); }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; font-style: normal; line-height: 1.1; }
.frac i { font-style: normal; padding: 0 4px; }
.frac i:first-child { border-bottom: .09em solid currentColor; }
.mixed { font-weight: 900; margin-right: 2px; }

/* the right-hand side: four candy answer buttons, or the number pad */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--dvh) * 2.4) calc(var(--dvw) * 1.4); align-content: center; }
.ans { position: relative; overflow: hidden; display: grid; place-items: center; min-height: calc(var(--dvh) * 20); padding: calc(var(--dvh) * 1.5) calc(var(--dvw) * 1); border: calc(var(--dvh) * .8) solid #fff; border-radius: calc(var(--dvh) * 4); background: var(--grad); color: #fff; font: inherit; font-weight: 900; font-size: calc(var(--dvh) * 7); line-height: 1.1;
  box-shadow: 0 calc(var(--dvh) * 1.2) 0 #1c1165, 0 calc(var(--dvh) * 2) 12px rgba(28, 17, 101, .3), inset 0 2px 0 rgba(255, 255, 255, .3); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ans:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ans:active { transform: translateY(calc(var(--dvh) * .8)); box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165; }
.ans.right { background: linear-gradient(135deg, #3fc79a, #1f9a6e); box-shadow: 0 calc(var(--dvh) * 1.2) 0 #0d5c41; }
.ans.wrong { background: linear-gradient(135deg, #ff8fa6, #d94a6a); box-shadow: 0 calc(var(--dvh) * 1.2) 0 #8a1f38; animation: shake .35s; }
.answers.locked .ans { pointer-events: none; }
.ans .frac { margin: 0; } .ans .mixed { margin-right: 4px; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--dvh) * 1.6) calc(var(--dvw) * 1); }
.readout { grid-column: 1 / -1; min-height: calc(var(--dvh) * 12); display: flex; align-items: center; justify-content: center; gap: 8px; border: calc(var(--dvh) * .8) solid #fff; border-radius: calc(var(--dvh) * 4); background: rgba(255, 255, 255, .92); color: #1c1165; font-weight: 900; font-size: calc(var(--dvh) * 7.4); box-shadow: 0 calc(var(--dvh) * 1) 0 rgba(28, 17, 101, .22); }
.readout small { color: #7a7390; font-size: calc(var(--dvh) * 3.6); font-weight: 800; }
.readout.empty { color: #7a7390; font-size: calc(var(--dvh) * 4); font-weight: 700; }
.readout.right { background: #dff5ec; color: #0d5c41; } .readout.wrong { background: #fde4ea; color: #8a1f38; }
.key { min-height: calc(var(--dvh) * 11); border: calc(var(--dvh) * .6) solid #fff; border-radius: calc(var(--dvh) * 3.4); background: var(--grad); color: #fff; font: inherit; font-weight: 900; font-size: calc(var(--dvh) * 6); box-shadow: 0 calc(var(--dvh) * .9) 0 #1c1165, inset 0 2px 0 rgba(255, 255, 255, .3); }
.key:active { transform: translateY(calc(var(--dvh) * .7)); box-shadow: 0 calc(var(--dvh) * .2) 0 #1c1165; }
.key[data-k="⌫"] { background: linear-gradient(135deg, #c9c3dc, #8a83a1); box-shadow: 0 calc(var(--dvh) * .9) 0 #6d6685; }
.key.go { grid-column: 1 / -1; background: linear-gradient(135deg, #3fc79a, #1f9a6e); box-shadow: 0 calc(var(--dvh) * .9) 0 #0d5c41; }
.key.go:disabled { opacity: .5; }
.pad.locked .key { pointer-events: none; }

/* a right or wrong answer: a message inside the question card */
.feedback { width: 100%; border-radius: calc(var(--dvh) * 3); padding: calc(var(--dvh) * 1.4) calc(var(--dvw) * 1.6); font-weight: 800; font-size: calc(var(--dvh) * 4.2); line-height: 1.25; text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(var(--dvh) * 1.2); animation: pop2 .3s ease-out; }
.feedback.ok { background: #dff5ec; color: #0d5c41; } .feedback.no { background: #fde4ea; color: #8a1f38; }
.feedback .plus { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #8a5a00; }
.feedback .plus svg { width: 1.2em; height: 1.2em; }
.feedback button { border: calc(var(--dvh) * .6) solid #fff; border-radius: 999px; background: var(--grad); color: #fff; font: inherit; font-weight: 900; padding: calc(var(--dvh) * 1) calc(var(--dvh) * 6); box-shadow: 0 calc(var(--dvh) * .9) 0 #1c1165; }

.chip.coinchip svg { width: calc(var(--dvh) * 5.6); height: calc(var(--dvh) * 5.6); }
.letterchip { font-size: max(13px, calc(var(--dvh) * 4)); font-weight: 900; color: #1c1165; white-space: nowrap; }
.endcard .big svg { fill: none; }
.endcard { min-width: calc(var(--dvw) * 40); }
.endcard .start-btn { display: block; width: 100%; margin-top: calc(var(--dvh) * 1.6); font-size: calc(var(--dvh) * 5.6); padding: calc(var(--dvh) * 1.8) calc(var(--dvh) * 6); }
.endcard .start-btn.alt { background: linear-gradient(135deg, #c9c3dc, #8a83a1); box-shadow: 0 calc(var(--dvh) * 1.2) 0 #6d6685; }
.endcard h2 { font-size: calc(var(--dvh) * 7); }

#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 300; }
#confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(720deg); opacity: .8; } }
.shake { animation: shake .35s; }

/* a short phone (landscape): tighter */
html.short .qrow h2 { font-size: calc(var(--dvh) * 5.6); }