.clock-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 22px rgba(120, 90, 200, 0.22),
              inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  cursor: pointer;
  z-index: 1050;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}

.clock-toggle:hover {
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 0 0 3px rgba(184, 129, 255, 0.22),
              0 8px 26px rgba(120, 90, 200, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.clock-toggle img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 240, 200, 0.5));
  pointer-events: none;
}

.clock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 22, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1090;
}

.clock-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.clock-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: calc(100 * var(--vh, 1vh));
  width: min(640px, calc(98 * var(--vw, 1vw)));
  background:
    linear-gradient(
      to left,
      rgba(10, 14, 32, 0.94) 0%,
      rgba(10, 14, 32, 0.9) 48%,
      rgba(10, 14, 32, 0.55) 78%,
      rgba(10, 14, 32, 0) 100%
    );
  border: 0;
  transform: translateX(calc(100% + 20px));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  color: #f0eadf;
  font-family: 'Cinzel', 'ZHFont', serif;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left,
    black 0%, black 58%, rgba(0, 0, 0, 0.85) 80%, transparent 100%);
          mask-image: linear-gradient(to left,
    black 0%, black 58%, rgba(0, 0, 0, 0.85) 80%, transparent 100%);
}

.clock-panel.is-open {
  transform: translateX(0);
}

.clock-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/journal-clock-timer/horoscope-bg.png') center/cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.clock-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-particle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 100%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));
  opacity: 0;
  animation: ambient-float linear infinite;
}

@keyframes ambient-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--peak, 0.85); }
  60%  { transform: translate3d(calc(var(--drift, 0px) * 0.5), calc(-55 * var(--vh, 1vh)), 0); opacity: var(--peak, 0.85); }
  90%  { opacity: var(--peak, 0.4); }
  100% { transform: translate3d(var(--drift, 20px), calc(-110 * var(--vh, 1vh)), 0); opacity: 0; }
}

.clock-panel > * {
  position: relative;
  z-index: 1;
}

.clock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 14px;
  border-bottom: 1px solid rgba(232, 218, 176, 0.14);
}

.clock-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #e8dab0;
  text-shadow: 0 0 12px rgba(232, 218, 176, 0.35);
}

.clock-header .close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f0eadf;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.clock-header .close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.1);
}

.clock-body {
  flex: 1;
  padding: 30px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.clock-face {
  position: relative;
  width: 520px;
  height: 520px;
  max-width: 100%;
  aspect-ratio: 1;
  user-select: none;
  touch-action: none;
}

.clock-face .inner-disc {
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 10, 30, 0.6), rgba(2, 4, 18, 0.98) 75%),
    url('/assets/images/journal-clock-timer/horoscope-bg.png') center/220% no-repeat;
  background-blend-mode: multiply, normal;
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.8),
              inset 0 0 0 1px rgba(232, 218, 176, 0.28);
  transition: box-shadow 0.6s ease;
  z-index: 1;
}

.clock-face .inner-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(232, 218, 176, 0.05) 10deg,
      transparent 20deg,
      rgba(232, 218, 176, 0.08) 45deg,
      transparent 55deg,
      rgba(232, 218, 176, 0.05) 90deg,
      transparent 100deg,
      rgba(232, 218, 176, 0.08) 135deg,
      transparent 145deg,
      rgba(232, 218, 176, 0.05) 180deg,
      transparent 190deg,
      rgba(232, 218, 176, 0.08) 225deg,
      transparent 235deg,
      rgba(232, 218, 176, 0.05) 270deg,
      transparent 280deg,
      rgba(232, 218, 176, 0.08) 315deg,
      transparent 325deg);
  animation: gear-spin 60s linear infinite;
}

.clock-face .inner-disc::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 1px dashed rgba(232, 218, 176, 0.18);
  animation: gear-spin 90s linear infinite reverse;
}

.clock-face .gear-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.clock-face .gear {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: sepia(0.6) hue-rotate(-20deg) brightness(0.9) drop-shadow(0 0 3px rgba(232, 218, 176, 0.35));
  mix-blend-mode: screen;
}

.clock-face .gear-a {
  top: 15%;
  left: 18%;
  width: 42%;
  height: 42%;
  background-image: url('/assets/images/journal-clock-timer/horoscope-03.png');
  opacity: 0.5;
  animation: gear-spin 55s linear infinite;
}

.clock-face .gear-b {
  top: 40%;
  right: 8%;
  width: 32%;
  height: 32%;
  background-image: url('/assets/images/journal-clock-timer/horoscope-04.png');
  opacity: 0.42;
  animation: gear-spin 38s linear infinite reverse;
}

.clock-face .gear-c {
  bottom: 10%;
  left: 28%;
  width: 36%;
  height: 36%;
  background-image: url('/assets/images/journal-clock-timer/horoscope-05.png');
  opacity: 0.38;
  animation: gear-spin 70s linear infinite;
}

.clock-face .gear-d {
  top: 22%;
  right: 22%;
  width: 24%;
  height: 24%;
  background-image: url('/assets/images/journal-clock-timer/horoscope-06.png');
  opacity: 0.5;
  animation: gear-spin 26s linear infinite reverse;
}

@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.clock-face .dial {
  position: absolute;
  inset: 0;
  background: url('/assets/images/journal-clock-timer/clock-dial.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

.clock-face .glow {
  position: absolute;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: 3;
  --aura: 255, 235, 180;
}

.clock-face .glow::before,
.clock-face .glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.clock-face .glow::before {
  border: 1px solid rgba(var(--aura), 0.55);
  box-shadow:
    0 0 22px rgba(var(--aura), 0.35),
    inset 0 0 12px rgba(var(--aura), 0.25);
  animation: icon-breath 2.6s ease-in-out infinite;
}

.clock-face .glow::after {
  border: 1px dashed rgba(var(--aura), 0.65);
  transform: scale(1.18);
  animation: icon-orbit 9s linear infinite;
  opacity: 0.75;
}

.clock-face .glow.is-active {
  opacity: 1;
}

.clock-face .glow.noon    { top: 17%; left: 50%; --aura: 255, 220, 150; }
.clock-face .glow.dusk    { top: 50%; left: 83%; --aura: 255, 170, 120; }
.clock-face .glow.night   { top: 83%; left: 50%; --aura: 160, 190, 255; }
.clock-face .glow.morning { top: 50%; left: 17%; --aura: 255, 200, 140; }

@keyframes icon-breath {
  0%, 100% {
    transform: scale(0.85);
    box-shadow:
      0 0 14px rgba(var(--aura), 0.2),
      inset 0 0 8px rgba(var(--aura), 0.15);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 28px rgba(var(--aura), 0.55),
      inset 0 0 16px rgba(var(--aura), 0.35);
    opacity: 1;
  }
}

@keyframes icon-orbit {
  from { transform: scale(1.18) rotate(0deg); }
  to   { transform: scale(1.18) rotate(360deg); }
}

.clock-face .glow.is-active .spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(var(--aura), 0.6) 55%,
    transparent 100%);
  filter: drop-shadow(0 0 4px rgba(var(--aura), 0.9));
  animation: icon-spark 3.4s ease-in-out infinite;
}

@keyframes icon-spark {
  0%   { transform: rotate(var(--seed, 0deg)) translateX(0) scale(0.4); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: rotate(calc(var(--seed, 0deg) + 20deg)) translateX(58px) scale(0.3); opacity: 0; }
}

.clock-face .hitbox {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9;
  transition: transform 0.3s ease;
}

.clock-face .hitbox:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.clock-face .hitbox.noon    { top: 17%; left: 50%; }
.clock-face .hitbox.dusk    { top: 50%; left: 83%; }
.clock-face .hitbox.night   { top: 83%; left: 50%; }
.clock-face .hitbox.morning { top: 50%; left: 17%; }

.clock-face.is-landing .inner-disc {
  box-shadow: inset 0 0 55px rgba(255, 220, 150, 0.75),
              inset 0 0 0 1px rgba(255, 235, 180, 0.95),
              0 0 55px rgba(255, 220, 150, 0.6);
  animation: dial-flash 1.1s ease-out;
}

@keyframes dial-flash {
  0%   { box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.8),
                     inset 0 0 0 1px rgba(232, 218, 176, 0.28); }
  40%  { box-shadow: inset 0 0 60px rgba(255, 220, 150, 0.85),
                     inset 0 0 0 1px rgba(255, 235, 180, 1),
                     0 0 60px rgba(255, 220, 150, 0.7); }
  100% { box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.8),
                     inset 0 0 0 1px rgba(232, 218, 176, 0.28); }
}

.clock-face .hand {
  position: absolute;
  top: 50%;
  left: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  will-change: transform;
  pointer-events: none;
}

.clock-face .hour-hand {
  width: 54px;
  height: 300px;
  --pivot-y: 64%;
  --rot: 0deg;
  transform-origin: 50% var(--pivot-y);
  transform: translate(-50%, calc(var(--pivot-y) * -1)) rotate(var(--rot));
  background-image: url('/assets/images/journal-clock-timer/clock-hour-hand.png');
  filter: drop-shadow(0 0 6px rgba(255, 235, 180, 0.65));
  cursor: grab;
  pointer-events: auto;
  z-index: 6;
}

.clock-face .hour-hand.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 0 14px rgba(255, 235, 180, 0.95));
}

.clock-face .hour-hand.is-animating {
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.clock-face .minute-hand {
  width: 42px;
  height: 262px;
  --pivot-y: 36%;
  --rot: 0deg;
  transform-origin: 50% var(--pivot-y);
  transform: translate(-50%, calc(var(--pivot-y) * -1)) rotate(calc(var(--rot) + 180deg));
  background-image: url('/assets/images/journal-clock-timer/clock-minute-hand.png');
  filter: drop-shadow(0 0 4px rgba(232, 218, 176, 0.55));
  opacity: 0.85;
  z-index: 5;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.clock-face .minute-hand.is-animating {
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.clock-face .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.clock-face .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0c0 0%, rgba(255, 235, 180, 0.3) 55%, transparent 100%);
  filter: drop-shadow(0 0 5px rgba(255, 235, 180, 1));
  opacity: 0;
  animation: particle-burst 1.4s ease-out forwards;
}

@keyframes particle-burst {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

.clock-info {
  margin-top: 26px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.clock-info .divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(232, 218, 176, 0.4),
    transparent);
}

.clock-info .label {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(232, 218, 176, 0.7);
}

.clock-info .time-display {
  font-family: 'Cinzel', serif;
  font-size: 42px;
  letter-spacing: 4px;
  color: #f5e6b0;
  text-shadow: 0 0 18px rgba(255, 220, 150, 0.5);
}

.clock-info .subtitle {
  font-size: 12px;
  color: rgba(240, 234, 223, 0.6);
  font-family: 'ZHFont', sans-serif;
  letter-spacing: 1px;
  min-height: 1.2em;
}

.clock-footer {
  border-top: 1px solid rgba(232, 218, 176, 0.14);
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clock-footer .sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 218, 176, 0.15);
  border-radius: 12px;
  font-family: 'ZHFont', sans-serif;
}

.clock-footer .sync-row .label-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clock-footer .sync-row .title {
  font-size: 13px;
  letter-spacing: 1px;
  color: #f0eadf;
}

.clock-footer .sync-row .hint {
  font-size: 11px;
  color: rgba(240, 234, 223, 0.55);
}

.clock-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.clock-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.clock-switch .slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.clock-switch .slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.clock-switch input:checked + .slider {
  background: linear-gradient(135deg, #d8a960, #f5e6b0);
}

.clock-switch input:checked + .slider::before {
  transform: translateX(20px);
}

.clock-footer .reset-btn {
  padding: 10px;
  background: transparent;
  color: rgba(240, 234, 223, 0.8);
  border: 1px solid rgba(232, 218, 176, 0.3);
  border-radius: 10px;
  font-family: 'ZHFont', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.clock-footer .reset-btn:hover {
  background: rgba(232, 218, 176, 0.12);
  color: #f5e6b0;
}

@media (max-width: 640px) {
  .clock-face { width: 320px; height: 320px; }
  .clock-face .hour-hand   { width: 34px; height: 188px; }
  .clock-face .minute-hand { width: 26px; height: 164px; }
  .clock-face .hitbox      { width: 58px; height: 58px; }
  .clock-face .glow        { width: 74px; height: 74px; }
}