#touch {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.stick {
  position: absolute;
  bottom: 24px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #2b2a2855;
  border: 3px solid #fff8e688;
  pointer-events: auto;
  touch-action: none;
}
.stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #fff8e6cc;
}
#lstick {
  left: 24px;
}
#rstick {
  right: 24px;
}
#tbtn {
  position: absolute;
  right: 170px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 8px;
  pointer-events: auto;
}
/* Fixed places on foot, whatever else shows (#330): the grid is flipped so row 1 is the bottom one. READ/grab/pet sits
   bottom left, get in bottom right, TALK/SIGNAL above them, RUN/JUMP on top; anything else stacks higher. The camera is
   up by the settings cog. */
#tbtn,
#tbtn button {
  transform: scaleY(-1);
}
#touch:has(#rstick[hidden]) #tbtn {
  [data-b='act'] {
    grid-area: 1 / 1;
  }
  [data-b='enter'] {
    grid-area: 1 / 2;
  }
  [data-b='talk'] {
    grid-area: 2 / 1;
  }
  [data-b='emote'] {
    grid-area: 2 / 2;
  }
  [data-b='sprint'] {
    grid-area: 3 / 1;
  }
  [data-b='jump'] {
    grid-area: 3 / 2;
  }
  /* Not there right now: the slot stays, empty, so the others don't shift into it (beats the global [hidden] none). */
  :is([data-b='act'], [data-b='enter'], [data-b='talk'], [data-b='emote'], [data-b='sprint'], [data-b='jump'])[hidden] {
    display: block !important;
    visibility: hidden;
  }
}
/* The camera turn sits in the top row by the settings cog, on touch screens only. */
body:not(.touch) #tcam {
  display: none;
}
/* On foot the right stick is hidden: the buttons take its place by the edge. */
#touch:has(#rstick[hidden]) #tbtn {
  right: 24px;
}
#tbtn button {
  height: 52px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  touch-action: none;
}
#tbtn [data-b='act'] {
  background: var(--yellow);
}
#tbtn button.on {
  background: var(--red);
  color: var(--paper);
}
body.touch #hint {
  bottom: 170px;
}
body.touch #hint {
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 10px;
  max-width: min(92%, 420px);
}
body.touch #hint small {
  font-size: 11px;
}