* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #f5f0eb;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: ns-resize;
}
canvas {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Control buttons ── */
.ctrl-btn,
#sound-btn,
#tumble-btn {
  position: fixed;
  bottom: 16px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  padding: 8px 14px;
  font: 13px/1 system-ui, sans-serif;
  color: #555;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, transform 0.15s;
}
#sound-btn {
  right: 16px;
}
#tumble-btn {
  right: 120px;
}
#sound-btn:hover,
#tumble-btn:hover {
  background: rgba(0,0,0,0.1);
}
#sound-btn:active,
#tumble-btn:active {
  transform: scale(0.95);
}

/* Tumble button active state animation */
#tumble-btn.active {
  background: rgba(0,0,0,0.14);
}
#tumble-btn.active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  border: 2px solid rgba(0,0,0,0.08);
  animation: tumble-ring 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes tumble-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ── Responsive: stack buttons on small screens ── */
/* ── Version tag ── */
#version-tag {
  position: fixed;
  bottom: 16px;
  left: 16px;
  font: 11px/1 system-ui, sans-serif;
  color: rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 10;
}

/* ── Responsive: mobile ── */
@media (max-width: 768px) {
  #sound-btn { right: 8px; bottom: 8px; font-size: 12px; padding: 6px 10px; }
  #tumble-btn { right: 8px; bottom: 44px; font-size: 12px; padding: 6px 10px; }
  #version-tag { display: none; }
}
@media (max-width: 360px) {
  #sound-btn { right: 6px; bottom: 6px; font-size: 11px; padding: 5px 8px; }
  #tumble-btn { right: 6px; bottom: 38px; font-size: 11px; padding: 5px 8px; }
}