@font-face {
    font-family: 'C64';
    src: url('data:font/woff2;base64,') format('woff2');
}

body {
    margin: 0;
    padding: 0;
    /* Amiga Workbench-inspired gradient background */
    background: linear-gradient(135deg, #0044AA 0%, #0066CC 25%, #0088EE 50%, #00AAFF 75%, #44CCFF 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    overflow: hidden;
    /* Add animated gradient effect */
    background-size: 400% 400%;
    animation: amigaGradient 15s ease infinite;
}

@keyframes amigaGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#game-container {
    position: relative;
    border: 20px solid #2A4F7F;
    /* Professional Amiga-style beveled border effect */
    border-style: ridge;
    box-shadow: 
        0 0 50px rgba(68, 136, 255, 0.5),
        inset 0 0 20px rgba(68, 136, 255, 0.2),
        0 0 100px rgba(68, 136, 255, 0.3);
    background: #000000;
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    max-height: 900px;
    /* Add subtle animation to the container */
    animation: amigaPulse 4s ease-in-out infinite;
}

@keyframes amigaPulse {
    0%, 100% { 
        box-shadow: 
            0 0 50px rgba(68, 136, 255, 0.5),
            inset 0 0 20px rgba(68, 136, 255, 0.2),
            0 0 100px rgba(68, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 60px rgba(68, 136, 255, 0.7),
            inset 0 0 30px rgba(68, 136, 255, 0.3),
            0 0 120px rgba(68, 136, 255, 0.4);
    }
}

canvas {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}