/* ============================================================
 * countdown.css — 三天倒计时 HUD 组件样式
 * 绿色液晶发光字体，全屏 / 紧凑双模式
 * ============================================================ */

/* ── 容器 ── */
#ltc-countdown {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;               /* 低于 text-box(10)/choice(11)/quick-menu(11)，保证对话文本可读 */
  pointer-events: none;     /* 不拦截点击 */
  font-family: 'Courier New', 'Consolas', monospace;
  letter-spacing: 0.08em;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
}

#ltc-countdown.visible {
  opacity: 1;
  visibility: visible;
}

/* ── 全屏模式 ── */
#ltc-countdown.mode-fullscreen {
  top: 0;
  bottom: 0;
  height: 100vh;            /* 显式高度，便于全屏→紧凑的过渡动画 */
  background: rgba(0, 0, 0, 0.85);
}

#ltc-countdown.mode-fullscreen .countdown-time {
  font-size: clamp(3rem, 12vw, 10rem);
  text-shadow:
    0 0 10px #00FF41,
    0 0 20px #00FF41,
    0 0 40px #00FF41,
    0 0 80px rgba(0, 255, 65, 0.5);
}

/* ── 紧凑模式（顶部 HUD 条） ── */
#ltc-countdown.mode-compact {
  top: 0;
  bottom: auto;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  border-bottom: 1px solid rgba(0, 255, 65, 0.3);
}

/* 移动端 quick-menu 位于顶部（z-index:11 高于本组件），
   将 HUD 下移到 quick-menu 下方避免重叠 */
@media (max-width: 37.5em) {
  #ltc-countdown.mode-compact {
    top: calc(var(--quick-menu-height, 40px) + 4px);
  }
}

#ltc-countdown.mode-compact .countdown-time {
  font-size: 1.4rem;
  text-shadow:
    0 0 6px #00FF41,
    0 0 12px rgba(0, 255, 65, 0.6);
}

/* ── 数字通用样式 ── */
.countdown-time {
  color: #00FF41;
  font-weight: bold;
  user-select: none;
}

/* 数字变化时轻微闪烁（模拟液晶屏刷新） */
.countdown-time.tick {
  animation: lcd-flicker 0.15s ease-out;
}

@keyframes lcd-flicker {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.95; }
}

/* ── 全屏模式淡入动画 ── */
#ltc-countdown.mode-fullscreen.visible {
  animation: countdown-fade-in 0.8s ease-out;
}

@keyframes countdown-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 全屏→紧凑模式过渡 ── */
#ltc-countdown.transitioning {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 响应式：竖屏紧凑模式微调 ── */
@media (max-width: 37.5em) {
  #ltc-countdown.mode-compact .countdown-time {
    font-size: 1.1rem;
  }
}