/* Настройки, вопрос-ответ, итог и подсказки игры.
   Часть components/lesson-ui.css; порядок частей важен — см. static/README.md. */
#gameSettingsModal .layout-grid-auto {
    --layout-grid-gap: var(--learn-grid-gap-loose);
    --layout-grid-min: var(--learn-grid-min-modal);
}

[data-info-text].info-trigger {
    margin-left: 8px;
}

[data-info-text].info-trigger .action-icon {
    --action-icon-size: var(--control-icon-size-sm);
}

.account-page [data-info-text].info-trigger {
    margin-left: auto;
}

#gameSettingsModal .layout-grid-auto > .item-card {
    --item-card-gap: 12px;
    --item-card-padding: 18px;
    --item-card-radius: var(--surface-radius);
    --item-card-border: 1px solid var(--theme-border-normal);
    --item-card-bg: var(--theme-surface-base);
    --item-card-shadow: none;
    position: relative;
    overflow: hidden;
}

#gameSettingsModal .layout-grid-auto > .item-card h3 {
    margin: 0;
    font-size: 18px;
}

#gameSettingsModal .field-stack {
    --field-stack-gap: 10px;
    --field-control-border: 1px solid var(--theme-border-normal);
    --field-control-height: var(--control-height-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

#gameSettingsModal .text-hint {
    margin-bottom: 0;
}

#account-local .item-card--stack:last-child > .field-stack {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--theme-border-normal);
    --layout-stack-gap: 12px;
    justify-items: start;
}

#game-history {
    list-style: none;
    padding: 0;
    margin: 0;
    --layout-stack-gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

#game-history .item-card {
    --item-card-gap: 8px;
    --item-card-padding: 14px;
    --item-card-radius: var(--surface-radius);
    --item-card-border: 1px solid var(--theme-border-normal);
    --item-card-bg: var(--theme-surface-base);
    font-size: var(--font-size-sm);
    background-image: none;
}

#game-history .item-card[data-history-item-result="correct"] {
    --item-card-border: 1px solid var(--game-teal-border);
    --item-card-bg: var(--game-teal-surface);
}

#game-history .item-card[data-history-item-result="wrong"] {
    --item-card-border: 1px solid var(--game-danger-border);
    --item-card-bg: var(--theme-surface-danger-soft);
}

#game-history [data-history-meta].layout-split {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

#game-history [data-history-meta].text-meta {
    --text-meta-size: var(--type-control-meta-size);
}

[data-game-card] [data-game-card-main] {
    display: grid;
    gap: 16px;
}

[data-game-card] .learn-game-card__body {
    display: grid;
    gap: 12px;
}

[data-game-card] .learn-game-card__feedback {
    display: grid;
    gap: 8px;
    min-height: 18px;
}

[data-game-card] .learn-game-card__actions {
    margin-top: auto;
}

#cloze-prompt.text-summary {
    --text-summary-color: var(--text-secondary);
    --text-summary-size: 15px;
    --text-summary-line: 1.5;
    max-width: 44ch;
}

#cloze-clue.text-hint {
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

[data-game-status] {
    min-height: 18px;
}

[data-game-status].text-meta {
    --text-meta-size: var(--type-control-meta-size);
}

[data-game-question] {
    font-size: 26px;
    font-weight: 400;
}

#cloze-question-meta.badge {
    --badge-weight: 400;
}

[data-game-options] {
    display: grid;
    gap: 12px;
}

[data-learn-grid][data-game-step="mix"] [data-game-card] {
    display: none;
}

[data-learn-grid][data-game-step="mix"] [data-game-card][data-mix-active="true"] {
    display: grid;
}

[data-game-option].menu-button {
    --menu-button-min-height: 48px;
    --menu-button-padding: 12px var(--button-padding-x-md);
    --menu-button-radius: var(--surface-radius);
    --menu-button-border: var(--theme-border-normal);
    --menu-button-color: var(--text-primary);
    --menu-button-font-size: var(--font-size-sm);
    --menu-button-line-height: var(--type-button-line);
    --menu-button-gap: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

[data-game-option].menu-button.is-correct {
    border-color: var(--game-teal-border);
    background: var(--game-teal-surface);
    color: var(--text-primary);
    box-shadow: none;
}

[data-game-option].menu-button.is-wrong {
    border-color: var(--game-danger-border);
    background: var(--theme-surface-danger-soft);
    color: var(--text-primary);
    box-shadow: none;
}

[data-game-option].menu-button:disabled {
    opacity: 1;
    cursor: default;
}

[data-game-result] {
    display: block;
    padding: 16px;
    border-radius: var(--surface-radius);
    border: 1px solid var(--theme-border-normal);
    background: var(--theme-surface-base);
    box-shadow: none;
    font-size: var(--font-size-sm);
    line-height: var(--type-body-line);
    color: var(--text-primary);
}

[data-game-result] strong {
    font-weight: var(--font-weight-semibold);
}

[data-game-result] a {
    color: inherit;
    text-decoration: none;
}

[data-game-result].is-correct {
    color: var(--text-primary);
    border-color: var(--game-teal-border);
    background: var(--game-teal-surface);
}

[data-game-result].is-wrong {
    color: var(--text-primary);
    border-color: var(--game-danger-border);
    background: var(--theme-surface-danger-soft);
}

[data-game-result]:empty {
    display: none;
}

#game-cloze [data-cloze-source-panel] {
    gap: 10px;
    margin: 12px 0 6px;
}

#game-cloze [data-cloze-source-panel] > .text-meta {
    --text-meta-size: 12px;
}

#game-cloze [data-cloze-source-controls] {
    gap: 8px;
}

#game-cloze [data-cloze-source].chip-button {
    --chip-button-min-height: 32px;
    --chip-button-font-size: 12px;
    box-shadow: none;
}

[data-audio-controls] {
    gap: 10px;
}

[data-audio-controls] .audio-button {
    border-radius: var(--button-radius-unified);
    box-shadow: none;
}

[data-game-placeholder] {
    font-size: 14px;
    color: var(--theme-text-muted);
    text-align: center;
}