@font-face {
    font-family: "PolyglOTT";
    src: url("assets/fonts/TruetypewriterPolyglOTT.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "RobotoBoldCondensed";
    src: url("assets/fonts/roboto-bold-condensed.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

/* =========================
   ШРИФТ ЦИФРОВЫХ ИНТЕРФЕЙСОВ
========================= */

@font-face {
    font-family: "PeresvetTerminal";
    src: url("assets/fonts/GOST type B.TTF") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    background: #000;
    overflow: hidden;
}


/* =========================
   ГЛАВНЫЙ АРХИВ
========================= */

.archive,
.cases-screen {
    width: 100vw;
    height: 100dvh;
    justify-content: center;
    background: #000;
}

.archive {
    display: flex;
    overflow: hidden;
}

.archive-scene,
.cases-scene {
    position: relative;
    height: 100dvh;
    aspect-ratio: 9 / 16;
    flex-shrink: 0;
}

.archive-image,
.cases-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}


/* =========================
   КНОПКА ДЕЛА
========================= */

.cases-button {
    position: absolute;
    left: 31%;
    top: 30.7%;
    width: 38%;
    height: 9.5%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 10;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* =========================
   ЭКРАН ДЕЛ
========================= */

.cases-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    overflow: hidden;
}

.cases-screen.is-open {
    display: flex;
}


/* =========================
   КНОПКИ ДЕЛ
========================= */

.back-button,
.archive-button {
    position: absolute;
    bottom: 2%;
    height: 7.5%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 30;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.back-button {
    left: 13%;
    width: 27%;
}

.archive-button {
    right: 13%;
    width: 27%;
}


/* =========================
   СПИСОК ДЕЛ
========================= */




.cases-scene::before {
    content: "РАССЛЕДОВАНИЯ";

    position: absolute;
    left: 10%;
    top: 5%;

    width: 80%;
    height: 7.5%;

    z-index: 25;

    background:
        url("assets/images/archive/ai-divider.webp")
        center / 100% 100%
        no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    color: #111;

    pointer-events: none;
}

.cases-list {
    position: absolute;

    left: 14%;
    right: 14%;
    top: 11%;
    bottom: 18%;

    padding-top: 6%;

    z-index: 20;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 92%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 92%,
        transparent 100%
    );
}

.cases-list::-webkit-scrollbar {
    display: none;
}

.case-spine {
    position: relative;
    width: 100%;
    margin-bottom: 1%;
    
    user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;

    container-type: inline-size;
}

.case-spine img {
    display: block;
    width: 100%;
    height: auto;
}

.case-text {
    position: absolute;

    left: 15%;
    right: 14%;
    top: 50%;

    transform: translateY(-50%);

    text-align: left;

    font-family: "PolyglOTT", monospace;
    font-weight: 400;

    color: #000;

    pointer-events: none;
}

.case-number {
    font-size: 3.8cqw;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.03em;
    margin-bottom: 0%;
    line-height: 0.9;
    
}

.case-title {
    font-size: 6.8cqw;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.04em;
    line-height: 0.9;
}

.case-open {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* =========================
   РАССКАЗ
========================= */

.story-screen {
    position: fixed;
    inset: 0;

    z-index: 200;

    display: none;
    justify-content: center;

    width: 100vw;
    height: 100dvh;

    background: #000;
    overflow: hidden;
}

.story-screen.is-open {
    display: flex;
}

.story-scene {
    position: relative;

    width: 100vw;
    height: 100svh;

    max-width: calc(100svh * 9 / 19.5);

    flex-shrink: 0;
    
    margin: 0 auto;
}

.story-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
}


/* ОБЛАСТЬ ТЕКСТА */

.story-content {
    position: absolute;

    left: 13%;
    top: 5.5%;

    width: 76%;
    height: 83%;

    z-index: 20;

    padding: 2% 2% 5%;
    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
    color: #29231d;

    -webkit-overflow-scrolling: touch;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );
}

.story-stamp {
    display: none;

    width: max-content;
    margin: 4dvh auto 3dvh;
    padding: 1.1dvh 2.2dvh;

    border: 0.35dvh solid #7b1f1f;
    background: transparent;
    color: #7b1f1f;

    font-family: inherit;
    font-size: 1.6dvh;
    font-weight: bold;
    letter-spacing: 0.12em;

    transform: rotate(-4deg);
    opacity: 0.82;

    cursor: pointer;
}

.story-content::-webkit-scrollbar {
    display: none;
}


/* НОМЕР ДЕЛА */

.story-number {
    margin: 0 0 5px;

    font-family: "PolyglOTT", "Courier New", monospace;
    font-size: clamp(10px, 2.4vw, 14px);

    color: #64584a;

    letter-spacing: 0.03em;
}


/* НАЗВАНИЕ */

.story-content h1 {
    margin: 0 0 16px;

    font-family: "PolyglOTT", "Courier New", monospace;

    font-size: clamp(22px, 3.3vw, 30px);
    font-weight: 600;
    line-height: 1.05;

    color: #282119;

    letter-spacing: 0.03em;
}


/* ТЕКСТ РАССКАЗА */

.story-text {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(15px, 2.2dvh, 18px);
    line-height: 1.3;

    color: #28231d;
}

.story-text p {
    margin: 0 0 0.65em;
}


/* ССЫЛКА НА МУЗЫКУ */

.story-music {
    margin: 1.2em 0 !important;
    text-align: center;
    font-style: italic;
}

.story-music a {
    color: #594b3d;
    text-decoration: underline;
}


/* ПАУЗЫ */

.story-pause {
    text-align: center;
    letter-spacing: 0.25em;
}


/* КОНЕЦ */

.story-end {
    margin-top: 1.5em !important;
    padding-bottom: 3em;

    text-align: center;
    font-style: italic;
}


/* КНОПКИ РАССКАЗА */

.story-back-button,
.story-archive-button {
    position: absolute;

    bottom: 1%;

    width: 40%;
    height: 8%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 30;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.story-back-button {
    left: 8%;
}

.story-archive-button {
    right: 8%;
}


/* =========================
   ВЕШАЛКА И КУРТКА
========================= */

.wall-hanger {
    position: absolute;

    width: 24%;

    right: 0.7%;
    top: 32%;

    z-index: 5;

    pointer-events: none;
    user-select: none;
}

.autumn-jacket {
    position: absolute;

    width: 22%;

    right: 0%;
    top: 35%;

    z-index: 6;

    pointer-events: none;
    user-select: none;
}

.autumn-jacket.is-hidden {
    display: none;
}


/* =========================
   ЧАСЫ
========================= */

.office-clock {
    position: absolute;

    left: 5%;
    top: 15%;

    width: 27%;

    aspect-ratio: 1 / 1;

    z-index: 5;

    pointer-events: none;
}

.clock-face {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 5;
    
    user-select: none;
pointer-events: none;
-webkit-user-drag: none;
}


/* ЧАСОВАЯ */

.clock-hour {
    position: absolute;

    width: 38%;
    height: auto;

    left: 54%;
    top: 49%;

    transform-origin: 89% 50%;
    transform: translate(-89%, -50%) rotate(0deg);

    z-index: 6;

    pointer-events: none;
}


/* МИНУТНАЯ */

.clock-minute {
    position: absolute;

    width: 14%;
    height: auto;

    left: 50%;
    top: 51%;

    transform-origin: 50% 95%;
    transform: translate(-50%, -95%) rotate(0deg);

    z-index: 7;

    pointer-events: none;
}


/* СЕКУНДНАЯ */

.clock-second {
    position: absolute;

    width: 42%;
    height: auto;

    left: 50%;
    top: 50%;

    transform-origin: 6.5% 50%;
    transform: translate(-6.5%, -50%) rotate(0deg);

    z-index: 8;

    pointer-events: none;
}

/* ЦЕНТРАЛЬНЫЙ КОЛПАЧОК */

.clock-cap {
    position: absolute;

    left: 50%;
    top: 49%;

    width: 9%;
    height: auto;

    transform: translate(-50%, -50%);

    z-index: 9;

    pointer-events: none;
    user-select: none;
}


/* РОЗЕТКА */

.wall-socket {
    position: absolute;

    width: 60%;

    left: 23%;
    top: 350%;

    z-index: 4;

    pointer-events: none;
    user-select: none;
}


/* =========================
   ЛЮДИ — КНОПКА
========================= */

.people-button {
    position: absolute;

    left: 31%;
    top: 41.2%;

    width: 38%;
    height: 9.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   АНДРОИДЫ — КНОПКА
========================= */

.androids-button {
    position: absolute;

    left: 31%;
    top: 51.2%;

    width: 38%;
    height: 9.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   ИСКУССТВЕННЫЙ ИНТЕЛЛЕКТ — КНОПКА
========================= */

.ai-button {
    position: absolute;

    left: 31%;
    top: 61.6%;

    width: 38%;
    height: 9.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* =========================
   ВЕЩДОКИ — ЭКРАН
========================= */

.evidence-screen {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 100;
}

.evidence-screen.is-open {
    display: flex;
}

.evidence-scene {
    position: relative;
    height: 100dvh;
    aspect-ratio: 9 / 16;
    max-width: 100vw;
}

.evidence-scene::before {
    content: "ВЕЩЕСТВЕННЫЕ ДОКАЗАТЕЛЬСТВА";

    position: absolute;
    left: 10%;
    top: 5%;

    width: 80%;
    height: 7.5%;

    z-index: 25;

    background:
        url("assets/images/archive/ai-divider.webp")
        center / 100% 100%
        no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    color: #111;

    pointer-events: none;
}


.evidence-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    pointer-events: none;
}

/* =========================
   КОРОБКИ ВЕЩДОКОВ
========================= */

.evidence-box {
    position: absolute;
    z-index: 10;
}

.evidence-box-1 {
    width: 76%;
    left: 12%;
    top: 15%;
}

.evidence-box-image {
    display: block;
    width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

.evidence-box-label {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);

    width: 82%;

    text-align: center;
    font-family: "PolyglOTT", sans-serif;
    font-size: 1.5dvh;
    line-height: 1.5;
    letter-spacing: 0.06em;

    color: #211b16;

    pointer-events: none;
    z-index: 2;
}

.evidence-box-button {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;
    border: 0;

    background: transparent;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* =========================
   ОТКРЫТАЯ КОРОБКА ВЕЩДОКОВ
========================= */

.evidence-open-box {
    position: absolute;

    /* РАЗМЕР */
   width: 89%;
height: 91%;

    /* ПОЛОЖЕНИЕ */
    left: 6%;
    top: 0%;

    z-index: 40;
    
    aspect-ratio: auto;

    display: none;
}

.evidence-open-box.is-open {
    display: block;
}

.evidence-open-box-image {
    display: block;
    width: 100%;
height: 100%;
object-fit: fill;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* =========================
   ВЕЩДОК — РУКА АНДРОИДА
========================= */

.evidence-item {
    position: absolute;
    z-index: 45;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

.evidence-item-arm {
    width: 54%;
    height: 85%;

    left: 10%;
    top: 10%;

    object-fit: contain;
    
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
cursor: pointer;
}

/* =========================
   УВЕЛИЧЕННЫЙ ПРОСМОТР ВЕЩДОКА
========================= */

.evidence-item-viewer {
    position: absolute;
    inset: 0;

    z-index: 60;

    display: none;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.evidence-item-viewer.is-open {
    display: flex;
}

.evidence-item-viewer-image {
    width: 90%;
    height: 90%;
    position: relative;
    top: -5%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    pointer-events: none;
}

.evidence-back-button,
.evidence-archive-button {
    position: absolute;
    bottom: 2%;
    height: 7.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 40;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.evidence-back-button {
    left: 13%;
    width: 27%;
    
}

.evidence-archive-button {
    right: 13%;
    width: 27%;
    
}

/* =========================
   ВЕЩДОКИ — КНОПКА
========================= */

.evidence-drawer-button {
    position: absolute;

    left: 31%;
    top: 72%;

    width: 38%;
    height: 9.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   НИЖНЯЯ ТАБЛИЧКА
========================= */

.archive-drawer-label {
    position: absolute;

    display: block;

    z-index: 11;
    
    filter: drop-shadow(0 0.7px 0.7px rgba(0, 0, 0, 0.65));

    pointer-events: none;
    user-select: none;
}

.archive-drawer-label-1 {
    left: 38.5%;
    top: 32.1%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

.archive-drawer-label-2 {
    left: 38.5%;
    top: 42.4%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

.archive-drawer-label-3 {
    left: 38.5%;
    top: 52.9%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

.archive-drawer-label-4 {
    left: 38.5%;
    top: 63.2%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

.archive-drawer-label-text-1 {
    left: 30.7%;
    top: 29.2%;

    width: 38%;
    height: 9.5%;
}

.archive-drawer-label-text-2 {
    left: 30.7%;
    top: 39.5%;

    width: 38%;
    height: 9.5%;
}

.archive-drawer-label-text-3 {
    left: 30.4%;
    top: 50.1%;

    width: 38%;
    height: 9.5%;
}

.archive-drawer-label-text-4 {
    left: 38.5%;
    top: 63.1%;

    width: 22%;
    height: 4%;
}

.archive-drawer-label-5 {
    left: 38.5%;
    top: 73.7%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

.archive-drawer-label-6 {
    left: 38.5%;
    top: 84.2%;

    width: 22%;
    height: 4%;

    object-fit: fill;
}

/* =========================
   НАДПИСЬ — МЕСТА
========================= */

.archive-drawer-label-text {
    position: absolute;

    z-index: 12;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 1.8dvh;

    color: #7dff9b;

    text-shadow:
        0 0 2px rgba(125, 255, 155, 0.80),
        0 0 5px rgba(125, 255, 155, 0.45),
        0 0 9px rgba(125, 255, 155, 0.20);

    pointer-events: none;
    user-select: none;
}

.archive-drawer-label-text-5 {
    left: 30.7%;
    top: 70.8%;

    width: 38%;
    height: 9.5%;
}

.archive-drawer-label-text-6 {
    left: 30.5%;
    top: 81.3%;

    width: 38%;
    height: 9.5%;
}

@media (max-width: 700px) {
    .archive-drawer-label-text-1,
    .archive-drawer-label-text-2,
    .archive-drawer-label-text-3,
.archive-drawer-label-text-4,
.archive-drawer-label-text-5,
.archive-drawer-label-text-6 {
        transform: translateY(2px);
    }
}

/* =========================
   КОНТАКТЫ — КНОПКА
========================= */

.contacts-button {
    position: absolute;

    left: 31%;
    top: 82.5%;

    width: 38%;
    height: 9.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   АНДРОИДЫ — ЭКРАН
========================= */

.androids-screen {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

    overflow: hidden;

    width: 100vw;
    height: 100dvh;

    justify-content: center;

    background: #000;
}

.androids-screen.is-open {
    display: flex;
}

.androids-scene {
    position: relative;

    height: 100dvh;

    aspect-ratio: 9 / 16;

    flex-shrink: 0;
}

.androids-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    pointer-events: none;
}


.androids-scene::before {
    content: "МОДЕЛИ АНДРОИДОВ";

    position: absolute;
    left: 10%;
    top: 5%;

    width: 80%;
    height: 7.5%;

    z-index: 25;

    background:
        url("assets/images/archive/ai-divider.webp")
        center / 100% 100%
        no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    color: #111;

    pointer-events: none;
}

/* =========================
   АНДРОИДЫ — СПИСОК
========================= */

.androids-list {
    position: absolute;

    left: 14%;
    right: 14%;
    top: 11%;
    bottom: 18%;

    padding-top: 6%;

    z-index: 20;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.androids-list::-webkit-scrollbar {
    display: none;
}

/* =========================
   АНДРОИДЫ — КОРЕШОК ТЕРМИНАЛА
========================= */

.android-spine {
    position: relative;
    width: 100%;
    margin-bottom: -5%;
}

.android-spine img {
    display: block;
    width: 100%;
    height: auto;

    user-select: none;
    pointer-events: none;
}

.android-spine-label {
    position: absolute;

    left: 1.5%;
    top: 48%;
    transform: translateY(-50%);

    width: 80%;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 1.8dvh;
    letter-spacing: 0.08em;

    color: #7dff9b;

    text-shadow:
        0 0 2px rgba(125, 255, 155, 0.80),
        0 0 5px rgba(125, 255, 155, 0.45),
        0 0 9px rgba(125, 255, 155, 0.20);

    pointer-events: none;
}

.android-spine-hitbox {
    position: absolute;

    left: 0;
    top: 20%;

    width: 100%;
    height: 55%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 10;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   АНДРОИД — ТЕРМИНАЛ
========================= */

.android-terminal-image {
    position: absolute;

    left: 50%;
    top: -1%;

    width: 95%;
    height: 10;

    transform: translateX(-50%);

    z-index: 25;

    display: none;

    user-select: none;
    pointer-events: none;
}

.android-terminal-image.is-open {
    display: block;
}

/* =========================
   АНДРОИД — СОДЕРЖИМОЕ ТЕРМИНАЛА
========================= */

.android-terminal-model {
    position: absolute;
    left: 32%;
    top: 19%;
    width: 60%;
    height: 3.5%;
    container-type: inline-size;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: flex-start;

    color: #7dff9b;
    text-shadow:
    0 0 3px rgba(125, 255, 155, 0.95),
    0 0 7px rgba(125, 255, 155, 0.65),
    0 0 14px rgba(125, 255, 155, 0.30);
    
    font-family: "PeresvetTerminal", sans-serif;
  font-size: 1.8dvh;
    letter-spacing: 0.08em;
    white-space: nowrap;

    z-index: 30;
}

.android-terminal-image.is-open ~ .android-terminal-model {
    display: none;
}

.android-terminal-content {
    position: absolute;
    
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

    left: 15%;
    top: 7%;

    width: 40%;
    height: 55%;

    z-index: 30;

    display: none;

    

    pointer-events: auto;
}

.android-terminal-image.is-open ~ .android-terminal-content {
    display: block;
}

/* =========================
   АНДРОИД — ПРОШКА
========================= */

.android-terminal-proshka {
    display: block;
    -webkit-tap-highlight-color: transparent;

    width: 95%;
    height: 95%;
    
    margin: 5% auto;

    object-fit: contain;
    
    pointer-events: auto;
cursor: pointer;
}

/* =========================
   АНДРОИД — ХАРАКТЕРИСТИКИ
========================= */

.android-terminal-specs {
    position: absolute;
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

padding: 1.5% 1.5%;
    
    container-type: inline-size;

    left: 56.5%;
    top:7.03%;

    width: 29%;
    height: 30%;
    
    color: #d8d8d8;
    font-family: "PeresvetTerminal", sans-serif;

    z-index: 30;

   
}

.android-specs-title {
    font-size: 10cqw;
    line-height: 1;
    letter-spacing: 0.08em;

    margin-bottom: 4%;

    font-weight: 700;
}

.android-specs-text {
    font-size: 8cqw;
    line-height: 1.5;

    letter-spacing: 0.08em;
}

.android-spec-row {
    display: grid;
    grid-template-columns: 58% 42%;

    margin-bottom: 4%;
}

.android-spec-row span:last-child {
    text-align: right;
}

/* =========================
   АНДРОИД — ДОПОЛНИТЕЛЬНЫЕ РАКУРСЫ
========================= */

.android-terminal-rear {
    position: absolute;
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

    left: 15%;
    top: 62.8%;

    width: 19%;
    height: 21.8%;

    z-index: 30;

    
}

.android-terminal-rear-image {
    display: block;
    -webkit-tap-highlight-color: transparent;

    width: 95%;
height: 95%;

margin: 5% auto;

    object-fit: contain;
    
    pointer-events: auto;
cursor: pointer;
}

.android-terminal-side {
    position: absolute;
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

    left: 36%;
    top: 62.8%;

    width: 19%;
    height: 21.8%;

    z-index: 30;

    
}

.android-terminal-side-image {
    display: block;
    -webkit-tap-highlight-color: transparent;

    width: 95%;
    height: 87%;
    
    margin: 10% auto;


    object-fit: contain;
    
    pointer-events: auto;
cursor: pointer;
}

/* =========================
   АНДРОИД — ОПИСАНИЕ
========================= */

.android-terminal-description {
    position: absolute;
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

padding: 1.5% 1.5%;
    
    container-type: inline-size;

    left: 56.5%;
    top: 38%;

    width: 29%;
    height: 24%;
    
    color: #d8d8d8;
    font-family: "PeresvetTerminal", sans-serif;

    z-index: 30;

    
}

.android-description-title {
    font-size: 10cqw;
    line-height: 1;
    letter-spacing: 0.04em;

    margin-bottom: 5%;

    font-weight: 700;
}

.android-description-text {
    font-size: 7.8cqw;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

/* =========================
   АНДРОИД — НАЗНАЧЕНИЕ МОДЕЛИ
========================= */

.android-terminal-purpose {
    position: absolute;
    border: 1px solid rgba(216, 216, 216, 0.45);
border-radius: 6px;

padding: 1.5% 1.5%;
    
    container-type: inline-size;

    left: 56.5%;
    top: 62.8%;

    width: 29%;
    height: 21.8%;
    color: #d8d8d8;
    font-family: "PeresvetTerminal", sans-serif;

    z-index: 30;

   
}

.android-purpose-title {
    font-size: 10cqw;
    line-height: 1;
    letter-spacing: 0.08em;

    margin-bottom: 5%;

    font-weight: 700;
}

.android-purpose-text {
    font-size: 7.8cqw;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.android-purpose-row {
    font-size: 7.8cqw;
    line-height: 1.2;
    letter-spacing: 0.04em;

    margin-bottom: 6%;
}

.android-purpose-row::before {
    content: "›";

    margin-right: 4%;
}

/* =========================
   СОДЕРЖИМОЕ ТЕРМИНАЛА
========================= */

.android-terminal-specs,
.android-terminal-rear,
.android-terminal-side,
.android-terminal-description,
.android-terminal-purpose {
    display: none;
}

.android-terminal-image.is-open ~ .android-terminal-specs,
.android-terminal-image.is-open ~ .android-terminal-rear,
.android-terminal-image.is-open ~ .android-terminal-side,
.android-terminal-image.is-open ~ .android-terminal-description,
.android-terminal-image.is-open ~ .android-terminal-purpose {
    display: block;
}

/* =========================
   АНДРОИД — ПОЛНОЭКРАННЫЙ ПРОСМОТР
========================= */

.android-image-viewer {
    position: fixed;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.88) 55%,
            rgba(0, 0, 0, 0.98) 100%
        );

    z-index: 200;

    cursor: pointer;
}

.android-image-viewer.is-open {
    display: flex;
}

.android-image-viewer img {
    width: 95%;
    height: 95%;

    object-fit: contain;
}

/* =========================
   АНДРОИДЫ — НИЖНИЕ КНОПКИ
========================= */

.androids-back-button,
.androids-archive-button {
    position: absolute;
    bottom: 2%;
    height: 7.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 40;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.androids-back-button {
    left: 13%;
    width: 27%;
}

.androids-archive-button {
    right: 13%;
    width: 27%;
}

/* =========================
   ИСКУССТВЕННЫЙ ИНТЕЛЛЕКТ — ЭКРАН
========================= */

.ai-screen {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

    overflow: hidden;

    width: 100vw;
    height: 100dvh;

    justify-content: center;

    background: #000;
}

.ai-screen.is-open {
    display: flex;
}

.ai-scene {
    position: relative;

    height: 100dvh;

    aspect-ratio: 9 / 16;

    flex-shrink: 0;
}

.ai-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    pointer-events: none;
}

.ai-rack {
    position: absolute;
    left: 13%;
    top: 8%;
    width: 74%;
    height: 78%;
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 2%;
}

.ai-rack-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ai-rack-section-intelligence {
    height: 48%;
}

/* ВРЕМЕННО — ПОКАЗЫВАЕМ ГРАНИЦЫ СКРОЛЛА ИИ */

.ai-scroll-intelligence {
   
    position: relative;
    top: -10px;

    scrollbar-width: auto;
}

.ai-scroll-intelligence::-webkit-scrollbar {
    display: block;
    width: 6px;
}


/* ПОЛОЖЕНИЕ ВЕРХНЕГО РАЗДЕЛИТЕЛЯ */

.ai-rack-section-intelligence .ai-divider-wrap {
    transform: translateY(-12px);
}

/* ВРЕМЕННО — ГРАНИЦЫ СКРОЛЛА ЦИФРОВЫХ ЛИЧНОСТЕЙ */

.ai-scroll-personalities {
    
    scrollbar-width: auto;
}

.ai-scroll-personalities::-webkit-scrollbar {
    display: block;
    width: 6px;
}

.ai-rack-section-personalities {
    height: 48%;
}

.ai-divider-wrap {
    position: relative;
    width: 112%;
    flex-shrink: 0;
}

.ai-divider {
    position: relative;
    left: -5%;
    display: block;
    width: 100%;
    height: auto;
}

.ai-divider-text {
    position: absolute;
    inset: 0;
    left: -8%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    
    

    color: #111;

    pointer-events: none;
    user-select: none;
}

.ai-scroll {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
    -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
);

mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
);
}

.ai-scroll::-webkit-scrollbar {
    display: none;
}

.ai-divider {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
}

/* =========================
   СЕРВИСНАЯ КОНСОЛЬ ИИ
========================= */

.ai-console {
    position: absolute;

    /* ПОЛОЖЕНИЕ */
    left: 50%;      /* влево / вправо */
    top: 50%;       /* вверх / вниз */

    /* РАЗМЕР */
    width: 105%;     /* общий размер консоли */
    height: 105%;    /* доступная высота */

    /* ТОЧКА ПОЗИЦИОНИРОВАНИЯ */
    transform: translate(-50%, -50%);

    z-index: 30;

    display: none;

    align-items: center;
    justify-content: center;
}

.ai-console.is-open {
    display: flex;
}

.ai-console-image {
    position: absolute;

    /* РАЗМЕР КОНСОЛИ */
   
width: 90%;     /* ширина */
height: 87%;    /* высота */

    /* ПОЛОЖЕНИЕ */
    left: 50%;
    top: 46%;

    transform: translate(-50%, -50%);

    display: block;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* =========================
   ЭКРАН КОНСОЛИ СОБОРА
========================= */

.ai-console-display {
    position: absolute;

    /* ПОЛОЖЕНИЕ ТЕКСТОВОГО ЭКРАНА */
    left: 50%;
    top: 45%;

    /* РАЗМЕР ТЕКСТОВОГО ЭКРАНА */
    width: 73%;
    height: 75%;

    transform: translate(-50%, -50%);

    z-index: 31;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
    padding: 4%;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 1.16dvh;
    line-height: 1.26;

    color: #7dff9b;

    text-shadow:
        0 0 2px rgba(125, 255, 155, 0.55);

    scrollbar-width: thin;
}

/* =========================
   ЗАГРУЗКА КОНСОЛИ СОБОРА
========================= */

.ai-console-loading {
    position: absolute;
    inset: 0;
    left: 3%;

    z-index: 10;

    display: none;

    padding: 4%;
    box-sizing: border-box;

    background: transparent;
    color: #7dff9b;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 1.1dvh;
    line-height: 1.3;
}

.ai-console-loading.is-loading {
    display: block;
}

.ai-console-display:has(.ai-console-loading.is-loading)
> *:not(.ai-console-loading) {
    visibility: hidden;
}

.ai-console-loading-title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 2em;
}

.ai-console-loading-line {
    opacity: 0;
    margin-bottom: 0.8em;
}

.ai-console-loading-line.is-visible {
    opacity: 1;
}

.ai-console-title {
    text-align: center;
    font-size: 2.4em;
    margin-bottom: 0.25em;
}

.ai-console-subtitle {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.3;
    margin-bottom: 2em;
}

.ai-console-section {
    margin-bottom: 2em;
}

.ai-console-heading {
    font-size: 1.15em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid rgba(125, 255, 155, 0.35);
    padding-bottom: 0.3em;
}

.ai-console-section p {
    margin: 0 0 0.9em 0;
}

.ai-console-row {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.35em;
}

.ai-console-row span:last-child {
    text-align: right;
}

.ai-console-important {
    text-align: center;
    margin-top: 1.5em !important;
}



.ai-server {
    position: relative;
    width: 100%;
    left: 0%;
    flex-shrink: 0;
    
    
}

.ai-server-button {
    position: absolute;
    z-index: 20;

    border: none;
    padding: 0;
    margin: 0;

    background: transparent;

    cursor: pointer;
}

/* КНОПКА СОБОР */

.ai-server-button-sobor {
    left: 2%;
    top: 17%;

    width: 94%;
    height: 75%;
}

.ai-server img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.ai-server-name {
    position: absolute;
    left: 22%;
    top: 58%;
    transform: translate(-50%, -50%);
    

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.8dvh;
    letter-spacing: 0.16em;

   

    pointer-events: none;
    user-select: none;
}

.ai-server-lights {
    position: absolute;
    left: 52.2%;
    top: 42%;
    width: 4.5%;
    height: 34%;
    z-index: 5;
    pointer-events: none;
}

.ai-light {
    position: absolute;
    left: 50%;
    width: 42%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    border-radius: 50%;

    background: #17331f;
    box-shadow: none;
}

.ai-light-1 {
    top: -5%;
}

.ai-light-2 {
    top: 34%;
}

.ai-light-3 {
    top: 73%;
}


.ai-status-screen {
    position: absolute;
    left: 56%;
    top: 42%;
    width: 13%;
    height: 32%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 0.8dvh;
    line-height: 1.3;
    text-align: left;
    padding-left: 5%;
box-sizing: border-box;

    color: #7dff9b;
    text-shadow:
        0 0 3px rgba(125, 255, 155, 0.8),
        0 0 6px rgba(125, 255, 155, 0.4);

    pointer-events: none;
    user-select: none;
}

.ai-power-light {
    position: absolute;
    left: 89.7%;
    top: 40%;
    width: 2%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;

    background: #00ff3c;
    box-shadow:
        0 0 3px #8dff9d,
        0 0 7px rgba(141, 255, 157, 0.95),
        0 0 14px rgba(141, 255, 157, 0.75),
        0 0 22px rgba(141, 255, 157, 0.40);
}

.ai-server .ai-light-1 {
    background: #00ff3c;
    box-shadow:
        0 0 3px #8dff9d,
        0 0 7px rgba(141, 255, 157, 0.95),
        0 0 14px rgba(141, 255, 157, 0.75),
        0 0 22px rgba(141, 255, 157, 0.40);
}

.ai-server.is-active .ai-light-2 {
    background: #ffd000;
    box-shadow:
        0 0 3px #ffe36b,
        0 0 7px rgba(255, 227, 107, 0.95),
        0 0 14px rgba(255, 227, 107, 0.70),
        0 0 22px rgba(255, 227, 107, 0.35);
}

.ai-server .ai-light-3 {
    background: #00bfff;
    box-shadow:
        0 0 3px #8edcff,
        0 0 7px rgba(142, 220, 255, 0.95),
        0 0 14px rgba(142, 220, 255, 0.70),
        0 0 22px rgba(142, 220, 255, 0.35);
}


.ai-back-button,
.ai-archive-button {
    position: absolute;

    bottom: 2%;
    height: 7.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 40;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.ai-back-button {
    left: 13%;
    width: 27%;
}

.ai-archive-button {
    right: 13%;
    width: 27%;
}

.contacts-back-button,
.contacts-archive-button {
    position: absolute;

    bottom: 2%;
    height: 7.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 40;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.contacts-back-button {
    left: 13%;
    width: 27%;
}

.contacts-archive-button {
    right: 13%;
    width: 27%;
}


/* =========================
   КОНТАКТЫ — ЭКРАН
========================= */

.contacts-screen {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

    overflow: hidden;

    width: 100vw;
    height: 100dvh;

    justify-content: center;

    background: #000;
}

.contacts-screen.is-open {
    display: flex;
}

.contacts-scene {
    position: relative;

    height: 100dvh;
    aspect-ratio: 9 / 16;

    flex-shrink: 0;
}

.place-travel-confirm {
    position: absolute;
    top: 0;
bottom: 0;
left: 50%;
width: 105%;
transform: translateX(-50%);

    z-index: 80;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.place-travel-confirm.is-open {
    opacity: 1;
    visibility: visible;
}

.place-travel-question {
    font-family: "PeresvetTerminal", sans-serif;
    font-size: 2.2dvh;
    color: #d7ddd9;

    text-align: center;

    margin-bottom: 5dvh;
}

.place-travel-actions {
    display: flex;
    gap: 4dvh;
}

.place-travel-yes,
.place-travel-no {
    min-width: 9dvh;
    padding: 1.2dvh 2.5dvh;

    border: 1px solid rgba(200, 210, 205, 0.5);
    background: transparent;

    color: #d7ddd9;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 2dvh;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.contacts-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    pointer-events: none;
}


.contacts-scene::before {
    content: "АДРЕСНЫЙ РЕЕСТР";

    position: absolute;
    left: 10%;
    top: 5%;

    width: 80%;
    height: 7.5%;

    z-index: 25;

    background:
        url("assets/images/archive/ai-divider.webp")
        center / 100% 100%
        no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    color: #111;

    pointer-events: none;
}

.contacts-list {
    position: absolute;

    left: 14%;
    right: 14%;
    top: 11%;
    bottom: 18%;

    z-index: 20;
}

/* =========================
   МЕСТА — АДРЕСНЫЕ ТАБЛИЧКИ
========================= */

.place-spine {
    position: relative;

    /* РАЗМЕР */
    width: 80%;

    /* ПОЛОЖЕНИЕ */
    left: -2%;
    top: 4%;

    margin-bottom: 2%;
}

.place-spine-image {
    display: block;
    width: 130%;
    left: -10%;
    height: auto;
    

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

.place-spine-text {
    position: absolute;

    left: 23%;
    top: 50%;

    width: 80%;

    transform: translateY(-50%);

    text-align: center;

   font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.8dvh;

    color: #e8edf2;

    pointer-events: none;
}

.place-spine-button {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   МЕСТА — ДВЕРЬ
========================= */

.place-door-screen {
    position: fixed;
    inset: 0;

    z-index: 150;

    display: none;

    width: 100vw;
    height: 100dvh;

    justify-content: center;

    overflow: hidden;

    background: #000;
    
    
}

.place-door-screen.is-open {
    display: flex;
}

/* =========================
   МИТРОФАН — ИНТЕРЬЕР САРАЯ
========================= */

.mitrofan-barn-interior-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    display: none;
    justify-content: center;

    overflow: hidden;

    background: #000;

    z-index: 160;
}

.mitrofan-barn-interior-screen.is-open {
    display: flex;
}

.mitrofan-barn-interior-scene {
    position: relative;

    height: 100dvh;
    aspect-ratio: 9 / 16;

    flex-shrink: 0;

    background: #000;
}

.mitrofan-barn-interior-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}


.glasha-image {
    position: absolute;

    left: 90%;
    top: 36%;

    width: 19%;
    height: auto;

    transform: translate(-50%, -50%);

    z-index: 5;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    animation: glashaBreathing 3s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes glashaBreathing {

    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    35% {
        transform: translate(-50%, -50%) scale(1.015);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.022);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.012);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.glasha-marker {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 56px;
    height: 56px;

    transform: translate(-50%, -50%);

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;
}

.glasha-big {
    position: fixed;

    left: 50%;
    top: 50%;

    width: 70vw;
    height: auto;

    transform: translate(-50%, -50%);

    z-index: 100;

    pointer-events: none;
}

.glasha-marker img {
    width: 24px;
    height: 24px;

    object-fit: contain;

    pointer-events: none;

    animation: interiorMarkerPulse 2.2s ease-in-out infinite;
}

/* =========================
   МИТРОФАН — МАРКЕРЫ ИНТЕРЬЕРА
========================= */

.mitrofan-interior-marker {
    position: absolute;

    width: 56px;
    height: 56px;

    transform: translate(-50%, -50%);

    padding: 0;
    margin: 0;
    border: 0;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    -webkit-tap-highlight-color: transparent;
}

.mitrofan-interior-marker img {
    width: 24px;
    height: 24px;

    object-fit: contain;

    pointer-events: none;

    animation: interiorMarkerPulse 2.2s ease-in-out infinite;
}

.mitrofan-interior-marker.is-active img {
    animation: none;
    transform: scale(0.78);
    opacity: 1;

    transition:
        transform 0.14s ease,
        opacity 0.14s ease;
}

@keyframes interiorMarkerPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.07);
        opacity: 1;
    }
}


/* ВРЕМЕННЫЕ ПОЗИЦИИ — ДАЛЬШЕ ВЫСТАВИМ ТОЧНО */

.mitrofan-interior-marker-robot {
    left: 55%;
    top: 34%;
}

.mitrofan-interior-marker-charge {
    left: 13%;
    top: 37%;
}

.mitrofan-interior-marker-flask {
    left: 88%;
    top: 58%;
}

.glasha-marker {
    left: 84%;
    top: 38%;
}

.nest-interior-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    z-index: 100;
    background: #000;
    opacity: 0;
transition: opacity 3s ease;
    touch-action: none;
}

.nest-interior-screen.is-open {
    display: block;
    opacity: 1;
}

.nest-interior-image {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none;
}

.nest-darkness {
    position: absolute;
    inset: 0;
display: none;
    z-index: 10;

    background:
    radial-gradient(
        circle 11dvh at 50% 50%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.08) 45%,
        rgba(0, 0, 0, 0.55) 75%,
        rgba(0, 0, 0, 0.92) 100%
    );

    pointer-events: none;
}

.place-door-scene {
    position: relative;

    height: 100dvh;
    aspect-ratio: 9 / 16;

    flex-shrink: 0;

    background: #000;
}

.place-door-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 3s ease;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    -webkit-touch-callout: none;
}

.mitrofan-door-marker {
    position: absolute;

    /* Потом точно поставим кружок возле ручки */
    left: 21%;
    top: 52%;

    width: 56px;
    height: 56px;

    transform: translate(-50%, -50%);

    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
}

.mitrofan-door-marker img {
    width: 24px;
    height: 24px;
    object-fit: contain;

    pointer-events: none;

    animation: locationMarkerPulse 1.8s ease-in-out infinite;
}

@keyframes locationMarkerPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

.place-door-screen.is-visible .place-door-image {
    opacity: 1;
}

.archive {
    transition: filter 2s ease;
}

.archive.office-hidden {
    opacity: 0;
}



.place-return-office {
    position: absolute;

    left: 50%;
    bottom: 4%;

    transform: translateX(-50%);

    z-index: 20;

    padding: 1.2dvh 2.2dvh;

    border: 1px solid rgba(200, 210, 205, 0.55);

    background: rgba(0, 0, 0, 0.72);

    color: #d7ddd9;

    font-family: "PeresvetTerminal", sans-serif;
    font-size: 1.7dvh;

    white-space: nowrap;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

/* =========================
   ЛЮДИ — ЭКРАН
========================= */

.people-screen {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

    overflow: hidden;

    width: 100vw;
    height: 100dvh;

    justify-content: center;

    background: #000;
}

.people-screen.is-open {
    display: flex;
}

.people-scene {
    position: relative;

    height: 100dvh;

    aspect-ratio: 9 / 16;

    flex-shrink: 0;
}

.people-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    pointer-events: none;
}

.people-scene::before {
    content: "ЛИЧНЫЕ ДОСЬЕ";

    position: absolute;
    left: 10%;
    top: 5%;

    width: 80%;
    height: 7.5%;

    z-index: 25;

    background:
        url("assets/images/archive/ai-divider.webp")
        center / 100% 100%
        no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "RobotoBoldCondensed", sans-serif;
    font-size: 1.85dvh;
    letter-spacing: 0.10em;
    color: #111;

    pointer-events: none;
}


/* =========================
   СПИСОК ПАПОК ЛЮДЕЙ
========================= */

.people-list {
    position: absolute;

    left: 14%;
    right: 14%;

    top: 11%;
    bottom: 18%;

    padding-top: 6%;

    z-index: 20;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.people-list::-webkit-scrollbar {
    display: none;
}


/* =========================
   ПАПКА ЧЕЛОВЕКА
========================= */

.person-folder {
    position: relative;

    width: 100%;

    margin-bottom: -1%;

    pointer-events: none;

    container-type: inline-size;
    
    user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}

.person-folder img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
}


/* ИМЯ НА ПАПКЕ */

.person-name {
    position: absolute;

    left: 15%;
    right: 10%;

    top: 26%;

    font-family: "PolyglOTT", monospace;

    font-size: 4.7cqw;
    font-weight: 400;

    color: #000000;

    letter-spacing: 0.03em;

    pointer-events: none;
}


/* =========================
   ЗОНА НАЖАТИЯ ПАПКИ
========================= */

.person-hitbox {
    position: absolute;

    left: 10%;
    top: 28%;

    width: 83%;
    height: 40%;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    z-index: 50;

    pointer-events: auto;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* =========================
   НИЖНИЕ КНОПКИ ЛЮДЕЙ
========================= */

.people-back-button,
.people-archive-button {
    position: absolute;

    bottom: 2%;

    height: 7.5%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 30;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.people-back-button {
    left: 13%;
    width: 27%;
}

.people-archive-button {
    right: 13%;
    width: 27%;
}


/* ==================================================
   ДОСЬЕ — ЕДИНАЯ СИСТЕМА КООРДИНАТ
================================================== */

.dossier-wrap {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 90%;

    z-index: 25;

    display: none;

    pointer-events: none;

    container-type: inline-size;
}


/* ==================================================
   ФОН ДОСЬЕ
================================================== */

.dossier-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;

    display: block;

    pointer-events: none;
    user-select: none;
}


/* ==================================================
   ОБЩИЙ ОТЛАДОЧНЫЙ ВИД
   ПОКА ВСЕ ЗОНЫ КРАСНЫЕ
================================================== */

.dossier-row,
.dossier-label,
.dossier-photo-zone,
.dossier-media {
    position: absolute;

    z-index: 5;

    border: 0;
background: transparent;
color: #000;

    font-family:
        "PolyglOTT",
        "Courier New",
        monospace;

    font-size: 2.3cqw;

    line-height: 1;

    overflow: hidden;
}
.dossier-label {
    color: #d8d2c8;
}

.dossier-label {
    color: #d8d2c8;

    font-size: 2.5cqw;   /* размер слов */

    padding-left: 7%;    /* вправо */
    padding-top: 2%;     /* вниз */
}

/* ОСНОВНОЙ ТЕКСТ ДОСЬЕ */

.dossier-row {
    font-size: 2.6cqw;   /* размер текста */

    padding-left: 2%;    /* вправо / влево */
    padding-top: 0.8%;     /* вниз / вверх */
}

/* ==================================================
   ФОТО
================================================== */

.dossier-photo-zone {
    left: 13%;
    top: 8%;

    width: 26%;
    height: 22%;
    
    overflow: visible;
    
    
}


.dossier-portrait { 
    position: absolute; 

    left: -7%; 
    top: -8%; 

    width: 115%; 
    height: 115%; 

    object-fit: contain; 

    /* ПРИГЛУШИТЬ ФОТО */
    filter:
        saturate(70%)
        brightness(90%)
        drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.55));


    z-index: 2; 
    display: none; 

    pointer-events: none; 
    user-select: none; 
}

/* ==================================================
   ОСНОВНЫЕ ДАННЫЕ
   4 СТРОКИ СПРАВА ОТ ФОТО
================================================== */

.dossier-main-row {
    left: 45%;

    width: 46%;
    height: 2.8%;
}


.row-main-1 {
    top: 11%;
}

.row-main-2 {
    top: 15%;
}

.row-main-3 {
    top: 19%;
}

.row-main-4 {
    top: 23%;
}


/* ==================================================
   ТАБЛИЧКА — ДЕЯТЕЛЬНОСТЬ
================================================== */

.label-activity {
    left: 9.5%;
    top: 32.2%;

    width: 27%;
    height: 3.5%;
}


/* ==================================================
   ДЕЯТЕЛЬНОСТЬ
   5 СТРОК
================================================== */

.row-activity-1,
.row-activity-2,
.row-activity-3,
.row-activity-4,
.row-activity-5 {
    left: 14%;

    width: 75%;
    height: 2.1%;
}


.row-activity-1 {
    top: 36.3%;
}

.row-activity-2 {
    top: 38.6%;
}

.row-activity-3 {
    top: 41%;
}

.row-activity-4 {
    top: 43.3%;
}

.row-activity-5 {
    top: 45.4%;
}


/* ==================================================
   ТАБЛИЧКА — НАВЫКИ
================================================== */

.label-skills {
    left: 9.5%;
    top: 49.3%;

    width: 27%;
    height: 3.5%;
}


/* ==================================================
   НАВЫКИ
   5 СТРОК
================================================== */

.row-skill-1,
.row-skill-2,
.row-skill-3,
.row-skill-4,
.row-skill-5 {
    left: 14%;

    width: 75%;
    height: 2.1%;
}


.row-skill-1 {
    top: 53%;
}

.row-skill-2 {
    top: 55.1%;
}

.row-skill-3 {
    top: 57.4%;
}

.row-skill-4 {
    top: 59.6%;
}

.row-skill-5 {
    top: 61.8%;
}


/* ==================================================
   ТАБЛИЧКА — СВЯЗИ
================================================== */

.label-links {
    left: 10.5%;
    top: 66.5%;

    width: 25%;
    height: 2.9%;
}


/* ==================================================
   СВЯЗИ — ЛЕВАЯ КОЛОНКА
================================================== */

.link-family-1,
.link-family-2,
.link-family-3,
.link-family-4 {
    left: 13%;

    width: 22%;
    height: 2%;
}


.link-family-1 {
    top: 70%;
}

.link-family-2 {
    top: 72.2%;
}

.link-family-3 {
    top: 74.4%;
}

.link-family-4 {
    top: 76.6%;
}


/* ==================================================
   СВЯЗИ — ЦЕНТРАЛЬНАЯ КОЛОНКА
================================================== */

.link-work-1,
.link-work-2,
.link-work-3,
.link-work-4 {
    left: 38%;

    width: 17%;
    height: 2%;
}


.link-work-1 {
    top: 70%;
}

.link-work-2 {
    top: 72.2%;
}

.link-work-3 {
    top: 74.4%;
}

.link-work-4 {
    top: 76.6%;
}


/* ==================================================
   СВЯЗИ — ПРАВАЯ КОЛОНКА
================================================== */

.link-other-1,
.link-other-2,
.link-other-3,
.link-other-4 {
    left: 59%;

    width: 28%;
    height: 2%;
}


.link-other-1 {
    top: 70%;
}

.link-other-2 {
    top: 72.2%;
}

.link-other-3 {
    top: 74.4%;
}

.link-other-4 {
    top: 76.6%;
}


/* ==================================================
   ТАБЛИЧКА — МАТЕРИАЛЫ
================================================== */

.label-materials {
    left: 10.5%;
    top: 81.0%;

    width: 24%;
    height: 2.9%;
}


/* ==================================================
   МАТЕРИАЛЫ — 3 ЯЧЕЙКИ
================================================== */

.dossier-media {
    top: 85%;

    height: 8.5%;
}


.media-1 {
    left: 13%;
    width: 18.3%;
}


.media-2 {
    left: 32.7%;
    width: 18.3%;
}


.media-3 {
    left: 52.5%;
    width: 17.3%;
}

/* ==================================================
   УВЕЛИЧЕННЫЙ ПОРТРЕТ
================================================== */

.dossier-portrait {
    pointer-events: auto;
    cursor: pointer;
}

.portrait-viewer {
    position: absolute;
    inset: 0;
    z-index: 100;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.82);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.portrait-viewer.is-open {
    display: flex;
}

.portrait-viewer img {
    max-width: 90%;
    max-height: 85%;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        saturate(70%)
        brightness(90%)
        drop-shadow(7px 9px 8px rgba(0, 0, 0, 0.65));
}

/* ==================================================
   РАССКАЗ — ЛЕЖИТ В ОТКРЫТОМ ЯЩИКЕ
================================================== */

.story-scene {
    width: auto;
    height: 100dvh;
    aspect-ratio: 9 / 16;
    max-width: none;
}


/* ФОН — ТОТ ЖЕ ЯЩИК, ЧТО В ДЕЛАХ */

.story-drawer-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    pointer-events: none;
    user-select: none;
}


/* ЛИСТ РАССКАЗА ПОВЕРХ ЯЩИКА */

.story-image {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 90%;

    object-fit: contain;

    z-index: 10;

    pointer-events: none;
    user-select: none;
}


/* ТЕКСТ НА ЛИСТЕ */

.story-content {
    z-index: 20;
}


/* ТЕ ЖЕ КНОПКИ, ЧТО У ЯЩИКА */

.story-back-button,
.story-archive-button {
    bottom: 2%;

    width: 27%;
    height: 7.5%;

    z-index: 30;
}

.story-back-button {
    left: 13%;
}

.story-archive-button {
    right: 13%;
}

/* ==================================================
   РАССКАЗ — ПОДГОНКА ЛИСТА И ТЕКСТА
================================================== */

.story-image {
    position: absolute;

    left: 50%;
    top: 1%;

    width: 91%;
    height: 92%;

    transform: translateX(-50%);

    object-fit: unset;

    z-index: 10;

    pointer-events: none;
    user-select: none;
}