@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-color: #F8EFE5;
    background-image: linear-gradient(to right, rgba(210, 200, 190, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(210, 200, 190, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: 'Press Start 2P', cursive;
    margin: 0; padding: 0;
    display: flex; justify-content: center;
    color: #4a4a4a; overflow-x: hidden;
}

.container {
    width: 100%; max-width: 800px;
    text-align: center; padding: 20px;
}

.main-logo { width: 180px; height: auto; margin-bottom: 10px; }

.pixel-text { font-size: 14px; color: #b08d57; margin: 10px 0; }
.separator { border-top: 3px double #b08d57; padding-top: 15px; }

.game-container {
    position: relative;
    border: 5px solid #4a90e2;
    background: #010a1f; /* Fondo oscuro espacio */
    margin: 20px auto;
    width: 100%; height: 400px; /* Tamaño base */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

#gameCanvas { width: 100%; height: 100%; display: block; }

#ui {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; justify-content: space-between;
    color: #fff; font-size: 10px; pointer-events: none;
}

#msg {
    position: absolute; bottom: 10px; width: 100%;
    color: #fff; font-size: 8px; opacity: 0.7; pointer-events: none;
}

.small { font-size: 8px; margin-top: 20px; }