/* P2 手機操控（touch.mjs）。外部樣式表（CSP style-src 'self'）；JS 只改 class／dataset／CSS 變數。
   B17 版面（直拿 390×844、橫拿 844×390 檢查過；四邊安全區 env(safe-area-inset-*)）：
   ・左下搖桿；右下拇指區＝主要動作鍵（大鍵 80 px、其他 ≥ 56 px），主鍵上方一排情境鍵（⛽ 🔧 🚨 🚕 💦 🙌，用得到才出現），「⋯」展開次要按鈕格
   ・觸控時（body.tc-on，touch.mjs 掛上去時加）小地圖搬到左上（右下讓給拇指）；右上 HUD 小卡＋圖標列（hud-dock.css）；駕機時小地圖回右下（飛行觸控照 G3 版面）
   z-index 850：低於 HUD（900，pointer-events none 所以點得穿）、小地圖（1001）與飛行觸控（1002）。 */
.tc{position:fixed;inset:0;z-index:850;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  font:700 14px/1 var(--ui-font,system-ui,"Noto Sans TC",sans-serif);color:#fff;
  --sr:max(14px,env(safe-area-inset-right));--sb:max(14px,env(safe-area-inset-bottom));--sl:max(16px,env(safe-area-inset-left));
  --b-big:80px;--b-md:64px;--b-sm:56px;--stick:124px;--row2:96px;--row3:176px;--c2:90px;--c3:164px}
.tc[hidden],.tc[data-mode=air],.tc[data-mode=hidden]{display:none}
/* 桌機（有滑鼠）預設不顯示；?touch=1 → .tc-force */
@media (hover:hover) and (pointer:fine){.tc:not(.tc-force){display:none}}

/* 視角拖曳區：右半邊（按鈕、小地圖疊在上面） */
.tc-look{position:absolute;top:0;bottom:0;right:0;left:45%;pointer-events:auto;touch-action:none}

/* 搖桿 */
.tc-stick{position:absolute;left:var(--sl);bottom:calc(var(--sb) + 24px);width:var(--stick);height:var(--stick);border-radius:50%;
  pointer-events:auto;touch-action:none;background:radial-gradient(circle,#ffffff14 0 55%,#ffffff2a 56% 100%);box-shadow:inset 0 0 0 2px #ffffff50,0 2px 10px #0004}
.tc-stick.on{box-shadow:inset 0 0 0 2px #ffd23fcc,0 2px 10px #0004}
.tc-knob{--kx:0px;--ky:0px;position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:#ffffffd0;box-shadow:0 2px 8px #0006;transform:translate(var(--kx),var(--ky))}
.tc-stick:not(.on) .tc-knob{transition:transform .12s ease-out}

/* 按鈕（共用；全部 ≥ 56 px） */
.tc-btn{position:absolute;display:grid;place-items:center;align-content:center;width:var(--b-sm);height:var(--b-sm);padding:0;border:0;border-radius:50%;pointer-events:auto;touch-action:none;
  background:var(--ui-bg,#141820b8);color:#fff;font:700 14px/1.1 var(--ui-font,system-ui,"Noto Sans TC",sans-serif);box-shadow:inset 0 0 0 2px #ffffff38,0 2px 8px #0005;
  -webkit-tap-highlight-color:transparent;cursor:pointer;box-sizing:border-box}
.tc-btn.on{background:#ffd23f;color:#222;box-shadow:inset 0 0 0 2px #fff8,0 2px 8px #0005}
.tc-big{width:var(--b-big);height:var(--b-big);font-size:17px}
.tc-btn small{display:block;margin-top:2px;font-size:11px;font-weight:700}
.tc[data-mode=foot] .tc-btn:not([data-modes~=foot]),.tc[data-mode=drive] .tc-btn:not([data-modes~=drive]){display:none}

/* ── 右下拇指區：第 1 排 主鍵（開火／油門）、跳／煞車、⋯ ── */
.tc-fire,.tc-throttle{right:var(--sr);bottom:var(--sb)}
.tc-fire{background:#c62828cc}
.tc-fire.on{background:#ff5252;color:#fff}
.tc-throttle{background:#2e7d32cc}
.tc-throttle.on{background:#66bb6a;color:#fff}
.tc-jump,.tc-brake{right:calc(var(--sr) + var(--c2));bottom:calc(var(--sb) + 6px);width:var(--b-md);height:var(--b-md)}
.tc-brake{background:#c62828b8}
.tc-more{right:calc(var(--sr) + var(--c3));bottom:calc(var(--sb) + 10px);font-size:24px;letter-spacing:1px}
.tc.more-open .tc-more{background:#ffd23f;color:#222}
/* 第 2 排：E（有互動目標時亮起＋短動詞）、💊／手煞、🎒／喇叭 */
.tc-e{right:calc(var(--sr) + 8px);bottom:calc(var(--sb) + var(--row2));width:var(--b-md);height:var(--b-md);background:#ffd23fb8;color:#222}
.tc-e b{font-size:20px;line-height:1}
.tc-e.hot,.tc[data-mode=drive] .tc-e{background:#ffd23f;box-shadow:0 0 0 3px #fff9,0 0 16px #ffd23f99}
.tc-e.hot{animation:tc-pulse 1.2s ease-in-out infinite}
@keyframes tc-pulse{50%{box-shadow:0 0 0 6px #ffd23f55,0 0 18px #ffd23fcc}}
.tc-med,.tc-hb{right:calc(var(--sr) + var(--c2) + 4px);bottom:calc(var(--sb) + var(--row2) + 4px);font-size:22px}
.tc-hb{font-size:14px}
.tc .tc-btn.tc-bag,.tc-horn{right:calc(var(--sr) + var(--c3));bottom:calc(var(--sb) + var(--row2) + 4px);width:var(--b-sm);height:var(--b-sm);border-radius:50%;font-size:22px}
.tc-horn{font-size:14px}

/* 第 3 排：情境鍵列（setShown／setContext 只切 display；flex 自動靠右排） */
.tc-ctx{position:absolute;right:var(--sr);bottom:calc(var(--sb) + var(--row3));display:flex;flex-direction:row-reverse;flex-wrap:wrap-reverse;gap:10px;max-width:calc(100vw - 2 * var(--sr));pointer-events:none}
.tc-ctx .tc-btn{position:static}
.tc-fuel{width:56px;height:56px;background:#0b4ea2e0;color:#fff;font-size:24px}
.tc-shop{width:56px;height:56px;background:#c62828e0;color:#fff;font-size:24px}
.tc-taxi{width:56px;height:56px;background:#141820b8;font-size:22px}
.tc-taxi.on{background:#ffd400;color:#222}
.tc-duty{width:56px;height:56px;background:#141820b8;font-size:22px}
.tc-duty.on{background:#2f6bff;color:#fff}
.tc-spray{width:64px;height:64px;background:#0288d1d8;font-size:28px}
.tc-spray.on{background:#4fc3f7}
.tc-surrender{width:64px;height:64px;background:#fff;color:#222;font-size:28px;box-shadow:0 0 0 3px #ffd23f,0 2px 8px #0005}

/* 「⋯」次要按鈕格：直拿在情境鍵列上方往上長、橫拿在拇指區左邊 */
.tc-grid{position:absolute;right:var(--sr);bottom:calc(var(--sb) + var(--row3) + 68px);display:none;grid-template-columns:repeat(4,var(--b-sm));grid-auto-rows:var(--b-sm);gap:8px;
  direction:rtl;padding:8px;border-radius:16px;background:#0b0f16b0;pointer-events:none}
.tc.more-open .tc-grid{display:grid}
.tc-grid .tc-btn{position:static;direction:ltr;border-radius:14px;font-size:12px;line-height:1.15;padding:2px;text-align:center;word-break:keep-all;background:var(--ui-bg-strong,#141820e6)}
.tc-app{background:#ff7043d8}
.tc:not([data-logi]) .tc-wish,.tc:not([data-logi]) .tc-wishlist,.tc:not([data-police]) .tc-lights{display:none}

/* ── 橫拿／矮螢幕 ── */
@media (max-height:520px){
  .tc{--b-big:76px;--b-md:60px;--stick:116px;--row2:86px;--row3:156px;--c2:86px;--c3:156px}
  .tc-stick{bottom:calc(var(--sb) + 8px)}
  .tc-grid{right:calc(var(--sr) + var(--c3) + 66px);bottom:var(--sb);grid-template-columns:repeat(5,var(--b-sm))}
  .tc .tc-btn.tc-bag{right:calc(var(--sr) + var(--c3));bottom:calc(var(--sb) + var(--row2) + 4px)}
}

/* ── B17：觸控時其他介面的位置（小地圖左上、狀態列只在載具上、HUD 提示／toast／OSM 標示讓開拇指區） ── */
body.tc-on{--mm-touch:96px}
body.tc-on:not([data-tc-mode=air]) .mm{--mm-size:var(--mm-touch);left:var(--ui-edge-l,12px);top:var(--ui-edge-t,12px);right:auto;bottom:auto;align-items:flex-start}
body.tc-on:not([data-tc-mode=air]) .mm-info{max-width:min(240px,52vw);font-size:11px}
body.tc-on .tl{display:none}
body.tc-on[data-tc-mode=drive] .tl{display:block;left:var(--ui-edge-l,12px);top:calc(var(--ui-edge-t,12px) + var(--mm-touch) + 34px);padding:4px 10px;box-sizing:border-box;max-width:calc(var(--mm-touch) + 8px)}
body.tc-on[data-tc-mode=drive] .tl #st{overflow:hidden;text-overflow:ellipsis;font-size:11px}
/* OSM 標示（進場 6 s）：直拿＝搖桿正上方（窄、可換行）；橫拿＝下方置中（拇指區之間） */
body.tc-on .corner{right:auto;left:var(--ui-edge-l,12px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 168px);max-width:124px;line-height:1.35}
body.tc-on .ghud-prompt{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 256px);max-width:calc(100vw - 24px)}
body.tc-on .ghud-toasts{top:34%;width:calc(100vw - 24px)}
@media (max-height:520px){
  body.tc-on .corner{left:50%;transform:translateX(-50%);bottom:max(6px,env(safe-area-inset-bottom));max-width:none}
  body.tc-on[data-tc-mode=drive] .tl{left:calc(var(--ui-edge-l,12px) + var(--mm-touch) + 10px);top:var(--ui-edge-t,12px);max-width:none}
  body.tc-on .ghud-prompt{bottom:max(14px,env(safe-area-inset-bottom));max-width:calc(100vw - 2 * 240px)}
  body.tc-on .ghud-toasts{top:auto;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 56px);width:min(360px,calc(100vw - 2 * 240px));flex-direction:column-reverse}
}