.game-board-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.game-board {
    display: grid;
    gap: 8px;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 100%;
}

.card {
    background: #1e1b4b;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

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

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.card-front {
    background: #f8fafc;
    color: #1e293b;
    transform: rotateY(180deg);
}

.card-back {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    background-size: cover;
    background-position: center;
}

/* Emoji card face */
.emoji-card-face {
    font-size: 2.2rem;
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Dot patterns */
.dot-pattern {
    display: grid;
    width: 88%;
    height: 88%;
    gap: 5%;
    align-items: center;
    justify-items: center;
}

.dot {
    background-color: #1e293b;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.dot-pattern[data-value="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dot-pattern[data-value="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dot-pattern[data-value="3"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.dot-pattern[data-value="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dot-pattern[data-value="5"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.dot-pattern[data-value="6"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

.dot-pattern[data-value="7"],
.dot-pattern[data-value="8"],
.dot-pattern[data-value="9"],
.dot-pattern[data-value="10"],
.dot-pattern[data-value="11"],
.dot-pattern[data-value="12"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.dot-pattern[data-value="13"],
.dot-pattern[data-value="14"],
.dot-pattern[data-value="15"],
.dot-pattern[data-value="16"],
.dot-pattern[data-value="17"],
.dot-pattern[data-value="18"],
.dot-pattern[data-value="19"],
.dot-pattern[data-value="20"] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.dot-pattern[data-value="21"],
.dot-pattern[data-value="22"],
.dot-pattern[data-value="23"],
.dot-pattern[data-value="24"],
.dot-pattern[data-value="25"],
.dot-pattern[data-value="26"],
.dot-pattern[data-value="27"],
.dot-pattern[data-value="28"],
.dot-pattern[data-value="29"],
.dot-pattern[data-value="30"],
.dot-pattern[data-value="31"],
.dot-pattern[data-value="32"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.dot-pattern .dot:nth-child(n+8):not(:nth-child(-n+7))[data-value="7"] { display: none; }
.dot-pattern .dot:nth-child(n+9):not(:nth-child(-n+8))[data-value="8"] { display: none; }
.dot-pattern .dot:nth-child(n+10):not(:nth-child(-n+9))[data-value="9"] { display: none; }
.dot-pattern .dot:nth-child(n+11):not(:nth-child(-n+10))[data-value="10"] { display: none; }
.dot-pattern .dot:nth-child(n+12):not(:nth-child(-n+11))[data-value="11"] { display: none; }
.dot-pattern .dot:nth-child(n+13):not(:nth-child(-n+12))[data-value="12"] { display: none; }
.dot-pattern .dot:nth-child(n+14):not(:nth-child(-n+13))[data-value="13"] { display: none; }
.dot-pattern .dot:nth-child(n+15):not(:nth-child(-n+14))[data-value="14"] { display: none; }
.dot-pattern .dot:nth-child(n+16):not(:nth-child(-n+15))[data-value="15"] { display: none; }
.dot-pattern .dot:nth-child(n+17):not(:nth-child(-n+16))[data-value="16"] { display: none; }
.dot-pattern .dot:nth-child(n+18):not(:nth-child(-n+17))[data-value="17"] { display: none; }
.dot-pattern .dot:nth-child(n+19):not(:nth-child(-n+18))[data-value="18"] { display: none; }
.dot-pattern .dot:nth-child(n+20):not(:nth-child(-n+19))[data-value="19"] { display: none; }
.dot-pattern .dot:nth-child(n+21):not(:nth-child(-n+20))[data-value="20"] { display: none; }
.dot-pattern .dot:nth-child(n+22):not(:nth-child(-n+21))[data-value="21"] { display: none; }
.dot-pattern .dot:nth-child(n+23):not(:nth-child(-n+22))[data-value="22"] { display: none; }
.dot-pattern .dot:nth-child(n+24):not(:nth-child(-n+23))[data-value="23"] { display: none; }
.dot-pattern .dot:nth-child(n+25):not(:nth-child(-n+24))[data-value="24"] { display: none; }
.dot-pattern .dot:nth-child(n+26):not(:nth-child(-n+25))[data-value="25"] { display: none; }
.dot-pattern .dot:nth-child(n+27):not(:nth-child(-n+26))[data-value="26"] { display: none; }
.dot-pattern .dot:nth-child(n+28):not(:nth-child(-n+27))[data-value="27"] { display: none; }
.dot-pattern .dot:nth-child(n+29):not(:nth-child(-n+28))[data-value="28"] { display: none; }
.dot-pattern .dot:nth-child(n+30):not(:nth-child(-n+29))[data-value="29"] { display: none; }
.dot-pattern .dot:nth-child(n+31):not(:nth-child(-n+30))[data-value="30"] { display: none; }
.dot-pattern .dot:nth-child(n+32):not(:nth-child(-n+31))[data-value="31"] { display: none; }
.dot-pattern .dot:nth-child(n+33):not(:nth-child(-n+32))[data-value="32"] { display: none; }

/* Image deck cards — photo fills the face */
.image-card-face {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #1a1a2e !important;
    padding: 0 !important;
    overflow: hidden;
}

/* card-front when it contains an <img> — kill the default white bg */
.card-front:has(img) {
    background: #0d0d1a !important;
    padding: 0 !important;
    overflow: hidden;
}

.card-front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Custom uploaded-image cards */
.custom-card-front {
    background: white !important;
    padding: 0;
    overflow: hidden;
}

.custom-image-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
}

.custom-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ── Match pop animation ── */
@keyframes card-match-pop {
    0%   { scale: 1; }
    40%  { scale: 1.12; }
    70%  { scale: 0.95; }
    100% { scale: 1; }
}
.card-match-pop {
    animation: card-match-pop 0.45s ease forwards;
}

/* ── Miss shake animation ── */
@keyframes card-miss-shake {
    0%   { translate: 0; }
    20%  { translate: -5px 0; }
    40%  { translate: 5px 0; }
    60%  { translate: -4px 0; }
    80%  { translate: 3px 0; }
    100% { translate: 0; }
}
.card-miss-shake {
    animation: card-miss-shake 0.35s ease forwards;
}

/* ── Hint reveal ── */
.card.hint-revealed {
    transform: rotateY(180deg);
    box-shadow: 0 0 0 3px #fbbf24, 0 6px 20px rgba(0,0,0,0.5);
}

/* ── Streak display ── */
.streak-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    transition: color 0.2s;
}
.streak-count.streak-hot { color: #f59e0b; }
.streak-count.streak-fire { color: #ef4444; }

/* ── Secondary stat row ── */
.game-stat-row--secondary {
    opacity: 0.8;
    margin-top: 2px;
}

/* ── Hint button ── */
.hint-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

@media (max-width: 480px) {
    .emoji-card-face {
        font-size: 1.6rem;
    }
}