html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* prevents scroll gaps */
    background: radial-gradient(circle at center, #1a1033 0%, #05040a 70%, #000 100%);
}

/* make body the centering container */
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* OUTER CONSOLE BODY */
.emscripten_border {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    /* colorful PICO-ish plastic shell */
    background: linear-gradient(145deg, #ffcc00, #ff6b6b 40%, #7b61ff 100%);
    /* soft neon-ish glow */
    box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 8px #2a2a2a, 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(123, 97, 255, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: consoleGlow 6s ease-in-out infinite alternate;
}

    /* INNER SCREEN BEZEL */
    .emscripten_border::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 12px;
        background: linear-gradient(145deg, #111, #000);
        box-shadow: inset 0 0 0 2px #000, inset 0 0 25px rgba(0, 0, 0, 0.9), inset 0 0 10px rgba(255, 204, 0, 0.08);
        pointer-events: none;
    }

/* CANVAS SCREEN */
canvas.emscripten {
    display: block;
    border-radius: 6px;
    /* makes pixel art pop */
    image-rendering: pixelated;
    background: #000;
    /* subtle “game glow” */
    box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 107, 107, 0.15), 0 0 30px rgba(123, 97, 255, 0.12);
    filter: contrast(1.1) saturate(1.25);
}

/* subtle breathing animation */
@keyframes consoleGlow {
    0% {
        box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 8px #2a2a2a, 0 20px 50px rgba(0,0,0,0.6), 0 0 25px rgba(255, 107, 107, 0.15);
    }

    100% {
        box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 8px #2a2a2a, 0 25px 60px rgba(0,0,0,0.7), 0 0 45px rgba(123, 97, 255, 0.28);
    }
}

.emscripten_controls {
    display: none;
}