/* Opt-in material study. The existing shop remains available for comparison. */
.merchant-material-preview .merchant-panel {
  background: #181514 url('./assets/ui/merchant/trading-leather-v1.webp') center / 100% 100%;
  border: 1px solid #78603e;
  border-radius: 3px;
  box-shadow: 0 16px 34px #0009, inset 0 0 0 3px #211c16;
  padding: 10px 12px;
}
.merchant-material-preview .merchant-panel header {
  background: #241013b8; border-color: #8b63454d; padding: 12px 20px;
}
.merchant-material-preview .merchant-title { border: 0; padding-left: 4px; }
.merchant-material-preview .merchant-title h2 { color: #f1e4c8; font-family: Georgia,'Songti SC',serif; }
.merchant-material-preview .merchant-title small { color: #b99566; }
.merchant-material-preview .merchant-status { color: #d0bda4; border-color: #92735466; }
.merchant-material-preview .merchant-views { background: transparent; border-color: #92735466; }
.merchant-material-preview .merchant-views button { color: #b5a58d; }
.merchant-material-preview .merchant-views button[aria-pressed='true'] { color: #eed9ad; border-color: #a96851; }
.merchant-material-preview .merchant-stock { padding: 22px 2px 20px; }
.merchant-material-preview .merchant-item { grid-template-columns: 122px minmax(0,1fr); border-color: #967e5b38; gap: 10px; }
.merchant-material-preview .merchant-art { width: 122px; height: 182px; }
.merchant-material-preview .merchant-art img { display: none; }
.merchant-object {
  display: block; width: 122px; height: 122px;
  background: url('./assets/ui/merchant/goods-atlas-v1.webp') 0 center / 300% 100% no-repeat;
  filter: drop-shadow(2px 9px 5px #0008);
  transition: transform 180ms ease;
}
.merchant-object[data-kind='spell'] { background-position: 50% center; }
.merchant-object[data-kind='troop'] { background-position: 100% center; }
.merchant-material-preview .merchant-art:hover .merchant-object { transform: translateY(-4px); }
.merchant-material-preview .merchant-tier { bottom: 2px; background: #27221b; color: #c7b191; border-color: #716044; }
.merchant-material-preview [data-tier='middle'] .merchant-tier { color: #cfcddd; border-color: #827784; background: #242029; }
.merchant-material-preview [data-tier='advanced'] .merchant-tier { color: #ecd298; border-color: #ad8450; background: #422325; }
.merchant-material-preview .merchant-offer-info { border: 0; background: transparent; }
.merchant-material-preview .merchant-kind { color: #bba888; }
.merchant-material-preview .merchant-panel h3 { color: #f4e8d1; font-family: Georgia,'Songti SC',serif; }
.merchant-material-preview .merchant-effect { color: #e0d2bd; }
.merchant-material-preview .merchant-offer-info small { color: #a99a85; }
.merchant-material-preview .merchant-offer-info button {
  background: #af8755; color: #20170f; border-color: #d9b37b #755332 #755332 #d9b37b;
  box-shadow: inset 0 1px 0 #f2d9ab66, 0 2px 2px #0007;
}
.merchant-material-preview .merchant-offer-info button:hover:not(:disabled) { background: #ccaa73; }
.merchant-material-preview .merchant-offer-info button:disabled { background: #302823; color: #b0a08c; border-color: #5c4b39; box-shadow: none; }
.merchant-material-preview .merchant-buy-status { color: #c7b792; }
.merchant-material-preview .is-sold .merchant-object { filter: grayscale(.6) brightness(.55); }
.merchant-material-preview .merchant-sold-seal {
  inset: 54px auto auto 32px; width: 58px; height: 58px; box-sizing: border-box;
  border-radius: 50%; background: #6b2631; border: 3px double #aa6363; color: #e5bba8;
  display: grid; place-items: center; font-size: 13px; padding: 0;
  box-shadow: inset 2px 2px 2px #cd7a6e55, 2px 5px 4px #0009;
}
.merchant-material-preview .merchant-panel footer { background: #211518b8; border-color: #92735466; padding: 12px 20px; }
.merchant-material-preview .merchant-panel select { background: #1c1915; border-color: #7c684e; color: #e4d4bb; }
.merchant-material-preview .merchant-panel footer button { background: #572731; border-color: #ac7b6b; color: #edd7c3; }
.merchant-material-preview .merchant-panel footer button:disabled { background: #2b2221; color: #a69887; border-color: #59483b; }
.merchant-material-preview #merchantNotice { color: #c4b59f; }
@media (max-width: 999px) {
  .merchant-material-preview .merchant-panel { padding: 6px 8px; }
  .merchant-material-preview .merchant-panel header { padding: 8px 10px; }
  .merchant-material-preview .merchant-stock { padding: 12px 0; }
  .merchant-material-preview .merchant-item { grid-template-columns: 76px minmax(0,1fr); gap: 8px; }
  .merchant-material-preview .merchant-art { width: 76px; height: 132px; }
  .merchant-material-preview .merchant-object { width: 76px; height: 76px; }
  .merchant-material-preview .merchant-sold-seal { top: 38px; left: 15px; width: 48px; height: 48px; }
  .merchant-material-preview .merchant-panel footer { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .merchant-object { transition: none; } }

/* Battle fixtures share the shop materials without expanding into the play area. */
.merchant-material-preview .merchant-toggle {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 5px 16px 5px 7px; border-radius: 3px;
  background: #221718 url('./assets/ui/merchant/trading-leather-v1.webp') center / auto 180%;
  border: 1px solid #a48755; color: #efdfbf;
  box-shadow: inset 0 0 0 2px #17120e, 0 4px 9px #0008;
  font: 600 14px/1.3 'Songti SC',serif;
  transition: border-color 140ms, color 140ms;
}
.merchant-material-preview .merchant-toggle[hidden] { display: none; }
.merchant-material-preview .merchant-toggle::before {
  content: ''; flex: 0 0 32px; width: 32px; height: 36px;
  background: url('./assets/ui/merchant/goods-atlas-v1.webp') 100% center / 300% 100% no-repeat;
}
.merchant-material-preview .merchant-toggle[aria-expanded='true'] { border-color: #e2bf7e; color: #ffe7b5; }
.merchant-material-preview .merchant-toggle:hover { border-color: #e2bf7e; }
.merchant-material-preview .merchant-trap-zone {
  top: 166px; width: 174px; background: #1c1713eb;
  border: 1px solid #7b644244; border-left: 2px solid #8f3c48;
  color: #cfbfa6; border-radius: 2px;
}
.merchant-material-preview .battle-field-slot {
  background: #201b17 url('./assets/ui/merchant/trading-leather-v1.webp') center / auto 115%;
  border: 1px solid #94774c; color: #e7d5b5; border-radius: 3px;
  box-shadow: inset 0 0 0 3px #17120d, inset 0 0 0 4px #82663c44, 0 5px 10px #0009;
}
.merchant-material-preview .battle-field-slot[data-empty='true'] { color: #b9a98e; border-color: #726043; }
.merchant-material-preview .battle-field-slot[data-owner='enemy'] { border-top: 3px solid #87434a; }
.merchant-material-preview .battle-field-slot[data-owner='player'] { border-top: 3px solid #b99b61; }
.merchant-material-preview .battle-field-slot:hover { border-color: #d9b679; }
.merchant-material-preview .battle-field-slot small { color: #d3b990; }
.merchant-material-preview .battle-field-slot strong { color: #e4d3b7; font-weight: 500; }
.merchant-material-preview .field-slot-art { border-bottom: 1px solid #9c7e4e66; padding: 2px; }
.merchant-material-preview [data-empty='true'] .field-slot-art svg {
  color: #b69559; padding: 9px; width: 46px; height: 46px; box-sizing: border-box;
  border: 1px solid #9c7e4e66; border-radius: 50%; background: #171410;
  box-shadow: inset 0 1px 2px #fff1, 0 2px 4px #0006;
}
.merchant-material-preview #battleCountRibbon {
  background: #1b1613 url('./assets/ui/merchant/trading-leather-v1.webp') center / 100% 100%;
  border: 1px solid #8b7048; border-radius: 3px; padding: 6px 9px;
  color: #ecdcc0; box-shadow: inset 0 0 0 2px #211911, 0 4px 12px #0007;
}
.merchant-material-preview .battle-count-row { gap: 2px; }
.merchant-material-preview .battle-count-row[data-owner='enemy'] { border-top: 1px solid #a78b5538; }
.merchant-material-preview .battle-count-row > strong { color: #e2c898; }
.merchant-material-preview .battle-count-row[data-owner='enemy'] > strong { color: #d49e9e; }
.merchant-material-preview #battleCountRibbon svg { color: #bb9d6b; }
.merchant-material-preview #battleCountRibbon b { font-variant-numeric: tabular-nums; font-weight: 600; }
.merchant-material-preview #battleCountRibbon [data-metric='ep'] { color: #f0ce87; }
html.merchant-material-preview.rebel-battle .theme-feijin.phase-one .battle-layout > .topbar { top: 106px; }
html.merchant-material-preview.rebel-battle .battle-layout > .topbar > button,
html.merchant-material-preview.rebel-battle .battle-layout > .topbar > .battle-menu > summary {
  background: #211b16 url('./assets/ui/merchant/trading-leather-v1.webp') center / auto 170%;
  color: #d9be8f; border: 1px solid #8c724b; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #21170f, 0 3px 5px #0007;
}
@media (max-width: 999px), (max-height: 600px) {
  .merchant-material-preview .merchant-toggle { top: 8px; left: 8px; min-height: 36px; padding: 3px 10px 3px 5px; gap: 6px; font-size: 12px; }
  .merchant-material-preview .merchant-toggle::before { width: 24px; height: 26px; flex-basis: 24px; }
  .merchant-material-preview .merchant-trap-zone { top: 8px; left: 132px; width: 150px; padding: 6px; }
  .merchant-material-preview [data-empty='true'] .field-slot-art svg { padding: 5px; width: 28px; height: 28px; }
  .merchant-material-preview #battleCountRibbon { padding: 2px 4px; }
  html.merchant-material-preview.rebel-battle .theme-feijin.phase-one .battle-layout > .topbar { top: 80px; right: 8px; left: auto; }
}