.touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

body.touch-on .touch.live {
  display: block;
}

.stick-zone {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  pointer-events: auto;
  touch-action: none;
}

/* a custom layout (Settings, Button layout) sizes the stick on top of the button size; the knob
   inherits the base's --stick */
.stick-base {
  --stick: calc(var(--btn) * var(--stick-size, 1));

  position: absolute;
  width: calc(128px * var(--stick));
  height: calc(128px * var(--stick));
  margin: calc(-64px * var(--stick)) 0 0 calc(-64px * var(--stick));
  border-radius: var(--radius-round);
  background: radial-gradient(circle, var(--color-stick-fill) 0 55%, var(--color-stick-ring) 56%);
  border: 2px solid var(--color-stick-border);
  pointer-events: none;
  transition: opacity var(--duration-quick);
  opacity: 0.55;
}

.stick-base.on {
  opacity: 1;
  transition: none;
}

body.stick-fixed .stick-base {
  opacity: 0.85;
}

body.stick-hidden .stick-zone {
  display: none;
}

.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(56px * var(--stick));
  height: calc(56px * var(--stick));
  margin: calc(-28px * var(--stick)) 0 0 calc(-28px * var(--stick));
  border-radius: var(--radius-round);
  background: var(--color-stick-knob);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-knob);
}

.stick-base.on .stick-knob {
  background: var(--color-stick-knob-active);
}

.tb-pause {
  position: absolute;
  top: calc(8px + var(--sat));
  right: calc(8px + var(--sar));
  width: 44px;
  height: 44px;
  pointer-events: auto;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  background: var(--color-touch-pause);
  border: 2px solid var(--color-touch-pause-border);
  border-radius: var(--radius-xl);
  color: var(--color-text);
  cursor: pointer;
}

.tb-pause:active {
  background: var(--color-accent);
  color: var(--color-ink);
}

.rotate {
  display: none;
}

/* the hint follows the title's note in the column rather than sitting on the bottom edge, where a
   note that wraps on a narrow phone ran into it */
@media (orientation: portrait) {
  body.touch-on .rotate {
    display: block;
    max-width: 30ch;
    margin: 4px 0 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    pointer-events: none;
  }
}