* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* 背景图片层，亮度 50% */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #000; /* 图片加载前/失败时的兜底色 */
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6);
}

/* 标题容器：贴最左边框；垂直方向在“居中”基础上整体抬高 20%（页面高度的 20%）
   注意：不设 z-index，避免形成层叠隔离，使文字能与背景图混合 */
.title-box {
  position: absolute;
  top: 30%;                /* 居中(50%) 抬高 20% → 30% */
  left: 0;                 /* 始终靠最左边框 */
  transform: translateY(-50%);
  /* 垂直方向居中，水平方向靠左 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 整排字靠左，字号由 JS 计算：使 "Welcome" 文本宽度恒等于页面宽度的一半，随窗口缩放
   颜色用 mix-blend-mode: difference 对背景反相，自动形成对比色 */
.title {
  text-align: left;
  color: #ffffff;          /* 与 difference 混合后呈背景反色 */
  mix-blend-mode: difference;
  font-family: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;
  font-size: 16vw;         /* 兜底值；实际由 script.js 动态覆盖为精确的 50% 宽度 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;     /* 保持单行，字号由宽度决定 */
}

/* Welcome 下方区域：绝对定位于 .title-box 底部，使 Welcome 位置保持不变
   与 Welcome 相隔页面高度的 1/20（5vh），整体限制在左半页（50vw） */
.below {
  position: absolute;
  top: 100%;               /* 紧贴 .title-box（即 Welcome）底部 */
  left: 0;
  margin-top: 5vh;         /* 与 Welcome 相隔页面高度 1/20 */
  width: 50vw;             /* 限制在左半页 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 副标题：字号恒为 Welcome 的 1/3（由 script.js 设定）；
   自动换行，宽度受 .below(50vw) 限制，因此只占用左半页 */
.subtitle {
  text-align: left;
  color: #ffffff;
  mix-blend-mode: difference;
  font-family: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;
  font-size: 5.3vw;        /* 兜底值；实际由 script.js 动态覆盖 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: normal;     /* 允许换行 */
  overflow-wrap: anywhere; /* 超长无空格文本也能在半页内断行 */
}

/* 三个按钮：占满左半页宽度、空间均匀分布 */
.actions {
  margin-top: 4vh;
  width: 100%;             /* = .below = 50vw（左半页），box-sizing: border-box */
  padding-left: 20px;      /* 最左按钮离左边界空出 20px（右边界仍为 50vw） */
  display: flex;
  justify-content: space-between;  /* 三个按钮在左半页内均匀分布 */
  align-items: center;
  gap: 1.5vw;
}

.action-btn {
  flex: 1 1 0;             /* 三个按钮等宽，均分左半页空间（宽度不变） */
  text-align: center;
  padding: 0 0.6em;        /* 上下无内边距：边框高度贴合字体高度 */
  line-height: 1.3;        /* 边框高度随字体高度变化 */
  color: #ffffff;
  text-decoration: none;
  border: 2px solid transparent;   /* 未选中：无可见边框（保留透明边框以固定高度，避免选中时跳动） */
  border-radius: 0;        /* 直角边角 */
  background: rgba(255, 255, 255, 0.06);
  font-family: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;
  font-size: clamp(12px, 1.4vw, 26px);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  outline: none;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 当前选中（键盘 ←/→ 或点击）状态：反色高亮，仅此状态显示边框 */
.action-btn.selected {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* 命令行风格光标 */
.cursor {
  display: inline-block;
  width: 0.6em;
  margin-left: 0.05em;
  background: #ffffff;     /* 随 .title 一起 difference 混合，呈背景反色 */
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}