/* vault.css — the Coin Vault: a glowing arcade cabinet on the court. Every class the game module
   creates is here under its vx- name (API.md 3.9, renamed in _paidmods.js). Colours from tokens.css. */

.vx-screen { padding-top: 0; }
.vx-wrap { margin: 0 0 12px; }

/* level · rank · the five loot slots */
.vx-hunt { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.vx-badge { background: var(--shade); border: 2px solid var(--navy-line); border-radius: var(--r-sm); padding: 2px 10px; text-align: center; line-height: 1.05; }
.vx-badge small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--blue); }
.vx-badge b { font-size: 1.05rem; color: var(--yellow); white-space: nowrap; }
.vx-lv b { font-size: 1.35rem; }
.vx-slots { display: flex; gap: 4px; margin-left: auto; }
.vx-slot { width: 30px; height: 30px; border-radius: 9px; border: 2px dashed var(--navy-line); background: var(--shade); display: grid; place-items: center; }
.vx-slot.vxm-got { border: 2px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 22%, var(--navy-deep)); animation: vx-pop 0.5s cubic-bezier(.3,1.8,.5,1); }
.vx-slot svg { width: 22px; height: 22px; }

/* the cabinet */
.vx-cab { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 8px 10px 12px;
  background: linear-gradient(180deg, var(--grape-deep), var(--navy-deep) 30%, var(--navy-deep) 70%, var(--grape-deep));
  border: 5px solid var(--grape);
  box-shadow: 0 0 0 3px var(--navy-deep), 0 0 26px color-mix(in srgb, var(--grape) 70%, transparent), 0 14px 26px rgba(0,0,0,0.4); }
.vx-marq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.vx-title { grid-column: 1 / -1; text-align: center; line-height: 1; }
.vx-title b { display: block; font-size: 1.3rem; font-weight: 900; letter-spacing: 0.1em; color: var(--yellow);
  text-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 80%, transparent), 0 2px 0 var(--red-deep); }
.vx-bulbs { display: block; height: 8px; margin: 3px auto; width: 70%; border-radius: 4px;
  background: radial-gradient(circle, var(--yellow) 2.4px, transparent 3.2px) 0 50% / 12px 8px repeat-x;
  animation: vx-chase 0.8s steps(2) infinite; }
.vx-bulbs.b2 { animation-direction: reverse; }
@keyframes vx-chase { to { background-position: 12px 50%; } }
.vx-meter { display: flex; align-items: center; gap: 5px; background: var(--navy-deep); border: 2px solid var(--navy-line); border-radius: var(--r-pill);
  padding: 2px 10px 2px 3px; min-width: 0; height: 36px; }
.vx-mic svg { width: 26px; height: 26px; display: block; }
.vx-meter b { font-size: 1.15rem; color: var(--chalk); font-variant-numeric: tabular-nums; }
.vx-mlab { font-size: 0.72rem; color: var(--wood-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* the glass: the playfield. deck.parentElement is "the machine" (jackpot, rumble, slowmo; overlays) */
.vx-glass { position: relative; height: 256px; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, var(--navy-soft), var(--navy-deep));
  box-shadow: inset 0 0 0 3px var(--navy-line), inset 0 0 30px rgba(0,0,0,0.55); }
html[data-grade="1"] .vx-glass { height: 250px; }
.vx-deck { position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 22px, transparent 22px 44px),
              linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%); }
.vx-deck.vibe1 { background-color: color-mix(in srgb, var(--red) 16%, transparent); }
.vx-deck.vibe2 { background-color: color-mix(in srgb, var(--green) 14%, transparent); }
.vx-deck.vibe3 { background-color: color-mix(in srgb, var(--grape) 20%, transparent); }
.vx-deck.vibe4 { background-color: color-mix(in srgb, var(--orange) 16%, transparent); }
.vx-deck.vxm-aim { cursor: crosshair; }
.vx-aim { position: absolute; top: 0; bottom: 0; width: 9%; margin-left: -4.5%; pointer-events: none; z-index: 70;
  border-left: 2px dashed var(--yellow); border-right: 2px dashed var(--yellow);
  background: linear-gradient(color-mix(in srgb, var(--yellow) 20%, transparent), transparent); }
.vx-plate { position: absolute; left: 4px; right: 4px; top: 0; height: 6%; z-index: 2; border-radius: 12px 12px 4px 4px;
  background: repeating-linear-gradient(90deg, var(--red) 0 16px, var(--red-deep) 16px 32px);
  border-bottom: 5px solid var(--yellow); box-shadow: 0 6px 16px color-mix(in srgb, var(--red) 55%, transparent); }
.vx-lip { position: absolute; left: 0; right: 0; top: 96%; height: 4px; margin-top: -2px; z-index: 0; border-radius: 2px;
  background: var(--yellow); box-shadow: 0 0 12px var(--yellow); opacity: 0.8; }

/* things on the deck */
.vx-coin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; z-index: 2;
  transform: rotate(var(--r, 0deg)); border-radius: 50%; }
.vx-coin .vx-cf { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 1.5px rgba(0,0,0,0.5)); }
.vx-coin.vxm-prize { width: 34px; height: 34px; margin: -17px 0 0 -17px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blue) 80%, transparent)); }
.vx-coin.vxm-prize .vx-art { width: 100%; height: 100%; display: block; }
.vx-coin.vxm-jack { width: 40px; height: 40px; margin: -20px 0 0 -20px; filter: drop-shadow(0 0 9px var(--yellow)); }
.vx-coin.vxm-chip { border: 3px dashed var(--chalk); box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 10px color-mix(in srgb, var(--chalk) 35%, transparent); }
.vx-coin.vxm-c5 { background: var(--orange); } .vx-coin.vxm-c10 { background: var(--blue); }
.vx-coin.vxm-c25 { background: var(--green); } .vx-coin.vxm-c100 { background: var(--grape); }
.vx-coin .vx-cl { font-size: 0.72rem; font-weight: 900; color: var(--chalk); text-shadow: 0 1px 2px rgba(0,0,0,0.7); letter-spacing: -0.02em; }
.vx-coin.vxm-chip.vxm-fresh { animation: vx-fresh 1.4s ease-out; }
@keyframes vx-fresh { 0% { transform: rotate(var(--r,0deg)) scale(1.4); box-shadow: 0 0 0 6px var(--chalk), 0 0 24px 10px var(--yellow); } 100% { transform: rotate(var(--r,0deg)) scale(1); } }
.vx-coin.vxm-vkey { width: 40px; border-radius: 6px; } .vx-coin .vx-ksvg { width: 40px; height: auto; display: block; filter: drop-shadow(0 0 5px var(--yellow)); }
.vx-coin.vxm-bag { width: 54px; height: 50px; margin: -25px 0 0 -27px; border-radius: 8px; }
.vx-coin .vx-bxsvg { width: 54px; height: auto; display: block; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--grape) 90%, transparent)) drop-shadow(0 3px 2px rgba(0,0,0,0.5)); }
.vx-coin.vxm-teeter { animation: vx-teeter 0.85s ease-in-out infinite; }
@keyframes vx-teeter { 0%, 100% { transform: rotate(var(--r,0deg)) translateY(0); } 50% { transform: rotate(calc(var(--r,0deg) + 9deg)) translateY(2px); } }
.vx-coin.vxm-tipping { animation: vx-tip 0.5s ease-in forwards; z-index: 150 !important; }
@keyframes vx-tip { to { transform: rotate(calc(var(--r,0deg) + 24deg)) translateY(5px) scale(0.94); } }
.vx-coin.vxm-falling { z-index: 150 !important; }
.vx-coin.vxm-nearmiss { animation: vx-near 0.9s ease-out 2; }
@keyframes vx-near { 50% { filter: brightness(1.8) drop-shadow(0 0 12px var(--yellow)); } }
.vx-glass.vxm-slowmo .vx-deck { filter: brightness(0.45) saturate(0.6); transition: filter 0.6s; }
.vx-glass.vxm-slowmo .vx-coin { transition-duration: 2.4s !important; }
.vx-glass.vxm-jackpot { animation: vx-jack 0.6s ease-out; }
@keyframes vx-jack { 30% { box-shadow: inset 0 0 0 3px var(--yellow), inset 0 0 50px color-mix(in srgb, var(--yellow) 60%, transparent), 0 0 30px var(--yellow); } }
.vx-glass.vxm-rumble { animation: vx-rumble 0.6s ease-in-out; }
@keyframes vx-rumble { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }

/* the till: where the coins that fell over the edge land */
.vx-till { position: relative; height: 40px; margin: 14px 0 6px; border-radius: 6px 6px 14px 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--navy-deep), var(--navy)); box-shadow: inset 0 6px 10px rgba(0,0,0,0.6), 0 0 0 2px var(--navy-line);
  display: flex; align-items: flex-end; flex-wrap: wrap-reverse; gap: 1px; padding: 4px 8px; }
/* room for two whole rows of coins, so the top row never rides over the tray's rim and the +5 / +10 tags (1st grader, round 15) */
.vx-till { height: auto; min-height: 40px; max-height: 70px; row-gap: 4px; padding-top: 8px; }
.vx-till.vxm-flash { animation: vx-tillflash 0.5s; }
@keyframes vx-tillflash { 40% { box-shadow: inset 0 0 26px color-mix(in srgb, var(--yellow) 70%, transparent), 0 0 0 2px var(--yellow); } }
.vx-tc { width: 14px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 1px 0 var(--yellow-deep);
  transform: rotate(var(--r, 0deg)) translateY(var(--dy, 0)); animation: vx-land 0.35s ease-out; }
.vx-tc.vx-tp { width: 22px; height: 22px; border-radius: 6px; background: none; box-shadow: none; font-size: 0.7rem; font-weight: 900; color: var(--yellow); display: grid; place-items: center; }
.vx-tc .vx-art { width: 22px; height: 22px; }
@keyframes vx-land { from { transform: translateY(-14px) scale(0.6); opacity: 0; } }

/* the ticket printer under the till */
.vx-print { display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 0 10px; }
.vx-slotmouth { flex: 0 0 auto; height: 24px; border-radius: 8px; padding: 0 8px; display: grid; place-items: center; background: var(--red); color: var(--chalk);
  font-size: 0.66rem; letter-spacing: 0.12em; box-shadow: 0 3px 0 var(--red-deep); }
.vx-tikstrip { flex: 1; display: flex; gap: 2px; height: 100%; align-items: center; overflow: hidden; border-radius: 6px; padding: 0 4px;
  background: var(--navy-deep); box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); }
.vx-tik { flex: 0 0 calc((100% - 50px) / 26); height: 20px; border-radius: 3px; background: var(--red);
  box-shadow: inset 0 0 0 2px var(--red-deep); animation: vx-print 0.3s ease-out; }
.vx-tik.vxm-big { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow-deep); }
@keyframes vx-print { from { transform: translateX(-10px) scaleX(0.2); opacity: 0; } }

.vx-drops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-drop { font-size: 1.35rem; }
.vx-drop.vxm-busy { filter: saturate(0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1rem; }   /* "Pushing…" stays inside its button (critic and 1st grader, round 2) */
html[data-grade="1"] .vx-drop { font-size: 1.6rem; }
html[data-grade="1"] .vx-drop.vxm-busy { font-size: 1.15rem; }
.vx-claimbtn { margin: 0; min-height: 0; height: 100%; padding: 4px 8px; font-size: 0.86rem; line-height: 1.1; }
.vx-claimbtn.vxm-nudge { animation: vx-nudge 1.1s ease-in-out infinite; }
@keyframes vx-nudge { 50% { transform: scale(1.04); box-shadow: 0 var(--press) 0 var(--yellow-deep), 0 0 22px var(--yellow); } }
.vx-msg { margin: 10px 2px 0; min-height: 2.6em; text-align: center; font-size: 0.98rem; font-weight: 800; line-height: 1.3; color: var(--wood-line); }
.vx-msg b { color: var(--chalk); }
html[data-grade="1"] .vx-msg { font-size: 1.08rem; }
.vx-lost { color: var(--orange); }
.vx-tease { color: var(--yellow); }
.vx-trade { display: none; }   /* the module's own in-message trade button: the panel under the machine does this job */

/* sparks from the till (appended to the page) */
.vx-part { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 140; }

/* the counting box that takes over the machine at a claim */
.vx-claim { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; z-index: 95; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center;
  background: color-mix(in srgb, var(--navy-deep) 94%, transparent); opacity: 0; transform: scale(0.94); transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
.vx-claim.vxm-on { opacity: 1; transform: none; pointer-events: auto; }
.vx-ccstrip { width: 70%; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--red) 0 12px, var(--red-deep) 12px 14px); animation: vx-feed 0.6s linear infinite; }
@keyframes vx-feed { to { background-position: 14px 0; } }
.vx-ccl { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.vx-ccn { font-size: 3.4rem; font-weight: 900; color: var(--yellow); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--yellow) 60%, transparent); }
.vx-claim.vxm-done .vx-ccn { animation: vx-pop 0.45s cubic-bezier(.2,1.5,.4,1); }
.vx-ccsub { font-size: 0.9rem; color: var(--wood-line); max-width: 30ch; min-height: 1.2em; }

/* a chip's banner */
.vx-banner { position: absolute; left: 50%; top: 40%; z-index: 90; transform: translate(-50%, -50%) scale(0.8); opacity: 0; pointer-events: none;
  background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 16px; text-align: center; width: 84%;
  box-shadow: 0 6px 0 var(--yellow-deep), 0 0 30px color-mix(in srgb, var(--yellow) 60%, transparent); transition: opacity 0.3s, transform 0.3s; }
.vx-banner.vxm-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vx-bantitle { font-size: 1.3rem; font-weight: 900; color: var(--red); }
.vx-bansub { font-size: 0.92rem; font-weight: 800; color: var(--ink-soft); margin-top: 2px; line-height: 1.3; }

/* the prize box reveal: time slows down */
.vx-reveal { position: absolute; left: -6px; right: -6px; top: 0; min-height: 100%; z-index: 100; border-radius: inherit;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.55s ease;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--grape) 55%, var(--navy-deep)), var(--navy-deep) 75%); }
.vx-reveal.vxm-show { opacity: 1; pointer-events: auto; }
.vx-rin { position: relative; text-align: center; padding: 14px 12px 16px; width: 100%; }
.vx-rbag { display: inline-block; line-height: 0; animation: vx-zoom 0.6s cubic-bezier(.2,1.5,.4,1); }
.vx-rbag .vx-bxsvg { width: 120px; height: auto; }
.vx-rbag .vx-bxlid { transition: transform 0.3s, opacity 0.3s; transform-origin: 50% 100%; }
.vx-rbag.vxm-pulse { animation: vx-shake 0.42s ease-out; } .vx-rbag.vxm-pulse2 { animation: vx-shake 0.4s ease-out 1.3; } .vx-rbag.vxm-pulse3 { animation: vx-shake 0.46s ease-out 2; }
.vx-rbag.vxm-blow { animation: vx-blow 0.3s cubic-bezier(.3,1.8,.5,1) forwards; }
.vx-rbag.vxm-blow .vx-bxlid { transform: translateY(-26px) rotate(-24deg); opacity: 0; }
@keyframes vx-zoom { from { transform: scale(0.3); opacity: 0; } }
@keyframes vx-shake { 25% { transform: rotate(-9deg) scale(1.05); } 50% { transform: rotate(8deg) scale(1.08); } 75% { transform: rotate(-4deg); } }
@keyframes vx-blow { to { transform: scale(1.3); } }
.vx-rflash { position: absolute; inset: -40px; border-radius: 50%; background: var(--chalk); opacity: 0; pointer-events: none; }
.vx-rflash.vxm-go { animation: vx-flash 0.62s ease-out forwards; }
@keyframes vx-flash { 20% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.4); } }
.vx-rlab { margin-top: 12px; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); }
.vx-rlab.vxm-hot { animation: vx-hot 0.5s ease-out infinite alternate; }
@keyframes vx-hot { to { transform: scale(1.12); color: var(--chalk); } }
.vx-rrays { position: absolute; left: 50%; top: 58px; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--yellow) 40%, transparent) 0 10deg, transparent 10deg 30deg); opacity: 0.7; }
.vx-rrays.vxm-go { animation: vx-spin 3.4s linear forwards; }
@keyframes vx-spin { to { transform: rotate(120deg); opacity: 0; } }
.vx-rprize { position: relative; display: inline-block; animation: vx-zoom 0.5s cubic-bezier(.2,1.6,.4,1); }
.vx-rprize .vx-art { width: 84px; height: 84px; display: block; filter: drop-shadow(0 0 14px var(--yellow)); }
.vx-rprize.vxm-taken { animation: vx-taken 0.26s ease-in forwards; }
@keyframes vx-taken { to { transform: translateY(-30px) scale(0.6); opacity: 0; } }
.vx-rtitle { position: relative; font-size: 1.4rem; font-weight: 900; color: var(--yellow); margin-top: 4px; text-shadow: 0 2px 0 var(--red-deep); }
.vx-rsub { position: relative; font-size: 0.95rem; font-weight: 800; color: var(--chalk); max-width: 290px; margin: 6px auto 12px; line-height: 1.35; }
.vx-rok { position: relative; width: min(86%, 320px); min-height: var(--tap); border-radius: var(--r-md); background: var(--yellow); color: var(--ink);
  font-size: 1.25rem; font-weight: 900; box-shadow: 0 var(--press) 0 var(--yellow-deep); }
.vx-rok:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--yellow-deep); }
.vx-rok.vxm-took { background: var(--green); box-shadow: 0 var(--press) 0 var(--green-deep); color: var(--navy-deep); }
@keyframes vx-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* under the machine: trade and shop, small */
.vx-extras { display: grid; gap: 10px; }
.vx-panel { background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 10px 12px; box-shadow: 0 5px 0 var(--wood-deep); }
.vx-ptxt { margin: 0 0 8px; font-size: 0.98rem; font-weight: 800; color: var(--ink-soft); line-height: 1.3; }
.vx-tradebox .vx-ptxt:last-child { margin: 0; }
.kbtn.vx-small { min-height: 54px; font-size: 1.05rem; padding: 8px 14px; }
html[data-grade="1"] .kbtn.vx-small { min-height: 64px; font-size: 1.15rem; }
.kbtn.is-armed { --c: var(--yellow); --cd: var(--yellow-deep); --t: var(--ink); text-shadow: none; }
.vx-shoph { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vx-shoph small { font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); }
.vx-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 2px solid var(--paper-2); }
.vx-iart { width: 36px; height: 36px; flex: 0 0 36px; } .vx-iart svg { width: 100%; height: 100%; }
.vx-iname { flex: 1; min-width: 0; line-height: 1.15; } .vx-iname b { display: block; font-size: 1rem; } .vx-iname small { font-size: 0.8rem; color: var(--ink-soft); font-weight: 800; }
.vx-buy { min-height: 44px; min-width: 88px; padding: 0 14px; border-radius: var(--r-pill); background: var(--red); color: var(--chalk); font-weight: 900; box-shadow: 0 4px 0 var(--red-deep); }
.vx-buy.is-armed { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--yellow-deep); }
.vx-buy:active { transform: translateY(4px); box-shadow: none; }
.vx-need { font-size: 0.85rem; font-weight: 900; color: var(--ink-soft); background: var(--paper-2); border-radius: var(--r-pill); padding: 6px 10px; white-space: nowrap; }

/* the drawn art's colours (used by the module's prizes, loot, coins and the shop) */
.vxf-y { fill: var(--yellow); } .vxf-yd { fill: var(--yellow-deep); } .vxf-o { fill: var(--orange); } .vxf-r { fill: var(--red); }
.vxf-b { fill: var(--blue); } .vxf-g { fill: var(--green); } .vxf-p { fill: var(--grape); } .vxf-pl { fill: color-mix(in srgb, var(--grape) 70%, var(--chalk)); }
.vxf-w { fill: var(--chalk); } .vxf-n { fill: var(--navy); }
.vxs-y { stroke: var(--yellow); } .vxs-yd { stroke: var(--yellow-deep); } .vxs-od { stroke: var(--orange-deep); } .vxs-rd { stroke: var(--red-deep); }
.vxs-r { stroke: var(--red); } .vxs-b { stroke: var(--blue); } .vxs-bd { stroke: var(--blue-deep); } .vxs-gd { stroke: var(--green-deep); }
.vxs-pd { stroke: var(--grape-deep); } .vxs-n { stroke: var(--navy-deep); } .vxs-w { stroke: var(--chalk); }

.vx-where { margin: 10px 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--navy-deep); text-align: center; font-size: 0.95rem; font-weight: 800; color: var(--chalk); line-height: 1.35; }

/* one money number on screen: the top bar's bank (the machine's own bank meter stays hidden, as its ticket meter was) */
.vx-meter.vx-mt { display: none; }

/* 1st grade: one drop per math answer — no 'Drop 5' (parent playtest round 3: it read as 'bet more') */

/* ---------- earn the drops first, then watch the machine (Teddy, 2026-09-28) ---------- */
.vx-earn { margin: 0 0 12px; }
.vx-earnhead { text-align: center; margin: 4px 0 10px; }
.vx-earnhead h2 { margin: 0; font-size: 1.5rem; color: var(--yellow); text-shadow: 0 2px 0 var(--navy-deep); }
.vx-earnhead p { margin: 4px 0 0; color: var(--chalk); font-weight: 700; }
.vx-bank { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; }
.vx-bankslot { width: 50px; height: 50px; border-radius: 50%; border: 3px dashed var(--navy-line); background: var(--shade);
  display: grid; place-items: center; }
.vx-bankslot svg { width: 36px; height: 36px; opacity: 0.18; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; }
.vx-bankslot.is-in { border: 3px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 25%, var(--navy-deep)); animation: vx-pop 0.5s cubic-bezier(.3,1.8,.5,1); }
.vx-bankslot.is-in svg { opacity: 1; filter: none; }
.vx-earnq .kbtn { width: 100%; }
.vx-left { margin: 8px 0 0; text-align: center; color: var(--chalk); font-weight: 700; font-size: 1rem; }
.vx-left b { color: var(--yellow); font-size: 1.25rem; }
.vx-mega { letter-spacing: 0.02em; }
.vx-drop.vx-short { box-shadow: 0 var(--press) 0 var(--red-deep), 0 0 0 3px var(--yellow); }
@media (prefers-reduced-motion: reduce) { .vx-bankslot.is-in { animation: none; } }

/* ---------- the money machine (2026-10-17): real coins on the deck, in the till and in the coin tray strip ---------- */
.vx-coin .vx-mf { display: block; filter: drop-shadow(0 2px 1.5px rgba(0,0,0,0.5)); }
.vx-coin .vx-mf svg { width: 100%; height: 100%; display: block; }
.vx-tc .coin, .vx-tc .vx-mf, .vx-tc .vx-mf svg { width: 16px; height: 16px; display: block; }
.vx-tc:has(.vx-mf) { width: auto; height: auto; background: none; box-shadow: none; border-radius: 50%; }
.vx-tik.vx-tcoin { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: none; box-shadow: none; }
.vx-tik.vx-tcoin svg { width: 20px; height: 20px; display: block; }
/* the coins show ONCE, in the tray: the "COINS" strip under it drew the same coins again (critic round 13; Times Tables, 4th grade and
   1st grade testers, rounds 14–15: "I thought I had 12 coins when I had 6") */
.vx-print { display: none; }
.vx-mt .vx-mic svg { width: 100%; height: 100%; }

/* the young games' empty drop buttons: they look empty but still answer a tap out loud (K tester, round 3) */
.vx-drop.vx-empty { filter: grayscale(0.85) brightness(0.8); }

/* the MEGA round's sure coins wait in the machine's tray (2026-10-19) */
.vx-earnnote { margin: 8px 0; text-align: center; font-weight: 800; }