/* Toda la app en celular: alto visible, barras de pantalla completa y botones dentro de la pantalla. */

body.gi-fit-ui .settings-scale,
body.gi-fit-ui .settings-resolution {
    display: none;
}

body.gi-fit-ui {
    --gi-btn: clamp(40px, 11vmin, 64px);
    --gi-btn-lg: clamp(52px, 15vmin, 84px);
    --gi-stick: clamp(84px, 28vmin, 140px);
}

body.gi-fit-ui #splashScreen,
body.gi-fit-ui .splash-screen,
body.gi-fit-ui #homeScreen.active,
body.gi-fit-ui #gameScreen.active,
body.gi-fit-ui #mainContainer > .screen.active {
    min-height: 0 !important;
    height: var(--gi-view-h, 100svh) !important;
    max-height: var(--gi-view-h, 100svh) !important;
}

body.gi-use-device-chrome #splashScreen,
body.gi-use-device-chrome .splash-screen,
body.gi-use-device-chrome #homeScreen.active,
body.gi-use-device-chrome #gameScreen.active,
body.gi-use-device-chrome #kartGuardiansContainer,
body.gi-use-device-chrome #vsGuardiansContainer {
    top: var(--gi-chrome-top, 0px) !important;
    right: 0 !important;
    bottom: var(--gi-chrome-bottom, 0px) !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

body.gi-fit-ui:not(.gi-use-device-chrome)[data-active-section="kartGuardiansContainer"] #kartGuardiansContainer,
body.gi-fit-ui:not(.gi-use-device-chrome)[data-active-section="kartGuardiansContainer"] .game-content {
    height: var(--gi-view-h, 100svh) !important;
    max-height: var(--gi-view-h, 100svh) !important;
    min-height: 0 !important;
}

body.gi-fit-ui #gameScreen .game-content,
body.gi-fit-ui #quizContainer,
body.gi-fit-ui #memoryContainer,
body.gi-fit-ui #dangerContainer,
body.gi-fit-ui #scenarioContainer {
    min-height: 0 !important;
    max-height: 100%;
}

body.gi-fit-ui #memoryContainer .mm-wrap.mm-arena-panel,
body.gi-fit-ui #dangerContainer .spot-danger-game {
    min-height: 0 !important;
}

body.gi-fit-ui .gs-nav-fab,
body.gi-fit-ui .runner-hud-nav,
body.gi-fit-ui .vg-hud-nav.runner-hud-nav {
    width: var(--gi-btn) !important;
    height: var(--gi-btn) !important;
}

body.gi-fit-ui .touch-btn {
    min-height: var(--gi-btn) !important;
    height: auto;
    padding: clamp(6px, 1.6vmin, 12px) clamp(6px, 1.4vmin, 10px) !important;
    font-size: clamp(1rem, 4vmin, 1.4rem) !important;
    border-radius: clamp(12px, 3vmin, 18px);
}

body.gi-fit-ui .touch-btn span {
    font-size: clamp(0.55rem, 2.2vmin, 0.8rem) !important;
}

body.gi-fit-ui[data-active-section="runnerContainer"] .touch-controls,
body.gi-fit-ui .runner-touch-controls,
body.gi-fit-ui .platformer-touch-controls {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: clamp(6px, 2vmin, 12px) !important;
    padding-bottom: max(8px, var(--gi-safe-bottom, env(safe-area-inset-bottom)));
    padding-left: max(8px, var(--gi-safe-left, env(safe-area-inset-left)));
    padding-right: max(8px, var(--gi-safe-right, env(safe-area-inset-right)));
}

body.gi-fit-ui[data-active-section="runnerContainer"] .touch-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%) !important;
}

body.gi-fit-ui .kg-gboy {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(8px, var(--gi-safe-left, env(safe-area-inset-left))) !important;
    padding-right: max(8px, var(--gi-safe-right, env(safe-area-inset-right))) !important;
    padding-bottom: max(8px, var(--gi-safe-bottom, env(safe-area-inset-bottom))) !important;
}

body.gi-fit-ui .kg-plate {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: clamp(6px, 2vmin, 12px);
}

body.gi-fit-ui .kg-stick {
    width: var(--gi-stick) !important;
    height: var(--gi-stick) !important;
    max-width: 42vw;
    max-height: 34svh;
}

body.gi-fit-ui .kg-knob {
    width: 42%;
    height: 42%;
    margin: 0;
    transform: translate(-50%, -50%);
}

body.gi-fit-ui .kg-btn,
body.gi-fit-ui .kg-btn-a {
    width: var(--gi-btn) !important;
    height: var(--gi-btn) !important;
    font-size: clamp(10px, 2.6vmin, 13px);
}

body.gi-fit-ui .kg-btn-a {
    width: var(--gi-btn-lg) !important;
    height: var(--gi-btn-lg) !important;
}

body.gi-fit-ui .sp-play-btn,
body.gi-fit-ui .hs-start-btn,
body.gi-fit-ui .btn,
body.gi-fit-ui .mp-btn-primary,
body.gi-fit-ui .mp-btn-secondary,
body.gi-fit-ui .mp-start-btn,
body.gi-fit-ui .mp-leave-btn,
body.gi-fit-ui .tab-btn,
body.gi-fit-ui .ts-close-btn {
    max-width: calc(100% - 8px);
    box-sizing: border-box;
}

body.gi-fit-ui .sp-play-content,
body.gi-fit-ui .hs-start-btn,
body.gi-fit-ui .btn,
body.gi-fit-ui .mp-btn-primary,
body.gi-fit-ui .mp-start-btn {
    padding-block: clamp(8px, 2.2vmin, 16px);
    font-size: clamp(0.82rem, 3.2vmin, 1.05rem);
}

body.gi-fit-ui .modal-content,
body.gi-fit-ui .modal-settings .modal-content,
body.gi-fit-ui .mp-modal,
body.gi-fit-ui .kg-card,
body.gi-fit-ui .kg-card-wide,
body.gi-fit-ui #tournamentScreen .ts-panel,
body.gi-fit-ui .vg-settings-card {
    max-height: min(92svh, var(--gi-view-h, 92svh));
    overflow: auto;
    box-sizing: border-box;
}

body.gi-fit-ui .modal-buttons,
body.gi-fit-ui .mp-match-join,
body.gi-fit-ui .vg-settings-actions {
    position: sticky;
    bottom: 0;
}

@media (orientation: landscape) {
    body.gi-fit-ui {
        --gi-btn: clamp(36px, 18svh, 56px);
        --gi-btn-lg: clamp(44px, 22svh, 68px);
        --gi-stick: clamp(68px, 36svh, 120px);
    }

    body.gi-fit-ui .kg-stick {
        max-width: 28vw;
        max-height: calc(100svh - 16px);
    }

    body.gi-fit-ui .touch-controls,
    body.gi-fit-ui .runner-touch-controls,
    body.gi-fit-ui .platformer-touch-controls,
    body.gi-fit-ui .kg-gboy {
        max-height: 46svh;
    }

    body.gi-fit-ui .sp-play-content,
    body.gi-fit-ui .hs-start-btn,
    body.gi-fit-ui #gameMenu .mission-card,
    body.gi-fit-ui .btn {
        padding-block: clamp(6px, 2svh, 12px);
    }
}

@media (orientation: landscape) and (max-height: 360px) {
    body.gi-fit-ui {
        --gi-btn: clamp(32px, 20svh, 48px);
        --gi-btn-lg: clamp(38px, 24svh, 56px);
        --gi-stick: clamp(56px, 40svh, 96px);
    }

    body.gi-fit-ui .touch-btn span {
        display: none;
    }
}