/* Desktop */
@media (min-width: 768px) {
    #board {
        height: 70vh;
        width: auto;
    }
    p {
        font-size: 25px;
    }
    h1 {
        font-size: 35px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #board {
        width: 90vw;
        height: auto;
    }
}
.rainbow {
    background: linear-gradient(
        135deg,
        rgb(255, 80, 80) 0%,
        rgb(255, 170, 60) 14%,
        rgb(255, 230, 80) 30%,
        rgb(90, 220, 110) 50%,
        rgb(80, 190, 255) 70%,
        rgb(130, 120, 255) 86%,
        rgb(255, 120, 220) 100%
    );
}
#board {
    margin: 0 auto;
    display: grid;
    aspect-ratio: 1 / 1;
}
.card-title {
    border: 10px solid #d1d0d0;
}
.action {
    border-radius: 15%;
    border: 5px solid black;
    cursor: pointer;
    overflow: hidden;
}
.action-selected {
    background-color: #91f279 !important;
    border: 5px solid #ffffff;
}
.title {
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-game {
    border: 16px solid transparent;
    border-image-source: url("./assets/border.png");
    border-image-slice: 24;
    border-image-repeat: repeat;
}
.game {
    background-color: #EDEDED;
}
/* Ball Styles */
#ball-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ball {
    position: absolute;
    border-radius: 50%;
    background: #00ff00;
    border: 4px solid black;
    z-index: 10;
}
.trail {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 255, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.25);
    z-index: 5; 
}
/* Movement Animation */
@keyframes pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.15); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.tile-pop {
    animation: pop 0.18s ease-out;
}
/* Movement Animation */

@keyframes scorePop {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
.score-animate {
    animation: scorePop 0.3s ease-out;
}
/* Tile and Colors */
.tile {
    background-color: #c0c0c0;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px
}
.tile-0 {
    background: #cdc1b4;
    color: #776e65;
    font-size: 28px;
}
.tile-2 {
    background: #eee4da;
    color: #776e65;
    font-size: 28px;
}
.tile-4 {
    background: #ede0c8;
    color: #776e65;
    font-size: 28px;
}
.tile-8 {
    background: #f2b179;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-16 {
    background: #f59563;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-32 {
    background: #f67c5f;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-64 {
    background: #f65e3b;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-128 {
    background: #edcf72;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-256 {
    background: #edcc61;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-512 {
    background: #edc850;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-1024 {
    background: #edc53f;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-2048 {
    background: #edc22e;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-4096 {
    background: #edaa2e;
    color: #f9f6f2;
    font-size: 28px;
}
.tile-selected {
    border: 4px solid #ac0101;
    background: #f72e2e;
    color: #ffffff;
    font-size: 28px;
}