/* 方塊山大逃亡：第五關「方塊遠征」的介面（src/quest-ui.js）。全部 .qu- 開頭，放在 .qu-ui 底下，不影響 style.css
   全部像素風（QUEST-SPEC 第 0.1、0.2 節）：
   - 像素格 --qp（1 格＝幾個 CSS px，整數，quest-ui.js 照畫面算、整合時改成畫面組給的值）；邊框、圖示、點陣數字都是它的整數倍
   - 面板、按鈕：深色像素外框（四邊各一格、角缺一格＝階梯圓角）＋上亮下暗的內邊；按鈕底下一層深色當側面，按下去往下沉
   - 平塗色、不用玻璃模糊、不用 emoji；配色照大關（.qu-th-grass 草原：嫩綠、土黃、天藍、白、點綴橘紅＋深色描邊）
   - 中文用像素字型「俐方體 11 號」子集（public/fonts/bp-quest-pixel.woff，SIL OFL 1.1）；字級只用 12px 的整數倍（--qf），字才不會糊
   三種版面（quest-ui.js 照視窗大小加 class）：.qu-land 手機橫拿（高度 < 560，主要）、.qu-port 手機直拿、.qu-wide 寬畫面；.qu-touch＝觸控（搖桿、按鈕大）
   手機的手勢：全部不能選字、長按不跳選單／放大鏡；按鈕和面板 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;--qpn:2;--qf:1;--mb:1;--ba:84px;--bj:72px;--bs:64px;--bl:64px;
  --q-gap:max(10px,calc(var(--qp) * 4));--q-lab:calc(16px * var(--qf));
  --q-sat:env(safe-area-inset-top,0px);--q-sab:env(safe-area-inset-bottom,0px);--q-sal:env(safe-area-inset-left,0px);--q-sar:env(safe-area-inset-right,0px);
  /* 草原的配色表 */
  --q-ol:#26301e;--q-ink:#26301e;--q-ink2:#5d6447;
  --q-tan:#f4e4b4;--q-tan-hi:#fff6d8;--q-tan-lo:#d4b878;
  --q-earth:#dcab48;--q-earth-hi:#f6d27a;--q-earth-lo:#a4782c;
  --q-grass:#7cc850;--q-grass-hi:#b4ec80;--q-grass-lo:#4c9632;--q-grass-dk:#2f6a28;
  --q-sky:#6cc0ee;--q-sky-hi:#b6e6fb;--q-sky-lo:#3a8cc4;
  --q-white:#fbfaf0;
  --q-red:#ec6040;--q-red-hi:#ff9c74;--q-red-lo:#b13a20;
  --q-dark:#33402c;--q-dark-hi:#56664a;--q-dark-lo:#1c2418;
  --q-sign:#f2c230;--q-sign-hi:#ffe27a;--q-sign-lo:#c8961c;
  --q-hp:#5fd06a;--q-hp-hi:#b4f4a8;--q-hp-lo:#2e9a46;
  --q-mp:#4aa8f0;--q-mp-hi:#b4e0ff;--q-mp-lo:#2368b8;
  --q-xp:#f2b630;--q-xp-hi:#ffe48a;--q-xp-lo:#b87c10;
  --q-font:"BPQuestPixel",var(--display,"Huninn","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif);
  position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  font-family:var(--q-font);font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf));color:var(--q-ink);
  -webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed;
}
.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}   /* :where＝不加權重，.qu-btn／.qu-pb 的底色才蓋得過 */
.qu-ui button:focus-visible{outline:calc(var(--qp) * 2) solid var(--q-red);outline-offset:calc(var(--qp) * 2)}
.qu-ui canvas,.qu-ui i{-webkit-user-drag:none}
.qu-ui b{font-weight:400}
.qu-ui kbd{font:inherit}

/* ---------- 像素零件 ---------- */
/* 圖示：程式畫的像素圖（16×16 含外框），最近鄰放大 */
.qu-ic{display:inline-block;flex:none;width:calc(16px * var(--qpn) * var(--mb));height:calc(16px * var(--qpn) * var(--mb));background:no-repeat center/100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;font-style:normal;vertical-align:middle}
.qu-ic.qu-mini{width:calc(10px * var(--qpn) * var(--mb));height:calc(10px * var(--qpn) * var(--mb))}
.qu-ic.qu-mini2{width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
/* 點陣數字（quest-ui.js 用 canvas 畫，寬高由 JS 設成 --qp 的整數倍） */
.qu-dg{display:inline-block;flex:none;image-rendering:pixelated;image-rendering:crisp-edges;vertical-align:middle}
/* 面板：外框四邊一格（角缺一格）＋下面一格影子、上亮下暗 */
.qu-box{background:var(--q-tan);margin:var(--qp);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),
    0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),
    inset 0 var(--qp) 0 0 var(--q-tan-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-tan-lo)}
/* 按鈕：側面（下面兩格深色）＋外框；按下去往下 2 格、側面不見 */
.qu-btn{--bg:var(--q-tan);--hi:var(--q-tan-hi);--lo:var(--q-tan-lo);--sd:var(--q-earth-lo);
  background:var(--bg);margin:var(--qp) var(--qp) calc(var(--qp) * 4);position:relative;
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),
    0 calc(var(--qp) * 3) 0 0 var(--sd),calc(var(--qp) * -1) calc(var(--qp) * 3) 0 0 var(--q-ol),var(--qp) calc(var(--qp) * 3) 0 0 var(--q-ol),0 calc(var(--qp) * 4) 0 0 var(--q-ol),
    inset 0 var(--qp) 0 0 var(--hi),inset 0 calc(var(--qp) * -1) 0 0 var(--lo)}
.qu-btn:active,.qu-btn.on{transform:translateY(calc(var(--qp) * 2));
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),
    0 calc(var(--qp) * 2) 0 0 var(--q-ol),inset 0 var(--qp) 0 0 var(--lo),inset 0 calc(var(--qp) * -1) 0 0 var(--hi)}
.qu-dark{--bg:var(--q-dark);--hi:var(--q-dark-hi);--lo:var(--q-dark-lo);--sd:#10160c;color:var(--q-white)}
/* 大面板（選職業、商店、結算）：嫩綠的框，裡面放土黃的卡片 */
.qu-frame{background:var(--q-grass);margin:calc(var(--qp) * 2);position:relative;
  box-shadow:0 calc(var(--qp) * -2) 0 0 var(--q-ol),calc(var(--qp) * -2) 0 0 0 var(--q-ol),calc(var(--qp) * 2) 0 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 var(--q-ol),
    calc(var(--qp) * -1) calc(var(--qp) * -1) 0 0 var(--q-ol),var(--qp) calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) var(--qp) 0 0 var(--q-ol),var(--qp) var(--qp) 0 0 var(--q-ol),
    0 calc(var(--qp) * 4) 0 0 rgba(10,18,6,.4),
    inset 0 calc(var(--qp) * 2) 0 0 var(--q-grass-hi),inset 0 calc(var(--qp) * -2) 0 0 var(--q-grass-lo),inset calc(var(--qp) * 2) 0 0 0 var(--q-grass-hi),inset calc(var(--qp) * -2) 0 0 0 var(--q-grass-lo)}
/* 黃色指標牌：右邊是階梯箭頭（clip-path 由 JS 照像素格算），外框用 drop-shadow 的四個方向 */
.qu-signw{justify-self:start;align-self:start;margin:var(--qp);filter:drop-shadow(var(--qp) 0 0 var(--q-ol)) drop-shadow(calc(var(--qp) * -1) 0 0 var(--q-ol)) drop-shadow(0 var(--qp) 0 var(--q-ol)) drop-shadow(0 calc(var(--qp) * -1) 0 var(--q-ol)) drop-shadow(0 calc(var(--qp) * 2) 0 rgba(20,28,14,.35))}
.qu-sign{background:var(--q-sign);color:#1b1a12;display:flex;align-items:baseline;gap:calc(var(--qp) * 4);padding:calc(var(--qp) * 3) calc(var(--qp) * 14) calc(var(--qp) * 3) calc(var(--qp) * 5);white-space:nowrap;
  box-shadow:inset 0 var(--qp) 0 0 var(--q-sign-hi),inset 0 calc(var(--qp) * -2) 0 0 var(--q-sign-lo)}
.qu-sign-t,.qu-sign b{font-size:calc(24px * var(--qf));line-height:calc(28px * var(--qf))}
.qu-sign-s,.qu-sign span{font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf));opacity:.8}
.qu-sign-bad{background:var(--q-red);color:var(--q-white);box-shadow:inset 0 var(--qp) 0 0 var(--q-red-hi),inset 0 calc(var(--qp) * -2) 0 0 var(--q-red-lo)}

/* ---------- 上方：指標牌、自己、隊友、右上 ---------- */
.qu-top{position:absolute;left:calc(6px + var(--q-sal));right:calc(6px + var(--q-sar));top:calc(4px + var(--q-sat));display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--qp) * 2)}
.qu-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sign party tr" "me me tr";column-gap:calc(var(--qp) * 3);row-gap:calc(var(--qp) * 1);align-items:start}
.qu-head > .qu-signw{grid-area:sign}
.qu-me{grid-area:me;justify-self:start}
.qu-party{grid-area:party}
.qu-tr{grid-area:tr}
/* 自己：職業圖示｜名字＋等級｜血｜MP */
.qu-me{display:grid;grid-template-columns:auto auto auto;grid-template-areas:"ic nm lv" "ic hp hp" "ic mp mp";align-items:center;column-gap:calc(var(--qp) * 3);row-gap:var(--qp);padding:calc(var(--qp) * 2) calc(var(--qp) * 4) calc(var(--qp) * 3) calc(var(--qp) * 2)}
.qu-me-ic{grid-area:ic;align-self:center}
.qu-me-nm{grid-area:nm;white-space:nowrap}
.qu-me-lv{grid-area:lv;display:flex;align-items:center;gap:calc(var(--qp) * 2);justify-self:end}
.qu-hpbar{grid-area:hp}.qu-mpbar{grid-area:mp}
.qu-bar{display:flex;align-items:center;gap:calc(var(--qp) * 2)}
.qu-me.down{--q-tan:#f0b8a8;--q-tan-hi:#ffd8cc;--q-tan-lo:#c8806c}
.qu-me.bubble{--q-tan:#cfeaf8;--q-tan-hi:#ecf8ff;--q-tan-lo:#8cc4e0}
/* 分格的條：每格一個 <i>，裡面的 <b> 是填色（scaleX）；整格滿了亮一下、扣的時候碎掉 */
.qu-segs{display:inline-flex;gap:var(--qp);flex:none;padding:var(--qp);background:var(--q-ol)}
.qu-segs > i{position:relative;display:block;width:calc(var(--qp) * var(--mb) * 5);height:calc(var(--qp) * var(--mb) * 4);background:rgba(255,255,255,.14)}
.qu-segs > i > b{position:absolute;inset:0;display:block;background:var(--f,var(--q-hp));transform-origin:0 50%;box-shadow:inset 0 var(--qp) 0 0 var(--fh,var(--q-hp-hi)),inset 0 calc(var(--qp) * -1) 0 0 var(--fl,var(--q-hp-lo))}
.qu-mp,.qu-pc-mp{--f:var(--q-mp);--fh:var(--q-mp-hi);--fl:var(--q-mp-lo)}
.qu-mp > i{height:calc(var(--qp) * var(--mb) * 3)}
.qu-exp{--f:var(--q-xp);--fh:var(--q-xp-hi);--fl:var(--q-xp-lo)}
.qu-exp > i{width:calc(var(--qp) * var(--mb) * 4);height:calc(var(--qp) * var(--mb) * 3)}
.qu-segs.low{--f:var(--q-red);--fh:var(--q-red-hi);--fl:var(--q-red-lo);animation:quLow .8s steps(1) infinite}
.qu-shard{position:absolute;left:35%;top:20%;width:calc(var(--qp) * var(--mb) * 2);height:calc(var(--qp) * var(--mb) * 2);background:var(--f,var(--q-hp));box-shadow:0 0 0 var(--qp) var(--q-ol);opacity:0;pointer-events:none;z-index:2}
/* 隊友小血條 */
.qu-party{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:calc(var(--qp) * 2) calc(var(--qp) * 3);min-width:0}
.qu-pc{display:grid;grid-template-columns:auto auto;grid-template-areas:"ic nm" "ic hp" "ic mp";align-items:center;column-gap:calc(var(--qp) * 2);row-gap:var(--qp);padding:calc(var(--qp) * 2) calc(var(--qp) * 3) calc(var(--qp) * 2) calc(var(--qp) * 2);position:relative;
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),
    inset var(--qp) 0 0 0 var(--cc,#888),inset 0 var(--qp) 0 0 var(--q-tan-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-tan-lo)}
.qu-pc > .qu-ic{grid-area:ic;width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
.qu-pc-nm{grid-area:nm;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:calc(12px * var(--qf) * 5)}
.qu-pc-hp{grid-area:hp}.qu-pc-mp{grid-area:mp}
.qu-pc .qu-segs > i{width:calc(var(--qp) * var(--mb) * 4);height:calc(var(--qp) * var(--mb) * 3)}
.qu-pc .qu-pc-mp > i{height:calc(var(--qp) * var(--mb) * 2)}
.qu-pc-st{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:var(--qp);font-style:normal}
.qu-pc.down{--q-tan:var(--q-red);--q-tan-hi:var(--q-red-hi);--q-tan-lo:var(--q-red-lo);color:var(--q-white);animation:quBlink 1s steps(1) infinite}
.qu-pc.down > :not(.qu-pc-st){visibility:hidden}
.qu-pc.down .qu-pc-st{display:flex}
.qu-pc-st > span{display:none}
.qu-wide .qu-pc-st > span,.qu-port .qu-pc-st > span{display:inline}
.qu-pc.bubble{--q-tan:var(--q-sky);--q-tan-hi:var(--q-sky-hi);--q-tan-lo:var(--q-sky-lo)}
.qu-pc.bubble .qu-pc-st{display:flex;inset:auto;right:var(--qp);top:var(--qp)}
.qu-pc.bubble .qu-pc-st > span,.qu-pc.bubble .qu-pc-st > i{display:none}
.qu-land .qu-pc.bubble .qu-pc-st{right:auto;left:var(--qp)}
/* 右上：金幣、升級徽章、設定 */
.qu-tr{display:flex;align-items:flex-start;gap:calc(var(--qp) * 2);pointer-events:auto}
.qu-gold{display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 2) calc(var(--qp) * 4) calc(var(--qp) * 2) calc(var(--qp) * 2);pointer-events:none;min-height:calc(var(--qp) * 14)}
.qu-up,.qu-set{display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 2) calc(var(--qp) * 4);min-height:44px;min-width:44px;justify-content:center;white-space:nowrap}
.qu-up{--bg:var(--q-red);--hi:var(--q-red-hi);--lo:var(--q-red-lo);--sd:#7a2210;color:var(--q-white);animation:quPulse 1.2s steps(2) infinite}
/* 自動攻擊（開／關）：像素小開關，開著是嫩綠；開著時攻擊鍵左上角多一個「自動」 */
.qu-auto{display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 2) calc(var(--qp) * 3);min-height:44px;white-space:nowrap}
.qu-sw{position:relative;display:block;flex:none;width:calc(var(--qp) * var(--mb) * 11);height:calc(var(--qp) * var(--mb) * 6);background:var(--q-ol)}
.qu-sw i{position:absolute;left:var(--qp);top:var(--qp);bottom:var(--qp);width:calc(var(--qp) * var(--mb) * 5 - var(--qp));background:#b4ac98;box-shadow:inset 0 var(--qp) 0 0 #e0d8c4}
.qu-auto.on2{--bg:var(--q-grass);--hi:var(--q-grass-hi);--lo:var(--q-grass-lo);--sd:var(--q-grass-dk)}
.qu-auto.on2 .qu-sw{background:var(--q-grass-dk)}
.qu-auto.on2 .qu-sw i{left:auto;right:var(--qp);background:var(--q-white);box-shadow:inset 0 calc(var(--qp) * -1) 0 0 var(--q-grass-hi)}
.qu-auto-s{display:inline-block;min-width:calc(12px * var(--qf))}
.qu-atk-auto{display:none;position:absolute;left:calc(var(--qp) * -2);top:calc(var(--qp) * -4);font-style:normal;padding:0 calc(var(--qp) * 2);background:var(--q-grass);color:var(--q-ink);box-shadow:0 0 0 var(--qp) var(--q-ol)}
.qu-atk.auto .qu-atk-auto{display:block}
.qu-bt{display:flex;flex-direction:column;gap:var(--qp)}
.qu-bt > b{display:flex;align-items:center;gap:calc(var(--qp) * 2);white-space:nowrap}
.qu-bt > small{font-size:calc(12px * var(--qf));opacity:.85}
.qu-banner.qu-gateb{background:var(--q-red);color:var(--q-white);box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),inset 0 var(--qp) 0 0 var(--q-red-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-red-lo)}
.qu-gate-n{font-style:normal}
/* 上方的牌子（在流裡、置中，會把下面的往下推，不疊在別人上面） */
.qu-banner{align-self:center;display:flex;align-items:center;gap:calc(var(--qp) * 3);padding:calc(var(--qp) * 3) calc(var(--qp) * 6);max-width:100%;
  background:var(--q-sky);color:var(--q-ink);margin:var(--qp);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),
    inset 0 var(--qp) 0 0 var(--q-sky-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-sky-lo)}
.qu-goalb{background:var(--q-earth);box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),inset 0 var(--qp) 0 0 var(--q-earth-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-earth-lo);animation:quPulse 1s steps(2) infinite}
.qu-goal-n{font-style:normal;opacity:.85}
.qu-selfb.down{background:var(--q-red);color:var(--q-white);box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),inset 0 var(--qp) 0 0 var(--q-red-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-red-lo)}
.qu-flow{display:contents}
.qu-flow > *{align-self:center;pointer-events:auto}
.qu-toast{align-self:center;max-width:min(100%,calc(12px * var(--qf) * 30));text-align:center;padding:calc(var(--qp) * 3) calc(var(--qp) * 6);background:var(--q-dark);color:var(--q-white);margin:var(--qp);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 rgba(20,28,14,.35),inset 0 var(--qp) 0 0 var(--q-dark-hi)}

/* ---------- 名牌、浮動文字 ---------- */
.qu-tags,.qu-fx{position:absolute;inset:0;overflow:hidden}
.qu-fx{z-index:6}   /* 浮動文字在觸控鍵上面（不會被按鈕擋住；pointer-events 本來就是 none） */
.qu-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:var(--qp) calc(var(--qp) * 3) var(--qp) calc(var(--qp) * 2);white-space:nowrap;will-change:transform;background:var(--q-tan);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol)}
.qu-tag > i{width:calc(var(--qp) * var(--mb) * 4);height:calc(var(--qp) * var(--mb) * 4);flex:none;box-shadow:0 0 0 var(--qp) var(--q-ol)}
.qu-tag.down{background:var(--q-red);color:var(--q-white);animation:quBlink 1s steps(1) infinite}
.qu-tag.bubble{background:var(--q-sky)}
.qu-fl{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;white-space:nowrap}
.qu-fl > span{display:flex;align-items:center;gap:calc(var(--qp) * 2)}   /* 彈出、爆擊晃動由 quest-ui.js 用 Web Animations 做 */
.qu-fl canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.qu-fl b{color:var(--q-white);text-shadow:calc(var(--qf) * 1px) 0 0 var(--q-ol),calc(var(--qf) * -1px) 0 0 var(--q-ol),0 calc(var(--qf) * 1px) 0 var(--q-ol),0 calc(var(--qf) * -1px) 0 var(--q-ol),calc(var(--qf) * 1px) calc(var(--qf) * 1px) 0 var(--q-ol),calc(var(--qf) * -1px) calc(var(--qf) * 1px) 0 var(--q-ol),calc(var(--qf) * 1px) calc(var(--qf) * -1px) 0 var(--q-ol),calc(var(--qf) * -1px) calc(var(--qf) * -1px) 0 var(--q-ol)}
.qu-fl-word b{font-size:calc(12px * var(--qf));color:var(--q-white)}
.qu-fl-tip > span{background:var(--q-sign);padding:calc(var(--qp) * 2) calc(var(--qp) * 4);margin:var(--qp);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),inset 0 var(--qp) 0 0 var(--q-sign-hi),inset 0 calc(var(--qp) * -1) 0 0 var(--q-sign-lo);animation:quBob 1.2s steps(2) .2s infinite}
.qu-fl-tip b{color:#1b1a12;text-shadow:none}

/* ---------- 左下：搖桿（觸控才有） ---------- */
.qu-joyzone{position:absolute;left:0;bottom:0;width:min(46%,380px);height:min(62%,320px);pointer-events:auto;touch-action:none;display:none}
.qu-touch .qu-joyzone{display:block}
.qu-joy{position:absolute;left:calc(18px + var(--q-sal));bottom:calc(18px + var(--q-sab));width:calc(56px * var(--qpn) * var(--mb));height:calc(56px * var(--qpn) * var(--mb));background:no-repeat center/100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;will-change:transform;opacity:.9}
.qu-joy.on{opacity:1}
.qu-knob{position:absolute;left:50%;top:50%;width:calc(24px * var(--qpn) * var(--mb));height:calc(24px * var(--qpn) * var(--mb));margin:calc(-12px * var(--qpn) * var(--mb)) 0 0 calc(-12px * var(--qpn) * var(--mb));background:no-repeat center/100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;will-change:transform}
.qu-joy > .qu-ic{position:absolute;width:calc(10px * var(--qpn) * var(--mb));height:calc(10px * var(--qpn) * var(--mb));opacity:.75}
.qu-joy-l{left:calc(var(--qpn) * var(--mb) * 4px);top:50%;margin-top:calc(-5px * var(--qpn) * var(--mb))}
.qu-joy-r{right:calc(var(--qpn) * var(--mb) * 4px);top:50%;margin-top:calc(-5px * var(--qpn) * var(--mb))}
.qu-joy-d{left:50%;bottom:calc(var(--qpn) * var(--mb) * 3px);margin-left:calc(-5px * var(--qpn) * var(--mb))}
.qu-joy.dn .qu-joy-d{opacity:1;filter:drop-shadow(0 0 0 #fff) brightness(1.4)}
/* 鍵盤說明（電腦） */
.qu-keys{position:absolute;left:calc(10px + var(--q-sal));bottom:calc(10px + var(--q-sab));padding:calc(var(--qp) * 2) calc(var(--qp) * 4);white-space:nowrap;display:flex;align-items:center;gap:calc(var(--qp) * 1)}
.qu-touch .qu-keys{display:none}
.qu-ui kbd{display:inline-block;padding:0 calc(var(--qp) * 2);background:var(--q-dark);color:var(--q-white);margin:0 var(--qp);box-shadow:0 var(--qp) 0 0 var(--q-dark-lo)}

/* ---------- 右下：攻擊、跳、技能 1、2、兩格鎖著（照像素格對齊；手機每個鍵至少 64px、半透明） ---------- */
.qu-pad{position:absolute;right:calc(14px + var(--q-sar));bottom:calc(14px + var(--q-sab));width:0;height:0;pointer-events:none}
.qu-pb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qp);pointer-events:auto;touch-action:none;margin:0!important;
  --bg:rgba(244,228,180,.86);--hi:rgba(255,246,216,.9);--lo:rgba(196,168,104,.9);--sd:rgba(120,90,40,.9)}
.qu-pb{background:var(--bg);
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),
    0 calc(var(--qp) * 3) 0 0 var(--sd),calc(var(--qp) * -1) calc(var(--qp) * 3) 0 0 var(--q-ol),var(--qp) calc(var(--qp) * 3) 0 0 var(--q-ol),0 calc(var(--qp) * 4) 0 0 var(--q-ol),
    inset 0 calc(var(--qp) * 2) 0 0 var(--hi),inset 0 calc(var(--qp) * -2) 0 0 var(--lo)}
.qu-pb.on{transform:translateY(calc(var(--qp) * 2));
  box-shadow:0 calc(var(--qp) * -1) 0 0 var(--q-ol),calc(var(--qp) * -1) 0 0 0 var(--q-ol),var(--qp) 0 0 0 var(--q-ol),0 var(--qp) 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 var(--q-ol),
    inset 0 calc(var(--qp) * 2) 0 0 var(--lo),inset 0 calc(var(--qp) * -2) 0 0 var(--hi)}
.qu-pb > span:not([class]){font-size:calc(12px * var(--qf));color:var(--q-white);text-shadow:calc(var(--qf) * 1px) 0 0 var(--q-ol),calc(var(--qf) * -1px) 0 0 var(--q-ol),0 calc(var(--qf) * 1px) 0 var(--q-ol),0 calc(var(--qf) * -1px) 0 var(--q-ol)}
.qu-pb kbd{position:absolute;right:calc(var(--qp) * -2);bottom:calc(var(--qp) * -3);font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf))}
.qu-touch .qu-pb kbd{display:none}
.qu-atk{width:var(--ba);height:var(--ba);right:0;bottom:0;--bg:rgba(236,96,64,.86);--hi:rgba(255,156,116,.9);--lo:rgba(177,58,32,.9);--sd:rgba(110,30,14,.95)}
.qu-jump{width:var(--bj);height:var(--bj);right:calc(var(--ba) + var(--q-gap));bottom:0;--bg:rgba(108,192,238,.86);--hi:rgba(182,230,251,.9);--lo:rgba(58,140,196,.9);--sd:rgba(30,80,120,.95)}
.qu-sk{width:var(--bs);height:var(--bs);bottom:calc(var(--ba) + var(--q-gap) + var(--q-lab));
  --bg:color-mix(in srgb,var(--cc,#888) 82%,transparent);--hi:color-mix(in srgb,var(--cc,#888) 45%,#fff);--lo:color-mix(in srgb,var(--cc,#888) 70%,#000);--sd:color-mix(in srgb,var(--cc,#888) 45%,#000)}
.qu-sk1{right:calc((var(--ba) - var(--bs)) / 2)}
.qu-sk2{right:calc(var(--ba) + var(--q-gap) + (var(--bj) - var(--bs)) / 2)}
.qu-lock{width:var(--bl);height:var(--bl);bottom:calc(var(--ba) + var(--q-gap) + var(--q-lab) + (var(--bs) - var(--bl)) / 2);
  --bg:rgba(244,228,180,.42);--hi:rgba(255,255,255,.3);--lo:rgba(120,100,60,.3);--sd:rgba(60,50,30,.5)}
.qu-ui .qu-lock{box-shadow:none;--d:calc(var(--qp) * var(--mb));--dl:calc(var(--qp) * var(--mb) * 4);
  background:linear-gradient(90deg,var(--q-ol) 50%,transparent 0) top left/var(--dl) var(--d) repeat-x,linear-gradient(90deg,var(--q-ol) 50%,transparent 0) bottom left/var(--dl) var(--d) repeat-x,
    linear-gradient(0deg,var(--q-ol) 50%,transparent 0) top left/var(--d) var(--dl) repeat-y,linear-gradient(0deg,var(--q-ol) 50%,transparent 0) top right/var(--d) var(--dl) repeat-y,rgba(244,236,206,.28)}
.qu-ui .qu-lock.on{transform:none}
.qu-lock .qu-ic{opacity:.85;width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
.qu-l1{right:calc(var(--ba) + var(--q-gap) + (var(--bj) + var(--bs)) / 2 + var(--q-gap))}
.qu-l2{right:calc(var(--ba) + var(--q-gap) + (var(--bj) + var(--bs)) / 2 + var(--q-gap) * 2 + var(--bl))}
/* 技能鍵：圖示、名字（在鍵下面）、冷卻格、秒數、MP 不夠 */
.qu-sk-ic{position:relative;z-index:1}
.qu-sk-nm{position:absolute;top:calc(100% + var(--qp) * 4);left:50%;transform:translateX(-50%);white-space:nowrap;padding:0 calc(var(--qp) * 2);background:var(--q-dark);color:var(--q-white);font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf))}
.qu-cdw{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.qu-cdt,.qu-cdr{position:absolute;left:0;width:100%;background-color:rgba(18,24,14,.62);
  background-image:linear-gradient(90deg,rgba(0,0,0,.45) var(--qp),transparent var(--qp)),linear-gradient(0deg,rgba(0,0,0,.45) var(--qp),transparent var(--qp));background-size:25% 25%;opacity:0}
.qu-cdt{top:0;height:100%}
.qu-cdr{height:25%;background-size:25% 100%}
.qu-cdn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:none}
.qu-sk.cool .qu-cdn{display:block}
.qu-sk.cool .qu-sk-ic{filter:saturate(.4) brightness(.8)}
.qu-nomp{position:absolute;right:calc(var(--qp) * -2);top:calc(var(--qp) * -3);z-index:4;font-style:normal;display:none;padding:0 calc(var(--qp) * 2);background:var(--q-mp-lo);color:var(--q-white);box-shadow:0 0 0 var(--qp) var(--q-ol)}
.qu-sk.nomp .qu-nomp{display:block}
.qu-sk.nomp{--bg:rgba(150,150,150,.7);--hi:rgba(200,200,200,.8);--lo:rgba(90,90,90,.8);--sd:rgba(50,50,50,.9)}
.qu-sk.nomp .qu-sk-ic{filter:grayscale(1) brightness(.85)}

/* ---------- 大面板（選職業、商店、結算） ---------- */
.qu-modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,28,14,.55);pointer-events:auto;touch-action:manipulation;padding:calc(8px + var(--q-sat)) calc(8px + var(--q-sar)) calc(8px + var(--q-sab)) calc(8px + var(--q-sal));z-index:20}
.qu-modal > .qu-frame{animation:quIn .22s steps(3);max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:calc(var(--qp) * 3);padding:calc(var(--qp) * 5)}
.qu-busy .qu-pad,.qu-busy .qu-joyzone,.qu-busy .qu-keys{opacity:0;pointer-events:none}
.qu-modal-on :is(.qu-top,.qu-tags,.qu-fx,.qu-pad,.qu-joyzone,.qu-keys){visibility:hidden}
.qu-modal{will-change:transform;contain:layout paint}
/* 選職業：8 張卡，寬畫面／手機橫拿 4×2、手機直拿 2×4 */
.qu-cs{width:min(1100px,100%)}
.qu-cs-h{display:flex;align-items:center;gap:calc(var(--qp) * 4);flex-wrap:wrap}
.qu-cs-h p{margin:0;color:var(--q-white);text-shadow:0 calc(var(--qf) * 1px) 0 var(--q-grass-dk)}
.qu-cs-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--qp) * 3);min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:calc(var(--qp) * 2) var(--qp) var(--qp)}
.qu-cc{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--qp) * 2);text-align:left;padding:calc(var(--qp) * 2) calc(var(--qp) * 3) calc(var(--qp) * 3);min-width:0}
.qu-cc-top{display:flex;align-items:center;gap:calc(var(--qp) * 2);margin:calc(var(--qp) * -2) calc(var(--qp) * -3) 0;padding:calc(var(--qp) * 2) calc(var(--qp) * 3);background:var(--cc);color:var(--q-white);position:relative;
  box-shadow:inset 0 var(--qp) 0 0 color-mix(in srgb,var(--cc) 50%,#fff),inset 0 calc(var(--qp) * -1) 0 0 color-mix(in srgb,var(--cc) 60%,#000)}
.qu-cc-ic{width:calc(16px * var(--qpn) * var(--mb));height:calc(16px * var(--qpn) * var(--mb))}
.qu-cc-nm{display:flex;flex-direction:column;min-width:0}
.qu-cc-nm b{font-size:calc(24px * var(--qf));line-height:calc(28px * var(--qf));text-shadow:0 calc(var(--qf) * 1px) 0 rgba(0,0,0,.35)}
.qu-cc-nm small{font-size:calc(12px * var(--qf));opacity:.95}
.qu-cc-tk{position:absolute;right:var(--qp);top:calc(var(--qp) * -4);font-style:normal;padding:0 calc(var(--qp) * 2);background:var(--q-dark);color:var(--q-white);box-shadow:0 0 0 var(--qp) var(--q-ol)}
.qu-cc-st{display:grid;grid-template-columns:1fr 1fr;gap:var(--qp) calc(var(--qp) * 4)}
.qu-stat{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--qp) * 2)}
.qu-stat em{font-style:normal;color:var(--q-ink2)}
.qu-pips{display:inline-flex;gap:var(--qp);padding:var(--qp);background:var(--q-ol)}
.qu-pips i{width:calc(var(--qp) * var(--mb) * 3);height:calc(var(--qp) * var(--mb) * 3);background:rgba(255,255,255,.16)}
.qu-pips i.on{background:var(--q-earth);box-shadow:inset 0 var(--qp) 0 0 var(--q-earth-hi)}
.qu-cc-sks{display:flex;flex-direction:column;gap:var(--qp)}
.qu-cc-sk{display:flex;align-items:center;gap:calc(var(--qp) * 2);white-space:nowrap;overflow:hidden}
.qu-cc-mv{color:var(--q-ink2)}
.qu-cc-mv b{display:inline-block;margin-right:calc(var(--qp) * 2);padding:0 calc(var(--qp) * 2);background:var(--q-earth);color:#1b1a12}
.qu-cc.sel{--bg:var(--q-white);--hi:#fff;--lo:var(--q-tan-lo);--sd:var(--q-sign-lo);transform:translateY(calc(var(--qp) * -2));
  box-shadow:0 calc(var(--qp) * -2) 0 0 var(--q-sign),calc(var(--qp) * -2) 0 0 0 var(--q-sign),calc(var(--qp) * 2) 0 0 0 var(--q-sign),0 calc(var(--qp) * 2) 0 0 var(--q-sign),
    0 calc(var(--qp) * -3) 0 0 var(--q-ol),calc(var(--qp) * -3) 0 0 0 var(--q-ol),calc(var(--qp) * 3) 0 0 0 var(--q-ol),
    0 calc(var(--qp) * 5) 0 0 var(--sd),calc(var(--qp) * -3) calc(var(--qp) * 3) 0 0 var(--q-ol),calc(var(--qp) * 3) calc(var(--qp) * 3) 0 0 var(--q-ol),0 calc(var(--qp) * 6) 0 0 var(--q-ol),
    inset 0 var(--qp) 0 0 var(--hi)}
.qu-cs-f{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--qp) * 4)}
.qu-cs-hint{color:var(--q-white);text-shadow:0 calc(var(--qf) * 1px) 0 var(--q-grass-dk)}
.qu-go{--bg:var(--q-sign);--hi:var(--q-sign-hi);--lo:var(--q-sign-lo);--sd:#8a6410;color:#1b1a12;font-size:calc(24px * var(--qf));line-height:calc(28px * var(--qf));padding:calc(var(--qp) * 3) calc(var(--qp) * 8);min-height:48px;white-space:nowrap}
.qu-go.on{--bg:var(--q-tan);--hi:var(--q-tan-hi);--lo:var(--q-tan-lo);--sd:var(--q-earth-lo)}
/* 商店 */
.qu-sh{width:min(1000px,100%)}
.qu-sh-h{display:flex;align-items:center;gap:calc(var(--qp) * 4)}
.qu-sh-gold,.qu-sh-t{display:flex;align-items:center;gap:calc(var(--qp) * 2);padding:calc(var(--qp) * 2) calc(var(--qp) * 4)}
.qu-sh-gold{margin-left:auto}
.qu-sh-sum{display:flex;flex-wrap:wrap;gap:calc(var(--qp) * 2) calc(var(--qp) * 6);color:var(--q-white);text-shadow:0 calc(var(--qf) * 1px) 0 var(--q-grass-dk)}
.qu-sh-sum > span{display:flex;align-items:center;gap:calc(var(--qp) * 2)}
.qu-sh-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--qp) * 3);min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:var(--qp)}
.qu-it{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic ic" "tx tx" "p n";align-items:center;justify-items:start;gap:calc(var(--qp) * 2);text-align:left;padding:calc(var(--qp) * 3);min-width:0}
.qu-it-ic{grid-area:ic;justify-self:center;width:calc(16px * var(--qpn) * var(--mb) * 1.5);height:calc(16px * var(--qpn) * var(--mb) * 1.5)}
.qu-it-tx{grid-area:tx;display:flex;flex-direction:column;gap:var(--qp);min-width:0}
.qu-it-tx b{font-size:calc(12px * var(--qf))}
.qu-wide .qu-it-tx b{font-size:calc(24px * var(--qf));line-height:calc(28px * var(--qf))}
.qu-it-tx small{font-size:calc(12px * var(--qf));color:var(--q-ink2)}
.qu-it-p{grid-area:p;display:flex;align-items:center;gap:var(--qp)}
.qu-it-n{grid-area:n;justify-self:end;color:var(--q-ink2);white-space:nowrap}
.qu-it kbd{position:absolute;left:calc(var(--qp) * -2);top:calc(var(--qp) * -3)}
.qu-touch .qu-it kbd,.qu-touch .qu-cs-hint{display:none}
.qu-touch .qu-cs-f{justify-content:center}
.qu-it.poor,.qu-it.sold{--bg:#d6d0bc;--hi:#ebe6d4;--lo:#a8a08a;--sd:#7a7464;cursor:default}
.qu-it.poor .qu-it-ic,.qu-it.sold .qu-it-ic{filter:grayscale(1);opacity:.6}
.qu-it.poor .qu-it-n{color:var(--q-red-lo)}
.qu-sh-f{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--qp) * 4);flex-wrap:wrap}
.qu-sh-ready{display:flex;flex-wrap:wrap;gap:calc(var(--qp) * 2)}
.qu-rd{display:flex;align-items:center;gap:var(--qp);padding:var(--qp) calc(var(--qp) * 3) var(--qp) var(--qp);background:rgba(38,48,30,.35);color:var(--q-white)}
.qu-rd.on{background:var(--q-white);color:var(--q-ink);box-shadow:0 0 0 var(--qp) var(--q-ol)}
/* 結算、全滅 */
.qu-rs{width:auto;min-width:min(300px,100%);align-items:center;text-align:center}
.qu-rs > .qu-signw{align-self:center}
.qu-rs-list{display:flex;flex-direction:row;flex-wrap:nowrap;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) * 3) calc(var(--qp) * 5) calc(var(--qp) * 4);min-width:calc(12px * var(--qf) * 6);color:var(--q-ink);text-shadow:none}
.qu-st-h{display:flex;align-items:center;gap:calc(var(--qp) * 2);white-space:nowrap}
.qu-st small{color:var(--q-ink2);font-size:calc(12px * var(--qf));white-space:nowrap}
.qu-rs.wipe{background:#8a9a7a;box-shadow:0 calc(var(--qp) * -2) 0 0 var(--q-ol),calc(var(--qp) * -2) 0 0 0 var(--q-ol),calc(var(--qp) * 2) 0 0 0 var(--q-ol),0 calc(var(--qp) * 2) 0 0 var(--q-ol),0 calc(var(--qp) * 4) 0 0 rgba(10,18,6,.4),inset 0 calc(var(--qp) * 2) 0 0 #a8b898,inset 0 calc(var(--qp) * -2) 0 0 #5e6c50}
.qu-rs-p,.qu-rs-w{margin:0;color:var(--q-white);text-shadow:0 calc(var(--qf) * 1px) 0 var(--q-grass-dk);display:flex;align-items:center;gap:calc(var(--qp) * 3)}
.qu-spin{display:inline-block;width:calc(var(--qp) * var(--mb) * 4);height:calc(var(--qp) * var(--mb) * 4);background:var(--q-white);box-shadow:0 0 0 var(--qp) var(--q-ol);animation:quSpin .8s steps(4) infinite}

/* ---------- 手機橫拿：小一點、隊友只留圖示和條 ---------- */
.qu-land .qu-sign{padding-top:calc(var(--qp) * 2);padding-bottom:calc(var(--qp) * 2)}
.qu-land .qu-pc{grid-template-columns:auto auto;grid-template-areas:"ic hp" "ic mp";padding:var(--qp) calc(var(--qp) * 2) var(--qp) var(--qp)}
.qu-land .qu-pc-nm{display:none}
.qu-land .qu-set > span,.qu-land .qu-auto-x{display:none}
.qu-land .qu-modal > .qu-frame{padding:calc(var(--qp) * 3);gap:calc(var(--qp) * 2)}
.qu-land .qu-cs-h p{display:none}
.qu-land .qu-cc{gap:var(--qp);padding:calc(var(--qp) * 2)}
.qu-land .qu-cc-top{margin:calc(var(--qp) * -2) calc(var(--qp) * -2) 0;padding:var(--qp) calc(var(--qp) * 2)}
.qu-land .qu-cc-ic{width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
.qu-land .qu-cc-nm{flex-direction:row;align-items:baseline;gap:calc(var(--qp) * 3)}
.qu-land .qu-cc-nm b{font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf))}
.qu-land .qu-cc-sks{flex-direction:row;flex-wrap:wrap;gap:var(--qp) calc(var(--qp) * 3)}
.qu-land .qu-cc-sk .qu-ic{width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
.qu-land .qu-go{font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf));min-height:44px;padding:calc(var(--qp) * 2) calc(var(--qp) * 8)}
.qu-land .qu-it{grid-template-columns:auto 1fr;grid-template-areas:"ic tx" "p n";padding:calc(var(--qp) * 2)}
.qu-land .qu-it-ic{width:calc(16px * var(--qpn) * var(--mb));height:calc(16px * var(--qpn) * var(--mb))}
.qu-land .qu-it-tx small{display:none}

/* ---------- 手機直拿：指標牌＋右上一排，自己的面板一排，隊友一排（可以兩行）；按鈕三排 ---------- */
.qu-port .qu-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sign tr" "me tr" "party party"}
.qu-port .qu-sign{flex-direction:column;align-items:flex-start;gap:0}
.qu-port .qu-tr{display:grid;grid-template-columns:auto auto;justify-items:stretch;align-items:start;gap:calc(var(--qp) * 2)}
.qu-port .qu-gold{grid-column:1 / 3;justify-content:flex-end}
.qu-port .qu-set{grid-column:2;grid-row:3}
.qu-port .qu-up{grid-column:1;grid-row:3}
.qu-port .qu-auto{grid-column:1 / 3;grid-row:2;justify-content:center}
.qu-port .qu-set > span,.qu-port .qu-auto-x,.qu-port .qu-auto-s{display:none}
.qu-port .qu-party{justify-content:flex-start}
.qu-port .qu-lock,.qu-land .qu-lock{bottom:calc(var(--ba) + var(--q-gap) + var(--q-lab) + var(--bs) + var(--q-gap))}
.qu-port .qu-l1,.qu-land .qu-l1{right:calc((var(--ba) - var(--bl)) / 2)}
.qu-port .qu-l2,.qu-land .qu-l2{right:calc(var(--ba) + var(--q-gap) + (var(--bj) - var(--bl)) / 2)}
.qu-port .qu-cs-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.qu-port .qu-cs-h p{display:none}
.qu-port .qu-cc-nm b{font-size:calc(12px * var(--qf));line-height:calc(14px * var(--qf))}
.qu-port .qu-cc-ic{width:calc(16px * var(--qpn));height:calc(16px * var(--qpn))}
.qu-port .qu-cc-st{grid-template-columns:1fr}
.qu-port .qu-cs-f{justify-content:center}
.qu-port .qu-sh-list{grid-template-columns:1fr}
.qu-port .qu-it{grid-template-columns:auto 1fr auto;grid-template-areas:"ic tx p" "ic tx n"}
.qu-port .qu-it-ic{width:calc(16px * var(--qpn) * var(--mb));height:calc(16px * var(--qpn) * var(--mb))}
.qu-port .qu-sh-h{flex-wrap:wrap}
.qu-port .qu-sh-f{justify-content:center}
.qu-port .qu-sh-ready{justify-content:center}
.qu-port .qu-st{padding:calc(var(--qp) * 3) calc(var(--qp) * 2);min-width:0}

/* ---------- 一直重複的動畫（一格一格跳：steps）；一次性的（亮一下、晃一下、碎片、彈出）在 quest-ui.js 用 Web Animations 做 ---------- */
@keyframes quLow{50%{filter:brightness(1.45)}}
@keyframes quBlink{50%{filter:brightness(.8)}}
@keyframes quPulse{50%{filter:brightness(1.15)}}
@keyframes quIn{from{opacity:0;transform:translateY(calc(var(--qp) * 6))}}
@keyframes quBob{50%{translate:0 calc(var(--qp) * -2)}}
@keyframes quSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.qu-up,.qu-goalb,.qu-fl-tip > span,.qu-segs.low,.qu-pc.down,.qu-tag.down{animation:none}}