/* --- wallet.css --------------------------------------------------------------
 *
 * The wallet: deposit, promo code, withdraw. One dialog, on every page that has
 * a WALLET button, which since the header became shared is every page with a
 * rail.
 *
 * WHY EVERY RULE IS SCOPED TO THE ID
 *
 * The markup this styles used .modal-overlay, .modal-box, .modal-header,
 * .login-input and .close-btn -- five class names that EVERY page defines, and
 * defines differently: they are among the 111 selectors that disagree across
 * the site's inline blocks. The dialog only ever appeared on the lobby, so it
 * only ever met the lobby's versions. So the classes became .wal-*, which
 * exist in no page's block.
 *
 * That was not enough, and the way it failed is worth keeping. game-shell.css
 * carries the game pages' control-panel input:
 *
 *     input[type="number"], input[type="text"] { background: transparent;
 *                                                border: none; padding: 20px 10px 5px 13px; }
 *
 * which is specificity (0,1,1) against .wal-input's (0,1,0), and loaded after
 * this file besides. On all eighteen game pages the wallet's fields came out
 * as bare text with no box around them, while the lobby's -- which has no such
 * rule -- were correct. A NEW CLASS NAME PROTECTS AGAINST NOTHING WHEN THE
 * RULE THAT REACHES IN IS ADDRESSED TO THE ELEMENT.
 *
 * So every rule below is scoped to #deposit-withdraw-modal. An id outranks any
 * element, attribute or class rule a page can have, whatever order the sheets
 * load in, which for the one screen on the site that moves money is the point:
 * it looks the same wherever it opens, and no page can reach into it by
 * accident.
 */

#deposit-withdraw-modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(4, 2, 10, 0.78);
    backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
    font-family: var(--font-ui);
}
#deposit-withdraw-modal.open { display: flex; }

#deposit-withdraw-modal .wal-box {
    width: 380px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 14px; padding: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
#deposit-withdraw-modal .wal-title {
    font-size: 17px; font-weight: 900; letter-spacing: 1px; color: #fff;
    text-align: center; margin-bottom: 18px;
}

#deposit-withdraw-modal .wal-section {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 15px; margin-bottom: 14px;
}
#deposit-withdraw-modal .wal-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.9px;
    color: var(--text-dim); display: block; margin-bottom: 9px;
}
#deposit-withdraw-modal .wal-copy { color: var(--text-muted); font-size: 12px; line-height: 1.55; margin: 0 0 13px 0; }
/* 800, not the browser's bold. Inter is loaded at 400/600/700/800/900, but a
   face is only fetched when something on the page actually paints in it -- and
   markets paints nothing in 700, so the first thing that needed it was this
   dialog, and "10 minutes", the Xanax price and the withdrawal minimum spent
   the block period invisible while it arrived. Every weight below is one the
   site paints on every page already. */
#deposit-withdraw-modal .wal-copy strong,
#deposit-withdraw-modal .wal-copy b { color: var(--text); font-weight: 800; }
#deposit-withdraw-modal .wal-copy .who { color: var(--accent); font-weight: 800; }

#deposit-withdraw-modal .wal-row { display: flex; gap: 9px; align-items: stretch; }
#deposit-withdraw-modal .wal-input {
    flex-grow: 1; min-width: 0; box-sizing: border-box;
    background: var(--surface-sunken); border: 1px solid var(--border-strong);
    border-radius: 8px; color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 800; padding: 11px 12px; outline: none;
    font-variant-numeric: tabular-nums;
}
#deposit-withdraw-modal .wal-input:focus { border-color: var(--accent); }
#deposit-withdraw-modal .wal-input::placeholder { color: var(--text-dim); font-weight: 600; }

#deposit-withdraw-modal .wal-btn {
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
    padding: 0 16px; flex-shrink: 0; transition: filter 0.12s;
}
#deposit-withdraw-modal .wal-btn:hover { filter: brightness(1.08); }
#deposit-withdraw-modal .wal-btn:disabled { cursor: not-allowed; filter: none; opacity: 0.55; }
/* One CTA colour for all three. They were three: .go was blue, .redeem violet
   and .req a grey outline -- an ordering with no rule behind it, in which the
   button that moves the most money read as the quietest. The blue was the old
   lobby's hardcoded #00b8ff, mapped to --info by hue when the dialog moved
   here; --info is the notice colour and violet is the CTA one. Each of these
   sits alone in its own section, so a shared colour costs no hierarchy. */
#deposit-withdraw-modal .wal-btn.go,
#deposit-withdraw-modal .wal-btn.redeem,
#deposit-withdraw-modal .wal-btn.req { background: var(--accent); color: var(--text-on-accent); }
#deposit-withdraw-modal .wal-btn.cancel { background: none; color: var(--danger); border-color: var(--danger); display: none; }

/* The default is neutral: the line is a notice, and the script paints the
   role on top of it -- --info while something is in flight, --win on a
   completed deposit, --danger on a refusal. It said --accent, which is the
   CTA colour, and the in-flight states said --gold, which is money's. */
#deposit-withdraw-modal .wal-status {
    font-size: 11px; font-weight: 800; text-align: center;
    margin-top: 10px; min-height: 14px; color: var(--text-dim);
}
#deposit-withdraw-modal .wal-note { color: var(--text-dim); font-size: 11px; text-align: center; margin: 10px 0 0 0; }
#deposit-withdraw-modal .wal-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
#deposit-withdraw-modal .wal-avail {
    font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
    color: var(--accent); cursor: pointer; background: none; border: none;
    font-family: inherit; padding: 0;
}
#deposit-withdraw-modal .wal-avail:hover { color: var(--accent-bright); }
#deposit-withdraw-modal .wal-min { color: var(--text-dim); font-size: 10px; margin: 9px 0 0 0; font-weight: 800; }

/* Transparent, not filled. Filled with --surface-raised it was the same
   treatment as .wal-btn.req, so the dismiss weighed as much as the button
   that moves money. Every page's own .close-btn is transparent + a border;
   this is that, on the tokens. */
#deposit-withdraw-modal .wal-close {
    width: 100%; margin-top: 6px; padding: 13px;
    background: none; border: 1px solid var(--border);
    border-radius: 9px; color: var(--text-dim); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.8px;
}
#deposit-withdraw-modal .wal-close:hover { color: var(--text); border-color: var(--border-strong); }

@media (max-width: 480px) {
    #deposit-withdraw-modal .wal-box { padding: 18px 15px; }
    #deposit-withdraw-modal .wal-row { flex-wrap: wrap; }
    #deposit-withdraw-modal .wal-btn { padding: 12px 16px; flex-grow: 1; }
}