* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins", sans-serif; }
body {
  display:flex; justify-content:center; align-items:center; height:100vh;
  background: linear-gradient(135deg, #1e1c50, #0d0d0d); color:#fff;
}

.clock-container { text-align:center; }

.clock {
  position:relative; width:320px; height:320px; border-radius:50%;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); box-shadow:10 8px 30px rgba(0,0,0,0.6); margin:auto;
}

.center-dot {
  position:absolute; width:14px; height:14px; background:#fff; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%); z-index:12;
  box-shadow:0 0 12px rgba(255,255,255,0.9);
}

/* Hands */
.hand { position:absolute; bottom:50%; left:50%; transform-origin:bottom center; transform:translateX(-50%) rotate(0deg); border-radius:10px; z-index:11; }
.hour { width:8px; height:80px; background:#ffce54; box-shadow:0 0 10px #ffce54; }
.minute { width:5px; height:110px; background:#4fc3f7; box-shadow:0 0 10px #4fc3f7; }
.second { width:2px; height:130px; background:#e74c3c; box-shadow:0 0 12px #e74c3c; }

/* Numbers */
.numbers { position:absolute; inset:0; z-index:9; pointer-events:none; }
.numbers .number {
  position:absolute; top:46%; left:46%; width:25px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1rem; color:rgba(255,255,255,0.95);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.numbers .number:nth-child(3),
.numbers .number:nth-child(6),
.numbers .number:nth-child(9),
.numbers .number:nth-child(12) {
  font-size:1.3rem; font-weight:700; color:#fff; text-shadow:0 0 8px rgba(255,255,255,0.9);
}

/* Position each number */
.numbers .number:nth-child(1)  { transform:rotate(30deg) translateY(-125px) rotate(-30deg); }
.numbers .number:nth-child(2)  { transform:rotate(60deg) translateY(-125px) rotate(-60deg); }
.numbers .number:nth-child(3)  { transform:rotate(90deg) translateY(-125px) rotate(-90deg); }
.numbers .number:nth-child(4)  { transform:rotate(120deg) translateY(-125px) rotate(-120deg); }
.numbers .number:nth-child(5)  { transform:rotate(150deg) translateY(-125px) rotate(-150deg); }
.numbers .number:nth-child(6)  { transform:rotate(180deg) translateY(-125px) rotate(-180deg); }
.numbers .number:nth-child(7)  { transform:rotate(210deg) translateY(-125px) rotate(-210deg); }
.numbers .number:nth-child(8)  { transform:rotate(240deg) translateY(-125px) rotate(-240deg); }
.numbers .number:nth-child(9)  { transform:rotate(270deg) translateY(-125px) rotate(-270deg); }
.numbers .number:nth-child(10) { transform:rotate(300deg) translateY(-125px) rotate(-300deg); }
.numbers .number:nth-child(11) { transform:rotate(330deg) translateY(-125px) rotate(-330deg); }
.numbers .number:nth-child(12) { transform:rotate(0deg) translateY(-125px) rotate(0deg); }

/* Ticks */
#ticks { position:absolute; inset:0; z-index:8; pointer-events:none; }
.tick { position:absolute; top:50%; left:50%; width:1px; transform-origin:center; border-radius:1px; }
.tick.small { height:10px; background:rgba(255,255,255,0.4); }
.tick.big { height:20px; background:rgba(255,255,255,0.95); box-shadow:0 0 8px rgba(255,255,255,0.8); }

/* Info */
.info { margin-top:20px; }
#digital-time { font-size:1.5rem; margin-bottom:6px; }
#date { font-size:0.95rem; margin-bottom:10px; color:rgba(255,255,255,0.85); }
button { padding:8px 14px; border:none; border-radius:10px; background:rgba(255,255,255,0.12); color:#fff; cursor:pointer; backdrop-filter:blur(4px); transition:background .18s; }
button:hover { background:rgba(255,255,255,0.22); }