/* ══════════════════════════════════════════
   Find the Pairs – card memory game styles
   ══════════════════════════════════════════ */

.mmb-ftp-game {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ── HUD ── */
.mmb-ftp-hud {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: #f0f4ff;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

/* ── Board wrapper (relative so overlays work) ── */
.mmb-ftp-board-wrap {
    position: relative;
    min-height: 80px;
}

/* ── Preview banner (shown during initial 3-second reveal) ── */
.mmb-ftp-preview-banner {
    text-align: center;
    padding: 6px 12px;
    margin-bottom: 8px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
    letter-spacing: 0.02em;
}

.mmb-ftp-board {
    display: grid;
    /* 136 px wide × 170 px tall cards; deck centred; 8 px gap all sides */
    grid-template-columns: repeat(auto-fill, 136px);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/* Mobile: proportionally smaller (same 136:170 ratio) */
@media (max-width: 600px) {
    .mmb-ftp-board {
        grid-template-columns: repeat(auto-fill, 85px);
    }
}

/* ── Card ── */
.mmb-ftp-card {
    aspect-ratio: 136 / 170;   /* 136 px wide × 170 px tall */
    cursor: pointer;
    perspective: 800px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.mmb-ftp-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    /* no border-radius */
}

/* Flipped or matched → show front face */
.mmb-ftp-card.mmb-ftp-flipped .mmb-ftp-card-inner,
.mmb-ftp-card.mmb-ftp-matched .mmb-ftp-card-inner {
    transform: rotateY(180deg);
}

.mmb-ftp-card-back,
.mmb-ftp-card-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* no border-radius, no overflow:hidden */
}

/* Back face: transparent background */
.mmb-ftp-card-back {
    background: transparent;
    transform: rotateY(0deg);
}

/* Front face: transparent, hidden by default (rotated 180°) */
.mmb-ftp-card-front {
    transform: rotateY(180deg);
    background: transparent;
}

.mmb-ftp-card-back img,
.mmb-ftp-card-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Matched cards: green outline only, no radius */
.mmb-ftp-card.mmb-ftp-matched .mmb-ftp-card-front {
    outline: 3px solid #22c55e;
    outline-offset: -2px;
}

/* ── Loading overlay ── */
.mmb-ftp-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    font-size: 1rem;
    color: #555;
    font-weight: 600;
    z-index: 10;
}

/* ── End overlay (over the whole board) ── */
.mmb-ftp-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
}

.mmb-ftp-end-msg {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.mmb-ftp-new-best {
    color: #fbbf24;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* ── Best-scores tooltip ── */
.mmb-ftp-scores-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mmb-ftp-trophy-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    padding: 5px 12px;
    cursor: pointer;
}

.mmb-ftp-best-scores {
    background: #fff;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #333;
    min-width: 170px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mmb-ftp-best-scores p { margin: 3px 0; }

/* ── Action buttons ── */
.mmb-ftp-end-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.mmb-ftp-btn {
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    color: #fff;
}

.mmb-ftp-btn-primary {
    background: #22c55e;
    border-color: #16a34a;
    color: #fff;
}