/* ============================================
   АДАПТИВНІ СТИЛІ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ
   ============================================ */

/* Портретна орієнтація на мобільних */
@media (max-width: 768px) and (orientation: portrait) {
    html, body {
        height: 100dvh;
        width: 100vw;
    }

    /* Кнопка ← Меню (game-back-btn) фіксована top:10 left:10 і перекриває
       заголовок меню платформера. Зсуваємо верхні екрани вниз. */
    #menu-screen,
    #level-select-screen,
    #skin-select-screen,
    #controls-screen,
    #settings-screen,
    #leaderboard-screen {
        padding-top: max(60px, calc(env(safe-area-inset-top) + 56px)) !important;
    }
    
    #game-canvas {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh;
    }
    
    #ui-overlay {
        width: 100vw;
        height: 100dvh;
    }
    
    .screen h1 {
        font-size: clamp(24px, 7vw, 40px);
    }
    
    .screen h2 {
        font-size: clamp(18px, 5vw, 28px);
    }
    
    .subtitle {
        font-size: clamp(14px, 4vw, 20px);
    }
    
    .game-button {
        padding: clamp(10px, 2vw, 15px) clamp(24px, 4vw, 40px);
        font-size: clamp(14px, 3vw, 18px);
    }
    
    #splash-start-btn {
        padding: clamp(12px, 2.5vw, 18px) clamp(40px, 8vw, 60px);
    }
}

/* Level map uses its own wide composition. Keep mobile overrides from squeezing it. */
@media (max-width: 768px) and (orientation: portrait) {
    #level-select-screen {
        padding: clamp(8px, 1.4vh, 16px) 46px clamp(18px, 2vh, 26px) !important;
        overflow-x: auto !important;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    #level-select-screen {
        justify-content: flex-start;
        padding: clamp(6px, 1.2vh, 12px) clamp(46px, 5vw, 70px) clamp(10px, 1.6vh, 18px) !important;
        overflow: hidden;
    }
}

/* Image-based level map must stay edge-to-edge on Android. */
@media (max-width: 1024px) {
    #level-select-screen {
        padding: 0 !important;
        overflow: hidden !important;
    }

    #level-select-screen .worlds-grid {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
    }
}

/* Альбомна орієнтація на мобільних */
@media (max-width: 1024px) and (orientation: landscape) {
    html, body {
        height: 100vh;
        width: 100vw;
    }
    
    #game-canvas {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh;
    }
    
    #touch-controls {
        bottom: max(clamp(6px, 1.5vh, 10px), env(safe-area-inset-bottom));
        left: max(clamp(6px, 1.5vw, 10px), env(safe-area-inset-left));
        right: max(clamp(6px, 1.5vw, 10px), env(safe-area-inset-right));
    }
    
    .touch-btn {
        width: clamp(48px, 10vh, 66px);
        height: clamp(48px, 10vh, 66px);
        font-size: clamp(18px, 2.5vh, 26px);
    }
    
    .touch-btn.jump {
        width: clamp(52px, 11vh, 80px);
        height: clamp(52px, 11vh, 80px);
        font-size: clamp(22px, 3vh, 34px);
    }
    
    #hud {
        gap: clamp(2px, 1vw, 8px);
        padding: clamp(3px, 0.8vh, 8px) clamp(4px, 1vw, 10px);
        max-width: 100%;
        font-size: clamp(9px, 1.5vh, 13px);
    }
    
    .hud-item {
        font-size: clamp(9px, 1.5vh, 12px);
        padding: clamp(2px, 0.5vh, 6px) clamp(4px, 0.8vw, 10px);
    }

    .level-item-chip {
        min-width: clamp(46px, 8vw, 62px) !important;
        padding-inline: clamp(4px, 0.8vw, 7px) !important;
    }
    
    #level-info {
        font-size: clamp(9px, 1.5vh, 12px);
        padding: clamp(3px, 0.6vh, 6px) clamp(6px, 1vw, 10px);
        top: clamp(4px, 1vh, 8px);
        right: clamp(4px, 1vw, 8px);
    }

    .health-hearts {
        gap: 2px;
        min-width: 82px;
        min-height: 24px;
        padding: 2px 5px;
    }

    .health-heart {
        width: clamp(13px, 3vh, 18px);
        height: clamp(13px, 3vh, 18px);
        font-size: clamp(12px, 2.8vh, 17px);
    }
    
    .screen {
        justify-content: center;
        align-items: center;
        max-height: 100vh;
        overflow-y: auto;
        padding: max(clamp(4px, 1vh, 8px), env(safe-area-inset-top)) 
                 max(clamp(4px, 1vw, 8px), env(safe-area-inset-right)) 
                 max(clamp(4px, 1vh, 8px), env(safe-area-inset-bottom)) 
                 max(clamp(4px, 1vw, 8px), env(safe-area-inset-left));
    }
    
    .screen h1 {
        font-size: clamp(20px, 4vh, 32px);
    }
    
    .screen h2 {
        font-size: clamp(16px, 3vh, 24px);
    }
}

/* Малі екрани до 480px */
@media (max-width: 480px) {
    #hud {
        gap: 2px;
        padding: 3px 4px;
    }
    
    .hud-item {
        min-width: unset;
        padding: 2px 4px;
        font-size: 10px;
    }

    .level-item-chip {
        min-width: 44px !important;
        padding-inline: 4px !important;
    }
    
    .icon {
        font-size: 12px;
    }
    
.touch-btn {
        width: clamp(48px, 11vw, 60px);
        height: clamp(48px, 11vw, 60px);
        font-size: clamp(18px, 3vw, 24px);
        border: 1px solid rgba(255, 255, 255, 0.85);
    }
    
    .touch-btn.jump {
        width: clamp(52px, 12vw, 70px);
        height: clamp(52px, 12vw, 70px);
        font-size: clamp(20px, 3.5vw, 28px);
    }
    
    .game-button {
        padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
        font-size: clamp(12px, 2.5vw, 14px);
        margin: clamp(4px, 1vw, 8px);
    }
    
    .controls-info {
        padding: clamp(8px, 1.5vw, 12px) clamp(8px, 1.5vw, 12px);
        margin-top: clamp(12px, 2vh, 16px);
    }
    
    .controls-info p {
        font-size: clamp(12px, 2vw, 14px);
    }
    
    .control-chip {
        padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
        font-size: clamp(11px, 1.8vw, 13px);
        gap: clamp(3px, 0.5vw, 5px);
    }
    
    .menu-title-pig {
        width: clamp(32px, 8vw, 40px);
        height: clamp(32px, 8vw, 40px);
    }
}

/* Середні екрани 481px - 768px */
@media (min-width: 481px) and (max-width: 768px) {
    #touch-controls {
        bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .touch-btn {
        width: clamp(60px, 13vw, 72px);
        height: clamp(60px, 13vw, 72px);
        font-size: clamp(24px, 3.5vw, 30px);
    }
    
    .touch-btn.jump {
        width: clamp(70px, 15vw, 80px);
        height: clamp(70px, 15vw, 80px);
        font-size: clamp(28px, 4vw, 34px);
    }
    
    #hud {
        gap: clamp(6px, 1.5vw, 12px);
        padding: clamp(6px, 1.2vh, 10px) clamp(8px, 1.5vw, 14px);
    }
    
    .hud-item {
        font-size: clamp(12px, 2vw, 14px);
        padding: clamp(4px, 0.8vh, 7px) clamp(8px, 1.2vw, 12px);
    }
}

/* Великі экрани (планшети, ПК) */
@media (min-width: 769px) {
    #hud {
        max-width: 90%;
    }
}

/* Ховаємо touch-кнопки лише на справжніх десктопах
   (мишка + hover), а не на телефонах в landscape що мають width > 768px */
@media (hover: hover) and (pointer: fine) {
    #touch-controls {
        display: none !important;
    }
    .touch-btn {
        display: none !important;
    }
}

/* Підтримка high DPI екранів */
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    #game-canvas {
        image-rendering: high-quality;
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   ПРОДУКТИВНІСТЬ: вимикаємо backdrop-filter на мобільних
   (головний кілер FPS на Android WebView)
   ============================================ */
@media (max-width: 768px) {
    .tile,
    .main-menu-tile,
    .game-launch-card,
    .modal,
    .modal-content,
    .pig-room-card,
    .pig-room-shell,
    .pig-room-chip,
    .info-screen-wrap,
    .ctrl-card,
    .controls-section,
    .ach-section,
    .menu-progress-wrap,
    .pig-profile-row,
    .daily-badge,
    .screen,
    .hud-item,
    #hud,
    #level-info,
    .game-button,
    .menu-corner-btn,
    .touch-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Зменшуємо складні фільтри */
    .menu-bg-decor,
    .menu-particles {
        display: none !important;
    }
}

/* Альбомна на телефонах: спрацьовує незалежно від ширини viewport
   (бо мобільний у landscape часто має ширину > 768/1024px) */
@media (orientation: landscape) and (max-height: 600px) {
    /* Зміщуємо HUD вправо, щоб кнопка "← Меню" його не перекривала */
    #ui-overlay {
        padding-left: clamp(78px, 14vw, 110px) !important;
        padding-right: clamp(78px, 14vw, 110px) !important;
    }

    #hud {
        font-size: clamp(8px, 1.4vh, 11px) !important;
        padding: clamp(2px, 0.5vh, 5px) clamp(4px, 0.8vw, 8px) !important;
        gap: clamp(2px, 0.5vw, 4px) !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }

    .hud-item {
        font-size: clamp(8px, 1.3vh, 11px) !important;
        padding: clamp(1px, 0.4vh, 4px) clamp(3px, 0.6vw, 7px) !important;
        min-width: unset !important;
        gap: 3px !important;
    }

    .icon {
        font-size: clamp(10px, 1.6vh, 13px) !important;
    }

    #level-info {
        font-size: clamp(9px, 1.4vh, 11px);
        padding: clamp(2px, 0.5vh, 4px) clamp(5px, 1vw, 9px);
    }

    /* Журі-прев'ю: компактне в альбомній */
    #run-progress {
        margin: clamp(2px, 0.6vh, 6px) auto 0 !important;
        width: min(720px, 90vw) !important;
    }

    .journey-preview {
        width: min(720px, 90vw) !important;
        gap: clamp(4px, 1vw, 8px) !important;
        margin: 0 auto clamp(2px, 0.6vh, 6px) !important;
    }

    .journey-label {
        font-size: clamp(8px, 1.4vh, 11px) !important;
        min-width: clamp(26px, 5vw, 40px) !important;
    }

    .journey-label.finish {
        min-width: clamp(34px, 6vw, 50px) !important;
    }

    .journey-track {
        height: clamp(28px, 9vh, 46px) !important;
    }

    .track-line {
        bottom: clamp(5px, 1.5vh, 9px) !important;
        height: clamp(4px, 1vh, 7px) !important;
    }

    .track-item {
        font-size: clamp(11px, 2.2vh, 15px) !important;
    }

    .track-item-image {
        width: clamp(12px, 2.5vh, 18px) !important;
        height: clamp(12px, 2.5vh, 18px) !important;
    }

    .track-item.lane-2 {
        top: clamp(10px, 3vh, 16px) !important;
    }

    .track-item.lane-3 {
        top: clamp(18px, 5vh, 27px) !important;
    }

    .runner-pig {
        width: clamp(16px, 4vh, 26px) !important;
        height: clamp(16px, 4vh, 26px) !important;
        bottom: clamp(5px, 1.5vh, 9px) !important;
    }

    .runner-flag {
        font-size: clamp(12px, 3vh, 20px) !important;
        bottom: clamp(5px, 1.5vh, 9px) !important;
    }

    #touch-controls {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .touch-btn {
        width: clamp(44px, 8vh, 52px);
        height: clamp(44px, 8vh, 52px);
        font-size: clamp(16px, 2vh, 20px);
        border: 1px solid rgba(255, 255, 255, 0.85);
    }

    .touch-btn.jump {
        width: clamp(48px, 9vh, 60px);
        height: clamp(48px, 9vh, 60px);
        font-size: clamp(18px, 2.5vh, 24px);
    }
}

/* Захист від дрібних текстів на дуже малих екранах */
@media (max-width: 360px) {
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 14px;
    }
}

/* Оптимізація для таблиць (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #hud {
        gap: clamp(8px, 1.5vw, 12px);
        padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.5vw, 16px);
        font-size: clamp(12px, 2vw, 15px);
    }
    
    .hud-item {
        min-width: clamp(60px, 11vw, 80px);
    }
    
    #touch-controls {
        display: flex;
    }
    
    .touch-btn {
        width: clamp(56px, 10vh, 68px);
        height: clamp(56px, 10vh, 68px);
        font-size: clamp(22px, 3vh, 28px);
    }
}

/* Запобігання горизонтальному скролу */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Оптимізація для gesture control */
@supports (touch-action: manipulation) {
    button, input, select, textarea, a {
        touch-action: manipulation;
    }
}

/* Fallback для браузерів без clamp */
@supports not (width: clamp(1px, 100%, 100px)) {
    .touch-btn {
        width: 66px;
        height: 66px;
        font-size: 28px;
    }
    
    .touch-btn.jump {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }
    
    #hud {
        gap: 16px;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .hud-item {
        font-size: 16px;
        padding: 9px 16px;
        min-width: 78px;
    }
}