* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #2d1f3d 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
}

#game-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 4px solid #9d4edd;
    border-radius: 4px;
    box-shadow: 
        0 0 20px rgba(157, 78, 221, 0.5),
        0 0 40px rgba(157, 78, 221, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Touch controls for mobile */
#touch-left,
#touch-right {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 40%;
    z-index: 10;
    opacity: 0;
    touch-action: none;
}

#touch-left {
    left: 0;
}

#touch-right {
    right: 0;
}

/* Mobile touch feedback */
@media (hover: none) and (pointer: coarse) {
    #touch-left:active,
    #touch-right:active {
        background: rgba(157, 78, 221, 0.2);
    }
    
    #touch-left,
    #touch-right {
        opacity: 0.01;
    }
}

/* Prevent text selection */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Ambient glow animation */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(157, 78, 221, 0.5),
            0 0 40px rgba(157, 78, 221, 0.3),
            inset 0 0 20px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(157, 78, 221, 0.7),
            0 0 60px rgba(157, 78, 221, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.5);
    }
}

#canvas {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Scanline effect overlay */
#game-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    border-radius: 4px;
}