/* Shity Casino — wallet swap + per-coin withdraw (fix-76, STAGING BUILD — not deployed).
   Uses the live casino design tokens from assets/css/casino.css
   (--card, --card2, --card-border, --gold, --text, --muted, --radius)
   and mirrors the picker's look: full-width fields, gold primary
   button, quote details in a .quote-box-style card.
   Load AFTER assets/css/casino.css. Phone-first: 390px is the
   judging surface; every control is a >=44px tap target. */

.wsx { margin-top: 12px; }
.wsx-field { margin-top: 12px; }
.wsx-field:first-child { margin-top: 0; }
.wsx-label { display: block; font-size: 13px; font-weight: 700; color: var(--muted, #9a9aa5); }
.wsx-select, .wsx-input {
  width: 100%; min-height: 48px; margin-top: 6px; padding: 12px;
  border-radius: 8px; background-color: var(--card2, #1c1c28); color: var(--text, #f2f2f2);
  border: 1px solid var(--card-border, #26262f); font-size: 16px;
}
/* Native select rendering paints its own white face in WebKit and
   would leave the light option text unreadable; taking over the
   appearance keeps the dark card face and a visible chevron. */
.wsx-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5b324' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.wsx-select option[disabled] { color: var(--muted2, #6f6f7c); }
.wsx-balance { margin-top: 6px; font-size: 13px; color: var(--muted, #9a9aa5); font-variant-numeric: tabular-nums; }
.wsx-balance b { color: var(--text, #f2f2f2); }
.wsx-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wsx-actions .btn { flex: 1; }
.wsx-line { margin-top: 10px; font-size: 14px; font-weight: 700; }
.wsx-quote {
  background: var(--card2, #1c1c28); border: 1px solid var(--card-border, #26262f);
  border-radius: var(--radius-sm, 10px); padding: 12px; margin-top: 12px;
}
.wsx-quote-line { padding: 3px 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wsx-countdown { margin-top: 8px; font-size: 13px; color: var(--muted, #9a9aa5); }
/* Per-coin Withdraw buttons injected into the built-in wallet rows. */
.wsx-withdraw-btn { min-height: 44px; margin-left: 8px; padding: 6px 14px; vertical-align: middle; }
/* The withdraw form sits in its own mount right under the rows. */
.wsx-form-title { font-size: 14px; margin-bottom: 6px; }
.wsx [disabled] { opacity: .45; cursor: not-allowed; }