/* ========================================
   变量定义与基础重置
   ======================================== */

/* 根变量：定义主题色（浅色/深色模式） */
:root {
  --color-bg-body: #F0FFF0;       /* 蜜瓜色背景 */
  --color-bg-box: rgba(255, 255, 255, 0.6); /* 半透明白色盒子 */
  --color-text-main: #333333;    /* 深色文字 */
  --color-text-link: #87CEEB;    /* 天蓝色链接 */
  --color-text-accent: #E68FAC;  /* 粉色强调色 */
  --color-border: #333333;       /* 边框颜色 */
}

/* 深色模式变量 */
body.dark-mode {
  --color-bg-body: #1a1a1a;      /* 深灰背景 */
  --color-bg-box: rgba(50, 50, 50, 0.8); /* 深色半透明盒子 */
  --color-text-main: #f0f0f0;    /* 修正：把 #f0fou0 改成了 #f0f0f0 */
  --color-text-link: #4da6ff;    /* 适配深色的亮蓝 */
  --color-text-accent: #ff99cc;  /* 亮粉色 */
  --color-border: #cccccc;      /* 浅色边框 */
}

/* 字体引入 */
@font-face {
  font-family: 'BoBoHei';
  src: url('../font/JingNanBoBoHei-Bold-2.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'JunJunTi';
  src: url('../font/JingNanJunJunTi-JinNanJunJunTi-Bold-2.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'Maiyuan';
  src: url('../font/Kingnammm-Maiyuan-II-Regular-2.ttf');
  font-display: swap;
}

/* Body 基础样式 */
body {
  margin: 0;
  padding: 10px;
  background-color: var(--color-bg-body);
  display: grid;
  justify-items: center;
  grid-template-areas: 
    "topbar" 
    "mainbox" 
    "hobby"
    "brith"
    "footer";
  gap: 10px;
  transition: background-color 0.3s ease;
}

/* ========================================
   通用组件类 (消除重复代码)
   ======================================== */
/* 所有卡片/容器的通用样式 */
.card {
  font-family: 'JunJunTi' !important;
  width: 500px;
  background-color: var(--color-bg-box);
  color: var(--color-text-main);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  border: none;
  border-radius: 10px;
}

/* ========================================
   导航栏 (Navbar)
   ======================================== */
.mainbar {
  grid-area: topbar;
  width: 600px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.item {
  color: var(--color-text-link);
  text-align: center;
  font-family: 'Maiyuan';
  width: 100px;
  height: 35px;
  line-height: 35px;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Logo 特殊样式 */
#icon {
  cursor: default;
  margin-right: auto;
}

/* ========================================
   内容模块 (Content Sections)
   ======================================== */
/* 主要板块 */
#section-main {
  grid-area: mainbox;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas: "maintext myicon";
  gap: 10px;
  padding: 20px;
}

/* 自我介绍文字 */
.intro-text {
  grid-area: maintext;
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  font-family: 'JunJunTi' !important;
  color: var(--color-text-accent);
  border-right: var(--color-border) solid 1px;
  padding-right: 20px;
}

/* 自我介绍图片 */
.intro-avatar {
  grid-area: myicon;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 爱好模块 */
#section-hobby {
  grid-area: hobby;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#brith {
  grid-area: brith;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#section-article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

#section-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

#section-friend {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

#section-archive {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
}

#archive-line {
  padding-left: 30px;
  border-left: 2px var(--color-text-link) solid;
}

#site-footer {
  grid-area: footer;
  width: 100%;
  max-width: 820px; 
  height: 100px;
  font-family: 'BoBoHei' !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ========================================
   交互组件 (Theme Toggle)
   ======================================== */
#theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  border: 2px solid var(--color-border);
  background-color: var(--color-bg-box);
  color: var(--color-text-main);
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Maiyuan';
  transition: all 0.3s ease;
  z-index: 100;
}


#theme-toggle:hover {
  transform: scale(1.05);
}

#shell {
  padding: 0px;
  text-align: left;
  position: fixed;
  left: 10px;
  top: 100px;
  width: 200px;
  height: 300px;
  z-index: 100;
  border: #1a1a1a;
  padding: 10px 20px; 
  overflow-y: auto;
  overflow-x: hidden;
}
/* 命令回显行 */
.shell-line {
    white-space: pre-wrap;
    word-break: break-all;      /* 超长内容强制换行 */
    margin-bottom: 2px;
}

/* 命令输出行 */
.shell-output {
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 8px;
}

/* 提示符样式 */
#shell span[style*="white-space: pre"] {
    white-space: pre;
    margin-right: 4px;
}

/* 输入框融入终端背景 */
#shell-cmd {
    background: transparent;
    border: none;
    outline: none;
    font-family: "JunJunTi";
    font-size: 14px;
    flex: 1;
    color: var(--color-text-main);
}

/* ========================================
   动态效果组件 (Action)
   ======================================== */
/* 换页的滑入效果 */
.chage-in-page {
  animation: chin 1s forwards;
}

@keyframes chin {
  0%{
    transform: translateX(700px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* 换页滑出效果 */
.chage-out-page {
  animation: chout  1s forwards;
}

@keyframes chout {
  0%{}
  100%{
    transform: translateX(800px);
  }
}

/* ======================================== 移动端适配 (Mobile Responsive) ======================================== */
@media (max-width: 768px) {
    /* 1. 全局调整 */
    body {
        padding: 10px; /* 减少两侧留白 */
        /* 保持 grid 布局，但让内部元素自适应宽度 */
    }

    /* 2. 通用卡片类：强制宽度 100% */
    .card {
        width: 100% !important; /* 覆盖原来的 500px */
        box-sizing: border-box; /* 确保 padding 不会撑破宽度 */
    }

    /* 3. 导航栏调整 */
    .mainbar {
        width: 100% !important; /* 覆盖原来的 600px */
        
    }
    .item {
        width: 45%; /* 一行放两个按钮，或者根据需要调整 */
        margin: 5px 0;
    }

    /* 4. 核心内容区：改为上下结构 */
    #section-main {
        grid-template-columns: 1fr; /* 强制单列 */
        grid-template-areas: 
            "maintext"
            "myicon"; /* 文字在上，图片在下 */
        text-align: center; /* 文字居中 */
        gap: 20px;
        padding: 10px;
    }

    /* 自我介绍文字 */
    .intro-text {
        border-right: none; /* 去掉右边的竖线 */
        border-bottom: 1px solid var(--color-border); /* 加到底部 */
        padding-right: 0;
        padding-bottom: 20px;
        justify-content: center; /* 文字居中 */
    }

    /* 头像图片 */
    .intro-avatar {
        justify-content: center; /* 图片居中 */
    }

    /* 5. 终端窗口优化 */
    #shell {
        position: static; /* 取消固定定位，让它随页面滚动 */
        width: 100%;
        height: auto;
        max-height: 300px; /* 限制最大高度 */
        margin-top: 10px;
        left: 0;
        top: 0;
        z-index: 2;
    }

    /* 6. 底部 Footer */
    #site-footer {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }
}