/* ══════════════════════════════════════════════════════════════════════
   lootsheet.css — 拾得道具／道具欄／商店／懸賞榜（ver -380 由 style.css 抽出）
   ──────────────────────────────────────────────────────────────────────
   ⚠ 為什麼抽出來：這一套視窗**兩個頁面都要用** —— 主遊戲（index.html）與
     飛行頁（flight/index.html，道具欄的正式入口在那裡，Ray 指定）。
     `style.css` 是主遊戲專用的（它連 html/body/#app 的版面都管），整份掛到飛行頁
     會把那一頁的版面洗掉；所以只把這一段獨立出來，兩邊共用同一份（鐵律 7）。
   ⚠ **由 `modules/loot.js` 自己掛上來**（沒掛過才掛）：任何頁面只要 import 它就有樣式，
     不必逐頁記得加 <link>（鐵律 8）。
   ⚠ 調色盤**掛在 #lootSheet 自己身上**：飛行頁沒有主遊戲那組 :root 變數
     （它只定義了 --gold，而且色碼不同 #c9a227）。這裡的值與 style.css 的 :root 一致，
     **改一邊要改另一邊**。
   ⚠ 這一份的選擇器全部以 `#lootSheet` 開頭 —— 不會影響宿主頁面的任何東西。
   ══════════════════════════════════════════════════════════════════════ */
#lootSheet{
  /* ⚠ **這一份用到的變數要列全**：漏一個，在沒有那組 :root 的宿主頁面上就會變成
     「該有顏色的地方是透明的」。實測漏了 `--panel`，飛行頁的面板整個透出舵輪。
     檢查法：`grep -o 'var(--[a-z-]*)' css/lootsheet.css | sort -u` 對照這一行。
     ⚠ `--kerb-clip-top` 不在此列是刻意的：它由 story.js 執行期 setProperty 發佈到
     documentElement（單子的下界＝楣的上緣，§6.5.4）；飛行頁沒跑 story.js，
     吃的是 var() 裡的 56vh fallback —— 那正是為它準備的。 */
  --ink:#ece6d8; --gold:#d4a94a; --gold-dim:#8a6d2e; --blood:#8a1f1f; --holy:#6fb3d4;
  --panel:#120f1a; --danger:#c0392b;   /* ver -701：改裝頁「素材不足」的紅（值同 style.css 的 :root） */
  --scroll-thumb:rgba(212,169,74,.28); --scroll-thumb-hi:rgba(212,169,74,.52);   /* ver -978：捲軸（＝--gold 的 28%／52%） */
  scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;         /* Firefox（會繼承給裡面的清單） */
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,"Songti TC",serif;
  color:var(--ink);-webkit-tap-highlight-color:transparent;
}
/* ══⚠⚠ 捲軸（ver -978，Ray：「現在極大極醜極不符 UI 整體性」）══
   ⚠⚠ `style.css` 有一份**全域**的同樣規則 —— 這一份是給**飛行頁**用的
   （那一頁不載 style.css，道具欄的正式入口卻在那裡）。**改一邊要改另一邊**
   （鐵律 7 的但書，兩邊註解已互指）。
   ⚠ 選擇器照這一份的規約以 `#lootSheet` 開頭：不去動宿主頁面的任何捲軸。 */
#lootSheet ::-webkit-scrollbar{width:6px;height:6px;}
#lootSheet ::-webkit-scrollbar-track{background:transparent;}
#lootSheet ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px;}
#lootSheet ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hi);}
#lootSheet ::-webkit-scrollbar-corner{background:transparent;}
#lootSheet *{box-sizing:border-box;}
#lootSheet button{font-family:inherit;cursor:pointer;}

  /* ── 拾得道具視窗（ver -358）──────────────────────────────────────
     ⚠ z-9600：要蓋過結算頁（banner 30／corner-btn 37）與劇情層（8300），
       但低於確認框（9500）之外的東西……**不對，確認框是 9500** ——
       這一頁是「拿到東西」的通知，蓋過它才對（玩家按了確認才會繼續）。 */
  #lootSheet{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;
    justify-content:center;background:rgba(4,3,7,.72);backdrop-filter:blur(2px);
    opacity:0;transition:opacity .22s ease;pointer-events:none;}
  #lootSheet.on{opacity:1;pointer-events:auto;}
  /* ══⚠⚠ 閃頂排（ver -1812，Ray：「商店中的選單還是被動態島那一排擋住無法點擊」）══
     置中的面板比畫面高時，上緣會被推到狀態列底下而且捲不回來。容器上下讓出安全區＋餘裕，
     面板最多到剩下的高度、超過就在面板裡捲。算法同 style.css 的 `--tap-top`（飛行頁沒有那組 :root，
     所以這裡直接寫 env()；**改一邊要改另一邊**）。 */
  #lootSheet{padding:calc(env(safe-area-inset-top,0px) + 16px) 0 calc(env(safe-area-inset-bottom,0px) + 12px);
    box-sizing:border-box;}
  #lootSheet:not(.dock-left) .loot-panel{max-height:100%;overflow-y:auto;}
  #lootSheet .loot-panel{width:min(92%,360px);background:var(--panel);
    border:1px solid var(--gold-dim);border-radius:12px;padding:14px 14px 12px;
    box-shadow:0 8px 30px rgba(0,0,0,.6);transform:translateY(8px);
    transition:transform .22s cubic-bezier(.16,1,.3,1);}
  #lootSheet.on .loot-panel{transform:translateY(0);}
  #lootSheet .loot-title{font-size:14px;letter-spacing:4px;color:var(--gold);
    text-align:center;margin-bottom:10px;}
  #lootSheet .loot-list{display:flex;flex-direction:column;gap:8px;
    max-height:52vh;overflow-y:auto;}
  #lootSheet .loot-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
    align-items:baseline;padding:8px 10px;border:1px solid transparent;
    background:rgba(255,255,255,.03);border-radius:8px;}
  #lootSheet .loot-name{font-size:13px;color:var(--ink);}
  #lootSheet .loot-n{font-size:13px;color:var(--gold);letter-spacing:1px;}
  /* 說明佔整列（grid 第二行跨兩欄）：名稱與數量對齊，敘述在下面小字。 */
  /* ⚠ `pre-line`（ver -380）：武器的說明是**多行**的（規格一行一條，由
     `config.weaponDescText` 產生）。不留換行的話整段會流成一行，讀不出哪一項是哪一項。 */
  #lootSheet .loot-desc{grid-column:1 / -1;font-size:11px;line-height:1.6;
    color:var(--gold-dim);white-space:pre-line;}
  /* 道具欄：分類標題（空的分類也留一條「—」，讓玩家看得出這一類存在但還沒有東西）。 */
  #lootSheet.bag .loot-list{max-height:60vh;}
  #lootSheet .bag-cat{font-size:11px;letter-spacing:3px;color:var(--gold-dim);
    margin:6px 0 2px;padding-left:2px;}
  #lootSheet .bag-cat:first-child{margin-top:0;}
  #lootSheet .bag-empty{font-size:11px;color:var(--gold-dim);opacity:.6;padding:2px 10px 6px;}
  /* 金錢：拾得視窗裡是一列（金色），道具欄裡是標題下的餘額條。 */
  #lootSheet .loot-money .loot-name,#lootSheet .loot-money .loot-n{color:var(--gold);}
  /* ══ 「這一場拿到什麼」那一列（ver -439）══════════════════════════════════
     金錢與 EXP **並排在同一列**（Ray 指定）。⚠ 版面覆寫掉 `.loot-row` 的兩欄 grid：
     那一份是「名稱在左、數量在右」，而這一列是**兩組**名稱＋數量，要靠 flex 平分。
     ⚠ 只有一種收穫（打靶只有 EXP、或只有錢）時就只出一格，靠 `flex:1` 自己撐滿。
     ⚠ 兩組都用金色：它們是獎勵不是道具，與底下的道具列要一眼分得開。 */
  #lootSheet .loot-gain{display:flex;gap:10px;}
  #lootSheet .loot-gain .lg-item{flex:1 1 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:8px;min-width:0;}
  #lootSheet .loot-gain .loot-name,#lootSheet .loot-gain .loot-n{color:var(--gold);}
  #lootSheet .bag-money{display:flex;justify-content:flex-end;align-items:baseline;gap:2px;
    font-size:11px;letter-spacing:2px;color:var(--gold-dim);margin:-4px 2px 8px;}
  #lootSheet .bag-money b{font-size:15px;color:var(--gold);letter-spacing:1px;}
  /* 列要 relative：使用鈕（.bag-use）絕對定位在該列右下。 */
  #lootSheet .loot-row{position:relative;}
  /* 使用鈕（ver -497，整備頁的回復道具）：貼在該列右下。 */
  .bag-use{position:absolute;right:8px;bottom:6px;padding:3px 10px;
    font-family:inherit;font-size:11px;letter-spacing:2px;color:var(--gold);
    background:rgba(10,8,14,.72);border:1px solid var(--gold-dim);border-radius:10px;}
  /* ⚠ 敘述要讓開賣鈕的位置：不留白的話長敘述會**跑到鈕底下**（實測第一列就撞到）。
     在道具欄一律留，不用 `:has()` —— 沒有鈕的那幾列多留一點白，比對齊不一致好讀。 */
  #lootSheet.bag .loot-desc{padding-right:76px;}
  /* 懸賞榜（ver -375）：沿用道具欄的外觀，只差**沒有賣鈕** —— 所以把那塊讓位收回來，
     不然每一列右下都空一塊 76px 的白。金額改用血色，讀起來像懸賞不像售價。 */
  #lootSheet.bounty .loot-desc{padding-right:0;}
  #lootSheet.bounty .loot-n{color:#e7b4b4;}
  #lootSheet.bounty .bounty-row{border-color:rgba(140,60,60,.35);}
  #lootSheet .loot-ok{display:block;width:100%;margin-top:12px;padding:10px 0;
    font-family:inherit;font-size:13px;letter-spacing:3px;color:var(--gold);
    background:rgba(10,8,14,.7);border:1px solid var(--gold-dim);border-radius:8px;}
  #lootSheet .loot-ok:active{transform:scale(.98);}

  /* ── 商店（ver -371 改版）：分頁（買/賣）＋店主立繪＋點選說明 ────────
     ⚠ 立繪只露上半身（`object-position:top`）：全身縮進小框裡臉會只剩幾十像素，
       而這一頁要的是「櫃台後面站著一個人」。 */
  #lootSheet .shop-tabs{display:flex;gap:6px;margin:0 0 8px;}
  #lootSheet .shop-tab{flex:1;padding:7px 0;font-family:inherit;font-size:12px;
    letter-spacing:3px;color:var(--gold-dim);background:rgba(10,8,14,.6);
    border:1px solid var(--gold-dim);border-radius:8px;}
  #lootSheet .shop-tab.on{color:var(--gold);background:rgba(212,169,74,.12);}
  #lootSheet .shop-body{display:flex;gap:8px;align-items:stretch;}
  #lootSheet .shop-list{flex:1;display:flex;flex-direction:column;gap:6px;
    max-height:38vh;overflow-y:auto;}
  /* ⚠ **格線不是 flex**（ver -405）：品名長會換行，flex 的話第二行會鑽到右邊價錢底下
     （實測武器名那幾列，「持有」的框被拆成兩半夾著價錢）。格線給品名一欄、價錢一欄，
     標籤自己佔滿第二列。 */
  #lootSheet .shop-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;
    align-items:baseline;
    padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid transparent;
    border-radius:8px;}
  #lootSheet .shop-tags{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;}
  #lootSheet .shop-row.pick{border-color:var(--gold-dim);background:rgba(212,169,74,.10);}
  /* 價格那一欄**不換行**（ver -377）：武器名長，換行之後「4000」與「G」會被拆成兩行。 */
  #lootSheet .shop-row .loot-n{white-space:nowrap;}
  /* ── 槍店的「武器改裝」＝主武器素材強化（ver -701）──
     ⚠ 列是 grid（`1fr auto`），所以素材那一欄自己 wrap，不會把 Lv 擠掉。 */
  /* 改裝頁入口＝四大格（ver -857，Ray：「分四大格…現在的 ui 對手機不友好」）：
     2×2 大觸控格（主武器＋三類副武器），點進去才是清單；-716 的兩頁籤已拆。 */
  #lootSheet .mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px;}
  #lootSheet .mod-cell{min-height:88px;display:flex;flex-direction:column;justify-content:center;
    align-items:center;gap:4px;text-align:center;cursor:pointer;border-radius:10px;
    border:1px solid rgba(212,169,74,.35);background:rgba(212,169,74,.06);}
  #lootSheet .mod-cell:active{background:rgba(212,169,74,.16);}
  #lootSheet .mod-cell i{font-style:normal;font-size:9px;letter-spacing:2px;color:var(--gold-dim);}
  #lootSheet .mod-cell b{font-size:14px;letter-spacing:2px;color:var(--gold);}
  #lootSheet .mod-cell span{font-size:10px;color:var(--ink);opacity:.7;}
  /* 分類頁頂端的返回列：整列可點、夠高（手機拇指）。 */
  #lootSheet .mod-back{padding:8px 8px;margin-bottom:4px;font-size:11px;letter-spacing:2px;
    color:var(--gold-dim);cursor:pointer;border:1px solid rgba(212,169,74,.28);border-radius:6px;}
  #lootSheet .mod-back:active{background:rgba(212,169,74,.12);color:var(--gold);}
  #lootSheet .mod-head{padding:6px 8px;margin-bottom:6px;font-size:11px;letter-spacing:1px;
    color:var(--gold);border-bottom:1px solid rgba(212,169,74,.25);}
  #lootSheet .mod-row{grid-template-columns:1fr auto;}
  #lootSheet .mod-row.done{opacity:.45;}
  /* 星名：拉丁名小字排在中文名之前（Ray：「逐顆點亮蕾娜的星座」）。 */
  #lootSheet .mod-star{display:block;font-style:normal;font-size:8.5px;letter-spacing:1.5px;
    color:var(--gold-dim);text-transform:uppercase;}
  /* 效果那一句佔滿整列（第二行），與素材需求分開 —— 兩者擠一行會被截斷。 */
  #lootSheet .mod-eff{grid-column:1 / -1;font-size:10px;color:var(--ink);opacity:.75;}
  #lootSheet .mod-row.cur{border-color:var(--gold);background:rgba(212,169,74,.10);}
  #lootSheet .mod-need{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px 8px;}
  #lootSheet .mod-mat{font-size:10px;color:var(--gold-dim);white-space:nowrap;}
  #lootSheet .mod-mat.lack{color:var(--danger);}
  /* ══ 瑪麗亞的廚房（ver -954，Ray 重排）══ 一列＝一道菜，**橫向三段**：
       左＝菜圖（還沒習得就是「？？？」）／中＝菜名一列、材料一列／右＝按鈕。
     ⚠ 舊版（-953）把菜名與按鈕擠在同一排、材料折到第二排 —— 十道菜要捲很久
       才看得完。現在一列的高度由縮圖決定，掃視的是**左邊那一直排的圖**。 */
  #lootSheet .cook-row{align-items:center;gap:10px;}
  #lootSheet .cook-pic{flex:0 0 auto;width:46px;height:46px;border-radius:6px;
    background-size:cover;background-position:center;
    border:1px solid rgba(201,162,39,.35);background-color:rgba(0,0,0,.25);}
  /* 還沒習得：不放圖，放一格「？？？」—— 看得出「這裡以後會有東西」。 */
  #lootSheet .cook-pic.unknown{display:flex;align-items:center;justify-content:center;
    font-size:9px;letter-spacing:.02em;color:var(--gold-dim);}
  #lootSheet .cook-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
  #lootSheet .cook-name{font-size:13px;font-weight:600;color:var(--ink);}
  #lootSheet .cook-mats{display:flex;flex-wrap:wrap;gap:4px;}
  #lootSheet .cook-mat{display:inline-flex;align-items:center;gap:3px;
    font-size:11px;line-height:1.5;padding:1px 6px;border-radius:9px;
    border:1px solid rgba(201,162,39,.35);color:var(--ink);white-space:nowrap;}
  #lootSheet .cook-mat i{font-style:normal;font-size:9px;opacity:.7;}
  #lootSheet .cook-mat b{font-weight:600;opacity:.8;font-size:10px;}
  /* 材料不足：整顆籤變紅，不是只有數字 —— 一眼要看得出缺的是哪一格。 */
  #lootSheet .cook-mat.lack{border-color:rgba(214,64,64,.5);color:var(--danger);}
  /* ══ 按鈕三態（Ray 指定，互斥）══
       料理（可按）／料理（材料不足，灰階）／已習得（金色）。
     ⚠ 只有可按的那一態是 `<button>`，另外兩態是 `<span>` —— 「按不動」用**元素種類**
       表達，不是靠 `disabled` 或攔截點擊：那樣才不會有「看起來能按、按了沒反應」。 */
  #lootSheet .cook-do{flex:0 0 auto;min-width:64px;text-align:center;
    font-size:12px;line-height:1.9;padding:0 10px;border-radius:6px;white-space:nowrap;}
  #lootSheet button.cook-do{border:1px solid var(--gold);background:rgba(201,162,39,.14);color:var(--gold);}
  #lootSheet .cook-do.lack{border:1px solid rgba(140,140,140,.35);color:#8a8a8a;
    background:rgba(120,120,120,.10);filter:grayscale(1);}
  #lootSheet .cook-do.done{border:1px solid var(--gold);color:var(--gold);
    background:rgba(201,162,39,.22);font-weight:600;
    text-shadow:0 0 8px rgba(212,169,74,.45);}
  /* ── 存貨（ver -405）──
     ⚠ 標在**品名後面**不是價錢那一欄：價錢那欄要保持「一個數字」才掃得快。
     ⚠ 售完那一列整列變暗**而且點不動**（JS 那邊擋）—— 只變暗的話玩家會一直戳。 */
  #lootSheet .wp-stock{font-size:10px;font-style:normal;white-space:nowrap;
    letter-spacing:1px;color:var(--gold-dim);}
  #lootSheet .shop-row.out{opacity:.42;}
  #lootSheet .shop-row.out .wp-stock{color:var(--blood);}
  /* ── 購物車（ver -496，Ray：「可以選要購買的商品數量一次結帳」）──
     每一列自己的 −/＋（取代 -405 那條「選一項才出現」的底部數量列）。
     ⚠ 控件要**夠大顆**（28px 高）：它在列表裡，太小會誤觸到整列的選取。
     ⚠ `margin-left:auto` 把整組推到標籤列的右端 —— 左邊留給「持有／庫存」。 */
  #lootSheet .shop-cartline{display:flex;align-items:center;gap:6px;margin-left:auto;}
  #lootSheet .shop-cartline button{width:30px;height:26px;font-family:inherit;font-size:15px;
    line-height:1;color:var(--gold);background:rgba(10,8,14,.7);
    border:1px solid var(--gold-dim);border-radius:7px;}
  #lootSheet .shop-cartline button.off{opacity:.35;}
  #lootSheet .shop-cartline .cr-n{min-width:2.0em;text-align:center;font-size:13px;
    font-style:normal;color:var(--gold-dim);}
  #lootSheet .shop-cartline .cr-n.on{color:var(--ink);}
  /* ⚠ `.shop-keeper-art` 已於 ver -387 撤掉（Ray：「商店內展開購買視窗時不要放店主立繪」）——
     店主畫在背景的櫃台後面，這一頁是疊在他前面的一張單子，不必再放一次同一個人。
     樣式一併移除；要找歷史請看 git。 */
  #lootSheet .shop-desc{min-height:2.6em;margin:8px 2px 0;font-size:11px;line-height:1.7;
    color:var(--gold-dim);}
  /* ⚠ 三顆鈕（買/賣 + 交談 + 挑戰 + 關閉）擠一排會太窄 → 允許換行（ver -398）。 */
  #lootSheet .shop-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  #lootSheet .shop-acts button{flex:1;padding:9px 0;font-family:inherit;font-size:12px;
    letter-spacing:2px;color:var(--gold);background:rgba(10,8,14,.7);
    border:1px solid var(--gold-dim);border-radius:8px;}
  #lootSheet .shop-do{color:var(--holy);border-color:var(--holy);}
  #lootSheet .shop-do.broke{opacity:.35;}
  #lootSheet .shop-talk{color:var(--gold-dim);border-style:dashed;}
  /* 武器店（ver -377）：規格表與「對比現有」──────────────────────
     ⚠ 兩欄的 grid（項目｜值），不是表格 —— 值的長度差很多（「6發×4傷害」vs「20%」），
       表格會被最長的那一格撐開。
     ⚠ 對比那張整體壓暗：玩家要一眼看出「上面是要買的、下面是手上的」。 */
  #lootSheet .wp-stats{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
    margin:2px 0 4px;font-size:11px;line-height:1.6;}
  #lootSheet .wp-k{color:var(--gold-dim);opacity:.8;letter-spacing:1px;}
  #lootSheet .wp-v{color:var(--ink);}
  #lootSheet .wp-stats.rival{opacity:.62;}
  #lootSheet .wp-stats.rival .wp-v{color:var(--gold-dim);}
  #lootSheet .wp-vs{margin-top:6px;font-size:10.5px;letter-spacing:2px;color:var(--gold);opacity:.85;}
  /* 杰羅改槍（ver -866）：「點下去以後跳槍的圖與數值出來」—— 說明區頂上那張槍圖。 */
  #lootSheet .jero-gunimg{display:block;max-width:100%;max-height:110px;margin:0 auto 6px;
    object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));}
  #lootSheet .wp-flavor{margin-top:6px;font-size:11px;color:var(--gold-dim);opacity:.85;}
  /* 「持有」小標：貼在品名後面，不另開一欄（價格那一欄要留給價格）。 */
  #lootSheet .wp-have{padding:1px 5px;white-space:nowrap;font-style:normal;font-size:9.5px;
    letter-spacing:1px;color:var(--holy);border:1px solid var(--holy);border-radius:8px;opacity:.8;}
  /* 三頁的時候字要縮一點，不然「武器改裝」四個字擠不下（實測 375 寬）。 */
  #lootSheet .shop-tabs:has(.shop-tab:nth-child(3)) .shop-tab{font-size:11px;letter-spacing:1px;}

  /* ══ 靠左停的店舖單子（ver -404，Ray：「不用點擊，直接右店主左選單」）══
     店舖畫面 ＝ **右邊店主立繪、左邊選單**，一走進去就是這個樣子。
     ⚠⚠ 停靠模式**不可以吃掉整個畫面的點擊**：右邊站著店主，底下的槍棺面盤還要能
       長按箭頭走出店門。所以罩子 `pointer-events:none`、只有單子本身收點擊；
       背景也不壓黑（那是「強制視窗」的語彙，這一張是常駐的擺設）。
     ⚠ 寬度給到 62%：**允許**壓到店主左緣一點點 —— 立繪不越中線（§6.5）是給
       兩人同台用的，這裡單子是前景的實體物件，疊上去讀起來就是「單子在他前面」。
       再窄下去品名＋價錢就要折行了（實測 390px 寬的機器上 58% 已經開始折）。
     ⚠ 只改版面，**不改任何字級與顏色** —— 同一張單子在道具欄／拾得視窗裡是置中的，
       兩種模式要長得一樣，只是站的位置不同。 */
  #lootSheet.dock-left{padding:0;   /* 停靠模式的單子自己用 margin 閃頂排（下面），容器內距不疊（ver -1812） */
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    justify-content:flex-start;align-items:flex-start;pointer-events:none;}
  #lootSheet.dock-left.on{pointer-events:none;}
  #lootSheet.dock-left .loot-panel{pointer-events:auto;
    display:flex;flex-direction:column;
    width:min(64%,250px);
    /* ⚠ 上緣要**閃開左上角的靜音鈕**（ver -394 Ray 把它移到整個畫面左上；實測
       y 56..92）—— 壓在鈕上面的話那顆鈕就按不到了。 */
    margin:calc(env(safe-area-inset-top,0px) + 100px) 0 0 10px;
    background:rgba(18,15,26,.94);box-shadow:0 10px 34px rgba(0,0,0,.72);
    /* ⚠⚠ 下界是**楣的上緣** `--kerb-clip-top` —— 由 `layoutKerberos` 解出來、順手發佈到
       `:root` 的那一個值（鐵律 7：不要在這裡用「56vh − 楣高」再算一次）。
       ⚠ 店舖模式**沒有對話框**（Ray：「騰空間出來給選單」），所以這張單子一路用到楣。
         試過留一條全寬的常駐招呼語：單子只剩 225px，而完整的一張商店單子要 306px
         （實測 390×844），怎麼壓都塞不下 —— 那一句就是那 80px 的代價。 */
    max-height:calc(var(--kerb-clip-top, 56vh) - env(safe-area-inset-top,0px) - 108px);
    overflow:hidden;}
  /* 清單吃剩下的空間、自己捲；**那排鈕永遠看得到**（不然玩家關不掉單子）。
     ⚠ `min-height:0` 兩層都要給：flex 子項預設 `min-height:auto`，不給的話它不肯縮，
       整張單子會撐爆 `max-height`，最下面那排鈕就被 `overflow:hidden` 吃掉。 */
  #lootSheet.dock-left .shop-body{flex:1 1 auto;min-height:0;}
  #lootSheet.dock-left .shop-list,
  #lootSheet.dock-left .loot-list{max-height:none;min-height:0;overflow-y:auto;}
  #lootSheet.dock-left .shop-tabs,
  #lootSheet.dock-left .shop-desc,
  #lootSheet.dock-left .shop-acts,
  #lootSheet.dock-left .loot-ok{flex:0 0 auto;}
  #lootSheet.dock-left .shop-desc{max-height:4.6em;overflow-y:auto;}
  /* ⚠ 窄單子的細部壓縮：**省下來的每一格都給清單**（不壓的話只看得到 1.5 列商品）。
     標題／金額讓行高、頁籤與鈕讓內距、字距收掉 —— 這些是這個模式專屬的，
     置中模式（拾得／道具欄）維持原樣。 */
  #lootSheet.dock-left .loot-title{font-size:13px;letter-spacing:3px;margin-bottom:5px;}
  #lootSheet.dock-left .bag-money{margin:-2px 2px 5px;}
  #lootSheet.dock-left .shop-tabs{margin-bottom:6px;}
  #lootSheet.dock-left .shop-tab{padding:6px 0;}
  #lootSheet.dock-left .shop-row{padding:7px 9px;}
  #lootSheet.dock-left .shop-desc{margin-top:6px;min-height:1.8em;}
  #lootSheet.dock-left .shop-acts{margin-top:6px;gap:5px;}
  /* ⚠ 鈕**擠一排**：字級 11px、字距歸零、不換行，鈕的字也縮短了（`showShop` 的
     「交　談」）。武器店最多四顆（買下／交談／射擊挑戰／關閉），250px 的單子每顆
     約 55px，剛好排得下。換行的話多吃 45px，那 45px 等於清單的一列半。 */
  #lootSheet.dock-left .shop-acts button{flex:1 1 0;min-width:0;white-space:nowrap;
    padding:8px 0;font-size:11px;letter-spacing:0;}
  /* 買／賣那一顆要放得下「買下 3000」，比其他幾顆寬一點。 */
  #lootSheet.dock-left .shop-do{flex:1.7 1 0;}

  /* ══ 點標題 → 展開全寬（ver -404，Ray：「點擊選單可展開全寬」）══
     靠左停的單子看得到店主但欄位窄；要細看規格（武器店的規格表、同類比較）就展開。
     ⚠ 展開＝**把 `dock-left` 拿掉**，回到這一份原本那張置中的視窗 —— 不另做一套版面
       （鐵律 8）。所以展開之後的樣子與道具欄／拾得視窗一致。
     ⚠ 點的是**標題列**：清單的每一列與那排鈕都有自己的動作，整張單子都能點的話
       會誤觸。標題右邊給一個 `⤢`／`⤡` 讓人知道可以點。 */
  #lootSheet.dock-left .loot-title{cursor:pointer;}
  #lootSheet .lt-exp{position:absolute;right:12px;top:12px;
    font-size:12px;color:var(--gold-dim);font-style:normal;}
  #lootSheet .loot-panel{position:relative;}
  /* 標題右邊的地名／時刻：停靠模式蓋掉了上緣的 `#townInfo`，資訊要在這裡找得到。 */
  #lootSheet .shop-info{display:block;margin-top:3px;
    font-size:10px;letter-spacing:2px;color:var(--gold-dim);}

/* 獵人兌換表（ver -859）：一列＝食材→獎勵＋持有＋換鈕。沿用 mod-row 的網格。 */
#lootSheet .exch-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;}
#lootSheet .exch-do{font-family:inherit;font-size:11px;letter-spacing:2px;color:var(--gold);
  background:rgba(212,169,74,.10);border:1px solid var(--gold);border-radius:6px;
  padding:4px 10px;cursor:pointer;}
#lootSheet .exch-do:active{background:rgba(212,169,74,.24);}