/* 遠征商会の商品分類。素のHTML/CSSのまま、選択中の分類と商品列を読み分ける。 */
.merchant-feature-entries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0; }
.merchant-feature-entries button { display:flex; flex-direction:column; gap:7px; text-align:left; padding:14px 12px; min-width:0; background:linear-gradient(145deg,#58472b55,var(--bg-sunken)); border-color:#ad8b4966; }
.merchant-feature-entries small { color:var(--text-dim); font-size:12px; }
.merchant-feature-entries strong { font-size:16px; line-height:1.5; }
.merchant-feature-entries span { color:#efd099; font-size:13px; }
.merchant-selection > p { margin:8px 0; }
.merchant-selection { flex-wrap:wrap; }
.merchant-selection > strong,.merchant-selection > p,.merchant-selection > .btn-block { flex-basis:100%; }
.merchant-topup-guide { padding:15px; border:1px solid var(--normal-line); border-radius:var(--radius); background:var(--bg-sunken); }
.merchant-topup-guide h2 { margin:0 0 10px; font-size:18px; }
.merchant-topup-option { padding:13px 0; border-top:1px solid var(--line-soft); }
.merchant-topup-option > small,.merchant-topup-option > strong { display:block; }
.merchant-topup-option > strong { margin-top:5px; font-size:25px; color:#efd099; }
.merchant-topup-option p { margin:8px 0; line-height:1.65; }
.merchant-fitting-switch { display:flex; justify-content:center; gap:8px; margin:15px 0; }
.merchant-fitting-switch [aria-pressed="true"] { border-color:var(--accent); background:var(--normal-bg); }
.merchant-fitting-figure { display:flex; justify-content:center; min-height:316px; padding:12px; border-radius:10px; background:radial-gradient(ellipse at bottom,#83704d45,transparent 72%); }
.merchant-fitting-label { text-align:center; }
.merchant-preview-button { margin-top:14px; }
.merchant-receipt-value { font-weight:700; font-size:20px; line-height:1.7; }
.departure-commerce { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 14px; }
@media(max-width:500px) { .merchant-feature-entries { grid-template-columns:1fr; } .merchant-feature-entries button { display:grid; grid-template-columns:1fr auto; gap:3px 10px; } .merchant-feature-entries small { grid-column:1/-1; } }

.commerce-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0;
}

.commerce-tabs > button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 5px;
  font-size: 14px;
  color: var(--text-dim);
  background: var(--bg-sunken);
  border-color: var(--line-soft);
}

.commerce-tabs > button.is-selected {
  color: var(--text);
  font-weight: 700;
  background: var(--normal-bg);
  border-color: var(--normal-line);
  box-shadow: inset 0 -2px 0 var(--normal-fg);
}

.commerce-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.commerce-products > .card { margin-bottom: 0; }

/* 出発前の携行薬と部隊。数を選ぶ場所と、出発する部隊を同じ縦線に揃える。 */
.departure-loadout {
  margin: 12px 0 16px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}

.departure-loadout-summary {
  margin: 5px 0 9px;
  color: var(--text-dim);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.departure-potions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.departure-potion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-raise);
}

.departure-potion-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.departure-potion-copy small {
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.departure-potion-count {
  box-sizing: border-box;
  width: 68px;
  min-height: 42px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-sunken);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.departure-preset { min-width: 0; }

/* 袋の整理候補。封印品でも同じ枠を使い、中身を示すアイコンや名称は置かない。 */
.bag-organizer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.bag-organizer-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  color: var(--text);
  background: var(--bg-raise);
  border-color: var(--line-soft);
}

.bag-organizer-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bag-organizer-copy small { color: var(--text-faint); }
.bag-organizer-copy .stat-bonuses { margin-top: 3px; }
.expedition-bag-head .meta.danger { color: var(--danger-fg); }

.arena-practice {
  padding: 12px;
  border: 1px solid var(--normal-line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}

.arena-practice > button { margin-top: 9px; }

@media (max-width: 430px) {
  .commerce-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .departure-potion-row {
    align-items: stretch;
    flex-direction: column;
  }

  .departure-potion-count { width: 100%; }
}

@media (min-width: 640px) {
  .commerce-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .departure-potions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .departure-potion-row {
    align-items: stretch;
    flex-direction: column;
  }

  .departure-potion-count { width: 100%; }
}


/* 遠征商会：承認済みの王冠金貨と、落ち着いた金色の看板。 */
.merchant-view { max-width:1080px; margin:0 auto; }
.merchant-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid #ae987064; }
.merchant-heading h1 { margin:0 0 4px; font-size:28px; letter-spacing:.08em; }
.merchant-heading h1 .ui-icon { width:42px; height:42px; }
.merchant-heading p { margin:0; color:var(--text-dim); font-size:13px; }
.merchant-topup { background:#292d2b; border:1px solid #a38f6570; color:#e2c990; min-height:42px; padding:8px 12px; }
.merchant-balance { display:flex; align-items:center; padding:13px 0 5px; color:#eddfbb; font-variant-numeric:tabular-nums; }
.merchant-selection { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:12px 0; padding:12px; background:#ffffff05; border:1px solid var(--line-soft); }
.merchant-return p { margin:0 0 8px; }
.merchant-view .commerce-tabs { gap:4px; padding-bottom:8px; border-bottom:1px solid #46515a; }
.merchant-view .commerce-tabs>button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; font-size:14px; box-shadow:none; }
.merchant-view .commerce-tabs>button.is-selected { color:#edcd87; border-bottom-color:#c9a76b; background:#ffffff04; }
.merchant-product { display:flex; flex-direction:column; gap:10px; padding:20px; background:linear-gradient(125deg,#27313b,#202933); border:1px solid #ae987040; }
.merchant-product .card-head { align-items:center; flex-wrap:wrap; gap:8px; margin:0; }
.merchant-product .card-head .name { flex:1; min-width:120px; }
.merchant-product>.muted { font-size:14px; line-height:1.8; }
.merchant-price { display:inline-flex; flex-shrink:0; align-items:center; font-size:21px; font-weight:600; color:#e4c98d; font-variant-numeric:tabular-nums; }
.merchant-price .ui-icon { width:30px; height:30px; }
.merchant-product>button.btn-block { margin-top:auto; min-height:44px; background:#bba06b; color:#222626; border:1px solid #ddc58f; font-weight:600; }
.merchant-product>button.btn-block:disabled { background:#30363a; color:#aaa; border-color:#566065; }
.merchant-coin-amount { padding:12px 0; color:#f0dfb3; font-size:24px; font-weight:600; }
.merchant-coin-amount .ui-icon { width:56px; height:56px; }
.merchant-confirm-price { display:flex; justify-content:center; margin:15px 0; color:#edcf88; font-size:26px; }
.merchant-confirm-price .ui-icon { width:44px; height:44px; }
img[src$="crown_coin.svg"] { image-rendering:auto!important; }
.hud-crown-wallet { display:inline-flex; align-items:center; flex-shrink:0; gap:5px; min-height:32px; padding:3px 7px; color:#eddfbb; background:#2a2c27; border:1px solid #83765880; box-shadow:none; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hud-crown-wallet>.icon-text { gap:3px; }
.hud-crown-wallet .ui-icon { width:25px; height:25px; }
body:not(.is-gate) .nav button.is-merchant { display:inline-flex; align-items:center; gap:5px; }
body:not(.is-gate) .nav button.is-merchant .ico { display:inline-flex; }
body:not(.is-gate) .nav button.is-merchant .nav-ico { width:21px; height:21px; }
@media(max-width:700px) {
 body:not(.is-gate) .hud { flex:0 0 auto; height:auto; min-height:72px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; gap:4px 8px; }
 .hud .hud-crest { flex:1 0 100%; }
 .hud .hud-wallet { margin-left:0; max-width:none; font-size:12px; }
 .hud .hud-menu { margin-left:auto; }
 .hud-crown-wallet { font-size:12px; }
 .merchant-heading { gap:12px; }
 .merchant-heading h1 { font-size:24px; }
 .merchant-heading h1 .ui-icon { width:34px; height:34px; }
 .merchant-view .commerce-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .merchant-product { padding:15px; }
 body:not(.is-gate) .nav { overflow-x:auto; }
}

.merchant-refund { margin:12px 0; line-height:1.8; }

.hud .hud-wallet { display:inline-flex; align-items:center; gap:4px; }
.hud-commander-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-gold-amount { flex-shrink:0; white-space:nowrap; }
.hud-actions { display:flex; align-items:center; flex:0 0 auto; gap:10px; }
body:not(.is-gate) .hud { padding-right:10px; }
body:not(.is-gate) .hud-actions .audio-toggle { position:static; flex:0 0 36px; }
@media(max-width:700px) {
 .hud-actions { margin-left:auto; }
 .hud .hud-actions .hud-menu { margin-left:0; }
}
@media(max-width:700px) { .hud-commander-name { max-width:6em; } }

.merchant-product.merchant-featured { border-color:#d5b975; background:linear-gradient(110deg,#59472c42,transparent); }
.merchant-offer-note { color:#efd099; font-size:14px; margin:10px 0 0; }
.merchant-expansion-change { margin:0; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
.merchant-expansion-maximum { margin:0; color:var(--text-dim); font-size:14px; }
.merchant-expansion-prices { border-top:1px solid var(--line-soft); padding-top:10px; }
.merchant-expansion-prices summary { cursor:pointer; color:var(--text-dim); font-size:14px; padding:5px 0; }
.merchant-expansion-prices table { width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; font-variant-numeric:tabular-nums; }
.merchant-expansion-prices th,.merchant-expansion-prices td { padding:7px 4px; text-align:right; border-bottom:1px solid var(--line-soft); }
.merchant-expansion-prices th:first-child { text-align:left; }
.merchant-expansion-prices tbody th { font-weight:400; }

.bag-organizer-choice[aria-pressed="true"] {
  border-color: var(--accent, #c5a65f);
  background: rgba(197, 166, 95, .16);
}
.bag-organizer-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  background: var(--bg-panel, #27313d);
}

.merchant-set-value { color: #d9be85; font-weight: 600; line-height: 1.7; margin: 12px 0; }
.merchant-vip-benefits { margin: 12px 0; padding: 12px; border: 1px solid rgba(197, 166, 95, .35); border-radius: 6px; background: rgba(197, 166, 95, .06); line-height: 1.7; }
.merchant-vip-benefits > strong { color: #d9be85; }
.merchant-vip-benefits > p { margin: 6px 0 0; }

.stamina-recovery-comparison { margin-top:12px; border-top:1px solid #73816f55; padding-top:8px; }
.stamina-recovery-comparison summary { cursor:pointer; min-height:36px; padding:7px 0; color:#d6dfce; font-size:14px; }
.stamina-comparison-body table { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.stamina-comparison-body th,.stamina-comparison-body td { padding:8px 4px; border-bottom:1px solid #73816f44; text-align:left; }
.stamina-comparison-body thead th { color:#b6c0b0; font-weight:normal; }
.stamina-comparison-body tbody th { width:40%; font-weight:normal; }
.stamina-comparison-body td { white-space:nowrap; }
.stamina-comparison-title { margin:14px 0 6px; font-size:13px; color:#d6dfce; }
.stamina-comparison-example { display:flex; justify-content:space-between; gap:8px; margin:4px 0; font-size:12px; }
.stamina-comparison-body .note { font-size:12px; line-height:1.6; }

/* 金貨はスマホ2列、売り場の幅が十分にあるPCでは4列。 */
.merchant-view { container-type: inline-size; }
.merchant-view .commerce-products.currency-pack-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.currency-pack {
  min-width: 0; margin: 0; padding: 13px 11px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(125deg, #27313b, #202933);
  border: 1px solid #ae987040;
}
.currency-pack .pack-amount {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  color: #f0dfb3; font-size: clamp(18px, 5.9vw, 23px); font-weight: 700; white-space: nowrap;
}
.currency-pack .pack-amount .ui-icon { width: 24px; height: 24px; }
.currency-pack .pack-bonus { min-height: 20px; text-align: center; font-size: 11px; color: #c8b27e; white-space: nowrap; }
.currency-pack .pack-buy {
  display: block; width: 100%; padding: 9px 4px; min-height: 42px; margin: auto 0 0;
  border: 1px solid #ddc58f; background: #bba06b; color: #222626;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.currency-pack .pack-buy:disabled { background: #30363a; color: #aaa; border-color: #566065; }
@container (min-width: 760px) {
  .merchant-view .commerce-products.currency-pack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}