.touch-controls { position:absolute; inset:0; z-index:8; pointer-events:none; }
.touch-controls[hidden],.touch-menu[hidden] { display:none; }
.touch-controls button,.touch-move { pointer-events:auto; touch-action:none; }
.touch-controls button { min-height:44px; border-radius:6px; padding:9px 12px; font:600 13px/1.2 var(--ui-font); color:#f0f2f3; background:#171b20da; border:1px solid #aebfc24d; }
/* held: a button under a finger; on: a toggle that stays (Run, Crouch, Crawl). One look for both. */
.touch-controls button.held,.touch-controls button.on { background:#456578e8; border-color:#bad5e7; }
.touch-controls button:disabled { opacity:.45; }
/* In the play view a message sits at the top, clear of the thumb controls. */
body.ff-playview .toast { bottom:auto; top:calc(64px + env(safe-area-inset-top)); }
.touch-top { position:absolute; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); display:flex; justify-content:space-between; pointer-events:none; }
.touch-menu { position:absolute; top:calc(64px + env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); width:min(310px,calc(100% - 24px)); padding:8px; display:grid; gap:6px; grid-template-columns:1fr 1fr; background:#11161af2; border:1px solid #56646c; border-radius:9px; pointer-events:auto; max-height:calc(100% - 80px); overflow:auto; }
.touch-move { position:absolute; bottom:max(26px,env(safe-area-inset-bottom)); left:max(24px,env(safe-area-inset-left)); width:108px; height:108px; border:1px solid #d0e2eb66; background:#10182073; border-radius:50%; display:grid; place-items:center; }
.touch-knob { width:44px; height:44px; background:#c6dce260; border:1px solid #e0eef078; border-radius:50%; pointer-events:none; }
.touch-primary { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); right:max(14px,env(safe-area-inset-right)); display:grid; grid-template-columns:78px 78px; gap:6px; }
.touch-primary button { padding:8px 5px; }
.touch-zoom { display:flex; gap:4px; }
.touch-zoom { grid-column:1/-1; }
.touch-zoom button { flex:1; min-width:0; padding:4px; font-size:11px; }
.ff-touch #tape { touch-action:none; }
body.ff-playview { overflow:hidden; }
body.ff-playview .stage { position:fixed; inset:0; width:100%; height:100vh; height:100dvh; z-index:20; }
body.ff-playview .stage #tape { inset:0; width:100%; height:100%; }
body.ff-playview .stage .ref { display:none; }
body:not(.ff-playview) .touch-move,body:not(.ff-playview) .touch-primary,body:not(.ff-playview) #touchActions { display:none; }
@media (max-width:700px) {
  .ff-touch .bar button,.ff-touch .rail button,.ff-touch .rail summary { min-height:44px; }
  .ff-touch .rail input:not([type=range]),.ff-touch .rail select { font-size:16px; }
  .ff-touch .bar { padding:8px; gap:6px; }
  .ff-touch .brand { flex:1 0 100%; padding:4px; }
}