/* shops (js/shops.js, js/closet.js, js/garage.js): wardrobe browser / shop, phone counter, car dealer */
#wbPanel,#spPanel,#gdPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-height:92vh;overflow-y:auto;background:#160f22f4;border:3px solid #c9a86a;outline:3px solid #1a0c08;padding:10px;z-index:11;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
#wbPanel{width:min(420px,96vw)}#spPanel{width:min(380px,96vw)}#gdPanel{width:min(560px,96vw)}
#wbPanel[hidden],#spPanel[hidden],#gdPanel[hidden]{display:none}
#wbPanel .ihead,#spPanel .ihead,#gdPanel .ihead{margin:0;align-items:center;gap:8px}
#wbPanel .ihead span,#spPanel .ihead span,#gdPanel .ihead span{flex:1}
.wblogo{width:80px;height:32px;image-rendering:pixelated;flex:none}
#wbPanel button:disabled,#spPanel button:disabled,#gdPanel button:disabled{opacity:.4}
/* store tints on the frame */
#wbPanel.wb-casual{border-color:#e85a5a}#wbPanel.wb-select{border-color:#b8a07a;background:#17130ff4}#wbPanel.wb-lux{border-color:#d8b048;background:#0e0b12f6}
#wbPanel.wb-denki{border-color:#ffe040}#wbPanel.wb-fit,#wbPanel.wb-home{border-color:#8ab0d8}
.wbtop{display:flex;gap:8px;align-items:flex-start}
.wbst{position:relative;flex:none}
#wbStage{width:256px;height:192px;image-rendering:pixelated;border:2px solid #1a0c08;display:block;background:#0b0712}
.wbturn{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-between;padding:0 4px;pointer-events:none}
.wbturn button{pointer-events:auto;font-size:12px;padding:3px 7px;opacity:.85}
.wbtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1;min-width:0}
.wbtab{display:flex;align-items:center;gap:3px;font-size:10px;padding:3px 4px;text-align:left;border-width:2px}
.wbtab img{width:16px;height:16px;image-rendering:pixelated;flex:none}
.wbtab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbtab.on{border-color:#ffe9a8;background:#3a2a1a;color:#ffe9a8}
.wblist{display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow-y:auto;padding-right:2px}
.wbrow{display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;padding:3px 7px;background:#2a1a24;border-width:2px}
.wbrow.cur{border-color:#ffe9a8;background:#3a2a1a}.wbrow.worn{background:#1c2a24}
.wbic{width:30px;height:32px;image-rendering:pixelated;flex:none;background:#f4efe2;border:1px solid #1a0c08}
.wbrow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wbrow span{color:#fff0d0;line-height:1.25}
.wbrow i{font-style:normal;font-size:10px;color:#b8a898}
.wbrow b{font-weight:normal;font-size:13px;color:#ffe9a8;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end}
.wbrow em{font-style:normal;font-size:9px;padding:0 3px;margin-top:2px;background:#2e6a44;color:#e8ffe8}
.wbrow small{font-size:9px;color:#b8a898}
.wbab{font-style:normal;font-size:9px;padding:0 3px;margin-left:3px;color:#fff;background:var(--c,#555)}
.wbnone{font-size:12px;color:#b8a898;text-align:center;margin:8px 0}
.wbdet{background:#0b0712;border:2px solid #3a2e40;padding:6px 8px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:#d8c8b0}
.wbdet.wbhint{color:#b8a898}
.wbdh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.wbdh b{font-weight:normal;font-size:14px;color:#fff0d0}
.wbt{font-size:9px;padding:0 4px;background:#4a3a5a;color:#f0e0ff}
.wbcol{display:flex;flex-wrap:wrap;gap:3px}
.wbcol .sw{width:18px;height:18px;padding:0;border:2px solid #1a0c08}
.wbcol .sw.sel{outline:2px solid #ffe9a8;outline-offset:1px}
.wbcol .sw.own{box-shadow:inset 0 0 0 2px #8ad0a0}
.wbcn{font-size:10px;color:#b8a898}
.wbbuy{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wbbuy button{font-size:13px;padding:6px 10px;display:flex;align-items:center;gap:4px}
.wbbuy button img{width:16px;height:16px;image-rendering:pixelated}
.wbp{flex:1;font-size:17px;color:#ffe9a8}.wbp small{font-size:9px;color:#b8a898;margin-left:2px}
.wbfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wbcha{display:flex;align-items:center;gap:5px;flex:1;min-width:180px;font-size:12px;color:#ffd0ea}
.wbcha img{width:16px;height:16px;image-rendering:pixelated}.wbcha b{font-weight:normal;color:#ff9ad0}
.wbcha small{display:block;font-size:9px;color:#b8a898;width:100%}
.wbcha span{display:flex;flex-direction:column}
.wbmoney{display:flex;align-items:center;gap:4px;font-size:12px;color:#ffe9a8;margin-left:auto}
.wbmoney img{width:16px;height:16px;image-rendering:pixelated;margin-left:6px}
/* phone counter */
.spcard{display:flex;gap:10px;align-items:center;background:#1a1426;border:2px solid #3a2e40;padding:6px 8px}
.spcard.cur{border-color:#8ad0a0;background:#16241e}
.spph{width:auto;height:112px;image-rendering:pixelated;flex:none}
.spi{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;font-size:12px;color:#d8c8b0}
.spi b{font-weight:normal;font-size:15px;color:#fff0d0}
.spi i{font-style:normal;font-size:10px;color:#b8a898}
.sptier{font-size:9px;padding:0 4px;background:#4a3a5a;color:#f0e0ff;align-self:flex-start}
.spab em{font-style:normal;font-size:9px;padding:0 3px;margin-right:3px;color:#fff;background:var(--c,#555)}
.spbuy{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px}
.spbuy button{font-size:12px;padding:5px 9px}
.spbuy em.on{font-style:normal;font-size:11px;padding:2px 6px;background:#2e6a44;color:#e8ffe8}
.spp{font-size:15px;color:#ffe9a8;flex:1 0 auto}
/* car dealer */
.gdbody{display:flex;gap:8px;align-items:flex-start}
.gdlist{display:flex;flex-direction:column;gap:4px;width:170px;flex:none;max-height:64vh;overflow-y:auto}
.gdrow{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;font-size:12px;padding:4px 7px;background:#2a1a24;border-width:2px}
.gdrow.sel{border-color:#ffe9a8;background:#3a2a1a}
.gdrow b{font-weight:normal;color:#fff0d0}.gdrow i{font-style:normal;font-size:9px;color:#b8a898}.gdrow span{font-size:12px;color:#ffe9a8;align-self:flex-end}
.gdmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#gdCv{width:100%;max-width:320px;aspect-ratio:160/104;image-rendering:pixelated;border:2px solid #1a0c08;background:#10141e;align-self:center}
.gdname{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#d8c8b0}.gdname b{font-weight:normal;font-size:15px;color:#fff0d0}
.gdcha{font-size:10px;padding:0 4px;background:#e85aa8;color:#fff}
.gdsws{display:flex;gap:4px}.gdsw{width:22px;height:22px;padding:0;border:2px solid #1a0c08}.gdsw.sel{outline:2px solid #ffe9a8;outline-offset:1px}
.gdsec{font-size:11px;color:#c9a86a;border-bottom:1px solid #3a2e40;padding-bottom:2px}
.gdlots{display:flex;gap:4px;flex-wrap:wrap}
.gdlot{display:flex;flex-direction:column;align-items:flex-start;font-size:11px;padding:4px 7px;border-width:2px;text-align:left}
.gdlot i{font-style:normal;font-size:9px;color:#b8a898}.gdlot.sel{border-color:#8ad0a0;background:#16241e}
.gdplate{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff0d0}
.gdplate img,.gdown img{width:88px;height:44px;image-rendering:pixelated;flex:none}
.gdpay{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.gdpay button{font-size:13px;padding:6px 10px}
.gdprice{flex:1;font-size:18px;color:#ffe9a8}
.gdown{display:flex;align-items:center;gap:8px;font-size:12px;color:#d8c8b0;background:#1a1426;border:2px solid #3a2e40;padding:4px 6px}
.gdown span{flex:1;min-width:0;display:flex;flex-direction:column}.gdown b{font-weight:normal;color:#fff0d0}.gdown i{font-style:normal;font-size:9px;color:#b8a898}
.gdown button{font-size:11px;padding:4px 7px}
.gddue{font-size:12px;color:#ffd0c8;background:#3a1a1a;border:2px solid #7a2a24;padding:5px 8px;display:flex;align-items:center;gap:8px}
@media (max-width:520px){.gdbody{flex-direction:column}.gdlist{width:100%;max-height:28vh}.wbtop{flex-direction:column}.wbtabs{grid-template-columns:repeat(4,1fr);width:100%}#wbStage{width:100%;height:auto;aspect-ratio:4/3}}