/* shootout.css — the Shootout (screens/shootout.js): a big court, one tap one ball, the make bar decides it */
.so-title { text-align: center; }
.so-court { position: relative; margin: 6px auto 8px; max-width: 360px; height: 248px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 62%, var(--wood) 62%, var(--wood-deep) 100%); box-shadow: 0 6px 0 var(--navy-deep); cursor: pointer; overflow: hidden; touch-action: manipulation; }
.so-hoop { position: absolute; left: 50%; top: 14px; width: 210px; transform: translateX(-50%); }
.so-net { transform-origin: 100px 98px; }
.so-net.is-swish { animation: so-net 0.45s ease-out 1; }
@keyframes so-net { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.28); } 100% { transform: scaleY(1); } }
.so-ball { position: absolute; left: 50%; bottom: 22px; width: 86px; height: 86px; margin-left: -43px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)); }
.so-ball svg { width: 100%; height: 100%; }
.so-score { position: absolute; z-index: 4; right: 14px; bottom: 14px; min-width: 76px; padding: 6px 10px; border-radius: var(--r-md); background: var(--paper); color: var(--navy); text-align: center; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 var(--wood-deep); }
.so-score-n { display: block; font-size: 2rem; }
/* the score sits over the line's arrow, never under it (Times Tables tester, round 15: the arrow struck through "points") */
.so-score small { font-size: 0.75rem; color: var(--ink-soft); }
.so-rack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; min-height: 34px; margin: 0 auto 6px; max-width: 360px; }
.so-rack-ball { width: 26px; height: 26px; }
.so-rack-ball.is-small { width: 16px; height: 16px; }
.so-rack-ball.is-tiny { width: 12px; height: 12px; }
/* a short phone (round 12): the court steps down so the Shoot! button stands on the screen */
.so-tight .so-title { margin-bottom: 6px; }
.so-tight .so-court { height: 200px; margin-top: 2px; }
.so-tight .so-court .so-hoop { width: 150px; top: 8px; }
.so-tight .so-court .so-ball { width: 72px; height: 72px; margin-left: -36px; bottom: 16px; }
.so-tighter .so-court { height: 160px; }
.so-tighter .so-court .so-hoop { width: 120px; top: 6px; }
.so-tighter .so-court .so-ball { width: 58px; height: 58px; margin-left: -29px; bottom: 10px; }
.so-tighter .so-score { bottom: 8px; padding: 4px 8px; }
.so-tighter .so-score-n { font-size: 1.6rem; }
.so-left { margin-left: 6px; color: var(--chalk); font-size: 1.05rem; text-shadow: 0 2px 0 var(--navy-deep); }
/* the reward after a round (ui.js rewardRow): the balls THIS round earned are the hero — they drop in, "+6 balls!", one big
   button to shoot them; My Court and the coin machine are small lines under it (critic, round 8) */
.rw-hero { margin: 12px 0 4px; padding: 12px 10px 14px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: 0 var(--press) 0 var(--wood-deep); text-align: center; }
.rw-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 40px; }
.rw-drop { display: inline-block; width: 34px; height: 34px; animation: rw-drop 0.55s cubic-bezier(.3,1.4,.5,1) both; }
.rw-drop svg { width: 100%; height: 100%; }
.rw-drop.is-small { width: 22px; height: 22px; }
@keyframes rw-drop { 0% { transform: translateY(-60px) scale(0.6); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rw-drop { animation: none; } }
.rw-big { margin: 6px 0 0; font-size: 2rem; font-weight: 900; color: var(--orange-deep); line-height: 1.1; }
.rw-why { margin: 2px 0 10px; font-weight: 800; color: var(--ink-soft); }
.rw-go { width: 100%; }
.rw-btnball { width: 30px; height: 30px; }
.reward-more { display: block; margin: 8px auto 0; background: none; border: 0; font: inherit; font-weight: 800; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.so-court.is-done { height: 200px; }   /* the last ball is in: the court steps down so the score and the next button fit */
.so-court.is-done .so-hoop { width: 150px; top: 8px; }
/* THE MAKE BAR (Teddy, 2026-10-19): navy ends miss, BLUE 1, YELLOW 2, a small GREEN middle 3; the white marker is scored where
   it is drawn, and it pulses where a tap stopped it */
.so-meter { position: relative; height: 34px; max-width: 340px; margin: 0 auto 10px; border-radius: 10px; background: var(--navy-deep); box-shadow: inset 0 0 0 3px var(--navy-line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.so-z { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; }
.so-z i { position: relative; z-index: 3; font-style: normal; font-weight: 900; font-size: 0.85rem; line-height: 1; color: var(--navy); }   /* the number sits over the line, so a shot stopped on green still shows its 3 (critic, round 14: the line hid 4th grade's narrow green "3") */
.so-z1 { background: var(--blue); }
.so-z2 { background: var(--yellow); }
.so-z3 { background: var(--green); }
/* a THIN line (toddler tester, round 12: the thick one covered the whole dark miss strip at the ends, so a miss and a basket
   looked the same there); its cap above the bar keeps it easy to follow */
.so-mark { position: absolute; top: -8px; width: 4px; height: 50px; margin-left: -2px; border-radius: 2px; background: var(--chalk); box-shadow: 0 0 0 2px var(--navy); left: 0; will-change: left; }
.so-mark::before { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -7px; border: 7px solid transparent; border-top: 9px solid var(--chalk); border-bottom: 0; filter: drop-shadow(0 -1px 0 var(--navy)); }
.so-mark.is-hit { animation: so-hit 0.7s ease-out 1; }
/* the stop pulses UP and down, never wider: a wide flash covered the colour it stopped on (4th grader, round 12) */
@keyframes so-hit { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.22); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .so-mark.is-hit { animation: none; background: var(--yellow); } }
/* the young games' "Count my 5 pennies" (audit, 2026-10-19): under the balls, big, the penny on it */
.reward .rw-count { width: 100%; margin-top: 10px; }
.reward .rw-count svg { width: 30px; height: 30px; flex: none; }

/* ONE MONEY: the coins the made shots paid, counted into the bank (2026-10-19) */
.so-btns .so-count { width: 100%; }
.so-btns .so-count svg { width: 30px; height: 30px; flex: none; }
/* on the room photo these sit on a paper pill, dark words (toddler tester, round 12: white "+4 pennies in your bank!" and the
   guest line read at about 2 to 1 on the photo) */
.so-btns .so-paid { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 16px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: 1.15rem; font-weight: 900; box-shadow: 0 3px 0 var(--wood-deep); }
.so-btns .so-paid svg { width: 30px; height: 30px; flex: none; }
.so-btns .k-note, .so-guest { margin: 0; padding: 8px 14px; border-radius: var(--r-md); background: var(--paper); color: var(--ink); text-align: center; font-weight: 800; }

/* save first, before buying (Teddy, 2026-10-19): the save choice stands out above the court one */
.reward-more.rw-save { color: var(--green-deep); font-weight: 900; }
.so-btns .so-save { width: 100%; }