body{
    margin:0;
    background:linear-gradient(135deg,#0f172a,#020617);
    font-family:Arial,sans-serif;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:100vh;

    overflow:hidden;

    color:white;
}

.game-container{

    width:min(96vw,720px);

    background:#111827;

    border:3px solid #00bfff;

    border-radius:20px;

    padding:12px;

    text-align:center;

    box-shadow:
    0 0 25px rgba(0,191,255,.45);

    display:flex;
    flex-direction:column;
    align-items:center;
}

canvas{

    width:min(88vw,540px);
    height:min(88vw,540px);

    max-width:540px;
    max-height:540px;

    background:#1e1e1e;

    border:3px solid white;

    border-radius:16px;

    display:block;

    margin:auto;

    touch-action:manipulation;

    box-shadow:
    0 0 20px rgba(0,0,0,.5);
}

#message{

    min-height:28px;

    margin-top:10px;

    font-size:18px;
    font-weight:bold;

    color:#00ff88;
}

.buttons{

    margin-top:12px;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;
}

button{

    border:none;

    padding:12px 16px;

    border-radius:14px;

    font-size:15px;
    font-weight:bold;

    color:white;

    cursor:pointer;

    transition:.2s;

    background:
    linear-gradient(145deg,#0a84ff,#005ecb);

    box-shadow:
    0 4px 12px rgba(0,0,0,.4);
}

button:active{
    transform:scale(.95);
}

#pauseBtn{

    background:
    linear-gradient(145deg,#ff9500,#ff6a00);
}

#fullscreenBtn{

    background:
    linear-gradient(145deg,#00c853,#009624);
}

/* FULLSCREEN */

.game-container:fullscreen{

    width:100vw;
    height:100vh;

    border:none;
    border-radius:0;

    padding:8px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.game-container:fullscreen canvas{

    width:min(94vw,74vh);
    height:min(94vw,74vh);

    max-width:none;
    max-height:none;
}

/* MÓVIL VERTICAL */

@media (max-width:700px){

    canvas{

        width:min(92vw,92vw);
        height:min(92vw,92vw);
    }

    button{

        padding:10px 14px;

        font-size:14px;
    }
}