/* Vespene support — donate icon, header balance pill, and Support modal.
   Uses the shared design tokens (styles/tokens.css) with safe fallbacks. */

/* Donate button: a heart-tinted variant of the header icon button. The base
   .btn-report-bug class supplies size/hover; we just position the pill + tint. */
.vespene-donate-btn {
  position: relative;
}
/* Reassert the [hidden] attribute over the class-level `display` rules. The
   donate button inherits `.btn-report-bug{display:inline-flex}` and the pill
   sets `display:inline-flex` below — both author-origin, so they beat the UA
   `[hidden]{display:none}` and would otherwise defeat the JS visibility gate
   (btn.hidden = true) that hides the donate UI from ineligible viewers. */
.vespene-donate-btn[hidden],
.vespene-balance-badge[hidden] { display: none !important; }
.vespene-donate-btn svg {
  color: var(--vsp-accent, #25aa64);
}
.vespene-donate-btn:hover svg {
  color: var(--vsp-accent-hover, #34c178);
}

/* Balance pill overlaid on the donate icon's lower-right corner. */
.vespene-balance-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  min-width: 16px;
  padding: 0 5px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  background: var(--vsp-accent, #25aa64);
  color: var(--vsp-accent-ink, #042010);
  box-shadow: 0 0 0 2px var(--color-bg, #0b1220);
  pointer-events: none;
}

/* ── Support modal ─────────────────────────────────────────────────────── */
.vsp-loading,
.vsp-error {
  padding: 24px 4px;
  text-align: center;
  color: var(--color-text-muted, #93a1b5);
}
.vsp-error { color: var(--color-danger, #ff6b6b); }

/* Vespene-green accent — a NAMESPACED brand token (--vsp-*) used by the header
   donate icon/balance pill AND the support modal. The global blue --color-accent
   is deliberately left untouched, so nothing else on the site changes color.
   Vespene gas is green, so the currency's surface reads green. Deep emerald
   (dialed back from the louder neon green). */
:root {
  --vsp-accent: #25aa64;
  --vsp-accent-hover: #34c178;
  --vsp-accent-ink: #042010;
  --vsp-accent-soft: rgba(37, 170, 100, 0.11);
  --vsp-accent-line: rgba(37, 170, 100, 0.42);
  --vsp-accent-glow: rgba(37, 170, 100, 0.34);
}
/* Light theme: a deeper green so the icon/pill keep ≥3:1 on light surfaces,
   with white ink on the pill. (Light mode is opt-in + still a starting palette.) */
[data-theme="light"] {
  --vsp-accent: #157f47;
  --vsp-accent-hover: #11703d;
  --vsp-accent-ink: #ffffff;
  --vsp-accent-soft: rgba(21, 127, 71, 0.10);
  --vsp-accent-line: rgba(21, 127, 71, 0.38);
  --vsp-accent-glow: rgba(21, 127, 71, 0.26);
}

.vsp-intro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted, #aab3c2);
  margin: 0 0 16px;
}
.vsp-intro strong { color: var(--color-text, #e6e9ef); font-weight: 600; }

/* Balance: a calm recessed stat. The modal panel is the elevated tone, so this
   insets DARKER (--color-bg) rather than adding another bordered box that
   competes with the tiles below. */
.vsp-balance {
  padding: 12px 14px;
  margin: 0 0 20px;
  border-radius: 10px;
  background: var(--color-bg, #0a0d14);
}
.vsp-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* "Earn it free" sub-line under the stat — separated by a hairline, with the
   +1 in vespene-green to tie earning to the currency. */
.vsp-balance-earn {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-earn-plus { font-weight: 800; color: var(--vsp-accent, #25aa64); }

/* Info pill on the earn line — hover/focus reveals the earning terms, so the
   disclaimer lives in a tooltip instead of a permanent line of fine print.
   It's a <button> so it's keyboard-focusable AND tappable on touch (no hover):
   :focus shows the same tip. */
.vsp-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 5px;
  padding: 0;
  border: none;
  background: none;
  cursor: help;
}
.vsp-info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font: 800 10px/1 inherit;
  font-style: normal;
  color: var(--vsp-accent, #25aa64);
  background: var(--vsp-accent-soft, rgba(37, 170, 100, 0.13));
  border: 1px solid var(--vsp-accent-line, rgba(37, 170, 100, 0.42));
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vsp-info:hover .vsp-info-dot,
.vsp-info:focus .vsp-info-dot {
  background: var(--vsp-accent, #25aa64);
  color: var(--vsp-accent-ink, #042010);
  border-color: var(--vsp-accent, #25aa64);
}
/* Anchored to the pill's right edge so it extends LEFT + DOWN and never clips
   against the modal body's overflow (the pill sits at the end of the line). */
.vsp-info-tip {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 244px;
  max-width: 70vw;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--color-bg, #0a0d14);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, 0.16));
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.7);
  color: var(--color-text-muted, #aab3c2);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 6;
  pointer-events: none;
}
.vsp-info:hover .vsp-info-tip,
.vsp-info:focus .vsp-info-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vsp-balance-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-balance-val { font-size: 16px; color: var(--color-text, #e6e9ef); }
.vsp-balance-val strong { font-size: 20px; font-weight: 700; color: var(--vsp-accent, #2fd06b); }
.vsp-balance-usd { color: var(--color-text-muted, #aab3c2); font-size: 13px; margin-left: 8px; }

/* Featured supporter block: a soft accent tint + ONE thin accent hairline.
   No glow / box-shadow — the loud glowing cyan border was the cheap-looking
   part. The panel surface shows through everywhere else (no nested cards). */
.vsp-tier { margin: 0 0 18px; }
.vsp-tier--feature {
  padding: 16px;
  border-radius: 12px;
  background: var(--vsp-accent-soft, rgba(47, 208, 107, 0.13));
  border: 1px solid var(--vsp-accent-line, rgba(47, 208, 107, 0.48));
}
.vsp-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.vsp-tier-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #e6e9ef);
}
.vsp-pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vsp-accent, #2fd06b);
  color: var(--vsp-accent-ink, #052311);
}
.vsp-tier-lead {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-tier-lead strong { color: var(--color-text, #e6e9ef); font-weight: 600; }

.vsp-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.vsp-code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-bg, #0b1220);
  border: 1px dashed var(--color-border-strong, rgba(255, 255, 255, 0.22));
  color: var(--color-accent, #4ea1ff);
  user-select: all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsp-copy-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.14));
  background: var(--color-bg-raised, rgba(255, 255, 255, 0.06));
  color: var(--color-text, #e6edf5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vsp-copy-btn:hover { border-color: var(--color-accent, #4ea1ff); }
.vsp-copy-btn.is-copied {
  background: var(--color-success-soft, rgba(60, 200, 120, 0.18));
  color: var(--color-success, #3cc878);
  border-color: var(--color-success, #3cc878);
}

.vsp-tip-btn {
  display: inline-block;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--vsp-accent, var(--color-accent, #56c2ff));
  color: var(--vsp-accent-ink, var(--color-text-on-accent, #0a0d14));
  cursor: pointer;
  border: none;
}
.vsp-tip-btn:hover { background: var(--vsp-accent-hover, var(--color-accent-hover, #6cb3ff)); }
.vsp-tip-btn--alt {
  background: var(--color-bg-raised, rgba(255, 255, 255, 0.08));
  color: var(--color-text, #e6edf5);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.16));
}
.vsp-tip-btn--sm { padding: 8px 14px; font-size: 13px; }
/* Primary CTA: a subtle vespene-green gradient + a green glow on hover only
   (energy without the always-on RGB look). */
.vsp-tip-btn--block {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 14px;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--vsp-accent-hover, #49e389), var(--vsp-accent, #2fd06b));
  transition: box-shadow 0.16s ease, transform 0.05s ease;
}
.vsp-tip-btn--block:hover {
  background: linear-gradient(180deg, var(--vsp-accent-hover, #49e389), var(--vsp-accent, #2fd06b));
  box-shadow: 0 0 0 1px var(--vsp-accent-line, rgba(47, 208, 107, 0.48)),
              0 8px 22px -8px var(--vsp-accent-glow, rgba(47, 208, 107, 0.40));
}
.vsp-tip-btn--block:active { transform: translateY(1px); }
.vsp-tip-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.vsp-tip-btn[disabled]:hover { background: var(--vsp-accent, var(--color-accent, #56c2ff)); }

/* Custom-amount row: a "[$ <input> USD] → readout" line, wraps on narrow
   widths. The $ and USD live INSIDE the bordered field with the borderless
   input so the currency prefix can never wrap above the box. */
.vsp-custom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
}
.vsp-amt-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 124px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, 0.16));
  background: var(--color-bg, #0a0d14);
}
.vsp-amt-field:focus-within { border-color: var(--vsp-accent, #2fd06b); }
.vsp-amt-field .vsp-cur {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-amt-field .vsp-unit {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-amt {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 9px 0;
  color: var(--color-text, #e6e9ef);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}
.vsp-amt:focus { outline: none; }
/* Hide the number spinners so the $…USD field stays tidy (typing + presets
   are the input methods). */
.vsp-amt::-webkit-outer-spin-button,
.vsp-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vsp-amt { -moz-appearance: textfield; appearance: textfield; }
.vsp-amt-out {
  font-size: 12.5px;
  color: var(--color-text-muted, #aab3c2);
}
.vsp-amt-out strong { color: var(--color-text, #e6e9ef); font-weight: 700; }
.vsp-custom--buy { margin-top: 4px; }
.vsp-custom--buy .vsp-tip-btn { margin-left: auto; }
.vsp-tip-disabled { color: var(--color-text-muted, #aab3c2); font-size: 13px; }

/* Section divider with a centered label between the Supporter block and the
   buy grid — replaces the old second bordered card so boxes don't nest. */
.vsp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle, #6e7687);
}
.vsp-divider::before,
.vsp-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border, rgba(255, 255, 255, 0.08));
}
.vsp-buy-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted, #aab3c2);
}

.vsp-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11.5px;
  /* --color-text-muted (#aab3c2) ≈ 8:1 — clears AA where the old subtle gray
     (~4:1) failed at this small size. */
  color: var(--color-text-muted, #aab3c2);
}

/* ── Buy preset tiles ─────────────────────────────────────────────────── */
.vsp-buy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.vsp-pack-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  background: var(--color-bg, #0a0d14);
  color: var(--color-text, #e6e9ef);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.vsp-pack-btn:hover {
  border-color: var(--vsp-accent, #2fd06b);
  background: var(--vsp-accent-soft, rgba(47, 208, 107, 0.13));
}
.vsp-pack-usd { font-size: 18px; font-weight: 800; line-height: 1.1; }
.vsp-pack-vesp { font-size: 11.5px; color: var(--color-text-muted, #aab3c2); }

/* Tiles collapse to 2-up on phones (fullscreen modal). */
@media (max-width: 520px) {
  .vsp-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vsp-mini {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #93a1b5);
  margin: 12px 0 6px;
}

.vsp-alt { margin-top: 14px; }
.vsp-alt > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted, #93a1b5);
  padding: 6px 0;
}
.vsp-alt-body { padding-top: 8px; }

.vsp-back {
  background: none;
  border: none;
  color: var(--color-text-muted, #93a1b5);
  font-size: 13px;
  cursor: pointer;
  padding: 0 0 10px;
}
.vsp-back:hover { color: var(--color-text, #e6edf5); }
.vsp-checkout-status {
  font-size: 13px;
  color: var(--color-text-muted, #93a1b5);
  min-height: 18px;
}
#vsp-checkout { min-height: 60px; }

.vsp-success { text-align: center; padding: 18px 4px 8px; }
.vsp-success-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: var(--color-success, #3cc878);
  background: var(--color-success-soft, rgba(60, 200, 120, 0.16));
}
.vsp-success h3 { margin: 0 0 6px; }
.vsp-success p { margin: 0 0 16px; color: var(--color-text-muted, #93a1b5); }