/* ================== 基础与全局修复 ================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%; /* 防止 iOS 字号自动放大 */
}

/* 页面基本样式（保留你的主题风格） */
body { 
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  background-color: black;
  color: #00ff00;
  overflow-x: hidden;     /* 允许纵向滚动，避免内容被截断 */
  overflow-y: auto;
}

/* ================ 头部（Header） ================ */
header {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.70);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* 移除固定高度，使用内容自适应，并考虑安全区 */
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  height: auto;
}

/* 主内容为固定头部让位（移动/桌面各一套估计值，可按需微调） */
:root {
  --header-offset-mobile: 72px;
  --header-offset-desktop: 64px;
}
main { padding-top: var(--header-offset-mobile); }
@media (min-width: 769px) {
  main { padding-top: var(--header-offset-desktop); }
}

/* 左上角 Logo（桌面固定，移动自适应） */
.logo {
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.268);
  cursor: pointer;
  z-index: 101;
}
@media (min-width: 769px) {
  .logo {
    position: absolute;
    top: 8px;
    left: 12px;
  }
}

/* 中英名（用响应式字号防止把 header 撑太高） */
.chinese-name {
  display: block;
  font-size: clamp(18px, 6vw, 27px);
  font-family: 'Microsoft YaHei', 'SimHei', 'KaiTi', sans-serif;
  color: #11ff00;
  letter-spacing: 1px;
}
.english-name {
  font-size: clamp(18px, 6vw, 27px);
  font-family: 'Trebuchet MS', sans-serif;
  color: #00ff1e;
  letter-spacing: 0px;
}

/* 导航条 */
header nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  gap: 8px 12px;
  flex-wrap: wrap; /* 小屏自动换行 */
}
header nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 8px 10px;
  text-align: center;
  cursor: pointer;
  font-size: clamp(14px, 4vw, 20px);
}
header nav a:hover {
  color: #00ff00;
  animation: glitch 0.2s linear;
}
/* 移动端关闭 hover 抖动 */
@media (hover: none) and (pointer: coarse) {
  header nav a:hover { color: #ffffff; animation: none; }
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-5px, -5px); }
  40% { transform: translate(5px, 5px); }
  60% { transform: translate(-5px, 5px); }
  80% { transform: translate(5px, -5px); }
  100% { transform: translate(0); }
}

/* ================ 背景层/渲染层（固定视口） ================ */
/* 用 fixed + inset:0 + 100svh，解决 iOS 100vh 不稳定 */
#code-rain-container,
.ascii-effect-dom,
.renderer-dom {
  position: fixed;
  inset: 0;
}

#code-rain-container {
  pointer-events: none; /* 不影响下层交互 */
  width: 100%;
  height: 100svh;       /* 代替 100vh */
  z-index: 3;           /* 在最上层 */
  display: none;        /* 默认隐藏 */
}
#code-rain-container.active { display: block; }

.ascii-effect-dom {
  z-index: 2;           /* ASCII 效果在渲染器之上 */
  display: none;
}
.renderer-dom { z-index: 1; } /* 渲染器在代码雨之下 */

/* ================ 其他结构与缺省 ================ */
.content {
  padding: 0;
  text-align: center;
  transition: opacity 0.5s ease;
}

#artworks { height: 100%; margin: 0; padding: 0; }

/* Canvas 全屏占位，触控不被系统手势干扰 */
canvas {
  display: block;
  width: 100vw;
  height: 100svh;       /* 代替 100%/100vh */
  touch-action: none;
}

/* 年份球容器：全屏且居中 */
#artworks-container {
  width: 100%;
  height: 100svh;       /* 代替 100vh */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* artworks 内容区：全屏 */
#artworks-content {
  width: 100%;
  height: 100svh;       /* 代替 100vh */
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* ================ CRT 风格区域 ================ */
.crt-container {
  background: black;
  padding: 16px;
  border: 3px solid #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
  width: min(96vw, 1000px);       /* 宽度自适应限制 */
  height: min(78svh, 820px);      /* 更稳高度，避免与头/底重叠 */
  box-sizing: border-box;
  margin: max(12px, env(safe-area-inset-top)) auto 16px; /* 顶部预留安全区 */
}

.crt-screen {
  background: black;
  color: #00ff00;
  /* 字体按你原设定，两行取后一行；这里保留像素感 */
  font-family: 'Press Start 2P', cursive, '迷你黑', monospace;
  padding: 60px;                  /* 桌面较大内边距 */
  border-radius: 5px;
  text-align: initial; 
}

/* 小屏收紧内边距，避免文本贴边 */
@media (max-width: 768px) {
  .crt-screen { padding: 20px; }
}

/* ASCII 球与文字距离 */
#ascii-sphere { margin-bottom: 20px; }

/* 打字区域：原 100ch 在手机会超宽，改为 clamp */
#text-display {
  display: block;
  font-family: monospace;
  font-size: clamp(14px, 2.4vw, 16px);
  color: lime;
  white-space: pre-wrap;
  text-align: center;             
  line-height: 1.5;
  width: clamp(40ch, 92vw, 68ch); /* 小屏不超屏，桌面保持对齐感 */
  max-height: min(48svh, 420px);
  overflow-y: auto;
  margin: 0 auto;   
}

#text-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cursor {
  display: inline-block;
  vertical-align: bottom;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 语言切换：固定在屏幕右下，考虑安全区与可点尺寸 */
.language-selection {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 101; /* 高于渲染层 */
}

.language-selection button {
  background: black;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 8px 12px;
  cursor: pointer;
  font-family: 'Press Start 2P', cursive, '迷你黑', monospace;
  transition: background 0.3s;
  margin: 0;
  font-size: clamp(12px, 2.8vw, 14px);
}
.language-selection button:hover {
  background: #00ff00;
  color: black;
}

/* ===== 汉堡按钮基础样式（桌面隐藏，放在全局） ===== */
.menu-btn {
  display: none;
  position: absolute; right: 12px; top: 12px;
  background: rgba(0,0,0,0.4);
  color: #00ff00;
  border: 1px solid #00ff00;
  padding: 8px 10px;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  z-index: 102;
}
.menu-btn:focus { outline: 2px dashed #00ff00; outline-offset: 2px; }
.menu-text { margin-left: 8px; }

/* 三条横线图标 */
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: inline-block;
  width: 20px; height: 2px;
  background: #00ff00;
  content: "";
  vertical-align: middle;
  transition: transform .25s ease, opacity .25s ease;
}
.menu-icon { position: relative; }
.menu-icon::before { position: absolute; top: -6px; left: 0; }
.menu-icon::after  { position: absolute; top:  6px; left: 0; }

/* 展开时动画成 “X” */
header.nav-open .menu-icon { background: transparent; }
header.nav-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
header.nav-open .menu-icon::after  { transform: translateY(-6px) rotate(-45deg); }

/* ================ 移动端布局（竖版导航 + 粘顶不遮挡） ================ */
@media screen and (max-width: 768px) {
  /* header 不再 fixed，改为粘顶，且主内容不再预留顶部 */
  header { 
    position: sticky; 
    top: 0; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px 0; 
    height: auto; 
  }
  main { padding-top: 0; }

  .logo {
    position: static;
    margin-bottom: 16px;
    text-align: center;
  }

  /* 显示汉堡按钮，默认收起导航 */
  .menu-btn { display: inline-flex; align-items: center; }

  /* 竖版导航：默认隐藏，点击后展开为一列 */
  .site-nav { display: none; }
  header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 12px;
    border-top: 1px solid rgba(0,255,0,.3);
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
  }

  /* 竖排项：一行一个，分隔线 */
  header.nav-open .site-nav a {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    border-bottom: 1px solid rgba(0,255,0,.2);
    font-size: 18px;
  }
  header.nav-open .site-nav a:last-child { border-bottom: none; }
}