body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eee;
}

.canvas-wrapper {
  width: 90vmin;
  height: 90vmin;
  max-width: 600px;
  max-height: 600px;
}

canvas {
  width: 100%;
  height: 100%;
  border: 2px solid #333;
  background-color: #fff;
}
body {
        background-color: black;
        margin: 0;
        padding: 0;
        font-family: "Courier New", monospace;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: white;
    }

    .container {
        text-align: center;
        padding: 40px;
        border: 4px solid #ff4a3b;
        width: 600px;
        background: rgba(0, 0, 0, 0.85);
        box-shadow: 0 0 25px red;
    }

    /* Título estilo ladrillo */
    .title {
        font-size: 60px;
        color: #ff4a3b;
        letter-spacing: 8px;
        font-weight: bold;
        text-shadow: 3px 3px 0 #70241d;
        margin-bottom: 30px;
    }

    /* Tanque pixel art hecho con CSS */
    .tank {
        width: 60px;
        height: 60px;
        margin: 0 auto 25px;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }

    .tank div {
        background: #c0c0c0;
    }

    /* Representación manual del tanque */
    .tank div:nth-child(n+1):nth-child(-n+8),
    .tank div:nth-child(9), .tank div:nth-child(16),
    .tank div:nth-child(49), .tank div:nth-child(56),
    .tank div:nth-child(n+57):nth-child(-n+64) {
        background: transparent;
    }

    /* Botón JUGAR AHORA */
    .start-btn {
        display: inline-block;
        padding: 12px 30px;
        margin-top: 20px;
        background: yellow;
        color: black;
        font-size: 26px;
        font-weight: bold;
        text-decoration: none;
        border: 3px solid orange;
        border-radius: 6px;
        box-shadow: 0 0 12px yellow;
        transition: 0.2s;
        animation: blink 1s infinite step-end;
    }

    .start-btn:hover {
        background: white;
        transform: scale(1.1);
        box-shadow: 0 0 15px white;
    }

    /* Texto de copyright */
    .footer {
        margin-top: 35px;
        font-size: 14px;
        color: #bbbbbb;
    }

    /* Animación tipo parpadeo retro */
    @keyframes blink {
        50% { opacity: 0; }
    }

    /* Bordes tipo "marco de ladrillos" */
    .border-bricks {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 25px;
        background: repeating-linear-gradient(
            90deg,
            #ff4a3b,
            #ff4a3b 25px,
            #70241d 25px,
            #70241d 50px
        );
    }

    .border-bricks-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 25px;
        background: repeating-linear-gradient(
            90deg,
            #ff4a3b,
            #ff4a3b 25px,
            #70241d 25px,
            #70241d 50px
        );
    }
    #lives {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 28px;   /* tamaño grande para los corazones */
  font-family: Arial, sans-serif;
  color: red;        /* color rojo para resaltar */
}