/* mobile.css — touch adaptation of the SAME voidblack UI (html.vb-touch only).
   Landscape phone is the target: compact pills, reachable panels, joysticks. */

/* beacon pill (all platforms — boot.js creates it) */
#vb-beacon{position:fixed;left:16px;bottom:8px;z-index:60;font-size:10px;letter-spacing:.08em;
  font-family:var(--mono);padding:4px 10px;border-radius:999px;background:var(--glass);
  border:1px solid var(--teal-trace);color:var(--dim);pointer-events:none;text-transform:uppercase}
#vb-beacon.on{color:var(--teal-mid);border-color:var(--teal-trace)}
#vb-beacon.off{color:var(--err);border-color:var(--err)}

html.vb-touch, html.vb-touch body{touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
html.vb-touch input, html.vb-touch textarea{-webkit-user-select:text;user-select:text}
html.vb-touch canvas#c{touch-action:none}

/* keyboard hint is meaningless on touch */
html.vb-touch #hint{display:none}
html.vb-touch #brand{font-size:9px;left:12px;top:10px}

/* ── top-right pills: compact + horizontally scrollable ── */
html.vb-touch #topright{left:110px;right:8px;top:8px;overflow-x:auto;scrollbar-width:none;
  justify-content:flex-end;padding-bottom:2px}
html.vb-touch #topright::-webkit-scrollbar{display:none}
html.vb-touch .pill{padding:8px 10px;font-size:11px;white-space:nowrap;flex:0 0 auto}

/* ── creation bar: clear of joysticks and side buttons ── */
html.vb-touch #bar{bottom:10px;width:min(400px,calc(100vw - 400px));gap:5px;padding:6px}
html.vb-touch #bar .btn{padding:8px 9px;font-size:12px}
html.vb-touch #bar .btn.primary{font-size:14px}
html.vb-touch #prompt{font-size:16px;padding:8px 10px;min-width:0}  /* 16px stops iOS zoom-on-focus */
html.vb-touch #scenefoot{top:52px;right:8px;bottom:auto}

/* ── panels: fit a landscape phone, scroll inside ── */
html.vb-touch #optsmenu,html.vb-touch #sessmenu,html.vb-touch #viewsmenu{
  top:52px;max-height:calc(100vh - 70px);overflow-y:auto}
html.vb-touch #chat{top:52px;bottom:76px;width:min(320px,44vw)}
html.vb-touch #ctxmenu button{padding:12px 14px;font-size:14px}
html.vb-touch .mini{padding:8px 12px}
html.vb-touch .handle{width:34px;height:34px;font-size:18px}
html.vb-touch input[type=range]{height:28px}

/* ── virtual joysticks ── */
.vb-stick{position:fixed;bottom:14px;z-index:55;width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,245,228,.05),rgba(0,21,16,.55) 70%);
  border:1px solid var(--teal-trace);backdrop-filter:blur(4px);touch-action:none;display:none}
html.vb-touch .vb-stick{display:block}
#vb-stick-l{left:14px}
#vb-stick-r{right:14px}
.vb-nub{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:rgba(0,245,228,.14);border:1px solid var(--teal);
  box-shadow:0 0 12px rgba(0,245,228,.25);transition:transform .05s linear;pointer-events:none}
#vb-stick-l::after,#vb-stick-r::after{position:absolute;inset:auto 0 -16px 0;text-align:center;
  font:9px var(--mono);color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
#vb-stick-l::after{content:"walk · turn"}
#vb-stick-r::after{content:"fly · strafe"}

/* ── sprint / home touch buttons ── */
.vb-tbtn{position:fixed;z-index:55;width:46px;height:46px;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:19px;background:var(--glass);
  border:1px solid var(--teal-trace);color:var(--teal-mid);touch-action:none}
html.vb-touch .vb-tbtn{display:flex}
.vb-tbtn.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 14px rgba(0,245,228,.35)}
#vb-sprint{right:138px;bottom:14px}
#vb-home{right:138px;bottom:70px}

/* ── portrait nudge ── */
#vb-rotate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(3,13,13,.92);color:var(--teal);font:13px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:30px;pointer-events:none}