/* ============================================
   СТИЛИ ГЛАВНОЙ СТРАНИЦЫ - PlayInverse
   ============================================ */

/* Универсальный контейнер для компьютера и телефона */
.index-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.index-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../img/mobile_bg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Заголовок */
.index-title-img {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    z-index: 10;
}

/* Контейнер меню */
.index-menu-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    z-index: 10;
}

/* Кнопки */
.index-btn {
    width: 100%;
    height: clamp(60px, 12vh, 100px);
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #000;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-family: 'Kaph', sans-serif;
    padding: 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.index-btn:hover {
    background: white;
    transform: translateY(calc(-0.2 * min(2vw, 3vh)));
    box-shadow: 0 calc(0.7 * min(2vw, 3vh)) calc(1.5 * min(2vw, 3vh)) rgba(0,0,0,0.4);
}

.index-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(0.3 * min(2vw, 3vh)) calc(0.6 * min(2vw, 3vh)) rgba(0,0,0,0.3);
}

.index-btn-create {
    background: linear-gradient(135deg, #e94560 0%, #c7364f 100%);
}

.index-btn-create:hover {
    background: linear-gradient(135deg, #f0556f 0%, #d8465f 100%);
}

.index-btn-join {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.index-btn-join:hover {
    background: linear-gradient(135deg, #5aa0f2 0%, #458acd 100%);
}

.index-btn-text {
    font-size: calc(clamp(60px, 12vh, 100px) * 0.28);
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 30px);
    text-align: center;
}

/* Сообщение об ошибке */
.index-error {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: #e94560;
    font-size: clamp(16px, 3vw, 32px);
    -webkit-text-stroke: 1.5px #000;
    text-stroke: 1.5px #000;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
    text-align: center;
    min-height: 30px;
    width: 80%;
    max-width: 500px;
    display: none;
    z-index: 10;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .index-title-img {
        top: 5%;
        width: 80%;
    }
    
    .index-menu-container {
        top: 45%;
        width: 85%;
        gap: 20px;
    }
    
    .index-btn {
        height: clamp(50px, 10vh, 80px);
        border-width: 2px;
        padding: 8px 12px;
    }
    
    .index-btn-text {
        font-size: calc(clamp(50px, 10vh, 80px) * 0.28);
        -webkit-text-stroke: 1.5px #000;
        text-stroke: 1.5px #000;
        max-width: calc(100% - 24px);
    }
    
    .index-error {
        bottom: 8%;
        font-size: clamp(14px, 2.5vw, 24px);
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
    }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
    .index-title-img {
        top: 3%;
        width: 85%;
    }
    
    .index-menu-container {
        top: 42%;
        width: 90%;
        gap: 15px;
    }
    
    .index-btn {
        height: clamp(45px, 9vh, 70px);
        border-width: 2px;
        padding: 6px 10px;
    }
    
    .index-btn-text {
        font-size: calc(clamp(45px, 9vh, 70px) * 0.28);
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
        max-width: calc(100% - 20px);
    }
    
    .index-error {
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
    }
}

/* Адаптивность для больших экранов (компьютеры) */
@media (min-width: 1024px) {
    .index-title-img {
        top: 10%;
        width: 50%;
        max-width: 700px;
    }
    
    .index-menu-container {
        top: 50%;
        width: 30%;
        max-width: 450px;
        gap: 30px;
    }
    
    .index-btn {
        height: clamp(80px, 10vh, 100px);
        border-width: 3px;
        padding: 12px 20px;
    }
    
    .index-btn-text {
        font-size: calc(clamp(80px, 10vh, 100px) * 0.28);
        -webkit-text-stroke: 2px #000;
        text-stroke: 2px #000;
        max-width: calc(100% - 40px);
    }
}