/* StonkFuse — additions on top of assets/stonkfun.css (the stonkfun.xyz sheet, captured).
   Only what the functional site needs and the design's sheet does not carry.
   bags' values, recoloured with the site's own tokens (surface, ink, line, accent) on the owner's word,

html { color-scheme: dark; }

/* The wallet modal is the adapter library's own markup; keep only the scrim, on the design's ground. */
.wallet-adapter-modal { background: transparent; }
.wallet-adapter-modal .wallet-adapter-modal-overlay { background: rgb(7 16 19 / 0.7); }

/* Coin cards: the CA button's copied state (site.js swaps the icon and adds this class). */
.text-head { color: var(--color-up); }

/* ---- shell ---- */
/* The phone drawer is open (ShellMenus.tsx sets this): keep the page under it from scrolling. */
html[data-nav="open"] { overflow: hidden; }


/* ---- pages: docs / terms / desk ---- */
/* Docs contents rail: site.js marks the section in view with aria-current (its own class swaps name classes the
   stonkfun sheet does not carry, and it prepends a bar span); the highlight is their rail's current state. */
nav[aria-label=Contents] a[aria-current] { border-color: var(--color-accent); color: var(--color-ink); }
nav[aria-label=Contents] a > span { display: none; }
/* Desk: a field that wraps an input with something beside it (a prefix, a toggle) takes app-input on the wrapper;
   the input inside is bare and the wrapper shows focus in the input's place. */
.app-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #69aac11f; }
.app-input > input { min-width: 0; flex: 1; background: transparent; border: 0; outline: none; color: inherit; font: inherit; }
.app-input > input::placeholder { color: #5f6c7b; }

/* ---- pages: coin / rewards / revenue / dividends ---- */
/* Two utilities the coin page's countdown line (NextRound, shared markup) uses that the stonkfun sheet does not carry. */
.tnum { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--color-ink-dim); }


/* ---- pages: home / explore / launch ---- */
/* The launch stepper shows one step at a time; every step stays in the DOM so its fields keep their state. */
.step[data-active="false"] { display: none; }


/* ---- hero: bags earnings panel ---- */
/* bags.fm's "Creator Earnings" header (design/reference capture home-d.html in pokechart), value for value:
   its dark-theme tokens (surface var(--color-surface), foreground #fff, border var(--color-line), green var(--color-accent), dark green var(--color-surface-3)),
   its utilities the stonkfun sheet does not carry, and its button glow. Prefixed bh- so nothing collides. */
.bh-panel { position: relative; isolation: isolate; width: 100%; min-width: 0; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--color-line); background-color: var(--color-surface); color: var(--color-ink); padding: 24px; }
.bh-glow-wrap { pointer-events: none; position: absolute; inset: 0; z-index: -10; }
.bh-glow { position: absolute; top: 50%; right: 8%; width: 420px; height: 420px; transform: translateY(-50%); border-radius: 9999px; background-color: rgb(105 170 193 / 0.18); filter: blur(120px); }
.bh-card-slot { display: none; position: absolute; top: 32px; right: 32px; width: 300px; }
.bh-card { position: relative; overflow: hidden; cursor: pointer; border-radius: 1rem; border: 1px solid var(--color-line); background-color: rgb(24 38 42 / 0.95); box-shadow: 0 0 0 1px rgb(164 197 207 / 0.06), 0 8px 32px rgb(0 0 0 / 0.18); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.bh-card-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.bh-avatar { display: grid; place-items: center; overflow: hidden; width: 38px; height: 38px; min-width: 38px; border-radius: 9999px; background-color: var(--color-surface-2); color: var(--color-ink-mid); font-size: 13px; font-weight: 600; }
.bh-avatar > img { width: 38px; height: 38px; }
.bh-badge { position: absolute; right: -4px; bottom: -4px; display: block; overflow: hidden; border-radius: 9999px; border: 2px solid var(--color-line); background-color: var(--color-surface); }
.bh-badge > img { display: block; width: 18px; height: 18px; border-radius: 30%; }
.bh-card-name { color: var(--color-ink); font-size: 13px; font-weight: 600; }
.bh-card-sub { color: var(--color-ink-dim); font-size: 12px; font-weight: 500; min-width: 0; }
.bh-card-line { color: var(--color-ink-dim); margin-top: 2px; display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 12px; white-space: nowrap; }
.bh-card-strong { color: var(--color-ink-mid); font-weight: 600; min-width: 0; }
.bh-card-foot { color: var(--color-ink-dim); margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1; }
.bh-card-group { display: inline-flex; flex-shrink: 0; align-items: center; border-radius: 9999px; border: 1px solid var(--color-line); padding: 2px 5px; font-size: 9px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--color-ink-mid); }
.bh-label { color: var(--color-ink-mid); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.bh-label-icon { width: 16px; height: 16px; flex-shrink: 0; }
.bh-aside { display: none; color: var(--color-ink-faint); font-size: 12px; font-weight: 600; }
.bh-sub { color: var(--color-ink-dim); margin-top: 12px; font-size: 13px; font-weight: 600; }
.bh-figure { color: var(--color-ink); margin: 12px 0 0; font-size: 44px; line-height: 0.95; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bh-num { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh-digit { display: inline-block; overflow: hidden; vertical-align: bottom; }
.bh-tail { color: var(--color-ink-faint); }
.bh-foot { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.bh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; }
.bh-stat-k { color: var(--color-ink-dim); font-size: 12px; font-weight: 600; }
.bh-stat-v { color: var(--color-ink); margin-top: 6px; font-size: 17px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) {
  .bh-panel { padding: 32px; }
  .bh-card-row { padding: 14px; }
  .bh-avatar, .bh-avatar > img { width: 42px; height: 42px; min-width: 42px; }
  .bh-badge > img { width: 20px; height: 20px; }
  .bh-aside { display: block; }
  .bh-figure { font-size: 64px; }
  .bh-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .bh-stats { display: flex; gap: 48px; }
}
@media (min-width: 64rem) {
  .bh-card-slot { display: block; }
  .bh-figure { font-size: 76px; }
}


/* ---- hero: lottery payout card ---- */
/* The top-right card (LotteryPayoutCard.tsx): stonkfun's featured card carrying the lottery wins. The cards share one
   grid cell so the slot is as tall as a card; bags' creator stack rests its second card at translateY(14px) scale(0.96)
   (home-d.html in pokechart), and the cycle uses those offsets: the front card slides up and fades out, the next slides
   up from underneath. Prefixed lw- so nothing collides. */
.lw-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.lw-stack > .lw-card { grid-area: 1 / 1; transform-origin: center top; }
.lw-card[data-state="in"] { z-index: 3; opacity: 1; transform: none; transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms cubic-bezier(0.32, 0.72, 0, 1); }
.lw-card[data-state="out"] { z-index: 2; opacity: 0; transform: translateY(-14px) scale(0.96); pointer-events: none; transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms cubic-bezier(0.32, 0.72, 0, 1); }
.lw-card[data-state="idle"] { z-index: 1; opacity: 0; transform: translateY(14px) scale(0.96); visibility: hidden; pointer-events: none; transition: none; }
.lw-mark { position: absolute; inset: 0; display: block; height: 100%; width: 100%; object-fit: cover; }
.lw-badge-letter { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 30%; font-size: 9px; font-weight: 600; color: var(--color-ink); }
@media (min-width: 40rem) {
  .lw-badge-letter { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lw-card[data-state="in"], .lw-card[data-state="out"] { transition: none; }
}

/* ---- coin card: disc pile ---- */
/* One big faded disc per basket stock at the card's bottom-right, piled rightwards: the first stock furthest left and on top. Sizes are stonkfun's single disc (128 / 176 px) and a smaller one once there are several. */
/* The pile is as tall as one disc and centred on the card's height (the owner's placement). */
.cc-pile { position: absolute; right: -12px; top: 50%; translate: 0 -50%; height: 140px; }
.cc-pile[data-many] { height: 104px; }
.cc-disc { position: absolute; right: 0; top: 0; width: 140px; height: 140px; padding: 12px; }
.cc-pile[data-many] .cc-disc { width: 104px; height: 104px; padding: 8px; }
@media (min-width: 40rem) {
  .cc-pile { right: -16px; height: 192px; }
  .cc-pile[data-many] { height: 132px; }
  .cc-disc { width: 192px; height: 192px; padding: 16px; }
  .cc-pile[data-many] .cc-disc { width: 132px; height: 132px; padding: 10px; }
}

/* Paired-with row on a coin card: one line, as stonkfun's is; when the chips overflow, site.js marks the row and the tail fades under an ellipsis. */
.pays { position: relative; }
.pays[data-overflow]::after { content: "…"; position: absolute; right: 0; top: 0; bottom: 0; padding-left: 14px; font-weight: 700; color: var(--color-ink); background: linear-gradient(90deg, transparent, var(--color-surface) 45%); }
.group:hover .pays[data-overflow]::after { background: linear-gradient(90deg, transparent, var(--color-surface-2) 45%); }

/* ---- hero: stonkfun's left side ---- */
/* The four small stats sit between the paragraph and the button; the CA button keeps the panel's bottom-right corner. */
.bh-stats-inline { margin-top: 20px; }

/* ---- hero: the right side in the bloom ---- */
/* A column centred on the glow (right 8%, mid-height): the small shaded S with the X header's drop shadow, the pot large with its cents dimmed, the countdown, then the last payouts flipping through. Below lg it follows the copy, left-aligned, without the bloom's placement. */
.bh-right { position: relative; z-index: 10; margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; max-width: 320px; }
.bh-s { display: block; width: 56px; height: auto; margin-bottom: 6px; filter: drop-shadow(0 12px 12px rgb(0 0 0 / 0.6)); pointer-events: none; }
.bh-pot-k { color: var(--color-ink-dim); font-size: 12px; font-weight: 600; }
.bh-pot-v { color: var(--color-ink); margin-top: 2px; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bh-pot-timer { color: var(--color-ink-mid); margin-top: 8px; font-size: 13px; font-weight: 600; }
.bh-wins { width: 100%; margin-top: 12px; }
.bh-wins-empty { color: var(--color-ink-faint); font-size: 12px; font-weight: 500; line-height: 1.5; }
@media (min-width: 64rem) {
  .bh-right { position: absolute; top: 50%; right: 96px; margin-top: 0; transform: translateY(-50%); align-items: center; text-align: center; width: 340px; }
  /* The glow sits behind that column: its centre 266px in from the right edge, the column's own centre. The panel keeps its height; the column is sized to fit inside it, card and all. */
  .bh-glow { right: 56px; }
  .bh-s { width: 52px; }
  .bh-pot-k { font-size: 13px; }
  .bh-pot-timer { font-size: 14px; }
  .bh-wins-empty { font-size: 13px; }
  .bh-pot-v { font-size: 48px; }
}

/* ---- coin page: recent payouts, a row opens into its transactions ---- */
.pr-row > summary { list-style: none; }
.pr-row > summary::-webkit-details-marker { display: none; }
.pr-row .pr-caret .iconify { transition: transform 150ms; }
.pr-row[open] .pr-caret .iconify { transform: rotate(180deg); }