/* ---------- Grade games: math (types/line.js, types/coins.js and the math games' pictures) ----------
   Every puzzle fits the puzzle window with no scrolling, down to 568x320 (CLAUDE.md). */

/* ---------- Number Line (types/line.js) ---------- */
.nl-prompt { font-size: clamp(24px, min(4.4vw, 7.5vh), 46px); }
.nl-prompt .frac { font-size: .7em; }
.nl { width: 100%; max-width: 860px; padding: 0 clamp(20px, 4vw, 40px); }
.nl-track { position: relative; height: clamp(84px, 18vh, 120px); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.nl-bar { position: absolute; left: -14px; right: -14px; top: 58%; height: 8px; margin-top: -4px; border-radius: 4px; background: #3a2a18; box-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.nl-bar::before, .nl-bar::after { content: ''; position: absolute; top: -8px; border: 12px solid transparent; }
.nl-bar::before { left: -16px; border-right: 14px solid #3a2a18; border-left: 0; }
.nl-bar::after { right: -16px; border-left: 14px solid #3a2a18; border-right: 0; }
.nl-tick { position: absolute; top: 58%; width: 3px; height: 16px; margin: -8px 0 0 -1.5px; background: #3a2a18; border-radius: 2px; pointer-events: none; }
.nl-tick.lab { height: 26px; margin-top: -13px; width: 4px; margin-left: -2px; }
.nl-tick.zero { background: #b5281f; }
.nl-tick span { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: clamp(15px, 3vh, 22px); color: var(--ink2); white-space: nowrap; }
.nl-tick span .frac { font-size: .8em; }
.nl-ticks.pulse .nl-tick.lab span { animation: pulseBox .9s ease-in-out 2; border-radius: 6px; }
.nl-from { position: absolute; top: 58%; transform: translate(-50%, -150%); font-size: clamp(22px, 5vh, 34px); line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.nl-marker { position: absolute; top: 58%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.nl-marker i { position: absolute; left: -14px; bottom: 4px; width: 28px; height: 38px; background: #e0702a; clip-path: polygon(50% 100%, 0 40%, 0 0, 100% 0, 100% 40%); border-radius: 6px 6px 0 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.nl-marker i::after { content: ''; position: absolute; left: 8px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #fff6d8; }
.nl-marker.glide { transition: left .8s cubic-bezier(.3, 1.2, .5, 1); }
.nl-marker.bad i { background: #c8372b; animation: wiggle .4s; }
.nl-marker.good i { background: #3f9e48; }
.nl-val { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; font-weight: 700; font-size: 17px; white-space: nowrap; color: #fff; background: #2a6fc4; box-shadow: 0 0 0 2px #fff; }
.nl-val .frac { font-size: .75em; }
.nl-val[hidden] { display: none; }
.nl-from + .nl-marker .nl-val { bottom: 84px; }
.nl-actions { display: flex; gap: 12px; align-items: center; justify-content: center; }
.nl-actions .nudge { min-width: 52px; font-size: 20px; padding-left: 10px; padding-right: 10px; }
/* JK and SK: big stepping stones, each a button */
.nl.big .nl-track { height: clamp(96px, 24vh, 150px); cursor: default; }
.nl.big .nl-bar { top: 55%; background: linear-gradient(#7cc4ff, #3a8ad8); height: 18px; margin-top: -9px; border-radius: 9px; box-shadow: none; }
.nl.big .nl-bar::before, .nl.big .nl-bar::after { display: none; }
.nl-stone { position: absolute; top: 55%; width: clamp(46px, min(8vw, 13vh), 76px); aspect-ratio: 1; transform: translate(-50%, -50%); border: none; border-radius: 46% 54% 50% 50%; cursor: pointer; padding: 0;
  font-family: var(--font); font-weight: 700; font-size: clamp(22px, min(4vw, 6.5vh), 38px); color: #2b1d0e;
  background: radial-gradient(circle at 40% 30%, #f4ead2, #b8a27a); box-shadow: inset 0 -5px 0 #8a7450, 0 0 0 3px var(--ink), 0 5px 0 3px rgba(0, 0, 0, .2); transition: transform .12s, opacity .3s; }
.nl-stone:hover:not(.wrong):not(.fade) { transform: translate(-50%, -54%); }
.nl-stone.start { background: radial-gradient(circle at 40% 30%, #c8f2b4, #6ab65a); }
.nl.big .nl-from { top: 55%; transform: translate(-50%, -125%); z-index: 3; }
.nl-stone.right { background: radial-gradient(circle at 40% 30%, #8fe596, #3f9e48); color: #fff; transform: translate(-50%, -50%) scale(1.12); box-shadow: inset 0 -5px 0 #24642b, 0 0 0 3px #0b2a0c, 0 0 26px rgba(110, 255, 120, .8); }
.nl-stone.wrong { background: #ddc6c0; color: #8a7068; box-shadow: 0 0 0 4px #c8372b; animation: wiggle .4s; }
.nl-stone.fade { opacity: .35; }
.nl-stone.glow { animation: pulseBox .9s ease-in-out infinite; }
.nl-stone.reveal { animation: reveal .6s ease-in-out 2; }
.nl-stone:focus-visible { outline: 4px solid #ffd25a; outline-offset: 3px; }
/* upright phones: 0 to 10 is too many stones for one row, so they zigzag like stepping stones in a river */
@media (max-aspect-ratio: 1/1) {
  .nl { padding: 0 24px; }
  .nl.big .nl-track { height: 170px; }
  .nl.big.n11 .nl-stone { width: 46px; font-size: 22px; }
  .nl.big.n11 .nl-stone:nth-child(even) { top: 80%; }
  .nl.big.n11 .nl-stone:nth-child(odd) { top: 32%; }
  .nl.big.n11 .nl-bar { top: 56%; height: 10px; margin-top: -5px; }
  .nl-tick span { font-size: 14px; }
}
@media (max-height: 420px) {
  .nl-track { height: 70px; }
  .nl-tick span { top: 24px; font-size: 14px; }
  .nl-marker i { width: 22px; height: 30px; left: -11px; }
  .nl-marker i::after { left: 6px; top: 5px; width: 10px; height: 10px; }
  .nl-from { font-size: 20px; }
  .nl-val { bottom: 36px; font-size: 14px; }
  .nl.big .nl-track { height: 86px; }
  .nl-actions .btn { padding-top: 4px; padding-bottom: 4px; }
}

/* ---------- Money (types/coins.js) ---------- */
.coin, .bill { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; font-family: var(--font); font-weight: 700; color: #2b2b30; line-height: 1; vertical-align: middle; }
.coin { --s: 56px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbfbfd, #b9bcc6 60%, #8d919c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), inset 0 0 0 5px #8d919c, 0 0 0 2px #2b2b30, 0 3px 0 2px rgba(0, 0, 0, .25); }
.coin i { font-style: normal; font-size: calc(var(--s) * .34); filter: grayscale(.4); }
.coin b { font-size: calc(var(--s) * .26); }
.coin.dime { --s: 46px; }
.coin.nickel { --s: 54px; }
.coin.quarter { --s: 60px; }
.coin.loonie { --s: 64px; background: radial-gradient(circle at 35% 30%, #fff1b0, #e2b43c 60%, #a87a12); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 5px #a87a12, 0 0 0 2px #3a2a08, 0 3px 0 2px rgba(0, 0, 0, .25); clip-path: polygon(50% 0, 78% 8%, 96% 30%, 100% 56%, 90% 80%, 68% 96%, 42% 100%, 18% 92%, 3% 72%, 1% 44%, 12% 18%, 30% 4%); }
.coin.loonie i { filter: none; }
.coin.toonie { --s: 68px; background: radial-gradient(circle, #f1cf62 0 52%, #c9ccd4 53%, #9a9ea8 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 5px #8d919c, 0 0 0 2px #2b2b30, 0 3px 0 2px rgba(0, 0, 0, .25); }
.coin.toonie i { filter: none; }
.bill { width: 92px; height: 48px; border-radius: 6px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 0 0 2px #1a1a20, 0 3px 0 2px rgba(0, 0, 0, .25); }
.bill b { font-size: 22px; }
.bill.b5 { background: linear-gradient(135deg, #4f8de0, #2a5bb0); }
.bill.b10 { background: linear-gradient(135deg, #a35ad0, #6a2c98); }
.bill.b20 { background: linear-gradient(135deg, #4cb86a, #237a3e); }
.coin.big { --s: clamp(70px, 14vh, 104px); }
.coin.big.dime { --s: clamp(58px, 11.5vh, 86px); }
.coin.big.toonie { --s: clamp(76px, 15vh, 112px); }
.mc-prompt { font-size: clamp(24px, min(4.4vw, 7vh), 44px); }
.mc { display: flex; align-items: stretch; justify-content: center; gap: clamp(10px, 2.5vw, 28px); width: 100%; max-width: 860px; }
.mc-bank { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; flex: 1 1 0; max-width: 380px; }
.mc-pick { display: grid; place-items: center; min-width: 74px; min-height: 74px; padding: 4px; border: none; border-radius: 14px; cursor: pointer; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 3px var(--th-pz-soft), 0 4px 0 rgba(0, 0, 0, .12); transition: transform .1s; }
.mc-pick:hover { transform: translateY(-2px); }
.mc-pick:active { transform: translateY(2px) scale(.96); }
.mc-pick:focus-visible { outline: 4px solid #ffd25a; }
.mc-purse { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; max-width: 420px; min-height: 120px; padding: 8px; border-radius: 16px; border: 4px dashed var(--th-pz-line); background: rgba(255, 255, 255, .35); transition: background .2s; }
.mc-purse.bad { background: #ffe1dc; animation: wiggle .4s; }
.mc-purse.good { background: #c9f5c9; border-color: #3f9e48; border-style: solid; }
.mc-empty { color: #8a6f48; font-weight: 600; font-size: 15px; }
.mc-stacks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
.mc-stack { position: relative; display: flex; align-items: center; padding: 2px 4px; border: none; background: none; cursor: pointer; }
.mc-stack > span + span { margin-left: calc(var(--s, 60px) * -.62); }
.mc-stack > .bill + .bill { margin-left: -70px; }
.mc-stack em { position: absolute; top: -6px; right: -8px; min-width: 26px; padding: 1px 5px; border-radius: 12px; font-style: normal; font-weight: 700; font-size: 14px; color: #fff; background: #2a6fc4; box-shadow: 0 0 0 2px #fff; }
.mc-stack.pop { animation: popIn .25s cubic-bezier(.2, 1.8, .4, 1); }
.mc-total { font-weight: 700; font-size: clamp(16px, 3vh, 22px); color: #1d3f78; }
.mc-total.pulse { border-radius: 8px; }
.mc-actions { display: flex; gap: 10px; justify-content: center; margin-top: auto; }
.mc-stacks { margin-top: auto; }
.flyer.mc-fly { z-index: 90; pointer-events: none; }
.mc-show { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
@media (max-aspect-ratio: 1/1) {
  .mc { flex-direction: column; align-items: center; }
  .mc-bank, .mc-purse { width: 100%; flex: none; }
  .mc-purse { min-height: 96px; }
}
@media (max-height: 420px) {
  .mc-prompt { font-size: 22px; }
  .coin.nickel { --s: 40px; }
  .coin.dime { --s: 34px; }
  .coin.quarter { --s: 43px; }
  .coin.loonie { --s: 45px; }
  .coin.toonie { --s: 47px; }
  .bill { width: 58px; height: 32px; }
  .bill b { font-size: 16px; }
  .mc-pick { min-width: 52px; min-height: 52px; border-radius: 10px; }
  .mc-bank { gap: 6px; flex: 0 1 232px; max-width: 232px; }
  .mc-purse { flex: 1 0 180px; }
  .mc-actions { gap: 6px; }
  .mc-actions .btn { padding-left: 10px; padding-right: 10px; }
  .mc-empty { font-size: 13px; }
  .mc-actions .clear span { display: none; }
  .mc-purse { min-height: 70px; padding: 4px; gap: 4px; }
  .mc-actions .btn { min-height: 36px; font-size: 16px; }
  .mc-stack > .bill + .bill { margin-left: -50px; }
  .mc-actions .btn { padding-top: 4px; padding-bottom: 4px; }
  .coin.big { --s: clamp(54px, 18vh, 70px); }
  .coin.big.dime { --s: clamp(46px, 15vh, 60px); }
  .coin.big.toonie { --s: clamp(58px, 19vh, 76px); }
}

/* ---------- pictures for the math games ---------- */
/* a balance scale (games/math.js balanceSVG) */
.gm-balance { width: clamp(220px, 40vw, 380px); max-height: clamp(100px, 26vh, 170px); }
.gm-balance .bs-post { fill: #6b4527; }
.gm-balance .bs-beam { fill: #8a5a32; }
.gm-balance .bs-pin { fill: #ffd25a; stroke: #3a2a18; stroke-width: 2; }
.gm-balance .bs-str { stroke: #6b4f24; stroke-width: 2; fill: none; }
.gm-balance .bs-pan { fill: #f0d68a; stroke: #6b4f24; stroke-width: 2.5; }
.gm-balance .bs-t { font-weight: 700; fill: #2b1d0e; font-family: var(--font); }
.gm-balance .q { fill: #e0702a; }
.gm-balance .bs-eq, .gm-balance .bs-mark { font-size: 24px; font-weight: 700; fill: #2a6fc4; }
.pz-prompt .gm-balance { display: block; margin: 0 auto; max-height: clamp(100px, 30vh, 180px); }
@media (max-height: 420px) { .pz-prompt .gm-balance { max-height: 34vh; } }
/* In and Out tables, and two equations */
.gm-io { border-collapse: collapse; font-weight: 700; font-size: clamp(18px, 4vh, 28px); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--ink); }
.gm-io th, .gm-io td { padding: 4px clamp(8px, 1.6vw, 16px); border: 2px solid #d8c9a8; text-align: center; color: var(--ink2); }
.gm-io th { background: #f4d98a; }
.gm-io td.q { background: #fff1d6; color: #b5281f; }
.gm-sys { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px; font-weight: 700; font-size: clamp(22px, 5vh, 36px); color: var(--ink2); background: #fff; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink); }
/* price tags */
.gm-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gm-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 10px; font-size: clamp(24px, 5vh, 36px); line-height: 1.1; background: #fff8e0; border-radius: 10px 30px 30px 10px; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px rgba(0, 0, 0, .15); }
.gm-tag b { font-size: .7em; color: var(--ink2); }
.gm-tag em { font-style: normal; font-weight: 700; font-size: .5em; color: #fff; background: #c8372b; padding: 2px 6px; border-radius: 6px; }
.gm-tag.big { font-size: clamp(40px, 9vh, 64px); padding: 4px 18px; }
/* charts */
.gm-chart { display: block; width: auto; height: clamp(110px, 30vh, 230px); max-width: 100%; margin: 0 auto; }
.gm-chart .ch-grid { stroke: #d8c9a8; stroke-width: 1.5; }
.gm-chart .ch-axis { stroke: #3a2a18; stroke-width: 3; }
.gm-chart .ch-ax { font-size: 18px; font-weight: 700; fill: #6b4f24; font-family: var(--font); }
.gm-chart .ch-ic { font-size: 28px; }
.gm-chart .ch-bar { stroke: #2b1d0e; stroke-width: 2; }
.gm-chart .b0 { fill: #e8532b; } .gm-chart .b1 { fill: #2f8fe0; } .gm-chart .b2 { fill: #ffc21c; } .gm-chart .b3 { fill: #3cb85a; }
.gm-chart .ch-line { fill: none; stroke: #c8372b; stroke-width: 4; stroke-linejoin: round; }
.gm-chart .ch-dot { fill: #fff; stroke: #c8372b; stroke-width: 3; }
.gm-chart .ch-slice { stroke: #2b1d0e; stroke-width: 2.5; }
.gm-chart .ch-pl { font-size: 20px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: #2b1d0e; stroke-width: 3px; font-family: var(--font); }
.gm-chart .ch-arrow { fill: #2b1d0e; }
.gm-chart .ch-pin { fill: #ffd25a; stroke: #2b1d0e; stroke-width: 2; }
.gm-chart.pie { height: clamp(100px, 28vh, 210px); }
.gm-pie { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gm-key { display: flex; flex-direction: column; gap: 3px; font-size: clamp(18px, 4vh, 26px); line-height: 1.1; }
.gm-key span { display: flex; align-items: center; gap: 6px; }
.gm-key i { width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 2px var(--ink); }
.gm-key em { font-style: normal; font-size: .7em; font-weight: 700; color: var(--ink2); }
.gm-piles { display: flex; gap: clamp(14px, 4vw, 40px); align-items: flex-end; justify-content: center; }
.gm-piles span { display: flex; flex-direction: column-reverse; align-items: center; font-size: clamp(24px, 6vh, 40px); line-height: 1.05; }
.gm-piles i { font-style: normal; }
.gm-picto { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink); }
.gm-picto div { display: flex; align-items: center; gap: 8px; font-size: clamp(22px, 5vh, 32px); line-height: 1.1; }
.gm-picto b { display: flex; gap: 3px; color: #2a6fc4; font-size: .7em; }
.gm-picto i { font-style: normal; }
.tally { display: inline-flex; gap: 18px; padding: 6px 4px; }
.tl { position: relative; display: inline-flex; gap: 9px; height: clamp(60px, 14vh, 90px); }
.tl i { width: 6px; height: 100%; border-radius: 3px; background: #3a2a18; }
.tl.five b { position: absolute; left: -8px; right: -8px; top: 50%; height: 6px; border-radius: 3px; background: #b5281f; transform: rotate(-28deg); }
.gm-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gm-cards b { min-width: 52px; padding: 6px 8px; font-size: clamp(24px, 5.5vh, 38px); text-align: center; background: #fff; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px rgba(0, 0, 0, .15); }
.gm-events { font-size: clamp(36px, 9vh, 60px); }
.gm-events b { font-size: .45em; vertical-align: middle; color: var(--ink2); }
.gm-say { font-size: clamp(16px, 3.4vh, 24px); color: #6b4f24; max-width: 520px; line-height: 1.2; }
.gm-dots { display: grid; grid-template-columns: repeat(5, auto); gap: 3px; justify-content: center; margin-top: 4px; }
.gm-dots i { width: clamp(9px, 1.8vh, 14px); aspect-ratio: 1; border-radius: 50%; background: #2a6fc4; }
.opt .numeral + .gm-dots { pointer-events: none; }
@media (max-aspect-ratio: 1/1) {
  .gm-chart { height: auto; width: min(100%, 340px); }
  .gm-chart.pie { width: min(60vw, 210px); }
  .gm-balance { width: min(100%, 320px); }
  .gm-io { font-size: clamp(16px, 4.6vw, 24px); }
  .coin.big { --s: min(21vw, 92px); }
  .coin.big.dime { --s: min(17vw, 76px); }
  .coin.big.toonie { --s: min(23vw, 98px); }
  .gm-tags { gap: 6px; }
  .gm-tag { font-size: clamp(20px, 6vw, 28px); padding: 2px 10px 2px 8px; }
  .gm-tag b { font-size: .85em; }
}
@media (max-height: 420px) {
  .gm-chart { height: clamp(78px, 30vh, 120px); }
  .gm-chart.pie { height: clamp(76px, 28vh, 110px); }
  .gm-balance { max-height: clamp(56px, 16vh, 72px); }
  .gm-io { font-size: 17px; }
  .gm-io th, .gm-io td { padding: 2px 8px; }
  .gm-sys { font-size: 20px; padding: 4px 12px; }
  .gm-tag { font-size: 22px; }
  .gm-tag.big { font-size: 36px; }
  .gm-key { font-size: 16px; }
  .gm-piles span { font-size: clamp(16px, 6vh, 22px); }
  .gm-picto { padding: 2px 8px; gap: 1px; }
  .gm-picto div { font-size: 17px; }
  .tl { height: 48px; gap: 7px; }
  .gm-cards b { font-size: 20px; min-width: 38px; padding: 3px 6px; }
  .gm-events { font-size: 32px; }
  .gm-say { font-size: 14px; }
}

/* The smallest phones: the price tags and In/Out tables stay (css/games.css hides only the
   pictures whose sum is in the question), a little smaller. */
@media (max-height: 340px) {
  .kp-art .gm-tag { font-size: 18px; padding: 1px 8px; }
  .kp-art .gm-io { font-size: 15px; }
}