/**
 * Memory Match (Lật Thẻ Ký Ức)
 * Location: /assets/css/memory-match.css
 * Version: 1.0.0
 */

.init-mm {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

/* Overlay dùng khi bắt đầu ván mới (che picker trong lúc chờ server) */
.init-mm__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .65);
    border-radius: 12px;
    z-index: 5;
}

.uk-light .init-mm__overlay {
    background: rgba(0, 0, 0, .55);
}

.init-mm__intro {
    font-size: 14px;
    opacity: .85;
}

.init-mm__picker {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
}

.init-mm__diff-btn.is-disabled,
.init-mm__diff-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.init-mm__status {
    min-height: 22px;
    font-size: 14px;
    font-weight: 600;
}

/* Lưới thẻ: JS set --mm-cols theo độ khó (4 hoặc 5) */
.init-mm__grid {
    --mm-cols: 4;
    --mm-gap: 10px;
    display: grid;
    grid-template-columns: repeat(var(--mm-cols), 1fr);
    gap: var(--mm-gap);
    max-width: 100%;
    margin: 0 auto;
}

/* Thẻ bài: tỉ lệ 3:4 giống bìa manga (manga_thumb_small / manga_thumb_medium).
   Muốn đổi tỉ lệ chỉ cần sửa aspect-ratio ở đây. */
.init-mm__card {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 800px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.init-mm__card.is-locked.is-loading {
    cursor: wait;
}

.init-mm__card.is-locked {
    cursor: default;
    pointer-events: none;
}

.init-mm__card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.init-mm__card:focus-visible {
    outline: 2px solid var(--im-theme-color);
    outline-offset: 2px;
    border-radius: 10px;
}

.init-mm__card.is-flipped .init-mm__card-inner {
    transform: rotateY(180deg);
}

.init-mm__card-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* Mặt úp (chưa lật) */
.init-mm__card-face--back {
    background: linear-gradient(135deg, var(--im-theme-color), var(--im-gradient-color));
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

/* Mặt bìa truyện (đã lật) */
.init-mm__card-face--front {
    transform: rotateY(180deg);
    background: #e5e7eb;
}

.init-mm__card-face--front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.init-mm__card.is-matched .init-mm__card-face--front {
    outline: 3px solid #22c55e;
    outline-offset: -3px;
    animation: init-mm-pop .28s ease;
}

.init-mm__card.is-wrong .init-mm__card-face--front {
    outline: 3px solid #ef4444;
    outline-offset: -3px;
}

.init-mm__card.is-wrong .init-mm__card-inner {
    animation: init-mm-shake .28s ease;
}

@keyframes init-mm-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes init-mm-shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    25%      { transform: rotateY(180deg) translateX(-3px); }
    75%      { transform: rotateY(180deg) translateX(3px); }
}

.init-mm__meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    margin-top: 10px;
}

.init-mm__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
}

.uk-light .init-mm__meta span {
    background: #272727;
}

.init-mm__result {
    font-size: 15px;
}

@media (max-width: 480px) {
    .init-mm__grid {
        --mm-gap: 6px;
    }
}