/* Minimal Apple-like aesthetic */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg,#f8f8f8,#efefef);
  color: #222;
  padding: 20px;
}

/* grow the clock — larger by default, responsive */
.clock-container { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:800px; }

/* larger clock: up to 420px on wide screens, scale on small screens */
.clock {
  position: relative;
  width: min(85vw, 420px);
  height: min(85vw, 420px);
  border-radius: 50%;
  background: #fff;
  border: 1.8px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 35px rgba(0,0,0,0.08);
  display:block;
  overflow: visible;
}

/* common hand style */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%; /* pivot at bottom center of the element */
  will-change: transform;
  border-radius: 10px;
}

/* colors & thickness (actual length set by JS for perfect scaling) */
/* Hour Hand: thicker near center, thinner at tip, soft blue */
.hand.hour {
  width: 10px;  /* max width at base */
  height: 70px; /* scale dynamically if needed */
  background: linear-gradient(to top, #4A90E2 0%, #4A90E2 90%, rgba(74,144,226,0.7) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
  border-radius: 4px;
  transform-origin: 50% 100%;
}

/* Minute Hand: thicker near center, thinner at tip, green */
.hand.minute {
  width: 8px;
  height: 100px;
  background: linear-gradient(to top, #34C759 0%, #34C759 90%, rgba(52,199,89,0.7) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
  border-radius: 4px;
  transform-origin: 50% 100%;
}

/* Second Hand: slightly thicker near center, red accent */
.hand.second {
  width: 4px;
  height: 120px;
  background: linear-gradient(to top, #ff3b30 0%, #ff3b30 90%, rgba(255,59,48,0.7) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%);
  border-radius: 2px;
  transform-origin: 50% 100%;
}


.center-dot {
  position:absolute;
  left:50%;
  top:50%;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


/* container for generated marks & numbers */
.marks {
  position: absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
}

/* tick base — we will set size/rotation/position inline in JS */
.mark {
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: center;
  background:#333;
  opacity:0.75;
  border-radius:2px;
}

/* num style */
.number {
  position:absolute;
  transform-origin:center;
  font-weight:500;
  user-select:none;
  color:#111;
  text-align:center;
  pointer-events:none;
}

/* date styling */
.date {
  color:#555;
  font-size:1.05rem;
  letter-spacing:0.2px;
  text-align:center;
}

/* smaller screens tweak */
@media (max-width:420px){
  .center-dot { width: 12px; height:12px; }
  .hand.hour { width:6px; }
  .hand.minute { width:4px; }
  .hand.second { width:2px; }
  .date { font-size: 0.98rem; }
}