#shop-button{display:flex;gap:6px;align-items:center;justify-content:center;width:auto;min-width:70px;padding:0 10px;font-size:11px}
#shop-overlay{position:fixed;inset:0;z-index:24;display:flex;align-items:center;justify-content:flex-end;padding:22px;background:#18271f4a;backdrop-filter:blur(2px);transition:opacity .24s,visibility .24s;transform:none}
#shop-dialog{width:min(850px,94vw);max-height:calc(100dvh - 44px);display:flex;flex-direction:column;background:#fcfbf5;border:1px solid #fff;border-radius:16px;box-shadow:0 20px 80px #17281e40;overflow:hidden;transform:translateX(0);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
#shop-overlay.hidden #shop-dialog{transform:translateX(40px)}
.shop-top{display:flex;align-items:center;gap:18px;padding:22px 26px 15px}.shop-kicker{font-size:10px;letter-spacing:2px;color:#899180}.shop-top h2{font-size:27px;font-weight:500;letter-spacing:3px;margin:6px 0 0}.shop-wallet{margin-left:auto;text-align:right}.shop-wallet small{display:block;font-size:10px;color:#8b9488}.shop-wallet strong{font:25px Georgia;color:#375c46}#shop-close{width:38px;height:38px;display:grid;place-items:center;border:1px solid #dce1d7;border-radius:50%;background:#fff;color:#536552}
.shop-progress{margin:0 26px 18px;padding:13px 16px;background:#f0f2e8;border-radius:9px}.shop-progress>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.shop-progress strong{font-size:12px;white-space:nowrap}.shop-progress span{font-size:11px;color:#7f8b73}#shop-progress{display:block;width:100%;height:4px;margin-top:10px;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#dde3d4}#shop-progress::-webkit-progress-bar{background:#dde3d4}#shop-progress::-webkit-progress-value{background:#8aa074;transition:width .4s}
.shop-content{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding:0 26px 20px;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.shop-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px}.decor-card{display:flex;min-width:0;flex-direction:column;align-items:center;padding:4px 5px 12px;border:1px solid #e0e3d9;background:#f6f5ed;border-radius:10px;color:#465a49;transition:transform .18s,background .18s,border-color .18s;animation:decor-enter .25s ease}.decor-card.selected{border-color:#607d5d;background:#eaf0df;box-shadow:inset 0 0 0 1px #607d5d}.decor-card.locked{background:#f0f0eb}.decor-card.locked img{filter:saturate(.35);opacity:.68}.decor-card img{width:100%;height:90px;object-fit:contain;transition:opacity .2s,filter .2s}.decor-card strong{font-size:11px;font-weight:500}.decor-card small{font-size:9px;color:#8a9282;margin-top:5px}.decor-placeholder{display:grid;place-items:center;width:80px;height:90px;color:var(--decor-color)}.decor-placeholder svg{width:40px;height:40px}
.shop-detail{border-left:1px solid #e5e8df;padding-left:22px}.decor-hero{height:132px;position:relative;background:linear-gradient(135deg,#f3f2e7,#e9eddf);border-radius:10px;display:flex;justify-content:center;align-items:center}.decor-hero img{width:170px;height:138px;object-fit:contain}.decor-hero>span:last-child{position:absolute;left:9px;top:9px;font-size:9px;color:#758569}.shop-detail h3{font-size:19px;font-weight:500;margin:14px 0 8px}.shop-detail p{font-size:11px;line-height:1.8;color:#7e8977;margin:0 0 15px;min-height:40px}.decor-placement-label{font-size:11px;margin-bottom:9px}.decor-placement-label small{font-size:9px;color:#97a08e;margin-left:6px}.decor-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}.decor-slots button{display:flex;flex-direction:column;text-align:left;padding:9px 8px;min-height:44px;border:1px solid #dce2d3;background:#fff;border-radius:6px;color:#5e7057}.decor-slots button span{font-size:10px}.decor-slots button small{font-size:8px;color:#96a08b;margin-top:4px}.decor-slots button.selected{background:#e5edda;border-color:#8ca37a}.decor-edit{display:flex;gap:8px;margin-top:10px}.decor-edit button{background:transparent;color:#75886a;font-size:10px;padding:8px 3px}.decor-edit svg{width:14px;height:14px}.decor-buy{width:100%;min-height:44px;background:#3f614d;color:#fff;border-radius:7px;font-size:13px;margin-top:13px}.decor-buy:hover{background:#345440}.decor-buy:disabled,.decor-edit button:disabled{opacity:.45;cursor:default;transform:none}.decor-unlock{font-size:10px;line-height:1.7;color:#8d947e}.shop-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e5e8df;padding:12px 26px;font-size:10px;color:#8d9783}.shop-footer>span:first-child{color:#567148}body.shopping #hud{opacity:.25}body.shopping #hud button,body.shopping #move-stick{pointer-events:none}
@keyframes decor-enter{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:550px){#shop-overlay{padding:10px}#shop-dialog{width:min(880px,98vw);max-height:calc(100dvh - 20px);border-radius:10px}.shop-top{padding:10px 16px 8px}.shop-top h2{font-size:19px;margin:3px 0 0}.shop-kicker{font-size:8px}.shop-wallet strong{font-size:20px}#shop-close{width:34px;height:34px}.shop-progress{padding:8px 12px;margin:0 16px 10px}.shop-progress strong,.shop-progress span{font-size:10px}.shop-content{grid-template-columns:minmax(0,1fr) 260px;padding:0 16px 12px;gap:14px}.shop-catalog{gap:7px}.decor-card img{height:75px}.decor-card{padding-bottom:8px}.shop-detail{padding-left:14px}.decor-hero{height:78px}.decor-hero img{height:90px;width:125px}.shop-detail h3{font-size:16px;margin:9px 0 4px}.shop-detail p{min-height:0;margin-bottom:8px;font-size:10px}.shop-footer{padding:9px 16px;font-size:9px}.decor-placeholder{height:75px}}
@media(max-width:700px){.shop-content{grid-template-columns:1fr 220px}.shop-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-progress span{max-width:64%;line-height:1.5}body.touch-controls #shop-button{min-width:54px;padding:0 7px}#shop-button span{font-size:10px}}
@media(prefers-reduced-motion:reduce){#shop-overlay,#shop-dialog,.decor-card{transition:opacity .1s;animation:none}}