/* ============================================
   HILO - Игра "Больше-Меньше"
   ============================================ */

/* ========== ПЛАТФОРМО-ЗАВИСИМЫЕ ПОЗИЦИИ ========== */

/* По умолчанию */
#hilo-screen {
    padding-top: calc(1rem + 25px) !important;
    min-height: 100vh;
    /* Фолбэк */
    background-image: url('../content/stol hight-low.png');
    /* Современные форматы */
    background-image: image-set(
        url('../content/stol hight-low.avif') type('image/avif'),
        url('../content/stol hight-low.webp') type('image/webp'),
        url('../content/stol hight-low.png') type('image/png')
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

#hilo-screen header {
    top: 50px !important;
}

/* iOS: настройка позиций для хило */
html[data-platform="ios"] #hilo-screen {
    padding-top: calc(1rem + 70px) !important;
}

html[data-platform="ios"] #hilo-screen header {
    top: 90px !important;
}

/* Android: настройка позиций для хило */
html[data-platform="android"] #hilo-screen {
    padding-top: calc(1rem + 80px) !important;
}

html[data-platform="android"] #hilo-screen header {
    top: 70px !important;
}

/* ========== ИГРОВАЯ ОБЛАСТЬ ========== */

.hilo-game-area {
    background: rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
}

/* Вытягиваем полупрозрачный фон области Hilo вверх */
.hilo-game-area::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    height: 60px;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
}

/* ========== КАРТЫ ========== */

.hilo-card {
    width: 100px;
    height: 140px;
    background-color: #fff;
    border: 3px solid #ffd700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
}

.hilo-card.card-back {
    background-image: url('../content/fake card.png');
    background-color: #ccc;
}