/* =============================================================
   mc-alarm.css - the alarm-clock time-skip animation (js/mc-alarm.js).

   A brief, centred pixel-art card - the same dialogue/mission-card chrome
   (navy outline, cream body) as the rest of the game - not a Midea Connect
   panel, since this plays over the whole screen, wherever the player is.
   ============================================================= */
#mcAlarm {
  position: fixed;
  inset: 0;
  z-index: 245;                 /* over the computer screen and mission notices, under the meeting simulator */
  font-family: 'VCR OSD Mono', 'Courier New', Courier, monospace;
}
#mcAlarm[hidden] { display: none; }
#mcAlarm * { box-sizing: border-box; }

.alc-scrim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, 0.5);
  opacity: 0;
  transition: opacity 260ms ease;
}
#mcAlarm.on .alc-scrim { opacity: 1; }

.alc-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #222a45;
  border: 4px solid #0d1735;
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px #b9caea, inset 0 0 0 7px #0d1735, 0 10px 34px rgba(0, 0, 0, 0.55);
  padding: 26px 34px 24px;
  transform: translateY(10px) scale(0.94);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
#mcAlarm.on .alc-card { transform: none; }

.alc-clock {
  position: relative;
  width: min(30vmin, 240px);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.alc-face { display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; pointer-events: none; }

.alc-hand {
  position: absolute;
  transform-origin: 50% 100%;
  background: linear-gradient(#5aa2ee, #2f6fc0);
  border: 3px solid #0d1735;
  border-radius: 4px;
  will-change: transform;
}
.alc-hand-hour { background: linear-gradient(#4a90e0, #2660ad); }

.alc-hub {
  position: absolute;
  width: 7.5%; height: 7.5%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #cfe8ff, #6fb2f2 70%);
  border: 3px solid #0d1735;
  border-radius: 50%;
}

/* The little orange motion-dashes from the reference artwork, blinking
   while the hands are spinning ("ringing"). */
.alc-tick {
  position: absolute;
  width: 9%; height: 4%;
  background: #ffb020;
  border-radius: 3px;
  opacity: 0;
}
.alc-tick-tl { left: -9%; top: 22%; transform: rotate(-35deg); }
.alc-tick-tr { right: -9%; top: 22%; transform: rotate(35deg); }
.alc-tick-bl { left: -9%; top: 32%; transform: rotate(-55deg); }
.alc-tick-br { right: -9%; top: 32%; transform: rotate(55deg); }
#mcAlarm.alc-spinning .alc-tick { animation: alc-tick-blink 0.4s steps(2, end) infinite; }
@keyframes alc-tick-blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.15; }
}
#mcAlarm.alc-spinning .alc-clock { animation: alc-shake 0.22s ease-in-out infinite; }
@keyframes alc-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.4deg); }
  75% { transform: rotate(2.4deg); }
}

.alc-caption {
  font-size: 14px; letter-spacing: 0.5px; color: #d8d8e4; text-align: center;
}
.alc-time {
  font-size: 30px; font-weight: bold; color: #2fb8ff; letter-spacing: 1px;
  text-shadow: 1px 1px 0 #0d1735;
  animation: alc-time-in 260ms ease-out;
}
.alc-time[hidden] { display: none; }
@keyframes alc-time-in {
  from { opacity: 0; transform: translateY(4px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .alc-scrim, .alc-card, .alc-hand, .alc-time { transition-duration: 1ms !important; animation: none !important; }
  #mcAlarm.alc-spinning .alc-tick, #mcAlarm.alc-spinning .alc-clock { animation: none !important; }
}