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

body {
    margin: 0;
    background: #0e0e1a;
    font-family: 'Press Start 2P', monospace;
    color: #f9d66b;
    text-align: center;
    overflow-x: hidden;
    position: relative;
}

.container {
    padding: 20px;
    max-width: 800px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.logo {
    width: 120px;
    max-width: 30%;
    margin-top: 20px;
}

.title {
    font-size: 18px;
    margin-top: 20px;
    color: #ffcc33;
}

.subtitle {
    font-size: 12px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.scoreboard {
    margin: 15px 0;
    font-size: 9px;
    color: #ffa552;
}

#highscoreName {
    color: #ff3b3b;
    font-weight: bold;
    animation: blink-red 1s steps(2, start) infinite;
}

@keyframes blink-red {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.4; }
}


.game-wrapper {
    position: relative;
    width: 95%;
    max-width: 320px;
    margin: 15px auto 0 auto;
}

canvas {
    background: #111;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;

    border: 4px solid #ffcc33;
    border-radius: 20px;

    box-shadow:
        0 0 20px rgba(255, 204, 51, 0.4),
        0 0 60px rgba(0, 0, 0, 0.9);

    position: relative;
    overflow: hidden;
}

canvas::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0,
        rgba(255,255,255,0.02) 2px,
        rgba(0,0,0,0.15) 4px
    );

    mix-blend-mode: overlay;
}

canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.08) 0%,
        rgba(0,0,0,0.5) 90%
    );

    border-radius: 20px;
}

.restart-btn {
    margin-top: 15px;
    padding: 10px 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    border: none;
    border-radius: 4px;
    background: #ff5b5b;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: none;
}

.restart-btn:hover {
    filter: brightness(1.1);
}

.name-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

@keyframes arcadePop {
    0% {
        transform: scale(0.2) rotate(-4deg);
        filter: brightness(0.3);
    }
    60% {
        transform: scale(1.15) rotate(1deg);
        filter: brightness(1.4);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.name-modal-content {
    background: #0e0e1a;
    border: 3px solid #ffcc33;
    border-radius: 12px;
    padding: 15px;
    max-width: 260px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 0 12px #ffcc33,
        0 0 30px rgba(255,204,51,0.5),
        0 0 4px #ffcc33 inset;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ffcc33;

    transform: translateY(-12vh);
    animation: arcadePop 0.35s ease-out;
}

.name-modal-content input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    font-family: inherit;
    font-size: 10px;
    border-radius: 6px;
    border: 1px solid #ffcc33;
    background: #111;
    color: #f9f9f9;
    text-align: center;
}

.name-modal-content button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: #ff5b5b;
    color: #111;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 6px rgba(255,90,90,0.6);
}

.name-modal-content button:hover {
    filter: brightness(1.1);
}

.mute-btn {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 36px;
    height: 36px;

    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url('img/on.png');
    z-index: 20;
}

.mute-btn:hover {
    filter: brightness(1.1);
}

.mute-btn.is-muted {
    background-image: url('img/off.png');
}

@media (max-width: 600px) {
    .mute-btn {
        top: 6px;
        right: 6px;
        width: 25px;
        height: 25px;
    }
}



.retro-footer.fun.mini {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ffcc33;
    text-align: center;
    padding: 10px 0 18px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0e0e1a;
    border-top: 2px solid #ffcc33;
    letter-spacing: 1px;
    z-index: 999;
}

.retro-footer.fun.mini .insert-coin {
    display: block;
    margin-bottom: 4px;
    animation: coin-blink 0.9s steps(2, start) infinite;
}

.retro-footer.fun.mini .footer-copy {
    display: block;
    font-size: 6px;
    opacity: 0.8;
}

@keyframes coin-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.retro-footer.fun.mini::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background-image: repeating-linear-gradient(
        to right,
        #ffcc33 0,
        #ffcc33 6px,
        #ffa552 6px,
        #ffa552 12px,
        #ff6d3a 12px,
        #ff6d3a 18px
    );
    image-rendering: pixelated;
}

@media (max-width: 600px) {
    .retro-footer.fun.mini {
        bottom: 20px;
        padding: 8px 0 14px;
    }

    .retro-footer.fun.mini::after {
        bottom: -3px;
        height: 4px;
    }

    .container {
        padding-bottom: 70px !important;
    }

    #restartBtn {
        margin-bottom: 30px;
    }
}

.pixel-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sprite {
    position: absolute;
    width: 42px;
    height: 42px;
    image-rendering: pixelated;
    opacity: 0.6;
    --scale: 7;
}

.sprite-duck,
.sprite-warrior,
.sprite-princess,
.sprite-slime,
.sprite-heart {
    --scale: 8;
}

.sprite-dragon,
.sprite-robot,
.sprite-alien,
.sprite-coin,
.sprite-wizard,
.sprite-knight,
.sprite-cat,
.sprite-ship {
    --scale: 7.5;
}

.sprite::before {
    content: "";
    display: block;
    width: 1px;
    height: 1px;
    transform-origin: top left;
    transform: scale(var(--scale));
}

/* 🦆 PATO PIXEL */
.sprite-duck::before {
    box-shadow:
      3px 6px #263238,
      4px 6px #263238,
      2px 7px #263238,
      3px 7px #ffeb3b,
      4px 7px #ffeb3b,
      5px 7px #263238,
      1px 8px #263238,
      2px 8px #ffeb3b,
      3px 8px #ffeb3b,
      4px 8px #ffeb3b,
      5px 8px #263238,
      2px 9px #ffeb3b,
      3px 9px #ffeb3b,
      4px 9px #ffeb3b,
      5px 9px #ff9800,
      1px 10px #263238,
      2px 10px #ffeb3b,
      3px 10px #ffeb3b,
      4px 10px #ff9800,
      5px 10px #ff9800,
      6px 10px #263238;
}

/* ⚔️ GUERRERO PIXEL */
.sprite-warrior::before {
    box-shadow:
      3px 2px #cfd8dc,
      4px 2px #cfd8dc,
      3px 3px #cfd8dc,
      4px 3px #90a4ae,
      2px 4px #5d4037,
      3px 4px #ffcc80,
      4px 4px #ffcc80,
      5px 4px #5d4037,
      2px 5px #5d4037,
      3px 5px #ffcc80,
      4px 5px #ffcc80,
      5px 5px #5d4037,
      2px 6px #263238,
      3px 6px #455a64,
      4px 6px #455a64,
      5px 6px #263238,
      2px 7px #263238,
      3px 7px #78909c,
      4px 7px #78909c,
      5px 7px #263238,
      2px 8px #263238,
      3px 8px #546e7a,
      4px 8px #546e7a,
      5px 8px #263238,
      2px 9px #263238,
      3px 9px #d32f2f,
      4px 9px #d32f2f,
      5px 9px #263238;
}

/* 👑 PRINCESA PIXEL */
.sprite-princess::before {
    box-shadow:
      3px 1px #fdd835,
      4px 1px #fdd835,
      2px 2px #fbc02d,
      3px 2px #fdd835,
      4px 2px #fdd835,
      5px 2px #fbc02d,
      2px 3px #5d4037,
      3px 3px #ffccbc,
      4px 3px #ffccbc,
      5px 3px #5d4037,
      2px 4px #5d4037,
      3px 4px #ffccbc,
      4px 4px #ffccbc,
      5px 4px #5d4037,
      2px 5px #ab47bc,
      3px 5px #ce93d8,
      4px 5px #ce93d8,
      5px 5px #ab47bc,
      2px 6px #8e24aa,
      3px 6px #ba68c8,
      4px 6px #ba68c8,
      5px 6px #8e24aa,
      2px 7px #8e24aa,
      3px 7px #ba68c8,
      4px 7px #ba68c8,
      5px 7px #8e24aa;
}

/* 👾 SLIME / MONSTRUO */
.sprite-slime::before {
    box-shadow:
      2px 4px #1b5e20,
      3px 4px #2e7d32,
      4px 4px #2e7d32,
      5px 4px #1b5e20,
      1px 5px #1b5e20,
      2px 5px #43a047,
      3px 5px #66bb6a,
      4px 5px #66bb6a,
      5px 5px #43a047,
      6px 5px #1b5e20,
      1px 6px #1b5e20,
      2px 6px #66bb6a,
      3px 6px #000000,
      4px 6px #000000,
      5px 6px #66bb6a,
      6px 6px #1b5e20,
      2px 7px #43a047,
      3px 7px #66bb6a,
      4px 7px #66bb6a,
      5px 7px #43a047;
}

/* ❤️ CORAZÓN PIXEL */
.sprite-heart::before {
    box-shadow:
      2px 2px #c62828,
      3px 2px #e53935,
      4px 2px #e53935,
      5px 2px #c62828,
      1px 3px #c62828,
      2px 3px #e53935,
      3px 3px #ff5252,
      4px 3px #ff5252,
      5px 3px #e53935,
      6px 3px #c62828,
      1px 4px #c62828,
      2px 4px #e53935,
      3px 4px #ff5252,
      4px 4px #ff5252,
      5px 4px #e53935,
      6px 4px #c62828,
      2px 5px #e53935,
      3px 5px #ff5252,
      4px 5px #ff5252,
      5px 5px #e53935,
      3px 6px #e53935,
      4px 6px #e53935;
}

/* 🐉 DRAGÓN PIXEL */
.sprite-dragon::before {
    box-shadow:
      4px 2px #4e342e,
      5px 2px #6d4c41,
      6px 2px #6d4c41,
      7px 2px #4e342e,

      3px 3px #4e342e,
      4px 3px #8d6e63,
      5px 3px #a1887f,
      6px 3px #a1887f,
      7px 3px #8d6e63,
      8px 3px #4e342e,

      3px 4px #4e342e,
      4px 4px #a1887f,
      5px 4px #d32f2f,
      6px 4px #d32f2f,
      7px 4px #a1887f,
      8px 4px #4e342e,

      4px 5px #4e342e,
      5px 5px #a1887f,
      6px 5px #ff5252,
      7px 5px #ff5252,
      8px 5px #a1887f,

      4px 6px #4e342e,
      5px 6px #a1887f,
      6px 6px #d32f2f,
      7px 6px #d32f2f,
      8px 6px #4e342e,

      5px 7px #4e342e,
      6px 7px #6d4c41,
      7px 7px #6d4c41,
      8px 7px #4e342e;
}

/* 🤖 ROBOT PIXEL */
.sprite-robot::before {
    box-shadow:
      4px 2px #90a4ae,
      5px 2px #cfd8dc,
      6px 2px #90a4ae,

      3px 3px #455a64,
      4px 3px #cfd8dc,
      5px 3px #ff5252,
      6px 3px #29b6f6,
      7px 3px #cfd8dc,
      8px 3px #455a64,

      3px 4px #455a64,
      4px 4px #cfd8dc,
      5px 4px #cfd8dc,
      6px 4px #cfd8dc,
      7px 4px #cfd8dc,
      8px 4px #455a64,

      4px 5px #455a64,
      5px 5px #29b6f6,
      6px 5px #29b6f6,
      7px 5px #455a64,

      4px 7px #455a64,
      5px 7px #90a4ae,
      6px 7px #90a4ae,
      7px 7px #455a64;
}

/* 👾 ALIEN PIXEL */
.sprite-alien::before {
    box-shadow:
      3px 3px #00e676,
      4px 3px #00e676,
      5px 3px #00e676,
      6px 3px #00e676,

      2px 4px #00e676,
      3px 4px #1b5e20,
      4px 4px #00e676,
      5px 4px #00e676,
      6px 4px #1b5e20,
      7px 4px #00e676,

      2px 5px #00e676,
      3px 5px #00e676,
      4px 5px #00e676,
      5px 5px #00e676,
      6px 5px #00e676,
      7px 5px #00e676,

      3px 6px #00e676,
      6px 6px #00e676;
}

/* 🪙 MONEDA PIXEL */
.sprite-coin::before {
    box-shadow:
      3px 2px #ffeb3b,
      4px 2px #fbc02d,
      5px 2px #ffeb3b,

      2px 3px #ffc107,
      3px 3px #ffeb3b,
      4px 3px #f57f17,
      5px 3px #ffeb3b,
      6px 3px #ffc107,

      3px 4px #f57f17,
      4px 4px #ffeb3b,
      5px 4px #f57f17,

      2px 5px #ffc107,
      3px 5px #ffeb3b,
      4px 5px #f57f17,
      5px 5px #ffeb3b,
      6px 5px #ffc107,

      3px 6px #ffeb3b,
      4px 6px #fbc02d,
      5px 6px #ffeb3b;
}

/* 🧙 MAGO PIXEL */
.sprite-wizard::before {
    box-shadow:
      4px 1px #3e2723,
      5px 1px #3e2723,

      3px 2px #5d4037,
      4px 2px #ffcc80,
      5px 2px #ffcc80,
      6px 2px #5d4037,

      3px 3px #5d4037,
      4px 3px #ffcc80,
      5px 3px #ffcc80,
      6px 3px #5d4037,

      3px 4px #1e88e5,
      4px 4px #64b5f6,
      5px 4px #64b5f6,
      6px 4px #1e88e5,

      3px 5px #0d47a1,
      4px 5px #1976d2,
      5px 5px #1976d2,
      6px 5px #0d47a1;
}

/* 🗡️ CABALLERO PIXEL */
.sprite-knight::before {
    box-shadow:
      3px 2px #c5cae9,
      4px 2px #e8eaf6,
      5px 2px #c5cae9,

      2px 3px #3e2723,
      3px 3px #ffcc80,
      4px 3px #ffcc80,
      5px 3px #ffcc80,
      6px 3px #3e2723,

      3px 4px #3f51b5,
      4px 4px #303f9f,
      5px 4px #3f51b5;
}

/* 🐱 GATO PIXEL */
.sprite-cat::before {
    box-shadow:
      3px 2px #000000,
      4px 2px #000000,
      5px 2px #000000,

      2px 3px #000000,
      3px 3px #ffffff,
      4px 3px #000000,
      5px 3px #ffffff,
      6px 3px #000000,

      3px 4px #ffffff,
      4px 4px #000000,
      5px 4px #ffffff,

      3px 5px #000000,
      4px 5px #000000,
      5px 5px #000000;
}

/* 🚀 NAVE PIXEL */
.sprite-ship::before {
    box-shadow:
      4px 2px #90caf9,
      5px 2px #90caf9,

      3px 3px #42a5f5,
      4px 3px #e3f2fd,
      5px 3px #e3f2fd,
      6px 3px #42a5f5,

      4px 4px #ff5252,
      5px 4px #ff5252,

      4px 5px #ff1744,
      5px 5px #ff1744;
}