/* Вкладка «Тренировка» (К2, js/training.js): экран #/training — своя сцена «Спортзал» — и итог подхода в окне игры.
   Перенос prototypes/training/index.html. Детали (gm-wood, gm-parch, gm-acc, gm-bubble) и цвета «Спортзала» — из game_skin.css
   (.gm-skin-gym у сцены). Картинки — images/training/ (сборка — python tools/build_training_art.py) */
body:has(.tr-scene) #mascot-container { display: none; } /* На сцене свой лисёнок */
.tr-scene { --tr-muted: #66717b; --tr-col: 26%; position: relative; max-width: 72rem; margin: 0 auto 2rem; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden;
    border: 6px solid #fff; box-shadow: 0 20px 50px rgba(35, 41, 47, .22); container-type: inline-size; color: #23292f;
    /* Сезонный вид за окнами (--gym-season — в game_skin.css) поверх летнего зала */
    background: var(--gym-season, none) center / cover no-repeat, url('images/training/scene-gym.webp') center / cover no-repeat, #d9dfe4; }
.tr-scene h1, .tr-scene h2 { font-family: Rubik, Nunito, sans-serif; margin: 0; }
/* «Тренировка» и «План на сегодня» — одной ширины (--tr-col) */
.tr-title { position: absolute; left: 3%; top: 4%; width: var(--tr-col); padding: 10px 22px; border-radius: 16px; z-index: 2; color: #fff; }
.tr-title h1 { font-size: clamp(20px, 2.6cqi, 32px); font-weight: 800; }
.tr-title div { font-size: clamp(12px, 1.3cqi, 15px); opacity: .9; font-weight: 700; }

/* Доска с планом на день */
.tr-plan { position: absolute; left: 3%; top: 21%; width: var(--tr-col); padding: 14px 18px 16px; border-radius: 18px; z-index: 2; }
.tr-plan h2 { font-size: clamp(15px, 1.8cqi, 21px); font-weight: 800; margin-bottom: 8px; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 2px dashed rgba(61, 70, 80, .2); }
.tr-row:first-of-type { border-top: 0; }
.tr-row i { font-size: clamp(18px, 2.2cqi, 26px); flex-shrink: 0; }
.tr-row b { display: block; font-size: clamp(13px, 1.45cqi, 17px); }
.tr-row span { display: block; font-size: clamp(11px, 1.15cqi, 13.5px); color: var(--tr-muted); font-weight: 700; }
.tr-row.is-done i { color: var(--gm-ok); }
.tr-row.is-cur i { color: var(--gm-acc-d); }
.tr-row.is-off { opacity: .45; }
.tr-empty { font-size: clamp(12px, 1.3cqi, 15px); color: var(--tr-muted); font-weight: 700; line-height: 1.4; }

/* Стойка со штангой: картинка по числу сделанных подходов — rack-0 (пустая) … rack-3, тень на полу — в картинке.
   Все четыре вырезаны одной рамкой, поэтому меняются без сдвига */
.tr-rack { position: absolute; left: 37%; bottom: 15%; width: 44%; aspect-ratio: 1600 / 944; z-index: 1; }
.tr-rack > img { display: block; width: 100%; height: 100%; }
.tr-rack > img.is-new { animation: trRackBump .6s ease-out; }
@keyframes trRackBump { 0% { transform: translateY(0); } 30% { transform: translateY(-3%); } 60% { transform: translateY(1%); } 100% { transform: none; } }

/* Лисёнок в полный рост стоит на полу справа, реплика — над ним */
.tr-fox { position: absolute; right: 2.5%; bottom: 17%; width: 19%; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.tr-fox .gm-bubble { position: relative; opacity: 1; transform: none; white-space: normal; text-align: center; font-size: clamp(12px, 1.35cqi, 16px); line-height: 1.3; max-width: 100%; margin-bottom: 14px; padding: 8px 12px; }
.tr-fox-img { display: block; height: clamp(120px, 21cqi, 260px); filter: drop-shadow(0 8px 6px rgba(20, 25, 30, .25)); }

/* Низ: огонёк и кнопка */
.tr-bottom { position: absolute; left: 3%; right: 3%; bottom: 4%; display: flex; align-items: center; gap: 16px; z-index: 3; }
.tr-flame { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 18px; min-width: 0; color: #fff; }
.tr-flame > i { font-size: clamp(26px, 3.2cqi, 38px); color: #9aa3ab; }
.tr-flame.is-lit > i { color: #ff7a1a; filter: drop-shadow(0 0 8px rgba(255, 122, 26, .6)); }
.tr-flame b { display: block; font-size: clamp(13px, 1.5cqi, 18px); }
.tr-flame span { display: block; font-size: clamp(11px, 1.15cqi, 13.5px); opacity: .9; font-weight: 700; }
.tr-pips { display: flex; gap: 5px; margin-left: auto; }
.tr-pips em { width: 14px; height: 14px; border-radius: 50%; background: rgba(15, 20, 25, .35); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3); }
.tr-pips em.on { background: #ff7a1a; box-shadow: 0 0 6px rgba(255, 122, 26, .8); }
.tr-go, .tr-book { border-radius: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.tr-go { padding: 14px 30px; font-size: clamp(16px, 2cqi, 24px); }
.tr-book { padding: 12px 20px; font-size: clamp(14px, 1.6cqi, 19px); }
.tr-go.is-off { filter: grayscale(1); opacity: .65; cursor: default; }
.tr-go.is-off:hover, .tr-go.is-off:active { transform: none; }

/* Телефон и планшет (до 1024px): в 16:9 тесно — табличка рвётся по буквам, план налезает на огонёк; сцена — столбиком */
@media (max-width: 1023.98px) {
    .tr-scene { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; border-radius: 24px; border-width: 4px; }
    .tr-title, .tr-plan, .tr-rack, .tr-fox, .tr-bottom { position: static; width: auto; }
    .tr-rack { width: min(86%, 420px); align-self: center; }
    .tr-fox-img { height: 110px; }
    .tr-fox { flex-direction: row-reverse; gap: 8px; align-self: stretch; }
    .tr-fox .gm-bubble { flex: 1; margin: 0; }
    .tr-fox .gm-bubble::after { display: none; }
    .tr-bottom { flex-direction: column; align-items: stretch; }
    .tr-go, .tr-book { justify-content: center; }
    .tr-title h1 { font-size: 22px; } .tr-plan h2 { font-size: 17px; } .tr-row b, .tr-flame b { font-size: 15px; } .tr-row span, .tr-flame span, .tr-empty { font-size: 13px; }
}

/* Итог подхода — в окне игры */
.tr-finish { max-width: 460px; width: 100%; text-align: center; padding: 10px 26px 14px; border-radius: 26px; }
.tr-finish h2 { font-size: 26px; font-weight: 800; margin: 2px 0 6px; }
.tr-stat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 4px; font-size: 15px; border-top: 2px dashed rgba(61, 70, 80, .2); font-weight: 700; text-align: left; }
.tr-stat b { font-size: 18px; white-space: nowrap; }
.tr-finish .gm-acc { margin-top: 10px; width: 100%; padding: 12px; border-radius: 16px; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tr-finish small { display: block; margin-top: 6px; color: #66717b; font-weight: 700; }

/* Подход: плашка над вопросом («Работа над ошибкой» / «Повторение» / «Ещё раз») — слой нулевой высоты под доской игры */
.tr-tag-lane { position: relative; height: 0; z-index: 16; }
.tr-tag { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 10px; font-weight: 800; font-size: 14px; white-space: nowrap; pointer-events: none;
    background: rgba(255, 255, 255, .9); box-shadow: 0 3px 0 rgba(61, 70, 80, .3); }
.tr-tag.is-err { color: var(--gm-bad-d); }
.tr-tag.is-again { color: var(--gm-acc-d); }
.tr-tag.is-rev { color: #66717b; }
@media (max-width: 639.98px) { .tr-tag { top: 6px; font-size: 12px; padding: 3px 10px; } }
/* Плашка над карточкой вопроса: карточка — опора, плашка висит над её верхним краем */
.tr-tag-host { position: relative; }
.tr-tag.tr-tag-inline { top: auto; bottom: calc(100% + 10px); z-index: 5; visibility: visible; } /* динамик до ответа невидим — плашка видна */
@media (max-width: 639.98px) { .tr-tag.tr-tag-inline { bottom: calc(100% + 6px); } }

/* Вкладка учителя (TrainingTeacher, К2б): сцена та же, что у ученика (16:9) — табличка, доска «Мои классы» на месте плана,
   стойка (штанга класса), лисёнок и внизу сводка; ниже — сетка карточек учеников */
/* Табличка и доска — столбиком: название в две строки не наезжает на доску, длинный список классов прокручивается */
.tr-col { position: absolute; left: 3%; top: 4%; bottom: 22%; width: var(--tr-col); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.tr-col .tr-title, .tr-col .tr-plan { position: static; width: auto; }
.tr-col .tr-title { flex-shrink: 0; }
.tr-col .tr-plan { min-height: 0; display: flex; flex-direction: column; }
.tr-scene-teacher .tr-plan h2 { flex-shrink: 0; }
.tr-classes { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px 2px 6px; margin: 0 -2px; }
.tr-classes button { padding: 6px 14px; border-radius: 12px; font-weight: 800; font-size: clamp(13px, 1.4cqi, 16px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-class-name { font-family: Rubik, Nunito, sans-serif; font-weight: 800; font-size: clamp(16px, 1.9cqi, 22px); overflow-wrap: anywhere; }
.tr-plan-btn { align-self: flex-start; margin-top: 12px; }
.tr-sum > i { color: #c9d1d8; }
.tr-sum b { font-size: clamp(16px, 2cqi, 24px); line-height: 1.15; }

.tr-cards { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; color: #23292f; }
.tr-card { border-radius: 20px; background: #fff; border: 3px solid #d5dbe0; box-shadow: 0 5px 0 #c3cad1; overflow: hidden; }
.tr-card.is-idle { border-color: #f0c37a; box-shadow: 0 5px 0 #e2a94c; }
.tr-card-top { display: block; width: 100%; padding: 14px 16px 12px; text-align: left; cursor: pointer; color: inherit; background: none; border: 0; font: inherit; }
.tr-card-top:hover { background: #f7f9fa; }
.tr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tr-card-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #d5dbe0; }
.tr-card-head b { display: block; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.tr-card-head span { display: block; font-size: 13px; color: #66717b; font-weight: 700; }
.tr-card.is-idle .tr-card-head span { color: #b06f00; }
.tr-card .tr-pips { margin-left: auto; flex-shrink: 0; }
.tr-chips-row { display: flex; align-items: center; gap: 6px; }
.tr-chips { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #3d4650; background: #eef1f4; white-space: nowrap; }
.tr-chip i { font-size: 15px; color: #8c98a3; }
.tr-chip i.is-lit { color: #ff7a1a; }
.tr-chip.is-warn { background: #fdeceb; color: #a33a30; }
.tr-chip.is-warn i { color: #d0574b; }
.tr-chip.is-locked { background: #f1f3f5; color: #7a848d; }
.tr-chip.is-locked i { color: #9aa4ad; }
.tr-more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 800; color: rgb(var(--c-primary)); }
.tr-more-link:hover { text-decoration: underline; }
.tr-caret { flex-shrink: 0; font-size: 18px; color: #8c98a3; transition: transform .2s; }
.tr-card.is-open .tr-caret { transform: rotate(180deg); }
.tr-card-more { padding: 0 16px 16px; }
.tr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 0; border-top: 2px dashed rgba(61, 70, 80, .15); }
.tr-st { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 0; }
.tr-st i { grid-row: span 2; font-size: 20px; color: #8c98a3; }
.tr-st i.is-lit { color: #ff7a1a; }
.tr-st span { font-size: 12px; color: #66717b; font-weight: 700; }
.tr-st b { font-size: 14px; }
.tr-words-title { font-size: 12px; color: #66717b; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.tr-words { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-word { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; background: #eef1f4; color: #3d4650; }
.tr-word.is-weak { background: #fdeceb; color: #a33a30; border: 1px solid #f6cfcb; }
.tr-word small { font-size: 11px; opacity: .6; }
.tr-none { font-size: 14px; color: #8c98a3; font-weight: 700; }
.tr-note { max-width: 72rem; margin: 14px auto 2rem; font-size: 13px; color: #66717b; font-weight: 600; text-align: center; }

@media (max-width: 1023.98px) {
    .tr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-col { position: static; width: auto; }
    .tr-scene-teacher .tr-rack { display: none; }
    .tr-scene-teacher .tr-bottom { flex-direction: row; }
}
@media (max-width: 700px) { .tr-sum { padding: 8px 12px; gap: 8px; } }
@media (max-width: 639.98px) { .tr-cards { grid-template-columns: 1fr; } }