/* =============================================================
   WP Flashcard — Match Game
   ============================================================= */

/* Wrapper — provides positioning context for the overlay */
.fc-match-wrapper {
    position: relative;
}

/* Overlay — covers the flashcard set area only */
.fc-match-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    min-height: 400px;
}

/* Header bar */
.fc-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.fc-match-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.fc-match-timer {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    min-width: 48px;
    text-align: center;
}

.fc-match-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.fc-match-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* Grid */
.fc-match-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

/* Individual tile — uniform height; text is auto-fit by JS (no truncation) */
.fc-match-tile {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    height: 110px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px; /* starting size — flashcard-match.js shrinks per-tile to fit */
    line-height: 1.3;
    color: #1e293b;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
}

/* Inner text node — measured and resized by the auto-fit routine */
.fc-match-tile-text {
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.fc-match-tile:hover {
    border-color: #94a3b8;
}

/* Selected state */
.fc-match-tile--selected {
    border-color: #2B5C9A;
    background: #e8eef6;
}

/* Matched state */
.fc-match-tile--matched {
    border-color: #22c55e;
    background: #f0fdf4;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    cursor: default;
}

/* Wrong state (red flash animation) */
.fc-match-tile--wrong {
    animation: fc-wrong-flash 0.4s ease forwards;
}

@keyframes fc-wrong-flash {
    0%   { border-color: #ef4444; background: #fef2f2; }
    50%  { border-color: #dc2626; background: #fee2e2; }
    100% { border-color: #ef4444; background: #fef2f2; }
}

/* Win screen */
.fc-match-win {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.fc-match-win-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.fc-match-win h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
}

.fc-match-final-time {
    font-size: 48px;
    font-weight: 700;
    color: #2B5C9A;
    margin: 0 0 32px;
    line-height: 1;
}

.fc-match-play-again {
    background: #2B5C9A;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.fc-match-play-again:hover {
    background: #1e4271;
}

/* ── Nav bar integration ─────────────────────────────────────────────────────
   Convert the nav-container to a flex row so the match game button sits as a
   natural left-side sibling to the centered fc-nav and right-side fc-btns.
   This guarantees the button left edge aligns with the card left edge without
   needing to hard-code pixel offsets.
   ─────────────────────────────────────────────────────────────────────────── */

.fc-match-wrapper .nav-container {
    display: flex;
    align-items: center;
}

/* Match game button: natural flex child on the left */
.fc-match-wrapper .fc-match-btn-container {
    position: static;
    transform: none;
    flex-shrink: 0;
    order: -1;
    margin-left: 10px; /* align with card body, clear of box-shadow spread */
}

/* fc-nav fills the center */
.fc-match-wrapper .fc-nav {
    flex: 1;
}

/* fc-btns-container: pull out of absolute, sit on the right in the flex row */
.fc-match-wrapper .fc-btns-container {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex-shrink: 0;
}

/* Launch button pill */
.fc-match-launch-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px 6px 8px;
    background: #fff;
    border-radius: 20px;
    border: 0;
    box-shadow: 0 0 0 1px #f2f2f2;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.fc-match-launch-btn svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex-shrink: 0;
}

.fc-match-launch-btn:hover,
.fc-match-launch-btn:active,
.fc-match-launch-btn:focus,
.fc-match-launch-btn:focus-visible {
    background-color: #ffcd1f;
    color: #333;
    outline: none;
}

/* Loading state on launch button */
.fc-match-launch-btn.fc-match-loading {
    opacity: 0.6;
    cursor: wait;
}

/* Loading spinner — shown in grid while cards are loading */
.fc-match-grid-loader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.fc-match-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #cfcfcf;
    border-top-color: #2B5C9A;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Mobile close button — hidden on desktop, shown at bottom on mobile */
.fc-match-close-mobile {
    display: none;
}

/* ── Mobile overrides ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Overlay goes full-screen on mobile so it isn't clipped */
    .fc-match-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        min-height: 0;
    }

    /* Ensure header close button is large enough to tap */
    .fc-match-close {
        font-size: 22px;
        padding: 8px 12px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile close button at bottom of overlay */
    .fc-match-close-mobile {
        display: block;
        flex-shrink: 0;
        width: 100%;
        padding: 14px;
        background: #fff;
        border: none;
        border-top: 1px solid #e2e8f0;
        font-size: 15px;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        text-align: center;
    }

    .fc-match-close-mobile:hover {
        background: #f1f5f9;
        color: #1e293b;
    }

    /* Nav bar: stack match button below when space is tight */
    .fc-match-wrapper .nav-container {
        flex-wrap: wrap;
    }

    .fc-match-wrapper .fc-match-btn-container {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    /* Keep fc-btns in flow (existing mobile styles use right/left:0 which
       don't apply anymore; replicate center-justify here) */
    .fc-match-wrapper .fc-btns-container {
        justify-content: center;
        margin-top: 18px;
    }

    .fc-match-grid {
        flex: 0 0 auto;
        max-height: calc(100dvh - 120px);
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .fc-match-tile {
        height: 96px;
    }
}

@media (max-width: 479px) {
    .fc-match-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .fc-match-tile {
        height: 88px;
        padding: 8px;
    }
}