body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    font-family: 'Arial', sans-serif;
    color: white;
    overflow: hidden;
}

.game-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

canvas {
    display: block;
    background: #0f0f1a;
    width: 800px;
    height: 600px;
}

.ui {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
    margin-left: 10px;
}

.game-btn {
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 6px 0;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease;
    position: relative;
    overflow: hidden;
}

.game-btn:not(.enable-btn):not(.disable-btn):not(.direction-btn) {
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
}

.game-btn:not(.enable-btn):not(.disable-btn):not(.direction-btn):hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
    background: linear-gradient(45deg, #45A049, #5C9B5E);
}

.enable-btn {
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
}

.enable-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
    background: linear-gradient(45deg, #45A049, #5C9B5E);
}

.disable-btn {
    background: linear-gradient(45deg, #F44336, #EF5350);
}

.disable-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.7);
    background: linear-gradient(45deg, #D32F2F, #E53935);
}

.direction-btn {
    background: linear-gradient(45deg, #2196F3, #42A5F5);
    font-size: 20px;
    padding: 10px 20px;
    display: none; /* Hidden by default on non-touch devices */
}

.direction-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.7);
    background: linear-gradient(45deg, #1976D2, #3F8BCB);
}

.game-btn:active {
    transform: scale(0.95);
}

.game-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.game-btn:hover::before {
    left: 100%;
}

.score, .lives {
    margin-bottom: 12px;
    font-size: 18px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.pause-menu, .settings-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 600px;
    background: rgba(10, 10, 26, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.pause-menu-content, .settings-menu-content {
    background: #1a1a2e;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.pause-menu-content h2, .settings-menu-content h2, .settings-menu-content h3 {
    margin-bottom: 20px;
    font-size: 24px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.sound-status {
    margin-bottom: 20px;
    font-size: 18px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.pause-menu-content .game-btn, .settings-menu-content .game-btn {
    width: 200px;
    margin: 10px 0;
}

.direction-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Media Queries for Responsive Design */

/* Mobile Devices (up to 600px, e.g., iPhone SE, iPhone 14, Samsung Galaxy S series) */
@media screen and (max-width: 600px) {
    .game-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100vw;
        height: auto;
    }

    canvas {
        width: 90vw;
        height: calc(90vw * 0.75); /* Maintain 4:3 aspect ratio (600/800 = 0.75) */
        max-width: 400px;
        max-height: 300px;
    }

    .ui {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        padding: 10px;
        width: 90vw;
        max-width: 400px;
    }

    .game-btn:not(.direction-btn) {
        padding: 8px 16px;
        font-size: 14px;
        margin: 4px;
        width: auto;
        min-width: 100px;
    }

    .direction-btn {
        display: inline-block;
        padding: 12px 20px;
        font-size: 18px;
        min-width: 60px;
    }

    .pause-menu, .settings-menu {
        width: 90vw;
        height: calc(90vw * 0.75);
        max-width: 400px;
        max-height: 300px;
    }

    .pause-menu-content, .settings-menu-content {
        padding: 15px;
        width: 80%;
        max-width: 300px;
    }

    .pause-menu-content h2, .settings-menu-content h2, .settings-menu-content h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .pause-menu-content .game-btn, .settings-menu-content .game-btn {
        width: 100%;
        font-size: 14px;
        padding: 8px;
    }

    .score, .lives, .sound-status {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .direction-controls {
        margin-top: 8px;
        gap: 8px;
    }
}

/* Tablets and Larger Mobile Devices (601px to 1024px, e.g., iPad, Galaxy Tab) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .game-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 90vw;
        height: auto;
    }

    canvas {
        width: 80vw;
        height: calc(80vw * 0.75); /* Maintain 4:3 aspect ratio */
        max-width: 600px;
        max-height: 450px;
    }

    .ui {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        padding: 15px;
        width: 80vw;
        max-width: 600px;
    }

    .game-btn:not(.direction-btn) {
        padding: 10px 18px;
        font-size: 15px;
        margin: 5px;
        width: auto;
        min-width: 120px;
    }

    .direction-btn {
        display: inline-block;
        padding: 12px 24px;
        font-size: 20px;
        min-width: 80px;
    }

    .pause-menu, .settings-menu {
        width: 80vw;
        height: calc(80vw * 0.75);
        max-width: 600px;
        max-height: 450px;
    }

    .pause-menu-content, .settings-menu-content {
        padding: 20px;
        width: 80%;
        max-width: 400px;
    }

    .pause-menu-content h2, .settings-menu-content h2, .settings-menu-content h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .pause-menu-content .game-btn, .settings-menu-content .game-btn {
        width: 100%;
        font-size: 15px;
        padding: 10px;
    }

    .score, .lives, .sound-status {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .direction-controls {
        margin-top: 10px;
        gap: 10px;
    }
}

/* Ensure touch devices have proper touch feedback */
@media (hover: none) {
    .game-btn:hover {
        transform: none; /* Disable scale effect on touch devices */
        box-shadow: none; /* Remove hover shadow */
    }

    .game-btn::before {
        display: none; /* Disable shine effect on touch devices */
    }

    .game-btn:active {
        transform: scale(0.95); /* Keep active press effect */
        background: linear-gradient(45deg, #388E3C, #4CAF50); /* Slightly darker for feedback */
    }

    .enable-btn:active {
        background: linear-gradient(45deg, #388E3C, #4CAF50);
    }

    .disable-btn:active {
        background: linear-gradient(45deg, #C62828, #D32F2F);
    }

    .direction-btn:active {
        background: linear-gradient(45deg, #1976D2, #3F8BCB);
    }
}