/* Recess Coins and payments (src/site/pages/coins.ts, src/site/components/billing.ts). Coins are dormant while
   COINS_ENABLED is false (docs/ARCHITECTURE.md §11); Premium checkout still uses these styles.
   Piggy bank + arcade token look on top of retro.css tokens. Used by /coins, /premium, /premium/return, /settings,
   /admin/billing and the dev checkout. */

/* ── Arcade tokens (CSS art) ─────────────────────────────────────────────── */

.rr-token {
  --tk: 44px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tk);
  height: var(--tk);
  border: 3px solid var(--rr-navy);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fffbd0 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #ffe14d 0 54%, #ffbf1a 55% 64%, #e09a00 65%);
  box-shadow: 0 3px 0 rgba(20, 32, 107, 0.35), inset 0 -3px 0 rgba(160, 90, 0, 0.35);
}
.rr-token::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 2px dashed rgba(160, 90, 0, 0.55);
  border-radius: 50%;
}
.rr-token-face {
  position: relative;
  color: #9a5200;
  font: calc(var(--tk) * 0.32) / 1 var(--font-arcade);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.rr-token-sm { --tk: 20px; border-width: 2px; box-shadow: 0 1px 0 rgba(20, 32, 107, 0.35); vertical-align: -5px; }
.rr-token-sm::before { display: none; }
.rr-token-lg { --tk: 54px; }

/* The header coin chip (.coin-chip) is part of the shell: its rules live in workshop.css, which every page loads. */

/* ── /coins ─────────────────────────────────────────────────────────────── */

.coins { display: grid; gap: 18px; }
.coins > * { margin: 0; }

.coins-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 26px;
  padding: 22px 26px;
  overflow: hidden;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(rgba(255, 255, 255, 0.55) 1.4px, transparent 1.8px) 0 0 / 16px 16px,
    linear-gradient(160deg, #ffe7f3 0%, #fff6c9 55%, #fffbe8 100%);
  box-shadow: var(--shadow-chunky);
}
.coins-hero-art { display: grid; place-items: center; }
.piggy { display: block; width: 170px; height: auto; overflow: visible; }
.piggy-coin { animation: rr-coin-drop 2.6s cubic-bezier(0.5, 0, 0.75, 0) infinite; transform-origin: 86px 13px; }
@keyframes rr-coin-drop {
  0% { transform: translateY(-26px); opacity: 0; }
  18% { opacity: 1; }
  62% { transform: translateY(20px); opacity: 1; }
  70%, 100% { transform: translateY(26px); opacity: 0; }
}
.coins-title { margin: 0 0 6px; color: var(--rr-pink); font-size: 18px; text-shadow: 0 2px 0 #fff; }
.coins-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.coins-balance-num {
  color: var(--rr-navy);
  font: clamp(30px, 6vw, 44px) / 1 var(--font-arcade);
  letter-spacing: 0.02em;
  text-shadow: 0 3px 0 #ffd400, 0 5px 0 rgba(20, 32, 107, 0.18);
  font-variant-numeric: tabular-nums;
}
.coins-balance-unit { color: var(--rr-navy); font: 700 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.coins-balance-guest { font-size: 16px; font-weight: 700; }
.coins-lede { max-width: 62ch; }
.coins-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.coins-mode { margin: 0; }

/* Packs */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding-top: 10px; }
.packs { margin: 0; padding: 0; border: 0; }
.pack {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 18px 14px 14px;
  border: 3px solid var(--rr-navy);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%);
  box-shadow: 0 5px 0 rgba(20, 32, 107, 0.25);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background 0.15s;
}
.pack:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(20, 32, 107, 0.25); }
.pack:has(.pack-radio:checked) {
  background: linear-gradient(180deg, #fffbe0 0%, #fff0a8 100%);
  box-shadow: 0 0 0 4px #ffd400, 0 7px 0 rgba(20, 32, 107, 0.3);
}
.pack:has(.pack-radio:focus-visible) { outline: 3px solid var(--rr-navy); outline-offset: 4px; }
.pack:has(.pack-radio:disabled) { cursor: not-allowed; opacity: 0.7; transform: none; }
.pack-radio { position: absolute; top: 12px; left: 12px; margin: 0; }
.pack-art { display: flex; justify-content: center; align-items: flex-end; min-height: 66px; margin-bottom: 4px; }
.pack-art .rr-token + .rr-token { margin-left: -22px; }
.pack-art-2 .rr-token:last-child, .pack-art-3 .rr-token:nth-child(2) { transform: translateY(-8px); }
.pack-art-3 .rr-token:last-child { transform: translateY(-2px) rotate(8deg); }
.pack-name { color: var(--rr-navy); font: 700 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.pack-coins { font-size: 14px; }
.pack-coins strong { color: var(--rr-navy); font: 20px/1.2 var(--font-arcade); }
.pack-price {
  margin-top: 4px;
  padding: 4px 14px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: var(--rr-navy);
  color: #fff;
  font: 14px/1.2 var(--font-arcade);
}
.pack-runs { color: var(--rr-muted); font-size: 12px; }
.pack-bonus-text { color: #a14b00; font-weight: 700; }
.pack-burst {
  position: absolute;
  top: -18px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 2px 0 var(--rr-navy)) drop-shadow(0 -1px 0 var(--rr-navy)) drop-shadow(1px 0 0 var(--rr-navy)) drop-shadow(-1px 0 0 var(--rr-navy));
  transform: rotate(12deg);
  animation: rr-burst 1.8s ease-in-out infinite;
  pointer-events: none;
}
.pack-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 35%, #ff9ad0, #e0379b 60%, #b42c7d);
  clip-path: polygon(100% 50%, 87.6% 59.8%, 93.3% 75%, 77.8% 77.8%, 75% 93.3%, 59.8% 87.6%, 50% 100%, 40.2% 87.6%, 25% 93.3%, 22.2% 77.8%, 6.7% 75%, 12.4% 59.8%, 0% 50%, 12.4% 40.2%, 6.7% 25%, 22.2% 22.2%, 25% 6.7%, 40.2% 12.4%, 50% 0%, 59.8% 12.4%, 75% 6.7%, 77.8% 22.2%, 93.3% 25%, 87.6% 40.2%);
}
.pack-burst > span { position: relative; color: #fff; font: 9px/1.25 var(--font-arcade); text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }

.coins-buy { display: grid; gap: 14px; margin: 0; }
.coins-buy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 12px; border-top: 2px dashed var(--rr-line); }
.coins-buy-foot .check-row { flex: 1 1 260px; margin: 0; }
.coins-buy-btn { flex: none; }
.coins-fine { margin: 0; }

/* Premium promo strip */
.coins-premium {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 18px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #3b1d8f 0%, #7433dc 60%, #b42c7d 100%);
  color: #fff;
  box-shadow: var(--shadow-chunky);
}
.coins-premium p { margin: 0; color: #efe6ff; }
.coins-premium-title { margin: 0 0 4px; color: #fff; font: 700 14px/1.3 var(--font-pixel); text-transform: uppercase; }
.coins-premium-star { color: #ffd400; font-size: 34px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.coins-premium-star-big { display: block; font-size: 64px; }

/* What a run costs */
.price-table .price-model { display: block; color: var(--rr-navy); font-weight: 700; }
.price-table .price-blurb { display: block; color: var(--rr-muted); font-size: 12px; font-weight: 400; }
.price-table .price-coins { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.price-table .price-list { color: var(--rr-muted); font-size: 12.5px; }
.price-table .price-long { display: block; font-size: 11.5px; }
.coins-howto { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.coins-howto li { display: flex; gap: 8px; }

/* History */
.coin-history .coin-delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-row-in .coin-delta { color: var(--rr-ok); }
.coin-row-out .coin-delta { color: var(--rr-danger); }
.coin-row-pending td { color: var(--rr-muted); font-style: italic; }
.coin-row-icon { display: inline-block; width: 1.4em; text-align: center; }

/* Return page */
.coins-return { justify-items: center; }
.coins-done {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 560px;
  width: 100%;
  padding: 28px 22px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffbe8, #ffe7f3);
  box-shadow: var(--shadow-chunky);
  text-align: center;
}
.coins-done p { margin: 0; }
.coins-done .coins-hero-actions { justify-content: center; }
.coins-done-big { color: var(--rr-ok); font: clamp(26px, 6vw, 38px) / 1.1 var(--font-arcade); text-shadow: 0 3px 0 #fff; }
.coins-done-premium { background: linear-gradient(180deg, #f3ecff, #ffe7f3); }

/* Dev checkout */
.dev-checkout { justify-items: center; }
.dev-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  padding: 24px 22px 20px;
  border: 3px dashed var(--rr-navy);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, #fffbe8 0 14px, #fff4c2 14px 28px);
  box-shadow: var(--shadow-chunky);
}
.dev-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  padding: 4px 8px;
  border: 3px solid var(--rr-red);
  border-radius: 6px;
  color: var(--rr-red);
  font-size: 11px;
  transform: rotate(8deg);
}
.dev-title { margin: 0 0 8px; font-size: 16px; }
.dev-lines { display: grid; gap: 6px; margin: 14px 0; }
.dev-lines > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px dotted var(--rr-line); }
.dev-lines dt { color: var(--rr-muted); font-weight: 700; }
.dev-lines dd { margin: 0; text-align: right; }
.dev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ── Settings: plan line ───────────────────────────────────────────────── */

.plan-coins { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* ── /premium buy box ───────────────────────────────────────────────────── */

.premium-buy {
  display: grid;
  /* One column that never grows past the box: long buttons and notes wrap instead of spilling out on phones. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
  margin: 12px 0 0;
  padding: 16px 18px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #f3ecff 0%, #fff6c9 100%);
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.2);
}
.premium-buy p { margin: 0; }
.premium-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.premium-price-big { color: var(--rr-purple); font-size: 30px; text-shadow: 0 3px 0 #fff; }
.premium-price-per { color: var(--rr-navy); font-weight: 700; }
.premium-price-coins {
  padding: 3px 10px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #ffd400;
  color: var(--rr-navy);
  font-size: 12px;
  font-weight: 700;
}
.premium-buy-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; margin: 0; }
.premium-buy-form .btn, .premium-cancel-form .btn { max-width: 100%; white-space: normal; text-align: center; }
.premium-status { margin: 12px 0 0; font-size: 14px; }
.premium-buy-on, .premium-buy-ending { background: linear-gradient(160deg, #e6f8ea 0%, #fffbe8 100%); }
.premium-cancel > summary { list-style: none; }
.premium-cancel > summary::-webkit-details-marker { display: none; }
.premium-cancel-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; margin: 10px 0 0; padding: 12px; border: 2px dashed var(--rr-line); border-radius: 12px; background: #fff; }

/* ── /admin/billing ─────────────────────────────────────────────────────── */

.bill-admin { display: grid; gap: 18px; }
.bill-admin > * { margin: 0; }
.bill-setup { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; }
.bill-flag { font-weight: 700; }
.bill-flag-on { color: var(--rr-ok); }
.bill-flag-off { color: #8a5a00; }
.bill-status { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e8eefc; font-size: 12px; font-weight: 700; }
.bill-status-paid { background: #d9f5e1; color: #0f5a2b; }
.bill-status-failed, .bill-status-expired { background: #fdeceb; color: #96221a; }
.bill-status-refunded { background: #fff1c9; color: #6b4600; }
.bill-ref { font-size: 11px; }
.bill-grant-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bill-sub { margin: 18px 0 8px; }

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .coins-hero { grid-template-columns: minmax(0, 1fr); padding: 16px; text-align: center; }
  .coins-hero-actions { justify-content: center; }
  .coins-balance { justify-content: center; }
  .piggy { width: 130px; }
  .coins-premium { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .coins-buy-btn { width: 100%; }
  .pack-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .piggy-coin, .pack-burst { animation: none; }
  .pack { transition: none; }
  .pack:hover { transform: none; }
}