/* 方塊山大逃亡：第五關「方塊遠征」的介面（src/quest-ui.js）。全部 .qu- 開頭，放在 .qu-ui 底下，不影響 style.css
   2026-10-22 改成 2D 手繪像素畫風（QUEST-SPEC 第 0.6 節；樣張 BlockPeak_準備\第五關草稿\樣張-*.png）：
   - 像素格 --qp（1 格＝幾個 CSS px；quest-ui.js 照畫面算，可以不是整數，但一定是整數個裝置像素）
   - 資訊列、牌子、手機按鈕、搖桿、暫停選單都是 JS 畫在低解析度 canvas，這裡只管位置和整數倍放大（image-rendering: pixelated）
   - 面板（選職業、商店、結算）用 CSS 字：大小只用 --f12（12 px × qp）、行高 --l14；面板 will-change 讓字用灰階反鋸齒（不會有彩色毛邊）
   - 顏色只用調色盤（quest-palette.js）的 64 色；介面例外可以半透明（暗幕）
   手機的手勢：不能選字、長按不跳選單；按鈕 touch-action:manipulation；搖桿、按住類的鍵 touch-action:none */
@font-face{font-family:"BPQuestPixel";src:url("../public/fonts/bp-quest-pixel.woff") format("woff");font-display:swap}

.qu-ui{
  --qp:2px;--f12:24px;--l14:28px;--sal:0px;--sar:0px;--sat:0px;--sab:0px;
  /* 調色盤（BPQuestPalette） */
  --k0:#16111f;--k1:#251b31;--k2:#3a2c47;
  --s0:#454a5c;--s1:#5f6676;--s2:#7f8794;--s3:#a4aab3;--s4:#cbd0d4;--s5:#efede6;
  --t0:#334060;--t1:#56698f;--t2:#8ba2c2;--t3:#c3d4e8;
  --e0:#36211d;--e1:#583625;--e2:#7b5032;--e3:#a06e40;--e4:#c79556;--e5:#e8c182;
  --r0:#4a1428;--r1:#7c1e2e;--r2:#b42e31;--r3:#e04d3b;--r4:#f58460;
  --g0:#a5571d;--g1:#db842c;--g2:#f2b13d;--g3:#f9d95c;--g4:#fff3a8;
  --gr2:#2d6b34;--gr3:#4a8f37;--gr4:#77b542;--gr5:#a9d55b;
  --b2:#2e6cc2;--b3:#4e98e2;--b4:#88c5f2;--p2:#743f9c;--p3:#a462c6;--w:#ffffff;
  --font:"BPQuestPixel","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
  position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  font-family:var(--font);font-size:var(--f12);line-height:var(--l14);color:var(--s4);font-weight:400;
}
.qu-ui,.qu-ui *,.qu-ui *::before,.qu-ui *::after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.qu-ui [hidden]{display:none!important}
:where(.qu-ui) button{font:inherit;color:inherit;border:0;padding:0;margin:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-user-drag:none;text-align:inherit}
.qu-ui button:focus-visible{outline:var(--qp) solid var(--g3);outline-offset:var(--qp)}
.qu-ui canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none;flex:none}
.qu-ui b,.qu-ui strong{font-weight:400}
.qu-ui em{font-style:normal}
.qu-ui kbd{font:inherit;background:none;border:0;box-shadow:none;padding:0;margin:0;border-radius:0;min-width:0;height:auto;line-height:inherit;color:inherit;text-shadow:none}   /* 蓋掉 style.css 的 kbd 樣式 */
.qu-ui p{margin:0}
.qu-probe{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}

/* ---------- 頂端資訊列（底條滿版，內容在 JS 裡照安全區內縮） ---------- */
.qu-hud{position:absolute;left:0;top:0}
.qu-pausebtn{position:absolute;pointer-events:auto;z-index:2}   /* 透明；圖畫在資訊列上，按鈕本身撐到 44×44（JS 算位置、大小） */
.qu-upb{position:absolute;pointer-events:auto;z-index:2}
.qu-upb:active{transform:translateY(var(--qp))}
.qu-tr{position:absolute;right:calc(var(--sar) + var(--qp) * 12);top:calc(var(--qp) * 22);display:flex;gap:calc(var(--qp) * 2);pointer-events:auto}

/* ---------- 資訊列下方的牌子（位置由 JS 算） ---------- */
.qu-stack{position:absolute;inset:0}
.qu-plate{position:absolute;left:0;top:0}
.qu-flow{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--qp) * 2)}
.qu-flow > *{pointer-events:auto}

/* ---------- 浮動文字 ---------- */
.qu-fx{position:absolute;inset:0;overflow:hidden;z-index:6}
.qu-fl{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.qu-fl-tip canvas{animation:quBob 1.2s steps(2) .2s infinite}

/* ---------- 左下：搖桿（觸控才有） ---------- */
.qu-joyzone{position:absolute;left:0;bottom:0;width:min(46%,420px);height:min(64%,340px);pointer-events:auto;touch-action:none;display:none}
.qu-touch .qu-joyzone{display:block}
.qu-joy{position:absolute;will-change:transform}
.qu-joy > canvas{position:absolute;left:0;top:0}
.qu-joy-b{opacity:.5}
.qu-knob{will-change:transform}
/* ---------- 電腦：左下按鍵說明 ---------- */
.qu-keys{position:absolute}
.qu-touch .qu-keys{display:none}

/* ---------- 右下：攻擊、跳、技能（手機；底色 50%，亮邊／圖示／字 100%；按下整顆 100%、往下沉一格） ---------- */
.qu-pad{position:absolute;inset:0;pointer-events:none;display:none}
.qu-touch .qu-pad{display:block}
.qu-pb{position:absolute;pointer-events:auto;touch-action:none;margin:0}
.qu-pb::before{content:"";position:absolute;inset:calc(var(--qp) * -3)}   /* 點得到的範圍比畫出來的大一點（不會跟隔壁的鈕重疊） */
.qu-pb > canvas{position:absolute;left:0;top:0;pointer-events:none}
.qu-pb-b{opacity:.5}
.qu-pb.on{transform:translateY(var(--qp))}
.qu-pb.on .qu-pb-b{opacity:1}
.qu-autotag{position:absolute;pointer-events:none}
/* ---------- 商店時間：右下「準備好」「商店」兩顆鈕（按「商店」才打開面板）、商人頭上的對話泡泡 ---------- */
.qu-shopbar{position:absolute;inset:0;pointer-events:none}
.qu-sb{position:absolute;pointer-events:auto;touch-action:manipulation}
.qu-sb > canvas{position:absolute;left:0;top:0}
.qu-sb:active{transform:translateY(var(--qp))}
.qu-sb.done{pointer-events:none}
.qu-bubble{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;animation:quBob 1.2s steps(2) infinite}
.qu-shopph :is(.qu-pad,.qu-joyzone){opacity:0;pointer-events:none}

/* ---------- 暫停選單（canvas＋透明按鈕） ---------- */
.qu-modal{position:absolute;inset:0;pointer-events:auto;touch-action:manipulation;z-index:20;background:rgba(22,17,31,.55)}
.qu-pm{z-index:30}
.qu-pm-w,.qu-cf-w{position:absolute}
.qu-pm-w > canvas,.qu-cf-w > canvas{position:absolute;left:0;top:0}
.qu-hits{position:absolute;inset:0}
.qu-hit{position:absolute;display:block}
.qu-pm.cf .qu-pm-w{filter:brightness(.55)}
.qu-pm-w{animation:quIn .18s steps(3)}
.qu-cf-w{animation:quIn .14s steps(2)}

/* ---------- 面板（選職業、商店、結算）：深色底＋木框＋金屬角（.qu-fbg 由 JS 畫），木牌標題畫在框上 ---------- */
.qu-panel{position:absolute;display:flex;flex-direction:column;gap:calc(var(--qp) * 4);padding:calc(var(--qp) * 14) calc(var(--qp) * 10) calc(var(--qp) * 10);isolation:isolate;will-change:transform;max-height:calc(100% - var(--qp) * 12);color:var(--s4);animation:quIn .2s steps(3)}
.qu-fbg{position:absolute;left:calc(var(--qp) * -1);top:calc(var(--qp) * -7);z-index:-1;pointer-events:none}   /* 寬高由 JS 設成像素格的整數倍（不能拉伸） */
.qu-sub{color:var(--s2);text-align:center}
.qu-hint{color:var(--s2)}
.qu-touch .qu-hint,.qu-touch .qu-panel kbd{display:none}
.qu-panel kbd{position:absolute;right:calc(var(--qp) * 1);top:0;color:var(--s1)}
/* 按鈕：切角外框＋上一格亮、下兩格暗（側面）；按下去往下沉 */
.qu-btn{--bg:var(--s1);--hi:var(--s3);--lo:var(--s0);position:relative;background:var(--bg);color:var(--w);padding:calc(var(--qp) * 3) calc(var(--qp) * 10) calc(var(--qp) * 4);margin:var(--qp);white-space:nowrap;
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--k0),calc(var(--qp) * -1) 0 0 0 var(--k0),var(--qp) 0 0 0 var(--k0),0 var(--qp) 0 0 var(--k0),inset 0 var(--qp) 0 0 var(--hi),inset 0 calc(var(--qp) * -2) 0 0 var(--lo)}
.qu-btn:active{transform:translateY(var(--qp));box-shadow:0 calc(var(--qp) * -1) 0 0 var(--k0),calc(var(--qp) * -1) 0 0 0 var(--k0),var(--qp) 0 0 0 var(--k0),0 var(--qp) 0 0 var(--k0),inset 0 var(--qp) 0 0 var(--lo)}
.qu-go{--bg:var(--g2);--hi:var(--g4);--lo:var(--g0);color:var(--k0);min-height:44px}
.qu-go.on{--bg:var(--s1);--hi:var(--s3);--lo:var(--s0);color:var(--s5)}
/* 格子（卡片、道具）：深一階的底＋上面一條亮線 */
.qu-cc,.qu-it,.qu-st,.qu-chip,.qu-cs-info{background:var(--k1);box-shadow:0 calc(var(--qp) * -1) 0 0 var(--k0),calc(var(--qp) * -1) 0 0 0 var(--k0),var(--qp) 0 0 0 var(--k0),0 var(--qp) 0 0 var(--k0),inset 0 var(--qp) 0 0 var(--k2)}

/* 選職業 */
.qu-cs-body{display:flex;gap:calc(var(--qp) * 6);min-height:0;align-items:stretch}
.qu-cs-list{display:grid;grid-template-columns:repeat(4,calc(var(--qp) * 44));gap:calc(var(--qp) * 3);align-content:start;flex:none;padding:var(--qp)}
.qu-cc{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 0 calc(var(--qp) * 2);height:calc(var(--qp) * 50)}
.qu-cc .qu-spr{margin-top:calc(var(--qp) * 1)}
.qu-cc-nm{color:var(--s4);margin-top:calc(var(--qp) * -3);white-space:nowrap}
.qu-cc.sel{background:var(--k2);box-shadow:0 calc(var(--qp) * -1) 0 0 var(--g3),calc(var(--qp) * -1) 0 0 0 var(--g3),var(--qp) 0 0 0 var(--g3),0 var(--qp) 0 0 var(--g3),0 calc(var(--qp) * -2) 0 0 var(--k0),calc(var(--qp) * -2) 0 0 0 var(--k0),calc(var(--qp) * 2) 0 0 0 var(--k0),0 calc(var(--qp) * 2) 0 0 var(--k0),inset 0 var(--qp) 0 0 var(--s0)}
.qu-cc.sel .qu-cc-nm{color:var(--g4)}
.qu-cc-tk{position:absolute;left:calc(var(--qp) * -1);top:calc(var(--qp) * -3);padding:0 calc(var(--qp) * 2);background:var(--b2);color:var(--w);box-shadow:0 0 0 var(--qp) var(--k0);white-space:nowrap;max-width:calc(100% + var(--qp) * 2);overflow:hidden}
.qu-cs-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(var(--qp) * 3);padding:calc(var(--qp) * 4) calc(var(--qp) * 6);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.qu-ci-top{display:flex;gap:calc(var(--qp) * 4);align-items:flex-end}
.qu-ci-top .qu-spr2{margin:calc(var(--qp) * -8) 0 calc(var(--qp) * -2) calc(var(--qp) * -8)}
.qu-ci-nm{display:flex;flex-direction:column;min-width:0;flex:1}
.qu-ci-nm small{color:var(--s2);font-size:var(--f12)}
.qu-ci-st{display:grid;grid-template-columns:auto auto;gap:var(--qp) calc(var(--qp) * 6);margin-top:calc(var(--qp) * 2);justify-content:start}
.qu-stat{display:flex;align-items:center;gap:calc(var(--qp) * 3)}
.qu-stat em{color:var(--s3)}
.qu-pips{display:inline-flex;gap:var(--qp);padding:var(--qp);background:var(--k0)}
.qu-pips i{width:calc(var(--qp) * 4);height:calc(var(--qp) * 5);background:var(--k2)}
.qu-pips i.on{background:var(--g2);box-shadow:inset 0 var(--qp) 0 0 var(--g4)}
.qu-ci-sks{display:flex;flex-direction:column;gap:calc(var(--qp) * 1)}
.qu-ci-sk{display:flex;align-items:center;gap:calc(var(--qp) * 3);white-space:nowrap}
.qu-ci-sk b{color:var(--s5)}
.qu-ci-sk small{color:var(--s2);font-size:var(--f12)}
.qu-ci-mv{color:var(--s3)}
.qu-ci-mv b{display:inline-block;margin-right:calc(var(--qp) * 3);padding:0 calc(var(--qp) * 2);background:var(--e3);color:var(--e5);box-shadow:inset 0 var(--qp) 0 0 var(--e4)}
.qu-cs-f{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--qp) * 6)}
.qu-touch .qu-cs-f{justify-content:center}

/* 商店 */
.qu-close{--bg:var(--r2);--hi:var(--r4);--lo:var(--r1);flex:none;padding:var(--qp) calc(var(--qp) * 6) calc(var(--qp) * 2)}
.qu-close kbd{position:static;margin-left:calc(var(--qp) * 3);color:var(--r4)}
.qu-touch .qu-close{min-height:44px;min-width:64px}
.qu-sh-h{display:flex;align-items:center;gap:calc(var(--qp) * 4)}
.qu-sh-st{flex:1 1 auto;min-width:0;color:var(--s3);white-space:nowrap;overflow:hidden}
.qu-chip{display:flex;align-items:center;gap:calc(var(--qp) * 3);padding:calc(var(--qp) * 2) calc(var(--qp) * 4)}
.qu-sh-sum{display:flex;flex-wrap:wrap;gap:var(--qp) calc(var(--qp) * 8);color:var(--s3)}
.qu-sh-sum > span,.qu-rs-p{display:flex;align-items:center;gap:calc(var(--qp) * 3)}
.qu-sh-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--qp) * 4);min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:var(--qp)}
.qu-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 4) calc(var(--qp) * 3) calc(var(--qp) * 3);text-align:center;min-width:0}
.qu-it:active{transform:translateY(var(--qp))}
.qu-it-tx{display:flex;flex-direction:column;min-width:0}
.qu-it-tx b{color:var(--s5)}
.qu-it-tx small{color:var(--s2);font-size:var(--f12)}
.qu-it-p{display:flex;align-items:center;gap:calc(var(--qp) * 2)}
.qu-it-n{color:var(--s2);white-space:nowrap}
.qu-it.poor,.qu-it.sold{cursor:default;background:var(--k0)}
.qu-it.poor .qu-it-ic,.qu-it.sold .qu-it-ic{opacity:.5}
.qu-it.poor .qu-it-n{color:var(--r4)}
.qu-sh-f{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--qp) * 4);flex-wrap:wrap}
.qu-sh-ready{display:flex;flex-wrap:wrap;gap:calc(var(--qp) * 3);margin-top:calc(var(--qp) * 3)}
.qu-touch .qu-sh-ready{margin-top:calc(var(--qp) * 9)}   /* 上面對齊＋整數格位移（置中會落在半格上，字會糊） */
.qu-rd{display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:0 calc(var(--qp) * 3) 0 calc(var(--qp) * 2);background:var(--k1);color:var(--s2);box-shadow:0 0 0 var(--qp) var(--k0)}
.qu-rd.on{background:var(--gr2);color:var(--s5)}

/* 結算、全滅 */
.qu-rs{align-items:center;text-align:center}
.qu-rs-t{color:var(--s3)}
.qu-rs.wipe .qu-rs-t{color:var(--r4)}
.qu-rs-list{display:flex;gap:calc(var(--qp) * 4);justify-content:center}
.qu-st{display:flex;flex-direction:column;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 4) calc(var(--qp) * 5);min-width:calc(var(--qp) * 72)}
.qu-st-h{display:flex;align-items:center;gap:calc(var(--qp) * 2);white-space:nowrap;color:var(--s3)}
.qu-st small{color:var(--s2);white-space:nowrap;font-size:var(--f12)}
.qu-rs-p{justify-content:center;color:var(--s3)}
.qu-rs-sv{color:var(--gr5)}
.qu-spin{display:inline-block;width:calc(var(--qp) * 5);height:calc(var(--qp) * 5);background:var(--g3);box-shadow:0 0 0 var(--qp) var(--k0);animation:quSpin .8s steps(4) infinite}

/* 大面板開著、商店／結算時：資訊列、按鈕藏起來 */
.qu-modal-on :is(.qu-hud,.qu-pausebtn,.qu-upb,.qu-tr,.qu-stack,.qu-fx,.qu-pad,.qu-joyzone,.qu-keys,.qu-shopbar,.qu-bubble){visibility:hidden}
.qu-busy :is(.qu-pad,.qu-joyzone,.qu-keys){opacity:0;pointer-events:none}
.qu-paused :is(.qu-pad,.qu-joyzone){pointer-events:none}

/* ---------- 手機直拿：選職業、商店上下排 ---------- */
.qu-port .qu-cs-body{flex-direction:column}
.qu-port .qu-cs-list{align-self:center}
.qu-port .qu-sh-list{grid-template-columns:1fr}
.qu-port .qu-it{flex-direction:row;text-align:left;justify-content:flex-start}
.qu-port .qu-it-tx{flex:1}
.qu-port .qu-sh-h{flex-wrap:wrap}
.qu-port .qu-sh-st{flex-basis:100%;white-space:normal}
.qu-port .qu-rs-list{flex-direction:column}
.qu-land .qu-panel{gap:calc(var(--qp) * 3);padding:calc(var(--qp) * 13) calc(var(--qp) * 9) calc(var(--qp) * 8)}
.qu-land .qu-sh-list{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- 一直重複的動畫（一格一格跳：steps） ---------- */
@keyframes quIn{from{opacity:0;translate:0 calc(var(--qp) * 4)}}
@keyframes quBob{50%{translate:0 calc(var(--qp) * -1)}}
@keyframes quSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.qu-fl-tip canvas,.qu-spin,.qu-bubble{animation:none}}