/* ==========================================================================
   LAB — лаборатория профессора Диггса (§197-199, §319-322, этап 26)

   Экран устроен как место, а не как список улучшений.

   **Сцена.** Сверху — рисованная лаборатория: доска с фотографиями и
   нитями, микроскоп, шкаф с находками и сам профессор. Поверх неё лежит
   подпись состояния стола (§321). Картинка одна на все состояния —
   меняются подпись, цвет обода и свечение лампы, а не кадр: пять
   отдельных фонов означали бы пять загрузок одного и того же.

   **Карточки работ.** Находка слева, текст справа, требования строкой
   значков. Итог не раскрывается — видна только его категория (§322).

   Материал сюда не пишется: доска карточки — §6 рамы, гнездо находки,
   плашка «уже известно», подпись состояния и значок требования — §8,
   запас пыли — §10, «ХРОНИКА» — §12, «ОТДАТЬ ДИГГСУ» и «ЗАБРАТЬ
   РЕЗУЛЬТАТ» — §9.1. Здесь остаются геометрия, набор и состояния.
   Цвета, отступы, радиусы и тени — из ui-tokens.css.
   ========================================================================== */

/* ----- Сцена ------------------------------------------------------------- */

.tam-lab__scene {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl);
}

/*
 * Кадр ВЫШЕ картинки, а не равен ей (§108 ТЗ: character presentation).
 *
 * Стояло 4/3 — ровно пропорция `lab_bg.webp`, поэтому кадр показывал
 * рисунок целиком и не двигал его. Диггс на рисунке занимает по высоте
 * 12-51 %, а тело сцены (вывеска, подпись состояния, счётчики) лежит
 * поверх нижних 182px: на 390×293 вывеска «ЛАБОРАТОРИЯ» начиналась на
 * 43 % и резала профессору открытый рот. Голова без рта и подбородка —
 * это не персонаж в шапке, а обрезок.
 *
 * 39/35 даёт 350px при ширине 390. Кадр стал выше пропорции рисунка,
 * поэтому `cover` тянет его ПО ВЫСОТЕ (0.456 вместо 0.381) и срезает по
 * 45px с боков — там фонарь и край шкафа, а не лицо. Профессор при этом
 * вырос на пятую часть, а вывеска встала на 184px, ниже подбородка.
 *
 * Пол в 350px обязателен, и пропорции для него мало: тело сцены высотой
 * 182px от ширины экрана НЕ зависит, а кадр по пропорции зависит. На
 * 320px одна пропорция давала 287px — вывеска возвращалась профессору на
 * рот. Потолок снят вовсе: он ограничивал ту же высоту с другой стороны
 * и на экране 720px опять резал лицо. Высоту низкому экрану раздаёт §29
 * ниже, там же снимается и этот пол.
 */
.tam-lab__scene-art {
    position: relative;
    width: 100%;
    aspect-ratio: 39 / 35;
    min-height: 350px;
    overflow: hidden;
}

.tam-lab__scene-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    display: block;
}

/* Низкий экран (§29 рамы): кадр сцены обрезается сверху и снизу вместо
   того, чтобы держать пропорцию 4:3. На 640 сцена занимала 270px из
   508, и стол с колбами закрывал сам список опытов. Ниже тела сцены
   (вывеска, состояние, строка счётчиков — 182px) кадр не опускается. */
@media (max-height: 700px) {
    /* `min-height` в CSS сильнее `max-height`: без сброса пола потолок
       низкого экрана не сработал бы вовсе и сцена осталась бы 350px. */
    .tam-lab__scene-art {
        min-height: 0;
        max-height: 34vh;
    }

    /*
     * На 640 над вывеской остаётся 52px — лицо туда не помещается ни при
     * каком окне (одна голова Диггса это 300px рисунка, то есть 114px
     * даже в срезанном кадре). Замерены три положения: при 45 % в полосе
     * стоят одни волосы, при 58 % — волосы с очками, при 72 % — очки,
     * оправа и переносица, то есть самая узнаваемая часть. Поэтому 72 %
     * остаётся, а высоту кадра низкому экрану не отдают: §29 рамы меняет
     * декоративное на содержимое, и здесь это тот самый размен.
     */
    .tam-lab__scene-art img {
        object-position: center 72%;
    }
}

/* Затемнение снизу: подпись состояния читается поверх любой части кадра. */
.tam-lab__scene-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 44%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 5%, transparent) 38%,
        color-mix(in srgb, var(--ui-bg-dark) 92%, transparent) 100%);
}

/* Содержимое сцены собирается по центру, как верх любого раздела (§4
   рамы): вывеска, подпись состояния и строка счётчиков стояли по левому
   краю и выглядели прилепленными к углу картинки. Слой явно поднят над
   затемнением: `::after` арта и тело сцены — соседи без z-index, и
   порядок отрисовки зависел от того, что окажется позже в разметке. */
.tam-lab__scene-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-5);
}

.tam-lab__scene-body .trumpamole__page-title {
    margin: 0 0 var(--ui-space-2);
}

/* Подпись состояния — плотная утопленная плашка (§8 рамы). Прозрачная
   чернота пропускала лабораторию насквозь и на светлой лампе не
   читалась. Здесь — только поля и набор. */
.tam-lab__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-body);
    line-height: 1.3;
}

.tam-lab__state-icon { display: flex; color: var(--ui-ivory-dark); }

/* Состояния стола §321: цветом обода и значка, без смены картинки.
   Заливку состояния не трогаем: сокращённая запись `background` гасит
   и фактуру §8, а без неё плашка становится ровно залитой. */
.tam-lab__scene--available .tam-lab__state {
    border-color: color-mix(in srgb, var(--ui-gold-light) 42%, transparent);
}
.tam-lab__scene--available .tam-lab__state-icon { color: var(--ui-gold-light); }

.tam-lab__scene--in-progress .tam-lab__state {
    border-color: color-mix(in srgb, var(--ui-blue-light) 34%, transparent);
}
.tam-lab__scene--in-progress .tam-lab__state-icon {
    color: var(--ui-blue-light);
    animation: tamLabWork 1.8s ease-in-out infinite;
}

.tam-lab__scene--complete .tam-lab__state {
    border-color: color-mix(in srgb, var(--ui-gold-light) 70%, transparent);
}
.tam-lab__scene--complete .tam-lab__state-icon { color: var(--ui-gold-light); }

/* Новый фрагмент на доске (§321, NEW_DISCOVERY): держится несколько
   секунд после того, как игрок забрал результат. */
.tam-lab__scene--new-discovery .tam-lab__scene-art img {
    animation: tamLabDiscovery 2.6s ease-out;
}

.tam-lab__scene--new-discovery .tam-lab__state {
    border-color: color-mix(in srgb, var(--ui-purple-light) 60%, transparent);
}

.tam-lab__scene--new-discovery .tam-lab__state-icon { color: var(--ui-purple-light); }

@keyframes tamLabWork {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

@keyframes tamLabDiscovery {
    0%   { filter: brightness(1); }
    22%  { filter: brightness(1.5) saturate(1.2); }
    100% { filter: brightness(1); }
}

.tam-lab__scene-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-2);
}

/* Запас пыли — чип ресурса (§10 рамы): значок, число, подпись. */
.tam-lab__dust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ui-tap-min);
    padding: 6px 12px;
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
}

/* Золото достаётся числу, а не всей строке: цвет чипа задаёт §10 рамы, и
   правило по одному классу здесь было бы мёртвым. */
.tam-lab__dust b { color: var(--ui-gold-light); font-size: var(--ui-size-value); }
.tam-lab__dust span:last-child { color: var(--ui-text-muted); }

/* Своего правила у ссылки в хронику (`.tam-lab__chr-link`) здесь нет:
   материал, набор и указатель ей даёт §12 рамы — та же корпусная
   кнопка, что ссылки коллекции и хранилища. */

/* ----- Работы ------------------------------------------------------------ */

.tam-lab__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

/* Карточка работы — та же доска, что карточки остальных разделов (§6
   рамы). Здесь только раскладка и метка состояния. */
.tam-lab__card {
    display: flex;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4);
}

/*
 * Состояние работы — КРОМКА, а не заливка и не прозрачность.
 *
 * Свободная работа держит кромку доски, идущая — синюю, готовая —
 * золотую. «Нет находки» и «не хватает пыли» ничего не обещают и никуда
 * не зовут (§58 ТЗ), поэтому их кромка — глухой корпус закрытого: без
 * неё обе читались точно такой же доской, как работа, готовая к запуску.
 */
.tam-lab__card.is-complete { border-color: color-mix(in srgb, var(--ui-gold-light) 55%, transparent); }
.tam-lab__card.is-progress { border-color: color-mix(in srgb, var(--ui-blue-light) 40%, transparent); }
.tam-lab__card.is-locked,
.tam-lab__card.is-poor { border-color: var(--ui-locked); }

/* Закрытая работа не выцветает: она остаётся плотной доской, только
   тёмной — так же, как выполненное задание (§12 рамы). Фактура кладётся
   заново: сокращённая запись `background` гасит и её. */
.tam-lab__card.is-done {
    opacity: 1;
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg, var(--ui-row-a) 0%, var(--ui-panel-dark) 100%);
    box-shadow: var(--ui-inner-well), 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Гнездо находки — выемка в доске (§8 рамы). */
.tam-lab__card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
}

.tam-lab__card-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* Работа, для которой не хватает находки: предмет показан силуэтом —
   тот же приём, что у неизвестного босса, и та же причина. */
.tam-lab__card.is-locked .tam-lab__card-art img {
    filter: brightness(0.35) contrast(1.15);
}

.tam-lab__card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.tam-lab__card-title {
    font-family: var(--ui-font-title);
    font-weight: var(--ui-weight-section);
    font-size: var(--ui-size-value);
    line-height: 1.25;
    color: var(--ui-text-main);
}

.tam-lab__card-hint {
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    line-height: 1.35;
    color: var(--ui-text-muted);
}

/* «Уже известно» — примечание, вырезанное В доске (§8 рамы). Стояло в
   §6 и получало материал самой доски: карточка внутри карточки. */
.tam-lab__card-known {
    padding: 7px 10px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
    line-height: 1.35;
}

.tam-lab__card-outcome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-gold-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
}

.tam-lab__needs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

/* Требование работы — маленькая выемка (§8 рамы) со значком и словом. */
.tam-lab__need {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
}

.tam-lab__need.is-ok { color: var(--ui-gold-light); }

/* Обе кнопки работы одеты рамой: «Отдать Диггсу» — второй корпус §9.1.1
   (повторяющееся действие карточки), «Забрать результат» — зелёная
   «забрать» §9.1. Здесь — рост, поля и плотный капслок, как на
   остальных кнопках действия. */
.tam-lab__btn {
    align-self: flex-start;
    margin-top: 6px;
    min-height: var(--ui-tap-min);
    padding: 0 var(--ui-space-4);
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-value);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--ui-ease), box-shadow var(--ui-ease);
}

.tam-lab__btn:active { transform: translateY(var(--ui-press)); }

.tam-lab__timer,
.tam-lab__blocked,
.tam-lab__done {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
}

.tam-lab__timer { color: var(--ui-blue-light); }
.tam-lab__done { color: var(--ui-gold-light); }

/* Узкий экран: находка мельче, чтобы текст работы оставался читаемым. */
@media (max-width: 360px) {
    .tam-lab__card-art { width: 60px; height: 60px; }
    .tam-lab__card-title { font-size: var(--ui-size-body); }
}