/* hud-dock.css — B17 圖標列（#dock：📖 ⚙️ ＋ hud-dock.mjs 的 Y 系統圖標）與任務卡欄（.dk-tasks）。
   電腦：右上 HUD 小卡（hud.css）正下方一列、靠右、可換行；任務卡接在圖標列下面。觸控版面在 touch.css（body.tc-on）。
   Y 模組元素被搬進槽位後（[data-dock]）：拿掉它們自己的 position:fixed／top（economy-ui／reputation-ui 會每 0.25 s 寫 inline top，用 !important 蓋掉）。 */
.dock{position:fixed;right:var(--ui-edge-r);top:calc(var(--card-b) + 8px);z-index:905;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:flex-start;
  align-items:flex-start;gap:var(--ui-gap);max-width:min(340px,calc(100vw - 24px));pointer-events:none;font:var(--ui-fs)/1.35 var(--ui-font);color:#fff}
.dock > *{pointer-events:auto}
/* row-reverse：DOM 順序 📖 ⚙️ 🎒 🏦 … 從右往左排（📖 在最右邊、貼著小卡右緣） */
.dk-slot{position:relative}
.dk-icon{font-size:18px}
.dk-badge{position:absolute;right:-4px;bottom:-4px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#e53935;color:#fff;
  font:700 10px/16px var(--ui-font);font-style:normal;text-align:center;pointer-events:none}
.dk-icon.ping{animation:dk-ping 1.2s ease-out}
@keyframes dk-ping{0%{box-shadow:0 0 0 0 #ffd23fcc}100%{box-shadow:0 0 0 12px #ffd23f00}}

/* pop 類：點圖標在下方展開原本的小卡、靠右對齊（最右邊的 📖 那一側），寬度自己決定 */
.dk-pop{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:3}
.dk-slot.open .dk-pop{display:block}
.dock [data-dock]{position:static!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;margin:0!important;
  z-index:auto!important;max-width:min(300px,calc(100vw - 24px))!important;box-sizing:border-box}
.dk-pop > [data-dock]{width:max-content;min-width:180px;pointer-events:auto!important;border-radius:var(--ui-r)!important;box-shadow:var(--ui-shadow)!important}
.dk-pop > .y3-hud,.dk-pop > .y6-hud{padding:6px;border-radius:var(--ui-r);background:var(--ui-bg-strong)}
/* click 類：Y 原本的按鈕畫成圓形圖標（內容藏起來，::before 畫 data-dk-face 的 emoji）；點它＝原本的行為 */
.dock [data-dk-face]{position:relative!important;inset:auto!important;display:grid!important;place-items:center;width:var(--ui-icon)!important;height:var(--ui-icon)!important;min-width:0!important;
  max-width:none!important;padding:0!important;margin:0!important;box-sizing:border-box;border:1px solid var(--ui-line)!important;border-radius:50%!important;background:var(--ui-bg)!important;
  color:transparent!important;font-size:0!important;line-height:0!important;overflow:hidden;cursor:pointer;box-shadow:var(--ui-shadow)!important;pointer-events:auto!important;-webkit-tap-highlight-color:transparent;
  animation:none!important;transform:none!important}
.dock [data-dk-face] > *{display:none!important}
.dock [data-dk-face]::before{content:attr(data-dk-face);color:#fff;font:18px/1 var(--ui-font)}
.dock [data-dk-face]:hover{background:var(--ui-bg-hover)!important}
.dock [data-dk-face]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.dock .y8f-badge[data-dk-face]{border-color:#ff8a80!important}
.dk-slot > .dk-badge{z-index:1}

/* ── 任務卡欄：圖標列下面、靠右（外送／計程車／職業任務） ── */
.dk-tasks{position:fixed;right:var(--ui-edge-r);top:calc(var(--dock-b) + 10px);z-index:902;display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  width:min(310px,calc(100vw - 24px));max-height:calc(100vh - var(--dock-b) - 230px);overflow:hidden;pointer-events:none}
.dk-tasks > *{pointer-events:auto}
.dk-tasks [data-dk-task]{position:static!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;margin:0!important;
  width:100%!important;max-width:100%!important;box-sizing:border-box}

/* ── 觸控版面（body.tc-on；touch.mjs 掛上去時加）：圖標 56 px；直拿＝HUD 小卡下面靠右（左邊留給左上小地圖），橫拿＝小卡左邊一排 ── */
body.tc-on{--ui-icon:56px}
body.tc-on .dock{max-width:calc(100vw - var(--ui-edge-r) - var(--ui-edge-l) - var(--mm-touch,96px) - 16px)}
body.tc-on .dk-icon,body.tc-on .dock [data-dk-face]::before{font-size:22px}
body.tc-on .dk-tasks{width:min(300px,calc(100vw - 24px));max-height:calc(100vh - var(--dock-b) - 330px)}
@media (max-height:520px){
  body.tc-on .dock{top:var(--ui-edge-t);right:calc(var(--ui-edge-r) + 208px);max-width:min(312px,calc(100vw - var(--ui-edge-r) - 208px - var(--ui-edge-l) - var(--mm-touch,96px) - 16px))}
  body.tc-on .dk-tasks{right:auto;left:var(--ui-edge-l);top:calc(var(--ui-edge-t) + var(--mm-touch,96px) + 40px);width:230px;max-height:calc(100vh - var(--mm-touch,96px) - 230px);align-items:flex-start}
}