html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

canvas {
  display: block;
  background: #3a3d42;
  touch-action: none;
}

/* Touch controls. Hidden unless this is a touch device and a shift is running. */
#touch {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

body.touch-ui[data-phase='playing'] #touch,
body.touch-ui[data-phase='countdown'] #touch {
  display: flex;
}

.stick,
.tbtn {
  pointer-events: auto;
  touch-action: none;
}

/* Candy-colored, chunky and round, with a darker lip underneath. */
.stick {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255, 246, 226, 0.28);
  border: 3px solid #3b2b2b;
  box-shadow: 0 5px 0 rgba(59, 43, 43, 0.45), inset 0 0 0 8px rgba(23, 163, 156, 0.35);
}

.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #45c9c1, #17a39c 60%);
  border: 3px solid #3b2b2b;
  box-shadow: 0 4px 0 #0f7d77;
}

.pad {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: end;
}

.tbtn {
  --cap: #ffe08a;
  --lip: #d9ae3a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #3b2b2b;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 45%), var(--cap);
  box-shadow: 0 6px 0 var(--lip), 0 8px 0 rgba(59, 43, 43, 0.35);
  color: #3b2b2b;
  font: 900 10px "ui-rounded", "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  letter-spacing: 0.02em;
  padding: 0;
}

.tbtn svg {
  width: 26px;
  height: 26px;
  fill: #3b2b2b;
  stroke: #3b2b2b;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tbtn.sprint {
  --cap: #8fdcb8;
  --lip: #4fae85;
}

.tbtn.drop {
  --cap: #ffe08a;
  --lip: #d9ae3a;
}

.tbtn.drop svg {
  fill: none;
  stroke-width: 3;
}

.tbtn.big {
  grid-row: span 2;
  width: 92px;
  height: 92px;
  --cap: #ff7a66;
  --lip: #b83a2c;
  color: #fff6e2;
}

.tbtn.big svg {
  width: 36px;
  height: 28px;
  fill: #fff6e2;
}

.tbtn.active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--lip), 0 4px 0 rgba(59, 43, 43, 0.35);
}

/* On a phone held upright the lot is small; suggest turning it. */
#rotate {
  display: none;
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  margin: 0;
  text-align: center;
  color: #cfcfcf;
  font-size: 14px;
}

@media (orientation: portrait) {
  body.touch-ui #rotate {
    display: block;
  }
}