/* The balance and the two named actions stay together on desktop and phone. */
:root{--topbar-height:60px}
.wallet-actions{display:flex;align-items:center;gap:6px;min-width:0}
.topbar .payment-trigger{min-height:48px;padding:0 13px;font-size:13px;font-weight:750}
.topbar #deposit-open{background:#326e3b;border-color:#204e2c;color:#fff5d8;box-shadow:inset 0 1px #629755,0 2px #704323}
.topbar #withdraw-open{background:#fff0cd;color:#56361e}
.topbar .payment-trigger:focus-visible{outline:3px solid #fff4a5;outline-offset:2px}
main{height:calc(100dvh - var(--topbar-height) - env(safe-area-inset-top) - var(--resource-hud-height))}
#deposit-form .deposit-conversion{font-weight:700;color:#285d34;margin:0}
/* Confirmação aprovada: moeda com correto, pergaminho e retorno à ilha. */
#wallet-dialog.payment-confirmed{width:min(440px,calc(100vw - 24px));border:8px solid #9b6033;border-radius:14px;background:#fff0cb;box-shadow:0 0 0 3px #4e2f1d,inset 0 0 0 2px #e6bf7d,0 20px 70px #10262b88}
#wallet-dialog.payment-confirmed>.paper-header,#wallet-dialog.payment-confirmed>.paper-footer,#wallet-dialog.payment-confirmed .paper-content>:not(#wallet-deposit){display:none}
#wallet-dialog.payment-confirmed .paper-content{padding:18px 22px 22px;background:radial-gradient(ellipse at 50% 15%,#fff8de 0,transparent 70%),#fff0cb}
#wallet-dialog.payment-confirmed .pix-preview{padding:0;border:0;border-radius:0;background:transparent}
.deposit-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;position:relative}
.pix-preview .deposit-success-coin{display:block;width:192px;max-width:65%;height:auto;aspect-ratio:1;margin:0 auto 2px;background:transparent;image-rendering:pixelated;flex:none}
.deposit-success-title{max-width:100%;margin:0;color:#4e2b17;font:900 clamp(28px,7vw,36px)/1.08 Georgia,serif;text-wrap:balance;overflow-wrap:break-word}
.deposit-success-title:focus-visible{outline:3px solid #a76c29;outline-offset:4px;border-radius:3px}
.deposit-success .deposit-success-note{margin:0;font-size:14px;font-weight:650;line-height:1.45}
.deposit-success-amount{display:block;width:100%;margin-top:4px;padding:15px 10px;border:2px solid #b48a4c;border-radius:8px;background:#fff6dc;box-shadow:inset 0 2px #ffe2a3,0 2px #d6af76;color:#205c30;font:900 clamp(24px,6.5vw,32px)/1.2 Georgia,serif;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.deposit-success .deposit-success-balance{margin:2px 0 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.deposit-success-divider{display:block;position:relative;width:100%;height:18px;margin:3px 0;background:linear-gradient(#c8a16a,#c8a16a) left center/calc(50% - 18px) 2px no-repeat,linear-gradient(#c8a16a,#c8a16a) right center/calc(50% - 18px) 2px no-repeat}
.deposit-success-divider::before,.deposit-success-divider::after{content:'';position:absolute;top:4px;left:calc(50% - 10px);width:10px;height:8px;border-radius:0 7px 0 7px;background:#6d9c3f;transform:rotate(12deg)}
.deposit-success-divider::after{left:50%;transform:scaleX(-1) rotate(12deg);background:#91af4c}
.deposit-success-back{width:100%;min-height:54px}
.deposit-success-back:focus-visible{outline:3px solid #aa732a;outline-offset:3px}
@media(max-width:360px),(max-height:650px){
 #wallet-dialog.payment-confirmed .paper-content{padding:12px 15px 16px}
 .deposit-success{gap:10px}
 .pix-preview .deposit-success-coin{width:144px}
 .deposit-success-title{font-size:28px}
 .deposit-success-amount{padding:12px 8px}
}
@media(max-width:600px){
 :root{--topbar-height:112px}
 .topbar{height:calc(var(--topbar-height) + env(safe-area-inset-top));display:grid;grid-template-columns:minmax(0,1fr) 48px auto;grid-template-rows:48px 48px;column-gap:6px;row-gap:2px;padding:calc(env(safe-area-inset-top) + 4px) 10px 5px}
 .topbar .top-actions{display:contents}
 .topbar .wordmark{grid-column:1;grid-row:1}
 .topbar .music-toggle{grid-column:2;grid-row:1;min-width:48px;min-height:48px;padding:0}
 .topbar .account-trigger{grid-column:3;grid-row:1;min-height:48px;padding-inline:12px}
 .wallet-actions{grid-column:1/-1;grid-row:2;justify-content:center;gap:7px}
 .topbar .payment-trigger{flex:1;max-width:120px;min-width:78px;padding-inline:8px}
 .topbar .balance{min-width:82px;min-height:48px;justify-content:center}
}