:root { color-scheme: dark; }

* { box-sizing: border-box; }

html { touch-action: manipulation; }

body {
    margin: 0;
    touch-action: manipulation;
    /*
     * Не совсем чёрный. Поле вокруг кадра занимает почти половину экрана, и
     * при яркости 9 из 255 любой замер по всей странице читает игру как
     * чёрный прямоугольник — даже когда сам кадр светлый.
     */
    background: #141822;
    color: #cdd6e4;
    font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    gap: 10px;
    padding: 10px;
    overscroll-behavior: none;
}

/*
 * Пропорция кадра задаётся здесь, а не холстом. Если позволить холсту
 * диктовать свою высоту, получается петля: холст меряется по контейнеру,
 * контейнер — по холсту, и кадр «уезжает» в квадрат.
 */
#topbar {
    width: min(100%, 1000px);
    display: flex;
    justify-content: flex-end;
}

.iconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #232a3a;
    border-radius: 8px;
    background: #11151f;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

.iconButton:hover { background: #182034; border-color: #33405a; }

#stage {
    position: relative;
    width: min(100%, 1000px);
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 90px);
}

#game {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #0b0d13;
    border: 1px solid #1d2230;
    border-radius: 6px;
    touch-action: none;
    cursor: crosshair;
}

#keys { max-width: 820px; text-align: center; color: #6d7688; margin: 0; }
#keys b { color: #9fb0c8; font-weight: 600; }

/* Съёмочный адрес показывает только мир: ни ссылки, ни клавиш, ни пальцев. */
body.capture { padding: 0; gap: 0; }
body.capture #topbar,
body.capture #controls,
body.capture #keys { display: none !important; }
body.capture #stage {
    aspect-ratio: 16 / 9;
    max-height: 100svh;
}

/* Пальцевое управление показывается только там, где пальцем и играют. */
#controls { display: none; }

@media (pointer: coarse), (max-width: 700px) {
    /*
     * На телефоне кадр вытягивается ближе к квадрату: при 16:9 на экране
     * 390×844 игра превращалась в узкую полосу посреди чёрного листа.
     * Площадь видимого мира от этого не меняется — её держит fitView.
     */
    #stage {
        aspect-ratio: 4 / 5;
        max-height: calc(100svh - 210px);
    }

    /*
     * Управление живёт ПОД кадром. Кнопка на игровом поле закрывает собой
     * ровно то, ради чего её нажимают: укрытие, стража, строку задачи.
     */
    #controls {
        display: flex;
        width: min(100%, 1000px);
        gap: 10px;
        align-items: center;
        touch-action: none;
    }

    #pad {
        flex: 0 0 40%;
        height: 132px;
        border: 1px dashed #29334a;
        border-radius: 12px;
        background: rgba(120, 160, 220, 0.05);
        touch-action: none;
    }

    #buttons {
        display: grid;
        flex: 1;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        touch-action: none;
    }

    #buttons button {
        height: 42px;
        padding: 0 2px;
        border-radius: 8px;
        border: 1px solid #33405a;
        background: rgba(18, 24, 38, 0.9);
        color: #cdd6e4;
        /* Одно слово в строку и без переносов: «крас-ться» читается поломкой. */
        font: 600 11px/1 system-ui, sans-serif;
        white-space: nowrap;
        overflow: hidden;
        touch-action: none;
    }

    #buttons button.on { background: rgba(60, 120, 190, 0.55); }
    #keys { display: none; }
}