/* G1/G2 HUD（hud.mjs）。只用外部樣式表（CSP style-src 'self'）；JS 只改 class／dataset／CSS 變數。
   B17：右上一張小卡；圖標列／任務卡在 hud-dock.css；觸控版面在 touch.css（body.tc-on）。 */
.ghud{position:fixed;inset:0;z-index:900;pointer-events:none;font:13px/1.3 system-ui,"Noto Sans TC",sans-serif;color:#fff;
  -webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}
.ghud [hidden]{display:none!important}

/* ── 右上：B17 收成一張小卡（第 1 列 星等＋錢、第 2／3 列 血／飽足、第 4 列 目前武器＋彈藥）；武器格 0–4 收起（數字鍵照用，手冊有寫） ── */
.ghud-side{position:absolute;top:var(--ui-edge-t,12px);right:var(--ui-edge-r,12px);width:196px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"stars money" "hp hp" "food food" "weap weap";align-items:center;gap:5px 6px;
  padding:7px 10px 8px;border-radius:var(--ui-r,12px);background:var(--ui-bg,#141820b8);box-shadow:var(--ui-shadow,0 2px 8px #0005)}
.ghud-stars{grid-area:stars;display:flex;gap:1px;font-size:16px;line-height:1;text-shadow:0 1px 2px #000a}
.ghud-star{color:#ffffff30}
.ghud-star.on{color:#ffd23f}
.ghud-stars.flash .ghud-star.on{animation:ghud-blink .5s steps(2) infinite}
@keyframes ghud-blink{50%{color:#fff}}
.ghud-money{grid-area:money;justify-self:end;font:700 17px/1 var(--ui-font,system-ui,sans-serif);color:var(--ui-good,#7dff8a);text-shadow:0 1px 2px #000a}
.ghud-weapon{grid-area:weap;position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 0 2px;border-top:1px solid var(--ui-line,#fff2);overflow:hidden}
.ghud-wname{font-weight:700;font-size:13px}
.ghud-ammo{font:700 14px/1 ui-monospace,Menlo,Consolas,monospace}
.ghud-ammo.is-low{color:#ff6b5b}
.ghud-reload{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff22}
.ghud-reload i{display:block;height:100%;width:100%;background:#ffd23f;transform-origin:left;transform:scaleX(var(--v,0))}
.ghud-weapon.is-reloading .ghud-ammo{opacity:.45}
.ghud-slots{display:none}
.ghud-slot{display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:6px;background:#14182099;color:#ffffff55;font-size:12px}
.ghud-slot b{font:700 10px/1 system-ui,sans-serif;opacity:.8}
.ghud-slot.has{color:#fff}
.ghud-slot.cur{background:#ffd23f;color:#222}
.ghud-hp{grid-area:hp}.ghud-food{grid-area:food}
.ghud-bar{display:flex;align-items:center;gap:6px;border-radius:6px}
.ghud-bar-icon{width:15px;text-align:center;font-size:12px}
.ghud-bar-track{position:relative;flex:1;height:7px;border-radius:4px;background:#ffffff22;overflow:hidden}
.ghud-bar-fill{position:absolute;inset:0;border-radius:4px;transform-origin:left;transform:scaleX(var(--v,1));transition:transform .25s ease-out}
.ghud-hp .ghud-bar-fill{background:linear-gradient(90deg,#e53935,#ff7043)}
.ghud-hp .ghud-bar-icon{color:#ff5a5a}
.ghud-food .ghud-bar-fill{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.ghud-bar-num{width:24px;text-align:right;font-weight:700;font-size:11px}
.ghud-bar.is-low{animation:ghud-pulse .8s ease-in-out infinite alternate}
.ghud-bar.is-low .ghud-bar-num{color:#ff6b5b}
@keyframes ghud-pulse{to{box-shadow:0 0 0 2px #ff3b30}}

/* ── 準心 ── */
.ghud-cross{--gap:6px;position:absolute;left:50%;top:50%;width:0;height:0}
.ghud-cross i{position:absolute;background:#fff;box-shadow:0 0 2px #000}
.ghud-cross i:nth-child(1){width:2px;height:8px;left:-1px;top:calc(-1 * var(--gap) - 8px)}
.ghud-cross i:nth-child(2){width:2px;height:8px;left:-1px;top:var(--gap)}
.ghud-cross i:nth-child(3){width:8px;height:2px;top:-1px;left:calc(-1 * var(--gap) - 8px)}
.ghud-cross i:nth-child(4){width:8px;height:2px;top:-1px;left:var(--gap)}
.ghud-cross b{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 2px #000}
.ghud-cross.hit i{background:#ff3b30}

/* ── toast／提示：toast 上方置中、窄、半透明；互動提示＝下方置中一顆（觸控版面在 touch.css 另外擺） ── */
.ghud-toasts{position:absolute;left:50%;top:var(--ui-edge-t,12px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;
  width:min(460px,calc(100vw - 2 * 240px))}
.ghud-toast{pointer-events:auto;padding:6px 14px;border-radius:999px;background:var(--ui-bg-strong,#141820e0);color:#ffe27a;font-size:var(--ui-fs,13px);font-weight:600;box-shadow:var(--ui-shadow,0 2px 10px #0006);
  text-align:center;max-width:100%;box-sizing:border-box;animation:ghud-in .2s ease-out;transition:opacity .3s}
.ghud-toast[data-kind=bad]{color:#ff8a7b}
.ghud-toast[data-kind=good]{color:#8dff98}
.ghud-toast.out{opacity:0}
@keyframes ghud-in{from{opacity:0;transform:translateY(-6px)}}
.ghud-prompt{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 16px 5px 5px;border-radius:999px;
  background:#ffd23ff0;color:#222;font-weight:700;font-size:var(--ui-fs-lg,15px);box-shadow:var(--ui-shadow,0 2px 10px #0005);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.ghud-prompt kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#222;color:#ffd23f;font:700 14px/1 var(--ui-font,system-ui,sans-serif)}

/* ── 低血量／受傷／死亡 ── */
.ghud-vignette{position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(ellipse at center,transparent 62%,#c0000070 100%)}
.ghud.is-low .ghud-vignette{opacity:1;animation:ghud-heart 1.1s ease-in-out infinite}
@keyframes ghud-heart{50%{opacity:.55}}
.ghud-hurt{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 40%,#ff000066 100%)}
.ghud-hurt.on{animation:ghud-hurt .35s ease-out}
@keyframes ghud-hurt{from{opacity:1}to{opacity:0}}
.ghud-death{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(ellipse at center,#30000099,#000000d0);animation:ghud-fade .6s ease-out;pointer-events:auto}
@keyframes ghud-fade{from{opacity:0}}
.ghud-death-title{font:800 44px/1.1 system-ui,"Noto Sans TC",sans-serif;color:#ff4d4d;letter-spacing:.08em;text-shadow:0 2px 12px #000}
.ghud-death-sub{font-size:15px;color:#ddd}
.ghud-death-num{font:800 64px/1 system-ui,sans-serif;color:#fff;text-shadow:0 2px 12px #000}
.ghud.is-dead .ghud-side{opacity:.35}

/* ── 窄螢幕：小卡縮小（觸控版面的 toast／提示位置在 touch.css） ── */
@media (max-width:480px){
  .ghud{font-size:12px}
  .ghud-side{width:156px;padding:6px 8px;gap:4px}
  .ghud-stars{font-size:13px}
  .ghud-money{font-size:14px}
  .ghud-wname{font-size:12px}
  .ghud-ammo{font-size:13px}
  .ghud-toasts{width:calc(100vw - 2 * 170px);min-width:160px}
  .ghud-toast{font-size:12px;padding:5px 10px}
  .ghud-death-title{font-size:32px}
  .ghud-death-num{font-size:48px}
}