body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* 防止出现滚动条 */
    
    background: linear-gradient(
        125deg,
        #fce7f3 0%,   /* 极淡的粉 */
        #e0f2fe 30%,  /* 极淡的蓝 */
        #ffffff 50%,  /* 纯白过渡 */
        #fce7f3 70%,  /* 回到粉 */
        #e0f2fe 100%  /* 回到蓝 */
    );
    background-size: 400% 400%;
    animation: bg-flow 15s ease infinite; /* 让背景缓慢流动 */
    
    display: flex; /* 关键：开启弹性布局，让子元素左右排列 */
    flex-direction: row; /* 明确指定是横向排列 */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* 加上字体会让文字更优雅 */
}

.father {
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage {
    width: 40vh;
    height: 40vh;
    position: relative; 
}

.center {
    width: 100%; 
    height: 100%;
    
    display: flex;
    flex-wrap: wrap;
    padding: 0;

    animation: spin 10s linear infinite; 
}

.quadrant {
    width: 50%;
    height: 50%;
    /*background-color: aqua;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    border: none;

    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;

    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.6), 
        0 0 10px rgba(255, 255, 255, 0.2);     
    background-size: 400% 400%;

    animation: flow 10s ease infinite;

    flex-direction: column;

    gap: 8px;

    /*color: white;*/
    font-weight: 700;
    font-size: 1.15rem;
    text-shadow: none; /* 给文字加一点阴影，防背景太浅看不清 */
}



.top-left {
    background-image: linear-gradient(135deg, #5BCEFA 0%, #FFFFFF 50%, #5BCEFA 100%);    
    border-radius: 100% 30px 30px 30px; 
    color: #0c4a6e;
}

.top-right {
    background-image: linear-gradient(225deg, #F5A9B8 0%, #FFFFFF 50%, #F5A9B8 100%);
    border-radius: 30px 100% 30px 30px; 
    color: #881337;
}
.bottom-left {
    background-image: linear-gradient(45deg, #F5A9B8 0%, #FFFFFF 50%, #F5A9B8 100%);
    border-radius: 30px 30px 30px 100%; 
    color: #881337;
}
.bottom-right {
    background-image: linear-gradient(315deg, #5BCEFA 0%, #FFFFFF 50%, #5BCEFA 100%);
    border-radius: 30px 30px 100% 30px; 
    color: #0c4a6e;
}

.inner-circle {
    width: 50%;
    height: 50%;
    background-color: #ffffff;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;

    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    z-index: 10; 

    transition: transform 0.3 ease;

    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 1);
}

.quadrant.active {
    transform: scale(1.12); /* 变大 */
    filter: brightness(1.1) drop-shadow(0 0 15px rgba(255,255,255,0.6));
    z-index: 50;
}

.inner-circle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 192, 203, 0.8);
}

.icon-svg {
    width: 32px;
    height: 32px;

    fill: currentColor;; /* 让图标填充白色 */
    filter: drop-shadow(0 2px 3px rgba(255,255,255,0.5)); /* 给图标也加一点投影 */
}

.content-fix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 这里继承之前的间距设置 */
    animation: spin-reverse 10s linear infinite;
}



/* 从这里开始就是右边的卡片的代码喵 */

.intro-card-area {
    width: 50vw; /* 占据右半边 */
    height: 100vh;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右侧卡片区域的透视设置 */
.intro-card-area {
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

/* 玻璃面板主体 */
.glass-panel {
    width: 360px;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.45); /* 更淡的背景 */
    backdrop-filter: blur(40px) saturate(180%); /* 更强的磨砂 */
    -webkit-backdrop-filter: blur(25px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset; /* 内发光 */
    
    display: flex;
    flex-direction: column;
    gap: 30px; /* 模块之间的间距 */
    
    color: #4a5568;
    transition: transform 0.3s ease;
}

.glass-panel:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.6);
}

/* 1. 头像部分 */
.profile-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.avatar-glow {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.9);
    
    /* 关键：给头像加一个呼吸光环，像能量源一样 */
    box-shadow: 0 0 20px rgba(91, 206, 250, 0.4); 
    animation: glow 3s infinite alternate;

    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;

    z-index: 5;
}

.avatar-glow:hover {
    /* 变大到 1.15 倍 */
    transform: scale(1.15); 
    /* 让光环变得更亮、更大 */
    box-shadow: 0 0 35px rgba(91, 206, 250, 0.7);
    /* 鼠标放上去时暂停呼吸动画，避免冲突，体验更好 */
    animation-play-state: paused;
}

.user-id {
    font-size: 0.9rem;
    letter-spacing: 2px;
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: bold;
    color: #4a5568;
}

@keyframes glow {
    from { box-shadow: 0 0 15px rgba(91, 206, 250, 0.3); }
    to { box-shadow: 0 0 30px rgba(245, 169, 184, 0.5); }
}

/* 2. 数据仪表盘 */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(0, 0, 0, 0.1); /* 给数据区加深一点底色，增加可读性 */
    padding: 15px;
    border-radius: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    font-weight: bold;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #718096;
    text-shadow: none;
}

/* 等宽字体，让数字跳动时不会左右抖动 */
.mono-font {
    font-family: 'Courier New', Courier, monospace; 
}

/* 3. 功能按钮网格 */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 三等分 */
    gap: 10px;
}

.menu-btn {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border-radius: 12px;
    padding: 15px 0;
    cursor: pointer;
    color: #4a5568;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    
    transition: all 0.2s ease;
}

.menu-btn:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(148, 163, 184, 0.1);
}

.btn-icon {
    font-size: 1.2rem;
}

.menu-btn span:last-child {
    font-size: 0.8rem;
    font-weight: bold;
}

/* =========================================
   🐱 猫娘实验室 · 鼠标样式 (修复版)
   ========================================= */

/* 1. 默认状态：白底粉边猫爪 */
body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' stroke='%23F5A9B8' stroke-width='2' stroke-linejoin='round' d='M16,17c-3,0-5,2-5,4.5c0,2,2.5,4.5,5,4.5s5-2.5,5-4.5C21,19,19,17,16,17z M7.5,12c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S9.3,12,7.5,12z M13,8.5c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S14.8,8.5,13,8.5z M19,8.5c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S20.8,8.5,19,8.5z M24.5,12c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S26.3,12,24.5,12z'/%3E%3C/svg%3E") 16 16, auto;
}

/* 2. 悬停状态：粉底白边猫爪 (更加 Q 弹) */
:hover[style*="cursor: pointer"],
a:hover,
button:hover,
.quadrant:hover,
.inner-circle:hover,
.menu-btn:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23F5A9B8' stroke='white' stroke-width='2' stroke-linejoin='round' d='M16,17c-3,0-5,2-5,4.5c0,2,2.5,4.5,5,4.5s5-2.5,5-4.5C21,19,19,17,16,17z M7.5,12c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S9.3,12,7.5,12z M13,8.5c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S14.8,8.5,13,8.5z M19,8.5c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S20.8,8.5,19,8.5z M24.5,12c-1.8,0-3,1.5-3,3s1.5,3,3,3s3-1.5,3-3S26.3,12,24.5,12z'/%3E%3C/svg%3E") 16 16, pointer !important;
}

/* =========================================
   📱 手机端适配 v0.12 (交互修复版)
   目标：修复点击卡片导致整体放大的 Bug，并增强按钮点击反馈
   ========================================= */
@media (max-width: 768px) {
    
    /* --- 1. 布局基础 (保持 v0.11 的完美中心对齐) --- */
    body {
        flex-direction: column;
        height: 100svh;
        overflow: hidden;
        padding: 0;
    }

    .father {
        width: 100vw;
        flex: 1;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center; 
        padding-top: env(safe-area-inset-top); 
        z-index: 1;
    }

    .intro-card-area {
        width: 100vw;
        flex: 1;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center; 
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 2;
    }

    .stage {
        width: 70vw; 
        height: 70vw;
        max-width: 35vh; 
        max-height: 35vh;
    }

    /* --- 2. 核心修复：玻璃卡片防误触 --- */
    .glass-panel {
        width: 90vw;
        transform: scale(0.75); 
        transform-origin: center center; 
        margin: 0;
        padding: 20px;
        gap: 12px;
        
        /* 🔥 关键修复：强制手机端没有悬停效果 */
        /* 即使手指按上去，也保持原样，不准上浮，不准变大 */
        transition: none; 
    }

    /* 🔥 暴力覆盖：如果触发了 hover，强行按回 0.75 */
    .glass-panel:hover, .glass-panel:active {
        transform: scale(0.75) !important; 
        border-color: rgba(255, 255, 255, 0.8) !important; /* 保持边框不变 */
    }

    /* --- 3. 按钮交互优化 --- */
    /* 让四个小组件在点击时有反馈 */
    .menu-btn {
        padding: 12px 0;
        /* 手机上点击要有弹性 */
        transition: transform 0.1s;
    }

    /* 当手指按住按钮时 */
    .menu-btn:active {
        background: white; /* 变白 */
        transform: scale(0.95); /* 稍微缩小一点点，产生"按下去"的感觉 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* 解决部分手机点击按钮后一直保持变大状态的问题 */
    .menu-btn:hover {
        transform: scale(1); /* 手机上不执行悬停变大，只执行按下缩小 */
    }

    /* --- 4. 其他细节 --- */
    .avatar-glow {
        width: 75px; 
        height: 75px;
    }
    
    body, .quadrant, .inner-circle {
        cursor: auto !important; 
    }
    
    /* 既然按钮可以点了，就让按钮恢复小手光标(可选) */
    .menu-btn {
        cursor: pointer !important;
    }

    .inner-circle {
    width: 35%; 
    height: 35%;
    }
}