/* A viewport-sized merchant room. Extra goods use pages, never a scrolling shelf. */
body.in-shop{height:100dvh;overflow:hidden}
body.in-shop #app{height:100%;min-height:0;overflow:hidden}
body.in-shop .flow-shop{height:100dvh;min-height:0;box-sizing:border-box;display:grid;grid-template-rows:82px 58px minmax(0,1fr) 74px;gap:0;padding:0 3vw;overflow:hidden}
body.in-shop .flow-shop>.flow-hud{position:relative;inset:auto;height:82px;min-height:0;margin:0;grid-row:1;width:100%;box-sizing:border-box;padding:0;flex-shrink:0}
.shop-visit-bar{display:flex;align-items:center;gap:24px;margin:0;color:#e1d3eb;border-block:1px solid #b4a0bb44;background:linear-gradient(90deg,#14101bd9,#19142170,transparent);padding:0 16px}
.shop-visit-bar span{font-size:14px;white-space:nowrap}.shop-visit-bar b{font-size:25px;color:#e2b9fa;margin-left:8px}.shop-visit-bar small{margin-left:auto;font-size:12px;color:#bcabc7}
.shop-room{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;gap:30px;padding:18px 0 4px}
.merchant-navigation{min-height:0;border-right:1px solid #b5a0c14d;padding:12px 20px 0 0;display:flex;flex-direction:column}
.merchant-navigation h2,.merchant-heading h2{font-size:22px;font-weight:400;letter-spacing:3px;margin:0 0 20px;color:#f3e7f8}
.merchant-tabs{display:grid;gap:10px}
#app .merchant-tab{display:flex;align-items:center;gap:10px;min-width:0;min-height:54px;padding:12px 6px;text-align:left;color:#c6b5d2;font:inherit;font-size:15px;border:1px solid transparent;border-left:2px solid transparent;background:linear-gradient(90deg,#18121fc7,transparent);cursor:pointer;position:relative}
#app .merchant-tab[aria-selected=true]{border-color:#d4ace766;border-left-color:#edc6ff;color:#fff0ff;background:linear-gradient(90deg,#78558c66,#32213d33);text-shadow:0 0 16px #df91ff;box-shadow:inset 0 0 22px #bf84e012}
#app .merchant-tab:hover,#app .merchant-tab:focus-visible{color:#fff1ff;border-color:#d4ace7;outline:none}
.merchant-tab-symbol{display:flex;flex-shrink:0}.merchant-tab .ui-icon{width:22px;height:24px}.merchant-tab small{margin-left:auto;font-size:12px}.merchant-tab small i{font-size:10px;font-style:normal;opacity:.65}
.merchant-navigation>p{margin:auto 0 18px;padding-top:15px;color:#b3a0bd;font-size:12px;line-height:2}
.merchant-panel{min-width:0;min-height:0;display:grid;grid-template-rows:68px minmax(0,1fr) 50px;background:linear-gradient(110deg,#15101ccc,#17111c80);border-block:1px solid #ae91bd44;padding:16px 24px 6px;box-sizing:border-box}
.merchant-heading{min-width:0;display:flex;gap:24px;align-items:baseline}.merchant-heading h2{white-space:nowrap;margin:0}.merchant-heading p{font-size:13px;line-height:1.7;color:#c5b2d2;margin:0}
.merchant-grid{container-type:size;min-height:0;min-width:0;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:24px;align-items:center;justify-items:center}
.merchant-grid .shop-item{width:100%;min-width:0;text-align:center;padding:0 0 24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.merchant-grid .shop-sale{position:static;display:block;font-size:12px;min-height:18px;color:#e0baef;background:none;padding:0}.merchant-grid .shop-sale.regular{color:#b9a5c6}
body.in-shop .merchant-cards .hand-card{--merchant-card-height:min(390px,calc(100cqh - 88px),calc((100cqw / var(--columns) - 36px)*1.5));width:calc(var(--merchant-card-height)*.666667)!important;min-width:0!important;max-width:none!important;height:var(--merchant-card-height)!important;min-height:0!important;margin:0!important;display:block;transform:none!important;flex:none!important}
body.in-shop .merchant-cards .card-bottom{font-size:12px!important}
.merchant-offer{width:100%;max-width:340px;max-height:100%;box-sizing:border-box;padding:18px 18px 12px;border:1px solid #b39ac05c;background:linear-gradient(160deg,#292031b8,#0e0c16e6);text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}
.merchant-offer:before{content:'✧';position:absolute;top:-12px;left:calc(50% - 8px);color:#d0b3df;background:#241c2d;font-size:20px}
.merchant-art{height:clamp(46px,calc(100cqh - 265px),200px);min-height:0;width:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.merchant-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 20px #c186ef3d)}
.merchant-art>.ui-icon{width:70%;height:90%;max-width:100px;max-height:110px;color:#d6b9e7}
.merchant-offer h3{font-size:21px;font-weight:400;margin:15px 0 10px;color:#eee0f5}.merchant-offer p{font-size:14px;line-height:1.85;margin:0 0 12px;color:#d0bedb;min-height:52px}.merchant-offer>small{font-size:11px;line-height:1.6;color:#af9abe;margin:auto 0 14px}
.merchant-offer.sold{opacity:.55}.merchant-offer.legendary-offer{border-color:#d1a573;background:linear-gradient(140deg,#4d303e8c,#100e16e6)}
#app .merchant-offer>.button{font-size:14px;min-height:42px;padding:9px 20px;max-width:100%;width:100%}
.merchant-pagination{display:flex;align-items:center;justify-content:center;gap:24px;min-height:0}.merchant-pagination>span{text-align:center;color:#e2c6f0;font-size:15px;min-width:70px}.merchant-pagination small{font-size:10px;margin-left:12px;color:#baa5c7}
#app .merchant-pagination>.button{min-height:36px;padding:6px 24px;font-size:12px}
.merchant-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;padding:6px 0;border-top:1px solid #b299c04d;background:linear-gradient(90deg,#17101ad9,#17101a77)}
.merchant-context{display:flex;align-items:center;gap:16px;min-width:0}.merchant-context>small,.merchant-context>span{font-size:12px;color:#baa7c8}
#app .merchant-footer .button{min-height:44px;padding:10px 28px;font-size:14px;white-space:nowrap}.merchant-footer>.button{min-width:190px}
.merchant-empty{color:#cfb9de;grid-column:1/-1}
@media(max-width:1100px){.shop-room{grid-template-columns:160px minmax(0,1fr);gap:16px}.merchant-navigation{padding-right:12px}.merchant-panel{padding-inline:16px}.merchant-heading{display:block}.merchant-heading h2{font-size:20px;margin-bottom:8px}.merchant-heading p{font-size:11px}.merchant-grid{gap:16px}.merchant-context{gap:6px;flex-direction:column;align-items:flex-start}.merchant-context>small{font-size:10px}.merchant-navigation h2{font-size:19px}.merchant-tab small i{display:none}}
@media(max-height:760px) and (min-width:701px){body.in-shop .flow-shop{grid-template-rows:64px 44px minmax(0,1fr) 64px}body.in-shop .flow-shop>.flow-hud{height:64px!important;min-height:64px!important}.shop-room{padding-top:10px}.merchant-navigation{padding-top:4px}.merchant-navigation h2{margin-bottom:10px}.merchant-tabs{gap:5px}#app .merchant-tab{min-height:42px;padding-block:8px}.merchant-navigation>p{display:none}.merchant-panel{grid-template-rows:52px minmax(0,1fr) 42px;padding-top:10px}.merchant-offer{padding:10px 12px}.merchant-offer h3{font-size:18px;margin:10px 0 6px}.merchant-offer p{font-size:12px;line-height:1.65;min-height:40px;margin-bottom:6px}.merchant-offer>small{margin-bottom:8px}.merchant-art{height:clamp(30px,calc(100cqh - 200px),100px)}}
@media(max-width:700px){
 body.in-shop .flow-shop{padding:0 12px;grid-template-rows:60px 42px minmax(0,1fr) 76px}
 body.in-shop .flow-shop>.flow-hud{height:60px!important;min-height:60px!important;padding:0!important;display:flex!important;gap:10px}
 body.in-shop .flow-shop .flow-brand{width:auto;min-width:0;margin:0;font-size:18px}body.in-shop .flow-shop .flow-brand b{font-size:18px!important}
 body.in-shop .flow-shop .flow-location{position:static;margin:0;font-size:13px;min-width:0}body.in-shop .flow-shop .flow-location>span{font-size:13px}
 body.in-shop .flow-shop :is(.flow-resources,.flow-hero,.flow-preparation-back){display:none!important}
 .shop-visit-bar{gap:16px;padding:0 8px}.shop-visit-bar span{font-size:11px}.shop-visit-bar b{font-size:20px;margin-left:3px}.shop-visit-bar small{display:none}
 .shop-room{grid-template-columns:minmax(0,1fr);grid-template-rows:84px minmax(0,1fr);gap:8px;padding:8px 0 4px}
 .merchant-navigation{border:0;padding:0}.merchant-navigation>h2,.merchant-navigation>p{display:none}.merchant-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #app .merchant-tab{min-height:38px;padding:8px 5px;font-size:12px;gap:3px;justify-content:center;border-left-width:1px}.merchant-tab-symbol{display:none}.merchant-tab small{font-size:10px;margin-left:3px}
 .merchant-panel{grid-template-rows:54px minmax(0,1fr) 40px;padding:10px 10px 3px}.merchant-heading h2{font-size:17px;letter-spacing:2px;margin-bottom:3px}.merchant-heading p{font-size:10px;line-height:1.5}
 .merchant-pagination{gap:10px}.merchant-pagination>span{font-size:13px;min-width:50px}.merchant-pagination small{display:none}#app .merchant-pagination>.button{font-size:11px;min-height:32px;padding:5px 18px}
 .merchant-grid .shop-item{gap:5px;padding-bottom:20px}.merchant-grid .shop-sale{font-size:10px;min-height:14px}
 body.in-shop .merchant-cards .hand-card{--merchant-card-height:min(390px,calc(100cqh - 62px),calc((100cqw - 38px)*1.5))}
 .merchant-offer{padding:10px 14px;max-width:300px}.merchant-offer h3{font-size:19px;margin:8px 0}.merchant-offer p{font-size:12px;line-height:1.6;min-height:0;margin-bottom:8px}.merchant-offer>small{font-size:10px;margin-bottom:8px}.merchant-art{height:clamp(24px,calc(100cqh - 200px),150px)}
 .merchant-footer{gap:4px}.merchant-context{gap:3px;align-items:center}.merchant-context>span{font-size:11px;max-width:140px}.merchant-context>small{font-size:9px}
 #app .merchant-footer .button{font-size:11px;padding:8px 14px;min-height:40px}.merchant-footer>.button{min-width:110px}
}
@media(max-height:480px) and (min-width:701px){body.in-shop .flow-shop{grid-template-rows:46px 32px minmax(0,1fr) 46px}body.in-shop .flow-shop>.flow-hud{height:46px!important;min-height:46px!important}.flow-shop .flow-hero{display:none}.shop-visit-bar b{font-size:20px}.shop-room{padding-top:6px;grid-template-columns:130px minmax(0,1fr)}.merchant-navigation h2{display:none}.merchant-tabs{gap:3px}#app .merchant-tab{min-height:29px;padding:4px;font-size:12px}.merchant-tab-symbol{display:none}.merchant-panel{grid-template-rows:29px minmax(0,1fr) 32px;padding-top:4px}.merchant-heading{display:flex}.merchant-heading h2{font-size:16px}.merchant-heading p{display:none}.merchant-offer{padding:4px 8px}.merchant-art{display:none}.merchant-offer h3{font-size:15px;margin:5px}.merchant-offer p{font-size:11px;min-height:0;margin-bottom:3px}.merchant-offer>small{font-size:9px;margin-bottom:3px}#app .merchant-offer>.button{min-height:30px;font-size:11px;padding:4px 12px}#app .merchant-footer .button{min-height:34px;padding:4px 18px;font-size:12px}.merchant-context>small{display:none}#app .merchant-pagination>.button{min-height:28px;font-size:10px;padding:3px 20px}.merchant-grid .shop-item{padding-bottom:16px;gap:2px}.merchant-grid .shop-sale{font-size:9px;min-height:12px}body.in-shop .merchant-cards .hand-card{--merchant-card-height:min(390px,calc(100cqh - 40px),calc((100cqw / var(--columns) - 30px)*1.5))}}
.shop-purchase{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:center;padding:6px 12px 18px}
.purchase-visual{display:flex;justify-content:center;align-items:center;min-height:200px}
.purchase-visual .hand-card{width:180px!important;height:270px!important;min-height:0!important;flex:0 0 180px!important;margin:0 0 20px!important;pointer-events:none}
.purchase-visual .purchase-relic{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 0 20px #bf8cea40)}
.purchase-visual>.ui-icon{width:100px;height:110px;color:#ceb4e1}
.purchase-copy h3{font-size:24px;font-weight:400;margin:0 0 16px;color:#f0dffc}
.purchase-copy p{line-height:1.9;font-size:14px}.purchase-extra{color:#c9b9d3;border-top:1px solid #b19ac044;padding-top:12px}
.purchase-ledger{display:grid;gap:10px;padding:16px 0;margin:12px 0;border-block:1px solid #ae93c04d}
.purchase-ledger span{display:flex;justify-content:space-between;gap:20px;color:#cbbbda}.purchase-ledger b{color:#ead0fc;font-size:20px}
.purchase-copy .purchase-error{color:#ffaabd}.purchase-copy>small{line-height:1.8;color:#bdadca}
.shop-confirm-actions{flex-wrap:wrap}
#modal:has(.shop-remove-picker){width:min(1000px,calc(100vw - 32px))}
.remove-intro p{margin:0 0 8px}.remove-intro small{color:#bdacc9}
.remove-toolbar{display:flex;gap:12px;margin:18px 0;position:sticky;top:0;background:#1c1623f5;padding:10px 0;z-index:3}
.remove-toolbar input{min-width:0;flex:1}.remove-toolbar select{width:150px}
.remove-toolbar :is(input,select){border:1px solid #aa8fb966;background:#14101b;color:#e6d8ef;padding:10px;font:inherit}
.remove-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.remove-card-option{display:flex;align-items:center;gap:14px;text-align:left;padding:14px!important;background:linear-gradient(120deg,#2a2030b8,#16121de3);border:1px solid #a28aac55;color:#e7d8ef;min-width:0;cursor:pointer}
.remove-card-option:hover{border-color:#ddbbef;background:#33273d}.remove-card-option[hidden]{display:none!important}
.remove-card-option img{width:66px;height:96px;object-fit:cover;flex-shrink:0;border:1px solid #ac90be55}
.remove-card-option span{min-width:0}.remove-card-option b{font-size:15px;font-weight:400;display:block}
.remove-card-option small{display:block;color:#c5afcf;font-size:11px;margin:8px 0}
.remove-card-option em{font-size:12px;font-style:normal;line-height:1.7;display:block}.remove-card-option i{font-style:normal;color:#d1a2e7;font-size:11px;display:block;margin-top:10px}

@media(max-width:700px){
 .shop-purchase{grid-template-columns:1fr;gap:8px;padding:0}.purchase-visual{min-height:0}.purchase-visual .hand-card{width:140px!important;height:210px!important;flex-basis:140px!important;margin-bottom:12px!important}
 .purchase-visual .purchase-relic{width:130px;height:130px}.purchase-visual>.ui-icon{width:64px;height:70px}
 .purchase-copy h3{font-size:20px}.purchase-copy p{font-size:12px;margin:8px 0}.purchase-ledger{padding:10px 0;gap:5px}.purchase-ledger b{font-size:17px}
 .remove-card-grid{grid-template-columns:1fr}.remove-toolbar{gap:8px}.remove-toolbar select{width:120px;font-size:12px}.remove-toolbar input{font-size:12px}
}