body {
    margin: 0;
    overflow: hidden;
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    background-color: #3A8DDE; /* Vibrant blue background */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: -webkit-fill-available; /* For iOS Safari full height */
    touch-action: none; /* Prevent default touch actions like scrolling and zooming */
    overscroll-behavior: none; /* Prevent pull-to-refresh or overscroll navigation */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Disable callout on iOS */
}

#scoreBoard, #highScoreBoard {
    position: absolute;
    top: 10px;
    font-size: clamp(16px, 4vw, 24px); /* Responsive font size */
    z-index: 10;
    background-color: rgba(0,0,0,0.7); /* Improved contrast */
    padding: 8px 15px; /* Increased padding */
    border-radius: 8px; /* Softer corners */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Text shadow for readability */
    font-weight: bold;
    backdrop-filter: blur(4px); /* Modern blur effect */
    border: 1px solid rgba(255,255,255,0.1); /* Subtle border */
}

#scoreBoard {
    left: 10px;
}

#highScoreBoard {
    right: 10px;
}

#gameCanvas {
    border: 4px solid #2c3e50; /* Darker, thicker border */
    box-shadow: 0 0 20px rgba(0,0,0,0.6); /* Stronger shadow */
    background-color: #3498db; /* Temporary blue, lanes will cover this */
    image-rendering: -webkit-optimize-contrast; /* Improve pixel art rendering */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#gameOverScreen, #startScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(40, 40, 40, 0.95); /* Improved opacity */
    padding: clamp(25px, 6vw, 40px); /* Increased responsive padding */
    border-radius: 15px; /* More rounded corners */
    text-align: center;
    z-index: 20;
    color: #ecf0f1; /* Light gray text */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* More pronounced shadow */
    width: 85%; /* Slightly wider */
    max-width: 450px; /* Increased max-width */
    backdrop-filter: blur(8px); /* Modern blur effect */
    border: 1px solid rgba(255,255,255,0.1); /* Subtle border */
}

#gameOverScreen h1, #startScreen h1 {
    font-size: clamp(28px, 7vw, 48px); /* Larger, more impactful titles */
    margin-top: 0;
    margin-bottom: 15px; /* More space below title */
    text-shadow: 3px 3px 0px rgba(0,0,0,0.25); /* Deeper text shadow */
}

#startScreen h1 {
    color: #FFD700; /* Brighter Gold */
}

#gameOverScreen h1 {
    color: #FF4C4C; /* Brighter Red */
}

#gameOverScreen p, #startScreen p {
    font-size: clamp(15px, 3.8vw, 21px); /* Adjusted font size */
    margin-bottom: 25px; /* More space below paragraphs */
    line-height: 1.5; /* Improved readability */
}

#startScreen p { /* Specifically for "Swipe or Tap to Move" */
    color: #bdc3c7; /* Light silver/gray for instructional text */
}

#gameOverScreen p:last-child { /* Specifically for "Tap to Restart" */
    font-weight: bold;
    color: #FFD700; /* Gold, like a call to action */
    font-size: clamp(17px, 4.2vw, 23px); /* Slightly larger */
    animation: pulseRestartText 1.5s infinite ease-in-out;
}

#startScreen button {
    padding: 15px 30px; /* Larger button */
    font-size: clamp(17px, 4.2vw, 23px); /* Larger font */
    background-color: #2ecc71; /* Emerald Green */
    color: white;
    border: none;
    border-radius: 10px; /* More rounded */
    cursor: pointer;
    box-shadow: 0 5px #27ae60; /* Deeper shadow */
    transition: all 0.2s ease; /* Smooth transitions */
    font-weight: bold;
    min-width: 140px; /* Minimum button width */
}

#startScreen button:hover {
    background-color: #27ae60; /* Hover effect for desktop */
    transform: translateY(-2px); /* Lift effect */
}

#startScreen button:active {
    background-color: #27ae60; /* Darker green when pressed */
    transform: translateY(3px); /* More pronounced press effect */
    box-shadow: 0 2px #27ae60; /* Adjusted shadow on press */
}

#startScreen button:disabled {
    background-color: #7f8c8d; /* Gray when disabled */
    box-shadow: 0 5px #6c7b7d;
    cursor: not-allowed;
}

/* Add styles for lives display */
#livesContainer {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.heart {
    width: 28px; /* Slightly larger */
    height: 28px;
    background-color: #e74c3c;
    clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
    animation: pulse 1.5s infinite ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); /* Shadow for depth */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Hide scrollbars for all elements */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    box-sizing: border-box; /* Better box model */
}
*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

@keyframes pulseRestartText {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes hitEffect {
    0% { 
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 4px;
    }
    100% { 
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes coinCollect {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes scorePopup {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.15); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes hitShake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 4px); }
    50% { transform: translate(4px, -4px); }
    75% { transform: translate(-4px, 4px); }
    100% { transform: translate(0, 0); }
}

@keyframes waterRipple {
    0% { 
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
        border-width: 2px;
    }
    100% { 
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes fadeOut {
    0% { opacity: 1; transform: scale(1); }
    75% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9); }
}

/* Performance optimizations */
.heart, 
#gameCanvas,
#scoreBoard,
#highScoreBoard {
    will-change: transform; /* Optimize for animations */
}

/* Improved mobile responsiveness */
@media (max-width: 480px) {
    #scoreBoard, #highScoreBoard {
        font-size: 14px;
        padding: 6px 12px;
    }
    
    .heart {
        width: 24px;
        height: 24px;
    }
    
    #gameOverScreen, #startScreen {
        width: 90%;
        padding: 20px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #gameCanvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
}