/* 全局样式重置和基础设置 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* CSS变量定义 - 亮色模式 */
 :root {
     /* 主色调 - 优化的紫色渐变 */
     --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
     --primary-color: #6366f1;
     --secondary-color: #8b5cf6;
     
     /* 背景色 - 土黄色、草绿色、朝霞色、天蓝色渐变 */
     --bg-gradient: linear-gradient(
         to top,
         rgba(218, 165, 32, 0.35) 0%,      /* 土黄色：0-25% */
         rgba(218, 165, 32, 0.3) 22%,
         rgba(124, 252, 0, 0.3) 28%,     /* 草绿色：25-50% */
         rgba(124, 252, 0, 0.25) 47%,
         rgba(255, 160, 122, 0.25) 53%,    /* 朝霞色：50-60% */
         rgba(255, 160, 122, 0.2) 58%,
         rgba(135, 206, 250, 0.2) 62%,   /* 天蓝色：60-100% */
         rgba(135, 206, 250, 0.15) 100%
     );
     --card-bg: linear-gradient(135deg, rgba(230, 240, 255, 0.2) 0%, rgba(200, 220, 255, 0.15) 100%);
     --card-bg-hover: linear-gradient(135deg, rgba(230, 240, 255, 0.25) 0%, rgba(200, 220, 255, 0.2) 100%);
     
     /* 文字颜色 - 改为灰黑色确保可见 */
     --text-primary: rgba(45, 45, 50, 0.95);
     --text-secondary: rgba(60, 60, 65, 0.88);
     --text-muted: rgba(80, 80, 85, 0.7);
     
     /* 边框和阴影 */
     --border-color: rgba(255, 255, 255, 0.3);
     --border-glass: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(255, 255, 255, 0.2);
     --border-glass-light: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 0 1px rgba(255, 255, 255, 0.25);
     --border-glass-dark: 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 0 0 1px rgba(0, 0, 0, 0.05);
     --text-engrave: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.15);
     --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     --shadow-glass-strong: 0 12px 48px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
     --shadow-glass-elevated: 0 16px 64px rgba(0, 0, 0, 0.22), 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
     
     /* 按钮颜色 */
     --btn-primary: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85));
     --btn-primary-hover: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95));
     --btn-danger: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.85));
     --btn-danger-hover: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
     --btn-danger-border: rgba(239, 68, 68, 0.3);
     
     /* 特殊元素颜色 */
     --apple-color: #34d399;
     --cake-color: #fbbf24;
     --chicken-color: #f87171;
     --cow-color: #93c5fd;
 }
 
 /* 深夜模式 */
 body.dark-mode {
    /* 背景色 */
    --bg-gradient: linear-gradient(
        to top,
        rgba(218, 165, 32, 0.2) 0%,  /* 底部：土黄色 */
        rgba(124, 252, 0, 0.18) 35%,   /* 中间：草绿色 */
        rgba(255, 160, 122, 0.15) 70%,/* 上部：朝霞色 */
        rgba(135, 206, 250, 0.12) 100% /* 顶部：天蓝色 */
    );
    --card-bg: linear-gradient(135deg, rgba(30, 27, 75, 0.45) 0%, rgba(49, 46, 129, 0.45) 100%);
    --card-bg-hover: linear-gradient(135deg, rgba(30, 27, 75, 0.55) 0%, rgba(49, 46, 129, 0.55) 100%);
    
    /* 文字颜色 */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.65);
    
    /* 边框和阴影 */
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* 游戏容器深色模式 */
body.dark-mode #gameContainer {
    background-color: rgba(10, 15, 25, 0.95);
}

/* 游戏标题深色模式 */
body.dark-mode .game-title h1 {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .game-title p {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 提示按钮样式 - 主游戏容器 */
.control-btn#hintButton {
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2em;
    padding: 10px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #cccccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 提示按钮样式 - 游戏卡片 */
.hint-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2em;
    padding: 10px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #cccccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 提示按钮启用状态 - 主游戏容器 */
.control-btn#hintButton.hint-btn-enabled {
    opacity: 1;
    cursor: pointer;
    filter: none;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    background: rgba(255, 204, 0, 0.15);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2);
}

/* 提示按钮启用状态 - 游戏卡片 */
.hint-btn.hint-btn-enabled {
    opacity: 1;
    cursor: pointer;
    filter: none;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    background: rgba(255, 204, 0, 0.15);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2);
}

/* 提示按钮禁用状态 - 主游戏容器 */
.control-btn#hintButton.hint-btn-disabled {
    opacity: 1;
    cursor: not-allowed;
    /* 移除整体灰色滤镜，只让灯泡图标变灰 */
    text-shadow: none;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 提示按钮禁用状态 - 游戏卡片 */
.hint-btn.hint-btn-disabled {
    opacity: 1;
    cursor: not-allowed;
    /* 移除整体灰色滤镜，只让灯泡图标变灰 */
    text-shadow: none;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 提示按钮图标样式 */
.hint-icon {
    transition: all 0.3s ease;
    font-size: 1.2em;
    opacity: 1;
}

/* 启用状态的图标样式 */
.hint-btn-enabled .hint-icon {
    opacity: 1;
    color: #ffcc00; /* 启用状态使用明亮的黄色 */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* 禁用状态的图标样式 */
.hint-btn-disabled .hint-icon {
    opacity: 1;
    color: #cccccc; /* 禁用状态使用深灰色 */
    text-shadow: none;
    filter: grayscale(100%);
}

/* 禁用状态下，保持提示文本和提示次数的正常颜色 */
.hint-btn-disabled .hint-text,
.hint-btn-disabled .hint-count {
    color: inherit;
    filter: none;
}

/* 玻璃拟态气泡提示框 */
.glass-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 12px 20px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    text-align: center;
}

/* 深色模式下的玻璃拟态气泡提示框 */
body.dark-mode .glass-tooltip {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 按钮深色模式 */
body.dark-mode .start-button,
body.dark-mode .direction-btn,
body.dark-mode .control-btn,
body.dark-mode .func-btn {
    background: var(--card-bg);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .start-button:hover,
body.dark-mode .direction-btn:hover,
body.dark-mode .control-btn:hover,
body.dark-mode .func-btn:hover {
    background: var(--card-bg-hover);
    box-shadow: var(--shadow-md);
}

/* 游戏信息深色模式 */
body.dark-mode .game-info {
    background: var(--card-bg);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 游戏网格深色模式 */
body.dark-mode .game-grid {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
}

/* 卡片容器深色模式 */
body.dark-mode #cardsContainer {
    background: rgba(10, 15, 25, 0.9);
}

/* 卡片深色模式 */
body.dark-mode .card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .card:hover {
    background: var(--card-bg-hover);
    box-shadow: var(--shadow-md);
}

body.dark-mode .card-header {
    background: rgba(30, 27, 75, 0.6);
    border-bottom: 1px solid rgba(100, 150, 250, 0.3);
    box-shadow: 
        /* 右侧外阴影 - 加深并加大范围 */
        12px 0 35px rgba(0, 0, 0, 0.4),
        /* 底部外阴影 - 加深并加大范围 */
        0 18px 50px rgba(0, 0, 0, 0.4),
        /* 左侧内发光 - 保留 */
        inset -2px 0 10px rgba(100, 150, 250, 0.3);
}

body.dark-mode .card-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

/* 关卡节点深色模式 */
body.dark-mode .level-node {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .level-node.current {
    background: linear-gradient(135deg, rgba(100, 150, 250, 0.9), rgba(80, 130, 230, 0.85));
    color: rgba(240, 240, 240, 0.9);
}

/* 设置项深色模式 */
body.dark-mode .setting-item {
    background: rgba(40, 40, 60, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .setting-item label {
    color: rgba(255, 255, 255, 0.9);
}

/* 下拉选择框深色模式 */
body.dark-mode .setting-item select {
    background: rgba(50, 50, 70, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        inset 2px 0 8px rgba(0, 0, 0, 0.3),
        inset -2px 0 8px rgba(100, 150, 200, 0.3),
        inset 0 -2px 8px rgba(100, 150, 200, 0.3);
}

body.dark-mode .setting-item select option {
    background: rgba(50, 50, 70, 0.8);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .setting-item select option:checked {
    background: rgba(100, 150, 250, 0.6) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 开关按钮深色模式 */
body.dark-mode .toggle-label {
    background-color: rgba(50, 50, 70, 0.6);
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        inset 2px 0 8px rgba(0, 0, 0, 0.3),
        inset -2px 0 8px rgba(100, 150, 200, 0.3),
        inset 0 -2px 8px rgba(100, 150, 200, 0.3);
}

body.dark-mode input:checked + .toggle-label {
    background-color: rgba(100, 150, 250, 0.6);
}

/* 面板深色模式 */
body.dark-mode .panel {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .panel-header {
    background: rgba(30, 27, 75, 0.6);
    border-bottom: 1px solid rgba(100, 150, 250, 0.3);
    box-shadow: 
        /* 右侧外阴影 - 加深并加大范围 */
        12px 0 35px rgba(0, 0, 0, 0.4),
        /* 底部外阴影 - 加深并加大范围 */
        0 18px 50px rgba(0, 0, 0, 0.4),
        /* 左侧内发光 - 保留 */
        inset -2px 0 10px rgba(100, 150, 250, 0.3);
}

body.dark-mode .panel-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .panel-body {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .panel-body h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .panel-body p,
body.dark-mode .panel-body li {
    color: rgba(255, 255, 255, 0.8);
}

/* 登录/注册面板深色模式 */
body.dark-mode .auth-container {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .auth-header h2,
body.dark-mode .auth-header p {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .auth-tab {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .auth-tab.active {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .form-group label {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .form-group input {
    background: rgba(50, 50, 70, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .auth-submit {
    background: linear-gradient(135deg, rgba(100, 150, 250, 0.7), rgba(80, 130, 230, 0.6));
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .auth-submit:hover {
    background: linear-gradient(135deg, rgba(100, 150, 250, 0.8), rgba(80, 130, 230, 0.7));
    box-shadow: var(--shadow-md);
}

/* 排行榜深色模式 */
body.dark-mode .rank-item {
    background: rgba(50, 50, 70, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .rank-item:hover {
    background: rgba(60, 60, 80, 0.6);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .rank-name {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .rank-score {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 关卡选择深色模式 */
body.dark-mode .level-item {
    background: rgba(50, 50, 70, 0.5);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .level-item.completed {
    background: linear-gradient(135deg, rgba(100, 200, 100, 0.7), rgba(80, 180, 80, 0.6));
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .level-item.locked {
    background: rgba(70, 70, 90, 0.5);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 速度排行榜深色模式 */
body.dark-mode .speed-rank-combined {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .speed-rank-toggle {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .speed-rank-combined .rank-panel-body {
    background: var(--card-bg-hover);
    color: rgba(255, 255, 255, 0.95);
}

/* 展开游戏卡片深色模式 */
body.dark-mode .expanded-game-card {
    background: rgba(10, 15, 25, 0.95);
}

body.dark-mode .game-card-header {
    background: linear-gradient(135deg, rgba(40, 37, 85, 0.4) 0%, rgba(59, 56, 139, 0.4) 100%);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .game-card-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .level-nav-btn {
    background: var(--card-bg);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .level-nav-btn:hover {
    background: var(--card-bg-hover);
    box-shadow: var(--shadow-sm);
}

/* 提示按钮深色模式 */
body.dark-mode .hint-btn {
    background: var(--card-bg);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .hint-btn:hover {
    background: var(--card-bg-hover);
    box-shadow: var(--shadow-md);
}

/* 头像选择深色模式 */
body.dark-mode .avatar-option {
    background: rgba(50, 50, 70, 0.5);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .avatar-option:hover,
body.dark-mode .avatar-option.selected {
    background: rgba(100, 150, 250, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-sm);
}

/* 卡片指示器深色模式 */
body.dark-mode .cards-indicator {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .indicator-dot {
    background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .indicator-dot.active {
    background: rgba(100, 150, 250, 0.8);
    box-shadow: 0 0 8px rgba(100, 150, 250, 0.6);
}

/* 台前调度深色模式 */
body.dark-mode .stage-item {
    background: var(--card-bg);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .stage-item:hover {
    background: var(--card-bg-hover);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
}

body.dark-mode .stage-item.active {
    background: linear-gradient(135deg, rgba(100, 150, 250, 0.7), rgba(80, 130, 230, 0.6));
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-md);
}
 
 body {
     font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: var(--bg-gradient);
     color: var(--text-primary);
     overflow: hidden;
     height: 100vh;
     font-size: 16px;
     line-height: 1.6;
     animation: gradientShift 6s ease-in-out infinite; /* 6秒循环 */
     background-size: 300% 300%; /* 更大的背景尺寸，产生更微妙的移动效果 */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }
 
 /* 白色点缀动画 - 在天蓝色区域 */
 body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 60%, rgba(255, 255, 255, 0.15) 0%, transparent 8%),
         radial-gradient(circle at 35% 55%, rgba(255, 255, 255, 0.12) 0%, transparent 6%),
         radial-gradient(circle at 50% 65%, rgba(255, 255, 255, 0.1) 0%, transparent 7%),
         radial-gradient(circle at 65% 58%, rgba(255, 255, 255, 0.14) 0%, transparent 5%),
         radial-gradient(circle at 80% 62%, rgba(255, 255, 255, 0.11) 0%, transparent 6%),
         radial-gradient(circle at 90% 55%, rgba(255, 255, 255, 0.13) 0%, transparent 7%),
         radial-gradient(circle at 25% 70%, rgba(255, 255, 255, 0.09) 0%, transparent 5%),
         radial-gradient(circle at 55% 72%, rgba(255, 255, 255, 0.1) 0%, transparent 6%),
         radial-gradient(circle at 75% 68%, rgba(255, 255, 255, 0.12) 0%, transparent 5%),
         radial-gradient(circle at 45% 78%, rgba(255, 255, 255, 0.08) 0%, transparent 6%),
         radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 7%);
     animation: whiteDotsMove 4s ease-in-out infinite;
     pointer-events: none;
     z-index: 0;
 }
 
 body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 65%, rgba(255, 255, 255, 0.1) 0%, transparent 6%),
        radial-gradient(circle at 40% 62%, rgba(255, 255, 255, 0.11) 0%, transparent 5%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.09) 0%, transparent 6%),
        radial-gradient(circle at 95% 60%, rgba(255, 255, 255, 0.12) 0%, transparent 7%),
        radial-gradient(circle at 30% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 5%),
        radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.08) 0%, transparent 6%);
    animation: whiteDotsMove 5s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

/* 背景左上角添加模糊的太阳元素 */
body::before {
    content: '';
    position: fixed;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 200, 0.4) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.1) 60%, transparent 80%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
    animation: sunFloat 20s ease-in-out infinite;
}

/* 太阳光芒效果 */
body::after {
    content: '';
    position: fixed;
    top: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, transparent 40%, rgba(255, 255, 200, 0.1) 45%, rgba(255, 255, 200, 0.05) 55%, transparent 65%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -2;
    animation: sunGlow 25s ease-in-out infinite alternate;
}

/* 太阳浮动动画 */
@keyframes sunFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(20px, 10px) scale(1.05);
        opacity: 0.8;
    }
    50% {
        transform: translate(10px, 20px) scale(1);
        opacity: 0.75;
    }
    75% {
        transform: translate(-10px, 15px) scale(1.02);
        opacity: 0.8;
    }
}

/* 太阳光芒动画 */
@keyframes sunGlow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(10px, 10px) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
}
 
 /* 白色点缀移动动画 */
 @keyframes whiteDotsMove {
     0% {
         transform: translateX(-5%) translateY(-3%);
     }
     25% {
         transform: translateX(5%) translateY(2%);
     }
     50% {
         transform: translateX(-3%) translateY(4%);
     }
     75% {
         transform: translateX(4%) translateY(-2%);
     }
     100% {
         transform: translateX(-5%) translateY(-3%);
     }
 }
 
 /* 背景渐变动画 - 分界线动起来效果 */
 @keyframes gradientShift {
     0% {
         background-position: 0% 50%;
     }
     20% {
         background-position: 15% 45%;
     }
     40% {
         background-position: 25% 55%;
     }
     60% {
         background-position: 10% 48%;
     }
     80% {
         background-position: 20% 52%;
     }
     100% {
         background-position: 0% 50%;
     }
 }
 
 /* 游戏容器 */
 #gameContainer {
     width: 100vw;
     height: 100vh;
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
     position: relative;
     overflow: hidden;
     background-color: rgba(20, 25, 35, 0.95);
     z-index: 1000;
 }
 
 /* 游戏标题 */
 .game-title {
     text-align: center;
     margin-bottom: 20px;
 }
 
 .game-title h1 {
     font-size: 3rem;
     font-weight: 800;
     color: #333333;
     margin: 0;
     letter-spacing: -1px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .game-title p {
     font-size: 1.2rem;
     color: #333333;
     margin: 5px 0 0 0;
     letter-spacing: 3px;
     text-transform: uppercase;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 /* 开始按钮 */
 .start-button {
     padding: 16px 48px;
     border: none;
     border-radius: 50px;
     font-size: 1.2rem;
     font-weight: 700;
     cursor: pointer;
     background: var(--btn-primary);
     color: var(--text-primary);
     box-shadow: 
         var(--shadow-md),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     margin-bottom: 20px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .start-button:hover {
     transform: translateY(-3px) scale(1.05);
     background: var(--btn-primary-hover);
     box-shadow: 
         var(--shadow-lg),
         0 0 0 1px rgba(255, 255, 255, 0.15) inset;
 }
 
 .start-button:active {
     transform: translateY(-1px) scale(0.98);
 }
 
 /* 游戏信息显示 */
 .game-info {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--card-bg);
    padding: 10px 20px;
    border-radius: 12px;
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border: 1px solid var(--border-color);
    box-shadow: 
        var(--shadow-sm),
        8px 0 25px rgba(0, 0, 0, 0.1),
        0 8px 25px rgba(0, 0, 0, 0.1);
}
 
 /* 游戏网格 */
.game-grid {
    display: grid;
    grid-template-columns: repeat(5, 60px);
    grid-template-rows: repeat(5, 60px);
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 16px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
        var(--shadow-md),
        10px 0 30px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 网格单元格基础样式 */
.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* 减速带单元格样式 */
.grid-cell.speed-bump {
    background: linear-gradient(45deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 140, 0, 0.3) 100%);
    border: 2px solid rgba(255, 165, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}

/* 减速带纹理 */
.grid-cell.speed-bump::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 165, 0, 0.4),
        rgba(255, 165, 0, 0.4) 10px,
        transparent 10px,
        transparent 20px
    );
    opacity: 0.5;
    z-index: 0;
}

/* 减速带数字样式 */
.grid-cell.speed-bump::after {
    content: attr(data-value);
    position: relative;
    z-index: 1;
    color: #333;
    font-weight: 700;
}

/* 深色模式下的减速带样式 */
body.dark-mode .grid-cell.speed-bump {
    background: linear-gradient(45deg, rgba(255, 165, 0, 0.4) 0%, rgba(255, 140, 0, 0.4) 100%);
    border: 2px solid rgba(255, 165, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4);
}

body.dark-mode .grid-cell.speed-bump::after {
    color: rgba(255, 255, 255, 0.95);
}

/* 最短路径样式 */
.grid-cell.shortest-path {
    background: linear-gradient(45deg, rgba(76, 175, 80, 0.3) 0%, rgba(67, 160, 71, 0.3) 100%);
    border: 2px solid rgba(76, 175, 80, 0.6);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

/* 堵车路径样式 */
.grid-cell.traffic-jam-path {
    background: linear-gradient(45deg, rgba(244, 67, 54, 0.3) 0%, rgba(229, 57, 53, 0.3) 100%);
    border: 2px solid rgba(244, 67, 54, 0.6);
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
    animation: pulse 1s infinite alternate;
}

/* 脉冲动画 */
@keyframes pulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* 深色模式下的最短路径样式 */
body.dark-mode .grid-cell.shortest-path {
    background: linear-gradient(45deg, rgba(76, 175, 80, 0.4) 0%, rgba(67, 160, 71, 0.4) 100%);
    border: 2px solid rgba(76, 175, 80, 0.7);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

/* 深色模式下的堵车路径样式 */
body.dark-mode .grid-cell.traffic-jam-path {
    background: linear-gradient(45deg, rgba(244, 67, 54, 0.4) 0%, rgba(229, 57, 53, 0.4) 100%);
    border: 2px solid rgba(244, 67, 54, 0.7);
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

/* 崎岖路面单元格样式 */
.grid-cell.rough-road {
    background: linear-gradient(45deg, rgba(139, 69, 19, 0.3) 0%, rgba(160, 82, 45, 0.3) 100%);
    border: 2px solid rgba(139, 69, 19, 0.6);
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.3);
}

/* 崎岖路面纹理 */
.grid-cell.rough-road::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-conic-gradient(
        from 0deg,
        rgba(139, 69, 19, 0.3) 0deg 15deg,
        transparent 15deg 30deg
    );
    opacity: 0.6;
    z-index: 0;
}

/* 崎岖路面数字样式 */
.grid-cell.rough-road::after {
    content: attr(data-value);
    position: relative;
    z-index: 1;
    color: #333;
    font-weight: 700;
}

/* 深色模式下的崎岖路面样式 */
body.dark-mode .grid-cell.rough-road {
    background: linear-gradient(45deg, rgba(139, 69, 19, 0.4) 0%, rgba(160, 82, 45, 0.4) 100%);
    border: 2px solid rgba(139, 69, 19, 0.7);
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.4);
}

body.dark-mode .grid-cell.rough-road::after {
    color: rgba(255, 255, 255, 0.95);
}

/* 冒泡提示样式 */
.bubble-notification {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 69, 19, 0.6);
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    z-index: 1000;
    animation: bubble-rise 1.5s ease-out forwards;
    pointer-events: none;
}

/* 深色模式下的冒泡提示样式 */
body.dark-mode .bubble-notification {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(139, 69, 19, 0.7);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.4);
}

/* 冒泡提示动画 */
@keyframes bubble-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(-30px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}
 
 /* 方向按钮容器 */
 .direction-buttons {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }
 
 .horizontal-buttons {
     display: flex;
     gap: 10px;
 }
 
 .direction-btn {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(173, 216, 230, 0.4);
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text-primary);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    box-shadow: var(--shadow-glass);
    transition: all 0.2s ease;
    /* 玻璃雕刻质感 */
    text-shadow: var(--text-engrave);
}
 
 .direction-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
 
 .direction-btn:active {
     transform: translateY(0) scale(0.95);
 }
 
 /* 游戏控制按钮 */
 .game-controls {
     display: flex;
     gap: 15px;
     margin-bottom: 20px;
 }
 
 .control-btn {
    padding: 12px 24px;
    border: 1px solid rgba(173, 216, 230, 0.4);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text-primary);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    box-shadow: var(--shadow-glass);
    transition: all 0.2s ease;
    /* 玻璃雕刻质感 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
 
 .control-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
 
 /* 功能按钮栏 */
 .function-buttons {
     display: flex;
     gap: 15px;
     position: absolute;
     top: 20px;
     right: 20px;
 }
 
 .func-btn {
    padding: 12px 20px;
    border: 1px solid rgba(173, 216, 230, 0.4);
    border-radius: 0 0 25px 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text-primary);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    box-shadow: var(--shadow-glass);
    transition: all 0.2s ease;
    /* 玻璃雕刻质感 */
    text-shadow: var(--text-engrave);
}
 
 .func-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
 
 /* 面板通用样式 */
 .panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 90vh;
    background: var(--card-bg);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    overflow: hidden;
    z-index: 1000;
    border-radius: 24px;
    /* 增强玻璃雕刻质感 */
    box-shadow: 
        var(--shadow-glass-elevated),
        12px 0 35px rgba(0, 0, 0, 0.2),
        0 12px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    animation: fadeInScale 0.6s ease-out;
    color: var(--text-primary);
}
 
 /* 淡入缩放动画 */
 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: translate(-50%, -50%) scale(0.9);
     }
     to {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
     }
 }
 
 /* 面板内容 */
 .panel-content {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
 /* 面板头部 */
 .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(173, 216, 230, 0.4);
    border-bottom: 1px solid rgba(173, 216, 230, 0.3);
    box-shadow: 
        /* 右侧外阴影 - 加深并加大范围 */
        12px 0 35px rgba(0, 0, 0, 0.25),
        /* 底部外阴影 - 加深并加大范围 */
        0 18px 50px rgba(0, 0, 0, 0.25),
        /* 左侧内发光 - 保留 */
        inset -2px 0 10px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 10;
    overflow: visible;
}
 
 .panel-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0;
    text-shadow: none;
    color: #333333;
}
 
 /* 关闭按钮 */
 .close-btn {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     color: rgba(240, 240, 240, 0.9);
     font-size: 2rem;
     cursor: pointer;
     padding: 0;
     width: 40px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     transition: all 0.2s ease;
     backdrop-filter: blur(10px);
 }
 
 .close-btn:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: scale(1.1);
 }
 
 .close-btn:active {
     transform: scale(0.95);
 }
 
 /* 面板主体 */
 .panel-body {
     padding: 24px;
     overflow-y: auto;
     flex: 1;
     /* 隐藏滚动条 */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE and Edge */
     color: var(--text-primary);
 }
 
 /* 隐藏滚动条 - Chrome, Safari */
 .panel-body::-webkit-scrollbar {
     display: none;
 }
 
 .panel-body h3 {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 0 0 15px 0;
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .panel-body p {
     margin: 0 0 15px 0;
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     line-height: 1.6;
 }
 
 .panel-body ul {
     margin: 0 0 15px 20px;
     color: rgba(240, 240, 240, 0.9);
 }
 
 .panel-body li {
     margin: 0 0 8px 0;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     line-height: 1.5;
 }
 
 /* 登录注册面板 */
 .auth-panel {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     z-index: 1000;
 }
 
 /* 登录注册容器 */
 .auth-container {
    background: var(--card-bg);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border-radius: 24px;
    /* 增强玻璃雕刻质感 */
    box-shadow: 
        var(--shadow-glass-elevated),
        12px 0 35px rgba(0, 0, 0, 0.2),
        0 12px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 40px;
    max-width: 400px;
    width: 90%;
    animation: fadeInScale 0.6s ease-out;
}
 
 /* 登录注册头部 */
 .auth-header {
     text-align: center;
     margin-bottom: 30px;
 }
 
 .auth-header h2 {
     font-size: 2.5rem;
     font-weight: 800;
     color: #ffffff;
     margin: 0;
     letter-spacing: -0.5px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .auth-header p {
     font-size: 1.1rem;
     color: #ffffff;
     margin: 5px 0 0 0;
     letter-spacing: 3px;
 }
 
 /* 登录注册标签页 */
 .auth-tabs {
     display: flex;
     margin-bottom: 30px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .auth-tab {
     flex: 1;
     padding: 12px 0;
     background: transparent;
     border: none;
     color: #ffffff;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }

 .auth-tab:hover {
     color: #ffffff;
 }

 .auth-tab.active {
     color: #ffffff;
 }
 
 .auth-tab.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 3px 3px 0 0;
 }
 
 /* 登录注册表单 */
 .auth-form {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 /* 表单组 */
 .form-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
 .form-group label {
     font-size: 0.9rem;
     font-weight: 600;
     color: #ffffff;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }

 /* 输入框样式 */
 .form-group input {
     padding: 14px 18px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 500;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     color: #ffffff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     outline: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .form-group input::placeholder {
     color: rgba(255, 255, 255, 0.7);
     text-shadow: none;
 }
 
 .form-group input:focus {
     border-color: rgba(173, 216, 230, 0.6);
     box-shadow: 
         0 4px 16px rgba(173, 216, 230, 0.25),
         0 0 0 1px rgba(173, 216, 230, 0.2) inset;
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-1px);
 }
 
 /* 表单选项 */
 .form-options {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.9rem;
 }
 
 .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}
 
 .remember-me input {
     width: 16px;
     height: 16px;
     cursor: pointer;
 }
 
 .forgot-password {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.forgot-password:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
 
 /* 登录注册提交按钮 */
 .auth-submit {
     padding: 14px 24px;
     border: 1px solid rgba(173, 216, 230, 0.4);
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     color: #ffffff;
     box-shadow: var(--shadow-glass);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     /* 玻璃雕刻质感 */
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .auth-submit:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 
         0 8px 25px rgba(147, 112, 219, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.25) inset;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.45), rgba(147, 112, 219, 0.4));
     border-color: rgba(173, 216, 230, 0.5);
 }
 
 .auth-submit:active {
     transform: translateY(-1px) scale(0.98);
     box-shadow: 
         0 4px 12px rgba(147, 112, 219, 0.25),
         0 0 0 1px rgba(255, 255, 255, 0.2) inset;
     transition: all 0.1s ease;
 }
 
 /* 隐私政策链接 */
 .terms-link {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.terms-link:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
 
 /* 设置项 */
 .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--card-bg);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 
        var(--shadow-glass),
        8px 0 25px rgba(0, 0, 0, 0.1),
        0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
 
 .setting-item:last-child {
     margin-bottom: 0;
 }
 
 .setting-item:hover {
     background: var(--card-bg-hover);
     box-shadow: var(--shadow-md);
 }
 
 .setting-item label {
     font-size: 1rem;
     font-weight: 600;
     color: #333333; /* 灰黑色 */
 }
 
 /* 开关按钮 */
 .toggle-switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }
 
 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }
 
 .toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all .4s ease;
    border-radius: 34px;
    backdrop-filter: blur(10px);
    /* 左侧和顶部内阴影，底部和右侧内发光 */
    box-shadow: 
        /* 顶部内阴影 */
        inset 0 2px 8px rgba(0, 0, 0, 0.2),
        /* 左侧内阴影 */
        inset 2px 0 8px rgba(0, 0, 0, 0.2),
        /* 右侧内发光 */
        inset -2px 0 8px rgba(220, 240, 255, 0.6),
        /* 底部内发光 */
        inset 0 -2px 8px rgba(220, 240, 255, 0.6);
}
 
 .toggle-label:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: rgba(240, 240, 240, 0.9);
     transition: .4s;
     border-radius: 50%;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 input:checked + .toggle-label {
   /* 更偏蓝色的背景 */
   background-color: rgba(135, 206, 250, 0.8);
   /* 选中后：左侧和顶部内发光，底部和右侧外阴影 - 效果最弱 */
   box-shadow: 
       /* 底部外阴影 - 最小范围 */
       0 1px 2px rgba(0, 0, 0, 0.1),
       /* 右侧外阴影 - 最小范围 */
       1px 0 2px rgba(0, 0, 0, 0.1),
       /* 顶部内发光 - 最浅效果 */
       inset 0 1px 2px rgba(255, 255, 255, 0.2),
       /* 左侧内发光 - 最浅效果 */
       inset 1px 0 2px rgba(255, 255, 255, 0.2);
}

/* 非选中状态的焦点样式 */
input:not(:checked):focus + .toggle-label {
    /* 保持内阴影和内发光效果，添加焦点状态的外发光 */
    box-shadow: 
        /* 焦点外发光 */
        0 0 0 2px rgba(173, 216, 230, 0.8),
        /* 顶部内阴影 */
        inset 0 2px 8px rgba(0, 0, 0, 0.2),
        /* 左侧内阴影 */
        inset 2px 0 8px rgba(0, 0, 0, 0.2),
        /* 右侧内发光 */
        inset -2px 0 8px rgba(220, 240, 255, 0.6),
        /* 底部内发光 */
        inset 0 -2px 8px rgba(220, 240, 255, 0.6);
}

/* 选中状态的焦点样式 */
input:checked:focus + .toggle-label {
    /* 保持选中状态的样式，添加焦点外发光 */
    box-shadow: 
        /* 焦点外发光 */
        0 0 0 2px rgba(173, 216, 230, 0.8),
        /* 底部外阴影 - 最小范围 */
        0 1px 2px rgba(0, 0, 0, 0.1),
        /* 右侧外阴影 - 最小范围 */
        1px 0 2px rgba(0, 0, 0, 0.1),
        /* 顶部内发光 - 最浅效果 */
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        /* 左侧内发光 - 最浅效果 */
        inset 1px 0 2px rgba(255, 255, 255, 0.2);
}
 
 input:checked + .toggle-label:before {
     transform: translateX(26px);
 }
 
 /* 下拉选择框 */
.setting-item select, #difficulty {
    padding: 10px 15px;
    border: 1px solid rgba(173, 216, 230, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    background: rgba(173, 216, 230, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #333333; /* 灰黑色 */
    /* 左侧和顶部内阴影，底部和右侧内发光 - 长玻璃效果 */
    box-shadow: 
        /* 顶部内阴影 */
        inset 0 2px 8px rgba(0, 0, 0, 0.2),
        /* 左侧内阴影 */
        inset 2px 0 8px rgba(0, 0, 0, 0.2),
        /* 右侧内发光 */
        inset -2px 0 8px rgba(220, 240, 255, 0.6),
        /* 底部内发光 */
        inset 0 -2px 8px rgba(220, 240, 255, 0.6);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 允许自定义option样式（部分浏览器支持） */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 添加自定义箭头 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* 下拉选项玻璃效果（支持的浏览器） */
.setting-item select option {
    background: rgba(173, 216, 230, 0.15);
    color: #333333;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(173, 216, 230, 0.2);
    padding: 8px 12px;
}

/* 选中选项样式 */
.setting-item select option:checked {
    background: rgba(135, 206, 250, 0.6) !important;
    color: #333333 !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* 悬停选项样式（部分浏览器支持） */
.setting-item select option:hover {
    background: rgba(135, 206, 250, 0.4) !important;
    color: #333333 !important;
}

.setting-item select:focus {
    border-color: rgba(173, 216, 230, 0.6);
    /* 保持长玻璃效果，添加焦点外发光 */
    box-shadow: 
        /* 焦点外发光 */
        0 0 0 2px rgba(173, 216, 230, 0.8),
        /* 顶部内阴影 */
        inset 0 2px 8px rgba(0, 0, 0, 0.2),
        /* 左侧内阴影 */
        inset 2px 0 8px rgba(0, 0, 0, 0.2),
        /* 右侧内发光 */
        inset -2px 0 8px rgba(220, 240, 255, 0.6),
        /* 底部内发光 */
        inset 0 -2px 8px rgba(220, 240, 255, 0.6);
    background: rgba(173, 216, 230, 0.15);
}
 
 /* 保存按钮 */
 .save-btn {
     padding: 12px 24px;
     border: 1px solid rgba(173, 216, 230, 0.4);
     border-radius: 8px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     color: rgba(75, 0, 130, 0.85);
     box-shadow: var(--shadow-glass);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     transition: all 0.3s ease;
     margin-top: 10px;
     /* 玻璃雕刻质感 */
     text-shadow: var(--text-engrave);
 }
 
 .save-btn:hover {
     transform: translateY(-2px) scale(1.02);
     box-shadow: 
         0 6px 20px rgba(147, 112, 219, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.25) inset;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.45), rgba(147, 112, 219, 0.4));
 }
 
 /* 排行榜标签页 */
 .rank-tabs {
     display: flex;
     margin-bottom: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .rank-tab {
     flex: 1;
     padding: 12px 0;
     background: transparent;
     border: none;
     color: rgba(255, 255, 255, 0.7);
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .rank-tab:hover {
     color: rgba(240, 240, 240, 0.9);
 }
 
 .rank-tab.active {
     color: rgba(240, 240, 240, 0.9);
 }
 
 .rank-tab.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 3px 3px 0 0;
 }
 
 /* 排行榜列表 */
 .rank-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
 
 .rank-item {
     display: flex;
     align-items: center;
     padding: 12px;
     background: rgba(173, 216, 230, 0.2);
     border-radius: 10px;
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     /* 增强玻璃雕刻质感 */
     box-shadow: var(--shadow-glass-strong);
     border: 1px solid var(--border-color);
     transition: all 0.2s ease;
     color: var(--text-primary);
     text-shadow: none;
 }
 
 .rank-item:hover {
     background: rgba(173, 216, 230, 0.25);
     transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(173, 216, 230, 0.2);
 }
 
 .rank-number {
     font-size: 1.3rem;
     font-weight: 800;
     color: rgba(240, 240, 240, 0.9);
     margin-right: 12px;
     width: 25px;
     text-align: center;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 
 .rank-avatar {
     font-size: 1.7rem;
     margin-right: 12px;
     width: 40px;
     text-align: center;
 }
 
 .rank-info {
     flex: 1;
 }
 
 .rank-name {
     font-size: 1.05rem;
     font-weight: 700;
     color: rgba(240, 240, 240, 0.9);
     margin-bottom: 3px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .rank-score {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     font-weight: 500;
}

/* 关于about-logo */
.about-logo {
     text-align: center;
     margin-bottom: 25px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border-color);
}
 
 .about-info {
     margin-bottom: 20px;
     padding: 20px;
     background: var(--card-bg);
     border-radius: 12px;
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border: 1px solid var(--border-color);
 }
 
 .about-info p {
     margin: 0 0 10px 0;
 }
 
 .about-info p:last-child {
     margin-bottom: 0;
 }
 
 .about-description {
     margin-bottom: 25px;
 }
 
 .about-links {
     display: flex;
     justify-content: center;
     gap: 20px;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .about-link {
     color: rgba(173, 216, 230, 0.7);
     text-decoration: none;
     font-weight: 600;
     transition: all 0.2s ease;
 }
 
 .about-link:hover {
     color: rgba(173, 216, 230, 0.9);
     text-shadow: 0 0 10px rgba(173, 216, 230, 0.4);
 }
 
 /* 背景模糊层 */
 .blur-background {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 999;
     backdrop-filter: blur(9px);
     -webkit-backdrop-filter: blur(9px);
     opacity: 0.6;
     visibility: hidden;
     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                 visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none;
     overflow: hidden;
 }
 
 /* 第一层模糊 - 较强模糊 */
 .blur-background::before {
     content: '';
     position: absolute;
     top: -30px;
     left: -30px;
     right: -30px;
     bottom: -30px;
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     opacity: 0.5;
     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* 第二层模糊 - 较弱模糊 */
 .blur-background::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     opacity: 0.4;
     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
 }
 
 /* 背景模糊层显示状态 */
 .blur-background.active {
     opacity: 0.8;
     visibility: visible;
     pointer-events: auto;
 }
 
 /* 激活状态下的伪元素透明度调整 */
 .blur-background.active::before {
     opacity: 0.7;
 }
 
 .blur-background.active::after {
     opacity: 0.6;
 }
 
 /* 卡片容器样式 */
 #cardsContainer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: transparent;
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
 }
 
 /* 台前调度卡片样式 - 斜放效果 */
.stage-items {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* 默认隐藏，只在横屏时显示 */
    flex-direction: column;
    gap: 30px; /* 增大卡片间距 */
    padding: 0 20px;
    z-index: 100;
}
 
 .stage-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 20px;
   background: var(--card-bg);
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.3, 0, 0.2, 1);
   backdrop-filter: blur(35px);
   -webkit-backdrop-filter: blur(35px);
   /* 增加边框宽度，增强厚度感 */
   border: 2px solid var(--border-color);
   /* 斜放效果 - 增加旋转角度，增强倾斜感 */
   transform: perspective(1000px) rotateY(40deg) scale(0.9) translateZ(10px);
   transform-origin: left center;
   width: 170px; /* 增大宽度 */
   /* 增强玻璃雕刻质感和厚度感 */
   box-shadow: 
       var(--shadow-glass-strong),
       0 4px 15px rgba(0, 0, 0, 0.15),
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       inset 1px 0 0 rgba(255, 255, 255, 0.15),
       inset -1px 0 0 rgba(0, 0, 0, 0.05),
       inset 0 -1px 0 rgba(0, 0, 0, 0.05);
   opacity: 0.8;
   /* 增加立体感的背景渐变 */
   background: linear-gradient(145deg, rgba(230, 240, 255, 0.25) 0%, rgba(200, 220, 255, 0.15) 100%);
}
 
 /* 鼠标悬停时放大效果 */
.stage-item:hover {
    transform: perspective(1000px) rotateY(20deg) scale(1) translateZ(20px); /* 悬停时减小倾斜度，放大，增加Z轴深度 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 220, 255, 0.25) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    opacity: 0.95;
    box-shadow: 
        0 8px 25px rgba(173, 216, 230, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset -1px 0 0 rgba(0, 0, 0, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

 /* 选中时摆正效果 */
 .stage-item.active {
     transform: perspective(1000px) rotateY(0deg) scale(1.08) translateZ(30px); /* 稍微放大，增加Z轴深度 */
     background: linear-gradient(145deg, rgba(135, 206, 250, 0.5) 0%, rgba(100, 149, 237, 0.45) 100%);
     color: rgba(25, 25, 112, 0.9);
     border-color: rgba(173, 216, 250, 0.6);
     /* 增强玻璃雕刻质感和厚度感 */
     box-shadow: 
         var(--shadow-glass-elevated),
         0 6px 20px rgba(0, 0, 0, 0.2),
         inset 0 1px 0 rgba(255, 255, 255, 0.3),
         inset 1px 0 0 rgba(255, 255, 255, 0.25),
         inset -1px 0 0 rgba(0, 0, 0, 0.05),
         inset 0 -1px 0 rgba(0, 0, 0, 0.05);
     opacity: 1;
     width: 150px; /* 确保放正时宽度固定 */
     text-shadow: var(--text-engrave);
 }
 
 .stage-item-icon {
     font-size: 1.6rem; /* 增大图标 */
     width: 35px; /* 增大图标区域宽度 */
     text-align: center;
 }
 
 .stage-item-text {
     font-weight: 600;
     font-size: 1.1rem; /* 增大字体 */
 }
 
 /* 卡片叠放容器 */
 .cards-stack {
     position: relative;
     width: calc(100% - 40px); /* 宽度自适应，距离左右边框20px */
     height: calc(100% - 80px); /* 高度自适应，为指示器留出适中的位置 */
     margin: 20px;
     margin-bottom: 60px; /* 底部留出适中空间给指示器，稍微减小间距 */
     perspective: 1000px;
     overflow: visible; /* 允许卡片溢出显示叠放效果 */
     background: transparent; /* 容器透明，没有颜色 */
 }
 
 /* 单个卡片样式 - 密集叠放效果 */
 .card {
    position: absolute;
    width: calc(100% - 20px); /* 宽度减小，添加边距 */
    height: calc(100% - 20px); /* 高度减小，添加边距 */
    margin: 10px; /* 添加边距 */
    /* 增强玻璃厚度感的渐变背景 */
    background: linear-gradient(145deg, rgba(230, 240, 255, 0.3) 0%, rgba(200, 220, 255, 0.2) 100%);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border-radius: 24px;
    /* 增强玻璃厚度感的外阴影 */
    box-shadow: 
        var(--shadow-glass-strong),
        15px 0 45px rgba(0, 0, 0, 0.2),
        0 15px 45px rgba(0, 0, 0, 0.2);
    /* 增强玻璃厚度感的边框 */
    border: 2px solid var(--border-color);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1; /* 卡片都不透明 */
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
 
 /* 激活状态的卡片 */
.card.active {
    transform: translateX(0) translateY(0) translateZ(0); /* 激活卡片居中，无偏移 */
    opacity: 1;
    z-index: 10;
    /* 增强玻璃厚度感的渐变背景 */
    background: linear-gradient(145deg, rgba(240, 250, 255, 0.4) 0%, rgba(210, 230, 255, 0.3) 100%);
    /* 增强玻璃厚度感的外阴影 */
    box-shadow: 
        15px 15px 45px rgba(0, 0, 0, 0.25),
        20px 20px 64px rgba(0, 0, 0, 0.2);
    /* 增强玻璃厚度感的边框 */
    border: 2px solid rgba(255, 255, 255, 0.4);
}

/* 非激活卡片内容隐藏 */
.card.content-hidden .card-body {
    display: none;
}

/* 非激活卡片调整 */
.card.content-hidden {
    overflow: visible;
}

/* 非激活卡片的头部隐藏 */
.card.content-hidden .card-header {
    display: none;
}
 
 
 
 /* 卡片指示器 - 放在卡片下方，屏幕底部 */
 .cards-indicator {
    position: absolute;
    bottom: 10px; /* 屏幕底部，距离底部20px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 100;
    background: var(--card-bg);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    padding: 14px 20px;
    border-radius: 20px;
    /* 增强玻璃雕刻质感 */
    box-shadow: 
        var(--shadow-glass-strong),
        8px 0 25px rgba(0, 0, 0, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
}
 
 /* 横屏布局（使用媒体查询） */
 @media (orientation: landscape) {
     #cardsContainer {
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
     }
     
     /* 显示台前调度 */
     .stage-manager {
         display: flex;
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         width: 190px; /* 调整宽度，与卡片宽度匹配 */
         background: transparent;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         border: none;
         box-shadow: none;
         overflow: visible;
     }
     
 
     
     /* 横屏时显示缩略卡片 */
     .stage-items {
         display: flex;
     }
     
     /* 调整卡片容器位置和尺寸 - 横屏时卡片再宽一点 */
     .cards-stack {
         margin-left: 210px; /* 调整左侧间距，与stage-manager宽度匹配 */
         margin-right: auto;
         width: 80vw; /* 进一步增加宽度，充分利用空间 */
         height: calc(80vh - 20px); /* 横屏时高度调整，为指示器留出适中空间 */
         margin-top: 0;
         margin-bottom: 20px; /* 底部留出适中空间给指示器，稍微减小间距 */
     }
     
     /* 调整卡片样式 */
     .card {
         border-radius: 20px;
     }
     
     .card.active {
         /* 增强玻璃厚度感的渐变背景 */
         background: linear-gradient(145deg, rgba(240, 250, 255, 0.4) 0%, rgba(210, 230, 255, 0.3) 100%);
         /* 增强玻璃厚度感的外阴影 */
         box-shadow: 
             18px 18px 50px rgba(0, 0, 0, 0.3),
             25px 25px 80px rgba(0, 0, 0, 0.25);
         /* 增强玻璃厚度感的边框 */
         border: 2px solid rgba(255, 255, 255, 0.4);
     }
     
 
     
     /* 横屏时指示器位置调整 - 仍在屏幕底部 */
     .cards-indicator {
         left: calc(240px + 35vw); /* 居中于卡片下方，屏幕底部 */
         transform: translateX(-50%);
         bottom: 20px;
         display: flex; /* 横屏时保持显示 */
         padding-top: 20px; /* 顶部增加内边距，与卡片空出空隙 */
         margin-top: 20px; /* 顶部增加外边距，与卡片空出空隙 */
     }
 }
 
 /* 卡片头部 */
 .card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    background: rgba(173, 216, 230, 0.4);
    border-bottom: 1px solid rgba(173, 216, 230, 0.3);
    box-shadow: 
        /* 右侧外阴影 - 加深并加大范围 */
        12px 0 35px rgba(0, 0, 0, 0.25),
        /* 底部外阴影 - 加深并加大范围 */
        0 18px 50px rgba(0, 0, 0, 0.25),
        /* 左侧内发光 - 保留 */
        inset -2px 0 10px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 10;
    overflow: visible;
}
 
 .card-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0;
    text-shadow: none;
    color: #333333;
}
 
 /* 卡片主体 */
 .card-body {
     padding: 20px; /* 减少内边距，让内容更紧凑 */
     overflow-y: auto;
     flex: 1;
     color: rgba(255, 255, 255, 0.98);
 }
 
 /* 为特定卡片内容区域添加滚动条隐藏样式 */
 .card[data-card] .card-body {
     /* 隐藏滚动条 */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE and Edge */
 }
 
 /* 隐藏卡片内容区域滚动条 - Chrome, Safari */
 .card[data-card] .card-body::-webkit-scrollbar {
     display: none;
 }
 
 /* 卡片标题和内容样式优化 */
 .card-body h3 {
     font-size: 1.2rem;
     font-weight: 700; /* 调整字体粗细，避免过于厚重 */
     margin: 0 0 12px 0; /* 减少间距，让内容更紧凑 */
     color: rgba(220, 220, 220, 0.9);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .card-body h2 {
    font-size: 1.4rem;
    font-weight: 700; /* 调整字体粗细，避免过于厚重 */
    margin: 0 0 16px 0; /* 减少间距，让内容更紧凑 */
    color: #333333; /* 灰黑色 */
    text-shadow: none;
}
 
 .card-body p {
     margin: 0 0 12px 0; /* 减少间距，让内容更紧凑 */
     color: rgba(220, 220, 220, 0.9);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     line-height: 1.5; /* 优化行高，提高可读性 */
     font-weight: 500; /* 调整字体粗细，避免过于厚重 */
 }
 
 .card-body ul {
     margin: 0 0 12px 20px; /* 减少间距，让内容更紧凑 */
     color: rgba(220, 220, 220, 0.9);
     padding-left: 10px; /* 减少左侧内边距 */
 }
 
 .card-body li {
     margin: 0 0 8px 0; /* 减少间距，让内容更紧凑 */
     line-height: 1.4; /* 优化行高，提高可读性 */
     font-weight: 500; /* 调整字体粗细，避免过于厚重 */
     color: var(--text-primary);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 /* 关卡卡片样式优化 */
 .level-item {
     color: var(--text-primary);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     font-weight: 600;
 }
 
 /* 排行卡片样式优化 */
 .rank-name {
     color: var(--text-primary);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     font-weight: 600;
 }
 
 .rank-score {
     color: var(--text-primary);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     font-weight: 500;
 }
 
 /* 设置卡片样式优化 */
.setting-item label {
    color: #333333;
    text-shadow: none;
    font-weight: 600;
}
 
 /* 我的卡片样式优化 */
 .profile-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px; /* 减少间距，让内容更紧凑 */
     margin-bottom: 20px; /* 减少底部间距 */
 }
 
 .profile-avatar {
     font-size: 4rem; /* 减少头像大小 */
     margin-bottom: 5px;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 
 .profile-name {
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     font-weight: 700;
     font-size: 1.3rem;
     margin-bottom: 10px;
 }
 
 .profile-stats {
     display: flex;
     justify-content: center;
     gap: 20px; /* 减少间距，让内容更紧凑 */
     font-size: 0.95rem;
     flex-wrap: wrap;
 }
 
 .stat-item {
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     font-weight: 500;
 }
 
 .stat-item span {
     color: rgba(240, 240, 240, 0.9);
     font-weight: 700;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     margin-left: 3px;
 }
 
 .profile-actions {
     display: flex;
     flex-direction: row; /* 改为横向排列，减少垂直空间占用 */
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
 }
 
 /* 关卡选择网格优化 */
 .levels-grid {
     gap: 10px; /* 减少间距，让内容更紧凑 */
     margin-top: 15px; /* 减少顶部间距 */
 }
 
 /* 排行列表优化 */
 .rank-list {
     gap: 10px; /* 减少间距，让内容更紧凑 */
 }
 
 .rank-item {
     padding: 12px; /* 减少内边距，让内容更紧凑 */
     background: rgba(173, 216, 230, 0.2);
 }
 
 /* 设置项优化 */
 .setting-item {
     background: rgba(173, 216, 230, 0.15);
 }
 
 /* 我的卡片背景优化 */
.profile-info {
    background: rgba(230, 230, 250, 0.4);
    padding: 15px;
    border-radius: 16px;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: 1px solid rgba(173, 216, 230, 0.3);
}

/* 教程内容样式 */
.tutorial-content {
    color: #333333; /* 灰黑色字体 */
}

/* 教程章节样式 */
.tutorial-section {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(173, 216, 230, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(173, 216, 230, 0.1);
    transition: all 0.3s ease;
    box-shadow: 
        8px 0 25px rgba(0, 0, 0, 0.1),
        0 8px 25px rgba(0, 0, 0, 0.1);
}

.tutorial-section:hover {
    background: rgba(173, 216, 230, 0.1);
    box-shadow: 
        12px 0 35px rgba(0, 0, 0, 0.15),
        0 12px 35px rgba(0, 0, 0, 0.15);
}

/* 教程标题样式 */
.tutorial-section h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
}

.tutorial-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #444444;
    text-shadow: none;
}

/* 教程段落样式 */
.tutorial-section p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #555555;
    text-shadow: none;
}

/* 教程列表样式 */
.tutorial-section ul {
    margin: 0 0 0 20px;
    padding: 0;
}

.tutorial-section li {
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 8px 0;
    color: #555555;
    position: relative;
    padding-left: 8px;
    text-shadow: none;
}

/* 教程两列布局 */
.tutorial-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

/* 教程列样式 */
.tutorial-column {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(173, 216, 230, 0.1);
}

/* 深色主题适配 */
body.dark-mode .tutorial-content {
    color: #cccccc;
}

body.dark-mode .tutorial-section {
    background: rgba(100, 100, 120, 0.1);
    border-color: rgba(100, 120, 150, 0.2);
}

body.dark-mode .tutorial-section:hover {
    background: rgba(100, 100, 120, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .tutorial-section h3 {
    color: #e0e0e0;
}

body.dark-mode .tutorial-section h4 {
    color: #d0d0d0;
}

body.dark-mode .tutorial-section p {
    color: #b0b0b0;
}

body.dark-mode .tutorial-section li {
    color: #b0b0b0;
}

body.dark-mode .tutorial-column {
    background: rgba(120, 120, 140, 0.1);
    border-color: rgba(100, 120, 150, 0.3);
}

/* 修复黑夜模式下硬编码的灰黑色文本 */
body.dark-mode * {
    /* 覆盖所有硬编码的灰黑色文本 */
    --text-override: rgba(255, 255, 255, 0.95);
}

/* 逐个修复硬编码的灰黑色文本 */
body.dark-mode {
    /* 确保所有文本使用变量而非硬编码 */
    color: var(--text-primary) !important;
}

body.dark-mode .profile-id-card,
body.dark-mode .id-card-header,
body.dark-mode .id-card-title,
body.dark-mode .id-card-subtitle,
body.dark-mode .id-card-avatar,
body.dark-mode .avatar-change-btn,
body.dark-mode .id-info-row,
body.dark-mode .id-info-label,
body.dark-mode .id-info-value,
body.dark-mode .medal-name,
body.dark-mode .medal-desc {
    color: var(--text-primary) !important;
}

body.dark-mode .medal-item.earned .medal-name,
body.dark-mode .medal-item.earned .medal-desc {
    color: var(--text-primary) !important;
}

body.dark-mode .medal-item.locked .medal-name,
body.dark-mode .medal-item.locked .medal-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 修复其他硬编码的颜色 */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color: #333333"],
body.dark-mode [style*="color: gray"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color: #999"] {
    color: var(--text-primary) !important;
}

/* 确保所有文本元素都使用正确的颜色 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode li,
body.dark-mode a,
body.dark-mode div {
    color: var(--text-primary) !important;
}

/* 修复表单元素 */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    color: var(--text-primary) !important;
}

/* 修复按钮文本 */
body.dark-mode button {
    color: var(--text-primary) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tutorial-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tutorial-section {
        padding: 12px;
        margin-bottom: 20px;
    }
}
 
 /* 关卡选择网格 */
 .levels-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     margin-top: 15px;
     margin-bottom: 15px;
 }
 
 .level-item {
     aspect-ratio: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.3rem;
     font-weight: 800;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     color: rgba(255, 255, 255, 0.98);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .level-item.completed {
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     color: rgba(75, 0, 130, 0.8);
     box-shadow: var(--shadow-glass);
     /* 玻璃雕刻质感 */
     text-shadow: var(--text-engrave);
 }
 
 .level-item.locked {
     background: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .level-item:hover:not(.locked) {
     transform: translateY(-2px) scale(1.05);
     box-shadow: 0 8px 25px rgba(173, 216, 230, 0.35);
 }
 
 /* 曲径关卡选择容器 */
 .levels-body {
     padding: 15px !important;
     background: transparent !important;
 }
 
 .trail-levels-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 200px); /* 自适应高度，根据视口高度调整 */
    background: transparent;
    overflow: visible;
    cursor: pointer;
}
 
 /* 移动端竖屏样式调整 */
@media (max-width: 768px) and (orientation: portrait) {
    /* 调整展开游戏卡片的宽度 */
    .expanded-game-card {
        left: 10px !important;
        right: 10px !important;
    }
    
    .game-card-content {
        border-radius: 24px !important;
    }
    
    /* 竖屏模式下排行榜文字分两行显示 */
    .rank-item .rank-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    
    .rank-item .rank-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.9rem !important;
    }
    
    .rank-item .rank-score {
        white-space: normal !important;
        font-size: 0.8rem !important;
    }
    .trail-levels-container {
        height: calc(100vh - 180px); /* 竖屏时调整高度，填满可用空间 */
    }
    
    /* 为竖屏状态的游戏卡片添加边距 */
    #cardsContainer {
        padding: 10px 15px;
        justify-content: flex-start;
    }
    
    .cards-stack {
        margin: 10px 8px;
        width: calc(100% - 16px);
        height: calc(100% - 20px);
    }
    
    /* 优化竖屏状态下的卡片样式 */
    .card {
        border-radius: 16px;
        /* 增加卡片宽度 */
        width: calc(100% - 10px);
        margin: 5px;
        /* 增强玻璃厚度感的渐变背景 */
        background: linear-gradient(145deg, rgba(230, 240, 255, 0.3) 0%, rgba(200, 220, 255, 0.2) 100%);
        /* 增强玻璃厚度感的多层阴影 */
        box-shadow: 
        var(--shadow-glass-strong),
        15px 0 45px rgba(0, 0, 0, 0.2),
        0 15px 45px rgba(0, 0, 0, 0.2);
        /* 增强玻璃厚度感的边框 */
        border: 2px solid var(--border-color);
    }
    
    /* 优化竖屏状态下的按钮大小 */
    .func-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    /* 优化竖屏状态下的关卡节点大小 */
    .level-node {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    /* 优化竖屏状态下的方向按钮大小 */
    .direction-btn {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
    
    /* 优化竖屏状态下的控制按钮大小 */
    .control-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* 优化竖屏状态下的游戏标题 */
    .game-title h1 {
        font-size: 2.2rem;
    }
    
    .game-title p {
        font-size: 1rem;
    }
    
    /* 优化竖屏状态下的开始按钮 */
    .start-button {
        padding: 14px 40px;
        font-size: 1.1rem;
    }
    
    /* 优化竖屏状态下的游戏信息显示 */
    .game-info {
        gap: 20px;
        padding: 8px 16px;
        font-size: 1rem;
    }
    
    /* 优化竖屏状态下的游戏网格 */
    .game-grid {
        gap: 6px;
        padding: 16px;
    }
    
    /* 优化竖屏状态下的卡片头部 */
    .card-header h2 {
        font-size: 1.1rem;
    }
    
    /* 优化竖屏状态下的卡片主体 */
    .card-body {
        padding: 16px;
    }
    
    /* 优化竖屏状态下的排行榜标签页 */
    .rank-tab {
        font-size: 0.9rem;
        padding: 10px 0;
    }
    
    /* 优化竖屏状态下的排行项 */
    .rank-item {
        padding: 10px;
    }
    
    /* 优化竖屏状态下的设置项 */
    .setting-item {
        padding: 12px;
    }
    
    /* 优化竖屏状态下的输入框 */
    .form-group input {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    /* 优化竖屏状态下的登录/注册按钮 */
    .auth-submit {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    /* 优化竖屏状态下的卡片指示器 */
    .cards-indicator {
        bottom: 15px;
        gap: 12px;
        padding: 12px 16px;
    }
    
    /* 优化竖屏状态下的提示按钮 */
    .hint-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    /* 优化竖屏状态下的速度排行榜 */
    .speed-rank-toggle {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}
 
 /* 曲径画布 */
 .trail-canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }
 
 /* 迷雾层 - 顶部浓雾，逐渐消散 */
 .fog-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: visible;
    background: transparent;
    /* 移除遮罩，让雾自然扩散 */
    /* 添加轻微阴影增强层次感 */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.05));
}
 
 .fog-layer::before {
    content: '';
    position: absolute;
    top: 0%;
    left: -5%;
    width: 110%;
    height: 60%;
    background: radial-gradient(
        ellipse 100% 80% at 50% 10%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.7) 30%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 100%
    );
    filter: blur(15px);
    animation: fogDrift1 15s ease-in-out infinite;
}
 
 .fog-layer::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 0%;
    width: 100%;
    height: 55%;
    background: radial-gradient(
        ellipse 95% 75% at 40% 15%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 35%,
        rgba(255, 255, 255, 0.25) 65%,
        transparent 100%
    );
    filter: blur(18px);
    animation: fogDrift2 18s ease-in-out infinite reverse;
}
 
 .fog-extra-1 {
    position: absolute;
    top: -5%;
    left: 15%;
    width: 90%;
    height: 50%;
    background: radial-gradient(
        ellipse 100% 85% at 60% 5%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.55) 25%,
        rgba(255, 255, 255, 0.2) 55%,
        transparent 100%
    );
    filter: blur(12px);
    animation: fogDrift3 12s ease-in-out infinite;
}

.fog-extra-2 {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 80%;
    height: 45%;
    background: radial-gradient(
        ellipse 95% 80% at 30% 20%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.45) 30%,
        rgba(255, 255, 255, 0.15) 60%,
        transparent 100%
    );
    filter: blur(14px);
    animation: fogDrift4 20s ease-in-out infinite reverse;
}
 
 @keyframes fogDrift1 {
     0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
     25% { transform: translate(50px, 10px) scale(1.05); }
     50% { transform: translate(30px, 25px) scale(0.98); }
     75% { transform: translate(-20px, 15px) scale(1.02); }
 }
 
 @keyframes fogDrift2 {
     0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
     25% { transform: translate(-40px, 20px) scale(0.95); }
     50% { transform: translate(-20px, 30px) scale(1.02); }
     75% { transform: translate(30px, 10px) scale(0.98); }
 }
 
 @keyframes fogDrift3 {
     0%, 100% { transform: translate(0, 0); opacity: 0.8; }
     30% { transform: translate(40px, -15px); }
     60% { transform: translate(-30px, 10px); }
 }
 
 @keyframes fogDrift4 {
     0%, 100% { transform: translate(0, 0); opacity: 0.75; }
     30% { transform: translate(-35px, 5px); }
     60% { transform: translate(25px, 20px); }
 }
 
 @keyframes fogDrift1 {
     0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
     50% { transform: translate(40px, 15px) scale(1.05); opacity: 0.5; }
 }
 
 @keyframes fogDrift2 {
     0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
     50% { transform: translate(-35px, 20px) scale(0.95); opacity: 0.4; }
 }
 
 @keyframes fogDrift3 {
     0%, 100% { transform: translate(0, 0); opacity: 0.5; }
     50% { transform: translate(25px, -10px); opacity: 0.7; }
 }
 
 @keyframes fogDrift4 {
     0%, 100% { transform: translate(0, 0); opacity: 0.45; }
     50% { transform: translate(-20px, 15px); opacity: 0.6; }
 }
 
 /* 曲径路径SVG - 增强可见性 */
 .trail-path-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 2;
     opacity: 1;
 }
 
 /* 关卡节点容器 */
 .level-nodes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 5;
 }
 
 /* 关卡节点 */
 .level-node {
     position: absolute;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.1rem;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transform: translate(-50%, -50%);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.5);
     z-index: 10;
 }
 
 /* 已通关关卡 */
 .level-node.completed {
     background: linear-gradient(135deg, rgba(100, 200, 100, 0.9), rgba(80, 180, 80, 0.85));
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 /* 未解锁关卡（灰色） */
 .level-node.locked {
     background: linear-gradient(135deg, rgba(150, 150, 150, 0.85), rgba(120, 120, 120, 0.8));
     color: rgba(200, 200, 200, 0.7);
     cursor: not-allowed;
 }
 
 /* 当前关卡（可玩） */
 .level-node.current {
     background: linear-gradient(135deg, rgba(100, 180, 255, 0.95), rgba(80, 150, 240, 0.9));
     color: rgba(240, 240, 240, 0.9);
     animation: currentPulse 2s ease-in-out infinite;
     border: 3px solid rgba(255, 255, 255, 0.8);
 }
 
 @keyframes currentPulse {
     0%, 100% {
         box-shadow: 0 4px 12px rgba(100, 180, 255, 0.4), 0 0 0 0 rgba(100, 180, 255, 0.5);
     }
     50% {
         box-shadow: 0 4px 12px rgba(100, 180, 255, 0.6), 0 0 0 8px rgba(100, 180, 255, 0);
     }
 }
 
 /* 关卡节点悬停效果 */
 .level-node:hover:not(.locked) {
     transform: translate(-50%, -50%) scale(1.15);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 
 .level-node.selected {
     transform: translate(-50%, -50%) scale(1.2);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
 }
 
 
 
 /* 小人样式 */
.trail-character {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    transform: translate(-50%, -50%) scaleX(var(--character-scale, 1));
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    pointer-events: auto;
    transition: all 0.2s ease;
    animation: characterBounce 0.5s ease-in-out infinite alternate;
    cursor: pointer;
}
 
 /* 人物弹跳动画 */
@keyframes characterBounce {
    from {
        transform: translate(-50%, -50%) rotate(var(--character-rotation, 0deg)) scaleX(var(--character-scale, 1)) translateY(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(var(--character-rotation, 0deg)) scaleX(var(--character-scale, 1)) translateY(-5px);
    }
}

/* 错误路径闪烁动画 */
@keyframes errorFlash {
    0%, 100% {
        background: rgba(255, 82, 82, 0.55);
    }
    50% {
        background: rgba(255, 82, 82, 0.2);
    }
}

/* 错误路径样式 */
.game-card-body .grid-cell.error-path-cell {
    background: rgba(255, 82, 82, 0.55);
    animation: errorFlash 0.65s ease-in-out 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 82, 82, 0.7);
}

/* 提示按钮抖动动画 */
@keyframes shake {
    0%, 100% {
        transform: translate(0);
    }
    20%, 60% {
        transform: translate(-5px, 0);
    }
    40%, 80% {
        transform: translate(5px, 0);
    }
}

/* 提示按钮抖动效果 */
.shake-animation {
    animation: shake 0.5s ease-in-out 3;
}

/* 正确路径闪烁动画 */
@keyframes correctFlash {
    0%, 100% {
        background: rgba(76, 175, 80, 0.55);
    }
    50% {
        background: rgba(76, 175, 80, 0.25);
    }
}

/* 正确路径样式 */
.game-card-body .grid-cell.correct-path-cell {
    background: rgba(76, 175, 80, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(76, 175, 80, 0.7);
    animation: correctFlash 0.65s ease-in-out 3;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

/* 跑步动画 - 快速切换人物 */
@keyframes characterRun {
    0%, 100% {
        content: "🚶";
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) rotate(var(--character-rotation, 0deg)) translateY(0);
    }
    25% {
        content: "🏃";
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) rotate(var(--character-rotation, 0deg)) translateY(-5px);
    }
    50% {
        content: "🚶";
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) rotate(var(--character-rotation, 0deg)) translateY(0);
    }
    75% {
        content: "🏃";
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) rotate(var(--character-rotation, 0deg)) translateY(-5px);
    }
}

/* 小人元素添加CSS变量支持 */
.trail-character {
    --character-rotation: 0deg;
    --character-scale: 1;
}

/* 自定义弹跳动画，保留transform设置 */
.trail-character.bouncing {
    animation: customBounce 0.5s ease-in-out infinite alternate;
}

/* 自定义弹跳动画 - 只改变y轴位置，不影响transform */
@keyframes customBounce {
    from {
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) translateY(0);
    }
    to {
        transform: translate(-50%, -50%) scaleX(var(--character-scale, 1)) translateY(-5px);
    }
}
 
 /* 关卡信息提示框 - 玻璃效果 */
 .level-tooltip {
     position: absolute;
     display: none;
     background: rgba(255, 255, 255, 0.35);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-radius: 8px;
     padding: 6px 10px;
     min-width: 80px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     border: 2px solid var(--border-color);
     z-index: 100;
     pointer-events: none;
     transform: translateX(-50%); /* 确保居中 */
 }
 
 .level-tooltip.show {
     display: block;
     animation: tooltipPopIn 0.2s ease-out;
 }
 
 @keyframes tooltipPopIn {
     from {
         opacity: 0;
         transform: translateX(-50%) scale(0.8);
     }
     to {
         opacity: 1;
         transform: translateX(-50%) scale(1);
     }
 }
 
 .tooltip-title {
     font-size: 0.7rem;
     font-weight: 600;
     color: #444;
     margin-bottom: 2px;
 }
 
 .tooltip-status {
     font-size: 0.6rem;
     margin-bottom: 2px;
 }
 
 .tooltip-status.completed {
     color: #4CAF50;
 }
 
 .tooltip-status.current {
     color: #2196F3;
 }
 
 .tooltip-status.locked {
     color: #888;
 }
 
 .tooltip-size {
     font-size: 0.55rem;
     color: #666;
 }
 
 /* 路径上的小圆点 */
 .path-dot {
     position: absolute;
     width: 60px; /* 比关卡节点大（关卡是50px） */
     height: 60px;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
     z-index: 1;
     background: transparent; /* 主元素透明，通过伪元素显示效果 */
 }
 
 /* 伪元素实现向内羽化效果 */
 .path-dot::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     /* 径向渐变：边缘不透明，中心完全透明 - 实现向内羽化 */
     opacity: 1;
     transition: none;
     animation: none;
 }
 
 /* 已完成路径上的小圆点 - 边缘透明(0%)，中心半透明(50%) */
 .path-dot.completed::before {
     background: radial-gradient(circle, rgba(76, 175, 80, 0.5) 0%, rgba(76, 175, 80, 0.4) 25%, rgba(76, 175, 80, 0.2) 50%, transparent 100%);
 }
 
 /* 未解锁路径上的小圆点 - 边缘透明(0%)，中心半透明(50%) */
 .path-dot.locked::before {
     background: radial-gradient(circle, rgba(158, 158, 158, 0.5) 0%, rgba(158, 158, 158, 0.4) 25%, rgba(158, 158, 158, 0.2) 50%, transparent 100%);
 }
 
 /* 关卡信息面板 */
 .level-info-panel {
     position: absolute;
     top: 4px;
     right: 4px;
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 4px;
     padding: 3px 6px;
     min-width: 55px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.4);
     z-index: 25;
 }
 
 .level-info-title {
     font-size: 0.6rem;
     font-weight: 600;
     color: #444;
     margin-bottom: 1px;
 }
 
 .level-info-status {
     font-size: 0.5rem;
     color: #555;
     margin-bottom: 1px;
 }
 
 .level-info-steps {
     font-size: 0.45rem;
     color: #666;
     margin-bottom: 2px;
 }
 
 .level-play-btn {
     width: 100%;
     padding: 2px 6px;
     font-size: 0.5rem;
 }
 
 /* 身份证样式的个人资料卡片 */
 .profile-id-card {
    background: var(--card-bg);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    overflow: hidden;
    color: #333333; /* 灰黑色字体 */
}
 
 .id-card-header {
    background: rgba(135, 206, 250, 0.3); /* 浅蓝色背景，变浅 */
    padding: 12px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: #333333; /* 灰黑色字体 */
}

.id-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    color: #333333; /* 灰黑色字体 */
}

.id-card-subtitle {
    font-size: 0.8rem;
    opacity: 0.9;
    letter-spacing: 1px;
    color: #333333; /* 灰黑色字体 */
}
 
 .id-card-content {
     display: flex;
     padding: 20px;
     gap: 25px;
     align-items: center;
     flex-wrap: wrap;
 }
 
 .id-card-avatar-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
 }
 
 .id-card-avatar {
    font-size: 4rem;
    background: rgba(135, 206, 250, 0.3); /* 浅蓝色背景，变浅 */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #333333; /* 灰黑色字体 */
}

.id-card-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(173, 216, 230, 0.4);
}

.avatar-change-btn {
    padding: 8px 16px;
    background: rgba(173, 216, 230, 0.2); /* 浅蓝色背景，变浅 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(173, 216, 230, 0.3);
    border-radius: 20px;
    color: #333333; /* 灰黑色字体 */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar-change-btn:hover {
    background: rgba(173, 216, 230, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
 
 .id-card-info {
     flex: 1;
     min-width: 200px;
 }
 
 .id-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(173, 216, 230, 0.15);
    color: #333333; /* 灰黑色字体 */
}

.id-info-row:last-child {
    border-bottom: none;
}

/* 灰黑色字体应用到所有相关元素 */
.id-info-row *,
.profile-levels *,
.profile-stats-section *,
.profile-actions * {
    color: #333333 !important;
}

/* 调整统计信息样式 */
.stats-grid {
    color: #333333; /* 灰黑色字体 */
}

.stat-box {
    color: #333333; /* 灰黑色字体 */
}

.stat-label,
.stat-value {
    color: #333333 !important; /* 灰黑色字体 */
}

/* 调整成就样式 */
.achievement-title {
    color: #333333 !important; /* 灰黑色字体 */
}

.completed-levels {
    color: #333333 !important; /* 灰黑色字体 */
}

/* 调整按钮样式 */
.action-btn {
    color: #333333 !important; /* 灰黑色字体 */
}
 
 .id-info-label {
     font-size: 0.95rem;
     font-weight: 600;
     color: #333333; /* 灰黑色字体 */
 }

 .id-info-value {
     font-size: 1rem;
     font-weight: 500;
     color: #333333; /* 灰黑色字体 */
     text-shadow: none;
 }
 
 /* 等级和成就系统样式 */
 .profile-levels {
     background: var(--card-bg);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border-radius: 16px;
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
     border: 2px solid var(--border-color);
     margin-bottom: 25px;
     padding: 20px;
 }
 
 .achievement-title {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
     margin-bottom: 20px;
     font-size: 1.1rem;
     font-weight: 600;
     color: rgba(240, 240, 240, 0.9);
 }
 
 .completed-levels {
     font-size: 1.5rem;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.25), rgba(147, 112, 219, 0.25));
     padding: 8px 16px;
     border-radius: 20px;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* 勋章展示样式 */
 .medal-display {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     align-items: center;
     padding: 15px;
     background: var(--card-bg);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border-radius: 12px;
     border: 1px solid var(--border-color);
     min-height: 60px;
 }
 
 .medal-item {
    display: inline-block;
    margin: 8px;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(173, 216, 230, 0.1);
    border: 1px solid rgba(173, 216, 230, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 100px;
    cursor: pointer;
    animation: medalLightUp 0.6s ease-out forwards;
    opacity: 0;
    transform: scale(0.8);
}

.medal-item.earned {
    background: rgba(135, 206, 250, 0.3);
    border-color: rgba(135, 206, 250, 0.6);
    box-shadow: 0 4px 12px rgba(135, 206, 250, 0.3);
}

.medal-item.locked {
    background: rgba(170, 170, 170, 0.1);
    border-color: rgba(170, 170, 170, 0.3);
    opacity: 0.5;
}

.medal-item:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(135, 206, 250, 0.4);
}

.medal-item.locked:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(170, 170, 170, 0.3);
}

.medal-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.medal-item.earned .medal-icon {
    filter: drop-shadow(0 0 8px rgba(135, 206, 250, 0.6));
    animation: medalGlow 2s ease-in-out infinite alternate;
}

.medal-item.locked .medal-icon {
    filter: grayscale(100%);
}

.medal-name {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #333333;
}

.medal-desc {
    font-size: 0.75rem;
    opacity: 0.8;
    color: #333333;
}

/* 勋章点亮动画 */
@keyframes medalLightUp {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 勋章发光动画 */
@keyframes medalGlow {
    from {
        filter: drop-shadow(0 0 8px rgba(135, 206, 250, 0.6));
    }
    to {
        filter: drop-shadow(0 0 15px rgba(135, 206, 250, 0.9));
    }
}

/* 为不同位置的勋章设置不同的动画延迟 */
.medal-item:nth-child(1) { animation-delay: 0.1s; }
.medal-item:nth-child(2) { animation-delay: 0.2s; }
.medal-item:nth-child(3) { animation-delay: 0.3s; }
.medal-item:nth-child(4) { animation-delay: 0.4s; }
.medal-item:nth-child(5) { animation-delay: 0.5s; }
.medal-item:nth-child(6) { animation-delay: 0.6s; }
.medal-item:nth-child(7) { animation-delay: 0.7s; }
.medal-item:nth-child(8) { animation-delay: 0.8s; }
.medal-item:nth-child(9) { animation-delay: 0.9s; }
.medal-item:nth-child(10) { animation-delay: 1s; }
.medal-item:nth-child(11) { animation-delay: 1.1s; }
.medal-item:nth-child(12) { animation-delay: 1.2s; }
.medal-item:nth-child(13) { animation-delay: 1.3s; }
.medal-item:nth-child(14) { animation-delay: 1.4s; }
.medal-item:nth-child(15) { animation-delay: 1.5s; }
.medal-item:nth-child(16) { animation-delay: 1.6s; }
.medal-item:nth-child(17) { animation-delay: 1.7s; }
.medal-item:nth-child(18) { animation-delay: 1.8s; }
.medal-item:nth-child(19) { animation-delay: 1.9s; }
.medal-item:nth-child(20) { animation-delay: 2s; }

/* 勋章展示容器样式 */
.medal-display {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 16px;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: 1px solid var(--border-color);
}
 .medal-item:nth-child(n+21) { animation-delay: 2.1s; }
 
 /* 游戏统计信息样式 */
 .profile-stats-section {
     background: var(--card-bg);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border-radius: 16px;
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 25px;
     padding: 20px;
 }
 
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 15px;
     margin-top: 15px;
 }
 
 .stat-box {
     background: var(--card-bg);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border-radius: 12px;
     border: 1px solid var(--border-color);
     padding: 15px;
     text-align: center;
     transition: all 0.3s ease;
 }
 
 .stat-box:hover {
     background: var(--card-bg-hover);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
 
 .stat-label {
     font-size: 0.9rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 8px;
 }
 
 .stat-value {
     font-size: 1.5rem;
     font-weight: 700;
     color: rgba(240, 240, 240, 0.9);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 /* 操作按钮样式 */
 .profile-actions {
     display: flex;
     gap: 15px;
     justify-content: center;
     flex-wrap: wrap;
 }
 
 /* 横屏时按钮并排 */
 @media (orientation: landscape) {
     .profile-actions {
         flex-wrap: nowrap;
     }
 }
 
 /* 竖屏时按钮换行 */
 @media (orientation: portrait) {
     .profile-actions {
         flex-wrap: wrap;
     }
 }
 
 .action-btn {
     padding: 14px 24px;
     border: 1px solid rgba(173, 216, 230, 0.4);
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     color: rgba(75, 0, 130, 0.85);
     box-shadow: var(--shadow-glass);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     flex: 1;
     min-width: 150px;
     max-width: 200px;
     /* 玻璃雕刻质感 */
     text-shadow: var(--text-engrave);
 }
 
 .action-btn:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 
         0 8px 25px rgba(147, 112, 219, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.25) inset;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.45), rgba(147, 112, 219, 0.4));
     border-color: rgba(173, 216, 230, 0.5);
 }
 
 /* 退出登录按钮样式 - 红色 */
 .logout-btn {
     background: var(--btn-danger);
     border-color: var(--btn-danger-border);
     box-shadow: 
         var(--shadow-md),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
 }
 
 .logout-btn:hover {
     background: var(--btn-danger-hover);
     box-shadow: 
         var(--shadow-lg),
         0 0 0 1px rgba(255, 255, 255, 0.15) inset;
     border-color: rgba(255, 100, 100, 0.35);
 }
 
 /* 头像选择弹窗样式 */
 .avatar-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     margin-top: 20px;
 }
 
 .avatar-option {
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-radius: 12px;
     border: 2px solid transparent;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .avatar-option:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: scale(1.1);
     border-color: rgba(173, 216, 230, 0.6);
     box-shadow: 0 6px 20px rgba(173, 216, 230, 0.3);
 }
 
 .avatar-option.selected {
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     border-color: rgba(173, 216, 230, 0.8);
     box-shadow: 0 6px 20px rgba(147, 112, 219, 0.35);
     transform: scale(1.15);
 }
 
 .action-btn {
     padding: 14px 24px;
     border: 1px solid rgba(173, 216, 230, 0.4);
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.35), rgba(147, 112, 219, 0.3));
     color: rgba(75, 0, 130, 0.85);
     box-shadow: 
         0 4px 15px rgba(147, 112, 219, 0.2),
         0 0 0 1px rgba(255, 255, 255, 0.2) inset;
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .action-btn:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 
         0 8px 25px rgba(147, 112, 219, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.25) inset;
     background: linear-gradient(135deg, rgba(173, 216, 230, 0.45), rgba(147, 112, 219, 0.4));
     border-color: rgba(173, 216, 230, 0.5);
 }
 
 /* 卡片指示器 */
 .cards-indicator {
     display: flex;
     gap: 12px;
     margin-top: 30px;
     z-index: 100;
 }
 
 .indicator-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .indicator-dot:hover {
     background: rgba(255, 255, 255, 0.5);
     transform: scale(1.2);
 }
 
 .indicator-dot.active {
     background: white;
     width: 30px;
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(173, 216, 230, 0.4);
 }
 
 /* 媒体查询 - 响应式设计 */
 @media (max-width: 768px) {
     .game-title h1 {
         font-size: 2rem;
     }
     
     .game-title p {
         font-size: 1rem;
     }
     
     .function-buttons {
         flex-direction: column;
         gap: 10px;
         top: 20px;
         right: 20px;
     }
     
     .func-btn {
         padding: 10px 16px;
         font-size: 0.85rem;
     }
     
     .game-grid {
         grid-template-columns: repeat(5, 50px);
         grid-template-rows: repeat(5, 50px);
         gap: 6px;
         padding: 15px;
     }
     
     .direction-btn {
         width: 50px;
         height: 50px;
         font-size: 1.2rem;
     }
     
     .auth-container {
         padding: 30px 20px;
     }
     
     .auth-header h2 {
         font-size: 2rem;
     }
     
     .auth-header p {
         font-size: 1rem;
     }
     
     /* 卡片响应式 */
     .cards-stack {
         width: 95%;
         height: calc(100% - 60px);
     }
     
     .card-header h2 {
         font-size: 1.5rem;
     }
     
     .profile-stats {
         flex-direction: column;
         gap: 10px;
     }
     
     .levels-grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
     }
 }
 
 /* 展开式游戏卡片 - 全屏玻璃卡片效果 */
 /* 打开动画 - 闪光效果 */
 @keyframes cardFlash {
     0% {
         opacity: 0;
         transform: scale(0);
     }
     20% {
         opacity: 1;
         transform: scale(2);
     }
     40% {
         opacity: 0;
         transform: scale(4);
     }
     100% {
         opacity: 0;
         transform: scale(0);
     }
 }
 
 /* 打开动画 - 条状扩展 */
 @keyframes cardExpandStrip {
     0% {
         opacity: 0;
         transform: scaleX(0) scaleY(0.05);
         transform-origin: center center;
         clip-path: inset(45% 0 45% 0);
     }
     40% {
         opacity: 1;
         transform: scaleX(1) scaleY(0.05);
         transform-origin: center center;
         clip-path: inset(45% 0 45% 0);
     }
     70% {
         opacity: 1;
         transform: scaleX(1) scaleY(1);
         transform-origin: center center;
         clip-path: inset(0 0 0 0);
     }
     100% {
         opacity: 1;
         transform: scale(1);
         transform-origin: center center;
         clip-path: inset(0 0 0 0);
     }
 }
 
 /* 关闭动画 - 条状收缩 */
 @keyframes cardCollapseStrip {
     0% {
         opacity: 1;
         transform: scale(1);
         transform-origin: center center;
         clip-path: inset(0 0 0 0);
     }
     30% {
         opacity: 1;
         transform: scaleX(1) scaleY(0.05);
         transform-origin: center center;
         clip-path: inset(45% 0 45% 0);
     }
     70% {
         opacity: 1;
         transform: scaleX(0.05) scaleY(0.05);
         transform-origin: center center;
         clip-path: inset(45% 0 45% 0);
     }
     100% {
         opacity: 0;
         transform: scaleX(0) scaleY(0.05);
         transform-origin: center center;
         clip-path: inset(45% 0 45% 0);
     }
 }
 
 .expanded-game-card {
     position: fixed;
     top: 20px;
     left: 20px;
     right: 20px;
     bottom: 20px;
     z-index: 10001;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.98);
     transform-origin: center center;
     pointer-events: none;
     /* 确保不继承父元素样式 */
     all: unset;
     /* 重新设置必要样式 */
     position: fixed;
     top: 20px;
     left: 20px;
     right: 20px;
     bottom: 20px;
     z-index: 10001;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.98);
     transform-origin: center center;
     pointer-events: none;
     border-radius: 20px; /* 确保卡片容器有圆角 */
     overflow: hidden;
 }
 
 /* 打开动画组合 */
 .expanded-game-card::before {
     content: '';
     position: fixed;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
     opacity: 0;
     z-index: 10000; /* 在卡片之下，背景之上 */
     pointer-events: none;
     transform: translate(-50%, -50%);
     border-radius: 50%;
 }
 
 .expanded-game-card.expanded {
     animation: cardExpandStrip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }
 
 .expanded-game-card.expanded::before {
     animation: cardFlash 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 /* 关闭动画组合 */
 .expanded-game-card.closing {
     animation: cardCollapseStrip 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
     pointer-events: none;
 }
 
 .expanded-game-card.closing::before {
     animation: none;
     opacity: 0;
 }
 
 .game-card-content {
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(50px);
   -webkit-backdrop-filter: blur(50px);
   border-radius: 20px;
   box-shadow: 
       var(--shadow-glass-strong),
       15px 0 45px rgba(0, 0, 0, 0.2),
       0 15px 45px rgba(0, 0, 0, 0.2);
   border: 2px solid var(--border-color);
   overflow: visible;
   display: flex;
   flex-direction: column;
   position: relative;
}
 
 /* 左侧发光描边 */
 .game-card-content::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         transparent 0%, 
         rgba(255, 255, 255, 0.8) 30%, 
         rgba(255, 255, 255, 0.8) 70%, 
         transparent 100%);
     filter: brightness(1.5) blur(1px);
     opacity: 0.7;
     pointer-events: none;
     z-index: 10;
 }
 
 /* 顶部发光描边 */
 .game-card-content::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(to right, 
         transparent 0%, 
         rgba(255, 255, 255, 0.8) 30%, 
         rgba(255, 255, 255, 0.8) 70%, 
         transparent 100%);
     filter: brightness(1.5) blur(1px);
     opacity: 0.7;
     pointer-events: none;
     z-index: 10;
 }
 
 .game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(173, 216, 230, 0.4);
    border-bottom: 1px solid rgba(173, 216, 230, 0.3);
    box-shadow: 
        /* 右侧外阴影 - 加深并加大范围 */
        12px 0 35px rgba(0, 0, 0, 0.25),
        /* 底部外阴影 - 加深并加大范围 */
        0 18px 50px rgba(0, 0, 0, 0.25),
        /* 左侧内发光 - 保留 */
        inset -2px 0 10px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
    overflow: visible;
}
 
 .level-info {
     display: flex;
     align-items: center;
     gap: 12px;
 }
 
 .game-card-header h2 {
     margin: 0;
     font-size: 1.4rem;
     color: #333333;
     font-weight: 700;
 }
 
 /* 关卡导航按钮 */
 .level-nav-buttons {
     display: flex;
     gap: 8px;
     margin-right: 15px;
 }
 
 .level-nav-btn {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.9rem;
    color: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
 .level-nav-btn:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.5);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .level-nav-btn:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
     color: #999999;
     background: rgba(255, 255, 255, 0.2);
     box-shadow: none;
 }
 
 .level-nav-btn:disabled:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: none;
     box-shadow: none;
 }
 
 .level-nav-btn.hidden {
     display: none;
 }
 
 .level-size {
     font-size: 1rem;
     color: #666;
     background: rgba(255, 255, 255, 0.3);
     padding: 4px 12px;
     border-radius: 15px;
     font-weight: 500;
 }
 
 .close-game-card {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    font-size: 20px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.close-game-card:hover {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
 
 .level-title {
     position: relative;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: color 0.2s ease;
 }
 
 .level-title:hover {
     color: #667eea;
 }
 
 .level-size {
    font-size: 0.9rem;
    color: #666;
    background: rgba(255, 255, 255, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
    margin-left: 8px;
}
 
 /* 游戏说明弹窗 */
 .game-instruction-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
 
 .game-instruction-popup.active {
     opacity: 1;
     visibility: visible;
     max-height: 500px;
     pointer-events: auto;
 }
 
 .instruction-content {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 0 0 20px 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: none;
    padding: 20px;
    margin: 0;
    max-width: none;
    position: relative;
    z-index: 10002;
    max-height: 300px;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 隐藏滚动条 - Chrome, Safari */
.instruction-content::-webkit-scrollbar {
    display: none;
}
 
 /* 游戏卡片内容模糊效果 */
 .game-card-body {
     transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .game-card-body.blurred {
     filter: blur(5px);
 }
 
 .instruction-content h3 {
     margin: 0 0 15px 0;
     color: #333;
     font-size: 1.2rem;
     font-weight: 600;
 }
 
 .instruction-content .instruction-text {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #555;
 }
 
 .instruction-content p {
     margin: 0 0 10px 0;
 }
 
 .instruction-content ul {
     margin: 0;
     padding-left: 20px;
 }
 
 .instruction-content li {
     margin-bottom: 5px;
 }
 
 /* 游戏卡片的模糊蒙版进阶版 */
 .card-blur-overlay-advanced {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 9999;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                 visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none;
     background: rgba(0, 0, 0, 0.1);
 }
 
 .card-blur-overlay-advanced.active {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }
 
 /* 游戏卡片主体 - 超厚玻璃效果 */
.game-card-body {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* 更透明的玻璃效果 - 进一步降低透明度，移除模糊效果 */
    background: rgba(173, 216, 230, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid rgba(173, 216, 230, 0.05);
    /* 多层次阴影营造厚度感 */
    box-shadow: 
        /* 右下外阴影 - 更大范围 */
        20px 20px 80px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 25px 25px;
    /* 确保滚动条可见 */
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    /* 防止横向扩展 */
    min-width: auto;
    box-sizing: border-box;
}
 
 /* 确保Chrome, Safari滚动条可见 */
 .game-card-body::-webkit-scrollbar {
     display: block;
     width: 8px;
 }
 
 .game-card-body::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }
 
 .game-card-body::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
 }
 
 .game-card-body::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.5);
 }
 
 /* 提示按钮样式 */
.hint-btn {
    position: absolute;
    top: 120px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 24px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 100;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: shakeHintBtn 0.2s ease-in-out 5 20s;
}

.hint-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
 
 /* 提示按钮数字样式 */
.hint-btn {
    /* 调整按钮尺寸，为数字留出空间 */
    width: 50px;
    height: 80px;
    padding: 8px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 18px;
    text-align: center;
}

/* 提示图标样式 */
.hint-icon {
    font-size: 28px;
    display: inline-block;
    vertical-align: middle;
}

/* 提示文本样式 */
.hint-text {
    font-weight: 600;
    color: var(--text-primary);
    display: inline-block;
    vertical-align: middle;
}

/* 提示数字样式 - 更小、更精致 */
.hint-count {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* 普通提示按钮样式调整 - 保持水平排列 */
.control-btn#hintButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    /* 覆盖之前的flex-direction设置 */
    flex-direction: row;
    width: auto;
    height: auto;
}

/* 悬停效果增强 */
.hint-btn:hover .hint-count,
.control-btn#hintButton:hover .hint-count {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 提示按钮抖动动画 */
@keyframes shakeHintBtn {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1deg); }
}
 
 /* 禁用按钮点击抖动动画 */
 @keyframes shakeDisabledBtn {
     0%, 100% { transform: translateX(0); }
     25% { transform: translateX(-3px); }
     75% { transform: translateX(3px); }
 }
 
 /* 游戏卡片内的游戏标题 */
 .game-card-body .game-title {
     text-align: center;
     margin-bottom: 10px;
 }
 
 /* 合并后的速度排行榜 */
.speed-rank-combined {
    position: absolute;
    top: 120px;
    right: -10px;
    z-index: 10010;
    width: auto;
    height: auto;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px 0 0 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform-origin: right top;
    overflow: hidden;
    cursor: pointer;
}

/* 悬浮窗鼠标悬停效果 */
.speed-rank-combined:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    transform: translateX(-5px) scale(1.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* 悬浮窗鼠标悬停时的图标和文字效果 */
.speed-rank-combined:hover .rank-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.speed-rank-combined:hover .rank-label {
    color: #667eea;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* 初始状态：只显示悬浮按钮 */
.speed-rank-combined:not(.active) {
    height: auto;
    max-height: 100px; /* 恢复原始高度，确保文字竖着排列 */
    width: 40px; /* 保持窄宽度 */
}

/* 激活状态：扩展为完整面板 */
.speed-rank-combined.active {
    width: 280px; /* 减小展开后的宽度 */
    height: auto; /* 高度自适应 */
    max-height: 400px; /* 设置最大高度，防止内容过多时过高 */
    border-radius: 20px 0 0 20px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: -15px 15px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 展开状态下的悬浮按钮样式 - 文字水平排列 */
.speed-rank-combined.active .speed-rank-toggle {
    writing-mode: horizontal-tb; /* 恢复为水平排列 */
    text-orientation: initial;
    min-height: auto;
    padding: 12px 20px;
    justify-content: center;
}

/* 展开状态下的图标和文字 - 增大尺寸 */
.speed-rank-combined.active .rank-icon {
    font-size: 20px;
}

.speed-rank-combined.active .rank-label {
    font-size: 16px;
    font-weight: 600;
}

/* 悬浮按钮部分 - 始终显示 */
.speed-rank-combined .speed-rank-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 100px; /* 恢复原始高度，确保文字竖着排列 */
    box-sizing: border-box;
    width: 100%;
}

.speed-rank-combined .rank-icon {
    font-size: 16px;
    color: #333333;
}

.speed-rank-combined .rank-label {
    font-size: 12px;
    color: #333333;
    font-weight: 500;
    line-height: 1.2;
}

/* 面板主体 - 初始隐藏，激活时显示 */
.speed-rank-combined .rank-panel-body {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.speed-rank-combined.active .rank-panel-body {
    opacity: 1;
    transform: translateY(0);
}



/* 面板主体样式 */
.speed-rank-combined .rank-panel-body {
    flex: 1;
    padding: 15px 20px 20px;
    overflow-y: auto;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    border-top-left-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.speed-rank-combined .rank-panel-body::-webkit-scrollbar {
    display: block;
    width: 8px;
}

.speed-rank-combined .rank-panel-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.speed-rank-combined .rank-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

.speed-rank-combined .rank-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* 排行榜列表样式 */
.speed-rank-combined .rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.speed-rank-combined .rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    min-height: auto;
    line-height: 1.4;
} 

.rank-item:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
} 

.rank-item .rank-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
} 

.rank-item.gold .rank-number {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 179, 71, 0.9));
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
} 

.rank-item.silver .rank-number {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.9), rgba(168, 168, 168, 0.9));
    color: #fff;
    box-shadow: 0 2px 10px rgba(192, 192, 192, 0.4);
} 

.rank-item.bronze .rank-number {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.9), rgba(184, 115, 51, 0.9));
    color: #fff;
    box-shadow: 0 2px 10px rgba(205, 127, 50, 0.4);
} 

.rank-item .rank-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.rank-item .rank-name {
    font-weight: 600;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-item .rank-score {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
 
 /* 排行榜背景模糊层 */
 .rank-blur-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     z-index: 10005;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .rank-blur-overlay.active {
     opacity: 1;
     visibility: visible;
 }
 
 .game-card-body .game-title h1 {
     font-size: 2.2rem;
     margin: 0;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 .game-card-body .game-title p {
     font-size: 1rem;
     color: #888;
     margin: 5px 0 0 0;
 }
 
 /* 游戏卡片内的开始按钮 */
 .game-card-body .start-button {
    padding: 14px 40px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: rgba(240, 240, 240, 0.9);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}
 
 .game-card-body .start-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
 }
 
 /* 游戏卡片内的信息显示 */
 .game-card-body .game-info {
     display: flex;
     gap: 24px;
     font-size: 1.1rem;
     color: #555;
 }
 
 .game-card-body .level-display,
.game-card-body .steps-display {
    background: rgba(255, 255, 255, 0.35);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 500;
}
 
 /* 游戏卡片内的网格 - 挖下去的效果 */
.game-card-body .game-grid {
   display: grid;
   gap: 5px;
   padding: 25px;
   /* 完全透明 */
   background: transparent;
   /* 移除模糊效果 */
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border-radius: 18px;
   margin: 10px auto;
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   flex-shrink: 1;
   overflow: hidden;
   box-sizing: border-box;
   z-index: 5;
   position: relative;
   /* 上边和左边内侧阴影，右边和下边内发光效果 */
   box-shadow: 
       /* 外部阴影，增强深度感 */
       0 10px 35px rgba(0, 0, 0, 0.12),
       /* 上边内侧阴影 - 加大范围 */
       inset 0 6px 15px rgba(0, 0, 0, 0.2),
       /* 左边内侧阴影 - 加大范围 */
       inset 6px 0 15px rgba(0, 0, 0, 0.2),
       /* 右边内发光 - 浅蓝色偏白色，增强效果 */
       inset -4px 0 20px rgba(220, 240, 255, 0.8),
       /* 下边内发光 - 浅蓝色偏白色，增强效果 */
       inset 0 -4px 20px rgba(220, 240, 255, 0.8),
       /* 增强内凹感的细微内阴影 */
       inset 0 0 15px rgba(0, 0, 0, 0.05);
   /* 细微的边框，增强挖洞的边缘感 */
   border: 1px solid rgba(173, 216, 230, 0.15);
}
 
 .game-card-body .grid-cell {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(173, 216, 230, 0.25);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: 20px;
   font-size: 1.3rem;
   font-weight: 700;
   color: rgba(30, 60, 90, 0.9);
   transition: all 0.2s ease;
   z-index: 6;
   position: relative;
   /* 左、上内发光，右下阴影 - 强化玻璃块质感 */
   box-shadow: 
       /* 左上内发光 */
       inset 0 3px 12px rgba(255, 255, 255, 0.7),
       inset 3px 0 12px rgba(255, 255, 255, 0.7),
       /* 右下阴影 */
       4px 4px 20px rgba(0, 0, 0, 0.12),
       /* 玻璃边缘高光 */
       0 0 0 1px rgba(255, 255, 255, 0.5);
   border: 1px solid rgba(173, 216, 230, 0.3);
   /* 禁止文本选择 */
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   /* 禁止拖动文本 */
   -webkit-user-drag: none;
   user-drag: none;
}

 .game-card-body .grid-cell:hover {
     background: rgba(173, 216, 230, 0.45);
     transform: scale(1.08);
     box-shadow: 
         inset 0 3px 12px rgba(255, 255, 255, 0.7),
         inset 3px 0 12px rgba(255, 255, 255, 0.7),
         5px 5px 25px rgba(173, 216, 230, 0.3);
     border: 1px solid rgba(173, 216, 230, 0.5);
 }
 
 .game-card-body .grid-cell.start-cell {
     background: rgba(100, 200, 150, 0.55);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     color: rgba(20, 80, 50, 0.95);
     box-shadow: 
         inset 0 3px 12px rgba(255, 255, 255, 0.6),
         inset 3px 0 12px rgba(255, 255, 255, 0.6),
         4px 4px 20px rgba(100, 200, 150, 0.4);
     border: 1px solid rgba(100, 200, 150, 0.6);
 }

 .game-card-body .grid-cell.end-cell {
     background: rgba(255, 120, 120, 0.55);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     color: rgba(100, 30, 30, 0.95);
     box-shadow: 
         inset 0 3px 12px rgba(255, 255, 255, 0.6),
         inset 3px 0 12px rgba(255, 255, 255, 0.6),
         4px 4px 20px rgba(255, 120, 120, 0.4);
     border: 1px solid rgba(255, 120, 120, 0.6);
 }

 /* 路径格子样式 - 蓝绿色表示走过的地方 */
 .game-card-body .grid-cell.path-cell {
     background: rgba(70, 180, 200, 0.55);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     color: rgba(20, 70, 90, 0.95);
     transform: scale(1.05);
     box-shadow: 
         inset 0 3px 12px rgba(255, 255, 255, 0.6),
         inset 3px 0 12px rgba(255, 255, 255, 0.6),
         4px 4px 20px rgba(70, 180, 200, 0.4),
         0 0 0 1px rgba(255, 255, 255, 0.6);
     border: 1px solid rgba(70, 180, 200, 0.6);
 }

 /* 当前拖拽格子样式 */
 .game-card-body .grid-cell.current-cell {
     background: rgba(100, 180, 255, 0.6);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     color: rgba(20, 50, 100, 0.95);
     transform: scale(1.1);
     box-shadow: 
         inset 0 3px 12px rgba(255, 255, 255, 0.6),
         inset 3px 0 12px rgba(255, 255, 255, 0.6),
         5px 5px 25px rgba(100, 180, 255, 0.5),
         0 0 0 1px rgba(255, 255, 255, 0.7);
     border: 1px solid rgba(100, 180, 255, 0.7);
 }
 
 /* 路径和显示样式 */
 .path-sum-display {
     background: rgba(255, 255, 255, 0.35);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     padding: 12px 24px;
     border-radius: 20px;
     margin: 10px auto;
     text-align: center;
     font-size: 1.2rem;
     font-weight: 600;
     color: #333;
     width: fit-content;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 /* 游戏卡片内的方向按钮 */
 .game-card-body .direction-buttons {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin: 10px 0;
 }
 
 .game-card-body .horizontal-buttons {
     display: flex;
     gap: 10px;
 }
 
 .game-card-body .direction-btn {
    width: 56px;
    height: 56px;
    border: none;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
 
 .game-card-body .direction-btn:hover {
     background: rgba(102, 126, 234, 0.4);
     transform: scale(1.1);
 }
 
 .game-card-body .direction-btn:active {
     transform: scale(0.95);
 }
 
 /* 游戏卡片内的控制按钮 */
 .game-card-body .game-controls {
     display: flex;
     gap: 16px;
     margin-top: 10px;
 }
 
 .game-card-body .control-btn {
    padding: 12px 28px;
    border: none;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
}
 
 .game-card-body .control-btn:hover {
     background: rgba(102, 126, 234, 0.4);
     color: #667eea;
 }
 
 /* 响应式调整 */
 @media (max-width: 768px) {
     .expanded-game-card {
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
     }
     
     .game-card-body .grid-cell {
         width: 45px;
         height: 45px;
         font-size: 0.9rem;
     }
     
     .game-card-body .direction-btn {
         width: 48px;
         height: 48px;
         font-size: 1.2rem;
     }
 }