/* ClashFarm merchant refresh — 2026.10.25 */

.merchant-page {
  --merchant-gold: #f3c86c;
  --merchant-gold-soft: #ffe7aa;
  --merchant-wine: #6f2418;
  --merchant-wine-deep: #35100b;
  --merchant-wood: #32190d;
  --merchant-ink: #160a05;
  --merchant-text: #fff4da;
  --merchant-muted: #d8bd8c;
  --merchant-border: rgba(255, 211, 116, 0.44);
  background:
    radial-gradient(circle at 50% 12%, rgba(127, 45, 23, 0.28), transparent 50%),
    #090402;
}

.merchant-frame {
  isolation: isolate;
  width: min(100%, var(--game-shell-width, 430px));
  max-width: var(--game-shell-width, 430px);
  height: 100dvh;
  min-height: 100dvh;
  background-color: #1a0d07;
  background-image:
    linear-gradient(180deg, rgba(14, 6, 3, 0.28) 0%, rgba(18, 8, 4, 0.34) 44%, rgba(7, 3, 2, 0.72) 100%),
    url('/assets/merchant-background-v20261025-1.webp') !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 42px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.merchant-frame::before,
.merchant-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.merchant-frame::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(10, 4, 2, 0.44), transparent 18%, transparent 82%, rgba(10, 4, 2, 0.44)),
    linear-gradient(180deg, rgba(20, 6, 3, 0.18), rgba(8, 3, 2, 0.5));
}

.merchant-frame::after {
  z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(4, 2, 1, 0.34) 100%);
}

.merchant-content {
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: calc(100dvh - 96px);
  padding: clamp(10px, 2.6vw, 22px) clamp(10px, 3vw, 26px)
    calc(116px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.merchant-content::-webkit-scrollbar,
.merchant-list::-webkit-scrollbar,
.merchant-confirm-modal::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.merchant-list,
.merchant-confirm-modal {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.merchant-top {
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.merchant-back-button {
  min-height: 42px;
  padding: 0 13px;
  color: var(--merchant-gold-soft);
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, rgba(125, 53, 27, 0.98), rgba(53, 18, 10, 0.98));
  border: 1px solid rgba(255, 218, 132, 0.55);
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 199, 0.16),
    inset 0 -9px 15px rgba(35, 8, 3, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.38);
  font-size: 13px;
}

.merchant-title-box {
  min-width: 0;
  min-height: 54px;
  padding: 7px 11px;
  background:
    linear-gradient(120deg, rgba(92, 32, 19, 0.94), rgba(37, 15, 8, 0.94) 58%, rgba(18, 8, 4, 0.94));
  border: 1px solid rgba(255, 211, 116, 0.48);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 199, 0.1),
    inset 0 0 20px rgba(255, 169, 55, 0.035),
    0 4px 13px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(3px);
}

.merchant-title-box img {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.56));
}

.merchant-title {
  overflow: hidden;
  color: #ffdc84;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 2px #000;
  font-size: clamp(19px, 4.6vw, 23px);
  line-height: 1.05;
}

.merchant-subtitle {
  overflow: hidden;
  margin-top: 3px;
  color: #ead19d;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.2;
}

.merchant-date,
.merchant-message,
.merchant-loading,
.merchant-empty {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 12px 10px 38px;
  color: #f4dfb5;
  background:
    linear-gradient(100deg, rgba(79, 29, 16, 0.94), rgba(25, 11, 6, 0.92));
  border: 1px solid rgba(255, 207, 108, 0.36);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 197, 0.07),
    0 3px 10px rgba(0, 0, 0, 0.3);
  font-size: 12px;
}

.merchant-date::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  background: currentColor;
  transform: translateY(-50%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm11 8H6v10h12V10ZM8 12h3v3H8v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm11 8H6v10h12V10ZM8 12h3v3H8v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.merchant-date b {
  color: #ffe18a;
}

.merchant-message {
  padding-left: 12px;
  color: #fff0c7;
  background: linear-gradient(100deg, rgba(105, 47, 21, 0.96), rgba(37, 14, 7, 0.94));
  border-color: rgba(255, 203, 101, 0.48);
}

.merchant-loading,
.merchant-empty {
  padding-left: 12px;
  text-align: center;
}

.merchant-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.merchant-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  color: var(--merchant-text);
  background:
    linear-gradient(110deg, rgba(76, 31, 17, 0.96) 0%, rgba(34, 14, 8, 0.96) 62%, rgba(17, 7, 4, 0.95) 100%);
  border: 1px solid rgba(255, 205, 103, 0.4);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 190, 0.09),
    inset 0 0 22px rgba(255, 165, 45, 0.025),
    0 5px 14px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
}

.merchant-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 207, 105, 0.06), transparent 44%),
    radial-gradient(circle at 90% 10%, rgba(158, 48, 26, 0.12), transparent 32%);
  pointer-events: none;
}

.merchant-card.is-promo {
  background:
    linear-gradient(110deg, rgba(92, 43, 17, 0.97), rgba(46, 18, 8, 0.97) 62%, rgba(23, 9, 4, 0.96));
  border-color: rgba(255, 218, 108, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 205, 0.12),
    0 0 14px rgba(255, 175, 43, 0.13),
    0 5px 15px rgba(0, 0, 0, 0.44);
}

.merchant-card-head {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.merchant-card-icon-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 104px;
  height: 74px;
  padding: 6px;
  overflow: hidden;
  color: #f5cb69;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 220, 137, 0.1), transparent 68%),
    rgba(11, 5, 3, 0.62);
  border: 1px solid rgba(255, 215, 128, 0.34);
  border-radius: 15px;
  box-shadow:
    inset 0 0 14px rgba(255, 167, 46, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.32);
  font-size: 0;
}

.merchant-card-icon-row > span {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: transparent;
}

.merchant-card-icon-row > span::before,
.merchant-card-icon-row > span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.merchant-card-icon-row > span::before {
  left: 1px;
  width: 11px;
  height: 2px;
  background: #f2c966;
  border-radius: 99px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.merchant-card-icon-row > span::after {
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid #f2c966;
  border-right: 2px solid #f2c966;
  transform: translateY(-50%) rotate(45deg);
}

.merchant-resource-icon {
  box-sizing: border-box;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 3px;
  overflow: hidden;
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 242, 205, 0.17), rgba(73, 29, 13, 0.34));
  border: 1px solid rgba(255, 220, 139, 0.36);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 211, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.34);
}

.merchant-resource-icon img {
  display: block;
  object-fit: contain;
  width: 27px;
  height: 27px;
  max-width: 27px;
  max-height: 27px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.merchant-card-title {
  min-width: 0;
}

.merchant-card-title h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #ffe6ad;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
  font-size: clamp(16px, 3.5vw, 19px);
  line-height: 1.12;
}

.merchant-card-title p {
  margin: 5px 0 0;
  color: #d9bd88;
  font-size: 11px;
  line-height: 1.32;
}

.merchant-promo,
.merchant-limit {
  box-sizing: border-box;
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.35;
}

.merchant-promo {
  color: #ffefb3;
  background: linear-gradient(90deg, rgba(157, 91, 20, 0.38), rgba(77, 32, 8, 0.34));
  border: 1px solid rgba(255, 214, 97, 0.34);
}

.merchant-limit {
  color: #ddc79a;
  background: rgba(10, 5, 3, 0.42);
  border: 1px solid rgba(255, 220, 141, 0.16);
}

.merchant-limit b {
  color: #ffe19a;
}

.merchant-exchange-box {
  gap: 9px;
  margin-top: 11px;
}

.merchant-amount-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
}

.merchant-amount-row button,
.merchant-exchange-button {
  min-height: 42px;
  color: #f8ffeb;
  text-shadow: 0 1px 2px rgba(18, 49, 10, 0.9);
  background: linear-gradient(180deg, #78bd48 0%, #3d8128 100%);
  border: 1px solid rgba(226, 255, 194, 0.28);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -8px 13px rgba(25, 72, 14, 0.14),
    0 3px 0 rgba(29, 69, 20, 0.76),
    0 6px 12px rgba(0, 0, 0, 0.24);
}

.merchant-amount-row button {
  font-size: 23px;
}

.merchant-amount-row input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  color: #3b2412;
  background: linear-gradient(180deg, #fff5d9, #e7d2a4);
  border: 1px solid rgba(255, 241, 205, 0.78);
  border-radius: 12px;
  box-shadow:
    inset 0 2px 5px rgba(77, 38, 8, 0.34),
    0 2px 7px rgba(0, 0, 0, 0.25);
}

.merchant-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.merchant-preview > div {
  min-width: 0;
  padding: 9px 10px;
  color: #cbb286;
  background: rgba(10, 5, 3, 0.5);
  border: 1px solid rgba(255, 216, 132, 0.16);
  border-radius: 12px;
  font-size: 10px;
}

.merchant-preview b {
  min-width: 0;
  gap: 5px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #fff0c7;
  font-size: clamp(14px, 3.5vw, 17px);
}

.merchant-preview img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.merchant-warning {
  color: #ffded0;
  background: rgba(112, 28, 17, 0.62);
  border: 1px solid rgba(255, 139, 101, 0.32);
}

.merchant-exchange-button {
  min-height: 45px;
  font-size: 14px;
}

.merchant-confirm-overlay {
  z-index: 40;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 35%, rgba(115, 38, 20, 0.28), transparent 48%),
    rgba(6, 2, 1, 0.82);
  backdrop-filter: blur(3px);
}

.merchant-confirm-modal {
  box-sizing: border-box;
  width: min(100%, 390px);
  max-height: min(88dvh, 650px);
  padding: 17px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--merchant-text);
  background:
    linear-gradient(140deg, rgba(87, 34, 18, 0.99), rgba(27, 11, 6, 0.99) 68%);
  border: 1px solid rgba(255, 214, 125, 0.56);
  border-radius: 21px;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 197, 0.12),
    0 18px 46px rgba(0, 0, 0, 0.68);
}

.merchant-confirm-title {
  color: #ffe092;
  text-shadow: 0 2px 2px #000;
}

.merchant-confirm-subtitle {
  color: #d9bf8d;
}

.merchant-confirm-resource {
  background: rgba(10, 5, 3, 0.52);
  border: 1px solid rgba(255, 216, 132, 0.18);
}

.merchant-confirm-resource b img {
  object-fit: contain;
  width: 25px;
  height: 25px;
}

.merchant-confirm-arrow {
  color: #f2c967;
}

.merchant-confirm-limit {
  color: #ead19d;
  background: rgba(10, 5, 3, 0.48);
  border: 1px solid rgba(255, 216, 132, 0.16);
}

.merchant-confirm-cancel,
.merchant-confirm-buy {
  border: 1px solid rgba(255, 234, 179, 0.2);
}

.merchant-confirm-cancel {
  background: linear-gradient(180deg, #80684e, #493522);
}

.merchant-confirm-buy {
  background: linear-gradient(180deg, #78bd48, #3d8128);
}

@media (min-width: 600px) {
  .merchant-content {
    padding-right: clamp(18px, 4vw, 30px);
    padding-left: clamp(18px, 4vw, 30px);
  }

  .merchant-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .merchant-card {
    padding: 13px;
  }

  .merchant-card-head {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
  }

  .merchant-card-icon-row {
    width: 104px;
  }
}

@media (max-width: 380px) {
  .merchant-content {
    padding-right: 8px;
    padding-left: 8px;
  }

  .merchant-top {
    gap: 6px;
  }

  .merchant-back-button {
    padding: 0 10px;
  }

  .merchant-title-box {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .merchant-title-box img {
    width: 40px;
    height: 40px;
  }

  .merchant-card {
    padding: 10px;
  }

  .merchant-card-head {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 8px;
  }

  .merchant-card-icon-row {
    width: 94px;
    height: 68px;
    padding: 5px;
  }

  .merchant-resource-icon {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }

  .merchant-resource-icon img {
    width: 25px;
    height: 25px;
    max-width: 25px;
    max-height: 25px;
  }

  .merchant-card-title h3 {
    font-size: 15px;
  }

  .merchant-card-title p {
    font-size: 10px;
  }

  .merchant-preview > div {
    padding: 8px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .merchant-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 221, 139, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 190, 0.11),
      0 8px 19px rgba(0, 0, 0, 0.5);
  }

  .merchant-back-button:hover,
  .merchant-amount-row button:not(:disabled):hover,
  .merchant-exchange-button:not(:disabled):hover {
    filter: brightness(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .merchant-card,
  .merchant-back-button,
  .merchant-amount-row button,
  .merchant-exchange-button {
    transition: none;
  }
}