/* Global reset and box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars */
    /* Lunar background: Dark grey/blue with subtle stars */
    background-color: #1a1a2a;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(200, 200, 220, 0.3) 0.5px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(200, 200, 220, 0.3) 0.5px, transparent 1px),
        radial-gradient(circle at 40% 90%, rgba(180, 180, 200, 0.2) 1px, transparent 1.5px),
        radial-gradient(circle at 90% 10%, rgba(220, 220, 240, 0.2) 0.5px, transparent 1px);
    background-size: 150px 150px, 200px 200px, 100px 100px, 120px 120px; /* Different sizes */
    background-position: 0 0, 50px 50px, 25px 75px, 75px 25px; /* Offset positions */
    color: #d0d0e0; /* Light grey text */
    font-family: 'Orbitron', sans-serif; /* Futuristic font - include via @import or <link> if needed */
    /* Or fallback */
    /* font-family: 'Consolas', 'Courier New', monospace; */
}

/* Container for the p5.js canvas - center it, make it square-ish */
#canvasContainer {
    width: 90vmin; /* Use vmin to fit square within viewport */
    height: 90vmin; /* Make height same as width */
    max-width: 600px; /* Max size */
    max-height: 600px; /* Max size */
    margin: 15px auto; /* Center with less top margin */
    position: relative;
    box-shadow: 0 0 20px rgba(180, 180, 220, 0.2); /* Softer glow */
    border: 1px solid #505070; /* Grey-blue border */
    border-radius: 10px;
    overflow: hidden;
}

/* p5.js canvas styling */
canvas {
    display: block;
    width: 100%;
    height: 100%; /* Canvas should fill the square container */
}

/* Container for remote buttons */
#remote {
    text-align: center;
    padding: 10px;
    margin-top: 5px;
}

/* Remote button styling - Lunar Base theme */
.remote-button {
    padding: 8px 14px; /* Slightly wider */
    margin: 4px;
    cursor: pointer;
    background-color: #404055; /* Grey-blue base */
    color: #c0c0e0; /* Light grey text */
    border: 1px solid #707090; /* Mid-grey border */
    border-radius: 5px;
    font-family: inherit; /* Use body font */
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.remote-button:hover {
    background-color: #555570;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(200, 200, 240, 0.4);
}

.remote-button:active {
    background-color: #303040;
    color: #a0a0c0;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}