:root {
  --size: 220px;
  --border: 8px;
  --center-dot: 10px;
  --second-color: #e53935; /* 赤 */
  --minute-color: #1e88e5; /* 青 */
  --face-bg: #fff;
  --face-ring: #222;
}

.clock {
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--face-bg);
  background-image: url("bg/bg_paceclock.webp");
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 var(--border) var(--face-ring) inset,
    0 2px 12px rgba(0,0,0,0.15);
  margin: 16px;
  overflow: hidden;
}


.hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
  will-change: transform;
}

.hand.second {
  background: var(--second-color);
  width: 3px;
  height: calc(var(--size) / 2 - 12px);
  box-shadow: 0 0 3px rgba(229,57,53,0.8);
}

.hand.minute {
  background: var(--minute-color);
  width: 4px;
  height: calc(var(--size) / 2 - 26px);
  box-shadow: 0 0 2px rgba(30,136,229,0.6);
}

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

@media (prefers-reduced-motion: reduce) {
  .hand { transition: none !important; animation: none !important; }
}