/* coins.css — the seven coins wherever they show (coins.js): a money card's tray, the counting tray, My Court's pay screen. */
.cn { display: inline-flex; line-height: 0; }
.cn svg { display: block; max-width: none; }
.coin-pic { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; padding: 10px 14px;
  background: var(--paper-2); border: 3px solid var(--wood-deep); border-radius: var(--r-md); max-width: 100%; }
.qc-pic .coin-pic svg { max-height: none; height: auto; }

/* ---------- the counting tray (tray.js): a sheet over the screen, the coins biggest first, the bank pile below ---------- */
.tr-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 12px; background: rgba(10, 12, 40, 0.62);
  opacity: 0; transition: opacity 0.25s ease; }
.tr-wrap.is-on { opacity: 1; }
.tr-card { width: min(100%, 440px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); border: 4px solid var(--wood-deep); box-shadow: 0 10px 0 var(--wood-deep); padding: 14px 14px 16px; display: grid; gap: 10px; min-width: 0; }
.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tr-h { margin: 0; font-size: 1.35rem; line-height: 1.15; }
/* the card's way out (round 14): small, quiet, last in the row — counting stays the big thing on the card */
.tr-later { margin-left: auto; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 2px solid rgba(27, 30, 83, 0.25); background: #fff; color: var(--navy); font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.tr-play { font-size: 0.78rem; font-weight: 800; color: var(--green-deep); background: rgba(47, 211, 127, 0.16); border-radius: var(--r-pill); padding: 4px 10px; }
.tr-total { text-align: center; font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--navy); min-height: 1.3em; transition: transform 0.25s ease; }
.tr-total.is-hidden { visibility: hidden; }
.tr-total.is-big { transform: scale(1.18); color: var(--green-deep); }
.tr-coins { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 10px 6px; min-height: 76px;
  background: var(--paper-2); border: 3px dashed var(--wood-line); border-radius: var(--r-md); }
.tr-coin { position: relative; display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 4px; border: 0; background: none; border-radius: 50%;
  cursor: pointer; transition: transform 0.25s ease, opacity 0.25s ease; -webkit-tap-highlight-color: transparent; }
.tr-coin svg { display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.18)); }
.tr-coin:active svg { transform: translateY(2px); }
.tr-coin.is-counted { transform: translateY(14px) scale(0.86); cursor: default; }
.tr-coin.is-counted svg { filter: saturate(0.55) brightness(0.84); }   /* the coin dims, solid (critic, round 2: see-through read muddy); its "+25¢" stays readable */
.tr-coin.is-counted .tr-name { opacity: 0.8; }
.tr-coin .tr-n { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); min-width: 26px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--yellow); font-weight: 900; font-size: 1rem; line-height: 1.4; opacity: 0; }
.tr-coin.is-counted .tr-n:not(:empty) { opacity: 1; }
.tr-coin.is-wiggle { animation: tr-wiggle 0.5s ease 2; }
@keyframes tr-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
.tr-hint { margin: 0; text-align: center; font-weight: 800; color: var(--navy); min-height: 1.3em; }
.tr-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 26px; }
.tr-chip { line-height: 0; animation: tr-in 0.3s ease; }
@keyframes tr-in { from { transform: translateY(-24px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tr-end { display: grid; gap: 8px; justify-items: center; }
.tr-q { margin: 0; font-weight: 900; font-size: 1.2rem; }
.tr-picks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tr-pick { min-width: 84px; font-size: 1.25rem; }
.tr-pick.is-wrong { filter: grayscale(1) brightness(0.62); }
.tr-go { width: 100%; }
.tr-done { margin: 0; font-weight: 900; font-size: 1.2rem; color: var(--green-deep); text-align: center; }
@media (prefers-reduced-motion: reduce) { .tr-coin, .tr-total, .tr-wrap { transition: none; } .tr-coin.is-wiggle, .tr-chip { animation: none; } .tr-coin.is-wiggle { outline: 4px solid var(--yellow); } }
/* the top bar's bank pill is a button (it opens My Court) */
button.tb-pill { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-money svg { width: 24px; height: 24px; }
.tb-money b { font-size: 0.95rem; letter-spacing: -0.02em; }
/* coins on the way to the bank: a small "+" on the pill's corner (round 11; no amount since round 12) — it never widens the bar
   and sits in the pill's own right padding, clear of the digits */
.tb-money { position: relative; }
.tb-pend { position: absolute; top: -6px; right: -8px; width: 16px; height: 16px; padding: 0; box-sizing: border-box; border-radius: 999px; background: var(--yellow); color: var(--ink); border: 1.5px solid var(--navy); font: 900 0.8rem/13px var(--font); font-style: normal; text-align: center; white-space: nowrap; pointer-events: none; }
.tb-pend[hidden] { display: none; }
/* the bank and the tickets: one pill of two small rows (2026-10-17), so the kid's name still reads beside it on a phone */
.tb-purse { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.tb-purse .tb-pill { height: 21px; padding: 0 9px 0 3px; gap: 3px; border-width: 1.5px; font-size: 0.85rem; }
.tb-purse .tb-pill svg { width: 16px; height: 16px; }
.tb-purse .tb-pill b { font-size: 0.86rem; letter-spacing: -0.01em; }
/* the young games show the bank only (pennies): a full-height pill */
html[data-grade="101"] .tb-purse .tb-pill, html[data-grade="102"] .tb-purse .tb-pill { height: 44px; padding: 0 10px 0 4px; border-width: 2px; }
html[data-grade="101"] .tb-purse .tb-pill svg, html[data-grade="102"] .tb-purse .tb-pill svg { width: 24px; height: 24px; }
html[data-grade="101"] .tb-purse .tb-pill b, html[data-grade="102"] .tb-purse .tb-pill b { font-size: 1rem; }
.tr-name { display: block; font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); margin-top: 1px; }
.tr-say { margin-left: auto; }
.tr-say .hm-speak { width: 44px; height: 44px; }
.tr-coin.is-shake { animation: tr-no 0.35s ease 1; } @keyframes tr-no { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.cn.has-name { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.cn-name { font-size: 0.7rem; font-weight: 800; color: var(--ink-soft); }
/* a card squeezed to fit (ui.js fit → .qc-tight) hides its picture — except coins: there the coins ARE the question
   (critic and 1st-grade tester, 2026-10-18: "How much money is this?" with no coins). They shrink instead. */
.qc-tight .qc-pic:has(.coin-pic) { display: grid; min-height: 0; margin: 0 0 6px; }
.qc-tight .coin-pic { zoom: 0.82; padding: 6px 10px; }   /* coins at least ~30px on a squeezed card (critic, round 4: 18 to 28px read as blobs) */
.tr-coin .tr-n:not(:empty) { opacity: 1; }
.tr-coin:not(.is-counted) .tr-n { opacity: 0; }

/* one coin, both sides (a "What coin is this?" card): front and back side by side (2026-10-18) */
.cn.both { display: inline-flex; gap: 10px; align-items: flex-start; border: 2px dashed var(--wood-deep); border-radius: var(--r-sm); padding: 8px 10px 4px; }   /* one coin, two sides: one frame */
.cn-side { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; }
.cn-sl { font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); }
/* the counting sheet fits a phone (critic, round 4: Pre-K's heading cut off, a big empty gap, the last answer clipped):
   the speaker stays small on the title line, a hidden total takes no room, and the three answers sit in ONE row */
.tr-top { flex-wrap: nowrap; }
.tr-wrap .tr-say .hm-speak { width: 48px; height: 48px; }
.tr-wrap .tr-say .hm-speak svg { width: 28px; height: 28px; }
.tr-total.is-hidden { display: none; }
.tr-picks { flex-wrap: nowrap; width: 100%; }
.tr-pick { width: auto; flex: 1 1 0; min-width: 0; max-width: 150px; padding-left: 8px; padding-right: 8px; }
/* the right answer lights green (critic, round 4: after the right change pick all three turned the same khaki) */
.tr-pick.is-right { --c: var(--green); --cd: var(--green-deep); --t: var(--chalk); }
.tr-pick.is-right[disabled] { filter: none; }

/* the coin to tap next glows after two wrong taps (round 4) */
.tr-coin.is-glow { outline: 4px solid var(--yellow); outline-offset: 3px; border-radius: 50%; animation: tr-glow 0.9s ease-in-out infinite alternate; }
@keyframes tr-glow { from { outline-color: var(--yellow); } to { outline-color: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .tr-coin.is-glow { animation: none; } }
/* a coin's "+$0.25" fits over its own coin on the 4th-grade tray: the coin gets the room, the tag a size that fits it
   (critic, round 9: tags overlapped and were cut off — tools/audit-tray-tags.js) */
.tr-coin .tr-n { white-space: nowrap; }
.tr-coins.tr-long .tr-coin { min-width: 56px; }
.tr-coins.tr-long .tr-n { font-size: 0.8rem; padding: 1px 4px; }
/* the value tag sits ABOVE its coin, never on it: on the small dime and penny it covered half the coin (4th grader, round 10) */
.tr-coins:not(.tr-young) { row-gap: 24px; padding-top: 26px; }
.tr-coins:not(.tr-young) .tr-coin .tr-n { top: auto; bottom: calc(100% - 2px); }

/* skip-counting: each kind's count, then all together (Teddy, 2026-10-19) */
.tr-sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0 0 10px; font-weight: 800; color: var(--ink-soft); }
.tr-sum b { color: var(--ink); }
/* ⭐ COUNTING BY 10s AND 5s (Teddy, 2026-10-19: "It is hard to see which is which. thenumbers need to be on top of the coin for
   counting by 10s or 5s"): bigger coins, the value on each coin's face, one row per kind, and the running count big ON the coin */
.tr-face { position: relative; z-index: 1; padding: 1px 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.9); color: var(--navy-deep); font-weight: 900; font-size: 0.95rem; line-height: 1.15; pointer-events: none; }
.tr-coin > svg, .tr-coin > .tr-face { grid-area: 1 / 1; }
/* the smallest coins keep their value ON them (his rule) but small enough to see the coin round it (critic, rounds 13 and 14: the
   "10¢" tag was wider than the dime and the kid counted tags, not coins) */
.tr-coin[data-coin="dime"] > .tr-face, .tr-coin[data-coin="penny"] > .tr-face, .tr-coin[data-coin="nickel"] > .tr-face { font-size: 0.72rem; padding: 0 3px; background: rgba(255, 255, 255, 0.78); }
.tr-coin > .tr-name { grid-area: 2 / 1; }
.tr-coin.is-counted .tr-face { display: none; }
.tr-break { flex-basis: 100%; height: 0; }
.tr-coins.tr-skip { row-gap: 10px; padding-top: 10px; }
.tr-coins.tr-skip .tr-coin > .tr-n { grid-area: 1 / 1; position: relative; top: auto; bottom: auto; left: auto; transform: none; z-index: 2; padding: 3px 7px; border-radius: 12px; background: var(--navy); color: var(--yellow); font-size: 1.15rem; font-weight: 900; box-shadow: 0 0 0 2px var(--chalk); }
.tr-coins.tr-skip .tr-coin.is-counted { transform: none; }   /* the counted coin stays in its row, its count on it */
.tr-coins.tr-skip .tr-coin.is-counted svg { filter: saturate(0.7) brightness(0.9); }