/*
 * Balloon game: mobile landscape only.
 * Keep all rules scoped below .balloon-game-mobile-landscape.
 */

:root {
    /* Desktop #answers controls: negative = left/up, positive = right/down. */
    --balloon-desktop-answers-offset-x: -20px;
    --balloon-desktop-answers-offset-y: 0px;
}

html.balloon-game-mobile-landscape {
    --balloon-mobile-landscape-mode: 1;
    /* Mobile-landscape #answers controls. */
    --balloon-answers-offset-x: -30px;
    --balloon-answers-offset-y: 0px;
    --balloon-flight-size: clamp(90px, 30dvh, 125px);
    /* Hot-air score balloon width; accepts px, vw, or clamp(). */
    --balloon-score-width: clamp(90px, 15vw, 140px);
}

html.balloon-game-mobile-landscape,
html.balloon-game-mobile-landscape body {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    max-height: none;
    overflow: hidden;
}

html.balloon-game-mobile-landscape body {
    background-position: top center;
    background-size: 100% 112%;
}

html.balloon-game-mobile-landscape #chosing {
    top: 56%;
    left: 50%;
}

html.balloon-game-mobile-landscape #container {
    width: 100%;
    height: 100%;
}

html.balloon-game-mobile-landscape #keyboard {
    position: static;
}

html.balloon-game-mobile-landscape #pyramid {
    top: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
}

html.balloon-game-mobile-landscape #ballon {
    display: block;
    width: var(--balloon-flight-size);
    height: auto;
}

html.balloon-game-mobile-landscape .scoreBallon {
    width: var(--balloon-score-width);
}

html.balloon-game-mobile-landscape #startName,
html.balloon-game-mobile-landscape #startSound {
    top: 87%;
    width: 40% !important;
}

html.balloon-game-mobile-landscape #startName {
    left: 19%;
}

html.balloon-game-mobile-landscape #startSound {
    left: 81%;
}

html.balloon-game-mobile-landscape body.balloon-game-opening-screen #pyramid {
    visibility: hidden;
}

html.balloon-game-mobile-landscape #retrybutton {
    top: calc(50% + 15px);
}

html.balloon-game-mobile-landscape #retry {
    -webkit-clip-path: inset(17% 8% 49% 8%);
    clip-path: inset(17% 8% 49% 8%);
}

html.balloon-game-mobile-landscape body.keyboardHiddenMobile #pyramid,
html.balloon-game-mobile-landscape body.keyboardHiddenMobile #errors {
    display: none;
}