/* ✦ HERO MISSION CLOCK STYLES — Averil0814 ✦
   模組化：獨立 CSS，不干擾 style.css 框架
   ================================================================== */

/* ─── Clock widget ─── */
#hero-mission-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeInUp 0.8s 1.3s forwards;
}

/* Label row */
.hmc-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(57, 255, 142, 0.55);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hmc-label::before, .hmc-label::after {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  background: rgba(57, 255, 142, 0.3);
}

/* Digit display */
.hmc-display {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(57, 255, 142, 0.18);
  padding: 8px 18px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.hmc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 34px;
}
.hmc-num {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 900;
  color: var(--hud-green, #39ff8e);
  line-height: 1;
  text-shadow: 0 0 12px rgba(57, 255, 142, 0.45);
  min-width: 2ch;
  text-align: center;
}
.hmc-unit-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 2px;
  color: rgba(57, 255, 142, 0.3);
  text-transform: uppercase;
}
.hmc-sep {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 900;
  color: rgba(57, 255, 142, 0.3);
  line-height: 1;
  padding-bottom: 10px; /* optical alignment with unit label */
  padding-left: 1px;
  padding-right: 1px;
  animation: clockColon 1s step-end infinite;
}
@keyframes clockColon {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.25; }
}

/* ─── Mission type badge ─── */
.hmc-session-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px;
  color: rgba(57, 255, 142, 0.5);
  text-transform: uppercase;
}

/* ─── "MISSION LIVE" state (when countdown = 0) ─── */
#hero-mission-clock.hmc-live .hmc-label {
  color: var(--hud-green, #39ff8e);
  animation: hmcLivePulse 1.2s ease-in-out infinite;
}
@keyframes hmcLivePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  #hero-mission-clock { animation: none; opacity: 1; }
  .hmc-sep { animation: none; }
}