/* court.css — My Court (court.js): the home strip, the court, the shop, paying, the Savings Jar. Phones first (320 up). */
.ct-strip { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 8px 12px 8px 8px;
  border: 3px solid var(--navy-line); border-radius: var(--r-lg); background: var(--navy-deep); color: var(--chalk); text-align: left; cursor: pointer; min-width: 0;
  box-shadow: 0 5px 0 var(--navy-deep); -webkit-tap-highlight-color: transparent; }
.ct-strip:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy-deep); }
.ct-strip-pic { display: block; line-height: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--navy-line); }
.ct-strip-pic svg { width: 100%; height: auto; display: block; }
.ct-strip-label { display: grid; gap: 2px; min-width: 0; }
.ct-strip-label b { font-size: 1.25rem; }
.ct-strip-label small { font-size: 0.9rem; color: var(--wood-line); overflow-wrap: anywhere; }

.ct-screen { display: grid; gap: 12px; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ct-head h2 { margin: 0; color: var(--chalk); font-size: 1.6rem; }
.ct-big { line-height: 0; border-radius: var(--r-lg); overflow: hidden; border: 4px solid var(--navy-line); box-shadow: 0 6px 0 var(--navy-deep); }
.ct-big svg { width: 100%; height: auto; display: block; }
.ct-svg .ct-item { transform-box: fill-box; }
.ct-big .ct-item, .ct-big .ct-empty, .ct-big .ct-tag { cursor: pointer; }
.ct-item.is-play { animation: ct-hop 0.7s ease; }
.ct-item.is-new { filter: drop-shadow(0 0 6px var(--yellow)); }
@keyframes ct-hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -10px; } 70% { translate: 0 2px; } }
.ct-bank { margin: 0; text-align: center; color: var(--chalk); font-size: 1.15rem; background: var(--navy-deep); border-radius: var(--r-pill); padding: 6px 12px; justify-self: center; }
.ct-bank b { font-size: 1.4rem; color: var(--yellow); font-variant-numeric: tabular-nums; }
.ct-note { margin: 0; text-align: center; color: var(--chalk); font-weight: 700; background: var(--shade); border-radius: var(--r-md); padding: 8px 12px; }
.ct-shopbtn { width: 100%; }

.ct-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ct-card { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; border-radius: var(--r-md); border: 3px solid var(--navy-line); background: var(--shade);
  color: var(--chalk); opacity: 0.62; cursor: pointer; min-width: 0; text-align: center; -webkit-tap-highlight-color: transparent; }
.ct-card.can { opacity: 1; background: var(--paper); color: var(--ink); border-color: var(--wood-deep); box-shadow: 0 5px 0 var(--wood-deep); }
.ct-card.can:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wood-deep); }
.ct-card.gold.can { border-color: var(--yellow-deep); box-shadow: 0 5px 0 var(--yellow-deep); }
.ct-card b { display: block; font-size: 1.02rem; }
.ct-card b::first-letter { text-transform: uppercase; }   /* sentence case, the same as the pay screen's "New ball" (critic, round 11) */
.ct-price { font-weight: 900; font-size: 1.2rem; color: var(--green-deep); }
.ct-card:not(.can) .ct-price { color: var(--chalk); }
.ct-card small { font-size: 0.82rem; font-weight: 800; }

.ct-pay { display: grid; gap: 10px; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); border: 4px solid var(--wood-deep); padding: 14px; min-width: 0; }
.ct-payhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-payhead h2 { margin: 0 0 4px; font-size: 1.35rem; }
.ct-payhead h2::first-letter { text-transform: uppercase; }   /* sentence case, as everywhere else (critic, round 10: "Save Coins In Your Jar") */
.ct-payhead .ct-say { margin-left: auto; }
.ct-pricebig { margin: 0; text-align: center; font-size: 1.1rem; } .ct-pricebig b { font-size: 2rem; color: var(--navy); }
.ct-have { margin: 0; text-align: center; font-weight: 700; } .ct-have b { color: var(--green-deep); }
.ct-paytray { display: grid; gap: 4px; justify-items: center; min-height: 92px; padding: 10px; background: var(--paper-2); border: 3px dashed var(--wood-line); border-radius: var(--r-md); }
.ct-paycoins { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ct-paycoins .cn { cursor: pointer; }
.ct-empty-tray { color: var(--ink-soft); font-weight: 700; }
.ct-paysum { margin: 0; font-weight: 900; font-size: 1.15rem; color: var(--navy); }
.ct-hint { margin: 0; text-align: center; font-weight: 800; color: var(--navy); min-height: 1.2em; }   /* an instruction is never in the error colour (critic, round 4) */
.ct-hint.is-bad { color: var(--red-deep); }
.ct-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ct-pad.is-locked { opacity: 0.5; pointer-events: none; }
.ct-coinbtn { display: grid; justify-items: center; align-content: end; gap: 2px; min-width: 64px; min-height: 76px; padding: 6px 4px; border: 3px solid var(--wood-line);
  border-radius: var(--r-md); background: var(--chalk); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-coinbtn:active { transform: translateY(2px); }
.ct-coinbtn small { font-size: 0.78rem; font-weight: 800; color: var(--ink); }
.ct-payend { display: grid; gap: 8px; }
.ct-change { display: grid; gap: 8px; justify-items: center; }
.ct-yours { margin: 0; text-align: center; font-weight: 900; font-size: 1.4rem; color: var(--green-deep); }

.ct-slots { display: grid; grid-template-columns: repeat(5, 48px); gap: 8px; justify-content: center; }
.ct-slots.ten { grid-template-columns: repeat(5, 42px); }
.ct-slot { width: 48px; height: 48px; border-radius: 50%; border: 3px dashed var(--wood-deep); display: grid; place-items: center; background: var(--paper-2); }
.ct-slots.ten .ct-slot { width: 42px; height: 42px; }
.ct-slot.is-full { border-style: solid; border-color: var(--green-deep); background: rgba(47,211,127,0.18); }
.ct-purse { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; background: var(--paper-2); border-radius: var(--r-md); }
.ct-penny { border: 0; background: none; padding: 2px; min-width: 48px; min-height: 48px; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.ct-penny.is-used { opacity: 0.18; pointer-events: none; }

.ct-jar { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--shade); border: 3px solid var(--navy-line); color: var(--chalk); }
.ct-jarsvg { width: 76px; height: auto; }
.ct-jartext h3 { margin: 0; font-size: 1.15rem; }
.ct-jarsum { margin: 2px 0; font-size: 1.5rem; font-weight: 900; color: var(--green); }
.ct-jarrule { margin: 0; font-size: 0.86rem; color: var(--wood-line); }
.ct-jarbtns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 359px) { .ct-strip { grid-template-columns: 104px 1fr; } .ct-slots { grid-template-columns: repeat(5, 42px); } .ct-slot { width: 42px; height: 42px; } .ct-shop { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ct-item.is-play { animation: none; filter: drop-shadow(0 0 6px var(--yellow)); } }

/* round 1 of the money playtests (2026-10-18) */
.ct-card .ct-thing, .ct-payhead .ct-thing { background: var(--navy); border-radius: 14px; padding: 4px; }   /* the white net and lights were invisible on a white card */
.ct-head .tr-play { background: var(--green); color: var(--navy-deep); }                                         /* "Play money" readable on navy */
.ct-head .hm-speak { margin-left: 4px; }
.ct-hint.is-good { color: var(--green-deep); }
.ct-card { opacity: 1; background: var(--navy-deep); border-color: var(--navy-line); }        /* not see-through: a solid card (critic, 2026-10-18) */
.ct-card:not(.can) .ct-thing { opacity: 0.88; background: var(--navy-soft); }   /* not yet: still clearly seen (critic, round 9: the bench, scoreboard and floor star were dark on navy, almost invisible) */
.ct-jar { background: var(--navy-deep); }
.ct-coinbtn.is-out { opacity: 0.42; }   /* can't be used now: faded, but still its own colour (critic, round 9: a greyed golden dollar read as a silver coin) */

/* "Buy it!" before the price is paid: grey but still answers a tap with "Put in 15¢ more." (4th-grade tester, 2026-10-18) */
.ct-payend .kbtn.is-short { --c: #A7ABBA; --cd: #7A7F92; --t: #3E4356; }   /* clearly grey until the price is paid (1st grader and critic, round 4); a tap still says what is missing */
.ct-changehint { color: var(--navy); }

/* the change answers in one row, on screen (critic, round 2) */
.ct-change .tr-picks { flex-wrap: nowrap; }
.ct-change .tr-pick { min-width: 0; flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
.ct-shop .ct-more { grid-column: 1 / -1; margin: 2px 0 0; }
.ct-pend { display: block; font-size: 0.8rem; color: var(--yellow); font-weight: 800; }
/* THE STORE, REDONE (Teddy, 2026-10-19): savings (and plant food, once the garden ships) first and biggest; the court's things
   second, smaller, under them. Each section names itself on a dark backing, so the scenery never eats the words. */
.ct-first { display: grid; gap: 10px; }
.ct-first[hidden] { display: none; }
.ct-sec { justify-self: start; margin: 4px 0 0; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(16, 18, 58, 0.86); color: var(--chalk); font-size: 1rem; font-weight: 900; }
.ct-sec-extra { font-size: 0.92rem; color: var(--wood-line); }
.ct-first .ct-jar { border-color: var(--green); box-shadow: 0 6px 0 var(--green-deep); }
.ct-first .ct-jarsum { font-size: 1.7rem; }
.ct-jargrew { margin: 0 0 2px; font-weight: 900; color: var(--yellow); }
.ct-food { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--navy-deep); border: 3px solid var(--green); box-shadow: 0 6px 0 var(--green-deep); color: var(--chalk); }
.ct-food[hidden] { display: none; }
.ct-foodart svg { width: 76px; height: auto; display: block; }
.ct-foodbtns { grid-template-columns: 1fr; }
/* the young games' Savings Jar screen: pennies move across with a tap */
.ct-jarmini { display: inline-block; padding: 4px; border-radius: 14px; background: var(--navy); line-height: 0; }   /* the white jar on a dark tile, as every picture on a pay card (it vanished on the cream card) */
.ct-jarmini .ct-jarsvg { width: 64px; height: auto; display: block; }
.ct-into { display: grid; gap: 4px; justify-items: center; padding: 10px; min-height: 64px; border-radius: var(--r-md); border: 3px dashed var(--green-deep); background: rgba(47, 211, 127, 0.12); cursor: pointer; }
.ct-into-l { font-weight: 900; color: var(--green-deep); }
.ct-into-p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 34px; }
.ct-into-p svg { width: 30px; height: 30px; }
.ct-into-p b { margin-left: 6px; font-size: 1.3rem; color: var(--ink); }
/* ⭐ the savings dashboard (Teddy, 2026-10-19): what saving EARNED, shouted; a week of growth, drawn */
.ct-jargrew { margin: 2px 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--yellow); color: var(--navy-deep); font-weight: 900; font-size: 1.05rem; display: inline-block; animation: ct-grewpop 0.6s ease-out 1; }
@keyframes ct-grewpop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ct-jargrew { animation: none; } }
.ct-jarearned { margin: 4px 0 2px; font-weight: 900; color: var(--green); }
.ct-grow { grid-column: 1 / -1; margin: 2px 0 4px; }
.ct-growh { margin: 0 0 4px; font-weight: 800; color: var(--wood-line); font-size: 0.92rem; }
.ct-growsvg { width: 100%; height: auto; display: block; }
.ct-growl { margin: 4px 0 0; display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; color: var(--chalk); }
.ct-growl b { color: var(--green); }
.ct-strip-jar { display: block; font-style: normal; font-weight: 900; color: var(--green-deep); font-size: 0.85rem; }
.ct-strip-jar[hidden] { display: none; }
/* plant food packs and the garden door */
.ct-foodbtns { grid-template-columns: 1fr 1fr; }
.ct-foodbtns .kbtn { min-height: 52px; font-size: 1rem; }
/* paid more than one bag: buy more, or get change */
.ct-moreask { display: grid; gap: 8px; }
.ct-moreask[hidden] { display: none; }
/* how many bags (older games) */
.ct-howmany { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ct-howmany .kbtn { min-width: 64px; min-height: 52px; font-size: 1.6rem; padding: 0; }
.ct-howmany .ct-count { min-width: 90px; text-align: center; font-size: 1.3rem; }