/* Игры с иероглифами. Опираются на токены марки, чтобы страница игры не
   выглядела чужой рядом с остальным сайтом: тот же красный акцент, тот
   же нефрит на верном ответе, та же иероглифическая гарнитура. */

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-6);
}
.games-card {
    display: grid;
    gap: 6px;
    padding: var(--sp-7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.games-card:hover { border-color: var(--red-500); transform: translateY(-2px); text-decoration: none; }
.games-card__emoji { font-size: 28px; }
.games-card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.games-card__lead { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.games-card__who { color: var(--text-subtle); font-size: var(--fs-2xs); }
.games-note { margin-top: var(--sp-7); color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Панель набора слов ------------------------------------------------ */
.game-setup {
    padding: var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    margin-bottom: var(--sp-6);
}
/* Уровни уезжают вбок, а не переносятся: шесть чипов плюс режимы
   занимали на телефоне весь первый экран, и до игры приходилось
   прокручивать. Действия при этом остаются на виду вторым рядом —
   когда вбок уезжала ещё и кнопка «Новый набор», выходило хуже
   исходного. */
.game-setup__levels {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.game-setup__levels > * { flex: none; }
.game-setup__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.game-setup__label { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.game-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-size: var(--fs-sm); cursor: pointer; }
.game-chip input { margin: 0; width: auto; }
.game-chip:has(input:checked) { border-color: var(--red-500); color: var(--red-600); }
.game-setup__count { width: 70px; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--r-control); font: inherit; }
.game-modes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.game-mode { padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--fs-2xs); cursor: pointer; }
.game-mode.is-active { border-color: var(--red-500); color: var(--red-600); font-weight: var(--fw-semibold); }
.game-setup__own { margin-top: 10px; font-size: var(--fs-sm); }
.game-setup__own textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--r-control); font: inherit; }
.game-setup__hint { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-2xs); }

.game-status {
    min-height: 22px;
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-sm);
}
.game-status--good { color: var(--jade-600, #2F7A67); font-weight: var(--fw-semibold); }
.game-status--bad { color: var(--red-600); }
.game-hint { color: var(--text-muted); font-size: var(--fs-sm); }
/* Без запаса по высоте: у коротких игр он давал пустое поле под доской. */
.game-root { min-height: 0; }

/* --- Общие плитки ------------------------------------------------------ */
.is-hanzi { font-family: var(--font-hanzi), serif; }

.game-board { display: grid; gap: 10px; margin-bottom: var(--sp-6); }
.game-board--pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-board--memo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-board--odd { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.game-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    cursor: pointer;
    padding: 6px;
    font: inherit;
}
.game-card__back { position: absolute; inset: 0; border-radius: inherit; background: var(--red-500); }
.game-card__face { display: none; align-items: center; justify-content: center; height: 100%; font-size: 15px; line-height: 1.2; text-align: center; overflow: hidden; }
.game-card__face.is-hanzi { font-size: 30px; }
.game-card.is-open .game-card__back, .game-card.is-done .game-card__back { display: none; }
.game-card.is-open .game-card__face, .game-card.is-done .game-card__face { display: flex; }
.game-card.is-done { border-color: var(--jade-500, #3E9C82); background: var(--jade-50, #EFF7F4); }

.game-tile, .game-slot, .game-answer {
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    font: inherit;
    font-size: 26px;
    cursor: pointer;
}
.game-tile.is-gone { background: var(--paper-100, #F4F2ED); border-style: dashed; }
.game-answer.is-wrong { border-color: var(--red-500); color: var(--red-600); }
.game-choices, .game-tiles, .game-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); }
.game-slots { min-height: 54px; }
.game-slot { border-style: dashed; }

/* --- Тоны --------------------------------------------------------------- */
.game-tonecard { display: grid; justify-items: center; gap: 4px; padding: var(--sp-7) 0; }
.game-tonecard__hanzi { font-size: 64px; line-height: 1; }
.game-tonecard__gloss { color: var(--text-muted); font-size: var(--fs-sm); }
.game-bins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.game-bin { display: grid; gap: 2px; padding: 10px 6px; border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface-card); font: inherit; cursor: pointer; }
.game-bin__num { font-size: 22px; font-weight: var(--fw-bold); }
.game-bin__name { font-size: var(--fs-3xs); color: var(--text-muted); }
.game-bin:hover { border-color: var(--red-500); }

/* --- Задание с переводом ------------------------------------------------ */
.game-task { display: grid; gap: 2px; margin-bottom: var(--sp-5); }
.game-task__gloss { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.game-task__pinyin { color: var(--text-muted); font-size: var(--fs-sm); }

.game-option { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface-card); font: inherit; text-align: left; cursor: pointer; }
.game-option .is-hanzi { font-size: 28px; }
.game-option__pinyin { color: var(--text-muted); font-size: var(--fs-xs); }
.game-option__gloss { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; }
.game-option.is-picked { border-color: var(--red-500); }
.game-option.is-right { border-color: var(--jade-500, #3E9C82); background: var(--jade-50, #EFF7F4); }
.game-option.is-wrong { border-color: var(--red-500); background: var(--red-50, #FCEFEF); }
.game-option.is-shown { opacity: .55; }

/* --- Цепочка ------------------------------------------------------------ */
.game-chain { margin: 0 0 var(--sp-5); padding-left: 22px; }
.game-chain li { margin-bottom: 4px; }
.game-chain .is-hanzi { font-size: 22px; }
.game-chain__gloss { color: var(--text-muted); font-size: var(--fs-2xs); }
.game-chainform { display: flex; flex-wrap: wrap; gap: 8px; }
.game-chaininput { flex: 1 1 200px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--r-control); font: inherit; font-size: 20px; }

.game-reading { font-size: 34px; font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }

/* --- Объясни слово ------------------------------------------------------ */
.game-clock { font-size: 34px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.game-explain { display: grid; justify-items: center; gap: 4px; padding: var(--sp-7) 0; }
.game-explain__hanzi { font-size: 60px; line-height: 1; }
.game-explain__pinyin { color: var(--text-muted); }
.game-explain__gloss { color: var(--text-subtle); font-size: var(--fs-sm); }
.game-explain__actions { display: flex; gap: 10px; }

.game-about {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.game-about summary { cursor: pointer; color: var(--text-body); }
.game-about__who { color: var(--text-subtle); }
/* Ряд «другие игры» был набран красным на красном: восемь ссылок
   акцентным цветом подряд читались одной сплошной полосой и спорили с
   самой игрой за внимание. */
.game-more {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.game-more a { color: var(--text-body); text-decoration: none; }
.game-more a:hover { color: var(--red-600); text-decoration: underline; }

@media (max-width: 599px) {
    .game-board--pairs, .game-board--memo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .game-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.game-task__hint { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 4px; }
.game-task__hint summary { cursor: pointer; }