/* --- 1. БАЗОВЫЙ СБРОС --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* Центрируем всё по горизонтали */
    align-items: center;     /* Центрируем всё по вертикали */
    overflow: hidden;
}

@font-face {
    font-family: 'OuijaFont'; /* Название, которое ты придумал сам */
    src: url('res/font/SyneMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Текст будет виден сразу в системном шрифте, пока грузится твой */
}


img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;


    /* Запрещаем выделение */
    -webkit-user-select: none;
    user-select: none;

    /* Запрещаем перетаскивание (только для Webkit-браузеров) */
    -webkit-user-drag: none;
    
    /* Отключаем системные тач-события (меню при долгом нажатии) */
    touch-action: none;
    
    /* Дополнительная защита: запрещаем контекстное меню (правой кнопкой) */
    /* Это также предотвратит долгое нажатие для сохранения картинки на телефонах */
    pointer-events: none; 
}


/* --- 2. ГЛАВНЫЙ КОНТЕЙНЕР --- */
.world-wrapper {    
    display: flex;

    /* Меняем column на row, чтобы блоки встали бок о бок */
    /* flex-direction: column; */
    flex-direction: row; 
    align-items: center;
    justify-content: center;
    
    width: 100vw;
    height: 100vh;
    background-color: #050505; /* Темный фон для пустых зон */
    overflow: hidden;

    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Стандарт */
    
    /* Убираем синий контур при нажатии на мобильных устройствах */
    -webkit-tap-highlight-color: transparent;
}

.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Забирает всё свободное место, двигая рекламу к краю */
}

/* --- 3. СКЕЙЛИНГ ЭКРАНА (16:9) --- */
.screen {
    position: relative;
    /* Магия пропорций 16:9 */
    aspect-ratio: 16 / 9;

    /* Блок будет занимать Либо 100% ширины, 
       Либо такую ширину, чтобы вписаться в высоту (минус реклама) 
    */
    /* width: min(100vw, calc((100vh - 100px) * 1.777));  */
    width: min(calc(100vw - 160px), calc((100vh - 100px) * 1.777)); /* добавлено для бокового банера ад */

    height: auto;

    /* Теперь используем cover, но так как блок всегда 16:9, 
       картинка 16:9 ляжет идеально пиксель в пиксель без искажений */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    /* Убираем растягивание фона принудительно */
    flex-shrink: 0; 
}

/* Вертикальный сайдбар для рекламы */
.ad-sidebar {
    /* width: 160px; */
    width: 200px;

    height: min(100vh, 600px); /* Высота под стандартный баннер 160x600 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Запрещаем рекламе сжиматься */
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 0.5s ease; /* Плавное проявление */
}

/* Режим невидимки для page0 */
.ad-sidebar.transparent {
    opacity: 0;
    pointer-events: none; /* Клики проходят насквозь, пока реклама скрыта */
}

/* Наполнение плейсхолдера для тестов */
.ad-placeholder {
    width: 100%;
    height: 100%;
    border: 1px dashed #333;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #444;
    font-size: 10px;
    font-family: monospace;
    text-align: center;
}

/* На случай очень широких экранов, чтобы не вылезало по ширине */
@media (min-aspect-ratio: 16/9) {
    .screen {
        height: calc(100vh - 100px);
        width: auto;
    }
}

.screen.hidden { display: none; }
.screen.active { display: flex; }

/* #page1 { background-image: url('res/bg_01.jpg'); } */
#page1 {
    background-image: url('res/bg_01.jpg');
    background-size: 105%; /* Слегка увеличиваем фон, чтобы края не "вылезали" при тряске */
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    
    /* Запускаем анимацию покачивания */
    animation: cameraSway 5s ease-in-out infinite;
}
/* .content {
    animation: cameraSway 5s ease-in-out infinite;
} */


@keyframes cameraSway {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(2px, 1px);
    }
    50% {
        transform: translate(-3px, 0px);
    }
    75% {
        transform: translate(-2px, -1px);
    }
}

#page2 { background-image: url('res/bg_02.jpg'); 
    background-size: 105%; /* Слегка увеличиваем фон, чтобы края не "вылезали" при тряске */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Запускаем анимацию покачивания */
    animation: cameraSway 6s ease-in-out infinite;
}

/* --- 4. РЕКЛАМНЫЙ БЛОК (ПРИЛИПШИЙ) --- */
.ad-footer {
    width: 100%;
    height: 90px; /* Фиксированная высота рекламы */
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #333;
}

.ad-placeholder {
    color: #444;
    font-size: 12px;
}

/* Кнопка на первом экране */
.content {
    display: flex;
    flex-direction: column; /* Складываем элементы в столбик */
    align-items: center;    /* Центрируем по горизонтали */
    justify-content: center; /* Центрируем по вертикали внутри контента */
    
    text-align: center;
    height: 100%;
    width: 100%; /* Увеличим до 100%, чтобы центровка была точной */
    z-index: 10;
}

.content1{
    display: flex;
    flex-direction: column; /* Складываем элементы в столбик */
    align-items: center;    /* Центрируем по горизонтали */
    justify-content: center; /* Центрируем по вертикали внутри контента */
    
    text-align: center;
    height: 100%;
    width: 100%; /* Увеличим до 100%, чтобы центровка была точной */
    z-index: 10;
    animation: fadeInDisclaimer 1.5s ease-in-out;
}


.window-light {
    position: absolute;
    /* Твои текущие координаты луча */
    width: 50%;
    height: 100%;
    left: 28%;
    /* z-index: 9; */
    
    pointer-events: none; /* Чтобы луч не мешал кликам */
    mix-blend-mode: add; /* Опционально: для более мягкого свечения */
    
    /* Запуск анимации: название, длительность, бесконечность, мягкий переход */
    animation: moonClouds 4s ease-in-out infinite;
}

@keyframes moonClouds {
    0%, 100% {
        opacity: 0.9;
        transform: scaleX(1);
    }
    30% {
        opacity: 0.8; /* Луна зашла за облако */
        transform: scaleX(0.98); /* Свет чуть "сужается" */
    }
    50% {
        opacity: 0.5; /* Частичный просвет */
    }
    70% {
        opacity: 0.9; /* Более густое облако */
        transform: scaleX(1.02);
    }
    85% {
        opacity: 0.7; /* Почти чистый свет */
    }
}

.welcome-image {
    width: 50%;
    padding-top: 1%;
    /* flex-shrink: 0; */
   
    
    height: auto;
    margin-bottom: 2%;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
    animation: glitch-flicker 4s linear infinite;
    will-change: opacity, transform, filter;
}

@keyframes glitch-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 61%, 100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)) brightness(1);
    }
    19%, 54%, 58% {
        opacity: 0.1;
        transform: translate(-4px, 2px) skewX(10deg);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) blur(2px);
    }
    20%, 55%, 59% {
        opacity: 0.4;
        transform: translate(4px, -2px) scaleY(1.1);
        filter: drop-shadow(-5px 0 red) drop-shadow(5px 0 blue) brightness(1.5);
    }
    21%, 56%, 60% {
        opacity: 0.2;
        transform: translate(0, 0) scaleX(1.2);
        filter: brightness(0.5) blur(1px);
    }
}

#nextBtn {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    width: 12vw;
    cursor: pointer;    
    /* outline: none; */
    transition: transform 0.2s ease, filter 0.3s ease;
    z-index: 25;
}

#nextBtn img {
    /* max-width: 200px; */
    
    width: 100%;    
    height: auto;
    display: block;
}


.btn:hover {
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

.btn:active {
    transform: scale(0.95);
    filter: brightness(0.8);
}


/* --- 5. ВНУТРЕННИЕ ОБЪЕКТЫ (СПРАЙТЫ) --- */
/* Теперь все позиционируем в % от КРАЕВ ФОНА */
.layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
}


/* Контейнер-холст на весь экран */
.cells-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none; /* Чтобы слой не мешал кликам по кнопкам под ним */
}

/* Базовая настройка ячейки */
.cell {

    position: absolute;
    width: 2%; 
    aspect-ratio: 1 / 1;
    /* Убираем визуальный шум, оставляем только для отладки (можно сделать opacity: 0) */
    background: rgba(184, 7, 7, 0.0); 
    border: 1px solid rgba(247, 247, 247, 0.0);

    transform-origin: 50%, 50%;
    transform: translate(-50%, 0%);
    
    /* КРИТИЧНО: Ячейки больше не реагируют на мышь */
    pointer-events: none; 
    cursor: default;
    transition: none; /* Убираем анимации, они тут не нужны */
    
}


/* УКАЗАТЕЛЬ (POINTER) */
.pointer {
    position: absolute;
    width: 18%;

    /* Начальная позиция */
    top: 57%;
    left: 50%;

    transform: translate(-50%, -50%);
    
    z-index: 100;

    /* Поинтер должен ловить события начала захвата (pointerdown), 
       но после этого мы обычно следим за окном (window) */
    pointer-events: auto;
    user-select: none;          /* Запрещает выделение */
    -webkit-user-drag: none;    /* Запрещает перетаскивание (Chrome/Safari) */
    touch-action: none;         /* Отключает системные жесты прокрутки на мобилках */       
    
    -webkit-user-select: none;
    
    /* Отключает синюю подсветку при тапе */
    -webkit-tap-highlight-color: transparent;

    /* Отключает системное меню (копировать/сохранить) */
    -webkit-touch-callout: none;    

    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Класс плавного возврата поинтера на базу */
.pointer-returning {
    transition: left 1.0s ease-in-out, top 1.0s ease-in-out !important;
}

/* НИЖНЯЯ ЧАСТЬ УКАЗАТЕЛЯ (ЭФФЕКТ ТОЛЩИНЫ) */
.pointer_b {
    position: absolute;
    width: 21%; /* Тот же размер, что и у основного */
    
    /* Начальная позиция */
    top: 50%;
    left: 50%;
    
    /* Сдвиг центрирования */
    transform: translate(-50%, -50%);
    
    /* Слой НИЖЕ основного указателя */
    z-index: 99; 
    
    /* Важно: нижняя часть не должна мешать кликам по верхней */
    pointer-events: none; 
    user-select: none;
    -webkit-user-drag: none;
}

.stul, .doska {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.stul {
    width: 80%; /* Скейтится вместе с фоном */
    height: 97%;
    top: 52%;
    left: 50%;
    z-index: 24;
    pointer-events: none;
}

.doska {
    width: 57%;
    top: 50%;
    left: 50%;
    z-index: 25;
    pointer-events: none;
}




/* 1. ОБЩИЕ ПРАВИЛА (Для всех анимированных объектов) */
.anim-object {
    position: absolute;

    background-size: contain;
    background-repeat: no-repeat;
    /* background-position: center; */
    will-change: transform, left, top, opacity;
    z-index: 20;

    pointer-events: none;
}

/* 2. ИНДИВИДУАЛЬНЫЕ НАСТРОЙКИ (Размеры и стартовые позиции) */
#monstrousLegR_01, 
#monstrousLegR_02 {
    width: 40%;
    opacity: 0;   
    transform-origin: 0% 50%;
}

#monstrousLegR_sh_01, 
#monstrousLegR_sh_02 {
    width: 22%;
    opacity: 0;
    transform-origin: 0% 50%;
}


#monstrousLegL_01, 
#monstrousLegL_02 {
    width: 40%;
    opacity: 0;    
    transform-origin: 100% 50%;
}

#monstrousLegL_sh_01, 
#monstrousLegL_sh_02 {
    width: 22%;
    opacity: 0;
    transform-origin: 100% 50%;
}

#strx_runningBody_01  {
    width: 20%;
    opacity: 0;
    transform-origin: 50% 50%;
}

#strah_hand_01  {
    width: 30%;
    opacity: 0;   
    transform-origin: 100% 50%;
    z-index: 24;
}
#strah_hand_04  {
    width: 30%;
    opacity: 0;   
    transform-origin: 0% 50%;
    z-index: 111;
}

#strah_hand_04_shadow  {
    width: 30%;
    opacity: 0;   
    transform-origin: 0% 50%;
    z-index: 110;
}

#visitor  {
    width: 18%;
    opacity: 0;   
    transform-origin: 50% 100%;
    mix-blend-mode: multiply;
    z-index: 200;
}


#longHand1,
#longHand4,
#longHand5,
#longHand7
  {
    width: 26%;
    opacity: 0;   
    transform-origin: 100% 50%;
    mix-blend-mode: multiply;
    z-index: 200;
}

#longHand2,
#longHand3,
#longHand6
  {
    width: 26%;
    opacity: 0;   
    transform-origin: 0% 50%;
    mix-blend-mode: multiply;
    z-index: 200;
}




/* Дополнительно для картинок внутри, чтобы они не искажались */
.anim-object img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* -----------------частицы Пыли----------------- */

#dustCanvas {
    position: fixed;
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Пыль нельзя "схватить" мышкой */
    z-index: 500; /* Выше фона, но ниже кнопок и поинтера */

    mix-blend-mode: overlay;
    /* mix-blend-mode: add; */
    /* mix-blend-mode: hard-light;  */
    

    filter: blur(1px);
}


/* -----------------туманный текст на второй старнице----------------- */

.mystic-reveal {
    position: absolute; 
    top: 5%;
    width: 90%;
    text-align: center;
    margin: 0;
    
    font-family: 'OuijaFont', serif !important;
    /* font-size: 4vh; */
    color: #d9dbcc;       /* Бледный, "лунный" цвет */
    letter-spacing: 0.2vw; /* Большой разброс букв добавляет пафоса */  
    

    margin-bottom: 50px; /* Отступ от кнопки */
    z-index: 150;
}


.mystic-reveal span {
    display: block;
    opacity: 0; /* Изначально невидимы */
    margin-bottom: 1%; 
    
    font-size: 2.5vmin !important;
    
    /* Добавим небольшое смещение вниз, чтобы текст "вплывал" */
    transform: translateY(2%);

    transition: transform 2s ease-out;
    filter: url(#distortFilter1);
}

/* Когда текст начинает проявляться, он плавно встает на место */
.mystic-reveal span[style*="opacity"] {
    transform: translateY(0);
}

.mystic-reveal span:nth-child(1) {
    filter: url(#distortFilter1);
}

.mystic-reveal span:nth-child(2) {
    filter: url(#distortFilter2);
}


/* -----------------игровая панель ботом----------------- */

.global-ui-layer {
    position: absolute;
    /* position: relative; */
    /* width: min(100vw, calc((100vh - 100px) * 1.777));  */
    width: min(calc(100vw - 160px), calc((100vh - 100px) * 1.777));
    aspect-ratio: 16 / 9;
    height: auto;
    top: 50%;
    /* left: 50%; */
    left: calc(50% + 80px);
    transform: translate(-50%, -50%);
    /* top: 0; */
    /* bottom: 0; */

    margin: auto;
    pointer-events: none;

    overflow: hidden;
    z-index: 10500;
}

/* .screen {
    position: relative;

    aspect-ratio: 16 / 9;


    width: min(calc(100vw - 160px), calc(100vh * 1.777));

    height: auto;


    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;

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

    flex-shrink: 0; 
} */


/* ----------------Контейнер для кнопок внизу-------------------- */
.bottom-panel
 {
    position: absolute;
    bottom: 3%; /* Отступ всей панели от нижнего края игры */
    left: 3%;
    right: 3%;  /* Отступ всей панели от правого края игры */
    
    display: flex;
    flex-direction: row; /* Кнопки в ряд */
    align-items: center;
    /* gap: 15px; */
    gap: 0.5vw;

    /* overflow: hidden; */
    overflow: visible;
    
    pointer-events: none; /* Разрешаем клики в области панели */
}

.bottom-panel .btn {
    pointer-events: auto; /* Возвращаем кликабельность кнопкам */
}

/* Стили кнопки */
#fScreenBtn,
#fScreenBtn2 {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;

    width: 2vw; 

    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#fScreenBtn img,
#fScreenBtn2 img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

#fScreenBtn2 {
    margin-left: auto !important; 
}

#muteBtn {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    opacity: 0.5;

    width: 2vw; 

    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#muteBtn img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

#aboutBtn {
    /* border: none; */
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;

    opacity: 0.5;
    
    /* Скейлинг: ширина кнопки будет составлять 5% от ширины игрового экрана */
    width: 8vw; 
    /* min-width: 20px; */
    /* max-width: 30px; */
    
    /* transition: transform 0.2s ease, opacity 0.2s; */
    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#aboutBtn img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}



#historyBtn {
    /* border: none; */
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;

    opacity: 0.5;
    
    /* Скейлинг: ширина кнопки будет составлять 5% от ширины игрового экрана */
    width: 8vw; 
    /* min-width: 20px; */
    /* max-width: 30px; */
    
    /* transition: transform 0.2s ease, opacity 0.2s; */
    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#historyBtn img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

#homeBtn {
    /* margin-left: auto !important; */
    /* border: none; */
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;

    opacity: 0.5;
    
    /* Скейлинг: ширина кнопки будет составлять 5% от ширины игрового экрана */
    width: 8vw; 
    /* min-width: 20px; */
    /* max-width: 30px; */
    
    /* transition: transform 0.2s ease, opacity 0.2s; */
    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#homeBtn img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

#homeBtn {
    margin-left: auto !important; 
}

/* 2. Когда кнопка Home скрыта (.hidden), её сосед ФУЛСКРИН перехватывает 
      управление и сам прижимается к правому краю */
#homeBtn.hidden + #fScreenBtn {    
    margin-left: auto !important;
}

/* Простой и надежный класс скрытия */
.hidden {
    display: none !important;
}






/* -----------------футер прайваси полиси----------------- */
.site-footer {
    position: fixed; /* Прижимаем к экрану */
    bottom: 10px;    /* Отступ от самого низа */
    /* left: 0; */
    left: 80px;
    width: 100%;     /* Растягиваем по ширине */
    text-align: center;
    z-index: 10200;    /* Выше всех слоев, чтобы был виден */
    pointer-events: none; /* Чтобы нельзя было случайно кликнуть вместо игры */
}

.site-footer p {
    /* font-family: 'serif'; */
    font-family: 'OuijaFont', sans-serif;
    /* font-size: 12px; */
    /* font-size: 1.8vmin !important; */
    font-size: 0.8vmax !important;
    color: rgba(224, 224, 224, 0.4); /* Очень бледный серый цвет */
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase; /* Делаем капсом для солидности */
}

/* -----------------переверни экран в лендскейп----------------- */

@media screen and (orientation: portrait) {
    .rotate-warning {
        display: flex; /* Показываем плашку */
    }
}

.rotate-warning {
    display: none; /* По умолчанию скрыто */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Темный фон с прозрачностью */
    z-index: 100000; /* Самый высокий слой поверх всего */
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: 'Cinzel', serif; /* Твой мистический шрифт */
}

/* Срабатывает только когда телефон держат ВЕРТИКАЛЬНО */
@media screen and (orientation: portrait) {
    .rotate-warning {
        display: flex;
    }
}

.warning-content {
    padding: 20px;
}

.phone-icon {
    width: 40px;
    height: 70px;
    border: 3px solid #fff;
    border-radius: 6px;
    margin: 0 auto 25px;
    position: relative;
    animation: rotate-device 2.5s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.phone-screen {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
}

@keyframes rotate-device {
    0% { transform: rotate(0deg); }
    40%, 60% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

.warning-content p {
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-family: 'OuijaFont', sans-serif;
    text-transform: uppercase;
}


/* ----------------- ШАРЕ ПНЕЛ ----------------- */
.share-panel {
    display: none;

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% - 15%)); /* Торчит только шапка */
    width: 40%;
    height: 86%;
    background: url('res/panel_share.png') no-repeat center;
    background-size: 100% 100%;
    transition: transform 0.5s cubic-bezier(0.175, 0.700, 0.32, 1.275);

    z-index: 10000;
    pointer-events: auto;
    padding-bottom: 20px;
  
    align-items: center;
}
#sharePanel.visible-on-page {
    display: block; /* Или block, flex в зависимости от твоей верстки */
}

.share-panel.active {
    transform: translateX(-50%) translateY(6%); /* Полностью выехала */
}

/* Шапка-триггер */
.share-header {
    height: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #77766a;
    font-family: 'OuijaFont', sans-serif;
    /* font-size: 1rem; */
    font-size: 1.8vmin !important;
    text-shadow: 0 0 2px #000;
}

.share-instruction {
    font-family: 'OuijaFont', sans-serif;
    font-size: 2vmin !important;
    color: #77766a;

    position: absolute;
    top: 53%; /* Регулируй этот параметр, чтобы поднять/опустить */
    left: 50%;
    transform: translateX(-50%);

    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80%;
    
    /* margin: 15px auto; */
    
    line-height: 2.2vmin !important;
    text-shadow: 1px 1px 2px #000;
    
    text-transform: none;
    pointer-events: none;
}

/* Стилизация ввода */
#MSG_text {
    font-family: 'OuijaFont', sans-serif !important;
    /* font-size: 4rem !important; */

    width: 60%;
    /* Высота теперь будет зависеть от межстрочного интервала */
    height: auto; 
    min-height: calc(1.2rem * 3 + 20px); /* 1.2rem (высота строки) * 3 строки + padding */
    
    line-height: 2.2vmin !important; /* Устанавливаем четкую высоту строки */
    resize: none;        /* Запрещаем игроку растягивать поле вручную */
    overflow-y: auto;    /* Добавляем прокрутку, если текст все же не влезет */
    
    background: none;
    border: none;
    /* background: rgba(0, 0, 0, 0.6); */
    /* border: 1px solid #555; */
    color: #fff;
    
    padding: 2%;
    margin: 4% auto;
    display: block;
    text-align: center;
    font-size: 2.2vmin !important;
    outline: none;
    font-family: inherit; /* Чтобы шрифт был как в игре */
}

#MSG_text::placeholder {
    color: #77766a;
    font-family: 'OuijaFont', sans-serif;
}

/* Кнопка Share */
#btnShare {
    position: absolute;
    display: block;
    background: transparent;
    border: none;
    width: 50%;
    top: 73%;
    left: 50%;
    transform: translateX(-50%);
    /* padding: 0; */
    flex-shrink: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, filter 0.3s ease;
    z-index: 10001;
}

#btnShare img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#btnShare:disabled {
    filter: grayscale(1) opacity(0.5);
    cursor: not-allowed;
}

#closeShareBtn {
    position: absolute;
    top: 7%;
    right: -10%;
    width: 8%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Плавное появление */
}
#closeShareBtn img {
    width: 100%;
    height: 100%;
    /* opacity: 0; */
    object-fit: contain;
    display: block;
}
/* Когда панель открыта (есть класс .active), показываем кнопку */
.share-panel.active #closeShareBtn {
    opacity: 1;
    pointer-events: auto;
}

/* -----------------тул тип----------------- */
/* Базовый селектор для любого элемента с подсказкой */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Общий стиль самого тултипа */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    
    transform: translateX(-50%) scale(1);    
    background: rgba(15, 15, 15, 0.95);
    color: #b5a482;    
   
    padding: 1.2rem 1.4rem; 
    border: 0.1rem solid #444;
    border-radius: 0.3rem;
    
    font-family: 'OuijaFont', sans-serif;    
   
    font-size: 2.1vmin !important; 
    
    width: max-content;
    /* max-width: 60vw;  */
    min-width: 60vh;

    line-height: 1.2;
    text-align: center;
    white-space: normal;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}


/* Треугольничек (стрелочка) */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(15, 15, 15, 0.95);
    z-index: 9999;

    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Состояние при наведении */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    /* Легкий эффект "всплытия" */
    transform: translateX(-50%) translateY(-5px);
}

/* -----------------доп страници----------------- */
/* Общий контейнер для текста на страницах */
.content-overlay {
    background: rgba(0, 0, 0, 0.85);
    width: 80%;
    height: 80%;
    padding: 4%;
    border: 1px solid #aaa998;
    box-shadow: 0 0 30px rgba(0,0,0,1);
    color: #aaa998;
    font-family: 'OuijaFont', serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-overlay h2 {
    font-family: 'OuijaFont', serif; /* Твой основной шрифт */
    color: #b5a482;                 /* Золотисто-бежевый */
    font-size: 2.4vmin !important;              /* Размер */
    text-transform: uppercase;      /* Все заглавные */
    letter-spacing: 3px;            /* Расстояние между буквами */
    text-align: center;
    margin-bottom: 1%;
    
    /* Тень, чтобы текст "отрывался" от фона */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(181, 164, 130, 0.3);
}

.scroll-text {    
    overflow-y: auto;   
    margin-top: 2%;
    text-align: center;
    line-height: 1.6;    
    font-size: 2.4vmin !important;
    gap: 10%;
}

.scroll-text p {
    margin-bottom: 2%;
}

/* Стилизация скроллбара под золото */
.scroll-text::-webkit-scrollbar { width: 5px; }
.scroll-text::-webkit-scrollbar-thumb { background: #b5a482; }

.social-links {    
    /* overflow-y: auto; */
    margin-top: 2%;
    padding-top: 1%;
    border-top: 1px solid #b5a482; /* Тонкая линия-разделитель */
    margin-bottom: 4%;
}

.social-links p {
    /* font-size: 0.9rem; */
    font-family: 'OuijaFont', serif;
    font-size: 2.4vmin !important;
    color: #b5a482;
    margin-bottom: 2%;
}

.links-grid {    
    justify-content: center;
    gap: 2%;
    /* margin-bottom: 4%; */
}

#buyCoffeeText {
    font-family: 'OuijaFont', serif;
    font-size: 2.4vmin !important;
    color: #b5a482;
    margin-bottom: 2%;
}

.thirdparty-links {
    margin-top: 2%;
    padding-top: 1%;
    border-top: 1px solid #b5a482; /* Тонкая линия-разделитель */
    /* font-size: 0.9rem; */
    font-family: 'OuijaFont', serif;
    font-size: 2.0vmin !important;
    color: #b5a482;
    margin-bottom: 2%;
}

.thirdparty-links text {
    color: #aaa998;
    text-decoration: none;
}

.thirdparty-links a {
    color: #aaa998;
    text-decoration: none;
    transition: color 0.3s ease;
}

.thirdparty-links a:hover {
    color: #aaa998; /* Цвет при наведении (например, белый) */
    text-decoration: underline; /* Возвращаем подчеркивание только при наведении */
}

.RRLogiс-link {
    font-size: 3.8vmin !important;
    padding-top: 1%;
    color: #aaa998;
    text-decoration: none;
}

.RRLogiс-link:hover {
    
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}

.Teepublic-link {
    font-size: 3.2vmin !important;
    padding-top: 1%;
    color: #aaa998;
    text-decoration: none;
}

.Teepublic-link:hover {    
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}

.social-btn {    
    width: 6vw;
    color: #aaa998;
    text-decoration: none;
    font-family: 'OuijaFont', serif;
    font-size: 2.4vmin !important;
    padding: 0.5% 0.5%;
    border: 1px solid #b5a482;
    transition: all 0.3s ease;
}

.social-btn:hover {
    /* background-color: #990000;
    border-color: #990000; */
        background-color: #b5a482;
    border-color: #b5a482;
    color: #fff;
    cursor: pointer;
}

/* Родителю задаем относительное позиционирование, чтобы табы выравнивались по нему */
/* #pageHistory {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 20px;
} */

#archive-title {
    font-size: 2.2vmin !important; /* Чуть уменьшили базовый размер, чтобы длинные протоколы красиво влезали в одну строку */
    white-space: normal;           /* Если экран совсем узкий, заголовок аккуратно перенесется на две строки, не ломая верстку */
    width: 100%;
    text-align: center;
}

/* Вертикальный контейнер для вкладок справа от .content-overlay */
.archive-tabs-vertical {
    display: flex;
    flex-direction: column;    /* Кнопки идут сверху вниз */
    gap: 12px;
    z-index: 10;
    margin-left: -1px;         /* Закрываем левую границу кнопок рамкой, стыкуя их вплотную */
}

/* Стили кнопок-закладок */
.archive-tabs-vertical .tab-btn {
    background: rgba(15, 15, 15, 0.95); /* Делаем фон чуть плотнее */
    border: 1px solid #aaa998;
    border-left: none;         /* Убираем левую границу для идеального стыка */
    color: #aaa998;
    font-family: 'OuijaFont', serif;
    font-size: 1.6vmin;        /* Немного уменьшили, чтобы длинные имена точно влезали */
    padding: 10px 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    
    border-radius: 0 6px 6px 0; /* Красивое скругление справа */
    transition: all 0.2s ease;
}

/* Эффект наведения и активная вкладка */
.archive-tabs-vertical .tab-btn:hover, 
.archive-tabs-vertical .tab-btn.active {
    background: #b5a482;
    color: #000;
    box-shadow: 4px 0 15px rgba(181, 164, 130, 0.4);
    border-color: #b5a482;
    /* Небольшое смещение вправо при активации для интерактивности */
     
}

.archive-tabs-vertical .tab-btn:hover {
    transform: translateX(4px);
}
.archive-tabs-vertical .tab-btn.active {
    transform: translateX(-4px);
}


/* Логика контента */
.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
    animation: fadeInArchive 0.4s ease forwards;
}

.tab-content h3 {
    color: #b5a482;
    font-size: 2.5vmin;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(181, 164, 130, 0.2);
    padding-bottom: 10px;
}

@keyframes fadeInArchive {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.archive-separator {
    border: 0; border-top: 1px dashed rgba(181, 164, 130, 0.2); margin: 20px 0;
}

.audio-ambience {
    color: #5e5543;
}




/* Убедимся, что кнопка назад не имеет отступа влево */
#backPanel, #backBtn  {
    margin-left: 0;

}

#backBtn {
    /* border: none; */
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    
    /* Скейлинг: ширина кнопки будет составлять 5% от ширины игрового экрана */
    width: 8vw; 
    /* min-width: 20px; */
    /* max-width: 30px; */
    
    /* transition: transform 0.2s ease, opacity 0.2s; */
    z-index: 80;

    transition: transform 0.2s ease, filter 0.3s ease;    
}
#backBtn img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

/* ----------------- СТРАНИЦА 3 ----------------- */
#page3 {
    /* Наследуем идеальные пропорции и ширину, которые мы прописали для всех .screen */
    background: radial-gradient(circle, #1a0000 0%, #000 80%);
    
    /* display: none по умолчанию, пока нет класса .active */
    display: none; 
    
    z-index: 100;
    
    /* Если в cameraSway используется transform, убедись, что анимация не смещает элемент слишком сильно вправо */
    animation: cameraSway 5s ease-in-out infinite;
}

#page3.active {
    /* Включаем флекс только при активации */
    display: flex !important; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    opacity: 1;
    pointer-events: auto;
}

.mystic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 600px;
}

/* Эффект помех для заголовка */
.horror-title {
    font-family: 'OuijaFont', serif;
    /* font-size: 4rem; */
    font-size: 6.4vmin !important;
    text-align: center;
    color: #ff0000;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    margin: 0 0 40px 0;
    margin-bottom: 30px;
    position: relative;
    opacity: 0;
    transform: scale(1.2);    
}

/* Класс для запуска анимации проявления */
#page3.active .horror-title {
    animation: horrorManifest 1.5s forwards;
    /* animation: glitch-flicker 4s linear infinite;
    will-change: opacity, transform, filter; */
}

@keyframes horrorManifest {
    0% { opacity: 0; transform: scale(1.5); filter: blur(10px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Текст сообщения */
.horror-message p {
    color: #70372f;
    /* font-style: italic; */
    opacity: 0;
    margin: 15px 0;
    transition: opacity 2s ease;

    text-align: center;
    font-size: 2.8vmin !important;
    font-family: 'OuijaFont', sans-serif;
}

#page3.active .fade-in-text:nth-child(1) { transition-delay: 2s; opacity: 1; }
#page3.active .fade-in-text:nth-child(2) { transition-delay: 4s; opacity: 1; }
#page3.active .fade-in-text:nth-child(3) { transition-delay: 6s; opacity: 1; }

/* Особая кнопка возврата */
#resetRitualBtn {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    width: 12vw;
    margin-top: 4%;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, filter 0.3s ease;
    z-index: 25;
}

#resetRitualBtn img {
    width: 100%;
    height: auto;
    display: block;
}



#page3.active .ritual-btn {
    transition-delay: 8s;
    /* opacity: 1; */
}

.spooky-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none; /* Чтобы слой не блокировал клики и тачи */
    z-index: 200; /* Выше фоновых слоев, но ниже поинтера */
    transform: scale(1);
}

/* Этот класс мы будем включать из JS */
.spooky-layer.active {
    filter: url(#turing-distortion);
    animation: ghostFadeScale 5s ease-in-out forwards;
}

@keyframes ghostFadeScale {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 0.3; /* Плавно проявился */
    }
    50% {
        opacity: 0.85; /* Держится в пике */
    }
    80% {
        opacity: 0.3; /* Начинает исчезать */
    }
    100% {
        opacity: 0;
        transform: scale(1.1); /* Увеличился строго на 10% */
    }
}


/* ------------------- Disclaimer --------------------- */
/* Стили для экрана дисклеймера */
#page0 {
    background-color: #0a0a0a; /* Глубокий темный цвет */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e0e0e0;
    font-family: 'Courier New', Courier, monospace; /* Атмосферный моноширинный шрифт */
    padding: 20px;
    box-sizing: border-box;
}

#page0 .disclaimer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    text-align: center;
    height: 100%;
    width: 80%;
    z-index: 10;
    animation: fadeInDisclaimer 1.5s ease-in-out;
}

#page0 .disclaimer-title {
    font-family: 'OuijaFont', serif;    

    color: #990000; /* Кроваво-красный акцент для заголовка */

    /* font-size: 2rem; */
    font-size: 6.4vmin !important;

    letter-spacing: 4px;
    margin-bottom: 3%;
    font-weight: bold;
}

#page0 .disclaimer-text p {    
    font-family: 'OuijaFont', sans-serif;
    

    /* font-size: 1.1rem; */
    font-size: 2.8vmin !important;

    line-height: 1.4;
    margin-bottom: 4%;
    color: #b0b0b0;
}

#p0Btn {
    display: block;
   
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 1%;

    width: 12vw;
    cursor: pointer;    

    transition: transform 0.2s ease, filter 0.3s ease;
    z-index: 25;
}

#p0Btn img {    
    width: 100%;

    height: auto;
    display: block;
}



@keyframes fadeInDisclaimer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}