/* ==========================================================================================================================
   The interactive layer: practice boxes (quickplay.js), the "play it" band that ends learning pages, game cards, the daily challenge strip,
   the practice hub and the break card inside guides. Same look as the rest of the site (inked edges, paper, one accent per area), and the same
   rules from DESIGN.md: only transform and opacity animate, motion stops for reduced-motion, and the page reads fine without JavaScript.
   ========================================================================================================================== */
.fr{display:inline-grid;vertical-align:middle;text-align:center;line-height:1.1;font-size:.92em;margin:0 .1em}.fr i{font-style:normal;border-bottom:.07em solid currentColor;padding:0 .2em}.fr b{font-weight:500}
.blank{display:inline-block;min-width:2.2em;height:1em;border-bottom:2px solid currentColor;vertical-align:baseline}

/* ---------- practice box ---------- */
.qp{--c:var(--c-maths,#C24A2C);position:relative;max-width:660px;margin:0 auto;padding:18px 20px 16px;border:2px solid var(--comic-ink,#24203a);border-radius:20px;background:#fffdf8;box-shadow:4px 4px 0 var(--comic-ink,#24203a);color:var(--ink,#1a1612)}
.qp-wide{max-width:720px}
.qp-head{display:flex;align-items:center;gap:12px}
.qp-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border:2px solid var(--comic-ink,#24203a);border-radius:12px;background:var(--c-soft,#FBE8E2);font-size:24px}
.qp-title{flex:1;min-width:0}.qp-title b{display:block;font-size:17px;line-height:1.25}.qp-title small{color:var(--mute,#6B6153);font-size:13px}
.qp-best{padding:3px 10px;border-radius:99px;background:var(--c-soft,#FBE8E2);color:var(--c-ink,#8F2F18);font-size:12px;font-weight:800;white-space:nowrap}
.qp-meter{position:relative;height:12px;margin:14px 0 8px;border-radius:99px;background:var(--ink-a8,rgba(26,22,18,.08));overflow:hidden}
.qp-meter i{display:block;width:100%;height:100%;border-radius:99px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease-out,ease)}
.qp-meter span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:800 10px/1 var(--sans,system-ui);color:var(--ink,#1a1612)}
.qp-dots{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0}.qp-dots li{flex:1;max-width:34px;height:8px;border-radius:4px;background:var(--ink-a12,rgba(26,22,18,.12))}
.qp-dots li.ok{background:var(--ok,#17753A)}.qp-dots li.no{background:var(--bad,#B3261E)}.qp-dots li.now{background:var(--c)}
.qp-count{margin:0 0 4px;color:var(--mute,#6B6153);font-size:13px;font-weight:700}
.qp-q{margin:8px 0 12px;font-size:clamp(20px,3vw,26px);font-weight:700;line-height:1.55}
.qp-input{width:min(11em,100%);padding:9px 12px;border:2px solid var(--comic-ink,#24203a);border-radius:12px;background:#fff;font:700 22px var(--sans,system-ui);text-align:center;color:var(--ink,#1a1612)}
.qp-input.inline{width:5.6em;margin:0 .35em}.qp-input.ok{border-color:var(--ok,#17753A);background:#e8f6ec}.qp-input.no{border-color:var(--bad,#B3261E);background:#fdeceb}
.qp-input:focus-visible,.qp-choice:focus-visible,.qp-chip:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.qp-shake{animation:qp-shake .35s}@keyframes qp-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.qp-vert{display:inline-block;margin-right:14px;vertical-align:middle}.qp-vert .ws-col{display:inline-grid;text-align:right;font:700 26px/1.25 var(--mono,ui-monospace,monospace)}.qp-vert .ws-bot{border-bottom:2px solid currentColor}.qp-vert .ws-op{margin-right:.6em}
.qp-choices{display:flex;flex-wrap:wrap;gap:10px}
.qp-choice{min-width:64px;padding:10px 18px;border:2px solid var(--comic-ink,#24203a);border-radius:12px;background:#fff;color:var(--ink,#1a1612);font:800 18px var(--sans,system-ui);cursor:pointer;transition:transform var(--t-fast,.16s) var(--ease-ui,ease)}
.qp-choice:hover:not(:disabled){transform:translateY(-2px)}.qp-choice.ok{border-color:var(--ok,#17753A);background:#e8f6ec}.qp-choice.no{border-color:var(--bad,#B3261E);background:#fdeceb}.qp-choice:disabled{cursor:default}
.qp-fb{min-height:1.5em;margin:10px 0 4px;font-weight:600;line-height:1.5}.qp-fb.good{color:#0e5a2a}.qp-fb.bad{color:#8f1d17}
.qp-tip{display:block;margin-top:4px;font-weight:500;color:var(--mute,#6B6153)}.qp-note{font-weight:700;color:var(--c-ink,#8F2F18)}.qp-from{color:var(--mute,#6B6153);font-weight:700}
.qp-tray{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.qp-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ink-a24,rgba(26,22,18,.24));font-size:14px;font-weight:700}.qp-links a{color:var(--c-ink,#8F2F18)}
.qp-sum{padding:8px 0;text-align:center}.qp-sum h3{margin:0 0 6px;font-size:22px}.qp-sum p{margin:6px 0}.qp-mastered{color:#0e5a2a;font-weight:700}
.qp-sum-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.qp-score{display:flex;gap:8px;justify-content:center}.qp-score span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:2px solid var(--comic-ink,#24203a);font-weight:800}.qp-score .ok{background:#cdebd6}.qp-score .no{background:#f6cfcb}
.qp-grades{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.qp-chip{padding:6px 13px;border:2px solid var(--comic-ink,#24203a);border-radius:99px;background:#fff;color:var(--ink,#1a1612);font:800 13px var(--sans,system-ui);cursor:pointer}.qp-chip.on{background:var(--c-ink,#8F2F18);color:#fff}
.qp-fallback{margin:0;color:var(--mute,#6B6153)}
.pr-play{display:block}.pr-play .qp{margin-inline:auto}

/* ---------- the "play it" band at the end of learning pages ---------- */
.pm{--c:var(--c-maths,#C24A2C)}
.pm-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}.pm-grid.pm-solo{grid-template-columns:1fr}
.pm-practice .qp{max-width:none}
.pm-games h3{margin:0 0 10px;font-size:16px}
.pm-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}.pm-solo .pm-cards,.pm-rail{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pm-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--comic-ink,#24203a);border-radius:14px;background:#fff;color:inherit;text-decoration:none;box-shadow:3px 3px 0 var(--comic-ink,#24203a);transition:transform var(--t-fast,.16s) var(--ease-ui,ease),box-shadow var(--t-fast,.16s) var(--ease-ui,ease)}
.pm-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--comic-ink,#24203a)}
.pm-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:var(--c-soft,#FBE8E2);font-size:24px}
.pm-txt{flex:1;min-width:0}.pm-txt b{display:block;font-size:15px;line-height:1.3}.pm-txt small{display:block;color:var(--mute,#6B6153);font-size:12.5px;line-height:1.35}
.pm-go{flex:none;padding:5px 12px;border-radius:99px;background:var(--c-ink,#8F2F18);color:#fff;font-size:13px;font-weight:800}
.pm-daily{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:2px dashed var(--comic-ink,#24203a);border-radius:14px;background:#FFF4DC;color:inherit;text-decoration:none;transition:transform var(--t-fast,.16s) var(--ease-ui,ease)}
.pm-daily:hover{transform:translateY(-2px)}.pm-daily>span:nth-child(2){flex:1;min-width:0}.pm-daily-ico{font-size:26px}.pm-daily b{display:block}.pm-daily small{color:var(--mute,#6B6153);font-size:12.5px}
.pm-daily .pm-go{background:var(--comic-ink,#24203a)}
.pm-nudge{display:flex;gap:12px;align-items:flex-start;margin:22px 0;padding:12px 16px;border:2px solid var(--comic-ink,#24203a);border-radius:14px;background:#FFF4DC}.pm-nudge>span{font-size:22px}.pm-nudge p{margin:0}
.pm-nudge a{font-weight:700}

/* ---------- practice hub, grade and skill pages ---------- */
.pr-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.pr-grades{display:flex;flex-wrap:wrap;gap:8px}.pr-chip{padding:8px 14px;border:2px solid var(--comic-ink,#24203a);border-radius:99px;background:#fff;color:var(--ink,#1a1612);font-weight:800;text-decoration:none}.pr-chip.on,.pr-chip:hover{background:var(--c-ink,#8F2F18);color:#fff}
.pr-side{display:grid;gap:6px;min-width:min(100%,330px)}.pr-stat{margin:0;color:var(--mute,#6B6153);font-size:13px}.pr-stat:empty{display:none}
.pr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pr-card{display:grid;gap:7px;padding:14px;border:2px solid var(--comic-ink,#24203a);border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:3px 3px 0 var(--comic-ink,#24203a);transition:transform var(--t-fast,.16s) var(--ease-ui,ease),box-shadow var(--t-fast,.16s) var(--ease-ui,ease)}
.pr-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--comic-ink,#24203a)}
.pr-card-top{display:flex;align-items:center;gap:10px}.pr-card small{color:var(--mute,#6B6153);font-size:12px}.pr-card b{font-size:15px;line-height:1.3}
.pr-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--c-soft,#FBE8E2);font-size:20px}
.pr-bar{display:block;height:8px;border-radius:99px;background:var(--ink-a8,rgba(26,22,18,.08));overflow:hidden}.pr-bar i{display:block;width:100%;height:100%;border-radius:99px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease-out,ease)}
.pr-card em{font-size:12px;font-style:normal;font-weight:700;color:var(--mute,#6B6153)}.pr-card.done em{color:var(--ok,#17753A)}
.pr-lv{display:inline-block;margin-right:6px;padding:1px 9px;border-radius:99px;background:var(--c-soft,#FBE8E2);color:var(--c-ink,#8F2F18);font-size:12px;font-weight:800}
.pr-steps{margin-top:0}

@media(max-width:860px){.pm-grid{grid-template-columns:1fr}}
@media(max-width:520px){.qp{padding:14px 14px 12px}.qp-input{font-size:20px}}
@media(prefers-reduced-motion:reduce){.qp-meter i,.pr-bar i,.pm-card,.pm-daily,.pr-card,.qp-choice{transition:none}.qp-shake{animation:none}}
@media print{.pm,.qp,.pm-nudge{display:none}}

/* "how it works" steps on the practice hub (same look as the worksheet steps) */
.pr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pr-steps li{display:grid;gap:4px;padding:16px 18px;border-radius:18px;background:var(--c-soft,#FBE8E2)}.pr-steps b{font:600 20px var(--serif);color:var(--c-ink,#8F2F18)}.pr-steps span{color:var(--ink-2,#4a4036)}
@media(max-width:900px){.pr-steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.pr-steps{grid-template-columns:1fr}}

/* the gentle "ask about a class" line under a practice result */
.qp-class{margin:14px auto 0;max-width:46ch;padding-top:12px;border-top:1px dashed var(--ink-a24,rgba(26,22,18,.24));color:var(--mute,#6B6153);font-size:14px}.qp-class a{color:var(--c-ink,#8F2F18);font-weight:800}

/* reaction GIFs (public/play/lib/reaction.js, server/giphy.js) */
.rx{margin:8px auto 4px;display:grid;justify-items:center;gap:2px}.rx img,.rx-img{height:120px;width:auto;max-width:100%;border-radius:14px;border:2px solid var(--comic-ink,#24203a);background:#fff}
.rx a,.rx-credit{font-size:10px;color:var(--mute,#6B6153)}[data-rx]{display:grid;justify-items:center;gap:2px;margin-bottom:6px}

/* IXL-style practice hub: recommendations, report, search, lettered categories */
.pr-report{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}.pr-st{padding:12px 14px;border:2px solid var(--comic-ink,#24203a);border-radius:14px;background:#fff;display:grid;gap:2px}.pr-st b{font-size:20px}.pr-st span{color:var(--mute,#6B6153);font-size:12.5px}
.pr-rec{margin:18px 0}.pr-rec h3{margin:0 0 10px;font-size:18px}.pr-ws{margin:12px 0 0;font-weight:700}
.pr-findbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.pr-find{flex:1 1 280px}.pr-find input{width:100%;padding:11px 14px;border:2px solid var(--comic-ink,#24203a);border-radius:12px;font:600 16px var(--sans,system-ui);background:#fff;color:var(--ink,#1a1612)}.pr-count{color:var(--mute,#6B6153);font-size:13px;font-weight:700}
.pr-cat{margin:18px 0 6px}.pr-cat h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:18px}.pr-cat h3 small{color:var(--mute,#6B6153);font-weight:600;font-size:12.5px}
.pr-letter{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c-ink,#8F2F18);color:#fff;font:800 15px var(--sans,system-ui)}
.pr-card[hidden],[data-skill-section][hidden]{display:none}