.calendar-widget {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: clamp(170px, 16vw, 270px);
  aspect-ratio: 1396 / 839;
  pointer-events: none;
}

.calendar-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.calendar-date,
.calendar-time {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34170d;
  font-family: SimSun, "Microsoft YaHei", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 1px 0 #734126, 0 1px #734126;
}

.calendar-date {
  left: 37.2%;
  top: 10.3%;
  width: 57.1%;
  height: 21.2%;
  gap: .28em;
  white-space: nowrap;
}

.calendar-date strong { font-size: clamp(13px, 1.3vw, 20px); }
.calendar-date span { font-size: clamp(11px, 1.1vw, 18px); }

.calendar-time {
  left: 37.2%;
  top: 63.2%;
  width: 57.1%;
  height: 20.2%;
  font-family: "Courier New", SimSun, monospace;
  font-size: clamp(16px, 1.55vw, 25px);
}

@media (max-width: 620px) {
  .calendar-widget { top: 5px; right: 5px; width: min(175px, 48vw); }
  .calendar-date strong { font-size: clamp(11px, 3.2vw, 15px); }
  .calendar-date span { font-size: clamp(10px, 2.8vw, 13px); }
  .calendar-time { font-size: clamp(14px, 4vw, 19px); }
}