/**
 * EGM Games Shortcodes - Styles
 *
 * Styles for [egm_games], [egm_game], [egm_library], [egm_questions] shortcodes.
 *
 * @package EGM_Games
 * @since 1.3.0
 */

/* =============================================================================
   CSS Variables (fallbacks if StyleKit not loaded)
   ============================================================================= */

/* =============================================================================
   Single Question Player ([egm_question])
   ============================================================================= */

/* Auto-read toggle (inside player, above stage) */
.egm-question-player .egm-question-autoread-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 1rem 0.75rem;
    padding-top: 1rem;
}

.egm-question-player .egm-question-autoread {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 700;
}

.egm-question-player .egm-question-autoread-label {
    font-size: 0.85rem;
}

.egm-question-player .egm-question-autoread-toggle {
    display: inline-flex;
    align-items: center;
}

.egm-question-player .egm-question-autoread-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

.egm-question-player .egm-question-autoread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 24px;
    padding: 0 10px;
    border-radius: 9999px;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    background: var(--egm-error, #ef4444);
    color: var(--egm-text-on-primary, #ffffff);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    user-select: none;
}

.egm-question-player .egm-question-autoread-pill::before {
    content: attr(data-off);
}

.egm-question-player .egm-question-autoread-input:checked + .egm-question-autoread-pill {
    background: var(--egm-success, #10b981);
}

.egm-question-player .egm-question-autoread-input:checked + .egm-question-autoread-pill::before {
    content: attr(data-on);
}

.egm-question-player .egm-question-autoread-input:focus-visible + .egm-question-autoread-pill {
    outline: 2px solid var(--egm-primary, #7c3aed);
    outline-offset: 2px;
}

.egm-question-player {
    max-width: 100%;
}

/* Preload overlay (shown until the player is sufficiently visible) */
.egm-question-player.egm-is-preloading {
    position: relative;
}

/* Block interactions while game is waiting for visibility conditions */
.egm-question-player.egm-game-waiting {
    pointer-events: none;
}
.egm-question-player.egm-game-waiting .egm-question-preload {
    pointer-events: auto; /* Allow overlay itself to be interactive if needed */
}

.egm-question-player .egm-question-preload {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    z-index: 2;
}

.egm-question-player .egm-question-preload-spinner {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 4px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-top-color: var(--egm-primary, #7c3aed);
    animation: egm-question-preload-spin 0.9s linear infinite;
}

@keyframes egm-question-preload-spin {
    to {
        transform: rotate(360deg);
    }
}

/* When using the universal player preset (theme-based), apply theme tokens. */
.egm-question-player.egm-universal-player {
    border: none;
    padding: 0;
    border-radius: var(--egm-border-radius, 16px);
    box-shadow: var(--egm-box-shadow, 0 4px 24px rgba(0,0,0,0.08));
    overflow: hidden;
    /* Use gradient if available, otherwise solid bg */
    background: var(--egm-background-gradient, var(--egm-background, #ffffff));
    color: var(--egm-text, #1f2937);
    font-family: var(--egm-font-family, system-ui, -apple-system, sans-serif);
    font-size: calc(var(--egm-base-font-size, 16px) * var(--egm-text-scale, 1));
}

/* Compact game-wrapper for single question - remove unnecessary min-height */
.egm-question-player .egm-game-wrapper {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* Compact gameplay container */
.egm-question-player .egm-gameplay {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* Header styled like main player - gradient using primary/secondary */
.egm-question-player .egm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--egm-primary, #7c3aed) 0%, var(--egm-secondary, #a855f7) 100%);
    color: #ffffff;
    gap: 0.5rem;
}

.egm-question-player .egm-header-left,
.egm-question-player .egm-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.egm-question-player .egm-header-center {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
}

/* Icon buttons in header */
.egm-question-player .egm-header .egm-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #ffffff;
}

.egm-question-player .egm-header .egm-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.egm-question-player .egm-header .egm-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Secondary button in header (e.g. Voir la solution) */
.egm-question-player .egm-header .egm-btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--egm-primary, #7c3aed);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.egm-question-player .egm-header .egm-btn-secondary:hover {
    background: #ffffff;
}

/* Stage area - compact, uses surface background */
.egm-question-player .egm-stage {
    flex: 0 0 auto;
    padding: 1.25rem 1.5rem;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border-radius: 12px;
    margin: 1rem;
}

.egm-question-player .egm-stage .egm-question-body {
    margin: 0;
}

.egm-question-player .egm-stage .egm-question-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
}

/* Prompt + read button (no header mode) */
.egm-question-player .egm-question-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.egm-question-player .egm-question-read-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
    color: var(--egm-text, #1f2937);
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.egm-question-player .egm-question-read-btn:hover {
    transform: translateY(-1px);
}

.egm-question-player .egm-question-read-btn svg {
    width: 18px;
    height: 18px;
}

/* Feedback actions */
.egm-question-player .egm-question-feedback-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.egm-question-player .egm-question-feedback-solution-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    color: var(--egm-primary, #06b6d4);
    border: 1px solid var(--egm-primary, #06b6d4);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
}

/* Inline correct answer block (show_correct) */
.egm-question-player .egm-question-feedback-correct-answer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

/* Inline explanation block */
.egm-question-player .egm-question-feedback-explanation {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

.egm-question-player .egm-question-feedback-explanation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-explanation-content {
    font-weight: 500;
}

.egm-question-player .egm-question-feedback-correct-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-correct-content ul {
    margin: 0.25rem 0 0 1.25rem;
}

/* Solution modal (StyleKit) */
.egm-question-solution-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.egm-question-solution-actions .egm-question-read-btn {
    width: 40px;
    height: 40px;
}

/* Solution modal content - StyleKit v3 token look (works with v2 modal wrapper) */
.egm-question-solution-modal {
    padding: 0.25rem;
}

.egm-question-solution-modal .egm-question-solution-card {
    border-radius: 16px;
    padding: 1rem;
    background: var(--egm-surface, rgba(255,255,255,0.96));
    border: 1px solid var(--egm-border, rgba(0,0,0,0.10));
    box-shadow: var(--egm-shadow-lg, 0 10px 30px rgba(0,0,0,0.10));
}

.egm-question-solution-modal .egm-question-solution-content {
    color: var(--egm-text, #1f2937);
    line-height: 1.6;
}

.egm-question-solution-modal .egm-question-solution-content strong {
    color: var(--egm-text, #111827);
}

.egm-question-solution-modal .egm-question-solution-content a {
    color: var(--egm-primary, #7c3aed);
}

/* Review modal (multi results) */
/* Hide old top action row */
.egm-question-solution-modal .egm-question-solution-actions {
    display: none;
}

/* Modal container */
.egm-question-solution-modal {
    padding: 0;
}

/* Main content card */
.egm-question-solution-card {
    padding: 1.75rem;
    background: var(--egm-surface, #ffffff);
    border-radius: 20px;
    border: none;
    box-shadow: none;
}

/* Question counter badge (for multi-mode review) */
.egm-question-review-modal .egm-question-review-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.egm-question-review-modal .egm-question-review-counter {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--egm-surface-alt, #f3f4f6);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--egm-text-secondary, #6b7280);
    text-align: center;
}

/* Status row: icon + text */
.egm-review-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--egm-surface-alt, #f3f4f6);
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.egm-review-status-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.egm-review-status-icon.is-correct {
    background: linear-gradient(135deg, #10b981, #059669);
}

.egm-review-status-icon.is-incorrect {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.egm-review-status-icon.is-neutral {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.egm-review-status-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.egm-review-status-text.is-correct {
    color: var(--egm-success, #10b981);
}

.egm-review-status-text.is-incorrect {
    color: var(--egm-danger, #ef4444);
}

.egm-review-status-text.is-neutral {
    color: var(--egm-warning, #f59e0b);
}

/* Note/instruction callout */
.egm-review-note {
    padding: 1rem 1rem 1rem 1.25rem;
    background: rgba(139, 92, 246, 0.04);
    border-left: 3px solid var(--egm-primary, #8b5cf6);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Question section */
.egm-question-review-modal .egm-question-review-section {
    margin-bottom: 1.25rem;
}

.egm-question-review-modal .egm-question-review-section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--egm-text-secondary, #6b7280);
    margin-bottom: 0.5rem;
}

.egm-question-review-modal .egm-question-review-section-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Answer boxes (user answer, correct answer, correction) */
.egm-review-box {
    padding: 1rem 1.25rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.egm-review-box.is-correct {
    border-color: var(--egm-success, #10b981);
    background: rgba(16, 185, 129, 0.04);
}

.egm-review-box.is-incorrect {
    border-color: var(--egm-danger, #ef4444);
    background: rgba(239, 68, 68, 0.04);
}

.egm-review-box.is-neutral {
    border-color: var(--egm-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.04);
}

.egm-review-box-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--egm-text-secondary, #6b7280);
    margin-bottom: 0.625rem;
}

.egm-review-box-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

/* Content inside review boxes */
.egm-question-review-modal .egm-review-list {
    margin: 0.25rem 0 0 1.25rem;
}

.egm-question-review-modal .egm-review-text,
.egm-question-review-modal .egm-review-question-text {
    line-height: 1.6;
    color: var(--egm-text, #1f2937);
}

.egm-question-review-modal .egm-review-empty {
    line-height: 1.6;
    color: var(--egm-text-secondary, #9ca3af);
    font-style: italic;
}

.egm-question-review-modal .egm-review-blank {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-bottom: 2px solid var(--egm-primary, #7c3aed);
    border-radius: 4px;
    min-width: 2.5rem;
    text-align: center;
    background: rgba(124, 58, 237, 0.08);
    font-weight: 600;
}

.egm-question-review-modal .egm-review-exercise {
    line-height: 1.7;
}

/* Centered TTS button section */
.egm-review-tts-wrap {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
}

.egm-review-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.egm-review-tts-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.egm-review-tts-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.egm-review-tts-btn svg {
    width: 18px;
    height: 18px;
}

/* =============================================================================
   Single Question Player - Timeline
   ============================================================================= */

.egm-question-player .egm-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.egm-question-player .egm-timeline-order-row,
.egm-question-player .egm-timeline-pos-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    background: var(--egm-bg-secondary);
}

.egm-question-player .egm-timeline-order-title,
.egm-question-player .egm-timeline-pos-title {
    font-weight: 600;
    color: var(--egm-text, var(--egm-gray-800));
}

.egm-question-player .egm-timeline-order-select,
.egm-question-player .egm-timeline-year {
    min-width: 90px;
    padding: 0.45rem 0.6rem;
    border-radius: var(--egm-border-radius-sm);
    border: 2px solid var(--egm-border);
    background: var(--egm-bg);
    color: var(--egm-text);
}

.egm-question-player .egm-timeline-order-select:focus,
.egm-question-player .egm-timeline-year:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* =============================================================================
   Single Question Player - Memory Cards
   ============================================================================= */

.egm-question-player .egm-memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--egm-memory-grid-min, 160px), 1fr));
    gap: 1.25rem;
}

.egm-question-player .egm-memory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.egm-question-player .egm-memory-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 800;
    font-size: 0.85rem;
}

.egm-question-player .egm-memory-stat-label {
    color: var(--egm-text-secondary, rgba(0,0,0,0.62));
    font-weight: 800;
}

.egm-question-player .egm-memory-stat-value {
    font-weight: 900;
}

.egm-question-player .egm-memory-grid.egm-memory-cols-2 { grid-template-columns: repeat(2, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-3 { grid-template-columns: repeat(3, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-4 { grid-template-columns: repeat(4, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-5 { grid-template-columns: repeat(5, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-6 { grid-template-columns: repeat(6, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-7 { grid-template-columns: repeat(7, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-8 { grid-template-columns: repeat(8, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-9 { grid-template-columns: repeat(9, 1fr); }
.egm-question-player .egm-memory-grid.egm-memory-cols-10 { grid-template-columns: repeat(10, 1fr); }

.egm-question-player .egm-memory-card {
    appearance: none;
    border: none;
    border-radius: 12px;
    background: var(--egm-surface, rgba(255,255,255,0.94));
    cursor: pointer;
    padding: 0;
    min-height: var(--egm-memory-card-min-height, 132px);
    height: var(--egm-memory-card-height, auto);
    aspect-ratio: var(--egm-memory-card-aspect, auto);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    /* 3D flip effect */
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 160ms ease;
}

.egm-question-player .egm-memory-card:focus,
.egm-question-player .egm-memory-card:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.egm-question-player .egm-memory-card:active {
    outline: none !important;
    box-shadow: none !important;
}


.egm-question-player .egm-memory-card:hover:not(:disabled):not(.is-found) {
    transform: translateY(-5px);
}

.egm-question-player .egm-memory-card:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.egm-question-player .egm-memory-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    background: var(--egm-surface, rgba(255,255,255,0.94));
    transition: transform 0.5s ease;
}

.egm-question-player .egm-memory-grid.egm-memory-frame-framed .egm-memory-card-face {
    border: 2px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    padding: 0.65rem;
}

.egm-question-player .egm-memory-grid.egm-memory-frame-none .egm-memory-card-face {
    border: none;
    padding: 0;
}

.egm-question-player .egm-memory-card-back {
    transform: rotateY(0deg);
}

.egm-question-player .egm-memory-card-front {
    transform: rotateY(180deg);
}

.egm-question-player .egm-memory-card.is-flipped .egm-memory-card-back,
.egm-question-player .egm-memory-card.is-found .egm-memory-card-back {
    transform: rotateY(-180deg);
}

.egm-question-player .egm-memory-card.is-flipped .egm-memory-card-front,
.egm-question-player .egm-memory-card.is-found .egm-memory-card-front {
    transform: rotateY(0deg);
}

.egm-question-player .egm-memory-card.is-found {
    opacity: 0.54;
}

.egm-question-player .egm-memory-grid.egm-memory-found-keep .egm-memory-card.is-found {
    opacity: 1;
}

.egm-question-player .egm-memory-grid.egm-memory-found-hide .egm-memory-card.is-found {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.egm-question-player .egm-memory-card-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.egm-question-player .egm-memory-grid.egm-memory-img-fit-cover .egm-memory-card-img {
    object-fit: cover;
}

.egm-question-player .egm-memory-grid .egm-memory-card-img {
    max-width: var(--egm-memory-image-max-w, 100%);
    max-height: var(--egm-memory-image-max-h, 100%);
}

.egm-question-player .egm-memory-exhausted {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #1f2937);
    font-weight: 900;
    font-size: 0.85rem;
}

.egm-question-player .egm-memory-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.egm-question-player .egm-memory-solution-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
}

.egm-question-player .egm-memory-solution-sep {
    font-weight: 800;
    color: var(--egm-text-secondary, var(--egm-gray-600));
}

/* Memory solution modal - compact layout for pairs (left → right) */
.egm-question-solution-modal .egm-memory-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.egm-question-solution-modal .egm-memory-solution-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-solution-modal .egm-memory-solution-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0.35rem;
    border: 2px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--egm-bg-secondary, #f9fafb);
}

.egm-question-solution-modal .egm-memory-solution-sep {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--egm-primary, #7c3aed);
}

.egm-question-solution-modal .egm-memory-card-img {
    width: 72px;
    height: 52px;
    max-width: 72px;
    max-height: 52px;
    object-fit: contain;
}

.egm-question-solution-modal .egm-memory-card-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.egm-question-solution-modal .egm-question-solution-actions {
    margin-bottom: 0.75rem;
}

.egm-question-solution-modal .egm-question-read-btn {
    color: var(--egm-text, #1f2937);
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
}

/* Prompt + read button (no header mode) */
.egm-question-player .egm-question-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.egm-question-player .egm-question-read-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
    color: var(--egm-text, #1f2937);
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.egm-question-player .egm-question-read-btn:hover {
    transform: translateY(-1px);
}

.egm-question-player .egm-question-read-btn svg {
    width: 18px;
    height: 18px;
}

/* Feedback actions */
.egm-question-player .egm-question-feedback-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.egm-question-player .egm-question-feedback-solution-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.94));
    color: var(--egm-primary, #06b6d4);
    border: 1px solid var(--egm-primary, #06b6d4);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
}

/* Inline correct answer block (show_correct) */
.egm-question-player .egm-question-feedback-correct-answer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--egm-border, rgba(0, 0, 0, 0.12));
}

.egm-question-player .egm-question-feedback-correct-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.egm-question-player .egm-question-feedback-correct-content ul {
    margin: 0.25rem 0 0 1.25rem;
}

/* Controls area - bottom bar */
.egm-question-player .egm-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: transparent;
    border-top: none;
}

.egm-question-player .egm-controls .egm-question-restart {
    border-radius: 30px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    background: var(--egm-success, #10b981);
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.egm-question-player .egm-controls .egm-question-restart:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.egm-question-player .egm-controls .egm-question-restart:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Primary button (Valider) - pill style like main player */
.egm-question-player .egm-controls .egm-btn-primary {
    background: var(--egm-primary, #FB7185);
    color: #ffffff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.egm-question-player .egm-controls .egm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Question text styling - matches main player */
.egm-question-player .egm-question-text,
.egm-question-player .egm-question-title {
    color: var(--egm-text, #7c2d12);
    font-weight: 500;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

/* Options list - align with main player */
.egm-question-player .egm-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Layout variants */
.egm-question-player .egm-options.egm-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-question-player .egm-options.egm-layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* Option rows: enumeration outside the card */
.egm-question-player .egm-option {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--egm-transition);
    text-align: left;
    font-size: 1rem;
}

/* Prevent universal player option states from styling the whole row.
   In the shortcode player, only `.egm-option-card` should be highlighted. */
.egm-question-player .egm-option:hover:not(.egm-disabled),
.egm-question-player .egm-option.egm-selected,
.egm-question-player .egm-option.egm-correct,
.egm-question-player .egm-option.egm-incorrect {
    background: transparent;
    border-color: transparent;
}

.egm-question-player .egm-option:focus {
    outline: none;
}

.egm-question-player .egm-option-card {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--egm-bg-secondary);
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    transition: var(--egm-transition);
}

.egm-question-player .egm-option:hover:not(.egm-disabled) .egm-option-card,
.egm-question-player .egm-choice-option:hover:not(.egm-disabled) {
    background: var(--egm-bg-tertiary);
    border-color: var(--egm-primary);
}

.egm-question-player .egm-option:focus-within .egm-option-card,
.egm-question-player .egm-choice-option:focus-within {
    outline: 2px solid var(--egm-primary);
    outline-offset: 2px;
}

.egm-question-player .egm-option.egm-selected .egm-option-card {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--egm-primary);
}

.egm-question-player .egm-option.egm-correct .egm-option-card {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--egm-success);
}

.egm-question-player .egm-option.egm-incorrect .egm-option-card {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--egm-error);
}

.egm-question-player .egm-option.egm-eliminated {
    opacity: 0.4;
    text-decoration: line-through;
}

.egm-question-player .egm-option.egm-disabled {
    cursor: not-allowed;
}

.egm-question-player .egm-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--egm-primary);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.egm-question-player .egm-option.egm-correct .egm-option-letter {
    background: var(--egm-success);
}

.egm-question-player .egm-option.egm-incorrect .egm-option-letter {
    background: var(--egm-error);
}

.egm-question-player .egm-option-text {
    flex: 1;
    color: var(--egm-text);
}

/* Hide native inputs but keep them accessible */
.egm-question-player .egm-option-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

/* Text input styling */
.egm-question-player .egm-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    font-size: 1rem;
    background: var(--egm-bg-secondary);
    color: var(--egm-text);
    transition: var(--egm-transition);
}

.egm-question-player .egm-text-input:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* Fill-blank dropdowns - style like main player */
.egm-question-player .egm-fill-blank-slot {
    display: inline-flex;
    align-items: center;
    margin: 0.25rem 0.25rem;
}

.egm-question-player .egm-fill-blank-select {
    display: inline-block;
    min-width: 8rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
    border: 2px solid var(--egm-border);
    border-radius: var(--egm-border-radius-sm);
    background: var(--egm-bg-secondary);
    font-size: inherit;
    color: var(--egm-text);
    cursor: pointer;
}

.egm-question-player .egm-fill-blank-select:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* Feedback states */
.egm-question-player .egm-feedback-correct {
    background: rgba(34, 197, 94, 0.12);
    color: var(--egm-success, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.egm-question-player .egm-feedback-incorrect {
    background: rgba(239, 68, 68, 0.1);
    color: var(--egm-error, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.egm-question-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.egm-question-text {
    margin-bottom: 1rem;
    color: var(--egm-gray-800);
}

.egm-question-options {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Layout variants for answer options (mobile-first) */
.egm-question-options.egm-layout-list {
    grid-template-columns: 1fr;
}

.egm-question-options.egm-layout-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-question-options.egm-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-choice-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--egm-gray-200);
    border-radius: var(--egm-radius-md);
    background: var(--egm-gray-50);
    cursor: pointer;
}

.egm-choice-option:hover {
    background: var(--egm-gray-100);
}

.egm-choice-option input {
    margin: 0;
}

.egm-text-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
}

.egm-fill-blank-select {
    display: inline-block;
    min-width: 10rem;
    padding: 0.4rem 0.6rem;
    margin: 0 0.15rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
}

.egm-question-actions {
    display: flex;
    justify-content: flex-end;
}

.egm-question-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--egm-radius-md);
    font-weight: 600;
}

.egm-feedback-correct {
    background: rgba(16, 185, 129, 0.12);
    color: var(--egm-success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.egm-feedback-incorrect {
    background: rgba(239, 68, 68, 0.10);
    color: var(--egm-error);
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.egm-solution-blank {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-bottom: 2px solid var(--egm-gray-400);
    font-weight: 700;
}

/* =============================================================================
   Buttons
   ============================================================================= */

.egm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--egm-radius-md);
    cursor: pointer;
    transition: all var(--egm-transition);
    text-decoration: none;
}

.egm-btn--primary {
    background: linear-gradient(135deg, var(--egm-primary) 0%, var(--egm-primary-dark) 100%);
    color: white;
}

.egm-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--egm-shadow-md);
}

.egm-btn--secondary {
    background: var(--egm-gray-100);
    color: var(--egm-gray-700);
    border: 1px solid var(--egm-gray-300);
}

.egm-btn--secondary:hover {
    background: var(--egm-gray-200);
}

.egm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* =============================================================================
   Toolbar & Filters
   ============================================================================= */

.egm-shortcode-toolbar,
.egm-library-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-lg);
}

.egm-shortcode-search,
.egm-library-search {
    flex: 1 1 250px;
    display: flex;
    gap: 0.5rem;
}

.egm-search-input {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
    transition: border-color var(--egm-transition), box-shadow var(--egm-transition);
}

.egm-search-input:focus {
    outline: none;
    border-color: var(--egm-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.egm-search-btn {
    padding: 0.625rem;
    background: var(--egm-primary);
    color: white;
    border: none;
    border-radius: var(--egm-radius-md);
    cursor: pointer;
}

.egm-shortcode-filters,
.egm-library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.egm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.egm-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--egm-gray-500);
}

.egm-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--egm-gray-300);
    border-radius: var(--egm-radius-md);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.egm-filter-select:focus {
    outline: none;
    border-color: var(--egm-primary);
}

/* =============================================================================
   Games Grid
   ============================================================================= */

.egm-games-grid {
    display: grid;
    gap: 1.5rem;
}

.egm-cols-1 { grid-template-columns: 1fr; }
.egm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.egm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.egm-cols-4 { grid-template-columns: repeat(4, 1fr); }
.egm-cols-5 { grid-template-columns: repeat(5, 1fr); }
.egm-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .egm-cols-4,
    .egm-cols-5,
    .egm-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .egm-cols-3,
    .egm-cols-4,
    .egm-cols-5,
    .egm-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .egm-games-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Game Card
   ============================================================================= */

.egm-game-card {
    background: white;
    border-radius: var(--egm-radius-lg);
    overflow: hidden;
    box-shadow: var(--egm-shadow-sm);
    border: 1px solid var(--egm-gray-200);
    transition: transform var(--egm-transition), box-shadow var(--egm-transition);
}

.egm-game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--egm-shadow-lg);
}

.egm-game-card__thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--egm-gray-100);
}

.egm-game-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--egm-transition);
}

.egm-game-card:hover .egm-game-card__thumbnail img {
    transform: scale(1.05);
}

.egm-game-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: var(--egm-primary);
    border-radius: var(--egm-radius-sm);
}

.egm-game-card__content {
    padding: 1rem;
}

.egm-game-card__title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.egm-game-card__title a {
    color: var(--egm-gray-800);
    text-decoration: none;
}

.egm-game-card__title a:hover {
    color: var(--egm-primary);
}

.egm-game-card__excerpt {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--egm-gray-500);
    line-height: 1.5;
}

.egm-game-card__meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.egm-game-card__difficulty {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--egm-gray-100);
    color: var(--egm-gray-600);
    border-radius: var(--egm-radius-sm);
}

.egm-game-card__actions {
    display: flex;
    gap: 0.5rem;
}

/* Compact mode */
.egm-game-card--compact {
    display: flex;
    flex-direction: row;
}

.egm-game-card--compact .egm-game-card__thumbnail {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.egm-game-card--compact .egm-game-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem;
}

/* List mode */
.egm-display-list .egm-games-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.egm-game-card--list {
    display: flex;
    flex-direction: row;
}

.egm-game-card--list .egm-game-card__thumbnail {
    width: 200px;
    flex-shrink: 0;
}

.egm-game-card--list .egm-game-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =============================================================================
   Pagination
   ============================================================================= */

.egm-shortcode-pagination,
.egm-library-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.egm-shortcode-pagination a,
.egm-shortcode-pagination span,
.egm-library-pagination a,
.egm-library-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--egm-radius-md);
    text-decoration: none;
    transition: all var(--egm-transition);
}

.egm-shortcode-pagination a {
    background: white;
    color: var(--egm-gray-700);
    border: 1px solid var(--egm-gray-300);
}

.egm-shortcode-pagination a:hover {
    background: var(--egm-gray-50);
    border-color: var(--egm-primary);
    color: var(--egm-primary);
}

.egm-shortcode-pagination .current {
    background: var(--egm-primary);
    color: white;
    border: 1px solid var(--egm-primary);
}

/* =============================================================================
   Game Player
   ============================================================================= */

.egm-game-player {
    position: relative;
    background: var(--egm-gray-100);
    border-radius: var(--egm-radius-lg);
    overflow: hidden;
    min-height: 400px;
}

.egm-player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: white;
}

.egm-player-container {
    width: 100%;
    height: 100%;
}

/* =============================================================================
   Loading & Spinner
   ============================================================================= */

.egm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--egm-gray-500);
}

.egm-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--egm-gray-200);
    border-top-color: var(--egm-primary);
    border-radius: 50%;
    animation: egm-spin 0.8s linear infinite;
}

@keyframes egm-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   Quiz Component
   ============================================================================= */

.egm-quiz {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: var(--egm-radius-lg);
    box-shadow: var(--egm-shadow-md);
}

.egm-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--egm-gray-200);
}

.egm-quiz-progress {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--egm-gray-600);
}

.egm-quiz-current {
    color: var(--egm-primary);
}

.egm-quiz-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-quiz-score-label {
    font-size: 0.875rem;
    color: var(--egm-gray-500);
}

.egm-quiz-score-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--egm-primary);
}

.egm-quiz-body {
    min-height: 300px;
}

.egm-quiz-question {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-quiz-question h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--egm-gray-800);
}

.egm-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.egm-quiz-options.egm-quiz-options--grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-quiz-options.egm-quiz-options--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-quiz-options.egm-quiz-options--grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .egm-quiz-options.egm-quiz-options--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.egm-quiz-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--egm-gray-200);
    border-radius: var(--egm-radius-md);
    cursor: pointer;
    transition: all var(--egm-transition);
}

.egm-quiz-option:hover {
    border-color: var(--egm-primary);
    background: rgba(6, 182, 212, 0.05);
}

.egm-quiz-option.selected {
    border-color: var(--egm-primary);
    background: rgba(6, 182, 212, 0.1);
}

.egm-quiz-option.correct {
    border-color: var(--egm-success);
    background: rgba(16, 185, 129, 0.1);
}

.egm-quiz-option.incorrect {
    border-color: var(--egm-error);
    background: rgba(239, 68, 68, 0.1);
}

.egm-quiz-option input[type="radio"],
.egm-quiz-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--egm-primary);
}

.egm-quiz-option-text {
    flex: 1;
    font-size: 1rem;
    color: var(--egm-gray-700);
}

.egm-quiz-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--egm-radius-md);
    font-weight: 500;
}

.egm-quiz-feedback.correct {
    background: rgba(16, 185, 129, 0.1);
    color: var(--egm-success);
    border: 1px solid var(--egm-success);
}

.egm-quiz-feedback.incorrect {
    background: rgba(239, 68, 68, 0.1);
    color: var(--egm-error);
    border: 1px solid var(--egm-error);
}

.egm-quiz-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--egm-gray-200);
}

.egm-quiz-results {
    text-align: center;
    padding: 3rem 2rem;
}

.egm-quiz-results h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--egm-gray-800);
}

.egm-quiz-final-score {
    margin-bottom: 2rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--egm-primary);
}

/* =============================================================================
   Theme Variants
   ============================================================================= */

/* Dark theme */
.egm-theme-dark {
    --egm-gray-50: #1f2937;
    --egm-gray-100: #374151;
    --egm-gray-200: #4b5563;
    --egm-gray-300: #6b7280;
    --egm-gray-700: #e5e7eb;
    --egm-gray-800: #f9fafb;
    background: #111827;
}

.egm-theme-dark .egm-game-card,
.egm-theme-dark .egm-quiz {
    background: #1f2937;
    border-color: #374151;
}

/* Colorful theme */
.egm-theme-colorful .egm-game-card {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--egm-primary), var(--egm-secondary)) border-box;
}

/* Minimal theme */
.egm-theme-minimal .egm-game-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.egm-theme-minimal .egm-game-card__thumbnail {
    border-radius: var(--egm-radius-md);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.egm-no-results,
.egm-error {
    padding: 2rem;
    text-align: center;
    color: var(--egm-gray-500);
    background: var(--egm-gray-50);
    border-radius: var(--egm-radius-md);
}

.egm-error {
    color: var(--egm-error);
    background: rgba(239, 68, 68, 0.1);
}

/* =============================================================================
   Visual Matching Interface
   ============================================================================= */

.egm-question-player .egm-matching-visual {
    position: relative;
    padding: 1rem;
    overflow: visible;
}

.egm-question-player .egm-matching-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    color: var(--egm-primary, #06b6d4);
}

.egm-question-player .egm-matching-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

/* Left and Right Columns */
.egm-question-player .egm-matching-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 0 0 auto;
    width: calc(45% - 1rem);
}

.egm-question-player .egm-matching-col-right {
    align-items: flex-start;
}

.egm-question-player .egm-matching-col-left {
    align-items: flex-end;
}

/* Row wrapper so labels can sit outside the cards */
.egm-question-player .egm-match-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.egm-question-player .egm-match-row-left {
    justify-content: flex-end;
}

.egm-question-player .egm-match-row-right {
    justify-content: flex-start;
}

.egm-question-player .egm-match-out-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid var(--egm-border);
    color: var(--egm-text-secondary);
    font-weight: 700;
    font-size: 0.85em;
    flex: 0 0 auto;
    background: var(--egm-bg);
}

/* Matching Items */
.egm-question-player .egm-match-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 48px;
    background: var(--egm-card-background, var(--egm-gray-50));
    border: 2px solid var(--egm-border-color, var(--egm-gray-200));
    border-radius: var(--egm-radius-md, 0.5rem);
    cursor: pointer;
    transition: all var(--egm-transition, 150ms);
    font-size: calc(var(--egm-base-font-size, 14px) * var(--egm-text-scale, 1));
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.egm-question-player .egm-match-left-item {
    flex-direction: row;
}

.egm-question-player .egm-match-right-item {
    flex-direction: row;
}

.egm-question-player .egm-match-text {
    flex: 1;
    word-break: break-word;
}

.egm-question-player .egm-match-anchor {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--egm-bg, #ffffff);
    border: 2px solid var(--egm-border, var(--egm-gray-200));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Anchor position: right edge for left column, left edge for right column */
.egm-question-player .egm-match-left-item .egm-match-anchor {
    right: -7px;
}

.egm-question-player .egm-match-right-item .egm-match-anchor {
    left: -7px;
}

.egm-question-player .egm-match-item:hover {
    border-color: var(--egm-primary, #06b6d4);
    box-shadow: var(--egm-shadow-sm);
}

.egm-question-player .egm-match-item:hover .egm-match-anchor {
    border-color: var(--egm-primary, #06b6d4);
}

.egm-question-player .egm-match-item.is-active {
    border-color: var(--egm-primary, #06b6d4);
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.egm-question-player .egm-match-item.is-active .egm-match-anchor {
    border-color: var(--egm-primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
}

.egm-question-player .egm-match-right-item.is-linked {
    border-color: var(--egm-primary, #06b6d4);
    background: rgba(6, 182, 212, 0.06);
}

.egm-question-player .egm-match-item.is-connected {
    border-color: var(--egm-match-color, var(--egm-success, #10b981));
    background: rgba(0, 0, 0, 0.02);
}

.egm-question-player .egm-match-item.is-connected .egm-match-anchor {
    background: var(--egm-bg, #ffffff);
    border-color: var(--egm-match-color, var(--egm-success, #10b981));
}

/* Pending: border and anchor match the pending color */
.egm-question-player .egm-match-item.is-pending {
    border-color: var(--egm-match-color, var(--egm-primary, #06b6d4));
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.egm-question-player .egm-match-item.is-pending .egm-match-anchor {
    border-color: var(--egm-match-color, var(--egm-primary, #06b6d4));
}

/* Disabled state after validation */
.egm-question-player .egm-match-item.egm-disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* Correct/Incorrect states after validation */
.egm-question-player .egm-match-item.is-correct {
    border-color: var(--egm-success, #10b981);
    background: rgba(16, 185, 129, 0.15);
}

.egm-question-player .egm-match-item.is-incorrect {
    border-color: var(--egm-error, #ef4444);
    background: rgba(239, 68, 68, 0.15);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .egm-question-player .egm-matching-columns {
        flex-direction: column;
        gap: 1.5rem;
    }

    .egm-question-player .egm-matching-col {
        width: 100%;
        flex: none;
    }

    .egm-question-player .egm-matching-col-left,
    .egm-question-player .egm-matching-col-right {
        align-items: stretch;
    }

    .egm-question-player .egm-match-left-item,
    .egm-question-player .egm-match-right-item {
        flex-direction: row;
    }

    .egm-question-player .egm-match-item.is-connected::after {
        content: '✓';
        margin-left: auto;
        color: var(--egm-success, #10b981);
        font-weight: bold;
        font-size: 1.1em;
    }
}

/* =============================================================================
   Multi-Question Mode ([egm_question ids="..."])
   ============================================================================= */

/* Multi-question header */
.egm-question-player-multi .egm-question-multi-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--egm-border, rgba(0, 0, 0, 0.08));
    margin-bottom: 0.5rem;
}

.egm-question-player-multi .egm-multi-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    margin: 0;
    text-align: center;
}

.egm-question-player-multi .egm-question-progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Question counter */
.egm-question-player-multi .egm-question-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.75rem;
    background: var(--egm-surface, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    white-space: nowrap;
}

.egm-question-player-multi .egm-counter-current {
    color: var(--egm-primary, #7c3aed);
}

.egm-question-player-multi .egm-counter-label {
    font-weight: 700;
}

/* Progress bar */
.egm-question-player-multi .egm-question-progress-bar-container {
    flex: 1;
    min-width: 100px;
    height: 8px;
    background: var(--egm-border, rgba(0, 0, 0, 0.08));
    border-radius: 9999px;
    overflow: hidden;
}

.egm-question-player-multi .egm-question-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--egm-primary, #7c3aed), var(--egm-secondary, #06b6d4));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Partial score */
.egm-question-player-multi .egm-question-partial-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--egm-surface, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--egm-text, #1f2937);
    white-space: nowrap;
}


.egm-question-player-multi .egm-score-label {
    font-weight: 700;
}

.egm-question-player-multi .egm-score-current {
    color: var(--egm-success, #10b981);
}

/* Multi controls */
.egm-question-player-multi .egm-controls-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
}

.egm-question-player-multi .egm-question-prev,
.egm-question-player-multi .egm-question-next {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.egm-question-player-multi .egm-btn-icon {
    font-size: 1.1em;
}

/* Results page */
/* Main-player-like multi results layout (trophy panel + stats + revision chips) */
.egm-question-player-multi .egm-results-screen {
    padding: 1.25rem;
    text-align: left;
    max-width: 980px;
    margin: 0 auto;
}

.egm-question-player-multi .egm-multi-results-card {
    display: flex;
    flex-wrap: wrap;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-player-multi .egm-multi-results-left {
    flex: 1 1 280px;
    padding: 1.5rem;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--egm-primary, #7c3aed) 0%, var(--egm-secondary, #06b6d4) 100%);
}

.egm-question-player-multi .egm-multi-results-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.egm-question-player-multi .egm-multi-results-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.egm-question-player-multi .egm-multi-results-message {
    margin: 0 0 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.egm-question-player-multi .egm-multi-results-score {
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.egm-question-player-multi .egm-multi-results-bar {
    width: 100%;
    height: 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.egm-question-player-multi .egm-multi-results-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
}

.egm-question-player-multi .egm-multi-results-right {
    flex: 1 1 340px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.egm-question-player-multi .egm-multi-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.egm-question-player-multi .egm-multi-stat {
    border-radius: 12px;
    padding: 0.9rem 0.75rem;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
    text-align: center;
}

.egm-question-player-multi .egm-multi-stat-value {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--egm-text, #111827);
    margin-bottom: 0.25rem;
}

.egm-question-player-multi .egm-multi-stat-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--egm-text-secondary, rgba(0, 0, 0, 0.62));
}

.egm-question-player-multi .egm-multi-best-streak {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0 0.25rem;
}

.egm-question-player-multi .egm-multi-best-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-weight: 900;
    color: var(--egm-primary, #7c3aed);
    background: var(--egm-primary-soft, rgba(124, 58, 237, 0.14));
}

.egm-question-player-multi .egm-multi-review {
    margin-top: 1rem;
}

.egm-question-player-multi .egm-multi-review-title {
    font-size: 0.95rem;
    font-weight: 900;
    text-align: center;
    margin: 0 0 0.6rem;
    color: var(--egm-text, #111827);
}

.egm-question-player-multi .egm-multi-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
}

.egm-question-player-multi .egm-multi-review-chip {
    appearance: none;
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.10));
    background: var(--egm-bg-tertiary, rgba(0, 0, 0, 0.03));
    color: var(--egm-text, #111827);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.12s ease, background 0.12s ease;
}

.egm-question-player-multi .egm-multi-review-chip:hover {
    transform: translateY(-1px);
}

.egm-question-player-multi .egm-multi-review-chip.is-correct {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.12);
}

.egm-question-player-multi .egm-multi-review-chip.is-incorrect {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.10);
}

.egm-question-player-multi .egm-multi-review-chip-icon {
    font-weight: 900;
}

.egm-question-player-multi .egm-multi-results-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.egm-question-player-multi .egm-multi-results-actions .egm-btn {
    border-radius: 9999px;
    padding: 0.85rem 1.35rem;
    font-weight: 800;
}

.egm-question-player-multi .egm-multi-results-actions .egm-results-summary-btn {
    background: var(--egm-surface, rgba(255, 255, 255, 0.96));
    border: 1px solid var(--egm-border, rgba(0, 0, 0, 0.12));
    color: var(--egm-text, #111827);
}

.egm-question-player-multi .egm-restart-btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    background: var(--egm-primary, #FB7185);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.egm-question-player-multi .egm-restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Responsive adjustments for multi-question */
@media (max-width: 600px) {
    .egm-question-player-multi .egm-question-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .egm-question-player-multi .egm-question-counter,
    .egm-question-player-multi .egm-question-partial-score {
        justify-content: center;
    }

    .egm-question-player-multi .egm-multi-stats {
        grid-template-columns: 1fr;
    }

}