/* Lớp điều khiển cảm ứng (B2 — core/touch.js). Chỉ style phần tử của TouchControls: đế + núm joystick nổi.
   Đế R 62 px (DESIGN_V2 §0 D5, §3.4): nghỉ ở (safe-l + 74, H − safe-b − 74) mờ 40 %, chạm thì hiện đủ tại điểm chạm.
   Chỉ transform/opacity (U7 §5.5); không bắt sự kiện (pointer-events:none) — chạm đi xuyên xuống canvas. */
.tc-stick{
  --tc-r:62px;
  position:fixed; left:0; top:0; z-index:var(--z-controls,20);
  width:calc(var(--tc-r) * 2); height:calc(var(--tc-r) * 2);
  border-radius:50%; pointer-events:none; contain:layout paint style;
  border:2px solid rgba(224,184,98,.55);
  background:radial-gradient(circle at 50% 50%, rgba(10,22,24,.30) 0 45%, rgba(10,22,24,.55) 70%, rgba(95,184,162,.22) 100%);
  box-shadow:inset 0 0 0 1px rgba(95,184,162,.38);
  opacity:1; transition:opacity var(--dur-fast,120ms) var(--ease,ease);
  will-change:transform;
}
.tc-stick.tc-idle{opacity:.4}
.tc-stick.tc-off{display:none}
.tc-knob{
  position:absolute; left:50%; top:50%;
  width:calc(var(--tc-r) * .84); height:calc(var(--tc-r) * .84);
  margin:calc(var(--tc-r) * -.42) 0 0 calc(var(--tc-r) * -.42);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 38% 34%, rgba(255,240,205,.95), rgba(224,184,98,.92) 46%, rgba(180,138,60,.95) 100%);
  border:1px solid rgba(12,15,19,.6);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  will-change:transform;
}
/* Chỉ hiện ở giao diện cảm ứng (layout.js đặt data-ui trên <html>); desktop dùng chuột + phím. */
html[data-ui="desktop"] .tc-stick{display:none}
@media (hover:hover) and (pointer:fine){ html:not([data-ui]) .tc-stick{display:none} }