.game-switcher { margin-bottom: 25px; }
    .retro-btn-group {
        background: #fff; border-radius: 50px; padding: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #eaeaea;
        display: inline-flex;
    }
    .btn-retro {
        border: none; background: transparent; color: #888; font-weight: 600;
        padding: 6px 20px; border-radius: 50px !important; transition: all 0.3s; font-size: 14px;
        text-decoration: none;
    }
    .btn-retro:hover { color: #333; background: #f8f9fa; text-decoration: none; }
    .btn-retro.active { background: #2d3436; color: #fff; }

    .retro-card {
        background-color: #f7f7f7; border-radius: 8px; border: 1px solid #eaeaea;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    }
    .retro-wrapper { max-width: 850px; margin: 20px auto 40px auto; padding: 0 20px; }
    
    .retro-header { text-align: center; margin-bottom: 20px; }
    .retro-title { font-size: 26px; font-weight: bold; color: #333; margin-bottom: 12px; letter-spacing: 2px; }
    .retro-subtitle { font-size: 14px; color: #666; line-height: 1.8; }

    .difficulty-section { text-align: center; margin-bottom: 25px; }
    .diff-link { 
        color: #999; font-size: 14px; margin: 0 15px; cursor: pointer; 
        transition: all 0.3s; border-bottom: 2px solid transparent; padding-bottom: 2px;
        position: relative; z-index: 10;
    }
    .diff-link:hover { color: #666; }
    .diff-link.active { color: #333; font-weight: bold; border-bottom: 2px solid #333; }
    .diff-link.hard-mode.active { color: #da173b; border-bottom: 2px solid #da173b; }
    .diff-desc { font-size: 12px; color: #aaa; margin-top: 10px; letter-spacing: 1px; }

    .snake-game-stage {
        display: flex; flex-direction: column; align-items: center; margin-bottom: 40px;
    }
    .score-board {
        font-family: monospace; font-size: 16px; font-weight: bold; color: #333;
        margin-bottom: 12px; width: 400px; max-width: 100%; display: flex; justify-content: space-between;
    }
    
    .canvas-container { 
        position: relative; 
        user-select: none; -webkit-user-select: none; touch-action: none;
    }
    canvas {
        border: 1px solid #dcdcdc; background-color: #E8EBE9;
        background-image: linear-gradient(#e0e3e1 1px, transparent 1px), linear-gradient(90deg, #e0e3e1 1px, transparent 1px);
        background-size: 20px 20px; box-shadow: inset 0 0 10px rgba(0,0,0,0.03);
    }
    .start-msg {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: bold; font-size: 16px; color: #666; text-shadow: 0 0 5px #fff;
    }

    .touch-controls { 
        display: none; margin-top: 20px; gap: 10px; 
        user-select: none; -webkit-user-select: none; touch-action: none;
    }
    @media (max-width: 768px) {
        .touch-controls { display: grid; grid-template-areas: ". up ." "left down right"; gap: 10px; }
        .touch-btn { 
            width: 60px; height: 50px; background: #fff; border: 1px solid #ddd; 
            border-radius: 8px; display: flex; justify-content: center; align-items: center;
            font-size: 20px; color: #555; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            cursor: pointer;
        }
        .touch-btn:active { background: #eee; }
    }

    /* 排行榜 */
    .retro-rank-title { font-size: 15px; font-weight: bold; color: #888; text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
    .retro-rank-list { padding: 0; list-style: none; margin: 0; }
    /* 排行榜每一行，加入动画过渡时间 */
.retro-rank-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 8px 10px; font-size: 14px; border-bottom: 1px dashed #eaeaea; 
    transition: background-color 0.2s ease; 
}
.retro-rank-item:hover { 
    background-color: #ebebeb; 
    border-radius: 6px; 
}
    .retro-rank-left { display: flex; align-items: center; }
    .retro-rank-num { width: 24px; color: #aaa; font-family: monospace; font-size: 13px; }
    .retro-rank-name { font-weight: 500; text-decoration: none; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
    .retro-rank-name:hover { color: #333; text-decoration: underline; }
    .retro-rank-score { font-family: monospace; font-size: 15px; font-weight: bold; color: #555; }
    
    .retro-article-section { margin-top: 50px; padding-top: 40px; border-top: 1px solid #e0e0e0; }
    .retro-article-title { text-align: center; font-size: 18px; font-weight: bold; color: #333; margin-bottom: 25px; letter-spacing: 1px; }
    .article-answer { color: #666; font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
    .article-answer ul { margin-top: 6px; padding-left: 20px; }
    .article-answer li { margin-bottom: 4px; }

    /* 弹窗样式 */
    .custom-toast-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 0; visibility: hidden; transition: all 0.3s; }
    .custom-toast-overlay.show { opacity: 1; visibility: visible; }
    .custom-toast-card { background: #fff; border-radius: 16px; padding: 30px 40px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-width: 260px; }
    .toast-icon { font-size: 50px; margin-bottom: 10px; }
    .toast-msg { font-size: 16px; color: #333; font-weight: bold; }