/* css/views/learnPlay.css */

/* Styles specific to the #game section (Learn & Play) */

#game .content-header {
    /* Specific styles for the learn & play section header, if any */
    margin-bottom: 30px;
    text-align: center; /* As per original styles */
}
#game .content-header h1 {
    font-size: 2rem;
    color: var(--accent-primary);
}
#game .content-header p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 600px; /* Constrain subtitle width */
    margin-left: auto;
    margin-right: auto;
}

/* Game Selection Card Container */
.game-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 10px 0;
}

/* Individual Game Card Styling */
.game-card {
    flex: 1 1 calc(33.333% - 25px); /* Aim for 3 cards per row, adjust for gap */
    min-width: 280px;
    max-width: 360px; /* Slightly wider max width */
    aspect-ratio: 3 / 3.8; /* Adjusted for potentially more text content */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* Softer shadow */
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.game-card:hover {
    transform: translateY(-6px) scale(1.015); /* More subtle hover */
    box-shadow: 0 10px 30px rgba(var(--accent-primary-rgb), 0.15);
}

.game-card-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease-out;
}
.game-card:hover .game-card-background {
    transform: scale(1.08); /* Slightly less zoom */
}

.game-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(var(--text-primary-rgb, 33,37,41), 0.9) 0%, rgba(var(--text-primary-rgb, 33,37,41), 0.7) 40%, rgba(var(--text-primary-rgb, 33,37,41), 0.2) 100%);
    opacity: 0.95; /* Ensure readability */
    transition: opacity var(--transition-speed-normal) ease;
}
/* Overlay for light theme - ensure text remains readable */
body[data-theme="light"] .game-card-overlay {
     background: linear-gradient(to top, rgba(var(--bg-primary-rgb-light, 255,255,255), 0.8) 0%, rgba(var(--bg-primary-rgb-light, 255,255,255), 0.5) 50%, rgba(var(--bg-primary-rgb-light, 255,255,255), 0.1) 100%);
     opacity: 1;
}
.game-card:hover .game-card-overlay {
    opacity: 1;
}

.game-card-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    color: var(--text-primary-dark); /* Text color for dark overlay */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    text-align: left;
}
body[data-theme="light"] .game-card-content {
    color: var(--text-primary-light); /* Text color for light overlay */
}

.game-card-icon-wrapper {
    margin-bottom: 15px;
    width: 48px; /* Slightly smaller */
    height: 48px;
    border-radius: 50%;
    background-color: rgba(var(--accent-primary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
body[data-theme="light"] .game-card-icon-wrapper {
    background-color: rgba(var(--accent-primary-rgb-light), 0.1);
}
.game-card:hover .game-card-icon-wrapper {
    background-color: var(--accent-primary);
    color: white; /* Icon color on hover */
    transform: rotate(5deg) scale(1.05);
}
.game-card-icon-wrapper .fas { /* Target FontAwesome icons specifically if needed */
    font-size: 1.5rem; /* Control icon size */
}

.game-card-title {
    font-family: var(--font-secondary);
    font-size: 1.4rem; /* Adjusted size */
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}
.game-card-description {
    font-size: 0.9rem;
    opacity: 0.9; /* Slightly more opaque for readability */
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
    min-height: 50px; /* Ensure some space */
}
body[data-theme="light"] .game-card-description {
    opacity: 1;
}

.game-card-button { /* This is the .btn.btn-sm.game-card-button */
    /* Generic .btn styles apply */
    background-color: var(--accent-primary);
    color: white !important;
    border-color: transparent; /* Remove border if bg is colored */
    padding: 8px 18px;
    font-weight: 500;
    border-radius: var(--border-radius-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    transition: background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}
.game-card-button:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-2px);
    color: white !important;
}
.game-card-button .icon-arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.game-card:hover .game-card-button .icon-arrow {
    transform: translateX(4px);
}

/* Responsive for Game Cards */
@media (max-width: 1200px) { .game-card { flex-basis: calc(50% - 25px); max-width: calc(50% - 12.5px); } } /* 2 cards */
@media (max-width: 767px) { .game-card { flex-basis: 100%; max-width: 450px; aspect-ratio: 4/3.5; } } /* 1 card */
@media (max-width: 480px) {
    .game-card-title { font-size: 1.25rem; }
    .game-card-description { font-size: 0.85rem; min-height: 40px; }
    .game-card-button { padding: 7px 15px; font-size: 0.8rem; }
}


/* Common Game Interface Structure */
.game-interface-container {
    /* Generic .card styles can apply for background, border, shadow if it's a .card */
    /* Or style it independently: */
    background-color: var(--bg-primary);
    padding: 20px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 10px var(--shadow-color);
    width: 100%;
    max-width: 750px; /* Max width for game content area */
    margin: 0 auto; /* Center it */
    display: none; /* Hidden by default, JS shows */
    flex-direction: column;
    gap: 20px; /* Space between header, setup, play, summary */
}

.game-interface-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px; /* Reduce margin if gap on parent is used */
}
.game-interface-header h2 {
    margin: 0;
    font-size: 1.6rem; /* Slightly smaller than main view H1 */
    color: var(--text-primary);
}
.back-to-games-btn, .back-to-games-btn-summary {
    /* Generic .btn .btn-sm .btn-secondary (or outline) styles apply */
    font-size: 0.9rem;
}

/* Game Setup Area (common for all games) */
.game-setup-area { /* This is often a .card in your HTML */
    /* Generic .card styles apply */
}
.game-setup-area .card-header h4, /* If setup is a card with header */
.game-setup-area > h4 { /* If h4 is direct child */
    font-size: 1.3rem;
    color: var(--accent-primary);
    margin-bottom: 15px;
    text-align: center;
}
.game-setup-area .form-group {
    /* Generic .form-group styles apply */
    margin-bottom: 1rem;
}
.game-setup-area label { /* Labels for topic selectors etc. */
    /* Generic label styles apply */
    font-size: 0.9rem;
}
.game-setup-area .form-control.game-topic-selector, /* Selectors */
.game-setup-area .form-control { /* Other inputs/selects */
    /* Generic .form-control .form-control-sm styles apply */
}
.game-setup-area .btn[id^="start"] { /* Start buttons */
    /* Generic .btn .btn-primary .btn-block styles apply */
    margin-top: 15px; /* Space above start button */
}


/* Game Play Area (common structure) */
.game-play-area { /* This is often a .card */
    /* Generic .card styles apply */
    /* min-height might be set per game if needed */
}
.game-play-area .card-body { /* If it's a card */
    padding: 20px;
}

/* Game Summary Area (common structure) */
.game-summary-area { /* This is often a .card */
    /* Generic .card styles apply */
}
.game-summary-area .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}
.game-summary-area h3 {
    color: var(--success);
    font-size: 1.5rem;
}
.game-summary-area h3 .fas { margin-right: 8px; }
.game-summary-area p {
    font-size: 1.05rem;
    margin-bottom: 5px;
}
.game-summary-area .btn {
    /* Generic .btn styles apply */
    margin-top: 10px;
    margin-right: 5px; /* For spacing if multiple buttons */
}

/* Placeholders within game interfaces (No cards, No questions etc.) */
#noFlashcardsMessage, #noQuizQuestionsMessage, #noMatchupItemsMessage,
.matchup-column-placeholder { /* Class from your HTML */
    color: var(--text-muted);
    font-style: italic;
    padding: 30px 20px; /* More padding */
    text-align: center;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px dashed var(--border-color);
    min-height: 100px; /* Ensure it's visible */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- Flashcard Game Specific Styles --- */
#flashcardGameInterface .game-play-area {
    min-height: 300px; /* Ensure enough vertical space */
}
.flashcard-display-container {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px; /* Enhanced perspective */
    margin-bottom: 20px;
    min-height: 200px; /* Adjusted from 180px */
}
#flashcardElement { /* Was .flashcard-active */
    width: 100%;
    max-width: 400px; /* Slightly wider card */
    height: 220px; /* Adjusted height */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* Flip transition */
                opacity 0.4s ease-out, transform 0.4s ease-out; /* Swipe/enter transition */
    cursor: pointer; /* If card itself is flippable */
    border-radius: var(--border-radius-lg); /* More rounded */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
#flashcardElement.is-flipped { transform: rotateY(180deg); }
/* Swipe and enter animation classes (card-swipe-out-left, etc.) remain the same as defined in your provided CSS */
/* Ensure they are included here or in an animations.css file if you make one */
#flashcardElement.card-swipe-out-left { transform: translateX(-150%) rotateY(-20deg); opacity: 0; }
#flashcardElement.card-swipe-out-right { transform: translateX(150%) rotateY(20deg); opacity: 0; }
#flashcardElement.card-enter-from-right { transform: translateX(150%) rotateY(0deg); opacity: 0; }
#flashcardElement.card-active-state { transform: translateX(0%) rotateY(0deg); opacity: 1; }
#flashcardElement.is-flipped.card-active-state { transform: translateX(0%) rotateY(180deg); }
#flashcardElement.is-flipped.card-swipe-out-left { transform: translateX(-150%) rotateY(160deg); opacity: 0;}
#flashcardElement.is-flipped.card-swipe-out-right { transform: translateX(150%) rotateY(200deg); opacity: 0;}


.flashcard-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; text-align: center;
    border-radius: var(--border-radius-lg); /* Match parent */
    font-size: 1.1rem; /* Base font size for card content */
    border: 1px solid transparent; /* Transparent border, background will show through */
    overflow-y: auto; /* Allow content to scroll if it overflows */
}
.flashcard-front {
    background: var(--bg-interactive); /* Softer front */
    color: var(--text-primary);
}
.flashcard-back {
    background: var(--accent-primary-light); /* Example: light version of accent */
    color: var(--text-primary); /* Ensure contrast */
    transform: rotateY(180deg);
}
body[data-theme="dark"] .flashcard-front { background: var(--bg-interactive-dark); color: var(--text-primary-dark); }
body[data-theme="dark"] .flashcard-back { background: var(--accent-primary-dark); color: var(--bg-primary-dark); }

.flashcard-face p, .flashcard-face ul, .flashcard-face ol { /* Content styling within flashcard */
    font-size: 1em; /* Relative to .flashcard-face font-size */
    line-height: 1.6;
    margin-bottom: 0.75em;
    max-width: 100%;
    overflow-wrap: break-word;
}
.flashcard-face ul, .flashcard-face ol { padding-left: 25px; text-align: left; }
.flashcard-face li { margin-bottom: 0.4em; }

.flashcard-game-controls {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
/* .flashcard-game-controls .btn styles are generic */
/* Specific button feedback animations (pulseButtonGreen, pulseButtonYellow) should be here or in animations.css */
.flashcard-game-controls .btn.action-feedback-knew { animation: pulseButtonGreen 0.4s ease-out; }
.flashcard-game-controls .btn.action-feedback-didnotknow { animation: pulseButtonYellow 0.4s ease-out; }
@keyframes pulseButtonGreen { /* ... as defined before ... */ }
@keyframes pulseButtonYellow { /* ... as defined before ... */ }

#flashcardProgress { text-align: center; font-size: 0.9rem; color: var(--text-muted); }


/* --- Quizzer Game Specific Styles --- */
#quizProgressInfo {
    display: flex; justify-content: space-between;
    font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px;
}
#quizQuestionArea p#quizQuestionContent { /* Target specific p */
    font-size: 1.15rem; /* Slightly smaller than game card title */
    font-weight: 500;
    line-height: 1.5;
    min-height: 50px; /* Ensure some space */
    margin-bottom: 1rem; /* Space before options */
}
.quiz-options-grid {
    display: grid; grid-template-columns: 1fr; /* Stack options by default */
    gap: 10px;
}
@media (min-width: 576px) { /* Two columns for options on slightly larger screens */
    .quiz-options-grid { grid-template-columns: 1fr 1fr; }
}
.quiz-option-btn {
    /* Generic .btn .btn-outline-primary styles apply */
    display: block; width: 100%; text-align: left;
    padding: 10px 15px; font-size: 0.95rem; /* Adjusted size */
    /* transition for background, border, color handled by .btn */
}
.quiz-option-btn:hover:not(:disabled):not(.selected):not(.correct):not(.incorrect) {
    background-color: var(--bg-interactive); /* Subtle hover */
}
.quiz-option-btn.selected { /* When user clicks */
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: white !important;
    font-weight: bold;
}
.quiz-option-btn.correct { /* After submit, if correct */
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: white !important;
}
.quiz-option-btn.incorrect { /* After submit, if user's choice was wrong */
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
}
.quiz-option-btn.correct::after { content: " ✔"; float: right; }
.quiz-option-btn.incorrect::after { content: " ✖"; float: right; }
.quiz-option-btn:disabled { opacity: 0.8; /* Less faded when showing result */ }


#quizFeedbackArea { min-height: 1.5em; margin-top: 15px; font-weight: bold; text-align: center; }
#quizFeedbackText.text-success { /* From base.css */ }
#quizFeedbackText.text-danger { /* From base.css */ }
.quiz-controls { margin-top: 20px; text-align: center; }
#quizReviewArea {
    font-size: 0.9rem; border: 1px solid var(--border-color);
    padding: 15px; border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary); margin-top: 1rem;
    max-height: 250px; overflow-y: auto;
}
#quizReviewArea h5 { font-size: 1rem; margin-bottom: 0.5rem; }
#quizReviewArea .list-group-item { padding: 0.5rem 0.75rem; background-color: transparent; border-color: var(--border-color); }


/* --- Match-Up Game Specific Styles --- */
#matchupGameInterface .game-play-area { user-select: none; }
#matchupInstructionsArea p { font-size: 0.9rem; color: var(--text-muted); text-align: center; }
.matchup-game-board-grid {
    display: grid; grid-template-columns: 1fr; /* Stack on small screens */
    gap: 20px; margin-top: 15px;
}
@media (min-width: 768px) { /* Side-by-side on larger screens */
    .matchup-game-board-grid { grid-template-columns: 1fr 1fr; }
}
.matchup-column {
    display: flex; flex-direction: column; gap: 10px;
    padding: 15px; background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md); min-height: 250px;
    border: 1px solid var(--border-color);
}
.matchup-item {
    padding: 10px 12px; /* Adjusted padding */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.15s;
    font-size: 0.9rem; /* Slightly smaller text */
    line-height: 1.4;
}
.matchup-item:hover:not(.matched-permanent) {
    background-color: var(--bg-interactive);
    border-color: var(--accent-primary);
    box-shadow: 0 2px 5px var(--shadow-color);
}
.matchup-item.selected {
    background-color: var(--accent-primary) !important;
    color: white !important;
    border-color: var(--accent-secondary) !important;
    transform: scale(1.02);
    font-weight: 500; /* Less bold than original */
}
.matchup-item.correct-match { /* Temporary flash for correct */
    background-color: var(--success) !important; color: white !important;
    border-color: color-mix(in srgb, var(--success) 80%, black) !important;
    animation: pulseCorrect 0.6s ease-out;
}
.matchup-item.incorrect-match { /* Temporary flash for incorrect */
    background-color: var(--danger) !important; color: white !important;
    border-color: color-mix(in srgb, var(--danger) 80%, black) !important;
    animation: shakeIncorrect 0.5s ease-out;
}
.matchup-item.matched-permanent { /* Final style for matched items */
    background-color: var(--status-learned-bg); /* Use semantic status color */
    color: var(--status-learned-text);
    border-color: var(--success); /* Or a lighter border */
    cursor: default;
    opacity: 0.8;
}
.matchup-item.matched-permanent:hover { transform: none; box-shadow: none; }

@keyframes shakeIncorrect { /* Define if not in global animations */
    0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); } 75% { transform: translateX(-4px); }
}
@keyframes pulseCorrect { /* Define if not in global animations */
    0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); }
}

#matchupStatsArea { text-align: center; margin-top: 15px; }
#matchupStatsArea p { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
#matchupActionFeedback { min-height: 1.5em; font-size: 1.05rem; text-align: center; margin-top: 10px; }
/* .text-success, .text-danger for feedback from base.css */


/* Responsive for general game interfaces */
@media (max-width: 768px) {
    .game-interface-header { flex-direction: column; gap: 10px; text-align: center; }
    .game-interface-header h2 { font-size: 1.4rem; }
    .game-setup-area .card-header h4, .game-setup-area > h4 { font-size: 1.2rem; }
    .game-summary-area h3 { font-size: 1.3rem; }
    .game-summary-area p { font-size: 1rem; }
}
@media (max-width: 480px) {
    .game-interface-container { padding: 15px; gap: 15px; }
    .game-play-area .card-body { padding: 15px; } /* If it's a card */
    .game-summary-area .card-body { padding: 15px; }
    .back-to-games-btn, .back-to-games-btn-summary { font-size: 0.85rem; padding: 6px 10px; }
}