/* Touch controls (phones/tablets), Bedrock-style layout. Only present when ui/touch.js is active (html.touch). */
html.touch, html.touch body { touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; }
html.touch #game { touch-action: none; }
html.touch button, html.touch .slot { touch-action: manipulation; }
html.touch #debug { display: none; }
#touch { position: fixed; inset: 0; pointer-events: none;
  --btn: min(58px, 14vh);           /* ▲ ▼ » buttons */
  --top: min(42px, 11vh);           /* top-centre buttons */
  --pad: min(150px, 36vh);          /* movement pad */
  --edge-l: max(16px, calc(env(safe-area-inset-left) + 4vw));
  --edge-r: max(16px, calc(env(safe-area-inset-right) + 3vw)); }

/* grey bevelled pixel buttons with dark icons */
#touch .tbtn { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: var(--btn); height: var(--btn); color: #262626; background: rgba(125, 125, 125, 0.55); border: 2px solid rgba(25, 25, 25, 0.85);
  border-radius: 4px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.38), inset -2px -3px 0 rgba(0, 0, 0, 0.3);
  -webkit-user-select: none; user-select: none; }
#touch .tbtn svg { width: 56%; height: 56%; filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.35)); pointer-events: none; }
#touch .tbtn.on { background: rgba(215, 215, 215, 0.8); box-shadow: inset -2px -2px 0 rgba(255, 255, 255, 0.4), inset 2px 3px 0 rgba(0, 0, 0, 0.3); }

/* right side: ▲ over ▼ on the edge, » between them to the left */
#touch .tbtn.up { right: var(--edge-r); top: calc(38% - var(--btn) / 2); }
#touch .tbtn.down { right: var(--edge-r); top: calc(57% - var(--btn) / 2); }
#touch .tbtn.fast { right: calc(var(--edge-r) + var(--btn) * 1.45); top: calc(47.5% - var(--btn) / 2); }
#touch .tbtn.up.flying { color: #1d4f8c; }

/* top centre */
.tbtns-top { position: absolute; left: 50%; top: calc(6px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 6px; }
#touch .tbtns-top .tbtn { position: relative; width: var(--top); height: var(--top); }
#touch .tbtns-top .tbtn.hidden { display: none; }

/* ••• inventory, attached to the right end of the hotbar like a tenth slot */
#touch .tbtn.inv { left: calc(50% + var(--s) * 91); bottom: 0; width: calc(var(--s) * 20); height: calc(var(--s) * 22); border-radius: 0;
  color: #eee; font: 700 calc(var(--s) * 7) / 1 system-ui, sans-serif; letter-spacing: 1px; background: rgba(95, 95, 95, 0.75); }

/* left: fixed movement pad */
.move-pad { position: absolute; left: var(--edge-l); top: calc(52% - var(--pad) / 2); width: var(--pad); height: var(--pad); box-sizing: border-box;
  background: rgba(170, 170, 170, 0.18); border: 2px solid rgba(230, 230, 230, 0.32); border-radius: 6px; opacity: 0.75; transition: opacity 0.15s; }
.move-pad.on { opacity: 1; }
.pad-knob { position: absolute; left: 26%; top: 26%; width: 48%; height: 48%; box-sizing: border-box;
  background: rgba(200, 200, 200, 0.3); border: 2px solid rgba(240, 240, 240, 0.45); border-radius: 4px; }

/* right: ring under the finger while looking around */
.look-ring { position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.2); display: none; }
.look-ring.on { display: block; }

#rotate-hint { display: none; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #111; color: #fff; font-size: 18px; text-align: center; padding: 24px; }
#rotate-hint .big { font-size: 64px; }
@media (orientation: portrait) { html.touch #rotate-hint { display: flex; } }
#touch .tbtn[data-unread]::after { content: attr(data-unread); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #e03c3c; color: #fff; font: 600 11px/18px system-ui, sans-serif; text-align: center; }
/* Cybertruck speedometer: top centre, clear of the move pad and buttons */
html.touch .speedo { bottom: auto; top: max(8px, env(safe-area-inset-top)); right: 50%; transform: translateX(50%); }