/* ===== RESET GENERAL ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Courier New', Courier, monospace, sans-serif;
    user-select:none;
}

body{

    background-color:#0d0118;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px;

    /* IMPORTANTE */
    overflow-y:auto;
    overflow-x:hidden;
}

/* ===== CONTENEDOR ===== */
.game-container{

    width:100%;

    /* MAS ANCHO */
    max-width:720px;

    background:#1e0b36;

    border:4px solid #00f0ff;

    border-radius:24px;

    box-shadow:
    0 0 35px rgba(0,240,255,0.45);

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:18px;
}

/* ===== HEADER ===== */
.river-header{

    background:
    linear-gradient(
        180deg,
        #104e8b 0%,
        #3498ff 100%
    );

    border-radius:18px;

    height:82px;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

    border:2px solid #00f0ff;

    box-shadow:
    inset 0 0 15px rgba(0,0,0,0.35);
}

.water-line{

    position:absolute;

    width:200%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
    );

    animation:wave 4s linear infinite;
}

.score-box{

    color:#ffffff;

    font-size:1.6rem;

    font-weight:bold;

    text-shadow:
    0 2px 4px rgba(0,0,0,0.6);

    z-index:2;
}

.close-btn{

    background:#ffcc00;

    color:#000;

    text-decoration:none;

    padding:10px 18px;

    font-weight:bold;

    font-size:1rem;

    border-radius:20px;

    border:2px solid #fff;

    box-shadow:
    0 2px 8px rgba(0,0,0,0.35);

    z-index:2;
}

.close-btn:active{

    transform:scale(0.95);
}

/* ===== TABLERO ===== */
.board-wrapper{

    position:relative;

    width:100%;

    /* MAS GRANDE */
    aspect-ratio:1.15;

    background:#2e8b57;

    border-radius:16px;

    overflow:hidden;

    border:3px solid #00f0ff;
}

#game-board{

    display:grid;

    grid-template-columns:
    repeat(15,1fr);

    grid-template-rows:
    repeat(15,1fr);

    width:100%;
    height:100%;
}

/* ===== CELDAS ===== */
.cell-light{
    background:#112700;
}

.cell-dark{
    background:#081700;
}

/* ===== MANZANA ===== */
.apple{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.8rem;

    line-height:1;
}

/* ===== SERPIENTE ===== */
.snake-segment{

    background:#4b0082;

    border:1px solid #2b0048;
}

.snake-head{

    background:#5b00a0;

    position:relative;

    z-index:5;

    border-radius:4px;

    overflow:visible;
}

/* ===== OJOS ===== */
.snake-head::before{

    content:"👀";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:0.8rem;
}

/* ===== LENGUA ===== */
.snake-head::after{

    content:"👅";

    position:absolute;

    font-size:0.75rem;
}

/* ARRIBA */
.head-up::before{
    transform:rotate(0deg);
}

.head-up::after{

    top:-10px;
    left:50%;

    transform:
    translateX(-50%)
    rotate(0deg);
}

/* ABAJO */
.head-down::before{
    transform:rotate(180deg);
}

.head-down::after{

    bottom:-10px;
    left:50%;

    transform:
    translateX(-50%)
    rotate(180deg);
}

/* IZQUIERDA */
.head-left::before{
    transform:rotate(270deg);
}

.head-left::after{

    left:-10px;
    top:50%;

    transform:
    translateY(-50%)
    rotate(270deg);
}

/* DERECHA */
.head-right::before{
    transform:rotate(90deg);
}

.head-right::after{

    right:-10px;
    top:50%;

    transform:
    translateY(-50%)
    rotate(90deg);
}

/* ===== OVERLAYS ===== */
.overlay{

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,0.72);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

    z-index:10;
}

.hidden{
    display:none !important;
}

.pulse-text{

    color:#00f0ff;

    font-size:1.5rem;

    font-weight:bold;

    text-transform:uppercase;

    animation:pulse 1.5s infinite;
}

.mobile-subtext{

    color:#a594bd;

    font-size:1rem;

    margin-top:10px;
}

#game-over-overlay h2{

    color:#ff0055;

    font-size:4rem;

    text-shadow:
    0 0 15px #ff0055;

    margin-bottom:25px;
}

#retry-btn{

    background:#11d9e8;

    color:#000;

    border:none;

    padding:16px 32px;

    font-size:1.3rem;

    font-weight:bold;

    border-radius:12px;

    cursor:pointer;

    text-transform:uppercase;
}

/* ===== CONTROLES ===== */
.mobile-controls{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    padding-bottom:10px;
}

.control-row{

    display:flex;

    justify-content:center;

    gap:24px;

    width:100%;
}

.d-btn{

    width:72px;
    height:72px;

    background:#2a144a;

    border:3px solid #00f0ff;

    border-radius:50%;

    color:#00f0ff;

    font-size:1.8rem;

    font-weight:bold;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 4px 0 #0099aa,
    0 4px 12px rgba(0,0,0,0.5);

    transition:0.05s;
}

.d-btn:active{

    transform:translateY(4px);

    box-shadow:none;
}

.spacer{
    width:72px;
}

/* ===== ANIMACIONES ===== */
@keyframes wave{

    0%{
        transform:translateX(-50%);
    }

    100%{
        transform:translateX(0%);
    }
}

@keyframes pulse{

    0%,100%{
        opacity:0.4;
    }

    50%{
        opacity:1;
    }
}

/* ===== CELULARES ===== */
@media (max-width:700px){

    .game-container{

        max-width:100%;
    }

    .board-wrapper{

        aspect-ratio:1;
    }

    .score-box{

        font-size:1.2rem;
    }

    .d-btn{

        width:62px;
        height:62px;

        font-size:1.5rem;
    }

    .spacer{

        width:62px;
    }

    #game-over-overlay h2{

        font-size:2.8rem;
    }

}