/* Win95-каркас (этап 2.2: шрифты, меню, курсоры, экран загрузки) */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Атрибут hidden должен прятать элемент даже при явном display в других
   правилах: #win до конца загрузки помечен hidden, а портретное
   `#win { display: flex }` иначе перебивало бы его и показывало окно
   поверх экрана загрузки. */
[hidden] { display: none !important; }

:root {
    --w95-face: #c0c0c0;
    --w95-shadow: #808080;
    --w95-dark: #404040;
    --w95-light: #ffffff;
    --w95-title: #000080;
    --crt-green: #33ff66;
    --crt-dim: #22aa44;
    /* Шрифт «хрома» окна (рамки, меню, диалоги) — системный, максимально близкий
       к MS Sans Serif; пиксельный webfont — вместе с артом (итерация 2.1) */
    --w95-chrome-font: Tahoma, 'MS Sans Serif', 'Segoe UI', sans-serif;
    /* Пиксельные курсоры Win95 (2.2.2); системный — запасной вариант */
    --cur-arrow: url('../cursors/arrow.png') 0 0;
    --cur-hand: url('../cursors/hand.png') 12 0;
    --cur-wait: url('../cursors/wait.png') 13 15;
}

html {
    height: 100%;
}

body {
    /* Динамическая высота вьюпорта: низ панели не уезжает под адресную строку
       мобильных браузеров. height:100% — фолбэк для сред без dvh (11 §3.3). */
    height: 100%;
    height: 100dvh;
    background: #008080;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Окно масштабируется под вьюпорт (transform на #win) — скролл не нужен;
       overflow:hidden убирает полосы и обрезает layout-бокс за пределами видимой
       области, а сам масштабированный контент центрируется целиком (11 §3.3). */
    overflow: hidden;
    /* Мобильные жесты: без pull-to-refresh и «резинки» страницы (11 §4.2) */
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: var(--cur-arrow), default;
}

/* Рельефы Win95 */
.bevel-out {
    border: 2px solid;
    border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
}
.bevel-in {
    border: 2px solid;
    border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

#win {
    background: var(--w95-face);
    padding: 2px;
    width: max-content;
    /* Общий масштаб под вьюпорт (11 §3.3, М-2). --win-scale ставит main.js;
       до его запуска и на десктопе, вмещающем окно, — ×1 (поведение как было).
       transform не меняет layout-бокс, поэтому центрирование флексом сохраняется. */
    transform: scale(var(--win-scale, 1));
    transform-origin: center center;
}

.titlebar {
    background: var(--w95-title);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
    font-weight: bold;
}

/* Мини-иконка приложения в заголовке (Win95); глитч icon_swap её «портит» */
.titlebar .title-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 12px;
    margin-right: 4px;
    background: linear-gradient(#7ba0e0 0 4px, #fff 4px);
    border: 1px solid #000;
}

.titlebar .win-buttons { margin-left: auto; }

.titlebar .win-buttons span {
    display: inline-block;
    width: 16px;
    height: 14px;
    background: var(--w95-face);
    color: #000;
    text-align: center;
    line-height: 12px;
    font-size: 10px;
    margin-left: 2px;
    border: 1px solid;
    border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
}

/* Меню File/Options/Help (2.2.1) */
.menubar {
    padding: 2px 4px;
    display: flex;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
}
.menu-head {
    padding: 2px 7px;
    cursor: inherit;
}
.menu-head:first-letter { text-decoration: underline; }
.menu-head.open {
    background: var(--w95-title);
    color: #fff;
}

/* Выпадающее меню (общий вид с #ctxmenu) */
#menupop {
    position: fixed;
    background: var(--w95-face);
    padding: 2px;
    min-width: 160px;
    z-index: 150;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
#menupop .item {
    padding: 4px 20px 4px 22px;
    cursor: inherit;
    position: relative;
}
/* Подсветка наведением — только в hover-среде: на touch :hover «залипает»
   после тапа (выбор пункта идёт через pointerdown, 11 §4.3) */
@media (hover: hover) {
    #menupop .item:hover:not(.disabled) {
        background: var(--w95-title);
        color: #fff;
    }
}
#menupop .item.disabled {
    color: var(--w95-shadow);
    text-shadow: 1px 1px 0 var(--w95-light);
}
#menupop .item .check {
    position: absolute;
    left: 7px;
}
#menupop .sep {
    height: 0;
    margin: 3px 2px;
    border-top: 1px solid var(--w95-shadow);
    border-bottom: 1px solid var(--w95-light);
}

.content {
    display: flex;
    gap: 4px;
    padding: 4px;
}

/* Экран комнаты: canvas + CRT-оверлей поверх (crt.css) */
#screen {
    position: relative;
    background: #000;
    flex: 0 0 auto;
    font-size: 0; /* canvas — inline-элемент; убирает щель под ним */
}
#room {
    background: #000;
    image-rendering: pixelated;
    /* Тап по полу/предмету не должен тащить/зумить страницу (11 §4.2) */
    touch-action: none;
}
#room.over-object { cursor: var(--cur-hand), pointer; }

/* Индикатор занятости для touch (11 §4.3): на десктопе занятость показывает
   курсор-часы, на touch курсора нет — во время сценария в углу экрана
   появляются те же аутентичные песочные часы. Только coarse-режим, чтобы
   не менять десктопный вид. */
#busy-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: url('../cursors/wait.png') center / contain no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    display: none;
}
@media (pointer: coarse) {
    body.busy #busy-badge { display: block; }
}

/* Правая панель */
#panel {
    width: 196px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.box {
    background: #000;
    color: var(--crt-green);
    padding: 6px;
    overflow: hidden;
}

.box-title {
    background: var(--w95-face);
    color: #000;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
    margin: -6px -6px 6px -6px;
    padding: 3px 6px;
    border-bottom: 1px solid var(--w95-shadow);
}

#meta-box div { line-height: 1.7; }

#log-box { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: 452px;
    scrollbar-width: thin;
    /* Лог — единственная прокручиваемая пальцем область (11 §4.2) */
    touch-action: pan-y;
}
#log .entry { margin-bottom: 6px; }
#log .entry .t { color: var(--crt-dim); }

/* +33% к floor'у: 4 строки в статусе умещаются без роста бокса и сдвига окна */
#status-box { min-height: 120px; }

.statusbar {
    display: flex;
    justify-content: space-between;
    padding: 2px 6px;
    margin-top: 2px;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
}
.statusbar > span {
    flex: 1;
    padding: 2px 6px;
    border: 1px solid;
    border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
}
.statusbar > span + span,
.statusbar > span + .dev-btn,
.statusbar > .dev-btn + span { margin-left: 4px; flex: 0 0 auto; }

/* Служебная кнопка разработчика (не элемент игры — снять перед публичным релизом) */
.dev-btn {
    font-family: inherit;
    font-size: inherit;
    background: #ffe8a3;
    color: #5a3d00;
    padding: 1px 6px;
    border: 1px solid;
    border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
    cursor: inherit;
}
.dev-btn:active {
    border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
}

/* Контекстное меню Win95 */
#ctxmenu {
    position: fixed;
    background: var(--w95-face);
    padding: 2px;
    min-width: 150px;
    z-index: 100;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
#ctxmenu .item {
    padding: 4px 18px 4px 10px;
    cursor: inherit;
}
@media (hover: hover) {
    #ctxmenu .item:hover {
        background: var(--w95-title);
        color: #fff;
    }
}

/* Модальный диалог Win95 (эффект dialog, «Продолжение невозможно»).
   Диалог виден и во время busy (эффекты ещё проигрываются/сессия ждёт
   рестарта) — курсор внутри него всегда обычный, а не часы: пользователю
   надо явно навестись на кнопку и кликнуть. */
.dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    cursor: var(--cur-arrow), default;
}
.dlg {
    background: var(--w95-face);
    padding: 2px;
    min-width: 300px;
    max-width: 440px;
    font-family: var(--w95-chrome-font);
    font-size: 11px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.dlg-body {
    padding: 16px 14px;
    color: #000;
}
.dlg-text {
    white-space: pre-line;
    line-height: 1.5;
}
.dlg-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 14px 14px;
}
.dlg-btn {
    min-width: 96px;
    padding: 4px 14px;
    background: var(--w95-face);
    font-family: inherit;
    font-size: inherit;
    border: 2px solid;
    border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
    cursor: inherit;
}
.dlg-btn:focus {
    outline: 1px dotted #000;
    outline-offset: -5px;
}
.dlg-btn:active {
    border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

/* Экран загрузки (2.2.4): диалог с прогресс-баром поверх «рабочего стола» */
#loader .dlg { min-width: 320px; }
.loader-body { padding: 14px; color: #000; }
#loader-text { margin-bottom: 10px; }
.progress {
    height: 18px;
    background: var(--w95-face);
    padding: 1px;
}
#loader-bar {
    height: 100%;
    width: 0%;
    /* Сегменты Win95: синие блоки с зазором */
    background: repeating-linear-gradient(
        90deg,
        var(--w95-title) 0 8px,
        var(--w95-face) 8px 10px
    );
}

/* Блокировка ввода на время сценария эффектов: курсор-часы на всём окне */
body.busy,
body.busy #room,
body.busy #room.over-object { cursor: var(--cur-wait), wait; }
body.busy #ctxmenu { pointer-events: none; }

/* ============================================================
   Мобильная адаптация (техпроект 11, итерация 2.6, фаза М-А).
   Десктоп (pointer: fine, вмещающий вьюпорт) не затрагивается:
   все правила — под @media (pointer: coarse). Масштаб окна ставит
   main.js (--win-scale), здесь — только компоновка и touch-цели.
   ============================================================ */

/* Touch-цели: растут зоны попадания (padding/min-height), не кегль (11 §4.4).
   Coarse включает и iPad с десктопной раскладкой — ключевой кейс против
   UA-снифинга (11 §10). */
@media (pointer: coarse) {
    /* Зум/пан игрового поля (11 §4.5): #screen — окно-«прорезь», обрезающее
       увеличенное поле; #room масштабируется CSS-трансформом. Переменные
       --zoom/--pan-* ставит main.js по двухпальцевому жесту; по умолчанию
       ×1 без сдвига (вид как без зума). transform-origin 0 0 — чтобы pan
       считался в экранных px независимо от зума (см. viewport.js). */
    #screen {
        overflow: hidden;
    }
    #room {
        transform-origin: 0 0;
        transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
        will-change: transform;
    }
    #ctxmenu,
    #menupop {
        font-size: 13px;
    }
    #ctxmenu .item,
    #menupop .item {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    /* Галочка CRT абсолютна внутри пункта — центрируем по возросшей высоте */
    #menupop .item .check {
        top: 50%;
        transform: translateY(-50%);
    }
    .menu-head {
        padding: 8px 12px;
    }
    .dlg-btn {
        min-height: 40px;
    }
    /* Безопасные зоны выреза/индикатора Home (11 §3.3) */
    body {
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
}

/* Портрет узкого телефона (11 §3.2). Здесь окно НЕ ужимается общим
   transform-scale (он же мельчил шрифт панели): вместо этого окно занимает
   экран целиком (100dvh), canvas масштабируется по ширине через CSS
   (width:100% — координаты тапа считаются от getBoundingClientRect, поэтому
   не ломаются), а панель живёт в натуральном масштабе на остатке высоты, лог
   растягивается и скроллится внутри. Планшеты (>700px) и ландшафт остаются на
   общем transform-scale. */
@media (pointer: coarse) and (max-width: 700px) {
    #win {
        /* Верхнее выравнивание только окна игры (align-self, не body): экран
           загрузки #loader остаётся по центру. Окно и так заполняет высоту —
           flex-start лишь убирает возможный сдвиг на устройствах с вырезом. */
        align-self: flex-start;
        transform: none; /* отменяем общий даунскейл — панель в натуральном кегле */
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    .content {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }
    #screen {
        flex: 0 0 auto;
        width: 100%;
    }
    #room {
        display: block;
        width: 100%;
        height: auto; /* аспект 768×696 сохраняется; image-rendering: pixelated — чётко */
    }
    #panel {
        flex: 1 1 auto;
        min-height: 0;
        width: auto;
    }
    #meta-box {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex: 0 0 auto;
    }
    #meta-box div {
        line-height: 1.3;
    }
    #status-box {
        flex: 0 0 auto;
        min-height: 0;
    }
    #log-box {
        flex: 1 1 auto;
        min-height: 0;
    }
    #log {
        max-height: none; /* лог занимает всю оставшуюся высоту окна */
    }
    /* Крупнее текст лога и состояния — панель теперь в натуральном масштабе */
    #log,
    #statusline {
        font-size: 15px;
    }
}