:root {
  --bg: #0f172a;
  --fg: #e2e8f0;
  --accent: #22c55e;
  --accent-2: #16a34a;
}

html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, Helvetica Neue, Arial;
  background: radial-gradient(1200px 800px at 50% 25%, #111827, var(--bg));
  color: var(--fg);
  overflow: hidden;
}

.stage { position: relative; width: 100vw; height: 100vh; }

.btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 18vw, 280px);
  height: clamp(64px, 8vw, 96px);
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: white;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 15px 40px rgba(34, 197, 94, 0.35), 0 6px 12px rgba(0,0,0,0.35);
  transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1),
              top 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms ease;
  transform-origin: 50% 50%;
  animation: glowPulse 2s infinite ease-in-out alternate;
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 24px rgba(34,197,94,.5), 0 0 60px rgba(34,197,94,.35); }
  100% { box-shadow: 0 0 80px rgba(34,197,94,.9),  0 0 160px rgba(16,185,129,.6); }
}

.hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .75;
  font-size: 1rem;
}

.timer {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(34,197,94,.5);
}