/* Cash Playground: loaded on /cash-playground only. Uses the site's tokens
   (navy, orange CTA, green gains) and adds depth: a cool mist backdrop,
   layered shadows, a frosted result panel, buckets that fill like liquid.
   Motion is transform and opacity only; reduced motion is honoured. */
.pg-stage {
  --pg-ink: var(--ink); --pg-ink-2: #5A6478; --pg-gain: var(--accent);
  --pg-mist-1: #E6ECF5; --pg-mist-2: #F7F9FC;
  --pg-fill: color-mix(in srgb, var(--navy) 9%, transparent);
  --pg-fill-locked: color-mix(in srgb, var(--navy) 15%, transparent);
  --pg-card: #FFFFFF; --pg-strong: var(--navy);
  --pg-sh-1: 0 1px 1px rgba(14, 59, 88, .04), 0 2px 4px rgba(14, 59, 88, .05), 0 12px 28px -14px rgba(14, 59, 88, .22);
  --pg-sh-2: 0 1px 2px rgba(14, 59, 88, .05), 0 8px 18px -6px rgba(14, 59, 88, .14), 0 28px 60px -24px rgba(14, 59, 88, .35);
  --pg-glass: color-mix(in srgb, #FFFFFF 78%, transparent);
  position: relative; isolation: isolate;
  padding: 8px 0 40px; margin: 0 -16px 8px; padding-inline: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-stage { --pg-strong: var(--sky); --pg-ink-2: var(--ink-3); --pg-mist-1: #0F2232; --pg-mist-2: #0B1620; --pg-card: var(--surface); --pg-glass: color-mix(in srgb, var(--surface) 82%, transparent);
    --pg-fill: color-mix(in srgb, var(--sky) 12%, transparent); --pg-fill-locked: color-mix(in srgb, var(--sky) 20%, transparent);
    --pg-sh-1: 0 0 0 1px #233545, 0 12px 28px -14px rgba(0,0,0,.6); --pg-sh-2: 0 0 0 1px #2F4557, 0 28px 60px -24px rgba(0,0,0,.7); }
}
:root[data-theme="dark"] .pg-stage { --pg-strong: var(--sky); --pg-ink-2: var(--ink-3); --pg-mist-1: #0F2232; --pg-mist-2: #0B1620; --pg-card: var(--surface); --pg-glass: color-mix(in srgb, var(--surface) 82%, transparent);
  --pg-fill: color-mix(in srgb, var(--sky) 12%, transparent); --pg-fill-locked: color-mix(in srgb, var(--sky) 20%, transparent);
  --pg-sh-1: 0 0 0 1px #233545, 0 12px 28px -14px rgba(0,0,0,.6); --pg-sh-2: 0 0 0 1px #2F4557, 0 28px 60px -24px rgba(0,0,0,.7); }
@media (min-width: 760px) { .pg-stage { margin-inline: -32px; padding-inline: 32px; } }
.pg-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 0 32px 32px;
  background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--pg-mist-2), var(--pg-mist-1));
}
.pg-pagehead { padding-top: 28px; }
.pg-pagehead .page-title { max-width: none; font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.pg-pagehead .lede { margin-bottom: 16px; }
.pg-noscript { padding: 20px; background: var(--pg-card); border-radius: var(--r-lg); }

.pg { display: flex; flex-direction: column; gap: 16px; font-variant-numeric: tabular-nums lining-nums; }
.pg number-flow-react { --number-flow-char-height: 1em; }
@media (min-width: 900px) {
  .pg { display: grid; grid-template-columns: minmax(0, 1fr) 312px; grid-template-areas: "controls controls" "board side"; gap: 20px 28px; align-items: start; }
  .pg-controls { grid-area: controls; } .pg-board { grid-area: board; } .pg-side { grid-area: side; position: sticky; top: 88px; }
}

/* ---------- controls: amount slider and taxes ---------- */
.pg-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 20px; align-items: center; padding: 12px 20px; border-radius: var(--r-lg); background: var(--pg-glass); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); box-shadow: var(--pg-sh-1); }
.pg-asof { grid-column: 1 / -1; order: 9; margin: 0; font-size: 12.5px; color: var(--pg-ink-2); }
.pg-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--pg-ink-2); margin-bottom: 6px; }
.pg-amount { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.pg-amount .pg-lbl { margin: 0; }
.pg-amount-n { justify-self: end; font: 700 22px/1.1 var(--font); letter-spacing: -0.02em; color: var(--pg-ink); min-width: 9ch; text-align: right; }
.pg-amount input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pg-amount input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--pg-strong) var(--p), var(--rule-2) var(--p)); }
.pg-amount input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--rule-2); }
.pg-amount input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--pg-strong); }
.pg-amount input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(14,59,88,.18), 0 3px 8px rgba(14,59,88,.28); transition: transform 160ms var(--ease-out); }
.pg-amount input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(14,59,88,.18), 0 3px 8px rgba(14,59,88,.28); }
.pg-amount input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
.pg-amount input[type=range]:focus-visible { outline: none; }
.pg-amount input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 3px 8px rgba(14,59,88,.28); }
.pg-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--pg-ink-2); margin-top: -6px; }
.pg-ends span:nth-child(2) { font-weight: 600; color: var(--pg-ink); }
.pg-tax select, .pg-pct { height: 44px; font: 600 16px/1 var(--font); color: var(--pg-ink); background: var(--pg-card); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 0 12px; }
.pg-pct { display: inline-flex; align-items: center; gap: 2px; }
.pg-pct input { width: 3.2ch; font: inherit; color: inherit; border: 0; background: transparent; padding: 0; text-align: right; outline: none; }
.pg-pct:focus-within, .pg-tax select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---------- result panel ---------- */
.pg-side { display: flex; flex-direction: column; gap: 14px; }
.pg-head { position: relative; padding: 22px 22px 20px; border-radius: var(--r-xl); background: var(--pg-glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: var(--pg-sh-2); }
.pg-k { margin: 0; font-size: 14px; color: var(--pg-ink-2); }
.pg-big { position: relative; display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; font: 750 64px/1 var(--font); letter-spacing: -0.04em; color: var(--pg-ink); min-height: 1.05em; }
.pg-delta { position: absolute; right: 0; top: -6px; padding: 5px 9px; border-radius: 999px; font: 700 13px/1 var(--font); letter-spacing: 0; color: #fff; background: var(--pg-gain); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--pg-gain) 70%, transparent); pointer-events: none; }
.pg-delta.is-down { background: var(--pg-ink-2); }
.pg-vs { margin: 0 0 16px; font-size: 15px; line-height: 1.4; color: var(--pg-ink-2); min-height: 1.4em; }
.pg-vs b { color: var(--pg-gain); font-weight: 700; }
.pg-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.pg-meter-l { font-size: 14px; font-weight: 650; color: var(--pg-ink); }
.pg-track { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.pg-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--sky)); transform-origin: left center; transform: scaleX(0); }
.pg-score-n { font: 750 24px/1 var(--font); letter-spacing: -0.02em; min-width: 2.2ch; text-align: right; color: var(--pg-ink); }

.pg-extras { padding: 18px 20px; border-radius: var(--r-xl); background: var(--pg-card); box-shadow: var(--pg-sh-1); }
.pg-hint { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--pg-ink-2); min-height: 2.9em; }
.pg-badges { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-badges li { position: relative; }
.pg-badge-in { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--pg-ink-2); background: color-mix(in srgb, var(--navy) 6%, transparent); }
.pg-badge-in i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.pg-badges li.on .pg-badge-in { color: var(--pg-ink); background: color-mix(in srgb, var(--pg-gain) 13%, var(--pg-card)); }
.pg-badges li.on .pg-badge-in i { background: var(--pg-gain); }
.pg-glow { position: absolute; inset: -4px; border-radius: 999px; background: radial-gradient(closest-side, color-mix(in srgb, var(--pg-gain) 45%, transparent), transparent); pointer-events: none; }
.pg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-actions button { min-height: 46px; border: 0; border-radius: 999px; font: 650 15px/1 var(--font); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.pg-actions button:active:not(:disabled) { transform: scale(0.97); }
.pg-share { grid-column: 1 / -1; color: var(--cta-ink); background: var(--cta); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cta) 80%, transparent); }
.pg-quiet { color: var(--pg-ink); background: color-mix(in srgb, var(--pg-strong) 10%, var(--pg-card)); }
.pg-actions button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .pg-share:hover { background: var(--cta-hover); } .pg-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-strong) 16%, var(--pg-card)); } }

/* ---------- buckets: containers that fill like liquid ---------- */
.pg-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .pg-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-b { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 20px; background: var(--pg-card); box-shadow: var(--pg-sh-1); transition: box-shadow 180ms ease, transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.pg-fill-wrap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pg-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--pg-fill), color-mix(in srgb, var(--navy) 4%, transparent)); border-top: 2px solid color-mix(in srgb, var(--navy) 22%, transparent); transform: translateY(100%); will-change: transform; }
.pg-b.is-locked .pg-fill { background: linear-gradient(180deg, var(--pg-fill-locked), color-mix(in srgb, var(--navy) 6%, transparent)); }
.pg-hit { position: absolute; inset: 0; z-index: 0; border: 0; padding: 0; background: transparent; border-radius: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg-hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pg-b > :not(.pg-hit):not(.pg-fill-wrap) { position: relative; z-index: 1; pointer-events: none; }
.pg-top h2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 680 15px/1.25 var(--font); letter-spacing: -0.01em; color: var(--pg-ink); }
.pg-who { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--pg-ink-2); min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pg-rate { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.pg-rate-n { font: 720 22px/1.1 var(--font); letter-spacing: -0.02em; color: var(--pg-ink); }
.pg-keep { font-size: 12.5px; font-weight: 600; color: var(--pg-ink-2); }
.pg-tray { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; height: 80px; padding: 6px; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-strong) 10%, transparent); }
.pg-drop { margin: auto; font-size: 12.5px; color: var(--pg-ink-2); }
/* A bill: paper, a printed frame and its value. Bills stack; only the top one shows its face. */
.pg-bill { pointer-events: auto !important; position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 28px; border-radius: 4px; touch-action: none; cursor: grab;
  background: linear-gradient(135deg, #EEF4EA 0%, #D6E4D2 55%, #C9DAC5 100%);
  box-shadow: inset 0 0 0 1px rgba(62, 98, 70, .45), 0 1px 1px rgba(14,59,88,.12), 0 2px 4px -1px rgba(14,59,88,.22); }
.pg-bill + .pg-bill { margin-bottom: -22px; }
.pg-bill::before { content: ""; position: absolute; inset: 3px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(62, 98, 70, .3); background: radial-gradient(ellipse 34% 60% at 50% 50%, rgba(255,255,255,.55), transparent 70%); }
.pg-bill::after { content: ""; position: absolute; inset: -4px; border-radius: 6px; box-shadow: 0 14px 22px -8px rgba(14,59,88,.55); opacity: 0; transition: opacity 160ms ease; }
.pg-bill.is-lifted::after { opacity: 1; }
.pg-bill:active { cursor: grabbing; }
.pg-bill-v { position: relative; font: 750 11px/1 var(--font); letter-spacing: 0.01em; color: #33553C; font-variant-numeric: tabular-nums; }
.pg-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pg-money { font: 700 16px/1.2 var(--font); color: var(--pg-ink); text-align: center; flex: 1; min-width: 0; }
.pg-stepb { pointer-events: auto !important; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; font: 600 20px/1 var(--font); color: var(--pg-ink); background: color-mix(in srgb, var(--pg-strong) 9%, var(--pg-card)); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.pg-stepb:active:not(:disabled) { transform: scale(0.94); }
.pg-stepb:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .pg-stepb:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-strong) 16%, var(--pg-card)); } }
.pg-foot { display: flex; flex-direction: column; gap: 2px; }
.pg-yr { font: 650 13px/1.2 var(--font); color: var(--pg-gain); white-space: nowrap; }
.pg-yr.is-zero { color: var(--pg-ink-2); opacity: .7; }
.pg-tag { font-size: 12px; line-height: 1.3; color: var(--pg-ink-2); }
.pg-b.is-locked .pg-tag::before { content: ""; display: inline-block; width: 7px; height: 6px; margin-right: 4px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 0 -3px 0 -1.5px var(--pg-card), 0 -4px 0 -1px currentColor; }

/* picking and dropping */
.pg-b.is-sel { box-shadow: var(--pg-sh-2), inset 0 0 0 2px var(--cta); }
.pg-b.is-target { box-shadow: var(--pg-sh-1), inset 0 0 0 2px color-mix(in srgb, var(--sky) 70%, transparent); }
.pg-b.is-over { box-shadow: var(--pg-sh-2), inset 0 0 0 2.5px var(--sky); transform: scale(1.02); }
.pg-b.is-off { opacity: .55; }

.pg-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--pg-card); background: var(--pg-ink); box-shadow: var(--pg-sh-2); pointer-events: none; white-space: nowrap; }
.pg-guide { margin-top: 32px; }

/* ---------- phones: the result pins above the buckets ---------- */
@media (max-width: 899px) {
  .pg-side { display: contents; }
  .pg-controls { order: 0; grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .pg-amount { grid-column: 1 / -1; }
  .pg-head { order: 1; position: sticky; top: 68px; z-index: 15; padding: 12px 16px 14px; border-radius: 18px; }
  body:has(.site-head.tuck) .pg-head { top: 8px; }   /* the header slides away while reading down */
  .pg-board { order: 2; }
  .pg-extras { order: 3; }
  .pg-k { font-size: 12.5px; }
  .pg-big { font-size: 40px; margin: 2px 0 2px; }
  .pg-delta { top: 2px; }
  .pg-vs { font-size: 13px; margin-bottom: 8px; }
  .pg-tax select, .pg-pct { width: 100%; }
  .pg-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .pg-b { padding: 12px 12px 8px; }
  .pg-rate-n { font-size: 19px; }
  .pg-tray { height: 76px; }
}
@media (max-width: 360px) { .pg-bill { width: 52px; } .pg-stepb { width: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .pg-b, .pg-stepb, .pg-actions button, .pg-bill::after, .pg-amount input[type=range]::-webkit-slider-thumb { transition: none; }
}