/* ---- 时间与时钟模块样式 ---- */
main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vh, 34px);
  padding: 0 20px;
}

.time-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.clock {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 9.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}

.clock .colon {
  color: var(--amber);
  margin: 0 .06em;
  transition: opacity .1s linear;
}

.clock .colon.dim {
  opacity: .18;
}

.date {
  font-size: clamp(.85rem, 2vw, 1.05rem);
  color: var(--muted);
  letter-spacing: .02em;
  margin-top: 0;
}

.date b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-height: 620px) {
  main {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  /* 移动端主区布局：时间模块置顶，天气模块置底，中间完整留给壁纸原画 */
  main {
    justify-content: space-between;
    padding: clamp(6px, 1.5vh, 14px) 20px clamp(8px, 1.8vh, 16px);
  }

  .time-wrap {
    margin-top: clamp(28px, 5.5vh, 52px);
    gap: 4px;
    z-index: 2;
  }

  .clock {
    font-size: clamp(2.2rem, 10.5vw, 3.3rem);
  }

  .date {
    font-size: clamp(.74rem, 3.1vw, .84rem);
  }
}