/* Внешний вид задаётся сценами Unity (data/layout/*.json): здесь только то,
   что нужно движку раскладки (js/ui.js), чтобы повторить их в браузере. */

@font-face {
    font-family: "Liberation Sans";
    src: url("../fonts/LiberationSans.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1b1b1b;
    font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: manipulation;
}

[hidden] { display: none !important; }

#app, .screen { position: fixed; inset: 0; }

/* ---------- Холст Unity ---------- */

/* Холст в условных единицах, растягивается transform'ом под экран. */
.u-stage {
    position: fixed;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    overflow: hidden;
}

/* Элемент RectTransform. Координаты выставляет движок. */
.u {
    position: absolute;
    box-sizing: border-box;
}

/* Картинка Image: растягивается на весь прямоугольник, как в Unity без Preserve Aspect. */
.u > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Image без спрайта — залитый прямоугольник. */
.u-fill { position: absolute; inset: 0; }
/* Image Type: Sliced — 9-slice через border-image. */
.u-slice { position: absolute; inset: 0; box-sizing: border-box; pointer-events: none; }

/* TextMeshPro: текст внутри прямоугольника с выравниванием (отступы задаёт движок). */
.u-text {
    position: absolute;
    display: flex;
    pointer-events: none;
}
.u-text > span { display: block; max-width: 100%; }

.u-button { cursor: pointer; }
.u-button:active > img,
.u-button:active > .u-fill,
.u-button:active > .u-slice { filter: brightness(0.78); }
.u-disabled { cursor: default; }
.u-disabled, .u-disabled * { pointer-events: none; }

/* Mask и область прокрутки ScrollRect (полоса прокрутки — своя, из сцены). */
.u-clip { overflow: hidden; }
.u-viewport {
    position: absolute;
    inset: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
}
.u-viewport::-webkit-scrollbar { display: none; }
.u-viewport { cursor: grab; }
.u-viewport.u-dragging { cursor: grabbing; }
.u-viewport.u-dragging * { pointer-events: none; }

/* ---------- Экран загрузки ---------- */

#loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #1b1b1b;
    color: #ddd;
    font-size: 16px;
    z-index: 100;
}
.spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid #444;
    border-top-color: #ffcc00;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }