/* CSS变量定义，用于响应式布局的关键尺寸 */
:root {
    --terminal-width: clamp(200px, 60vw, 600px);    /* 终端宽度范围 */
    --terminal-height: clamp(45px, 15vh, 150px);    /* 终端高度范围 */
    --font-size-base: clamp(12px, 2vw, 16px);       /* 基础字体大小范围 */
}

/* 页面基础布局设置 */
body {
    margin: 0;                    /* 移除外边距 */
    padding: 0;                   /* 移除内边距 */
    min-height: 100vh;            /* 最小高度为视口高度 */
    width: 100vw;                 /* 宽度为视口宽度 */
    overflow: hidden;            /* 隐藏水平滚动条 */
    background: #000;             /* 黑色背景 */
    color: #00ff00;              /* 绿色文字 */
    font-family: 'Courier New', monospace;  /* 等宽字体 */
    display: grid;                /* 使用网格布局 */
    grid-template-rows: 1fr auto 1fr;  /* 三行布局：上-中-下 */
}

/* 终端窗口样式 */
.terminal {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-100%);
    margin-bottom: 80px;         /* 底部边距 - 可调整 */
    margin-left: 160px;           /* 向右偏移 - 可调整 */
    grid-row: 3;                  /* 放在最后一行 */
    place-self: end center;       /* 底部居中 */
    width: min(280px, 85%);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #0f0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    z-index: 1000;
}

/* 终端头部样式 */
.terminal-header {
    background: #1a1a1a;          /* 深灰色背景 */
    padding: 8px;                 /* 内边距 */
    border-bottom: 1px solid #0f0;  /* 底部边框 */
    display: flex;                /* 弹性布局 */
    align-items: center;          /* 垂直居中 */
}

/* 终端按钮容器 */
.terminal-buttons {
    display: flex;                /* 弹性布局 */
    gap: 6px;                     /* 按钮间距 */
}

/* 终端按钮基础样式 */
.terminal-button {
    width: 12px;                  /* 按钮宽度 */
    height: 12px;                 /* 按钮高度 */
    border-radius: 50%;           /* 圆形按钮 */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* 半透明边框 */
}

/* 关闭按钮 */
.close { background: #ff5f56; }   /* 红色 */
/* 最小化按钮 */
.minimize { background: #ffbd2e; } /* 黄色 */
/* 最大化按钮 */
.maximize { background: #27c93f; } /* 绿色 */

/* 终端标题样式 */
.terminal-title {
    color: #0f0;                  /* 绿色文字 */
    margin-left: 20px;            /* 左边距 */
    font-size: 0.9em;             /* 字体大小 */
}

/* 终端内容区域样式 */
.terminal-content {
    padding: 15px;                /* 内边距 */
    height: 150px;                /* 内容区高度 */
    overflow-y: auto;             /* 垂直滚动 */
    font-size: clamp(10px, 1.5vw, 14px);  /* 响应式字体 */
    line-height: 1.5;             /* 行高 */
    color: #0f0;                  /* 绿色文字 */
}

/* 滚动条样式 */
.terminal-content::-webkit-scrollbar {
    width: 5px;                   /* 滚动条宽度 */
}

.terminal-content::-webkit-scrollbar-track {
    background: #0a0a0a;          /* 滚动条轨道颜色 */
}

.terminal-content::-webkit-scrollbar-thumb {
    background: #0f0;             /* 滚动条滑块颜色 */
    border-radius: 3px;           /* 滑块圆角 */
}

/* Matrix背景效果 */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;  /* 确保在最底层 */
}

/* 主消息样式 */
.main-message {
    grid-row: 2;                  /* 放在中间行 */
    place-self: center;           /* Grid布局完美居中 */
    z-index: 1;
}

/* 主标题文字效果 */
.glitch {
    font-size: clamp(2.5em, 6vw, 4.5em);  /* 响应式字体大小 */
    font-weight: bold;            /* 粗体 */
    color: #fff;                  /* 白色文字 */
    text-align: center;           /* 文字居中 */
    white-space: nowrap;          /* 防止文字换行 */
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 40px #0ff,
        0 0 80px #0ff,
        0 0 90px #0ff,
        0 0 100px #0ff,
        0 0 150px #0ff;
    animation: neon 1.5s ease-in-out infinite alternate;  /* 霓虹灯动画 */
}

/* 霓虹灯动画关键帧 */
@keyframes neon {
    from {
        text-shadow: /* 初始状态 */
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 40px #0ff,
            0 0 80px #0ff,
            0 0 90px #0ff,
            0 0 100px #0ff,
            0 0 150px #0ff;
    }
    to {
        text-shadow: /* 结束状态 */
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #0ff,
            0 0 40px #0ff,
            0 0 45px #0ff,
            0 0 50px #0ff,
            0 0 75px #0ff;
    }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .terminal {
        width: min(280px, 85%);   /* 移动端终端宽度 */
    }

    .terminal-content {
        height: 120px;            /* 移动端内容区高度 */
    }

    .terminal-button {
        width: 8px;               /* 移动端按钮尺寸 */
        height: 8px;
    }

    .terminal-title {
        font-size: 0.8em;         /* 移动端标题字体 */
    }

    .glitch {
        font-size: clamp(1.8em, 5vw, 2.5em);  /* 移动端主标题字体 */
        white-space: nowrap;       /* 防止文字换行 */
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .terminal {
        height: auto;             /* 自适应高度 */
    }

    .terminal-content {
        height: 80px;             /* 横屏模式内容区高度 */
    }

    .glitch {
        font-size: clamp(1.5em, 4vw, 2em);  /* 横屏模式主标题字体 */
    }
}