/* Touch layer: joystick bottom-left, E / I / Flex bottom-right. Only in play mode. */
body.touch[data-mode="play"] #touch { display: block; }

.joystick {
  position: absolute; left: 16px; bottom: calc(64px + var(--safe-b)); width: 150px; height: 150px;
  pointer-events: auto; touch-action: none;
}
.joy-ring { position: absolute; inset: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: rgba(17, 19, 24, .35); }
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.tbtns {
  position: absolute; right: 14px; bottom: calc(66px + var(--safe-b)); display: grid;
  grid-template-columns: 64px 84px; grid-template-rows: 64px 84px; gap: 8px; pointer-events: auto;
}
.tbtn {
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); background: rgba(17, 19, 24, .7); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; padding: 0;
  font: 800 20px var(--font); -webkit-touch-callout: none;
}
.tbtn .tbtn-label { font: 600 10px var(--font); color: var(--muted); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbtn.down { transform: scale(.92); background: rgba(61, 214, 255, .5); }
.tbtn-i { grid-column: 1; grid-row: 1; }
.tbtn-space { grid-column: 1; grid-row: 2; align-self: end; height: 64px; }
.tbtn-e { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 84px; height: 84px; font-size: 26px; }
.tbtn-e.ready { background: var(--accent); color: #1a0f00; border-color: #ffd29e; box-shadow: 0 0 0 4px rgba(255, 138, 30, .35); }
.tbtn-e.ready .tbtn-label { color: #3a2000; }

/* Desktop with a mouse: no touch layer, show the phone button in the taskbar. */
body:not(.touch) .tb-phone { display: inline-flex; }
body.touch .tb-phone { display: none; }