/*
 * backpack-pop.css — no-scroll ポップ版バックパック
 * (2026-09-19, docs/no-scroll-2026-09-19.md §設計2)。
 *
 * style.css の #backpack-*/.backpack-* ルール(旧・紺グラス調、グリッド下に
 * 詳細帯というレイアウト)は編集せず、この後読み込まれるファイルとして
 * 同じセレクタを上書きする(index.html の <link> 順、market-pop.css と同じ
 * 「スキン+レイアウト上書き」方針)。色/フォント/枠線は src/pop-tokens.css
 * の --pop-* トークンのみを使う。
 *
 * レイアウト方針(§設計2): グリッド+詳細を横並び2列(#backpack-body)にし、
 * 魚は種類ごとに1枠(市場の売るタブと同じ考え方 — variants はここでは
 * チップとして詳細側に出る、src/backpack.js 側)。グループ区切りは全幅の
 * 見出し行を挟まず、各セルの角に小さなラベル(content: attr(data-group))
 * + 色アクセントで表現する(§設計2「グループ区切りは細いラベルか余白で、
 * タイトなら行を増やさない」)。
 *
 * セルサイズは --bp-cell(このファイルが breakpoint ごとに既定値を出す)。
 * 最悪ケースの所持品でもまだ入りきらない時のために、src/backpack.js の
 * fitGrid() が --bp-cell-override をセットして縮める(#backpack-grid は
 * overflow:hidden — 市場以外はスクロールしない、という全体方針どおり)。
 */

#backpack-modal {
  --bp-ink:    var(--pop-ink);
  --bp-cream:  var(--pop-cream);
  --bp-paper:  var(--pop-paper);
  --bp-panel:  #e4f7f5;
  --bp-yellow: var(--pop-yellow);
  --bp-coral:  var(--pop-coral);
  --bp-turq:   var(--pop-turq);
  --bp-lime:   var(--pop-lime);
  --bp-muted:  var(--pop-muted);
  --bp-brown:  #a34a00;
  --bp-warm:   #ff9f5e;

  /* -- cell size: desktop default 64px (floor 56, see backpack.js's
        fitGrid()); touch/narrow default 52px (floor 48) below. -- */
  --bp-cell: 64px;
  --bp-gap: 8px;
  --bp-detail-w: 220px;

  background: rgba(10, 60, 80, 0.28);
}

#backpack-panel {
  width: min(720px, 92vw, calc(100% - var(--pop-modal-inset)));
  max-width: 720px;
  max-height: var(--pop-modal-max-h);
  background: var(--bp-cream);
  color: var(--bp-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--bp-ink);
  border-radius: var(--pop-radius-lg);
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
  backdrop-filter: none;
}
body.touch #backpack-panel { backdrop-filter: none; max-height: 88vh; }

#backpack-header {
  background: var(--bp-yellow);
  border-bottom: var(--pop-border) solid var(--bp-ink);
}
#backpack-title { font-family: var(--pop-font-display); font-weight: 800; font-size: var(--pop-fs-title); color: var(--bp-ink); }
#backpack-wallet {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--bp-cream);
  border: var(--pop-border-thin) solid var(--bp-ink);
  box-shadow: 0 2px 0 var(--bp-ink);
  font-family: var(--pop-font-display);
  font-weight: 800;
  color: var(--bp-brown);
}
#backpack-close {
  font-family: var(--pop-font-display);
  font-weight: 800;
  background: var(--bp-coral);
  color: var(--bp-ink);
  border: var(--pop-border-thin) solid var(--bp-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 4px 0 var(--bp-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#backpack-close:hover { background: var(--bp-coral); filter: brightness(1.05); }
#backpack-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bp-ink); }
body.touch #backpack-close { min-height: 44px; }

/* -- body: grid (left, flexible) + detail (right, fixed column) --
   §設計2: 「詳細は右の列(デスクトップ)/下の1行(横持ち)」——ここでは横持ち
   スマホ(844×390)でも横幅に余裕があるので右列のまま縮小して使う(実測で
   下段バーへ切り替える必要が出なかったため; §設計2の「または」の選択)。 */
#backpack-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

#backpack-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  --bp-cell-eff: var(--bp-cell-override, var(--bp-cell));
  grid-template-columns: repeat(auto-fill, minmax(var(--bp-cell-eff), 1fr));
  grid-auto-rows: var(--bp-cell-eff);
  align-content: start;
  justify-content: start;
  gap: var(--bp-gap);
  padding: var(--pop-space-3);
  background: var(--bp-cream);
  overflow: hidden; /* §no-scroll: fitGrid() shrinks cells instead of scrolling */
}

.backpack-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 3px;
  background: var(--bp-paper);
  border: var(--pop-border-thin) solid var(--bp-ink);
  border-radius: var(--pop-radius-sm);
  border-top-width: 3px;
  cursor: pointer;
  text-align: center;
  color: var(--bp-ink);
  box-shadow: 0 3px 0 var(--bp-ink);
  overflow: hidden;
}
.backpack-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--bp-ink); }
.backpack-cell.selected {
  background: #fff8e2;
  border-color: var(--bp-coral);
  border-top-color: var(--bp-coral);
  box-shadow: 0 4px 0 var(--bp-coral);
}
.backpack-cell.disabled { opacity: 0.45; pointer-events: none; }
.backpack-cell.equipped { border-color: var(--bp-warm); }
.backpack-cell.equipped::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bp-warm);
  border: 1px solid var(--bp-ink);
}
/* §設計2: group separation — a thin colour accent on every cell's top edge
   (border-top-width:3px above) + a tiny corner label on the first cell of
   each group, instead of a full extra grid row. */
.backpack-cell[data-group="道具"] { border-top-color: var(--bp-turq); }
.backpack-cell[data-group="ブロック"] { border-top-color: var(--bp-lime); }
.backpack-cell[data-group="魚"] { border-top-color: var(--bp-coral); }
.backpack-cell[data-group="回復"] { border-top-color: var(--bp-warm); }
.backpack-cell[data-group="特殊"] { border-top-color: var(--bp-muted); }
.backpack-cell[data-group="弾"] { border-top-color: rgba(35, 32, 28, 0.35); }
.backpack-cell.group-start::before {
  content: attr(data-group);
  position: absolute;
  top: 1px;
  left: 2px;
  font-family: var(--pop-font-body);
  font-size: 6.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bp-muted);
  pointer-events: none;
}

.backpack-cell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--bp-ink);
}
.backpack-cell-icon svg { width: 16px; height: 16px; }
.backpack-cell-name {
  width: 100%;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backpack-cell-count {
  font-size: 8px;
  font-weight: 800;
  color: var(--bp-brown);
  font-variant-numeric: tabular-nums;
}
/* §no-scroll §2: per-bucket 判子(焼/完/大/…)used to show on every fish
   cell — now that fish are one cell per species, that stamp summary lives
   on the detail-side variant chips (backpack-variant-chip) instead, so a
   bare species cell no longer renders .backpack-cell-stamps at all. Kept
   (unused by fish now) only for tool/block cells that never set `stamps`,
   so this rule is inert but harmless if some future kind reuses it. */
.backpack-cell-stamps {
  font-size: 7px;
  font-weight: 700;
  color: var(--bp-turq);
  letter-spacing: 1px;
}
.backpack-empty {
  grid-column: 1 / -1;
  align-self: center;
  font-size: 12px;
  color: var(--bp-muted);
  padding: 20px 4px;
  text-align: center;
}
/* the old full-row header is no longer created by backpack.js — hide it
   defensively in case anything stale still renders one. */
.backpack-group-header { display: none; }

/* -- right: detail column -- */
#backpack-detail {
  flex: 0 0 var(--bp-detail-w);
  width: var(--bp-detail-w);
  max-width: var(--bp-detail-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pop-space-3);
  background: var(--bp-panel);
  border-left: var(--pop-border) solid var(--bp-ink);
  overflow: hidden; /* §no-scroll: content is kept compact instead of scrolling */
}
.backpack-detail-empty {
  margin: auto;
  font-size: 11.5px;
  color: var(--bp-muted);
  text-align: center;
}
.backpack-detail-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.backpack-detail-name { font-family: var(--pop-font-display); font-size: 13px; font-weight: 800; color: var(--bp-ink); }
.backpack-detail-count { font-size: 10.5px; color: var(--bp-muted); }
.backpack-detail-stats { font-size: 10.5px; color: var(--bp-brown); font-weight: 700; }

/* variant chips (fish species detail — 素/焼き/半焼け/焼き過ぎ/色違い/…) */
.backpack-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.backpack-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-family: var(--pop-font-body);
  font-weight: 700;
  font-size: 10px;
  background: var(--bp-paper);
  color: var(--bp-ink);
  border: var(--pop-border-thin) solid var(--bp-ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--bp-ink);
  cursor: pointer;
  min-height: 26px;
}
.backpack-variant-chip:hover { filter: brightness(1.05); }
.backpack-variant-chip.selected {
  background: var(--bp-yellow);
  border-color: var(--bp-ink);
  box-shadow: 0 2px 0 var(--bp-ink), 0 0 0 2px rgba(255, 111, 94, 0.5);
}
.backpack-variant-chip-count { color: var(--bp-brown); font-variant-numeric: tabular-nums; }
/* §fix(review item4): the chip's own visual box stays compact (many chips
   have to fit one wrapping row in the detail panel) — a ::before hit box
   widens the actual tap target to >=44px without growing the chip itself.
   Pseudo-elements aren't separate DOM nodes, so a tap anywhere inside this
   enlarged box still resolves to the chip (the nearest real element). */
body.touch .backpack-variant-chip { min-height: 32px; padding: 5px 9px; font-size: 11px; position: relative; }
body.touch .backpack-variant-chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
}

.backpack-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.backpack-action-btn {
  flex: 1 1 auto;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: 11px;
  padding: 6px 10px;
  background: var(--bp-paper);
  color: var(--bp-ink);
  border: var(--pop-border-thin) solid var(--bp-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 3px 0 var(--bp-ink);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.backpack-action-btn:hover { filter: brightness(1.05); }
.backpack-action-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bp-ink); }
.backpack-action-btn.primary { background: var(--bp-yellow); }
.backpack-action-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
body.touch .backpack-action-btn, body.touch #backpack-close { min-height: 44px; }

/* -- 「ポケットへ」: inline 5-slot picker -- */
.backpack-pocket-picker {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.backpack-pocket-picker-slot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: var(--pop-radius-sm);
  border: var(--pop-border-thin) solid var(--bp-ink);
  background: var(--bp-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bp-ink);
  font-size: 10px;
  font-weight: 800;
}
.backpack-pocket-picker-slot svg { width: 14px; height: 14px; }
.backpack-pocket-picker-slot .pp-clear {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bp-coral);
  border: 1px solid var(--bp-ink);
  color: var(--bp-ink);
  font-size: 8px;
  line-height: 12px;
  text-align: center;
}
/* §fix(review item4): keep the slot visually small (5 of these have to sit
   in one row without wrapping past the detail panel's width) but give it a
   >=44px tap target the same way as the variant chip above. */
body.touch .backpack-pocket-picker-slot { width: 32px; height: 32px; position: relative; }
body.touch .backpack-pocket-picker-slot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
/* §fix(review item4): the ×-clear badge is 13px — much too small to tap
   directly. Its own ::before (not the slot's, so it stays the topmost hit
   target and still wins over the slot's click-to-assign handler) gives it a
   44px box centered on the badge. `.pp-clear` is already `position:
   absolute` (base rule above) so it's already a positioning context for
   this — no need to touch its own position. */
body.touch .backpack-pocket-picker-slot .pp-clear::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* -- 「渡す」: quantity stepper -- */
.backpack-give-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.backpack-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--pop-radius-sm);
  border: var(--pop-border-thin) solid var(--bp-ink);
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--bp-ink);
}
.backpack-qty-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.backpack-qty-value {
  min-width: 18px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* §fix(review item4): same hit-box technique — the stepper's +/- buttons
   stay 32px visually (they sit next to the qty value in a tight inline row)
   but gain a >=44px tap target. */
body.touch .backpack-qty-btn { width: 32px; height: 32px; position: relative; }
body.touch .backpack-qty-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

.backpack-cell:focus-visible,
.backpack-action-btn:focus-visible,
.backpack-variant-chip:focus-visible,
#backpack-close:focus-visible {
  outline: 3px solid var(--bp-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #backpack-modal *, #backpack-modal *::before, #backpack-modal *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * touch / narrow profile — same two-condition gate as pop-tokens.css/
 * market-pop.css: a narrow WINDOW (any width<=700, touch or not) and an
 * actual touch device in landscape (body.touch + short height). Duplicated
 * rule bodies (can't express "A or (B and C)" as one media query) — same
 * convention market-pop.css's mk-variant rules use.
 * ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  #backpack-modal {
    --bp-cell: 52px;
    --bp-gap: 6px;
    --bp-detail-w: 148px;
  }
  #backpack-panel { width: min(720px, 94vw, calc(100% - var(--pop-modal-inset))); max-height: min(88vh, calc(100vh - var(--pop-modal-inset))); }
  #backpack-header { padding: 0 12px; gap: 8px; height: 40px; }
  #backpack-title { font-size: 14px; }
  #backpack-wallet { font-size: 11px; padding: 3px 8px; }
  #backpack-close { font-size: 11px; padding: 4px 10px; }
  #backpack-grid { padding: 6px; }
  .backpack-cell-icon { width: 18px; height: 18px; }
  .backpack-cell-icon svg { width: 13px; height: 13px; }
  .backpack-cell-name { font-size: 7.5px; }
  .backpack-cell-count { font-size: 7px; }
  #backpack-detail { padding: 6px; gap: 4px; }
  .backpack-detail-name { font-size: 11.5px; }
  .backpack-detail-count, .backpack-detail-stats { font-size: 9px; }
  .backpack-action-btn { font-size: 10px; padding: 5px 6px; }
}
body.touch {
  @media (max-height: 480px) {
    #backpack-modal {
      --bp-cell: 52px;
      --bp-gap: 6px;
      --bp-detail-w: 148px;
    }
    #backpack-panel { width: min(720px, 94vw, calc(100% - var(--pop-modal-inset))); max-height: min(88vh, calc(100vh - var(--pop-modal-inset))); }
    #backpack-header { padding: 0 12px; gap: 8px; height: 40px; }
    #backpack-title { font-size: 14px; }
    #backpack-wallet { font-size: 11px; padding: 3px 8px; }
    #backpack-close { font-size: 11px; padding: 4px 10px; }
    #backpack-grid { padding: 6px; }
    .backpack-cell-icon { width: 18px; height: 18px; }
    .backpack-cell-icon svg { width: 13px; height: 13px; }
    .backpack-cell-name { font-size: 7.5px; }
    .backpack-cell-count { font-size: 7px; }
    #backpack-detail { padding: 6px; gap: 4px; }
    .backpack-detail-name { font-size: 11.5px; }
    .backpack-detail-count, .backpack-detail-stats { font-size: 9px; }
    .backpack-action-btn { font-size: 10px; padding: 5px 6px; }
  }
}