/* Wallet roles extend the app's existing type, spacing and color tokens. */
:root {
    --wallet-width: 460px;
    --wallet-hit: 44px;
    --wallet-amount: max(30px, var(--fs-2xl));
    --wallet-title: max(26px, var(--fs-2xl));
    --wallet-body: max(13px, var(--fs-sm));
    --wallet-caption: max(12px, var(--fs-xs));
    --wallet-price: max(17px, var(--fs-lg));
    --wallet-action-start: color-mix(in srgb, var(--accent) 72%, var(--bg));
    --wallet-action-end: color-mix(in srgb, var(--accent-2) 65%, var(--bg));
    --wallet-action: linear-gradient(115deg, var(--wallet-action-start), var(--wallet-action-end));
}
body.coins-active #bottom-nav { display: none; }
.coin-store, .coin-store *, .wallet-dialog, .wallet-dialog * { box-sizing: border-box; }
.wallet-screen {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    margin: 0; padding: 0; overflow: hidden; background: var(--bg); color: var(--text);
}
#page-coins.active, #page-messages.active { display: flex; flex-direction: column; }
.coin-store-header {
    flex: none; display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-4); width: 100%; max-width: var(--wallet-width); margin: 0 auto;
    padding: calc(var(--safe-top, 0px) + var(--sp-4)) var(--sp-4) var(--sp-4);
}
.coin-back, .coin-wallet {
    height: var(--wallet-hit); border-radius: var(--r-pill); background: var(--surface-1);
    border: 1px solid var(--border); color: var(--text); font-size: var(--wallet-price);
    line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.coin-back { width: var(--wallet-hit); padding: 0; cursor: pointer; }
.wallet-screen[dir="rtl"] .coin-back { transform: scaleX(-1); }
.coin-wallet { gap: var(--sp-2); padding: 0 var(--sp-4); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-balance-icon { display: inline-flex; align-items: center; font-size: var(--fs-xl); line-height: 1; }
.wallet-intro { flex: none; width: 100%; max-width: var(--wallet-width); margin: 0 auto; padding: var(--sp-2) var(--sp-4) var(--sp-6); text-align: start; }
.coin-store h1 { font-size: var(--wallet-title); font-weight: 750; line-height: 1.2; margin: 0 0 var(--sp-2); text-wrap: balance; }
.coin-usage { margin: 0; font-size: var(--wallet-body); line-height: 1.5; color: var(--text-2); text-wrap: balance; }
/* Bound the scrollport explicitly; keep its always-visible rail outside it. */
.wallet-scroll-frame { position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.wallet-scroll {
    position: absolute; inset: 0; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: scroll;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
    scrollbar-width: none;
}
.wallet-scroll::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .wallet-scroll, .wallet-scroll .coin-pack { cursor: grab; } }
.wallet-screen.is-dragging, .wallet-screen.is-dragging * { cursor: grabbing !important; }
.wallet-scrollbar { position: absolute; top: 4px; right: 0; bottom: calc(var(--safe-bottom, 0px) + 8px); width: 20px; z-index: 1; touch-action: none; cursor: grab; }
.wallet-scrollbar::before, .wallet-scrollbar-thumb { position: absolute; left: 8px; width: 5px; border-radius: var(--r-pill); }
.wallet-scrollbar::before { content: ''; top: 0; bottom: 0; background: var(--surface-3); }
.wallet-scrollbar-thumb { top: 0; background: var(--text-2); pointer-events: auto; }
.wallet-scrollbar[aria-disabled="true"] { cursor: default; opacity: .35; }
.wallet-scrollbar:active { cursor: grabbing; }
.wallet-scrollbar:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--r-pill); }
.wallet-content { width: 100%; max-width: var(--wallet-width); margin: 0 auto; padding: var(--sp-1) max(22px, var(--sp-4)) calc(var(--safe-bottom, 0px) + var(--sp-6)) var(--sp-4); }
.coin-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sp-3); }
.coin-pack {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-width: 0; padding: var(--sp-5) var(--sp-3) var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-xl);
    background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
}
.wallet-pack-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wallet-hit); height: var(--wallet-hit); font-size: var(--fs-2xl); line-height: 1; margin-bottom: var(--sp-3); }
.wallet-pack-details { min-width: 0; margin-bottom: var(--sp-5); }
.coin-pack .wallet-pack-amount { display: block; font-size: var(--wallet-amount); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-pack-unit { display: block; margin-top: var(--sp-1); font-size: var(--wallet-body); line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.coin-pack button, .coin-retry, .wallet-primary, .wallet-secondary {
    min-height: var(--wallet-hit); border: 0; border-radius: var(--r-md); color: var(--text);
    font: inherit; font-size: var(--wallet-body); font-weight: 650; cursor: pointer;
}
.coin-pack button { width: 100%; margin-top: auto; padding: var(--sp-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); background: var(--wallet-action); }
.wallet-action-label { font-size: var(--wallet-caption); line-height: 1.3; }
.wallet-price { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--sp-1); white-space: nowrap; direction: ltr; font-size: var(--wallet-price); line-height: 1.3; font-variant-numeric: tabular-nums; }
.wallet-price-icon { width: var(--fs-xl); height: 1.3em; display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; }
.wallet-price-icon svg { display: block; }
/* Five options: the final pack fills the row instead of leaving a blank tile. */
.coin-pack:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); text-align: start; }
.coin-pack:last-child:nth-child(odd) .wallet-pack-icon { margin: 0; flex: none; }
.coin-pack:last-child:nth-child(odd) .wallet-pack-details { flex: 1; min-width: max-content; margin: 0; }
.coin-pack:last-child:nth-child(odd) button { flex: 1 0 32%; width: 32%; min-width: calc(var(--wallet-hit) * 2); margin: 0; }
.coin-pack:last-child:nth-child(odd) .wallet-pack-amount { font-size: var(--wallet-title); }
.coin-pack button:disabled, .wallet-primary:disabled { opacity: .5; cursor: wait; }
.coin-store button:focus-visible, .wallet-scroll:focus-visible, .wallet-dialog button:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -3px; }
.coin-store button:active:not(:disabled) { filter: brightness(.9); }
.wallet-status { margin: var(--sp-4) 0; text-align: center; font-size: var(--wallet-body); line-height: 1.5; }
.wallet-status:empty { display: none; }
.coin-retry, .wallet-primary { background: var(--wallet-action); padding: var(--sp-3) var(--sp-4); }
.wallet-topup { width: 100%; margin-top: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border-strong); }
.coin-retry { display: block; margin: var(--sp-3) auto; }
.coin-retry[hidden] { display: none; }
.wallet-secondary { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
.wallet-dialog { width: min(360px, calc(100% - var(--sp-8))); max-height: calc(var(--app-height, 100dvh) - var(--sp-8)); overflow-y: auto; padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-1); color: var(--text); }
.wallet-dialog::backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.wallet-dialog h2 { font-size: var(--fs-2xl); line-height: 1.3; margin: 0 0 var(--sp-3); }
.wallet-dialog p { font-size: max(16px, var(--fs-md)); line-height: 1.5; margin: 0 0 var(--sp-6); }
.wallet-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
#you-message-topup, #you-topup { min-width: var(--wallet-hit); min-height: var(--wallet-hit); flex: none; font-size: var(--fs-xl); line-height: 1; padding: 0; }
@media (max-height: 480px) { .wallet-intro { padding-top: 0; padding-bottom: var(--sp-3); } }