/* Wrapper: centered, fluid, with safe-area padding on mobile */
.ctb-wrapper {
  margin: 0 auto;
  background: linear-gradient(to bottom, #1a1a40, #4b0082);
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: 12px;
  /* Pick the smaller of 92% viewport width or 560px */
  max-width: min(92vw, 560px);
  box-sizing: border-box;
}

/* Score scales with screen */
.ctb-wrapper #score {
  font-size: clamp(16px, 4vw, 24px);
  padding: clamp(6px, 2vw, 10px);
}

/* Canvas fills the wrapper and stays square */
.ctb-wrapper canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  display: block;
  margin: 0 auto 12px;
  border: 2px solid #fff;
  border-radius: 10px;
  /* prevent page scrolling when dragging on mobile */
  touch-action: none;
}

/* Start button scales and is finger-friendly */
.ctb-wrapper #startBtn {
  font-size: clamp(14px, 3.5vw, 18px);
  padding: clamp(10px, 3vw, 14px) clamp(14px, 4vw, 18px);
  min-height: 44px; /* recommended minimum touch target */
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* Tiny screens: tighten padding a bit */
@media (max-width: 360px) {
  .ctb-wrapper { padding: 8px; }
}