:root {
    --bg-color: #02050a;
    --neon-blue: #00f3ff;
    --neon-purple: #bc13fe;
    --text-main: #e2f1f8;
    --text-muted: #5e8b9e;
    --glass-bg: rgba(10, 15, 25, 0.65);
    --border-color: rgba(0, 243, 255, 0.3);
}

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

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* =========================================
   1. 最底层：静谧星空背景
   ========================================= */
#deep-space-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('../image/星空.jpg');
    background-size: cover;
    background-position: center;
    z-index: -5; /* 垫在最下面 */
}

/* =========================================
   2. 中间层：星际跃迁流线 (由于透明飞船盖在上面，不再需要 screen 混合)
   ========================================= */
#universe {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -4;
    pointer-events: none;
    opacity: 0.9;
}

/* =========================================
   2.5 上层遮罩：透明抠图驾驶舱 (带晃动特效)
   ========================================= */
#cockpit-overlay {
    position: fixed;
    top: -5%; left: -5%; width: 110vw; height: 110vh; /* 稍微放大留出晃动空间 */
    background-image: url('../image/飞船2.png');
    background-size: cover;
    background-position: center;
    z-index: -3; /* 盖在星星上面，但被 UI 压在下面 */
    pointer-events: none; /* 让鼠标穿透飞船图片 */
    animation: ship-shake 6s ease-in-out infinite alternate;
}

/* 模拟飞船行驶时的随机微小晃动 */
@keyframes ship-shake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-8px, 5px) rotate(-0.5deg); }
    40%  { transform: translate(5px, -8px) rotate(0.3deg); }
    60%  { transform: translate(-10px, -3px) rotate(0.5deg); }
    80%  { transform: translate(8px, 6px) rotate(-0.2deg); }
    100% { transform: translate(-2px, -10px) rotate(0.4deg); }
}

/* =========================================
   3. AI 精灵 (漂浮的光球)
   ========================================= */
#ai-sprite {
    position: absolute;
    width: 60px; height: 60px;
    z-index: -1;
    pointer-events: none;
}

.ai-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: #e0f7fa;
    border-radius: 50%;
    box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-purple);
    animation: core-pulse 1.5s infinite alternate;
}

@keyframes core-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.ai-ring-1, .ai-ring-2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
}
.ai-ring-1 {
    border-top-color: var(--neon-blue);
    border-bottom-color: var(--neon-blue);
    animation: ring-spin-1 3s linear infinite;
}
.ai-ring-2 {
    border-left-color: var(--neon-purple);
    border-right-color: var(--neon-purple);
    width: 130%; height: 130%;
    top: -15%; left: -15%;
    animation: ring-spin-2 4s linear infinite;
}

@keyframes ring-spin-1 { 100% { transform: rotate(360deg); } }
@keyframes ring-spin-2 { 100% { transform: rotate(-360deg); } }

/* =========================================
   4. 顶层：居中主控面板
   ========================================= */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 243, 255, 0.1);
    border-radius: 12px;
}

.container {
    width: 90%; max-width: 450px;
    padding: 35px 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* --- 头像区域 --- */
.avatar-wrapper {
    position: relative;
    width: 120px; height: 120px;
    margin: 0 auto 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.avatar-wrapper:hover { transform: scale(1.05); }

.hologram-ring {
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 2px dashed var(--neon-blue);
    border-radius: 50%;
    animation: rotateRing 15s linear infinite;
    opacity: 0.6;
}

@keyframes rotateRing { 100% { transform: rotate(360deg); } }

.avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #111;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
    /* 已移除之前导致怪异变色的 sepia 滤镜 */
}

.status-dot {
    position: absolute;
    bottom: 5px; right: 10px;
    width: 16px; height: 16px;
    background-color: #10b981;
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 12px #10b981;
}

/* --- 文字特效 --- */
.glitch-text {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-main);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-shadow: 0 0 5px var(--neon-blue);
}
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
}
.glitch-text::before {
    left: 2px; text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -1px 0 blue;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 44px, 0); }
    20% { clip: rect(65px, 9999px, 12px, 0); }
    40% { clip: rect(89px, 9999px, 33px, 0); }
    60% { clip: rect(12px, 9999px, 88px, 0); }
    80% { clip: rect(45px, 9999px, 2px, 0); }
    100% { clip: rect(77px, 9999px, 56px, 0); }
}

.bio { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 25px; line-height: 1.4;}

/* --- 链接卡片 --- */
.links-section { display: flex; flex-direction: column; gap: 12px; }
.link-card {
    display: flex; align-items: center;
    padding: 15px 20px;
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 8px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem; font-weight: bold; letter-spacing: 1px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.link-card i { font-size: 1.3rem; margin-right: 15px; color: var(--neon-blue); transition: color 0.3s; }

.link-card.neon-hover:hover {
    background: rgba(0, 243, 255, 0.2);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
    transform: translateY(-2px);
}
.link-card.api-link:hover { border-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
.link-card.api-link:hover i { color: #f59e0b; }
.link-card.discord-link:hover { border-color: #5865F2; box-shadow: 0 0 15px rgba(88, 101, 242, 0.5); }
.link-card.discord-link:hover i { color: #5865F2; }
.link-card.qq-link:hover { border-color: #12b7f5; box-shadow: 0 0 15px rgba(18, 183, 245, 0.5); }
.link-card.qq-link:hover i { color: #12b7f5; }

/* 底部状态 */
.cyber-footer { margin-top: 20px; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 15px;}
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* --- 彩蛋模态框 --- */
#easter-egg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 999;
    opacity: 1; transition: opacity 0.3s;
}
#easter-egg.hidden { opacity: 0; pointer-events: none; }

.cyber-panel {
    background: #000;
    border: 2px solid var(--neon-purple);
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.4);
    padding: 30px; text-align: center; max-width: 350px;
    border-radius: 10px;
}
.neon-text-pink { color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple); margin-bottom: 15px;}
.terminal-text { color: #0f0; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
.cyber-img { width: 150px; border: 1px solid var(--neon-purple); margin-bottom: 20px; filter: contrast(1.1); border-radius: 8px;}
.cyber-btn {
    background: rgba(188, 19, 254, 0.1); color: var(--neon-purple);
    border: 1px solid var(--neon-purple);
    padding: 10px 20px; cursor: pointer; text-transform: uppercase;
    font-weight: bold; border-radius: 5px; transition: all 0.2s;
}
.cyber-btn:hover { background: var(--neon-purple); color: #000; box-shadow: 0 0 15px var(--neon-purple); }