/* ============================================
   ОБЩИЕ СТИЛИ - PlayInverse
   ============================================ */

/* Шрифт */
@font-face {
    font-family: 'Kaph';
    src: url('../ofont.ru_Kaph.ttf');
}

/* CSS переменные для адаптивных единиц */
:root {
    /* Host Unit (1% of 16:9 container width) */
    /* Width is limited by either 100vw OR 100vh * 16/9 */
    --hw: min(1vw, 1.7778vh);

    /* Client Unit (1% of 9:16 container height) */
    /* Height is limited by either 100vh OR 100vw * 16/9 */
    /* Используем фиксированную высоту viewport для предотвращения изменения при открытии клавиатуры */
    --ch: min(1vh, 1.7778vw);
    --fixed-vh: 100vh;
    --fixed-vw: 100vw;
}

/* Общие настройки body */
body {
    margin: 0;
    background-color: #000;
    font-family: 'Kaph', sans-serif;
    color: white;
    overflow: hidden;
}

/* ============================================
   ХОСТ - Соотношение сторон 16:9
   ============================================ */
.host-screen-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.host-screen-content {
    position: relative;
    width: 100vw;
    height: calc(100vw * 9 / 16);
    max-height: 100vh;
    max-width: calc(100vh * 16 / 9);
    overflow: hidden;
}

/* ============================================
   КЛИЕНТ - Соотношение сторон 9:16
   ============================================ */
.mobile-screen-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--fixed-vw, 100vw) !important;
    height: var(--fixed-vh, 100vh) !important;
    overflow: hidden;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-screen-content {
    position: relative;
    width: var(--fixed-vw, 100vw);
    height: calc(var(--fixed-vw, 100vw) * 16 / 9);
    max-height: var(--fixed-vh, 100vh);
    max-width: calc(var(--fixed-vh, 100vh) * 9 / 16);
    overflow: hidden;
    flex-shrink: 0;
}

/* ============================================
   ОБВОДКА ДЛЯ БЕЛОГО ТЕКСТА
   ============================================ */
/* Стандартная толстая черная обводка для белого текста */
/* Используем -webkit-text-stroke для эффективной обводки */
.text-stroke-white {
    -webkit-text-stroke: 3px #000;
    text-stroke: 3px #000;
    /* Добавляем небольшую тень для лучшей видимости на сложных фонах */
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

/* ============================================
   УТИЛИТЫ
   ============================================ */
.hidden {
    display: none;
}

.settings-hidden {
    display: none;
}