* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #2a0a18 0%, #15040c 60%, #0a0207 100%);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  /* keep mobile drags from scrolling, selecting or triggering callouts */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none; /* stop scrolling/zooming so dragging rotates on mobile */
  cursor: grab;
}

#scene.dragging {
  cursor: grabbing;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 22px 16px 46px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  z-index: 10;
}

.overlay h1 {
  color: #ff9ec4;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255, 45, 111, 0.85), 0 0 40px rgba(255, 0, 67, 0.5);
}

.overlay .hint {
  margin-top: 8px;
  color: rgba(255, 210, 226, 0.85);
  font-size: clamp(13px, 2vw, 16px);
}

.overlay .hint strong {
  color: #ff5c8a;
}