/* Merchant / Inn Pack 01: real cards and nine-slice frames, never the mockups. */
.game-panel:is(.shop-modal,.purchase-modal,.lyre-modal){background:#12100cf5;color:#ead8b4}
.game-panel:is(.shop-modal,.purchase-modal,.lyre-modal)>.modal-head{background:linear-gradient(#191813f7,#13140dec);border-bottom:1px solid #806739;padding:8px 22px;z-index:2}
.game-panel:is(.shop-modal,.purchase-modal,.lyre-modal)>.modal-head h2{color:#ebd7ac;font-weight:400;letter-spacing:.04em}
.game-panel:is(.shop-modal,.purchase-modal,.lyre-modal)>.modal-body{padding:0;overflow:hidden;background:transparent;isolation:isolate;container-type:size}
.merchant-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.game-panel:is(.shop-modal,.purchase-modal,.lyre-modal)>.modal-body:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b100826,#090a06a1);z-index:-1;pointer-events:none}
.view-frame.has-screen:has(>.game-panel[data-trade-outdoor="true"])>#viewport{visibility:visible}
.game-panel[data-trade-outdoor="true"]{background:transparent}
.game-panel[data-trade-outdoor="true"]>.modal-body:before{background:linear-gradient(90deg,transparent 0 21%,#0c110da8 30%,#10120ef2 98%)}
.merchant-layout{height:100%;padding:10px 16px;display:grid;grid-template-columns:minmax(160px,23%) minmax(0,1fr) minmax(235px,26%);grid-template-rows:38px minmax(0,1fr) auto;gap:12px;box-sizing:border-box;font:15px/1.35 var(--sans)}
.merchant-wallet{grid-column:2/4;justify-self:end;align-self:center;background:url('./assets/ui/merchant/Wallet_Bar.webp') center/100% 100% no-repeat;padding:9px 25px;min-width:245px;white-space:nowrap;color:#eedab5}
.merchant-scene{grid-column:1;grid-row:1/3;position:relative;min-height:0;display:flex;align-items:flex-end;pointer-events:none;overflow:hidden}
.merchant-scene-caption{position:relative;padding:12px 10px;background:linear-gradient(transparent,#0c100ae8 25%);text-shadow:0 1px 4px #000;width:100%}
.merchant-scene-caption>span{font:12px var(--sans);text-transform:uppercase;letter-spacing:.13em;color:#d0ba90}
.merchant-scene-caption h3{font:clamp(20px,2.1cqw,34px) var(--heading);margin:5px 0;color:#f0dfbb}
.merchant-scene-caption p{font:14px/1.4 var(--sans);color:#dfd1b8;margin:6px 0}
.merchant-goods{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-height:0;min-width:0;gap:8px}
.merchant-list-heading{display:flex;justify-content:space-between;gap:6px;color:#d8c299;flex-wrap:wrap}
.merchant-list-heading small{font-size:12px;color:#bdb096}
.merchant-goods .wares-grid{margin:0;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(165px,30cqh,280px);align-content:start;gap:10px;overflow:auto;padding:3px 6px 6px 3px;scrollbar-color:#977841 #1a1b12;overscroll-behavior:contain}
.merchant-layout .ware-card{position:relative;isolation:isolate;min-width:0;min-height:0;width:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:13px 9px;border:0;border-radius:0;box-shadow:none;background:url('./assets/ui/merchant/Card_Merchant.webp') center/100% 100% no-repeat;color:#e9d7b6;text-align:center;font:14px/1.25 var(--sans)}
.merchant-layout .ware-card:after{content:'';position:absolute;inset:0;background:center/100% 100% no-repeat;pointer-events:none}
.merchant-layout .ware-card:hover:after{background-image:url('./assets/ui/merchant/Card_Hover.svg')}
.merchant-layout .ware-card.chosen:after{background-image:url('./assets/ui/merchant/Card_Selected.svg')}
.merchant-layout .ware-card:focus-visible:after{background-image:url('./assets/ui/merchant/Card_Focus.svg')}
.merchant-layout .ware-card>.catalog-art{position:relative;inset:auto;width:100%;height:0;flex:1;min-height:55px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008);margin:0}
.merchant-layout .ware-card strong{font:400 16px/1.15 var(--heading);min-height:2.3em;display:grid;place-content:center;overflow-wrap:anywhere}
.merchant-layout .ware-card>span{font-weight:600;color:#f0d9a2}
.merchant-layout .ware-card small{font:11px/1.3 var(--sans);color:#c8bca5}
.merchant-layout .ware-card .ware-stock{min-height:2.5em}
.merchant-details{grid-column:3;grid-row:2;min-height:0;overflow:auto;border:20px solid transparent;border-image:url('./assets/ui/merchant/Panel_Details.webp') 44 fill / 20px stretch;padding:3px 0;scrollbar-color:#967642 #161711;display:flex;flex-direction:column;gap:8px}
.merchant-detail-art{height:clamp(60px,16cqh,175px);flex-shrink:0;text-align:center}
.merchant-detail-art .catalog-art{position:static;width:100%;height:100%;object-fit:contain;max-width:210px}
.merchant-details h3{font:400 clamp(20px,2.1cqw,30px)/1.1 var(--heading);margin:0;color:#f1ddaf}
.merchant-details p{margin:0;font-size:14px}
.merchant-details dl{margin:0;font:12px/1.4 var(--sans);color:#c8bca4}
.merchant-details dl>div{display:flex;gap:8px;justify-content:space-between;padding-block:3px;border-bottom:1px solid #91714036}
.merchant-details dd{margin:0;text-align:right;color:#e6d4b2}
.merchant-details .merchant-reason{font-size:12px;color:#cbbb9b}
.merchant-details .merchant-recipient{margin-top:auto;color:#dbc599}
.merchant-button,.merchant-services button{min-height:40px;padding:8px 16px;border:0;border-radius:0;box-shadow:none;background:transparent url('./assets/ui/merchant/Button_normal.svg') center/100% 100% no-repeat;color:#ead5a9;font:400 16px/1.3 var(--heading);cursor:pointer;white-space:normal}
.merchant-button:hover,.merchant-services button:hover{background-image:url('./assets/ui/merchant/Button_hover.svg');color:#ffeac0}
.merchant-button:active,.merchant-services button:active{background-image:url('./assets/ui/merchant/Button_pressed.svg')}
.merchant-button:disabled,.merchant-services button:disabled{background-image:url('./assets/ui/merchant/Button_disabled.svg');color:#a09a8b;cursor:default;opacity:.8}
.merchant-button:focus-visible,.merchant-services button:focus-visible{background-image:url('./assets/ui/merchant/Button_focus.svg');outline:2px solid #88b8d2;outline-offset:2px}
.merchant-layout .shop-party{grid-column:1;grid-row:3;display:flex;gap:8px;justify-content:center;align-items:center;min-height:65px;margin:0}
.merchant-layout .portrait-drop{position:relative;max-width:95px;min-width:0;text-align:center}
.merchant-layout .portrait-drop>span{font:12px var(--sans);display:block;color:#e3d1ae}
.merchant-layout .portrait-drop .orb-frame{width:65px!important;height:65px!important;min-width:0;margin:0}
.merchant-layout .portrait-drop:is(.selected,.drop-ready):after{content:'';position:absolute;inset:0 0 16px;background:url('./assets/ui/merchant/Recipient_Selected.svg') center/contain no-repeat;pointer-events:none}
.merchant-sell{grid-column:2/4;grid-row:3;align-self:center;min-width:0;position:relative;z-index:3}
.merchant-sell>summary{cursor:pointer;list-style-position:inside;background:url('./assets/ui/merchant/Sell_Drawer_Header.webp') center/100% 100% no-repeat;padding:15px 22px;color:#e3c895;font:18px var(--heading)}
.merchant-sale-list{position:absolute;bottom:100%;left:0;right:0;max-height:45cqh;overflow:auto;background:#181910f5;border:1px solid #a18247;padding:12px;display:flex;flex-wrap:wrap;gap:8px}
.merchant-sale-list p{margin:0}
.provisions-layout{grid-template-columns:minmax(170px,26%) minmax(0,1fr);grid-template-rows:38px minmax(140px,1fr) minmax(110px,auto) auto}
.provisions-layout .merchant-wallet{grid-column:2}.provisions-layout .merchant-scene{grid-row:1/4}.provisions-layout .merchant-goods{grid-column:2;grid-row:2}
.provisions-layout .wares-grid{grid-auto-rows:clamp(160px,30cqh,245px)}
.provisions-layout .ware-card{background-image:url('./assets/ui/merchant/Card_Provisions.webp')}
.provisions-layout .merchant-details{grid-column:2;grid-row:3;display:grid;grid-template-columns:90px 1fr 1fr;gap:4px 15px;align-items:center;border-width:16px;border-image-width:16px}
.provisions-layout .merchant-detail-art{height:90px;grid-column:1;grid-row:1/5}
.provisions-layout .merchant-details :is(h3,p,dl){grid-column:2}
.provisions-layout .merchant-details dl{display:none}
.provisions-layout .merchant-details .merchant-reason{display:none}
.provisions-layout .merchant-details .merchant-recipient{margin:0;grid-column:3;grid-row:1}
.provisions-layout .merchant-details .merchant-button{grid-column:3}
.provisions-layout .shop-party{grid-row:4}.provisions-layout .merchant-sell{grid-column:2;grid-row:4}
.harbour-inn-controls.merchant-services{gap:10px;padding:10px 16px;background:#11140cec}
.trade-confirmation{position:relative;min-height:100%;padding:20px;display:grid;place-items:center;box-sizing:border-box;background:#080c0880}
.trade-quantity-card{position:relative;width:min(100%,640px);box-sizing:border-box;border:24px solid transparent;border-image:url('./assets/ui/merchant/Quantity_Dialog.webp') 40 fill / 24px stretch;padding:8px 18px;max-height:100%;overflow:auto;color:#ebd9b4}
.trade-item-heading{display:flex;gap:20px;align-items:center;margin-bottom:14px}
.trade-item-heading>.catalog-art{position:static;width:80px;height:95px;object-fit:contain;flex-shrink:0}
.trade-item-heading h3{font:26px var(--heading);margin:0 0 5px}.trade-item-heading p{margin:3px 0;font:15px var(--sans)}
.trade-quantity-controls{display:flex;gap:8px;align-items:center;margin:8px 0 14px}.trade-quantity-controls button{min-width:44px}
.trade-quantity-controls input{width:85px;min-height:42px;text-align:center;font:20px var(--sans);color:#f1ddb7;border:1px solid #917b50;background:#0b100c}
.trade-total{padding-block:8px;border-block:1px solid #a187444d;font:16px/1.4 var(--sans)}.trade-total p{margin:4px 0}.trade-total strong{color:#ffe1a1}
.trade-error{font:14px/1.4 var(--sans);min-height:2.8em;color:#e0c69b;margin:8px 0}
.trade-quantity-card .haggle{font:14px var(--sans);margin:12px 0;display:block}.haggle small{display:block;margin:5px 0 0 24px;color:#c1b293}
.trade-confirm-actions{display:flex;gap:10px;flex-wrap:wrap}.trade-confirm-actions button{flex:1}
.game-panel:is(.shop-modal,.purchase-modal) .modal-notice:not(:empty){position:absolute;bottom:6px;left:28%;right:3%;background:#202719f5;border:1px solid #b09255;font:15px/1.4 var(--sans)}
.inn-lyre{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:16px 24px;background:linear-gradient(90deg,#120f08ad,transparent 90%);text-align:left}
.lyre-copy{align-self:flex-start;max-width:640px;margin-bottom:auto;color:#efdbb3;padding:6px 12px;text-shadow:0 2px 5px #000}
.lyre-copy h3{font:clamp(24px,3cqw,42px) var(--heading);font-weight:400;margin:8px 0}.lyre-copy p{font:15px/1.45 var(--sans);margin:5px 0}
.lyre-tray{position:relative;width:min(800px,82%);aspect-ratio:800/318;max-height:52cqh;flex-shrink:0;background:url('./assets/ui/merchant/Lyre_Tray.webp') center/100% 100% no-repeat}
.lyre-tray .lyre-strings{position:absolute;inset:35.5% 12.25% 12.3% 10.75%;border:0;border-radius:0;background:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.3%;max-width:none}
.lyre-tray .lyre-strings button{height:100%;width:100%;min-width:0;min-height:0;border:0;border-radius:0;box-shadow:none;padding:0 0 12%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;background:url('./assets/ui/merchant/Lyre_Key_normal.svg') center/100% 100% no-repeat;color:#f0d3a0;touch-action:manipulation}
.lyre-tray .lyre-strings button:hover{background-image:url('./assets/ui/merchant/Lyre_Key_hover.svg')}
.lyre-tray .lyre-strings button:is(:active,.sounding){background-image:url('./assets/ui/merchant/Lyre_Key_pressed.svg');color:#fff0be}
.lyre-tray .lyre-strings button:focus-visible{outline:2px solid #9ec4dc;outline-offset:1px}
.lyre-strings span{font:clamp(13px,1.9cqw,24px) var(--heading)}.lyre-strings kbd{font:12px var(--sans);color:#c7b18d}
.lyre-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;color:#ead1a5}
.lyre-controls label{display:flex;align-items:center;gap:8px;font:14px var(--sans)}.lyre-controls input{width:90px}
.lyre-controls button{font-size:15px}.inn-lyre>p{margin:0;color:#d2c3a8;text-align:center;font:12px/1.3 var(--sans)}.inn-lyre>.lyre-status{min-height:1.4em;color:#ffe0a3;font-size:14px}
@container (max-width:1050px){.merchant-layout{grid-template-columns:minmax(120px,20%) minmax(0,1fr) minmax(205px,27%);gap:8px;padding:8px}.merchant-goods .wares-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.provisions-layout{grid-template-columns:minmax(145px,24%) minmax(0,1fr)}.provisions-layout .wares-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.merchant-details{border-width:15px;border-image-width:15px}.merchant-layout .portrait-drop .orb-frame{width:52px!important;height:52px!important}}
@container (max-width:760px){.merchant-layout{grid-template-columns:minmax(0,1fr) minmax(200px,40%);grid-template-rows:38px minmax(0,1fr) auto}.merchant-scene{display:none}.merchant-wallet{grid-column:1/3}.merchant-goods{grid-column:1}.merchant-details{grid-column:2}.merchant-layout .wares-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:185px}.merchant-layout .shop-party{grid-column:1}.merchant-sell{grid-column:2}.merchant-sell>summary{font-size:14px;padding:14px}.merchant-details h3{font-size:21px}.merchant-details p{font-size:13px}.merchant-details dl{font-size:11px}.provisions-layout .merchant-details{grid-column:2;grid-row:2;display:flex;gap:8px}.provisions-layout .merchant-details .merchant-detail-art{height:95px}.provisions-layout .merchant-details .merchant-reason{display:block}.provisions-layout .shop-party,.provisions-layout .merchant-sell{grid-row:3}.trade-confirmation{padding:8px}.trade-quantity-card{border-width:16px;border-image-width:16px;padding:4px 8px}.trade-item-heading{margin-bottom:6px}.trade-item-heading>.catalog-art{height:65px}.lyre-tray{width:100%}.lyre-copy{padding:0}.lyre-copy p{font-size:13px}.inn-lyre{padding:12px}.lyre-controls button{font-size:13px;min-height:34px}}
@container (max-width:450px){.merchant-layout{display:flex;flex-direction:column;overflow:auto}.merchant-wallet{align-self:flex-end;min-width:0}.merchant-goods{min-height:215px;flex-shrink:0}.merchant-goods .wares-grid{overflow:visible}.merchant-details{min-height:280px;overflow:visible}.merchant-layout .shop-party{min-height:70px}.merchant-sell{width:100%;flex-shrink:0}.merchant-layout .merchant-details .merchant-detail-art{height:75px}.lyre-controls label{width:100%;justify-content:center}.lyre-copy h3{font-size:25px}.lyre-tray{max-height:none}.lyre-strings kbd{font-size:10px}}
@container (max-height:470px){.merchant-layout{gap:6px}.merchant-details .merchant-detail-art{height:55px}.merchant-details{gap:4px}.merchant-details dl{display:none}.merchant-layout .shop-party{min-height:45px}.merchant-layout .portrait-drop .orb-frame{width:42px!important;height:42px!important}.merchant-scene-caption p{display:none}.merchant-sell>summary{padding:12px 18px}.provisions-layout{grid-template-rows:32px minmax(100px,1fr) minmax(115px,auto) auto}.lyre-copy h3{margin:3px 0}.lyre-copy p:last-child{display:none}.lyre-tray{width:min(610px,72%);max-height:48cqh}.lyre-controls button{min-height:32px}.inn-lyre{gap:4px}.trade-confirmation{overflow:auto;display:block}.trade-quantity-card{margin:auto;max-height:none}}

.merchant-layout .hero-orb{width:auto;min-width:0;padding:0;background:none;border:0;box-shadow:none}.merchant-layout .hero-orb :is(.hero-vitals,.hero-name,.orb-gauge){display:none}