/* 遠征商会の商品分類。素のHTML/CSSのまま、選択中の分類と商品列を読み分ける。 */
.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-rate { grid-column:1/-1; margin:2px 0 4px; font-size:13px; }
.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; }
@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; }

.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);
}