/* /wallet/ — balance hero + shared wallet panel. Mobile first, borderless:
   surfaces separate by tone (--surface-1/2) and soft shadow only. */

.wlt-page { position: relative; isolation: isolate; min-height: 70vh; }
.wlt-glow { position: absolute; inset: 0 0 auto; height: 460px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 20% 0%, rgba(139, 92, 246, .14), transparent 70%), radial-gradient(40% 60% at 90% 10%, rgba(109, 40, 217, .1), transparent 70%); }
.wlt-wrap { display: flex; flex-direction: column; gap: 18px; }
.wlt-head { animation: slide-fade-in 420ms var(--ease-out) both; }
/* the title alone (no subtitle: owner, Oct 17 — less text) */

/* ---------------------------------------------------------------- hero */
.wlt-hero { display: flex; flex-direction: column; gap: 10px; animation: slide-fade-in 460ms var(--ease-out) 60ms both; }
.wlt-hero-skel { display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: var(--surface-1); }
.wlt-hero-skel .skel { display: block; height: 18px; width: 120px; }
.wlt-hero-skel .skel + .skel { height: 44px; width: 220px; }

.wlt-bal-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(109, 40, 217, .05) 55%, transparent), var(--surface-1); box-shadow: var(--shadow-card); }
.wlt-bal-card::after { content: ''; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .22), transparent); }
.wlt-bal-main { display: flex; flex-direction: column; min-width: 0; }
.wlt-bal-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.wlt-bal { margin: 4px 0 2px; font-size: clamp(36px, 9vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.wlt-bal-sub { font-size: 13.5px; color: var(--muted); text-wrap: balance; } /* a 320px phone: two even lines */
/* ONE fixed-height line under the balance: the quiet hint, or the pending-activity button once /api/wallet answers
   (pages/wallet.js) — the card never grows when it fills in (rule 17) */
.wlt-bal-line { display: flex; align-items: center; min-width: 0; min-height: 32px; margin-top: 6px; }
.wlt-bal-sub[hidden], .wlt-pending[hidden] { display: none; }
.wlt-held { font-weight: 600; color: var(--accent-hover); white-space: nowrap; } /* the part of the money held in leading bids */
/* a 40px tall link (rule 11) inside the one-line hint: the padding is the hit area, the negative margin keeps the line */
.wlt-held { display: inline-block; padding: 10px 0; margin: -10px 0; }
.wlt-held:hover { text-decoration: underline; text-underline-offset: 3px; }
.wlt-pending { display: flex; min-width: 0; max-width: 100%; }
/* a calm left-aligned chip with short copy that always fits one line (never a wrapping 999px blob) */
.wlt-pending-btn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 32px; padding: 0 10px 0 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #f8c46d; background: rgba(248, 183, 77, .12); transition: background-color 150ms var(--ease-smooth), transform 200ms var(--ease-out-quart); }
.wlt-pending-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wlt-pending-btn > svg { flex: none; }
.wlt-pending-btn > svg:last-child { margin-left: -2px; opacity: .7; }
.wlt-pending-btn:hover { background: rgba(248, 183, 77, .2); transform: translateY(-1px); }
.wlt-bal-side:empty { display: none; }

/* swap credit (BloxyShop value units with the value icon — never $): the same calm full-width rows at every width */
.wlt-credit { padding: 14px; border-radius: 16px; background: rgba(6, 8, 13, .35); animation: slide-fade-in 380ms var(--ease-out) both; }
.wlt-credit-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wlt-credit-t { font-size: 13px; font-weight: 700; }
.wlt-credit-n { font-size: 12px; color: var(--muted); text-wrap: balance; } /* two even lines when it wraps (no lone "withdrawn.") */
.wlt-credit-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wlt-credit-chip { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(139, 92, 246, .1); transition: background-color 150ms var(--ease-smooth), transform 200ms var(--ease-out-quart); }
.wlt-credit-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlt-credit-chip:hover { background: rgba(139, 92, 246, .18); transform: translateY(-1px); }
.wlt-credit-chip img { flex: none; opacity: .8; }
.wlt-credit-chip b { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

/* account on hold: a clear notice under the card (Add funds Continue and Request withdrawal are off, with the reason) */
.wlt-hold { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(219, 59, 62, .1); }
.wlt-hold-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #ff8587; background: rgba(219, 59, 62, .16); }
.wlt-hold-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wlt-hold-text b { font-size: 14px; color: #ffb3b4; }
.wlt-hold-text span { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.wlt-hold-btn { flex: none; min-height: 40px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); }
.wlt-hold-btn:hover { background: rgba(255, 255, 255, .13); }

/* signed out */
.wlt-signin { display: flex; flex-direction: column; gap: 18px; padding: 24px 18px 20px; border-radius: 22px; background: var(--surface-1); box-shadow: var(--shadow-card); }
.wlt-signin-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
/* the mascot's box is sized before the image arrives (present.webp is 475x512): nothing below moves when it loads */
.wlt-signin-mascot { flex: none; width: 128px; height: auto; aspect-ratio: 475 / 512; filter: drop-shadow(0 12px 28px rgba(139, 92, 246, .3)); }
.wlt-signin-copy h2 { font-size: 20px; margin: 4px 0 16px; }
.wlt-signin-copy p { margin: 0 auto 16px; max-width: 420px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.wlt-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wlt-feats li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.wlt-feats b { display: block; font-size: 14px; margin-bottom: 2px; }
.wlt-feats span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wlt-feat-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid !important; place-items: center; color: var(--accent-hover); background: rgba(139, 92, 246, .14); }
.wlt-coins { display: flex !important; gap: 6px; margin: 4px 0 4px; }
.wlt-coins img { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- panel */
.wlt-panel { animation: slide-fade-in 480ms var(--ease-out) 120ms both; scroll-margin-top: calc(var(--header-h) + 12px); }
.wlt-panel .wallet-nav { background: var(--surface-1); }
/* Add funds → Items (the trade-bot window inline, ui/itemdeposit.js): a message that keeps the bot card's height (360px
   at most here, holdHeight) sits in the middle of it, not on top of an empty band; the sheet keeps it under the game
   row (shell.css .bd-soon) */
.dp-card .bd-soon { justify-content: center; padding-bottom: 28px; }

@media (min-width: 760px) {
  .wlt-bal-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }
  /* a fixed side width: the credit rows never re-wrap when the line beside them changes */
  .wlt-bal-side { flex: 0 0 min(400px, 48%); min-width: 0; }
}
@media (min-width: 980px) {
  .wlt-signin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 28px 32px; }
  .wlt-signin-main { flex-direction: row; text-align: left; gap: 24px; }
  .wlt-signin-copy p { margin-left: 0; }
}
/* below the 320px floor (a folded Galaxy Fold, 280px): a five-figure balance still fits its card */
@media (max-width: 319px) { .wlt-bal { font-size: 32px; } }
/* phones, tablets and any touch screen: the pending chip is a tap target (the line keeps its height either way) */
@media (max-width: 899px), (pointer: coarse) {
  .wlt-bal-line { min-height: 40px; }
  .wlt-pending-btn { min-height: 40px; }
}
@media (max-width: 520px) {
  .wlt-hold { flex-wrap: wrap; align-items: flex-start; }
  .wlt-hold-text { flex-basis: calc(100% - 48px); }
  .wlt-hold-btn { flex: 1 1 100%; }
}

/* Transactions: what an ≈ amount in the deposit list means (ui/wallet.js estimateNote) */
.w-rec-est { margin-top: 8px; }