/* v183: actual viewport HUD, not scaled with the battle board. */
#wallet183{position:fixed;top:max(6px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:65;display:flex;gap:5px;width:522px;max-width:calc(100vw - 120px);font:12px/1.15 'CookieRun',sans-serif;color:#422817;pointer-events:none}
#wallet183[hidden]{display:none}
#wallet183 .w183-critical{display:grid;grid-template-rows:repeat(2,40px);gap:5px;flex:0 0 92px;min-width:0}
#wallet183 .w183-extra{display:grid;grid-template-rows:repeat(2,40px);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px;flex:1;min-width:0;pointer-events:auto}
#wallet183 .w183-chip{display:flex;align-items:center;gap:3px;min-width:0;min-height:40px;padding:4px 5px;border:2px solid #734524;border-radius:12px;background:linear-gradient(#fff9e9,#ffe1aa);box-shadow:0 2px 0 #352115;pointer-events:auto;color:#422817;font:inherit}
#wallet183 .w183-icon{display:grid;place-items:center;flex:0 0 21px;height:25px;font-size:19px}
#wallet183 .w183-icon img{width:21px;height:25px;max-width:21px;object-fit:contain}
#wallet183 .w183-text{min-width:0;display:flex;flex-direction:column;gap:3px}
#wallet183 .w183-label{font-size:9px;white-space:nowrap}
#wallet183 b{font-size:12px;white-space:nowrap}
#wallet183 [data-currency=beastHorn]{border-color:#b54f60}#wallet183 [data-currency=ancientHorn]{border-color:#b58a20}#wallet183 [data-currency=circusHorn]{border-color:#7960b0}
#wallet183 .w183-toggle{display:none}
#wallet183 button:focus-visible,#wallet183 .w183-extra:focus-visible{outline:3px solid #197ca6;outline-offset:2px}
body.wallet183-visible .screen>.sc-head>.coins,body.wallet183-visible #s-lobby .lb-wal,body.wallet183-visible #journey-status{display:none!important}
/* The original flex header used its right wallet to center the heading. */
body.wallet183-visible .screen>.sc-head h2{position:absolute;left:40%;transform:translateX(-50%);max-width:380px;white-space:nowrap}
@media(max-width:1050px){
 #wallet183{width:min(400px,calc(100vw - 100px));display:flex;flex-direction:column;gap:4px;right:8px}
 #wallet183 .w183-critical{display:flex;flex:none;gap:4px;justify-content:flex-end}
 #wallet183 .w183-critical .w183-chip{min-height:44px;min-width:88px}
 #wallet183 .w183-toggle{display:block;min-width:48px;min-height:44px;padding:5px;border:2px solid #734524;border-radius:12px;background:#ffe1aa;color:#422817;font:12px 'CookieRun';pointer-events:auto}
 #wallet183 .w183-label{font-size:10px}#wallet183 b{font-size:13px}
 #wallet183 .w183-extra{display:none}
 #wallet183.w183-expanded .w183-extra{display:grid;grid-template-rows:44px;grid-auto-columns:91px;flex:none;overflow-x:auto;overflow-y:hidden;padding:2px 2px 5px;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#986b32 #fff0cd}
 #wallet183 .w183-extra .w183-chip{min-height:44px}
 body.wallet183-visible .screen>.sc-head h2{left:38%;max-width:220px;font-size:24px;padding:4px 16px}
}
@media(max-width:360px){#wallet183 .w183-critical .w183-chip{min-width:78px;padding:4px}#wallet183 .w183-icon{flex-basis:18px}#wallet183 .w183-icon img{width:18px}#wallet183 .w183-toggle{min-width:44px}}
/* Native modal controls stay above the wallet; fullscreen stories keep their own HUD. */
body:has(.front-native-overlay) #wallet183,body:has(dialog[open]) #wallet183,body:has(#story:not(.hide)) #wallet183,body:has(#gfx:not(.hide)) #wallet183{visibility:hidden}
/* Account controls must not cover expanded currency chips on touch screens. */
#wallet183 .w183-critical,#wallet183 .w183-extra{grid-template-rows:repeat(2,44px)}
#wallet183 .w183-chip{min-height:44px}
body.wallet183-visible #cloud-account{top:max(106px,calc(env(safe-area-inset-top) + 106px))}
body:has(#attend:not(.hide)) #wallet183,body:has(#cwmodal:not(.hide)) #wallet183{visibility:hidden}
@media(max-width:1050px){
 #wallet183.w183-expanded .w183-extra{grid-template-rows:44px}
 body.wallet183-visible #cloud-account{top:max(58px,calc(env(safe-area-inset-top) + 58px))}
 body.wallet183-visible:has(#wallet183.w183-expanded) #cloud-account{top:max(112px,calc(env(safe-area-inset-top) + 112px))}
}

/* v191: 다이아·고기젤리·가방만 위에 두고 나머지는 가방 화면으로. */
#wallet183{display:flex;align-items:center;gap:8px;width:auto;max-width:calc(100vw - 24px);flex-direction:row;right:max(12px,env(safe-area-inset-right))}
#wallet183 .w183-chip{min-height:50px;min-width:126px;padding:5px 12px;gap:7px}
#wallet183 .w183-icon{flex:0 0 32px;height:34px}
#wallet183 .w183-icon img{width:32px;height:34px;max-width:32px}
#wallet183 b{font-size:20px}
#wallet183 .w183-bag{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;min-height:50px;padding:2px 4px;border:2px solid #734524;border-radius:12px;background:linear-gradient(#fff9e9,#ffe1aa);color:#422817;font:12px 'CookieRun',system-ui,sans-serif;cursor:pointer;pointer-events:auto}
#wallet183 .w183-bag svg{width:28px;height:28px}
#wallet183 .w183-bag em{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 4px;box-sizing:border-box;border-radius:11px;background:#e8324a;color:#fff;font:13px/22px 'CookieRun',system-ui,sans-serif;text-align:center}
#wallet183 .w183-bag em[hidden]{display:none}
body.wallet183-visible #cloud-account{top:max(66px,calc(env(safe-area-inset-top) + 66px))}
@media(max-width:1050px){
 #wallet183{width:auto;flex-direction:row;gap:6px;right:8px}
 #wallet183 .w183-chip{min-width:100px;padding:4px 8px}#wallet183 b{font-size:17px}
 body.wallet183-visible #cloud-account{top:max(62px,calc(env(safe-area-inset-top) + 62px))}
}
@media(max-width:400px){#wallet183 .w183-chip{min-width:82px;padding:4px 5px}#wallet183 .w183-icon{flex-basis:24px}#wallet183 .w183-icon img{width:24px;height:26px}#wallet183 b{font-size:15px}#wallet183 .w183-bag{width:52px}}
.bag-card{width:min(760px,100%);display:flex;flex-direction:column;gap:14px;color:#3c2417}
.bag-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bag-card h2{font-size:28px}.bag-card h3{margin:0;font-size:18px}.bag-card header button{min-width:92px}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bag-item{display:flex;align-items:center;gap:10px;min-height:62px;padding:8px 10px;box-sizing:border-box;border:2px solid #d9a860;border-radius:14px;background:#fff6df}
.bag-item .w183-icon{display:grid;place-items:center;flex:0 0 40px;height:42px;font-size:26px}
.bag-item .w183-icon img,.bag-item .w183-icon svg{width:40px;height:42px;object-fit:contain}
.bag-item span{display:flex;flex-direction:column;gap:2px;min-width:0}.bag-item small{font-size:13px}.bag-item b{font-size:20px}
.bag-vouchers{display:grid;gap:10px}
.bag-voucher{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid #b59be6;border-radius:14px;background:#f6efff}
.bag-voucher img{width:58px;height:66px;object-fit:contain;flex:none}.bag-voucher div{flex:1;min-width:0}.bag-voucher b{display:block;font-size:18px}.bag-voucher small{font-size:14px}
.bag-voucher button{min-width:92px}.bag-empty{margin:0;font-size:15px;color:#7a5a3a}
body.wallet183-visible #s-gacha .gk-res{display:none!important}
.bag-card h2,.bag-card h3,.bag-item span,.bag-voucher div{text-align:left}
body.wallet183-visible #s-event .sc-head h2{position:absolute}