/* 字体 */
@font-face{
    font-family: "SourceHanSansSC-Medium-2";
    font-weight: 1 999;
    src: url("../font/SourceHanSansSC-Medium-2.otf");
}

@font-face{
    font-family: "Microsoft Yahei UI";
    font-weight: 1 999;
    src: url("../font/Microsoft Yahei UI.ttf");
}

/* 主体 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 避免滚动条出现 */
}

/* 背景容器 */
.background {
    position: relative; /* 子元素定位基准 */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom left, #ff99e5, #ffffff);
    overflow: hidden;
}

/* 背景视频 */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* 最底层 */
}

/* 信息板 */
.info {
    position: relative; 
    width: 1200px;
    height: 675px;
    border-radius: 8px;
    box-shadow: 0 8px 8px 8px rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.1);
    z-index: 1; /* 在视频上 */
    display: flex; /* 用 flex 布局 */
    overflow: hidden;
}

/* 左右渐变覆盖层 */
.info .left-box,
.info .right-box {
    height: 100%;
    top: 0;
    position: relative;
    z-index: 2; /* 遮盖视频 */
}

/* 覆盖层渐变 */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 遮盖视频 */
    background: linear-gradient(to right, rgba(255, 189, 238, 0.555), rgba(255, 193, 193, 0.541)); /* 左粉右白透明 */
}


/* 倒计时内容 */
.info .time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5; /* 在左右框上方 */
    width: 100%;
}

.info .time .title {
    font-family: "SourceHanSansSC-Medium-2";
    color: white;
    letter-spacing: 2px;
    font-size: 24px;
}

.info .time .time-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 1000px;
    height: 300px;
    margin-bottom: 48px;
}

.info .time .time-box div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
    height: 80%;
}

/* --- 这里是修改的部分 --- */
.info .time .time-box div p {
    font-family: "Microsoft Yahei UI", bold;
    font-size: 128px;
    margin: 0;

    /* 新增/修改的属性 */
    color:  rgb(255, 255, 255); /* 1. 将字体颜色设置为透明 */
    -webkit-text-stroke: 3px rgba(255, 139, 139, 0.192); /* 2. 添加描边，宽度为3px，颜色为50%透明度的黑色 */
    text-stroke: 3px rgb(255, 255, 255); /* 标准写法，为了更好的兼容性 */
}
/* --- 修改结束 --- */

.info .time .time-box div span {
    color: rgb(255, 255, 255);
    font-size: 32px;
    letter-spacing: 8px;
    opacity: 0.8;
}

.info .time .sub-title {
    font-family: "Microsoft Yahei UI";
    color: rgb(255, 255, 255);
    font-size: 25px;
    letter-spacing: 4px;
    margin: 0;

    /* 新增/修改的属性 */
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.151); /* 2. 添加描边，宽度为3px，颜色为50%透明度的黑色 */
    text-stroke: 3px rgba(255, 255, 255, 0.212); /* 标准写法，为了更好的兼容性 */

}

.info .time .sub-title.tips {
    margin: 16px;
}

.lang-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 100;
    user-select: none;
}
.lang-switch span {
    padding: 0 5px;
}
.lang-switch span:hover {
    text-decoration: underline;
}


/* 音乐按钮样式：放在倒计时框右下角 */
.music-control {
    position: absolute;
    bottom: 20px;      /* 距离底部 20px */
    right: 40px;       /* 距离右边 40px，可按需调整 */
    z-index: 10;
}

.music-control img {
    width: 55px;
    height: 55px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(255, 137, 137, 0.25);
    padding: 6px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.music-control img:hover {
    transform: scale(1.1);
    background-color: rgba(255, 137, 137, 0.4);
}


/* 🌸 倒计时框内的备案号 */
.icp-box {
    margin-top: 15px;
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    background: rgba(255, 182, 193, 0.12);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    animation: icp-fadein 1.8s ease;
}

.icp-box a {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.icp-box a:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/* ✨ 淡入动画 */
@keyframes icp-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* ===== Intro Overlay ===== */
#intro {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  z-index: 9999;            /* 保证在最上层 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 800ms ease; /* 淡出时间 */
}

#intro.hidden {
  opacity: 0;
  pointer-events: none; /* 淡出中禁用点击 */
}

.intro-inner {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .08em;
}

.intro-line {
  font-size: clamp(18px, 3vw, 28px);
  white-space: nowrap;
}

/* 打字样 “...”：逐步出现 0/1/2/3 个点 */
.dots::after {
  content: "";
  display: inline-block;
  width: 0; /* 由 steps 动画决定显示内容 */
  animation: dotsTyping 1.2s steps(4, end) infinite;
}
@keyframes dotsTyping {
  0%   { content: "";   }
  25%  { content: ".";  }
  50%  { content: ".."; }
  75%  { content: "...";}
  100% { content: "";   }
}

/* 复古终端风的方块光标闪烁 */
.caret {
  display: inline-block;
  width: .6ch;
  height: 1em;
  background: #fff;
  margin-left: .1ch;
  transform: translateY(.12em);
  animation: caretBlink 1s steps(1, end) infinite;
}
@keyframes caretBlink {
  0%, 50%   { opacity: 1; }
  50.01%,100% { opacity: 0; }
}

.intro-hint {
  margin-top: 12px;
  font-size: 0.9em;
  opacity: .65;
}

/* 盖屏期间禁止滚动 */
body.no-scroll {
  overflow: hidden;
}

/* 尊重“减少动态效果”系统设置 */
@media (prefers-reduced-motion: reduce) {
  #intro { transition: none; }
  .dots::after, .caret { animation: none; }
}
/* ===== /Intro Overlay ===== */



/* === Code Overlay：左下角 + 透明背景 + 无宽度上限 === */
.code-overlay{
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  top: auto;

  /* 宽度由内容自适应（不设上限） */
  width: auto;                 /* 回退值 */
  width: -moz-fit-content;     /* 兼容旧版 Firefox */
  width: fit-content;          /* 现代浏览器 */
  max-width: none;
  overflow-x: visible;

  max-height: 100vh;
  padding: 20px 20px;

  /* 透明化 + 无容器阴影 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;

  color: rgba(255, 100, 100, 0.849);

  font: 700 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  z-index: 1;
  pointer-events: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.code-overlay::-webkit-scrollbar{ display: none; }

/* === 文字阴影 + 自动换行（仅这一项小优化） === */
#code-stream .line{
  /* 自动换行：既保留换行，又允许长行折行 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* 超长“单词”也可断行 */
  word-break: break-word;    /* 旧浏览器兜底 */

  /* 文字发光（阴影） */
  text-shadow:
    0 0 8px rgba(255,100,100,.45),
    0 0 2px rgba(255,100,100,.65);
}



.code-overlay::-webkit-scrollbar{ display: none; }

/* 文字发光更明显一点（与上面的红色匹配） */
#code-stream .line{
  white-space: pre;
  text-shadow:
    0 0 8px rgba(255,100,100,.45),
    0 0 2px rgba(255,100,100,.6);
}

/* —— 清理：删除或覆盖“在小屏隐藏”这段 —— */
/* （建议直接删掉你文件中这段）
@media (max-width: 900px){
  .code-overlay{ display: none; }
}
*/

/* 让手机也显示代码输出层（覆盖之前的小屏隐藏规则） */
@media (max-width: 900px){
  .code-overlay{ display:block !important; }
}

/* 手机横/竖屏时仅做尺寸微调（不限制宽度） */
@media (max-width: 900px) and (orientation: landscape){
  .code-overlay{
    left: .75rem;
    bottom: .75rem;
    /* 不设置 width，保持“无上限”策略 */
    max-height: 42vh;
    font-size: 12px;
  }
}
@media (max-width: 900px) and (orientation: portrait){
  .code-overlay{
    left: .75rem;
    bottom: .75rem;
    /* 不设置 width，保持“无上限”策略 */
    max-height: 32vh;
    font-size: 12px;
  }
}