/* 重置body样式 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 计时器容器样式 */
#timer-container {
  width: 100%;
  margin: 20px auto;
}

/* 非全屏状态下放大时钟 */
#timer-container:not(.fullscreen-mode) #flip-countdown {
  transform: scale(1.8);
  margin: 40px 0 80px 0; /* 增加上下边距以适应放大后的尺寸 */
}

/* 倒计时数字闪烁动画 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.timer-completed {
  animation: blink 1s infinite;
}

/* 全屏模式下的翻转时钟样式 */
#timer-container.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #f8f9fa;
  overflow: hidden;
  z-index: 9999;
}

/* 全屏模式下的时钟容器样式 */
#timer-container.fullscreen-mode #flip-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3);
  margin: 0;
}

/* 全屏模式下的控制按钮区域 */
#timer-container.fullscreen-mode .clock-controls {
  position: absolute;
  top: 75%; /* 定位在时钟下方 */
  left: 50%;
  transform: translateX(-50%) scale(1); /* 水平居中，不缩小按钮区域 */
  display: flex;
  flex-direction: row; /* 强制水平排列 */
  flex-wrap: nowrap; /* 禁止换行 */
  justify-content: center;
  align-items: center;
  gap: 10px; /* 按钮间的间距 */
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1000;
  /* 恢复所有原始样式 */
  width: auto;
  height: auto;
  padding: 10px;
  margin: 0;
  white-space: nowrap; /* 防止按钮文本换行 */
}

/* 鼠标移动时显示控制按钮 */
#timer-container.fullscreen-mode.show-controls .clock-controls {
  opacity: 0.7;
}

/* 全屏模式下的按钮字体大小 */
#timer-container.fullscreen-mode .clock-controls button {
  font-size: 0.7rem;
  padding: 0.5rem 1rem;
}

/* 鼠标悬停在按钮上时完全显示 */
#timer-container.fullscreen-mode .clock-controls:hover {
  opacity: 1;
}

/* 时钟样式 */
.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

/* 时钟的分隔 */
.clock .divider {
  font-size: 66px;
  line-height: 102px;
  font-style: normal;
  color: rgb(51, 50, 50);
}

/* 时钟的卡片 */
.clock .flip {
  position: relative;
  width: 60px;
  height: 100px;
  margin: 2px;
  font-size: 70px;
  font-weight: 700;
  line-height: 100px;
  text-align: center;
  background: rgb(46, 45, 45);
  border: 1px solid rgb(34, 33, 33);
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(54, 54, 54, 0.5);
}

/* 时钟上的数字 */
.clock .flip .digital::before, 
.clock .flip .digital::after {
  position: absolute;
  content: attr(data-number);
  left: 0;
  right: 0;
  color: white;
  background: rgb(51, 50, 50);
  overflow: hidden;
  -webkit-perspective: 160px;
          perspective: 160px;
}

/* 翻页前的数字 */
.clock .flip .digital::before {
  top: 0;
  bottom: 50%;
  border-bottom: 1px solid #666;
  border-radius: 10px 10px 0 0;
}

/* 翻页后的数字 */
.clock .flip .digital::after {
  top: 50%;
  bottom: 0;
  line-height: 0;
  border-radius: 0 0 10px 10px;
}

.clock .flip .back::before,
.clock .flip .front::after {
  z-index: 1;
}

.clock .flip .back::after {
  z-index: 2;
}

.clock .flip .front::before {
  z-index: 3;
}

.clock .flip .back::after {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: rotateX(0.5turn);
          transform: rotateX(0.5turn);
}

.clock .flip.running .front::before {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation: frontFlipDown 0.6s ease-in-out;
          animation: frontFlipDown 0.6s ease-in-out;
  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.clock .flip.running .back::after {
  -webkit-animation: backFlipDown 0.6s ease-in-out;
          animation: backFlipDown 0.6s ease-in-out;
}

@-webkit-keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
  }
}

@keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
  }
}

@-webkit-keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}

@keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}

/* 在小屏幕上的响应式调整 */
@media (max-width: 767px) {
  .clock .flip {
    width: 40px;
    height: 60px;
    font-size: 40px;
    line-height: 60px;
  }
  
  .clock .divider {
    font-size: 40px;
    line-height: 60px;
  }
  
  /* 确保在小屏幕上控制按钮更紧凑 */
  .clock-controls {
    flex-wrap: wrap;
  }
  
  .clock-controls button {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
}