@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: Zilap-Monograma;
    src: url(./assets/fonts/Zilap\ Monograma\ DEMO.ttf);
}


/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES */
:root {
    /* FONTS */
    --FF-H: "Zilap-Monograma", sans-serif;
    --FF: "Rubik", sans-serif;
    --FS-P: calc(3.1dvh - ((var(--BOARD-SIZE) - 4) * 0.2dvh));
    --FS-S: calc(2.8dvh - ((var(--BOARD-SIZE) - 4) * 0.2dvh));
    --FS-T: calc(2.4dvh - ((var(--BOARD-SIZE) - 4) * 0.2dvh));

    /* COLORS */
    --BGCOLOR: #FBFFED;
    --COLOR-GREEN-DARK: #415B4C;
    --COLOR-GREEN: #5DAA7E;
    --COLOR-GREEN-LIGHT: #D6EEE0;
    --COLOR-P: #F5F5F5;
    --COLOR-ORANGE: #FF816B;
    --COLOR-GRAY: #676767;

    /* MISC */
    --BOARD-SIZE: 1;
    --TILE-SIZE: calc(43.1dvh * 15 / (17 * var(--BOARD-SIZE) + 2));
    --PADDING-BOARD: calc(var(--TILE-SIZE) / 15);
    --BOARD-BORDER-RADIUS: 2.94dvh;
    --TILE-BORDER-RADIUS: 1.85dvh;
    --ANIMATION-TIME-SPAWN: 0.2s;
}

/* UTILS */
.center {
    text-align: center;
}

.animated-btn {
    transition: transform 0.1s;
}


.animated-btn:active {
    transform: scale(95%);
}

.hide {
    display: none;
}

/* to hide everything initially */
body.preload>* {
    display: none;
}

body {
    min-height: 100dvh;
    max-height: 100dvh;
    background-color: var(--BGCOLOR);
    display: flex;
    flex-direction: column;
    font-family: var(--FF);
}


header {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 1.96dvh;
    padding: 0.81dvh;
}

.header__h1 {
    font-family: var(--FF-H);
    font-size: 6.54dvh;
    color: #415B4C;
    font-weight: normal;
    transform: translate(0, -10dvh);
    transition: transform 0.25s ease-out;
}



main {
    flex: 1 1 0;
    display: grid;
    justify-content: center;
    align-content: start;
    justify-items: center;
    margin-top: 3dvh;
    position: relative;
}


.score-wrapper {
    /* width: calc((var(--TILE-SIZE) + var(--PADDING-BOARD)) * var(--BOARD-SIZE) + var(--PADDING-BOARD)); */
    display: flex;
    gap: 0.647dvh;
    justify-content: center;
    margin-top: 3dvh;
}


.score-container {
    flex: 1 1 0;
    color: var(--COLOR-P);
    text-transform: uppercase;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 1.41dvh;
    height: 4.47dvh;
}


.current-score-container {
    background-color: var(--COLOR-GREEN-DARK);
    border-radius: var(--BOARD-BORDER-RADIUS) 0 0 var(--BOARD-BORDER-RADIUS);
}


.best-score-container {
    background: var(--COLOR-GREEN);
    border-radius: 0 var(--BOARD-BORDER-RADIUS) var(--BOARD-BORDER-RADIUS) 0;
}


.score-container .score {
    font-size: 2.2dvh;
    font-weight: bold;
}

.score-container .text {
    font-size: 1.4dvh;
}


.swap-popup {
    position: absolute;
    height: 7.85dvh;
    display: flex;
    gap: 0.763dvh;
    visibility: hidden;
    transition: top 0.1s ease-out;
    font-family: var(--FF);
    color: #F5F5F5;
}

.swap-popup__text {
    background-color: #A65040;
    width: 75.75%;
    height: 100%;
    border-radius: var(--BOARD-BORDER-RADIUS) 0 0 var(--BOARD-BORDER-RADIUS);
    font-size: 1.744dvh;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 0.54dvh;
}

.swap-popup__text .heading {
    font-weight: bold;
    text-transform: uppercase;
}

.swap-popup__cancel-btn {
    background-color: var(--COLOR-ORANGE);
    width: 31%;
    height: 100%;
    border-radius: 0 var(--BOARD-BORDER-RADIUS) var(--BOARD-BORDER-RADIUS) 0;
    font-size: 2.18dvh;
    font-weight: bold;
    display: grid;
    place-content: center;
}

.power-ups-container-wrapper {
    position: relative;
    border-radius: var(--BOARD-BORDER-RADIUS);
}

.power-ups-container-wrapper::before,
.power-ups-container-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    padding: 0.25dvh;
    border-radius: var(--BOARD-BORDER-RADIUS);
}

.power-ups-container-wrapper::before {
    filter: blur(2dvh);
    opacity: 0.6;
}


@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.power-ups-container-wrapper.glow::before,
.power-ups-container-wrapper.glow::after {
    --color: #FF816B;
    background-image: conic-gradient(from var(--angle),
            transparent 0% 40%,
            var(--color) 40% 50%,
            transparent 50% 90%,
            var(--color) 90% 100%);
    animation: glow-border 3s linear 2;
}

@keyframes glow-border {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

.power-ups-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--COLOR-GREEN-DARK);
    border-radius: var(--BOARD-BORDER-RADIUS);
    height: 6.32dvh;
    box-shadow: 0 -0.14dvh 0.56dvh 0.28dvh rgba(0, 0, 0, 0.25);
    z-index: 0;
}

.power-up {
    height: 44%;
    position: relative;
    z-index: inherit;
}

.power-up figure {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: inherit;
}


.power-up figure img {
    height: 100%;
    width: auto;
    z-index: inherit;
}

.power-up figcaption {
    position: absolute;
    left: -10000px;
}

.power-up__count {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    font-size: 2.18dvh;
    font-weight: bold;
    color: #FF85D0;
}

.power-up-info-popup {
    position: absolute;
    top: -7.32dvh;
    height: inherit;
    width: inherit;
    border-radius: inherit;
    background-color: var(--COLOR-GREEN);
    color: #fff;
    box-shadow: 0 0 0.56dvh -0.14dvh rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}

.power-up-info-popup__title {
    font-size: 1.96dvh;
    font-weight: bold;
    text-transform: uppercase;
}


.power-up-info-popup__description {
    font-size: 1.52dvh;
}

.new-game-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.76dvh 0;
}

.new-game-btn {
    border: none;
    background-color: var(--COLOR-ORANGE);
    font: inherit;
    font-size: 2.39dvh;
    font-weight: bold;
    color: #F8EFB9;
    width: 100%;
    height: 4.47dvh;
    border-radius: var(--BOARD-BORDER-RADIUS);
    box-shadow: 0 -0.14dvh 0.56dvh 0.28dvh rgba(0, 0, 0, 0.25);
}


.new-game-btn:hover {
    cursor: pointer;
}


.menu-popup {
    background-color: var(--COLOR-GREEN-DARK);
    font-family: var(--FF);
    color: var(--BGCOLOR);
    border: 0.313dvh solid var(--BGCOLOR);
    border-radius: 1.77dvh;
    box-shadow: 0 0.418dvh 1.46dvh 0.523dvh #000;
    padding: 1.88dvh 2.61dvh 2.61dvh;
    position: absolute;
    top: 43%;
    left: 50%;

    display: flex;
    align-items: center;
    flex-flow: column wrap;
    z-index: 10;

    transform: scale(0) translate(-50%, -50%);
    transform-origin: 0%;
}

.show-menu-popup {
    animation: show-popup 0.25s ease-in-out forwards;
    pointer-events: auto;
}

.hide-menu-popup {
    animation: hide-popup 0.25s ease-in-out forwards;
    pointer-events: none;
}


@keyframes show-popup {
    0% {
        transform: scale(0) translate(-50%, -50%);
    }

    80% {
        transform: scale(110%) translate(-50%, -50%);
    }

    100% {
        transform: scale(100%) translate(-50%, -50%);
    }
}


@keyframes hide-popup {
    0% {
        transform: scale(100%) translate(-50%, -50%);
    }

    20% {
        transform: scale(110%) translate(-50%, -50%);
    }

    100% {
        transform: scale(0%) translate(-50%, -50%);
    }
}


.menu-popup__title {
    font-size: 2.92dvh;
    font-weight: bold;
    margin-bottom: 1.255dvh;
}


.menu-popup__sub-title {
    font-size: 1.46dvh;
    font-weight: bold;
}


.menu-popup__btn {
    border: none;
    background-color: var(--BGCOLOR);
    font-size: 2.92dvh;
    padding: 1.255dvh;
    border-radius: 1.77dvh;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;
}



.menu-popup__btn-1 {
    color: var(--COLOR-ORANGE);
    margin: 7.63dvh 0 1.67dvh;
}


.menu-popup__btn-2 {
    color: var(--COLOR-GRAY);
}


.grid-4x4-btn {
    margin: 3.03dvh 0;
}


.grid-5x5-btn {
    color: var(--COLOR-ORANGE);
}


.menu-btn__text {
    flex: 1 1 0;
}

.menu-popup__btn img {
    height: 7.94dvh;
    aspect-ratio: 1;
}

.bg-blur {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #FBFFED42;
    z-index: 5;
}

.board {
    background-color: var(--COLOR-GREEN-DARK);
    display: grid;
    /* grid-template-columns: repeat(4, calc(var(--TILE-SIZE) + 10px));
    grid-template-rows: repeat(4, calc(var(--TILE-SIZE) + 10px)); */
    align-items: center;
    justify-items: center;
    padding: var(--PADDING-BOARD);
    box-shadow: 0 0 1.5dvh -0.2dvh black;

    margin: 4.21dvh 0 8.48dvh;
    position: relative;
    border-radius: var(--BOARD-BORDER-RADIUS);
}


.tile-container {
    background-color: var(--COLOR-GREEN-LIGHT);
    height: var(--TILE-SIZE);
    width: var(--TILE-SIZE);
    border-radius: var(--TILE-BORDER-RADIUS);
    box-shadow: inset 0 0 0.42dvh 0.28dvh rgba(0, 0, 0, 0.25);
}


.tile {
    position: absolute;
    width: var(--TILE-SIZE);
    height: var(--TILE-SIZE);
    border-radius: var(--TILE-BORDER-RADIUS);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: var(--FS-P);
    font-weight: 600;

    transform-origin: center;
    z-index: 1;
    box-shadow: inset 0 0 0.42dvh 0.28dvh rgba(0, 0, 0, 0.25);

    background-color: #184D6E;
    color: #E9FFDB;
    overflow: hidden;

    transition: transform 0.1s ease;
}


.tile-blur {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(175, 175, 175, 0.452);
    visibility: hidden;
}


.tile-blur:hover {
    background-color: transparent;
}

.tile-new {
    animation: appear var(--ANIMATION-TIME-SPAWN) ease-in-out;
}

.tile-merged {
    --ANIMATION-TIME-MERGE: 0.2s;
    animation: pop var(--ANIMATION-TIME-MERGE) ease-in-out;
}


@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }


    80% {
        opacity: 0.9;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


.tile-2 {
    background-color: #FF816B;
    color: #FBF6BD;
}

.tile-4 {
    background-color: #FF593C;
    color: #FBF6BD;
}

.tile-8 {
    background-color: #C72B0F;
    color: #FBF6BD;
}


.tile-16 {
    background-color: #8FF34B;
    color: #0D9703;
}

.tile-32 {
    background-color: #55B316;
    color: #F8EFB9;
}


.tile-64 {
    background-color: #36760B;
    color: #F8EFB9;
}


.tile-128 {
    background-color: #57A8C9;
    color: #F8EFB9;
    font-size: var(--FS-S);
}

.tile-256 {
    background-color: #184D6E;
    color: #F8EFB9;
    font-size: var(--FS-S);
}


.tile-512 {
    background-color: #C3B5F7;
    color: #B76DE9;
    font-size: var(--FS-S);
}


.tile-1024 {
    background-color: #9E83FF;
    color: #F8EFB9;
    font-size: var(--FS-T);
}


.tile-2048 {
    background-color: #6C53C2;
    color: #EDA3FF;
    font-size: var(--FS-T);
}


.tile-4096 {
    background-color: #E15CDA;
    color: #FFDBDB;
    font-size: var(--FS-T);
}

.tile-8192 {
    background-color: #93198D;
    color: #E9FFDB;
    font-size: var(--FS-T);
}

footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1dvh;
    flex-flow: column;
    height: 8dvw;
    color: #2D80B4;
    font-size: 1.5dvh;
    margin-bottom: 1dvh;
}

.footer__icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2dvh;
}

.footer__icon {
    height: 2dvh;
}


.footer__icon a {
    display: inline-block;
    height: 100%;
}

.footer__icon img {
    height: 100%;
}


@media screen and (max-width: 350px) {
    :root {
        --TILE-SIZE: calc(33.1dvh * 15 / (17 * var(--BOARD-SIZE) + 2));
    }
}



@media screen and (max-width: 768px) {
    .power-up-info-popup {
        display: none;
    }
}