/*
 * @Author: longinskyonlyfly 3520317001@qq.com
 * @Date: 2026-03-17 00:42:35
 * @LastEditors: longinskyonlyfly 3520317001@qq.com
 * @LastEditTime: 2026-03-17 00:46:54
 * @FilePath: \网页\snake-game\style.css
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Courier New', monospace;
        background: #0a0e27;
        color: #00ffff;
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
        z-index: 0;
    }
    
    .container {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 600px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .game-header {
        width: 100%;
        text-align: center;
    }
    
    .title {
        font-size: 2.5rem;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 5px;
    }
    
    .glitch {
        position: relative;
        color: #00ffff;
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #ff00ff;
        animation: flicker 3s infinite;
    }
    
    @keyframes flicker {
        0%,
        100% {
            opacity: 1;
        }
        41.99% {
            opacity: 1;
        }
        42% {
            opacity: 0.8;
        }
        43% {
            opacity: 1;
        }
        45.99% {
            opacity: 1;
        }
        46% {
            opacity: 0.9;
        }
        46.5% {
            opacity: 1;
        }
    }
    
    .score-board {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 10px;
    }
    
    .score-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 20px;
        background: rgba(0, 255, 255, 0.1);
        border: 2px solid #00ffff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.2);
    }
    
    .score-item .label {
        font-size: 0.8rem;
        opacity: 0.7;
        margin-bottom: 5px;
    }
    
    .score-item .value {
        font-size: 1.5rem;
        font-weight: bold;
        text-shadow: 0 0 10px #00ffff;
    }
    
    .game-wrapper {
        position: relative;
        width: 100%;
        max-width: 500px;
        aspect-ratio: 1;
    }
    
    #gameCanvas {
        width: 100%;
        height: 100%;
        border: 3px solid #00ffff;
        border-radius: 10px;
        background: rgba(10, 14, 39, 0.9);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
        display: block;
    }
    
    .game-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 14, 39, 0.95);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }
    
    .game-overlay.hidden {
        display: none;
    }
    
    .overlay-content {
        text-align: center;
        padding: 20px;
    }
    
    .overlay-content h2 {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #ff00ff;
        text-shadow: 0 0 20px #ff00ff;
    }
    
    .overlay-content p {
        font-size: 1rem;
        margin-bottom: 20px;
        opacity: 0.8;
    }
    
    .btn-start {
        padding: 15px 40px;
        font-size: 1.2rem;
        font-family: 'Courier New', monospace;
        background: transparent;
        color: #00ffff;
        border: 2px solid #00ffff;
        border-radius: 5px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all 0.3s;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }
    
    .btn-start:hover {
        background: #00ffff;
        color: #0a0e27;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        transform: scale(1.05);
    }
    
    .btn-start:active {
        transform: scale(0.95);
    }
    
    .controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }
    
    .control-row {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    
    .btn-control {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        background: rgba(0, 255, 255, 0.1);
        color: #00ffff;
        border: 2px solid #00ffff;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn-control:active {
        background: rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
        transform: scale(0.95);
    }
    
    .game-controls {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-feature {
        padding: 10px 25px;
        font-size: 1rem;
        font-family: 'Courier New', monospace;
        background: rgba(255, 0, 255, 0.1);
        color: #ff00ff;
        border: 2px solid #ff00ff;
        border-radius: 5px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s;
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
        user-select: none;
    }
    
    .btn-feature:hover {
        background: rgba(255, 0, 255, 0.2);
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
        transform: translateY(-2px);
    }
    
    .btn-feature:active {
        transform: translateY(0);
    }
    
    .btn-feature.active {
        background: #ff00ff;
        color: #0a0e27;
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    }
    
    .instructions {
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.6;
        line-height: 1.6;
    }
    
    @media (max-width: 600px) {
        .container {
            padding: 10px;
            gap: 15px;
        }
        .title {
            font-size: 1.8rem;
            letter-spacing: 3px;
        }
        .score-board {
            gap: 15px;
        }
        .score-item {
            padding: 8px 15px;
        }
        .score-item .value {
            font-size: 1.2rem;
        }
        .overlay-content h2 {
            font-size: 1.5rem;
        }
        .btn-start {
            padding: 12px 30px;
            font-size: 1rem;
        }
        .btn-control {
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }
        .instructions {
            font-size: 0.8rem;
        }
    }
    
    @media (max-width: 400px) {
        .title {
            font-size: 1.5rem;
        }
        .btn-control {
            width: 45px;
            height: 45px;
        }
    }
    
    @media (min-width: 768px) {
        .controls {
            display: none;
        }
    }