:root {
    --theme-primary: #8FB8DE; /* Pastel Blue */
    --theme-primary-hover: #7BA4D0;
    --theme-primary-shadow: rgba(143, 184, 222, .25);

    --theme-secondary: #6c757d; /* Cool Gray */
    --theme-secondary-hover: #5a6268;

    --theme-info: #809bce; /* Deeper Pastel Blue */
    --theme-info-hover: #728bb6;

    --theme-success: #90be6d; /* Pastel Green */
    --theme-success-hover: #7baf56;

    --theme-danger: #c94c4c; /* Softer Red */
    --theme-danger-hover: #b34444;

    --theme-background: #f8f9fa; /* Light Cool Gray */
    --theme-surface: #ffffff;
    --theme-accent-light: #e3f2fd; /* Light Blue */
    --theme-accent-light-selected: #d4eaff;

    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-border: #dee2e6;
}

/* Dark Mode Variables */
body.dark-mode {
    --theme-primary: #8FB8DE; /* Pastel Blue - can stay the same */
    --theme-primary-hover: #7BA4D0;
    --theme-primary-shadow: rgba(143, 184, 222, .15);

    --theme-secondary: #8a929a; /* Lighter gray for dark mode */
    --theme-secondary-hover: #9da5ad;

    --theme-info: #809bce;
    --theme-info-hover: #728bb6;

    --theme-success: #90be6d;
    --theme-success-hover: #7baf56;

    --theme-danger: #c94c4c;
    --theme-danger-hover: #b34444;

    --theme-background: #121212; /* Very dark gray */
    --theme-surface: #1e1e1e; /* Lighter dark gray for surfaces */
    --theme-accent-light: #2a2a2a; /* Dark accent */
    --theme-accent-light-selected: #3c3c3c; /* Dark accent selected */

    --theme-text-primary: #e0e0e0; /* Light gray for text */
    --theme-text-secondary: #a0a0a0; /* Dimmer gray */
    --theme-border: #3a3a3a; /* Visible border on dark surface */
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: var(--theme-background); color: var(--theme-text-primary); margin: 0; display: flex; flex-direction: column; height: 100vh; }

#app-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Prevents whole page scroll, children will scroll */
}

#left-icon-bar {
    width: 60px;
    background-color: var(--theme-surface);
    border-right: 1px solid var(--theme-border);
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevent from shrinking */
}

.nav-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.nav-icon-btn:hover {
    background-color: var(--theme-accent-light);
    color: var(--theme-text-primary);
}

.nav-icon-btn.active {
    background-color: var(--theme-primary);
    color: white;
}
.nav-icon-btn.active:hover {
    background-color: var(--theme-primary-hover);
}

.nav-icon-btn svg {
    width: 28px;
    height: 28px;
}

#main-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

header { background: var(--theme-surface); padding: 1rem 2rem; border-bottom: 1px solid var(--theme-border); display: flex; justify-content: space-between; align-items: center; position: relative; flex-shrink: 0; }

header {
    /* Existing styles... */
    gap: 0.75rem; /* Add space between logo and title */
}

#app-logo {
    height: 32px;
    width: 32px;
}

#app-title { margin: 0; font-size: 1.5rem; flex-grow: 1; }

#auth-loading-spinner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: bold;
}

#auth-loading-spinner .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: var(--theme-primary);
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#user-info {
    position: relative; /* Establish a local positioning context. This is the best practice. */
    display: flex; /* This is the key fix */
    align-items: center;
    gap: 0.75rem;
}

#user-info #profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

#user-info #profile-picture:hover,
#user-info #profile-picture.active {
    border-color: var(--theme-primary);
}

#profile-menu {
    position: absolute;
    top: calc(100% + 5px); /* Position below the user-info block */
    right: 0; /* Align to the right edge of the new user-info context */
    background-color: var(--theme-surface);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--theme-border);
    min-width: 220px;
    z-index: 1050;
    padding: 0.5rem 0;
    overflow: hidden;
}

#profile-menu-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 0.5rem;
}

#profile-menu-username {
    font-weight: bold;
    display: block;
}

#profile-menu-email {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

#study-streak-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Small gap between icon and number */
    background-color: #fff0c2; /* Light yellow/gold */
    border: 1px solid #ffe082; /* Slightly darker gold border */
    color: #bf7d11; /* Dark gold text */
    padding: 0.25rem 0.6rem;
    border-radius: 16px; /* Pill shape */
    font-weight: bold;
    font-size: 0.9rem;
}

#study-streak-icon svg {
    width: 18px;
    height: 18px;
    fill: #ff9800; /* Bright orange for the flame */
    display: block; /* Helps with alignment */
}

body.dark-mode #study-streak-indicator {
    background-color: #4d380c; /* Dark gold background */
    border-color: #a1741a;
    color: #ffc107; /* Bright gold text */
}

body.dark-mode #study-streak-icon svg { fill: #ffc107; }

#product-description h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.features-grid {
    display: flex;
    gap: 2rem;
    text-align: left;
    margin: 2rem 0;
}
.feature {
    flex: 1;
}
.feature h3 {
    border-bottom: 2px solid var(--theme-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.feature ul {
    list-style: none;
    padding: 0;
}
.feature li {
    margin-bottom: 0.5rem;
}

.screenshots-section {
    margin-top: 3rem;
}

.screenshots-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.screenshots-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.screenshots-container img {
    max-width: 100%;
    width: 300px; /* A fixed width for consistency on larger screens */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--theme-border);
}

.main-view {
    width: 90%;
    margin: 2rem auto; /* Center horizontally and add vertical margin */
    box-sizing: border-box;
    flex-grow: 1; /* Allow content to fill vertical space if needed */
}

#product-description {
    text-align: center;
}

.column { background: var(--theme-surface); padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
/* This is the main container for the collections grid view */
#collections-list-view {
    /* It inherits .column styles for the background/padding, but max-width is now on .main-view */
}
ul { list-style: none; padding: 0; }
.collections-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.collections-list li {
    padding: 1rem;
    border-radius: 8px;
    min-height: 100px; /* Ensure all cards have the same minimum height */
    cursor: pointer;
    border: 1px solid var(--theme-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    gap: 0.5rem; /* Add gap between info and actions */
}
.collections-list li .collection-info {
    display: block; /* Allow children to stack or be inline */
    flex-grow: 1; /* Allow info to take available space */
    min-width: 0; /* Prevent flex item from overflowing */
    line-height: 1.4;
}
.collections-list li .collection-info .collection-name-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: bold;
    margin-right: 0.5rem; /* Space between name and meta on desktop */
}
.collections-list li .collection-info .collection-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap; /* Allow items to wrap on small screens */
}

.collection-meta .meta-text-content {
    margin-right: 0.5rem; /* Space between text and icons */
}
.collections-list li .collection-info .public-indicator-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--theme-text-secondary); /* Match small text color */
    display: block; /* Helps with alignment */
}
.collections-list li .collection-info small { color: var(--theme-text-secondary); font-size: 0.8rem; }
.collections-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.collections-list li#add-collection-card {
    border: 2px dashed #a0a0a0;
    background-color: var(--theme-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    font-weight: bold;
}

.collections-list li#add-collection-card .add-collection-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.collections-list li#add-collection-card .plus-icon {
    font-size: 2.5rem;
}
.collections-list li#add-collection-card:hover {
    background-color: var(--theme-accent-light);
    border-color: var(--theme-secondary);
}
.collections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.collections-header h2 {
    margin: 0;
    font-size: 1.5rem;
}
.collections-header-actions {
    display: flex;
    gap: 0.5rem;
}
.collections-list li.active { /* This style is no longer used for selection highlighting */ }

#card-view-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#card-view-controls .form-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0; /* Override default form-group margin */
}

#card-view-controls label {
    font-weight: bold;
}

#card-view-controls select {
    padding: 0.5rem;
}
#cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.card { background-color: transparent; width: 100%; height: 140px; perspective: 1000px; position: relative; }
.card-actions { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; gap: 6px; }
.card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.4s ease-in-out; transform-style: preserve-3d; } /* Adjusted transition */
.card-stats-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hardness-new { background-color: var(--theme-secondary); }
.hardness-learning { background-color: var(--theme-danger); }
.hardness-known { background-color: var(--theme-primary); }
.hardness-mastered { background-color: var(--theme-success); }
.card.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Equal padding for proper vertical centering */
    box-sizing: border-box; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-front { background-color: var(--theme-surface); border: 1px solid var(--theme-border); }
.card-back { background-color: var(--theme-accent-light); border: 1px solid var(--theme-border); transform: rotateY(180deg); }
.card-view-actions {
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
}
.card#add-card-tile {
    cursor: pointer;
    border: 2px dashed #a0a0a0;
    background-color: var(--theme-background);
    color: var(--theme-text-secondary);
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: bold;
}
.card#add-card-tile .plus-icon { font-size: 2.5rem; line-height: 1; }
.card#add-card-tile:hover { background-color: var(--theme-accent-light); border-color: var(--theme-secondary); }

.card-view-actions button {
    background-color: var(--theme-info);
}

#collection-view-header {
    display: block;
    margin-bottom: 1rem;
}

.collection-view-header-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
}
.collection-view-page-actions {
    flex-shrink: 0; /* Prevent this container from shrinking */
    margin-left: auto; /* Push it to the right */
}

#subscribe-to-viewed-collection-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem;
}

#collection-view-title {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 2rem;
}

#collection-view-meta {
    margin: 0;
    color: var(--theme-text-secondary);
}

.language-info-container {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    vertical-align: middle; /* Helps align the container with the preceding text */
}

.language-info-container .lang-flag {
    display: flex;
    align-items: center;
}

.lang-flag-img {
    display: block; /* Remove extra space below image */
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4); /* Subtle border effect */
    background-color: var(--theme-border); /* Fallback color for broken images */
}

.language-info-container .lang-arrow {
    display: flex;
    align-items: center;
}

.language-info-container .lang-arrow svg {
    width: 22px;
    height: 22px;
    fill: var(--theme-text-secondary);
}

/* Styles for the smaller language indicator on the collection list cards */
.collection-meta .language-info-container {
    gap: 0.25rem;
}
.collection-meta .lang-flag {
    /* font-size is no longer needed for images */
}
.collection-meta .lang-arrow svg {
    width: 16px;
    height: 16px;
}
#collection-view-divider {
    margin: 0 0 1rem 0;
    background-color: var(--theme-info);
}

.card-view-actions button.active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    font-weight: bold;
}

.game-mode-container {
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #fdfdfd;
    position: relative; /* Add this for positioning the button */
}

#learn-card-container {
    max-width: 700px; /* Set a max-width for the flipping card area */
    margin-left: auto;  /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
}

.game-settings {
    text-align: center;
    padding: 2rem 0;
}

.game-settings h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.game-settings .form-group label {
    margin-right: 1rem;
    font-weight: bold;
}

#write-progress,
#quiz-progress,
#learn-progress,
#listen-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--theme-text-secondary);
}

.game-progress-info {
    display: flex;
    gap: 1rem;
}

#learn-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--theme-text-secondary);
}

.game-card-display {
    background-color: var(--theme-accent-light);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

#write-question {
    /* write-question will now use .game-card-display */
}

#learn-card {
    /* learn-card will now use .game-card-display */
}

#learn-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.game-actions-center {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    gap: 0.5rem;
}

#learn-check-btn {
}

#learn-feedback-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Swap button order to match keyboard shortcuts (left for "don't know", right for "know") */
#learn-did-not-know-btn { order: 1; }
#learn-knew-btn { order: 2; }

/* Common styles for game progress/header bars */
.game-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--theme-text-secondary);
}

/* --- Spin Wheel Styles --- */
#spinwheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.spin-wheel-wrapper {
    position: relative;
    width: 350px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spin-wheel-wrapper::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--theme-surface);
    border-radius: 50%;
    border: 4px solid var(--theme-border);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    z-index: 12; /* Above segments and pointer */
}

.spin-wheel-pointer {
    position: absolute;
    top: 50%;
    left: -25px; /* Position it further outside the wheel */
    transform: translateY(-50%); /* Center it vertically */
    width: 0;
    height: 0;
    border-top: 15px solid transparent; /* Make it a smaller right-pointing triangle */
    border-bottom: 15px solid transparent;
    border-left: 22px solid var(--theme-danger);
    z-index: 10;
}

#spinwheel-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid var(--theme-border);
    position: relative;
    overflow: hidden;
}

.spin-wheel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 0;
    transform-origin: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px var(--theme-surface); /* Creates a white border effect */
}

.spin-wheel-text {
    /* The rotation is now set in JS to align the text correctly within its segment */
    display: block;
    position: absolute;
    left: 0;
    width: 75%;
    text-align: left;
    padding-left: 38px;
}

/* Common styles for game area containers */
.game-area {
    position: relative; /* For positioning exit button */
}

.blinking {
    animation: blink-animation 0.5s infinite; /* Blink indefinitely */
}

@keyframes blink-animation {
    50% {
        background-color: var(--theme-info) !important;
    }
}

#write-answer-form {
    display: flex;
    flex-direction: row; /* Override the global form style to ensure items are side-by-side */
    gap: 0.5rem;
}

#write-answer-input {
    flex-grow: 1;
    font-size: 1rem;
}

#write-answer-form button {
    padding: 0.5rem 0.75rem; /* Make button less wide */
    flex-shrink: 0; /* Prevent button from shrinking if space is tight */
}

#write-check-btn {
    /* This ensures the button contains the icon and text spans correctly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#write-check-btn .check-icon { display: none; } /* Hide icon on desktop by default */

#next-write-btn,
#next-quiz-btn {
    /* This ensures the button contains the icon and text spans correctly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    #next-write-btn .next-icon,
#next-quiz-btn .next-icon {
    display: none; /* Hide icon on desktop by default */
}
#write-answer-input.correct {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success-hover) !important;
    color: white !important;
}

#write-answer-input.incorrect {
    background-color: var(--theme-danger) !important;
    border-color: var(--theme-danger-hover) !important;
    color: white !important;
}

#write-feedback { text-align: center; margin-top: 1.5rem; }
#write-correct-answer { margin-bottom: 1rem; color: var(--theme-text-primary); }
#write-correct-answer-text { font-weight: bold; }

#write-summary, #learn-summary {
    text-align: center;
}
#write-summary h3, #learn-summary h3, #listen-summary h3 {
    margin-bottom: 0.5rem;
}
#write-summary p, #learn-summary p, #listen-summary p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* Listen Mode Specific Styles */

#listen-status {
    text-align: center;
    color: var(--theme-text-secondary);
    font-style: italic;
}

#match-settings {
    text-align: center;
    padding: 2rem 0;
}

#match-settings h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#match-settings .form-group {
    margin-bottom: 1.5rem;
}

#match-settings label {
    margin-right: 1rem;
    font-weight: bold;
}

#match-settings select { padding: 0.5rem; border-radius: 4px; min-width: 100px; }

#match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary);
}

#match-columns-container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.match-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.match-tile {
    background-color: var(--theme-accent-light);
    color: var(--theme-text-primary);
    height: 60px;
    border: 2px solid var(--theme-border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    word-break: break-word;
    transition: transform 0.2s, opacity 0.4s, background-color 0.2s, border-color 0.2s;
}

.match-tile:not(.matched):hover {
    transform: scale(1.05);
    border-color: var(--theme-primary);
}

.match-tile.selected {
    border-color: var(--theme-primary);
    background-color: var(--theme-accent-light-selected);
    transform: scale(1.05);
}
.match-tile.matched {
    transform: scale(0);
    opacity: 0;
    cursor: default;
}

.match-tile.incorrect {
    background-color: var(--theme-danger) !important;
    border-color: var(--theme-danger-hover) !important;
    color: white;
}

#match-summary { text-align: center; margin-top: 2rem; }
#match-summary h3 { margin-bottom: 0.5rem; }
#match-summary p { font-size: 1.2rem; margin-bottom: 1.5rem; }

/* --- Game Settings Layout --- */
/* This section makes the labels and controls (inputs, dropdowns, toggles) appear on the same line. */
.game-settings .form-group,
.game-settings .toggle-switch-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 450px; /* Constrain width for a cleaner look */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Set a fixed, narrower width for the controls in game settings */
.game-settings .form-group > .custom-select-container,
.game-settings .form-group > input {
    width: 180px;
}

#quiz-answers {
    display: grid;
    grid-template-columns: 1fr; /* 1-column layout by default for mobile */
    gap: 1rem;
}

#quiz-feedback { text-align: center; margin-top: 1.5rem; }

#quiz-summary { text-align: center; }
#quiz-summary h3 { margin-bottom: 0.5rem; }
#quiz-summary p { font-size: 1.2rem; margin-bottom: 1.5rem; }

/* ==========================================================================
   Forms
   ========================================================================== */

form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

input[type="text"],
input[type="number"],
textarea,
select {
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    font-family: inherit; /* Ensure consistent font */
    font-weight: 400;
    line-height: 1.5;
    color: var(--theme-text-primary);
    background-color: var(--theme-surface);
    background-clip: padding-box;
    border: 1px solid var(--theme-border);
    border-radius: 4px; /* Matches button radius */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    color: var(--theme-text-primary);
    background-color: var(--theme-surface);
    border-color: var(--theme-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.form-group.smart-learn-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center; /* Center it within the settings panel */
    margin-top: 1rem; /* Add some space above it */
    margin-bottom: 0;
}

.smart-learn-group input[type="checkbox"] {
    width: auto; /* Override default input width */
    margin: 0;
}

.smart-learn-group label {
    margin: 0; /* Override default label margin */
    font-weight: normal; /* It's not a primary label */
    color: var(--theme-text-secondary);
}
/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base Button Style */
.btn { display: inline-block; font-weight: bold; color: #212529; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.6rem 1.2rem; font-size: 1rem; line-height: 1.5; border-radius: 4px; cursor: pointer; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}
.btn:hover { text-decoration: none; }

/* Colored Buttons */
.btn-primary { color: #fff; background-color: var(--theme-primary); border-color: var(--theme-primary); }
.btn-primary:hover { color: #fff; background-color: var(--theme-primary-hover); border-color: var(--theme-primary-hover); }
.btn-secondary { color: #fff; background-color: var(--theme-secondary); border-color: var(--theme-secondary); }
.btn-secondary:hover { color: #fff; background-color: var(--theme-secondary-hover); border-color: var(--theme-secondary-hover); }
.btn-success { color: #fff; background-color: var(--theme-success); border-color: var(--theme-success); }
.btn-success:hover { color: #fff; background-color: var(--theme-success-hover); border-color: var(--theme-success-hover); }
.btn-danger { color: #fff; background-color: var(--theme-danger); border-color: var(--theme-danger); }
.btn-danger:hover { color: #fff; background-color: var(--theme-danger-hover); border-color: var(--theme-danger-hover); }
.btn-info { color: #fff; background-color: var(--theme-info); border-color: var(--theme-info); }
.btn-info:hover { color: #fff; background-color: var(--theme-info-hover); border-color: var(--theme-info-hover); }

/* Icon Button */
.btn-icon { background: none; border: none; padding: 0; color: var(--theme-text-secondary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; width: 36px; height: 36px; vertical-align: middle; cursor: pointer; }
.btn-icon svg { width: 22px; height: 22px; }
.btn-icon:hover { background-color: var(--theme-accent-light); }
.btn-icon:hover svg { color: var(--theme-text-primary); }

/* Specific Icon Buttons */
.card-action-btn.btn-icon {
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.card-action-btn.btn-icon:hover { background-color: white; }
.card-action-btn.btn-icon svg { width: 16px; height: 16px; fill: var(--theme-text-primary); }

.more-btn.btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.game-exit-btn {
    font-size: 2rem;
    line-height: 1;
    color: var(--theme-text-secondary);
    width: 32px;
    height: 32px;
}

.game-exit-btn:hover {
    color: var(--theme-danger);
    background-color: var(--theme-accent-light);
}

/* Special button for Quiz Mode answers */
.btn-answer {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border: 2px solid var(--theme-border);
    background-color: var(--theme-accent-light);
    color: var(--theme-text-primary);
    font-weight: 500; /* Slightly less bold than default button */
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn-answer:hover:not(:disabled) {
    background-color: var(--theme-accent-light-selected);
    border-color: var(--theme-primary);
    transform: scale(1.05);
}

/* Correct/incorrect states will override hover state for clarity */
.btn-answer.correct, .btn-answer.correct:hover { background-color: var(--theme-success); border-color: var(--theme-success-hover); color: white; font-weight: bold; transform: none; }
.btn-answer.incorrect, .btn-answer.incorrect:hover { background-color: var(--theme-danger); border-color: var(--theme-danger-hover); color: white; transform: none; }

/* Dark mode specific overrides */
body.dark-mode .btn-answer {
    background-color: var(--theme-accent-light);
    color: var(--theme-text-primary);
}

body.dark-mode .btn-answer:hover:not(:disabled) {
    background-color: var(--theme-accent-light-selected);
    border-color: var(--theme-primary);
}

body.dark-mode .card-action-btn.btn-icon {
    background-color: rgba(40, 40, 40, 0.9);
}
body.dark-mode .card-action-btn.btn-icon:hover {
    background-color: #1e1e1e;
}

body.dark-mode .game-mode-container {
    background-color: #1a1a1a; /* Slightly different from surface for contrast */
}

body.dark-mode #modal-content {
    background: var(--theme-surface);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.dark-mode #modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

body.dark-mode .achievement-card {
    background-color: #2a2a2a;
}

body.dark-mode .achievement-card:active {
    background-color: var(--theme-accent-light-selected);
}

body.dark-mode .context-menu-item:hover {
    background-color: var(--theme-background);
}

body.dark-mode .context-menu {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

/* Dark Mode Toggle Switch Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
}

.theme-switch-wrapper span {
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--theme-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--theme-primary);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Modal Styles */
.hidden { display: none !important; }

#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

#modal-content {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    animation: slideIn 0.3s ease-out;
}

.modal-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
}

#modal-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--theme-text-primary);
}

#modal-body {
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary);
}

/* A simple container for form fields inside a modal */
.modal-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-form-fields .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-form-fields .form-group label {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.input-with-flag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--theme-border);
    border-radius: 4px; /* Match other inputs */
    padding-left: 0.75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: var(--theme-surface); /* Ensure background matches input */
}

.input-with-flag span {
    font-size: 1.5rem; /* Make flag emoji bigger */
    line-height: 1;
}

.input-with-flag input[type="text"] {
    border: none !important; /* Override default input border */
    box-shadow: none !important; /* Override default input shadow */
    flex-grow: 1;
    padding-left: 0; /* Remove default padding since parent has it */
    width: 100%; /* Ensure it fills the container */
}

.input-with-flag:focus-within {
    border-color: var(--theme-primary) !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow) !important;
}

/* For the share modal URL input */
.input-with-button {
    display: flex;
    align-items: stretch;
}

.input-with-button input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-with-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.share-url-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.share-url-group label {
    font-weight: bold;
    flex-shrink: 0; /* Prevent label from shrinking */
}
.share-url-group .input-with-button {
    flex-grow: 1; /* Allow input group to take remaining space */
}

/* --- Custom Select Dropdown --- */
.custom-select-container {
    position: relative;
    user-select: none;
}

.custom-select-selected {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background-color: var(--theme-surface);
    cursor: pointer;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.custom-select-container.open .custom-select-selected {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow);
}

.custom-select-selected .lang-flag-img {
    flex-shrink: 0;
}

/* Target only the text span to grow, not the arrow span */
.custom-select-selected > span:not(.custom-select-arrow) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: var(--theme-text-secondary);
    margin-left: auto; /* Push the arrow to the far right */
}

.custom-select-arrow svg {
    width: 16px;
    height: 16px;
}

.custom-select-container.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1010; /* Above modal content, below modal itself */
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-container.open .custom-select-options {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-select-option.highlighted {
    background-color: var(--theme-accent-light);
}

body.dark-mode .custom-select-option.highlighted {
    background-color: var(--theme-accent-light-selected);
}

/* Modal inputs should take up the full width */
#modal-body input[type="text"],
#modal-body textarea {
    width: 100%;
}

#modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin-top: -0.5rem; /* Pull it closer to the element above */
}

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast { padding: 1rem 1.5rem; border-radius: 6px; color: white; box-shadow: 0 3px 10px rgba(0,0,0,0.2); opacity: 0; transform: translateX(100%); transition: all 0.4s ease-in-out; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { background-color: var(--theme-success); }
.toast.error { background-color: var(--theme-danger); }
.toast.info { background-color: var(--theme-info); }

.toast.achievement-toast {
    background-color: #ffc107; /* Gold color */
    color: #212529; /* Dark text for contrast */
    border-left: 5px solid #d39e00;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.toast.achievement-toast strong {
    font-size: 1.1rem;
}

.toast.achievement-toast small {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Responsive Quiz Layout */
@media (min-width: 600px) {
    #quiz-answers {
        grid-template-columns: repeat(2, 1fr); /* 2-column layout for wider screens */
    }
}

@media (max-width: 500px) {
    /* No specific changes needed for 2-column layout, flexbox handles it. */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Context Menu Styles */
.context-menu {
    position: absolute;
    z-index: 1001;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    min-width: 180px;
    border: 1px solid #eee;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    align-items: center; /* This is key for vertical alignment */
    gap: 0.75rem; /* This adds space between the icon and the text */
}

.context-menu-item:hover {
    background-color: var(--theme-background);
}

.context-menu-item svg {
    width: 18px;
    height: 18px;
}

/* Admin Panel Styles */
#admin-panel {
    /* max-width and margin are now handled by .main-view */
}

.admin-header {
}

.admin-header h2 {
}

.admin-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
}

.admin-user-info .name {
    font-weight: bold;
}

.admin-user-info .email {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.admin-user-actions {
    display: flex;
    gap: 0.5rem;
}

.admin-section {
    background-color: var(--theme-surface);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.admin-actions-footer {
    margin-top: 1.5rem;
    text-align: right;
}
/* Achievements Page Styles */
#achievements-container {
    /* max-width and margin are now handled by .main-view */
}

.achievements-header {
}

#achievements-list {
    /* This is now a container for headers and grids, not a grid itself */
    display: block;
    padding: 1rem; /* Keep padding for the overall container */
}

.achievement-category-header {
    font-size: 1.5rem;
    color: var(--theme-text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--theme-border);
}

/* Remove top margin from the very first category header */
#achievements-list > .achievement-category-header:first-of-type {
    margin-top: 0;
}

.achievement-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.achievement-card {
    background-color: #fdfdfd;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.achievement-card.locked {
    filter: grayscale(1);
    opacity: 0.6;
}

.achievement-card-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.achievement-card-icon.tier-Bronze { color: #cd7f32; }
.achievement-card-icon.tier-Silver { color: #c0c0c0; }
.achievement-card-icon.tier-Gold { color: #ffd700; }
.achievement-card.locked .achievement-card-icon {
    color: #888 !important;
}
.achievement-card-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.achievement-card-description { font-size: 0.9rem; color: var(--theme-text-secondary); }

/* --- Discover Page --- */

#discover-container {
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 1.5rem; /* Creates space between header and list */
}

.discover-header {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make children take full width */
    gap: 0.75rem; /* Adjust gap for vertical layout */
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border);
}

.discover-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--text-primary);
}

#discover-search-input {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 4px; /* Match other inputs */
    background-color: var(--theme-surface); /* Match other inputs */
    color: var(--theme-text-primary);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Match other inputs */
}

#discover-search-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
    /* --- General Layout --- */
    .subscribe-text {
        display: none; /* Hide text on mobile */
    }

    .subscribe-icon {
        display: inline-block; /* Show icon on mobile */
        line-height: 0; /* Prevents extra space when icon is shown */
    }


    #app-body {
        flex-direction: column-reverse; /* Move nav to bottom */
    }

    #main-content-wrapper {
        padding-bottom: 65px; /* Space for the bottom nav bar + a little extra */
    }

    .main-view {
        width: 100%;
        margin: 0;
        padding: 0.75rem;
        border-radius: 0;
        box-shadow: none;
    }

    /* --- Header --- */
    header {
        padding: 0.5rem 1rem;
    }
    #app-title {
        font-size: 1.25rem;
    }

    /* --- Navigation --- */
    #left-icon-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 55px;
        flex-direction: row;
        justify-content: space-around;
        background-color: var(--theme-surface);
        border-top: 1px solid var(--theme-border);
        border-right: none;
        z-index: 1000; /* Ensure it's above other content */
        padding: 0;
    }

    .nav-icon-btn {
        flex: 1; /* Make buttons fill the space */
        height: 100%;
        border-radius: 0;
    }

    /* --- Collections View --- */
    .collections-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .collections-header h2 {
        font-size: 1.25rem;
    }

    .collections-list li {
        padding: 0.6rem 0.8rem;
        min-height: auto; /* Let content define height */
    }

    .collections-list li .collection-info {
        /* No changes needed, block display handles it */
    }

    .collections-list {
        grid-template-columns: 1fr; /* Stack collection items */
    }

    /* When a game is active on mobile, hide the header to save space */
    #collection-view-container.game-active #collection-view-header,
    #collection-view-container.game-active #collection-view-divider,
    #collection-view-container.game-active .card-view-actions {
        display: none;
    }

    /* --- Collection Detail / Card View --- */
    #collection-view-header {
        /* This is now the default, so no change needed */
        gap: 0.5rem;
    }

    #collection-view-title {
        font-size: 1.25rem;
    }

    .card-view-actions {
        gap: 0.25rem;
        flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    }

    #cards-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .card {
        height: 110px; /* Slightly smaller cards for mobile */
    }

    /* --- Discover Page --- */
    #discover-container {
        padding: 1rem;
    }

    .discover-header h2 {
        text-align: center;
    }

    /* --- Game Modes (Quiz, Write, Match) --- */
    .column, .game-mode-container {
        padding: 1rem;
    }

    #quiz-question, #write-question {
        padding: 0.8rem;
        font-size: 1.1rem;
    }

    #write-check-btn {
        flex-shrink: 0;
        width: 44px; /* Square-ish for an icon button */
        height: 44px; /* Roughly match input height */
        padding: 0;
        /* display, align-items, justify-content are inherited from desktop rule */
    }

    #write-check-btn .check-text {
        display: none; /* Hide text on mobile */
    }

    #write-check-btn .check-icon {
        display: inline-block; /* Show icon on mobile */
        line-height: 0; /* Prevents extra space */
    }

    #write-check-btn .check-icon svg {
        width: 24px;
        height: 24px;
    }

    #next-write-btn,
    #next-quiz-btn {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    #next-write-btn .next-text,
    #next-quiz-btn .next-text {
        display: none; /* Hide text on mobile */
    }

    #next-write-btn .next-icon,
    #next-quiz-btn .next-icon {
        display: inline-block; /* Show icon on mobile */
        line-height: 0; /* Prevents extra space */
    }

    #next-write-btn .next-icon svg,
#next-quiz-btn .next-icon svg,
#next-learn-btn .next-icon svg {
    width: 24px;
    height: 24px;
}

    .btn-answer {
        padding: 0.6rem;
    }

    #match-columns-container {
        flex-direction: column;
        gap: 1rem;
    }

    .match-tile {
        height: 40px;
    }

    /* --- Achievements on Mobile --- */
    .achievement-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    .achievement-card {
        padding: 0.75rem;
        cursor: pointer; /* Indicate it's clickable on mobile */
    }
    .achievement-card:active {
        background-color: var(--theme-accent-light);
    }
    body.dark-mode .achievement-card:active {
        background-color: var(--theme-accent-light-selected);
    }
    .achievement-card-icon {
        font-size: 2rem;
    }
    .achievement-card-name {
        font-size: 0.9rem;
    }
    .achievement-card-description {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, margin-top 0.3s ease-out;
        margin-top: 0;
    }
    .achievement-card.expanded .achievement-card-description {
        max-height: 100px; /* Animate to this height */
        margin-top: 0.5rem; /* Add space when it appears */
    }

    /* --- Modals --- */
    #modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    /* --- Product Description Page --- */
    .features-grid {
        flex-direction: column;
    }
}

@media (min-width: 769px) {
    .subscribe-text {
        display: inline-block; /* Show text on desktop */
    }
    .subscribe-icon {
        display: none; /* Hide icon on desktop */
    }
}

@media (max-width: 480px) {
    /* Further refinements for very small screens */
    body {
        font-size: 14px; /* Reduce base font size */
    }

    header {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    #main-content-wrapper {
        padding-bottom: 60px;
    }

    #app-title {
        display: none; /* Hide title on very small screens to save space */
    }

    #app-logo {
        height: 28px;
        width: 28px;
    }

    #user-info #profile-picture {
        width: 36px;
        height: 36px;
    }

    #left-icon-bar {
        height: 50px;
    }

    .collections-list li#add-collection-card .plus-icon {
        font-size: 1.8rem;
    }

    #toast-container {
        width: 90%;
        left: 5%;
        right: 5%;
        top: 10px;
    }

    #cards-container {
        grid-template-columns: 1fr 1fr; /* Force 2 columns */
        gap: 0.5rem;
    }

    .card {
        height: 100px;
    }

    .card-stats-indicator {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }

    #quiz-question, #write-question {
        min-height: 50px;
        padding: 0.6rem;
    }

    #quiz-answers {
        gap: 0.4rem;
    }
}