/* website/static/css/components/chronometer.css */
/* ------------------------------------------------------------
   Luxury Chronometer / Pocket Watch Display
   website/static/css/components/chronometer.css
------------------------------------------------------------
   PURPOSE:
   A centered, elegant chronometer canvas styled to match the
   luxury glass aesthetic of your dashboard and cards.

   GOALS:
   ✓ Theme-aware
   ✓ Soft radial glow
   ✓ Subtle shadow depth
   ✓ Perfect circular geometry
------------------------------------------------------------ */


/* ============================================================
   1) WRAPPER
   Centers the chronometer on the page.
============================================================ */
.watch-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}



/* ============================================================
   2) CANVAS (Pocket Watch Face)
============================================================ */
#watch-canvas {
  border-radius: 50%;

  /* Soft luxury glow */
  box-shadow: 0 0 20px rgba(0,0,0,0.35),
              0 0 40px rgba(0,0,0,0.15);

  /* Theme-aware radial face */
  background: radial-gradient(
    circle at center,
    var(--color-light, #ffffff) 65%,
    var(--color-muted, #e6e6e6) 100%
  );

  /* Smooth edges + crisp rendering */
  image-rendering: optimizeQuality;
  transition: box-shadow var(--transition-medium);
}

#watch-canvas:hover {
  box-shadow: 0 0 28px rgba(0,0,0,0.45),
              0 0 60px rgba(0,0,0,0.25);
}