/* ОФОРМЛЕНИЕ МИНИ-ИГР («Лесная поляна», пачка 7 / Ф2)
   Игры собираются из общих деталей: деревянная доска (.gm-header), табличка (.gm-plank),
   пергамент (.gm-parch), акцентная кнопка (.gm-acc), пустой слот (.gm-slot).
   Состояния деталей: .is-ok, .is-bad, .is-dim, .is-selected, .is-found.
   По сезону меняются только фон-сцена и акцентный цвет (html[data-season], см. GameSeason в games.js);
   дерево, пергамент и звёзды общие. Картинки — images/game/*.webp, их готовит tools/build_game_art.py
   из исходников NanoBanana (images/game/src); если картинку убрать (none), видна CSS-заглушка.
   Список картинок и подсказки к ним — prototypes/game-visual/ASSETS.md. */

:root {
    --gm-wood: #b77b4a;
    --gm-wood-l: #c98a55;
    --gm-wood-m: #a8693c;
    --gm-wood-d: #7c4a2a;
    --gm-wood-text: #4a2c17;
    --gm-parch: #fff6e2;
    --gm-ok: #3a9c4f;
    --gm-ok-l: #5cc56f;
    --gm-ok-d: #256b35;
    --gm-bad: #c9463a;
    --gm-bad-l: #ee6a5b;
    --gm-bad-d: #8a2a22;
    /* Сезонное */
    --gm-acc: #e98b2a;
    --gm-acc-d: #b4621a;
    --gm-veil: 255, 248, 235;
    --gm-scene: url('images/game/scene-autumn.webp');
    /* Картинки из NanoBanana; none — останется CSS-заглушка */
    --gm-img-wood: url('images/game/wood.webp');               /* бесшовная текстура дерева: доска и таблички */
    --gm-img-parch: url('images/game/parchment.webp');         /* бесшовная текстура пергамента */
    --gm-img-board-top: url('images/game/board-top-autumn.webp'); /* сезонная накладка на верх доски */
    --gm-img-board-corner-l: url('images/game/board-top-autumn-corner-l.webp'); /* её загиб по углам доски */
    --gm-img-board-corner-r: url('images/game/board-top-autumn-corner-r.webp');
    --gm-img-basket: url('images/game/basket.webp'); /* корзинка «Сортировки»; none — останется CSS-рисунок */
    --gm-basket-draw: none;         /* CSS-рисунок корзинки (block — если картинку убрать) */
    /* «Яблоня» (С18): дерево и яблоко — картинки (tools/build_game_art.py tree apple). Дерево растягивается на крону с яблоками
       и ствол (--gm-tree-trunk-h — место под ствол картинки). Без картинок (none) — CSS-рисунок: крона из кругов
       (--gm-tree-crown-bg), ствол (--gm-tree-trunk-bg, высота clamp(24px, 2.6cqi, 32px), --gm-tree-trunk-mt: -8px),
       яблоко --gm-apple-bg: radial-gradient(circle at 34% 30%, #ff9c8a 0 10%, #ee5545 42%, #c2352c 78%, #a42a23) с листиком
       (--gm-apple-leaf: block) и обводкой (--gm-apple-border: #8a2a22) */
    --gm-tree-bg: url('images/game/tree.webp') center / 100% 100% no-repeat;
    --gm-tree-crown-bg: none;
    --gm-tree-trunk-bg: none;
    --gm-tree-trunk-h: clamp(34px, 4.6cqi, 50px);
    --gm-tree-trunk-mt: 0px;
    --gm-apple-bg: url('images/game/apple.webp') center / contain no-repeat;
    --gm-apple-leaf: none;
    --gm-apple-border: transparent;
}
/* Сезон ставит GameSeason (games.js) по дате; новый сезон без картинок не включать в GameSeason.READY */
html[data-season="winter"] { --gm-acc: #3b8fd9; --gm-acc-d: #23649e; --gm-veil: 240, 247, 255;
    --gm-scene: url('images/game/scene-winter.webp'); --gm-img-board-top: url('images/game/board-top-winter.webp');
    --gm-img-board-corner-l: url('images/game/board-top-winter-corner-l.webp'); --gm-img-board-corner-r: url('images/game/board-top-winter-corner-r.webp'); }
html[data-season="spring"] { --gm-acc: #2fb59c; --gm-acc-d: #1d8471; --gm-veil: 246, 255, 240;
    --gm-scene: url('images/game/scene-spring.webp'); --gm-img-board-top: url('images/game/board-top-spring.webp');
    --gm-img-board-corner-l: url('images/game/board-top-spring-corner-l.webp'); --gm-img-board-corner-r: url('images/game/board-top-spring-corner-r.webp'); }
html[data-season="summer"] { --gm-acc: #f2b01e; --gm-acc-d: #c0870c; --gm-veil: 255, 252, 235;
    --gm-scene: url('images/game/scene-summer.webp'); --gm-img-board-top: url('images/game/board-top-summer.webp');
    --gm-img-board-corner-l: url('images/game/board-top-summer-corner-l.webp'); --gm-img-board-corner-r: url('images/game/board-top-summer-corner-r.webp'); }

/* На странице игры и в предпросмотре редактора лисёнок сайта в углу не нужен: у игры свой */
body:has(.gm-shell:not(.hidden *)) #mascot-container { display: none; }

/* --- Рамка игры --- */
.gm-shell {
    container-type: inline-size;
    /* 'Game IL' — только буквы I и l (с засечками и хвостиком, С24), остальное — Rubik */
    font-family: 'Game IL', 'Rubik', 'Nunito', sans-serif;
    color: var(--gm-wood-text);
    background: var(--gm-scene) center / cover no-repeat, #f6ead5;
    box-shadow: 0 20px 50px rgba(124, 74, 42, .25);
}
.gm-shell::before { /* светлая вуаль в центре, чтобы фон не мешал читать */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(var(--gm-veil), .93), rgba(var(--gm-veil), .55) 65%, rgba(var(--gm-veil), 0));
}

/* --- Деревянная доска сверху --- */
.gm-header {
    margin: 40px 18px 0; height: 76px; border-radius: 20px; color: #fff;
    background: linear-gradient(rgba(110, 62, 30, .25), rgba(110, 62, 30, .45)), var(--gm-img-wood) center / 480px, linear-gradient(#c88957, var(--gm-wood-m));
    border: 3px solid var(--gm-wood-d);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 5px 0 var(--gm-wood-d);
}
.gm-title { font-weight: 800; font-size: 20px; line-height: 1.1; text-shadow: 0 2px 0 var(--gm-wood-d); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-chip { background: rgba(74, 44, 23, .35); border-radius: 12px; font-weight: 700; color: #fff; }
.gm-chip .gm-chip-icon { color: #ffd88a; }
.gm-chip.gm-chip-err .gm-chip-icon { color: #ffb4a8; }
.gm-icon-btn {
    background: var(--gm-parch); color: var(--gm-wood-d); border-radius: 12px;
    box-shadow: 0 4px 0 var(--gm-wood-d); transition: transform .15s, box-shadow .15s;
}
.gm-icon-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--gm-wood-d); }
.gm-icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gm-wood-d); }

/* Сезонная накладка (листья, снег, цветы) лежит на верхнем крае доски; текст и кнопки — поверх неё.
   ::before — полоса между скруглениями (round: целое число повторов, поэтому оба конца полосы
   совпадают с угловыми тайлами), ::after — угловые тайлы, загнутые по скруглению.
   Размеры совпадают с BOARD_* в tools/build_game_art.py: скругление 20, полоса 48 (10 — на доске), выступ вбок 14. */
.gm-header::before {
    content: ''; position: absolute; left: 17px; right: 17px; top: -41px; height: 48px; pointer-events: none; /* -3 px: отсчёт от внутреннего края рамки */
    background: var(--gm-img-board-top) left bottom / auto 100%;
    background-repeat: round no-repeat;
}
.gm-header::after {
    content: ''; position: absolute; left: -17px; right: -17px; top: -41px; height: 58px; pointer-events: none;
    background: var(--gm-img-board-corner-l) left top / 34px 58px no-repeat, var(--gm-img-board-corner-r) right top / 34px 58px no-repeat;
}
.gm-header > * { z-index: 1; }

/* Полоска вопросов: ширина постоянная, деления сужаются; больше 20 — сплошная шкала */
.gm-track { display: flex; gap: 4px; width: 300px; height: 14px; padding: 3px; border-radius: 10px; background: rgba(74, 44, 23, .45); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.gm-track b { flex: 1; border-radius: 5px; background: rgba(255, 246, 226, .18); transition: background .3s; }
.gm-track b.is-ok { background: #6ad17c; }
.gm-track b.is-bad { background: #f08a7a; }
.gm-track b.is-seen { background: #f5d9a8; }
.gm-track b.is-cur { background: #ffd88a; box-shadow: 0 0 6px rgba(255, 216, 138, .8); }
.gm-track.is-solid { gap: 0; }
.gm-track.is-solid b { border-radius: 0; }
.gm-track.is-solid b:first-child { border-radius: 5px 0 0 5px; }
.gm-track.is-solid b:last-child { border-radius: 0 5px 5px 0; }
.gm-count { font-weight: 700; font-size: 14px; min-width: 44px; text-shadow: 0 1px 0 var(--gm-wood-d); }

/* --- Поле: по бокам полосы под лисёнка, кнопки до них не дотягиваются --- */
.gm-board { padding-left: 190px !important; padding-right: 190px !important; }
.gm-board.gm-board-wide { padding: 12px 24px 24px !important; } /* итог: снизу место под тень карточки */
@container (max-width: 1000px) {
    .gm-board { padding-left: 16px !important; padding-right: 16px !important; }
    .gm-fox-lane { display: none !important; }
}
.gm-fox-lane { position: absolute; right: 12px; bottom: 10px; width: 176px; z-index: 15; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gm-fox {
    width: 168px; height: 168px; pointer-events: none;
    background-image: url('images/characters/fox/fox-reactions.webp'); background-size: 300% 300%; background-position: 0 0;
    filter: drop-shadow(0 8px 10px rgba(74, 44, 23, .25));
}
.gm-fox.is-idle { background-image: url('images/characters/fox/fox-directions.webp'); } /* С10: обычное лицо — смотрит на ученика */
.gm-fox.gm-pop { animation: gmPop .45s; }
@keyframes gmPop { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-4deg); } 100% { transform: scale(1); } }
.gm-bubble {
    position: relative; margin-bottom: 8px; padding: 6px 14px; white-space: nowrap;
    background: #fff; border: 3px solid var(--gm-wood-d); border-radius: 18px; font-weight: 700; font-size: 16px;
    opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.gm-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: #fff; border-right: 3px solid var(--gm-wood-d); border-bottom: 3px solid var(--gm-wood-d); transform: rotate(45deg); }
.gm-bubble.is-show { opacity: 1; transform: none; }

/* --- Детали --- */
/* .gm-wood — деревянная поверхность; .gm-plank — нажимаемая табличка */
.gm-wood, .gm-plank {
    color: #fff; font-weight: 700; text-shadow: 0 2px 0 rgba(74, 44, 23, .75), 0 0 6px rgba(74, 44, 23, .35);
    /* Полупрозрачное затемнение поверх текстуры — чтобы белый текст читался на светлом дереве */
    background: linear-gradient(rgba(110, 62, 30, .22), rgba(110, 62, 30, .42)), var(--gm-img-wood) center / 480px, repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 3px, transparent 3px 22px), linear-gradient(var(--gm-wood-l), var(--gm-wood-m));
    border: 3px solid var(--gm-wood-d); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 6px 0 var(--gm-wood-d);
}
.gm-plank { transition: transform .15s, box-shadow .15s, opacity .25s, filter .25s, background .25s; cursor: pointer; user-select: none; }
.gm-wood, .gm-plank { overflow-wrap: anywhere; } /* страховка: слово не вылезает за табличку */
.gm-plank:hover { transform: translateY(-3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 9px 0 var(--gm-wood-d); }
.gm-plank:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 3px 0 var(--gm-wood-d); }
.gm-plank.gm-nails { position: relative; }
.gm-plank.gm-nails::before, .gm-plank.gm-nails::after { content: ''; position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #6b3d1f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.gm-plank.gm-nails::before { left: 11px; }
.gm-plank.gm-nails::after { right: 11px; }

.gm-parch {
    color: var(--gm-wood-text);
    background: var(--gm-img-parch) center / 600px, var(--gm-parch);
    border: 3px solid var(--gm-wood-d); border-radius: 22px;
    box-shadow: 0 6px 0 var(--gm-wood-d);
}
button.gm-parch, .gm-parch.gm-press { transition: transform .15s, box-shadow .15s, opacity .25s, filter .25s; cursor: pointer; }
button.gm-parch:hover, .gm-parch.gm-press:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--gm-wood-d); }
button.gm-parch:active, .gm-parch.gm-press:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--gm-wood-d); }

.gm-acc {
    color: #fff; background: var(--gm-acc); border: 3px solid var(--gm-acc-d);
    box-shadow: 0 5px 0 var(--gm-acc-d); transition: transform .15s, box-shadow .15s, filter .15s; cursor: pointer;
}
.gm-acc:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--gm-acc-d); filter: brightness(1.06); }
.gm-acc:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gm-acc-d); }

.gm-slot { background: rgba(255, 246, 226, .6); border: 3px dashed rgba(124, 74, 42, .45); border-radius: 14px; }
/* Выбранный и неверно заполненный пропуск («Вставь буквы») */
.gm-slot.is-selected { background: #ffe2a8; border-style: solid; border-color: var(--gm-acc-d); box-shadow: 0 0 0 4px rgba(255, 216, 138, .6); }
.gm-slot.is-bad { background: rgba(255, 214, 214, .8); border-style: solid; border-color: var(--gm-bad); }
button.gm-slot { cursor: pointer; }
.gm-hint { color: rgba(74, 44, 23, .6); }

/* Состояния (перебивают и табличку, и пергамент) */
.is-ok.gm-plank, .is-ok.gm-parch, .is-ok.gm-acc {
    color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    background: linear-gradient(var(--gm-ok-l), var(--gm-ok)); border-color: var(--gm-ok-d); box-shadow: 0 6px 0 var(--gm-ok-d);
}
.is-bad.gm-plank, .is-bad.gm-parch, .is-bad.gm-acc {
    color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    background: linear-gradient(var(--gm-bad-l), var(--gm-bad)); border-color: var(--gm-bad-d); box-shadow: 0 6px 0 var(--gm-bad-d);
}
.is-selected.gm-plank, .is-selected.gm-parch {
    color: var(--gm-wood-text); text-shadow: none;
    background: #ffe2a8; border-color: var(--gm-acc-d); box-shadow: 0 6px 0 var(--gm-acc-d), 0 0 0 4px rgba(255, 216, 138, .6);
}
.is-pop { transform: scale(1.05) !important; z-index: 10; }
.is-dim { opacity: .55; filter: grayscale(.85); pointer-events: none; }
.is-locked { pointer-events: none; }
.gm-shake { animation: gmShake .4s; }
@keyframes gmShake { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 8px; } 60% { translate: -5px; } 80% { translate: 5px; } }

/* --- Старт --- */
.gm-start-title { font-size: clamp(30px, 5cqi, 52px); font-weight: 800; line-height: 1.15; text-align: center; padding: 8px 34px; margin-bottom: 30px; max-width: 90%; white-space: pre-line; }
.gm-start-btn { width: 128px; height: 128px; border-radius: 36px; display: flex; align-items: center; justify-content: center; font-size: 64px; }

/* --- Переключатель режима на старте («Анаграммы»: обычный / виселица / сложный; остальные: обычный / сложный) --- */
.gm-mode-switch { display: flex; gap: 6px; padding: 6px 6px 10px; margin: -12px 0 10px; max-width: 100%; } /* pb больше pt: под активной кнопкой её тень */
.gm-mode-switch button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 26px; border-radius: 12px; font-weight: 700; font-size: 18px; transition: all .15s; }
.gm-mode-switch button.gm-hint:hover { background: rgba(124, 74, 42, .1); }
.gm-mode-hint { font-size: 14px; font-weight: 700; text-align: center; padding: 4px 14px; border-radius: 12px; margin: 0 0 22px; max-width: 90%; }
.gm-mode-hint:empty { visibility: hidden; }

/* --- Сложный режим (Ф15): вопрос и поле ввода --- */
.gm-type-q { padding: 12px 28px; margin-bottom: 18px; max-width: 100%; text-align: center; border-radius: 26px; }
.gm-type-form { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.gm-type-input { flex: 1; min-width: 0; font: inherit; font-size: 28px; font-weight: 800; text-align: center; padding: 10px 16px; border-radius: 18px; outline: none;
    border: 3px solid var(--gm-wood-d); background: #fffaf0; color: var(--gm-wood-text); box-shadow: inset 0 3px 0 rgba(124, 74, 42, .15); transition: background .2s, border-color .2s; }
.gm-type-input::placeholder { color: rgba(74, 44, 23, .4); font-weight: 600; font-size: 20px; }
.gm-type-input:focus { border-color: var(--gm-acc-d); box-shadow: inset 0 3px 0 rgba(124, 74, 42, .15), 0 0 0 4px rgba(255, 216, 138, .65); }
.gm-type-input.is-ok { border-color: var(--gm-ok-d); background: #e3f6e6; color: var(--gm-ok-d); }
.gm-type-input.is-bad { border-color: var(--gm-bad-d); background: #fde5e1; color: var(--gm-bad-d); }
.gm-type-ok { width: 64px; flex-shrink: 0; border-radius: 18px; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.gm-type-msg { min-height: 2.1em; margin-top: 10px; padding: 4px 14px; border-radius: 12px; font-weight: 800; font-size: 18px; text-align: center; max-width: 100%; }
.gm-type-msg:empty { visibility: hidden; }
.gm-type-msg.is-bad, .gm-type-msg.is-hint { background: rgba(255, 250, 240, .92); box-shadow: 0 3px 0 rgba(124, 74, 42, .3); }
.gm-type-msg.is-bad { color: var(--gm-bad-d); }
.gm-type-msg.is-bad b { color: var(--gm-ok-d); }
.gm-type-msg.is-hint { color: var(--gm-wood-text); }
@media (max-width: 639.98px) {
    .gm-mode-switch { gap: 4px; padding: 5px 5px 9px; }
    .gm-mode-switch button { padding: 8px 10px; font-size: 14px; }
    .gm-mode-switch button i { display: none; } /* Три режима на 375px — без значка */
    .gm-board.gm-typing { justify-content: flex-start; padding-top: 20px; }
    .gm-type-q { padding: 10px 16px; margin-bottom: 12px; }
    .gm-type-input { font-size: 22px; padding: 8px 10px; }
    .gm-type-input::placeholder { font-size: 16px; }
    .gm-type-ok { width: 54px; font-size: 26px; }
    .gm-type-msg { font-size: 16px; }
}

/* --- Итог --- */
.gm-finish { width: 100%; max-width: 460px; padding: 10px 30px 18px; border-radius: 30px; text-align: center; box-shadow: 0 9px 0 var(--gm-wood-d), 0 25px 50px rgba(74, 44, 23, .3); }
.gm-finish .gm-fox { width: 84px; height: 84px; margin: 0 auto; filter: none; }
.gm-stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 2px 0 2px; }
.gm-stars i { font-size: 38px; color: #e8d9bd; }
.gm-stars i:nth-child(2) { font-size: 46px; margin-bottom: 5px; }
.gm-stars i.is-on { color: #fbbf24; filter: drop-shadow(0 3px 0 #c98a0c); animation: gmStar .5s both; }
@keyframes gmStar { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1); } }
.gm-finish .gm-btn { padding: 10px; border-radius: 16px; font-weight: 800; font-size: 15px; }
.gm-btn-light { background: #fff; color: var(--gm-wood-d); border: 3px solid var(--gm-wood-d); box-shadow: 0 5px 0 var(--gm-wood-d); transition: transform .15s, box-shadow .15s; }
.gm-btn-light:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--gm-wood-d); }
.gm-btn-light:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gm-wood-d); }
.gm-btn-mist { background: #ffe9b8; }

/* --- Поиск слов: клетки сетки --- */
.gm-cell { background: rgba(255, 255, 255, .7); color: var(--gm-wood-text); box-shadow: 0 2px 0 rgba(124, 74, 42, .25); }
.gm-cell.is-path { background: var(--gm-acc); color: #fff; box-shadow: 0 2px 0 var(--gm-acc-d); position: relative; z-index: 10; }
.gm-cell.is-found { background: var(--gm-ok); color: #fff; box-shadow: 0 2px 0 var(--gm-ok-d); }

/* --- Найди ошибку: слова предложения --- */
.gm-fm-word { color: var(--gm-wood-text); }
.gm-fm-word:hover { color: var(--gm-acc-d); }
.gm-fm-word.is-bad-text { color: var(--gm-bad); }
.gm-fm-word.is-ok-text { color: var(--gm-ok); }
.gm-fm-word.is-picked { background: #ffe2a8; box-shadow: 0 0 0 3px var(--gm-acc-d); color: var(--gm-wood-text); } /* Сложный режим: выбранное слово */
.gm-text-ok { color: var(--gm-ok); }
.gm-text-acc { color: var(--gm-acc); }
.gm-gap { border-bottom: 4px solid rgba(124, 74, 42, .45); color: var(--gm-acc-d); }
.gm-gap.is-ok-text { border-color: var(--gm-ok); color: var(--gm-ok); }

/* --- Сортировка: корзинки --- */
.gm-basket { position: relative; height: 160px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 18px;
    background: none; border: 0; cursor: pointer; user-select: none; transition: transform .15s, opacity .25s, filter .25s; }
.gm-basket:hover { transform: translateY(-4px); }
.gm-basket:active { transform: translateY(2px); }
.gm-basket-draw { display: var(--gm-basket-draw); position: absolute; inset: 22px 6% 0; filter: drop-shadow(0 6px 0 var(--gm-wood-d)); }
.gm-basket-rim { position: absolute; left: -3%; right: -3%; top: 0; height: 18px; border-radius: 10px; z-index: 1;
    background: repeating-linear-gradient(115deg, #c88957 0 9px, #a8693c 9px 12px); border: 3px solid var(--gm-wood-d); }
.gm-basket-body { position: absolute; inset: 10px 0 0; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); border-radius: 0 0 18px 18px;
    background: repeating-linear-gradient(0deg, rgba(74, 44, 23, .45) 0 3px, transparent 3px 17px),
                repeating-linear-gradient(90deg, #c98a55 0 14px, #b0743f 14px 17px); }
.gm-basket-img { position: absolute; inset: 0; background: var(--gm-img-basket) center bottom / contain no-repeat; pointer-events: none; }
.gm-basket-label { position: relative; z-index: 2; padding: 4px 18px 6px; border-radius: 14px; max-width: 80%; text-align: center; line-height: 1.15;
    transition: background .25s, color .25s; }
.gm-basket.is-ok .gm-basket-label { background: linear-gradient(var(--gm-ok-l), var(--gm-ok)); color: #fff; border-color: var(--gm-ok-d); box-shadow: 0 5px 0 var(--gm-ok-d); }
.gm-basket.is-ok { filter: drop-shadow(0 0 12px rgba(92, 197, 111, .85)); }
.gm-basket.is-bad .gm-basket-label { background: linear-gradient(var(--gm-bad-l), var(--gm-bad)); color: #fff; border-color: var(--gm-bad-d); box-shadow: 0 5px 0 var(--gm-bad-d); }
.gm-basket.is-bad { filter: drop-shadow(0 0 10px rgba(238, 106, 91, .8)); }
/* 4 корзины в ряд (Б46): ниже, подпись шире — длинные названия («Electrical items», «+ ed (удвоить букву)») переносятся по словам */
.gm-baskets-4 .gm-basket { height: 130px; padding-bottom: 14px; }
.gm-baskets-4 .gm-basket-label { padding: 3px 10px 5px; max-width: 94%; }
/* Полный экран (и на телефоне): поле на весь экран, длинное содержимое прокручивается */
#game-container:fullscreen { border: 0; border-radius: 0; overflow-y: auto; }
/* Полный экран (кнопка на доске или на странице ивента) — весь сайт, а окно игры поверх него на весь экран, как отдельная игра */
html:fullscreen body:has(#game-container) header,
html:fullscreen body:has(#game-container) #breadcrumbs-bar,
html:fullscreen body:has(#game-container) #btn-bug-report { display: none !important; }
html:fullscreen #game-container { position: fixed; top: 0; left: 0; z-index: 60; margin: 0; max-width: none; min-height: 0; aspect-ratio: auto;
    width: calc(100vw / var(--z)); height: calc(100vh / var(--z)); border: 0; border-radius: 0; }
#game-container:-webkit-full-screen { border: 0; border-radius: 0; overflow-y: auto; }

@media (max-width: 639.98px) {
    /* Виселица на телефоне: ошибки видны по сердечкам, счётчик ошибок прячем — иначе шапка налезает на «0/9» */
    #game-lives.flex ~ .gm-chip-err { display: none; }
    .gm-basket { height: 140px; }
    .gm-baskets-4 .gm-basket { height: 120px; } /* телефон: 4 корзины — по две в ряд */
    .gm-basket-label { padding: 4px 8px 6px; max-width: 96%; } /* телефон: шире подпись, слова не рвутся */
}

/* --- «Поиск слов»: на узком поле клетки мельче букв — размер букв задаёт WordSearchGame.fitGrid --- */
#ws-grid[style*="--ws-font"] .gm-cell { font-size: var(--ws-font); }

/* --- «Алфавит» (С19): колонки «заглавная над строчной», в сложном режиме — ряды клеток и клавиатура QWERTY --- */
.gm-ab-cols { display: flex; justify-content: center; gap: 6px; margin-bottom: clamp(20px, 4cqi, 44px); --cw: min(68px, calc((100cqi - 48px) / var(--n, 9) - 6px)); }
.gm-ab-col { display: flex; flex-direction: column; gap: 8px; }
.gm-ab-cell { width: var(--cw); height: calc(var(--cw) * 1.15); display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: calc(var(--cw) * .62); line-height: 1; border-radius: 12px; user-select: none; padding: 0; }
.gm-ab-cell.gm-plank, .gm-ab-cell.gm-parch { border-width: 2px; }
.gm-ab-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gm-ab-pool .gm-ab-key { width: clamp(48px, 7cqi, 76px); height: clamp(54px, 8cqi, 84px); font-size: clamp(26px, 4cqi, 44px); font-weight: 900;
    display: flex; align-items: center; justify-content: center; border-radius: 14px; }
.gm-ab-hint { font-weight: 800; font-size: clamp(15px, 2cqi, 20px); padding: 4px 16px; border-radius: 14px; margin-bottom: 12px; text-align: center; }
.gm-ab-rows { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: clamp(14px, 3cqi, 30px); --cw: min(50px, calc((100cqi - 44px) / 9 - 4px)); }
.gm-ab-row { display: flex; justify-content: center; gap: 4px; }
.gm-ab-rows .gm-ab-cell { border-radius: 10px; border-width: 2px; }
.gm-ab-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; --kw: min(54px, calc((100cqi - 44px) / 10 - 4px)); --kh: 1.5; }
.gm-ab-keyrow { display: flex; justify-content: center; gap: 4px; }
.gm-ab-keys .gm-ab-key { width: var(--kw); height: calc(var(--kw) * var(--kh)); /* узкие клавиши телефона — повыше */ display: flex; align-items: center; justify-content: center; padding: 0;
    font-weight: 900; font-size: calc(var(--kw) * .5); border-radius: 10px; border-width: 2px; }
@container (min-width: 1000px) {
    /* Широкое поле: по бокам полосы под лисёнка (190 px), считаем от оставшейся ширины */
    .gm-ab-cols { --cw: min(68px, calc((100cqi - 420px) / var(--n, 9) - 6px)); }
    .gm-ab-rows { --cw: min(50px, calc((100cqi - 420px) / 9 - 4px)); }
    .gm-ab-keys { --kw: min(54px, calc((100cqi - 420px) / 10 - 4px)); --kh: 1.12; }
}

/* --- «По порядку» (Ф24): цепочка слов с пропусками, внизу — слова для пропусков. Слова разной длины — клетки по тексту,
   цепочка переносится на следующие ряды; длинная (до 30 слов) уменьшается целиком (GameEngine.fitHeight) --- */
.gm-sq-chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; margin-bottom: clamp(18px, 4cqi, 40px); }
.gm-sq-cell { min-width: 3.2em; height: 2.2em; padding: 0 .55em; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: clamp(17px, 2.6cqi, 28px); line-height: 1; border-radius: 12px; border-width: 2px; user-select: none; white-space: nowrap; }
.gm-sq-gap { min-width: 5em; font-weight: 900; }
/* Цепочка блоками по 3 слова (SequenceGame.blockSize): между блоками — пустое место шире, чем между словами */
.gm-sq-chain.is-blocks { column-gap: clamp(22px, 4cqi, 56px); }
.gm-sq-block { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.gm-sq-block .gm-sq-cell { min-width: 3.2em; }
.gm-sq-block .gm-sq-cell:nth-child(1) { min-width: var(--sq-cw0, 3.2em); }
.gm-sq-block .gm-sq-cell:nth-child(2) { min-width: var(--sq-cw1, 3.2em); }
.gm-sq-block .gm-sq-cell:nth-child(3) { min-width: var(--sq-cw2, 3.2em); }
.gm-sq-pool { max-width: 100%; }
.gm-sq-key { height: 2.2em; padding: 0 .75em; display: flex; align-items: center; justify-content: center;
    font-size: clamp(17px, 2.6cqi, 28px); font-weight: 900; border-radius: 14px; white-space: nowrap; }
@container (min-width: 1000px) {
    /* Ф30: цепочка — во всю ширину поля (по 100 px с краёв — под кружок «?»), слова крупнее, рядов меньше;
       слова для пропусков внизу — между полосами под лисёнка, как у «Алфавита». Блок, уменьшенный fitHeight, — в ту же ширину (--fit-zoom) */
    /* Ширина блока в % поля под CSS zoom сжималась бы вместе с ним — делим на --fit-zoom, на экране блок остаётся во всё поле */
    #sq-box, #game-board > div:has(> #gm-type-prompt .gm-sq-chain) { max-width: none; width: calc(100% / var(--fit-zoom, 1)); }
    .gm-sq-chain { max-width: calc((100cqi - 200px) / var(--fit-zoom, 1)); gap: 10px; }
    .gm-sq-chain.is-blocks { column-gap: clamp(40px, 5cqi, 72px); }
    .gm-sq-block { gap: 10px; }
    .gm-sq-pool { max-width: calc((100cqi - 420px) / var(--fit-zoom, 1)); }
    .gm-sq-cell, .gm-sq-key { font-size: clamp(17px, 3cqi, 40px); }
    /* 7 блоков и больше (21–30 слов, неправильные глаголы) — ровно 3 столбца блоков, слова мельче; 10-й блок — по центру */
    .gm-sq-chain.is-blocks.is-many { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; column-gap: clamp(24px, 3cqi, 48px); }
    .gm-sq-chain.is-many .gm-sq-block { flex-wrap: nowrap; }
    .gm-sq-chain.is-many .gm-sq-block:last-child:nth-child(3n+1) { grid-column: 2; }
    .gm-sq-chain.is-many .gm-sq-cell { font-size: clamp(15px, 2.4cqi, 34px); }
}

/* --- «Яблоня» (С18): дерево с яблоками рядами по кроне, под ним корзинки --- */
.gm-at-field { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; min-height: 0; gap: 8px;
    --ap: clamp(36px, 4cqi, 46px); }
.gm-tree { position: relative; display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; background: var(--gm-tree-bg); }
.gm-tree::after { content: ''; display: block; width: 13%; min-width: 34px; height: var(--gm-tree-trunk-h); margin-top: var(--gm-tree-trunk-mt); border-radius: 0 0 8px 8px;
    background: var(--gm-tree-trunk-bg); }
.gm-tree-crown { position: relative; isolation: isolate; width: 100%; padding: clamp(12px, 1.6cqi, 20px) clamp(30px, 5cqi, 64px); display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .7cqi, 8px); }
.gm-tree-crown::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gm-tree-crown-bg); filter: drop-shadow(0 5px 0 rgba(47, 92, 38, .55)); }
.gm-at-row { display: flex; justify-content: center; gap: clamp(6px, 1.3cqi, 16px); }
.gm-apple { position: relative; width: var(--ap); height: var(--ap); flex-shrink: 0; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--gm-apple-bg); border: 2px solid var(--gm-apple-border); filter: drop-shadow(0 2px 1px rgba(74, 44, 23, .4));
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: calc(var(--ap) * .56); line-height: 1;
    text-shadow: 0 2px 0 rgba(90, 20, 15, .55); transition: transform .15s, box-shadow .15s, opacity .5s; }
.gm-apple span { position: relative; top: .12em; } /* чуть ниже середины: сверху у яблока черенок */
.gm-apple::after { content: ''; display: var(--gm-apple-leaf); position: absolute; top: -18%; right: 8%; width: 38%; height: 26%; border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg, #8bd06f, #4f9a44); border: 1.5px solid #3f7a33; }
.gm-apple:hover { transform: translateY(-3px) scale(1.06); }
.gm-apple.is-selected { transform: translateY(-4px) scale(1.18); box-shadow: 0 0 0 4px #ffe2a8, 0 0 0 7px var(--gm-acc-d); z-index: 5; }
.gm-apple.is-bad { box-shadow: 0 0 0 4px rgba(255, 214, 214, .9), 0 0 0 7px var(--gm-bad); }
.gm-apple.is-gone { visibility: hidden; pointer-events: none; }
.gm-apple.is-flying { transition: transform .5s cubic-bezier(.5, 0, .9, .6), opacity .2s .38s; opacity: 0; z-index: 30; pointer-events: none; }
.gm-at-baskets { display: grid; gap: clamp(8px, 2cqi, 24px); width: min(100%, 640px); flex-shrink: 0; }
.gm-at-baskets .gm-basket { height: clamp(90px, 9cqi, 104px); padding-bottom: 10px; }
.gm-at-baskets .gm-basket-label { min-width: 2.2em; padding: 0 14px 4px; }
.gm-at-basket.is-selected .gm-basket-label { background: #ffe2a8; border-color: var(--gm-acc-d); box-shadow: 0 5px 0 var(--gm-acc-d), 0 0 0 4px rgba(255, 216, 138, .6); }
.gm-at-basket.is-selected .gm-basket { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 196, 80, .95)); }
.gm-at-basket.is-bad .gm-basket-label { background: linear-gradient(var(--gm-bad-l), var(--gm-bad)); color: #fff; border-color: var(--gm-bad-d); box-shadow: 0 5px 0 var(--gm-bad-d); }

/* --- Виселица: жизни на доске --- */
.gm-lives { color: #ff8fa3; gap: 3px; }

/* --- Правила игры (Ф12): кружок «?» под левым краем доски (на углу он налезал на таймер) и окно поверх поля --- */
.gm-rules-btn {
    position: absolute; left: 6px; top: calc(100% + 14px); z-index: 2 !important;
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; background: var(--gm-acc); border: 3px solid var(--gm-acc-d);
    box-shadow: 0 3px 0 var(--gm-acc-d); transition: transform .15s, box-shadow .15s, filter .15s; cursor: pointer;
}
.gm-rules-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--gm-acc-d); filter: brightness(1.06); }
.gm-rules-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gm-acc-d); }
/* Узкое поле (планшет, телефон): боковые полосы под лисёнка убраны, и под доской кружок налезал бы на карточки
   и стартовый экран, поэтому он — первый в ряду доски, вплотную к таймеру; счётчик вопросов — посередине */
@container (max-width: 1000px) {
    .gm-rules-btn { position: static; flex-shrink: 0; margin-right: 8px; }
    .gm-header:has(> .gm-rules-btn:not(.hidden)) { justify-content: flex-start; }
    /* Середина доски — в общем ряду, как на телефоне: поверх ряда (по центру доски) название и полоска вопросов
       на планшете заходили под таймер и кнопки справа */
    .gm-header > .gm-rules-btn + .gm-chip + div { position: static !important; transform: none !important; margin: 0 auto; }
    .gm-header:has(> .gm-rules-btn:not(.hidden)) #game-switch-btn,
    .gm-header:has(> .gm-rules-btn:not(.hidden)) #game-track { display: none !important; }
    /* Список игр юнита (С13): название скрыто — кнопкой становится счётчик вопросов «1/10 ▾» */
    .gm-switch-mini.is-on { cursor: pointer; background: rgba(74, 44, 23, .35); }
    .gm-switch-mini.is-on .gm-switch-caret { display: inline-block; }
    /* Жизни виселицы — «♥ 3», как на телефоне: пять сердечек не помещались рядом со счётчиком */
    #game-lives > span:first-child { display: none !important; }
    #game-lives > span:last-child { display: flex !important; }
}
.gm-rules-overlay { position: absolute; inset: 0; z-index: 40; padding: 16px; overflow-y: auto; background: rgba(74, 44, 23, .45); backdrop-filter: blur(4px); }
.gm-rules-overlay:not(.hidden) { display: flex; }
.gm-rules { width: 100%; max-width: 500px; margin: auto; padding: 18px 22px 20px; border-radius: 26px; animation: gmPop .3s; }
.gm-rules-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gm-rules-head i { font-size: 30px; color: var(--gm-acc-d); flex-shrink: 0; }
.gm-rules-head h2 { font-size: 24px; font-weight: 800; line-height: 1.15; }
.gm-rules-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.35; font-weight: 500; }
.gm-rules-list li { position: relative; padding-left: 22px; }
.gm-rules-list li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--gm-acc); }
.gm-rules-ok { display: block; width: 100%; padding: 11px; border-radius: 16px; font-weight: 800; font-size: 18px; }
@media (max-width: 639.98px) {
    .gm-rules-btn { width: 30px; height: 30px; font-size: 17px; border-width: 2px; margin-right: 6px; }
    .gm-rules { padding: 14px 16px 16px; }
    .gm-rules-head h2 { font-size: 20px; }
    .gm-rules-list { font-size: 15px; }
}

/* --- Быстрое переключение игр (С13): название на доске — кнопка списка игр юнита --- */
.gm-switch-btn { align-items: center; gap: 6px; color: inherit; cursor: default; border-radius: 10px; padding: 1px 8px; margin: -1px -8px; }
.gm-switch-btn .gm-switch-caret { display: none; font-size: 15px; flex-shrink: 0; }
.gm-switch-btn.is-on { cursor: pointer; transition: background .15s; }
.gm-switch-btn.is-on .gm-switch-caret { display: inline-block; }
.gm-switch-btn.is-on:hover, .gm-switch-btn[aria-expanded="true"] { background: rgba(74, 44, 23, .35); }
.gm-switch-mini { display: flex; align-items: center; justify-content: center; gap: 3px; color: inherit; cursor: default; border-radius: 10px; padding: 3px 6px; }
.gm-switch-mini .gm-switch-caret { display: none; font-size: 13px; }
.gm-switch-menu {
    position: absolute; z-index: 45; top: 124px; left: 50%; transform: translateX(-50%);
    width: min(92%, 380px); max-height: calc(100% - 140px); overflow-y: auto;
    padding: 8px; border-radius: 20px; flex-direction: column; gap: 4px;
}
.gm-switch-menu:not(.hidden) { display: flex; }
.gm-switch-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .15s; }
.gm-switch-item:hover { background: rgba(124, 74, 42, .12); }
.gm-switch-item.is-current { background: var(--gm-acc); color: #fff; box-shadow: 0 3px 0 var(--gm-acc-d); }
.gm-switch-item.is-current .gm-hint { color: rgba(255, 255, 255, .85); }
.gm-switch-icon { font-size: 22px; flex-shrink: 0; color: var(--gm-acc-d); }
.gm-switch-item.is-current .gm-switch-icon { color: #fff; }
.gm-switch-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(74, 44, 23, .3); }
.gm-switch-dot.is-green { background: #22c55e; }
.gm-switch-dot.is-orange { background: #f59e0b; }
.gm-switch-dot.is-red { background: #f43f5e; }

/* --- Картинки в играх (С7): GameEngine.imageHtml / withImage. Размер — по месту: lg — вопрос, md — подсказка, sm — карточка пары, список слов --- */
.gm-img { display: block; flex-shrink: 0; object-fit: contain; border-radius: 14px; margin: 0 auto; user-select: none; -webkit-user-drag: none; }
.gm-img-lg { max-height: 150px; max-width: min(240px, 100%); }
.gm-img-md { max-height: 110px; max-width: min(200px, 100%); margin-bottom: 10px; }
.gm-img-sm { max-height: 56px; max-width: 84px; }
.gm-with-img { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.gm-with-img .gm-img { margin: 0; }
.gm-with-img.is-side { flex-direction: row; gap: 12px; text-align: left; }
@media (max-width: 639.98px) {
    .gm-img-lg { max-height: 100px; }
    .gm-img-md { max-height: 80px; }
    .gm-img-sm { max-height: 40px; max-width: 60px; }
}

/* --- «Заполнение пропусков по картинке» (С15, FillGapGame.pictureHtml): картинка слева почти на половину карточки, предложение справа;
   на телефоне — картинка сверху. Шрифт предложения меньше, чем без картинки: иначе оно рвётся на много строк --- */
.gm-fg-pic-card { display: flex; align-items: center; gap: 24px; padding: 20px 28px 20px 20px; text-align: left; }
.gm-fg-pic { display: block; flex: 0 0 46%; width: 46%; height: auto; max-height: 280px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gm-fg-pic-text { flex: 1 1 auto; min-width: 0; font-size: 2.1rem; }
.gm-fg-sentence { line-height: 1.35; }
.gm-fg-sentence .gm-gap { margin: 0 .3em; line-height: 1.05; } /* подчёркивание — у строки, а не ниже неё */
.gm-fg-pic-card.is-typed { padding: 0; gap: 20px; }
@media (max-width: 639.98px) {
    .gm-fg-pic-card { flex-direction: column; gap: 12px; padding: 16px; text-align: center; }
    .gm-fg-pic-card .gm-fg-pic-text > div:first-child { justify-content: center; }
    .gm-fg-pic { width: auto; max-width: 100%; max-height: 170px; flex: none; }
    .gm-fg-pic-text { font-size: 1.5rem; }
}
@media (max-height: 560px) and (min-width: 640px) {
    .gm-fg-pic { max-height: 200px; }
}

/* --- «Сортировка на слух» (С20, SoundSortGame): карточка с картинкой (или ухом), динамик в углу, слово — после ответа --- */
.gm-ss-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: min(340px, 100%); min-height: 0; padding: 18px 22px 12px; }
.gm-ss-speak { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; z-index: 2; }
.gm-ss-pic { display: block; width: auto; height: 190px; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gm-ss-ear { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; margin: 20px 0; border-radius: 50%;
    background: rgba(124, 74, 42, .1); color: var(--gm-acc-d); font-size: 84px; }
.gm-ss-word { font-size: 2.1rem; line-height: 1.15; }
.gm-ss-key { color: var(--gm-acc-d); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.is-bad .gm-ss-key { color: inherit; } /* на красной карточке буквы звука — только подчёркиванием */
@media (max-width: 639.98px) {
    .gm-ss-pic { height: 130px; }
    .gm-ss-ear { width: 110px; height: 110px; margin: 10px 0; font-size: 60px; }
    .gm-ss-word { font-size: 1.6rem; }
}
@media (max-height: 520px) {
    .gm-ss-pic { height: 110px; }
    .gm-ss-ear { width: 90px; height: 90px; margin: 4px 0; font-size: 50px; }
}

/* =====================================================================
   ОФОРМЛЕНИЕ «СПОРТЗАЛ» (К2): окно игр в подходе «Тренировки» и сцена вкладки #/training.
   Класс .gm-skin-gym у .gm-shell (TrainingRound в js/training.js включает его только на время подхода).
   Те же переменные --gm-*, что у сезонов, плюс правила, где под дерево зашиты коричневые оттенки.
   Картинки — images/training/ (исходники — src/, сборка — python tools/build_training_art.py, список — prototypes/training/ASSETS.md)
   ===================================================================== */
.gm-skin-gym {
    --gm-wood: #8c98a3; --gm-wood-l: #a9b4bd; --gm-wood-m: #76828d; --gm-wood-d: #3d4650; --gm-wood-text: #23292f;
    --gm-parch: #f7f9fb;
    --gm-acc: #f5a400; --gm-acc-d: #b06f00;
    --gm-veil: 238, 242, 246;
    --gm-scene: url('images/training/scene-gym.webp');
    --gm-img-wood: url('images/training/metal.webp');
    --gm-img-parch: url('images/training/whiteboard.webp');
    --gm-img-basket: url('images/training/gym-bag.webp');
    --gm-img-board-top: none; --gm-img-board-corner-l: none; --gm-img-board-corner-r: none;
}
/* Вид за окнами зала — по сезону сайта: scene-gym-<сезон>.webp поверх летнего scene-gym.webp. Пока файла сезона нет,
   верхний слой пустой (картинка не загрузилась) и виден летний зал. Лето — сам scene-gym. Тот же фон у экрана #/training
   (training.css). Новый файл — увеличить ?v= здесь */
html[data-season="autumn"] { --gym-season: url('images/training/scene-gym-autumn.webp?v=1'); }
html[data-season="winter"] { --gym-season: url('images/training/scene-gym-winter.webp?v=1'); }
html[data-season="spring"] { --gym-season: url('images/training/scene-gym-spring.webp?v=1'); }
.gm-shell.gm-skin-gym { background: var(--gym-season, none) center / cover no-repeat, var(--gm-scene) center / cover no-repeat, #d9dfe4; }
/* Доска сверху — рифлёный лист */
.gm-skin-gym .gm-header {
    background: linear-gradient(rgba(25, 30, 36, .2), rgba(25, 30, 36, .45)), url('images/training/diamond-plate.webp') center / 320px, #5d6873;
}
/* Над доской ничего не лежит (без сезонной накладки): штанга над названием игры лишняя */
.gm-skin-gym .gm-header::before, .gm-skin-gym .gm-header::after { content: none; }
.gm-skin-gym .gm-title, .gm-skin-gym .gm-count { text-shadow: 0 2px 0 #22272c; }
.gm-skin-gym .gm-chip { background: rgba(15, 20, 25, .45); }
.gm-skin-gym .gm-chip .gm-chip-icon { color: #ffd36a; }
.gm-skin-gym .gm-track { background: rgba(15, 20, 25, .5); }
/* Таблички — шлифованная сталь; затемнение поверх — чтобы белый текст читался на светлом металле */
.gm-skin-gym .gm-wood, .gm-skin-gym .gm-plank {
    text-shadow: 0 2px 0 rgba(20, 25, 30, .7), 0 0 6px rgba(20, 25, 30, .35);
    background: linear-gradient(rgba(40, 48, 56, .28), rgba(40, 48, 56, .5)), var(--gm-img-wood) center / 480px, linear-gradient(#97a3ad, #6d7984);
}
/* Гвозди — болты */
.gm-skin-gym .gm-plank.gm-nails::before, .gm-skin-gym .gm-plank.gm-nails::after {
    background: radial-gradient(circle at 35% 35%, #f3f5f7, #8f99a2 55%, #444c54); box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
/* Пергамент — маркерная доска в алюминиевой рамке */
.gm-skin-gym .gm-parch {
    background: var(--gm-img-parch) center / 600px, var(--gm-parch);
    border-color: #8d99a4; box-shadow: 0 6px 0 var(--gm-wood-d);
}
/* Лисёнок в повязке: та же сетка реакций; обычное лицо — свой кадр (у fox-directions спортивной версии нет) */
.gm-skin-gym .gm-fox { background-image: url('images/training/fox-gym-reactions.webp'); }
.gm-skin-gym .gm-fox.is-idle { background-image: url('images/training/fox-gym-idle.webp'); background-size: 100% 100%; background-position: 0 0 !important; }
/* Состояния — заново: правила скина выше по весу равны правилам состояний и стояли бы поверх них */
.gm-skin-gym .is-ok.gm-plank, .gm-skin-gym .is-ok.gm-parch {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25); background: linear-gradient(var(--gm-ok-l), var(--gm-ok)); border-color: var(--gm-ok-d); box-shadow: 0 6px 0 var(--gm-ok-d); }
.gm-skin-gym .is-bad.gm-plank, .gm-skin-gym .is-bad.gm-parch {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25); background: linear-gradient(var(--gm-bad-l), var(--gm-bad)); border-color: var(--gm-bad-d); box-shadow: 0 6px 0 var(--gm-bad-d); }
.gm-skin-gym .is-selected.gm-plank, .gm-skin-gym .is-selected.gm-parch {
    text-shadow: none; background: #ffe2a8; border-color: var(--gm-acc-d); box-shadow: 0 6px 0 var(--gm-acc-d), 0 0 0 4px rgba(255, 216, 138, .6); }
.gm-skin-gym .gm-slot { background: rgba(255, 255, 255, .65); border-color: rgba(61, 70, 80, .45); }
.gm-skin-gym .gm-slot.is-selected { background: #ffe2a8; border-color: var(--gm-acc-d); }
.gm-skin-gym .gm-slot.is-bad { background: rgba(255, 214, 214, .8); border-color: var(--gm-bad); }
.gm-skin-gym .gm-hint { color: rgba(35, 41, 47, .6); }
.gm-skin-gym .gm-acc { color: #23292f; }
/* Подпись под названием на стартовом экране («Подход 1 · часть 2 из 3») */
.gm-start-sub { display: block; font-size: .5em; opacity: .8; font-weight: 700; margin-top: 4px; }

/* --- Лесенка «Чтения» (Ф33): выделенное сочетание, «Слушай и выбирай», «Прочитай — выбери картинку», подсказка взрослому --- */
.gm-hl { color: var(--gm-acc-d); background: rgba(233, 139, 42, .22); border-radius: .2em; padding: 0 .06em; }
.gm-listen-big { width: clamp(84px, 11cqi, 128px); height: clamp(84px, 11cqi, 128px); border-radius: 32%; font-size: clamp(44px, 6cqi, 68px);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-pic-opt { aspect-ratio: 1; padding: clamp(6px, 1.2cqi, 14px); display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 22px; }
.gm-pic-opt img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; background: #fff; pointer-events: none; }
.gm-pic-missing { font-size: clamp(40px, 7cqi, 72px); color: rgba(74, 44, 23, .35); }
.gm-card-note { margin-top: 14px; padding: 6px 14px; font-size: 13px; font-weight: 700; line-height: 1.35; max-width: 40rem; text-align: center; }
@media (max-width: 639.98px) { .gm-pic-opt { border-radius: 16px; } .gm-card-note { font-size: 12px; margin-top: 8px; } }

/* --- Предпросмотр редактора заданий (Ф40): своя картинка элемента — прямо на её месте в игре.
   Нет картинки — тонкая рамка с плюсом (цвет сайта по сезону) размером с картинку; есть — картинка как в игре,
   по наведению (на телефоне — всегда, в углу) кнопки «Заменить» и «Убрать». В самой игре этих деталей нет --- */
.ed-pic-add { flex-shrink: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto;
    border: 1.5px dashed rgb(var(--c-primary)); border-radius: 14px; color: rgb(var(--c-primary)); background: rgba(255, 255, 255, .45);
    cursor: pointer; transition: background .15s, transform .15s; }
.ed-pic-add:hover { background: rgba(255, 255, 255, .8); transform: scale(1.03); }
.ed-pic-add i.ph-plus { font-size: 2em; }
.ed-pic-add.ed-pic-lg { width: 110px; font-size: 18px; }
.ed-pic-add.ed-pic-md { width: 84px; font-size: 15px; }
.ed-pic-add.ed-pic-sm { width: 48px; font-size: 11px; border-radius: 10px; }
.ed-pic-add.ed-pic-opt { width: 100%; height: 100%; border-radius: 14px; font-size: 22px; }
.ed-pic-add.is-busy { cursor: progress; }
.gm-with-img .ed-pic-add, .gm-with-img .ed-pic { margin: 0; }
.ed-pic { position: relative; display: block; flex-shrink: 0; margin: 0 auto; line-height: 0; }
.ed-pic > img { display: block; }
.ed-pic-opt-wrap { width: 100%; height: 100%; }
.ed-pic-opt-wrap > img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; background: #fff; }
.ed-pic-tools { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px;
    background: rgba(40, 22, 8, .5); opacity: 0; transition: opacity .15s; }
.ed-pic:hover .ed-pic-tools, .ed-pic:focus-within .ed-pic-tools { opacity: 1; }
.ed-pic-tools button { width: 32px; height: 32px; border-radius: 9px; background: #fff; color: #4a2c17; display: flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); position: relative; }
.ed-pic-tools button:hover { color: rgb(var(--c-primary)); }
.ed-pic-tools button.is-del:hover { color: #e11d48; }
.ed-pic-sm .ed-pic-tools button { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
/* Сенсорный экран: наведения нет — кнопки видны всегда, маленькие, в углу картинки */
@media (hover: none) {
    .ed-pic-tools { opacity: 1; background: none; inset: auto 4px 4px auto; gap: 4px; }
    .ed-pic-tools button { width: 26px; height: 26px; font-size: 14px; }
}
@media (max-width: 639.98px) {
    .ed-pic-add.ed-pic-lg { width: 84px; }
    .ed-pic-add.ed-pic-md { width: 64px; font-size: 13px; }
    .ed-pic-add.ed-pic-sm { width: 36px; }
}

/* «Карточки»: у карточки постоянная высота — картинка (С7) не выше доли карточки, а снизу место под подсказку
   «Нажми, чтобы перевернуть», иначе слово с картинкой упиралось в неё (Б71) */
.gm-flash-face { container-type: size; padding-bottom: 2.25rem; }
.gm-flash-face .gm-img-lg { max-height: min(150px, 45cqh); }
.gm-flash-face .ed-pic-add.ed-pic-lg { width: min(110px, 40cqh); }