:root {
  --bg: #02040f;
  --burst-x: 50vw;
  --burst-y: 50vh;
  --neon-blue: #33d6ff;
  --neon-shadow: 0 0 8px #33d6ff, 0 0 20px #33d6ff;
  --text: #c9f6ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at center, #060e2a 0%, #02040f 60%, #010207 100%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.app {
  width: min(92vw, 760px);
  text-align: center;
  position: relative;
  z-index: 2;
}

h1 {
  color: var(--neon-blue);
  text-shadow: var(--neon-shadow);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

.clock-wrap {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.clock {
  width: min(72vw, 380px);
  aspect-ratio: 1 / 1;
  border: 4px solid var(--neon-blue);
  border-radius: 50%;
  box-shadow: var(--neon-shadow), inset var(--neon-shadow);
  position: relative;
  isolation: isolate;
  background: rgba(2, 4, 20, 0.8);
  transition: filter 400ms ease, border-color 400ms ease;
}

.clock::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background: conic-gradient(from 0deg, #ff2d95, #ff8a00, #ffe100, #4dff88, #00e5ff, #6f7dff, #ff2d95);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}

.tick {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 1;
  border-radius: 50%;
  background: var(--neon-blue);
  box-shadow: var(--neon-shadow);
}

.t12 { top: 8px; left: calc(50% - 5px); }
.t3  { top: calc(50% - 5px); right: 8px; }
.t6  { bottom: 8px; left: calc(50% - 5px); }
.t9  { top: calc(50% - 5px); left: 8px; }

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 2;
  transform-origin: center bottom;
  border-radius: 999px;
  box-shadow: var(--neon-shadow);
}

.hour {
  width: 7px;
  height: 28%;
  margin-left: -3.5px;
  background: #80ecff;
}

.minute {
  width: 5px;
  height: 38%;
  margin-left: -2.5px;
  background: var(--neon-blue);
}

.second {
  width: 2px;
  height: 42%;
  margin-left: -1px;
  background: #f7ffff;
}

.clock-center {
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  z-index: 3;
  border-radius: 50%;
  background: #b2f3ff;
  box-shadow: var(--neon-shadow);
}

.digital,
.status {
  margin: 0;
}

.digital {
  font-size: 1.15rem;
  color: #98ebff;
}

.status {
  color: #70cbf0;
  min-height: 1.2rem;
}

.script-button {
  margin-top: 1.2rem;
  padding: 0.9rem 1.6rem;
  border: 2px solid var(--neon-blue);
  border-radius: 999px;
  background: transparent;
  color: var(--neon-blue);
  font-size: 1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-shadow: var(--neon-shadow);
  box-shadow: var(--neon-shadow), inset 0 0 8px rgba(51, 214, 255, 0.3);
}

.script-button:hover:enabled {
  transform: translateY(-1px);
}

.script-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spotlights {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.spotlights::before,
.spotlights::after {
  content: "";
  position: absolute;
  left: var(--burst-x);
  top: var(--burst-y);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.celebrate .spotlights::before {
  opacity: 1;
  width: 30vmax;
  height: 30vmax;
  background:
    conic-gradient(
      from 0deg,
      #ff2d95,
      #ff8a00,
      #ffe100,
      #4dff88,
      #00e5ff,
      #6f7dff,
      #ff2d95
    ),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 45, 149, 0.95) 0deg 6deg,
      transparent 6deg 12deg,
      rgba(255, 138, 0, 0.95) 12deg 18deg,
      transparent 18deg 24deg,
      rgba(255, 225, 0, 0.95) 24deg 30deg,
      transparent 30deg 36deg,
      rgba(77, 255, 136, 0.95) 36deg 42deg,
      transparent 42deg 48deg,
      rgba(0, 229, 255, 0.95) 48deg 54deg,
      transparent 54deg 60deg,
      rgba(111, 125, 255, 0.95) 60deg 66deg,
      transparent 66deg 72deg
    );
  filter: blur(1px) saturate(1.15);
  -webkit-mask: radial-gradient(circle, transparent 0 8%, rgba(0, 0, 0, 0.98) 8.5% 100%);
  mask: radial-gradient(circle, transparent 0 8%, rgba(0, 0, 0, 0.98) 8.5% 100%);
  animation: rainbowBurst 1s ease-out forwards, rainbowSpin 2s linear infinite 1s;
}

.celebrate .spotlights::after {
  opacity: 0;
}

.celebrate {
  animation: bgPulse 1s ease-in-out infinite alternate;
}

.celebrate .clock {
  border-color: transparent;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
  background: #020614;
}

.celebrate .clock::before {
  opacity: 1;
  animation: rainbowSpinClock 2s linear infinite 1s;
}

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.celebration-text {
  position: absolute;
  left: 50%;
  margin: 0;
  max-width: calc(100vw - 2rem);
  color: #000;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2rem, 6vw, 4.6rem);
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.45),
    0 0 24px rgba(255, 225, 0, 0.35);
  transform: translateX(-50%);
  opacity: 0;
}

.celebration-text-top {
  top: 4vh;
  animation: celebrationTopFlash 1.1s step-end infinite 1s;
}

.celebration-text-bottom {
  bottom: 4vh;
  animation: celebrationBottomFlash 1.1s step-end infinite 1s;
}

@keyframes bgPulse {
  from { filter: saturate(0.9); }
  to { filter: saturate(1.4); }
}

@keyframes rainbowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rainbowSpinClock {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rainbowBurst {
  from {
    width: 30vmax;
    height: 30vmax;
  }
  to {
    width: 240vmax;
    height: 240vmax;
  }
}

@keyframes celebrationTopFlash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes celebrationBottomFlash {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}