/* wild.css — 野外層的介面。**index.html 與 wild.html 共用同一份。**
*
* 為什麼是外部檔而不是各頁自己寫一份：野外現在是主線的一部分（出門就進來），
* 兩份會漂，而漂掉的那一份就是玩家真的看到的那一份。
* audit.mjs 的 readability 直接讀這一支，所以這裡的字級與字重跟鎮上同一套規矩：
* 功能性文字 ≥14px、對比 ≥4.5:1、font-weight 只有 400 與 600（design-canon §1／§4）。
*
* 配色不是鎮上那組紙色帶——野外白天的地面是亮的，淺色字放上去等於隱形。
* 所以介面一律走**深色藥丸底**：字在藥丸裡，藥丸浮在地上。
*/
.wu{
position:absolute; inset:0; overflow:hidden;
--wink:#eae7dd; --wink2:#b6b1a2; --wpill:#20232b; --wpill2:#2b2f38;
--wline:rgba(234,231,221,.18); --wwarn:#d99055; --wlate:#a294d6;
color:var(--wink);
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
font-weight:400;
-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.wu-cv{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
/* ── 天光條 ───────────────────────────────────────────────
填滿的是剩下的光。那一格刻度是「現在直線走回家，大概會剩這麼多」——
**它是低估值**（不算地形），所以它塑造不確定性、不解答不確定性。 */
.wu-top{
position:absolute; left:0; right:0; top:0; pointer-events:none;
padding:calc(10px + env(safe-area-inset-top)) 14px 0 14px;
}
.wu-lightbar{position:relative; height:6px; border-radius:3px; background:rgba(20,22,28,.42)}
.wu-fill{
position:absolute; left:0; top:0; bottom:0; border-radius:3px;
background:linear-gradient(90deg,#8f9aa6,#dad3bf); transition:background .5s ease-out;
}
.wu-lightbar.tight .wu-fill{background:linear-gradient(90deg,#8b6a49,var(--wwarn))}
.wu-lightbar.over .wu-fill{background:#4c4a66}
.wu-tick{
position:absolute; top:-4px; width:2px; height:14px; background:var(--wink);
border-radius:1px; transform:translateX(-1px); transition:opacity .3s ease-out;
}
.wu-lightbar.tight .wu-tick{background:var(--wwarn)}
/* 那一格刻度講的是什麼，寫成一句話擺在它下面。
刻度是圖、這一行是字；看得懂圖的人不用讀字，看不懂的人不用猜。 */
.wu-eta{
margin-top:7px; font-size:14px; color:var(--wink); letter-spacing:.04em;
font-variant-numeric:tabular-nums;
}
.wu-eta:not(:empty){
display:inline-block; background:rgba(20,22,28,.62); border-radius:4px; padding:2px 8px;
}
.wu-eta.tight{color:var(--wwarn)}
.wu-late{
margin-top:5px; font-size:14px; color:var(--wlate); letter-spacing:.04em;
font-variant-numeric:tabular-nums;
}
.wu-late:not(:empty){
display:block; width:fit-content; background:rgba(20,22,28,.62); border-radius:4px; padding:2px 8px;
}
/* 音。文字不是圖示——emoji 當 UI 元件是硬負面清單（design-canon §1）。 */
.wu-snd{
position:absolute; right:12px; top:calc(12px + env(safe-area-inset-top));
min-width:44px; min-height:44px; padding:0 12px;
border:1px solid var(--wline); border-radius:999px;
background:rgba(20,22,28,.56); color:var(--wink2);
font:inherit; font-size:14px; letter-spacing:.06em; cursor:pointer;
}
.wu-snd.on{color:var(--wink)}
/* 畫面外去處的名字。箭頭畫在畫布上，字放這裡——才不會跟著鏡頭一起轉。 */
.wu-marks{position:absolute; inset:0; pointer-events:none}
.wu-mk{
position:absolute; font-size:14px; letter-spacing:.02em; color:var(--wink2);
background:rgba(20,22,28,.70); border-radius:4px; padding:1px 6px; white-space:nowrap;
font-variant-numeric:tabular-nums;
}
/* 家那一格是另一級：黃銅、亮、永遠掛著。
前一版它跟地標共用同一個灰字小箭頭，真機上就是「看不出方向」。 */
.wu-mk.home{
color:#f0c68e; background:rgba(20,22,28,.72);
border:1px solid rgba(214,162,96,.55); padding:2px 8px;
}
/* 到了／換地形的當場承認 */
.wu-toast,.wu-ter{
position:absolute; left:0; right:0; text-align:center; pointer-events:none;
opacity:0; transition:opacity .25s ease-out;
}
.wu-toast{top:26%; font-size:18px; letter-spacing:.12em}
.wu-ter{top:35%; font-size:14px; letter-spacing:.20em; color:var(--wink2)}
.wu-toast span,.wu-ter span{
display:inline-block; background:rgba(20,22,28,.64); border-radius:4px; padding:3px 12px;
}
/* ── 左下那一欄 ───────────────────────────────────────────
上面：鎮上今天缺什麼（題目）。下面：你身上有什麼（現況）。
兩條疊在一起才讀得出「還差多少」，分開放就變成兩件事。 */
.wu-btm{
position:absolute; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom));
display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none;
}
/* 缺什麼。**題目給、答案不給**：只寫缺哪幾樣、還差幾份，不寫哪裡有。 */
.wu-need{display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:14px}
.wu-need em{
font-style:normal; color:var(--wink2); letter-spacing:.08em;
background:rgba(20,22,28,.70); border-radius:4px; padding:2px 7px;
}
.wu-nchip{
display:inline-flex; align-items:center; gap:4px;
background:rgba(20,22,28,.70); border:1px solid rgba(214,162,96,.55); border-radius:999px;
padding:2px 9px; font-size:14px; color:#f0c68e;
}
.wu-nchip i{font-style:normal; font-weight:600; font-variant-numeric:tabular-nums}
.wu-nchip.done{border-color:var(--wline); color:var(--wink2); opacity:.55}
/* ── 背上的東西 ───────────────────────────────────────────
「揹很重」不能只寫一個數字。這一條同時給三個讀法：
數字（揹著多少）、百分比（腳程剩多少）、還有那條會縮的橫線。
**每一格都是一顆鈕**：點哪一格就放下哪一樣。所以這一列吃 pointer-events，
而且每一格的命中框要撐到 44px（拇指是物理尺寸，不是版面比例）—— 用 ::after 撐，
不是把藥丸本身加高，不然一列藥丸會胖成一條橫幅。 */
.wu-bag{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.wu-chip{
position:relative; display:inline-flex; align-items:center; gap:4px;
background:rgba(20,22,28,.60); border:1px solid var(--wline); border-radius:999px;
padding:7px 11px; font:inherit; font-size:14px; color:var(--wink2);
pointer-events:auto; cursor:pointer;
transition:transform .2s ease-out;
}
/* 藥丸本身 ~33px（14px 字＋上下 7px＋框），命中框往外撐 6px ＝ **45px**，過拇指地板。
撐命中框不是把藥丸加高：一列藥丸真的長到 44px 會胖成一條橫幅。
列間距 12px > 兩邊各撐 6px，所以上下兩排的命中框只重疊 0–2px。 */
.wu-chip::after{content:''; position:absolute; left:-4px; right:-4px; top:-6px; bottom:-6px}
.wu-chip i{font-style:normal; font-weight:600; color:var(--wink); font-variant-numeric:tabular-nums}
.wu-chip.bump{transform:translateY(-2px)}
.wu-chip:active{background:rgba(20,22,28,.82)}
/* 快捷鈕下一個會丟掉的就是這一格。「先放最不值錢的」這條規則寫在畫面上，不寫在說明裡。 */
.wu-chip.next{border-color:var(--wwarn); background:rgba(20,22,28,.78)}
.wu-chip.next b{color:var(--wwarn)}
.wu-load{
display:inline-flex; align-items:center; gap:7px;
background:rgba(20,22,28,.60); border-radius:999px; padding:2px 10px;
font-size:14px; color:var(--wink); font-variant-numeric:tabular-nums;
}
.wu-load em{font-style:normal; color:var(--wink2)}
/* 傷。跟「揹著」放同一條，因為它們吃的是同一件事——腳程。 */
.wu-load em.bad{color:var(--wwarn)}
.wu-loadbar{width:44px; height:4px; border-radius:2px; background:rgba(234,231,221,.20); overflow:hidden}
.wu-loadbar i{display:block; height:100%; background:var(--wwarn); transition:width .25s ease-out}
/* ── 那三顆鈕 ─────────────────────────────────────────────
打、撿、放下**永遠都在畫面上**，不進選單：這一層的決定就是這三顆。
用不了的時候不消失、只變淡——鈕會消失的話玩家得先學會它什麼時候在。
三顆並排在 390 寬要留得下，所以 min-width 從 88 收到 76（命中高度 52 不動）。 */
/* 這一列現在橫跨整個寬度（三顆鈕要排得開），所以**它自己不吃指標事件**，
只有鈕吃。不然畫面底部會多一條 52px 高、按不出搖桿的死帶。 */
.wu-acts{
position:absolute; right:12px; left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
display:flex; gap:8px; justify-content:flex-end; pointer-events:none;
}
.wu-b{
min-width:76px; min-height:52px; padding:6px 10px; pointer-events:auto;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
background:rgba(20,22,28,.66); border:1px solid var(--wline); border-radius:14px;
color:var(--wink); font:inherit; cursor:pointer;
transition:border-color .2s ease-out, opacity .2s ease-out;
}
.wu-b b{font-size:15px; font-weight:600; letter-spacing:.06em}
.wu-b span{font-size:14px; color:var(--wink2); white-space:nowrap}
.wu-b:active{border-color:rgba(234,231,221,.42)}
.wu-b.dim{opacity:.42}
/* 腳邊那顆剛好是這一帖還缺的。**只換邊框不換字**：多一行字要多讀一次，
而這一格是「要不要彎腰」這種零點五秒的決定。 */
.wu-b.want{border-color:rgba(214,162,96,.75)}
/* ── 卡片（開場／回到鎮上）─────────────────────────────── */
.wu-modal{
position:absolute; inset:0; display:none; align-items:center; justify-content:center;
padding:22px; background:rgba(14,16,20,.62); z-index:6;
}
.wu-modal.on{display:flex}
.wu-card{
width:100%; max-width:340px; max-height:82%; overflow-y:auto;
background:var(--wpill2); border:1px solid var(--wline); border-radius:16px;
padding:20px 20px 14px;
}
.wu-card h3{margin:0 0 12px; font-size:17px; font-weight:600; letter-spacing:.1em}
.wu-card p{margin:0 0 9px; font-size:14px; color:var(--wink2); line-height:1.65}
.wu-card p:first-of-type{color:var(--wink)}
.wu-haul{display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 4px}
.wu-acts2{display:flex; gap:8px; margin-top:14px}
.wu-acts2 button{
flex:1; min-height:46px; border:1px solid var(--wline); background:transparent;
color:var(--wink); font:inherit; font-size:15px; border-radius:12px; cursor:pointer;
}
.wu-acts2 button:active{background:rgba(234,231,221,.08)}
@media (prefers-reduced-motion:reduce){.wu *{animation:none!important; transition:none!important}}