@charset "utf-8";

html {
    min-height: -webkit-fill-available;
}

body {
    background:
        /* 半透明黑色遮罩 */
        linear-gradient(#00000080, #00000080),
        /* 圖片 */
        url("./Image/background.png"),
        /* 最底層的純黑底色 */
        #000000;
    background-repeat: no-repeat;
    background-size: cover;
}


#game-container {
    padding: 40px 20px;
    max-width: 375px;
    width: -webkit-fill-available;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

h1 {
    color: #e57373;
    font-weight: 700;
    font-size: 2.2em;
}

h3 {
    font-size: 20px;
    margin: 0;
    color: #ffffff;
}

#game-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: auto;

    font-size: 20px;
    font-weight: 400;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    /* height: 100%; */
    padding: 32px 0;
    margin: 0 auto;
}

.card {
    aspect-ratio: 1 / 1;
    min-width: 50px;
    width: 100%;
    max-width: 100px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #0000001a;

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

.card-front {
    background: #FFF0D3;
    transform: rotateY(180deg);
}

.card-front img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.card-back {
    background-image: url('Image/card-back.png'), url('Image/card-back-bg.jpg');
    background-size: 70%, cover;
    background-repeat: no-repeat;
    background-position: center;
}

.card.matched {
    pointer-events: none;
}

.card.animating {
    animation: pop 0.5s ease-in-out;
}

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

    50% {
        transform: rotateY(180deg) scale(1.15);
    }

    100% {
        transform: rotateY(180deg) scale(1);
    }
}

.card.shake {
    animation: shake 0.4s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) rotateY(180deg);
    }

    25% {
        transform: translateX(-5px) rotateY(180deg);
    }

    50% {
        transform: translateX(5px) rotateY(180deg);
    }

    75% {
        transform: translateX(-5px) rotateY(180deg);
    }
}

.share button {
    justify-content: center;
    align-items: center;
    padding: 8px 80px;
    gap: 4px;

    background: #ffffff99;
    color: #1E1E1E;
    border-radius: 12px;
}

.share button:hover,
.share button::selection {
    background: #ffffff99;
    color: #D1D1D1;
}

.share button::before {
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffffe6 0%, #ffffff66 100%);
    border-radius: 12px;
}


.popup-content {
    background: #1E1E1E;
}

.popup-content::before {
    content: "";
    background: linear-gradient(90deg, #F669DC 0%, #84B4EB 23.19%, #D0F8FF 43.75%, #11FFFB 73.56%, #C0ED8A 87.61%);
}

.popup-content.show {
    transform: translate(-50%, -50%) scale(1);
}

.popup-title-Div {
    margin-top: 9px;
}

.failPopup.popup-title-Div {
    justify-content: center;
}

.popup-title {
    line-height: 150%;
    text-align: start;
    font-size: 18px;
    color: #F6F6F6;
}

.popup-text {
    background: #3D3D3D;
    color: #D1D1D1;
}

.popup-text b {
    color: #F6F6F6;
}

.popup-content button:not([class]) {
    border-radius: 16px;
    background: #00000099;
    color: #F6F6F6;
}

.popup-content button:not([class]):hover,
.close-popup:hover,
.close-popup::selection {
    color: #D1D1D1;
    background: #00000099;
}

.popup-content button:not([class])::before {
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffffe6 0%, #ffffff66 100%);
}

.icon-btn {
    color: #F6F6F6;
}

.close-popup {
    background: #00000099;
    color: #FFF;
}

.close-popup::before {
    content: "";
    position: absolute;
    inset: -1px;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    background: linear-gradient(180deg, #ffffffe6 0%, #ffffff66 100%);
    padding: 1px;
}

.round-button:hover{
    color: #888888;
    background: #77777799;
}