/* Shity Casino — wallet-area touch-ups (Boss A build B5, 2026-11-06).
   Loaded ONLY by wallet.html, deposit.html, withdraw.html, history.html
   (sibling crews add the <link>; this file must be linked AFTER casino.css
   so these rules win on equal specificity). casino.css is NOT edited.

   Scoping — why these selectors look like this:
   The four pages have no body class (<body> is bare site-wide), so there is
   no wallet-area page class to prefix with. Instead every rule is anchored
   to a container that exists only in the wallet area:
     - page-unique ids: #builtinWallets, #builtinLogin, #payoutPickWrap,
       #payoutAddressForm, #builtinLinkWrap, #bwRecover (wallet.html),
       #depositConnected (deposit.html), #withdrawForm (withdraw.html),
       #historyBody (history.html);
     - for chrome shared with the rest of the casino (the cat-rail), whose
       markup is byte-identical on every page, rules are guarded by
       body:has(<wallet-area-only id>) so they can only match on a page
       that actually contains a wallet-area container — even if this file
       were ever linked somewhere else by mistake, it would do nothing
       there. :has() needs Safari 15.4+ / Chrome 105+; on anything older
       the guarded rules simply do not apply (graceful, no breakage).
   Findings referenced below are from audit A7-LAYOUT.md (390px render). */

/* --- F4: category pills are 40px tall; raise to the 44px target --------
   .cat-pill lives in .cat-rail, which is identical markup on every casino
   page, so the four wallet pages are selected by their unique ids. */
body:has(#builtinWallets) .cat-pill,
body:has(#depositConnected) .cat-pill,
body:has(#withdrawForm) .cat-pill,
body:has(#historyBody) .cat-pill {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- F5: payout-pick radio labels are 21px tall ------------------------
   wallet.html only: the ETH / SOL / AVAX / USDT labels inside
   #payoutPickWrap are bare <label><input type="radio"> elements. Make the
   whole label the tap target: full 44px, pill-shaped so it reads as a
   choice, radio kept inline with its word. */
#payoutPickWrap .action-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card2);
  font-weight: 700;
  cursor: pointer;
}
#payoutPickWrap .action-row label input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

/* --- F6: .wallet-input is 43px tall at 15px font -----------------------
   15px is under iOS Safari's 16px no-auto-zoom threshold, so tapping a
   wallet field zooms the page. Raise every wallet-area input to 48px
   tall at 16px. Anchored to the wallet-area form containers only —
   .wallet-input also exists on fairness/vendor pages and must not be
   touched by this file. */
#builtinLogin .wallet-input,
#bwRecover .wallet-input,
#payoutAddressForm .wallet-input,
#payoutPickWrap .wallet-input,
#builtinLinkWrap .wallet-input,
#withdrawForm .wallet-input {
  min-height: 48px;
  font-size: 16px;
}

/* --- F7: built-in wallet rows ------------------------------------------
   Live rows are .list-row flex rows: coin label left, address crammed
   into a ~186px right-aligned column (inline style text-align:right), so
   addresses wrap to 2–3 ragged lines and rows run ~85px tall. Stack the
   row instead: coin label on its own line, address full-width underneath
   and left-aligned (full width = fewer, even wraps), balance line under
   the address, copy button inline beside the address.
   B1's staged wallet.html did not exist when this file was written, so
   the address rules cover BOTH the live element (.txid inside
   #builtinWallets) and the .mono element B1 is specified to produce, and
   the copy-button rules cover B1's button by element + likely hooks,
   all scoped to #builtinWallets (which contains no button today).
   BOSS-A INTEGRATION (B7, 2026-11-06) verified against B1's actual
   staged markup: addresses are .txid spans (no .mono inside
   #builtinWallets) and copy buttons are
   <button class="btn btn--ghost" data-copy-wallet="..."> — the dead
   guessed selectors (.mono, .copy-btn, [data-copy]) were removed;
   the rules below now target exactly those real elements. */
#builtinWallets .list-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 0;
}
/* Defeats the live rows' inline text-align:right on the value cell. */
#builtinWallets .list-row > span:last-child {
  text-align: left !important;
}
#builtinWallets .list-row .txid {
  text-align: left;
  line-height: 1.45;
}
#builtinWallets [data-builtin-balance] {
  display: block;
  margin-top: 2px;
  text-align: left;
}
#builtinWallets button[data-copy-wallet] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 8px;
  padding: 6px 12px;
  vertical-align: middle;
}

/* Deposit address (deposit.html): same ragged-wrap problem as F7 — give
   it the full panel width with even line spacing. (A copy button for it
   is markup/JS work — F1 — CSS cannot add one.) */
#depositAddress {
  line-height: 1.5;
  padding: 4px 0;
}

/* --- B8/RW-12: deposit QR size ------------------------------------------
   lib/qrcode.js with scalable:true emits an <svg> with a viewBox and no
   width/height, so without a rule its rendered size is a browser default.
   Pin it to a scannable square: 180px, capped at 60vw on narrow phones,
   aspect-ratio + height:auto keep it square when the cap bites. */
#depositQr svg {
  display: block;
  width: 180px;
  height: auto;
  max-width: 60vw;
  aspect-ratio: 1;
}

/* --- F12: .list-row label/value columns start at a different x per row -
   Deposit and Withdraw panels only (selected by their page ids): pin the
   label column to one width so values line up down the panel. History and
   Wallet rows are deliberately excluded — their first cell is content,
   not a short label. */
body:has(#depositConnected) .panel .list-row > span:first-child,
body:has(#withdrawForm) .panel .list-row > span:first-child {
  flex: 0 0 104px;
}
body:has(#depositConnected) .panel .list-row > b,
body:has(#withdrawForm) .panel .list-row > b {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- F8: History amounts wrap to two lines ------------------------------
   The amount <b> has no shrink protection, so a long txid in the left
   cell squeezes it. Let the left cell shrink/wrap (its .mono txid already
   breaks safely) and keep the amount on one line, right-aligned. */
#historyBody .list-row {
  align-items: flex-start;
}
#historyBody .list-row > span {
  min-width: 0;
}
#historyBody .list-row > b {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}