/*
 * ================================================================
 * 2048 INFINITE
 * ESTILOS PRINCIPALES
 * ================================================================
 */


/* ================================================================
   VARIABLES
   ================================================================ */

:root {

    --background:
        #faf8ef;

    --surface:
        #ffffff;

    --board:
        #bbada0;

    --empty-tile:
        rgba(238, 228, 218, 0.35);

    --text:
        #776e65;

    --text-light:
        #f9f6f2;

    --primary:
        #8f7a66;

    --secondary:
        #eee4da;

    --border:
        #e6e1d8;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --radius:
        18px;

    --max-width:
        900px;
}


/* ================================================================
   RESETEO
   ================================================================ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


/* ================================================================
   HTML
   ================================================================ */

html {

    scroll-behavior: smooth;
}


/* ================================================================
   BODY
   ================================================================ */

body {

    min-height: 100vh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    overflow-x: hidden;

    /*
     * Evita comportamientos extraños durante los gestos
     * táctiles que añadiremos posteriormente.
     */
    touch-action: manipulation;
}


/* ================================================================
   APLICACIÓN
   ================================================================ */

#app {

    width: 100%;

    max-width:
        var(--max-width);

    min-height: 100vh;

    margin: 0 auto;

    padding:
        30px 20px 40px;

    display: flex;

    flex-direction: column;
}


/* ================================================================
   ENCABEZADO
   ================================================================ */

.game-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 20px;

    margin-bottom: 25px;
}


.header-title {

    display: flex;

    flex-direction: column;
}


.game-title {

    font-size:
        clamp(2.2rem, 6vw, 4rem);

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        -2px;
}


.game-subtitle {

    margin-top: 8px;

    color:
        #9b928a;

    font-size:
        0.9rem;
}


/* ================================================================
   JUGADOR
   ================================================================ */

.player-info {

    padding:
        12px 18px;

    background:
        var(--surface);

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    display: flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    min-width:
        120px;
}


.player-label {

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    color:
        #a49b94;
}


.player-name {

    margin-top:
        3px;

    font-size:
        1rem;

    font-weight:
        700;
}


/* ================================================================
   INFORMACIÓN DE LA PARTIDA
   ================================================================ */

.game-info {

    display: grid;

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

    gap: 12px;

    margin-bottom:
        20px;
}


.info-card {

    padding:
        12px;

    background:
        var(--surface);

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    text-align:
        center;
}


.info-label {

    display: block;

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    color:
        #a49b94;
}


.info-value {

    display: block;

    margin-top:
        3px;

    font-size:
        1.4rem;

    font-weight:
        800;
}


/* ================================================================
   CONTENEDOR DEL JUEGO
   ================================================================ */

.game-container {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;
}


/* ================================================================
   TABLERO
   ================================================================ */

.game-board {

    /*
     * El tablero será cuadrado.
     */
    width:
        min(90vw, 500px);

    aspect-ratio:
        1 / 1;

    padding:
        10px;

    background:
        var(--board);

    border-radius:
        var(--radius);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15);

    display: grid;

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

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

    gap:
        10px;

    /*
     * Muy importante para móviles:
     * evita que el navegador interprete el deslizamiento
     * como scroll de la página.
     */
    touch-action:
        none;

    user-select:
        none;
}


/* ================================================================
   CELDAS DEL TABLERO
   ================================================================ */

/* ================================================================
   FICHAS DEL JUEGO
   ================================================================ */

/*
 * Todas las fichas utilizan esta configuración base.
 *
 * IMPORTANTE:
 * Actualmente game.js solamente coloca el número dentro de la
 * ficha. En un paso posterior añadiremos clases como:
 *
 *     tile-2
 *     tile-4
 *     tile-8
 *     tile-16
 *     ...
 *
 * para que cada valor pueda tener su diseño individual.
 */

.tile {

    /* ============================================================
       POSICIONAMIENTO
       ============================================================ */

    display: flex;

    justify-content: center;

    align-items: center;


    /* ============================================================
       APARIENCIA BASE
       ============================================================ */

    background:
        rgba(238, 228, 218, 0.35);

    color:
        #776e65;


    /* ============================================================
       FORMA
       ============================================================ */

    border-radius:
        10px;


    /* ============================================================
       TIPOGRAFÍA
       ============================================================ */

    font-size:
        clamp(1.7rem, 7vw, 3.2rem);

    font-weight:
        900;

    line-height:
        1;


    /* ============================================================
       COMPORTAMIENTO
       ============================================================ */

    user-select:
        none;

    -webkit-user-select:
        none;

    /*
     * Evita que el navegador intente seleccionar
     * el número mientras jugamos.
     */
    -webkit-touch-callout:
        none;


    /* ============================================================
       TRANSICIONES
       ============================================================ */

    transition:

        transform 0.12s ease,

        background-color 0.12s ease,

        color 0.12s ease,

        box-shadow 0.12s ease;
}

/* ================================================================
   ESTILOS TEMPORALES PARA LAS FICHAS
   ================================================================ */

/*
 * Estas clases todavía no están siendo asignadas automáticamente
 * por game.js.
 *
 * Las dejamos preparadas para el siguiente paso.
 */


/* ================================================================
   FICHA 2
   ================================================================ */

.tile.tile-2 {

    background:
        #eee4da;

    color:
        #776e65;
}


/* ================================================================
   FICHA 4
   ================================================================ */

.tile.tile-4 {

    background:
        #ede0c8;

    color:
        #776e65;
}


/* ================================================================
   FICHA 8
   ================================================================ */

.tile.tile-8 {

    background:
        #f2b179;

    color:
        #f9f6f2;
}


/* ================================================================
   FICHA 16
   ================================================================ */

.tile.tile-16 {

    background:
        #f59563;

    color:
        #f9f6f2;
}


/* ================================================================
   FICHA 32
   ================================================================ */

.tile.tile-32 {

    background:
        #f67c5f;

    color:
        #f9f6f2;
}


/* ================================================================
   FICHA 64
   ================================================================ */

.tile.tile-64 {

    background:
        #f65e3b;

    color:
        #f9f6f2;
}


/* ================================================================
   FICHA 128
   ================================================================ */

.tile.tile-128 {

    background:
        #edcf72;

    color:
        #f9f6f2;

    font-size:
        clamp(1.4rem, 6vw, 2.6rem);
}


/* ================================================================
   FICHA 256
   ================================================================ */

.tile.tile-256 {

    background:
        #edcc61;

    color:
        #f9f6f2;

    font-size:
        clamp(1.4rem, 6vw, 2.6rem);
}


/* ================================================================
   FICHA 512
   ================================================================ */

.tile.tile-512 {

    background:
        #edc850;

    color:
        #f9f6f2;

    font-size:
        clamp(1.3rem, 5.5vw, 2.4rem);
}


/* ================================================================
   FICHA 1024
   ================================================================ */

.tile.tile-1024 {

    background:
        #edc53f;

    color:
        #f9f6f2;

    font-size:
        clamp(1.1rem, 5vw, 2.1rem);
}


/* ================================================================
   FICHA 2048
   ================================================================ */

.tile.tile-2048 {

    background:
        #edc22e;

    color:
        #f9f6f2;

    font-size:
        clamp(1.1rem, 5vw, 2.1rem);

    box-shadow:
        0 0 25px rgba(237, 194, 46, 0.55);
}


/* ================================================================
   FICHAS SUPERIORES A 2048
   ================================================================ */

/*
 * Y aquí viene algo importante para nuestro proyecto.
 *
 * Como nuestro juego será INFINITO, no podemos crear manualmente
 * una clase para cada número imaginable.
 *
 * Posteriormente JavaScript utilizará un estilo especial para
 * valores superiores a 2048.
 */

.tile.tile-super {

    background:
        #3c3a32;

    color:
        #f9f6f2;

    font-size:
        clamp(0.9rem, 4vw, 1.8rem);

    box-shadow:
        0 0 20px rgba(60, 58, 50, 0.45);
}


/* ================================================================
   EFECTO AL CREAR UNA FICHA
   ================================================================ */

@keyframes tileAppear {

    0% {

        transform:
            scale(0);

        opacity:
            0;
    }

    70% {

        transform:
            scale(1.12);

        opacity:
            1;
    }

    100% {

        transform:
            scale(1);
    }
}


/*
 * Esta clase será añadida posteriormente por JavaScript
 * cuando aparezca una nueva ficha.
 */

.tile.tile-new {

    animation:
        tileAppear 0.15s ease-out;
}


/* ================================================================
   EFECTO AL COMBINAR
   ================================================================ */

@keyframes tileMerge {

    0% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.18);
    }

    100% {

        transform:
            scale(1);
    }
}


/*
 * Preparado para las combinaciones.
 */

.tile.tile-merged {

    animation:
        tileMerge 0.15s ease-out;
}


/* ================================================================
   INDICACIÓN DE CONTROLES
   ================================================================ */

.controls-hint {

    margin-top:
        18px;

    text-align:
        center;

    font-size:
        0.85rem;

    line-height:
        1.6;

    color:
        #9b928a;
}


/* ================================================================
   BOTONES
   ================================================================ */

.game-actions {

    display: flex;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        25px;

    flex-wrap:
        wrap;
}


.primary-button,
.secondary-button {

    min-height:
        48px;

    padding:
        12px 22px;

    border:
        none;

    border-radius:
        12px;

    font-size:
        0.95rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.primary-button {

    background:
        var(--primary);

    color:
        var(--text-light);
}


.secondary-button {

    background:
        var(--secondary);

    color:
        var(--text);
}


.primary-button:hover,
.secondary-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.12);
}


.primary-button:active,
.secondary-button:active {

    transform:
        translateY(0);

    opacity:
        0.9;
}


/* ================================================================
   PROGRESO DEL NIVEL
   ================================================================ */

.level-progress {

    margin-top:
        25px;

    padding:
        18px;

    background:
        var(--surface);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.level-progress-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        10px;

    font-size:
        0.85rem;
}


.progress-bar {

    width:
        100%;

    height:
        10px;

    overflow:
        hidden;

    background:
        #eee4da;

    border-radius:
        999px;
}


.progress-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--primary);

    border-radius:
        inherit;

    transition:
        width 0.3s ease;
}


/* ================================================================
   PIE DE PÁGINA
   ================================================================ */

.game-footer {

    margin-top:
        35px;

    text-align:
        center;

    font-size:
        0.75rem;

    line-height:
        1.6;

    color:
        #a49b94;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 700px) {

    #app {

        padding:
            20px 15px 30px;
    }


    .game-header {

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }


    .player-info {

        align-items:
            center;
    }


    .game-board {

        width:
            min(94vw, 500px);

        gap:
            8px;

        padding:
            8px;
    }
}


/* ================================================================
   CELULAR
   ================================================================ */

@media (max-width: 450px) {

    #app {

        padding:
            15px 10px 25px;
    }


    .game-title {

        font-size:
            2.6rem;
    }


    .game-info {

        gap:
            7px;
    }


    .info-card {

        padding:
            10px 5px;
    }


    .info-label {

        font-size:
            0.6rem;
    }


    .info-value {

        font-size:
            1.2rem;
    }


    .game-board {

        width:
            96vw;

        padding:
            7px;

        gap:
            7px;

        border-radius:
            14px;
    }


    .tile {

        border-radius:
            7px;
    }


    .game-actions {

        width:
            100%;
    }


    .primary-button,
    .secondary-button {

        flex:
            1;

        min-width:
            100px;

        padding:
            12px 10px;
    }
}


/* ================================================================
   FIN DEL ARCHIVO
   ================================================================ */