@font-face {
    font-family: 'PixelSplitter';
    src:
        url('/games/balance-ball/base/css/fonts/PixelSplitter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html {
    background: #0a1529;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background: #0a1529;
    overflow: hidden;
}

.landing-page {
    width: 100%;
    height: 100dvh;
    display: grid;
    place-items: center;
    background: #0a1529;
    overflow: hidden;
}

.landing-stage {
    position: relative;
    width: min(100vw, calc(100dvh * 0.75), 768px);
    height: auto;
    aspect-ratio: 768 / 1024;
    max-width: 768px;
    max-height: 1024px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    container-type: inline-size;
}

.landing-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/*
|--------------------------------------------------------------------------
| Título principal
|--------------------------------------------------------------------------
| conMain.png mide 768x1024 y trae también el personaje.
| Por eso lo recortamos con overflow:hidden para mostrar solo la parte superior.
*/
.landing-title {
    position: absolute;
    top: 3.5%;
    left: 7%;
    width: 86%;
    height: 27%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
    pointer-events: none;
}

.landing-title img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

/*
|--------------------------------------------------------------------------
| Texto central
|--------------------------------------------------------------------------
*/
.landing-copy {
    position: absolute;
    top: 47.8%;
    left: 8%;
    width: 84%;
    margin: 0;
    padding: 1.05cqw 2cqw 0.8cqw;
    color: #ffffff;
    font-family: 'PixelSplitter', Impact, sans-serif;
    font-size: 3.55cqw;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 0.85cqw;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.95),
        3px 0 0 rgba(0, 0, 0, 0.68),
        -3px 0 0 rgba(0, 0, 0, 0.68);
    z-index: 5;
}

/*
|--------------------------------------------------------------------------
| Selector de marcas
|--------------------------------------------------------------------------
*/
.landing-brand-options {
    position: absolute;
    left: 10%;
    bottom: 14%;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5%;
    align-items: center;
    z-index: 4;
}

.landing-brand-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 7.6cqw;
    padding: 1.45cqw 2cqw;
    border: 0.42cqw solid #ffffff;
    border-radius: 1.7cqw;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 0.82cqw 0 rgba(0, 0, 0, 0.78),
        inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.landing-brand-card:hover {
    transform: translateY(-0.3cqw);
    box-shadow:
        0 1.05cqw 0 rgba(0, 0, 0, 0.78),
        inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.35);
}

.landing-brand-card:active {
    transform: translateY(0.3cqw);
    box-shadow:
        0 0.45cqw 0 rgba(0, 0, 0, 0.78),
        inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.35);
}

.landing-brand-card img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 5.1cqw;
    object-fit: contain;
}

.landing-brand-card--walmart img {
    max-width: 82%;
}

.landing-brand-card--bodega img {
    max-width: 86%;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width: 480px) {
    .landing-stage {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        background-size: cover;
        background-position: center center;
    }

    .landing-title {
        top: 4.8%;
        left: 5%;
        width: 90%;
        height: 24%;
    }

    .landing-copy {
        top: 43.2%;
        left: 6%;
        width: 88%;
        padding: 1.45cqw 2cqw 1.1cqw;
        font-size: 4.25cqw;
        line-height: 1.05;
        border-radius: 1.4cqw;
        background: rgba(0, 0, 0, 0.54);
        text-shadow:
            0 2px 0 rgba(0, 0, 0, 0.95),
            2px 0 0 rgba(0, 0, 0, 0.7),
            -2px 0 0 rgba(0, 0, 0, 0.7);
    }

    .landing-brand-options {
        left: 13%;
        bottom: 18.8%;
        width: 74%;
        grid-template-columns: 1fr;
        gap: 2.3cqw;
    }

    .landing-brand-card {
        min-height: 13.2cqw;
        padding: 2.4cqw 4cqw;
        border-width: 0.7cqw;
        border-radius: 2.8cqw;
        box-shadow:
            0 1.15cqw 0 rgba(0, 0, 0, 0.78),
            inset 0 0 0 0.48cqw rgba(255, 255, 255, 0.35);
    }

    .landing-brand-card img {
        max-height: 7.8cqw;
    }

    .landing-brand-card--walmart img {
        max-width: 70%;
    }

    .landing-brand-card--bodega img {
        max-width: 72%;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile bajo, Safari con barra visible
|--------------------------------------------------------------------------
*/
@media (max-width: 480px) and (max-height: 760px) {
    .landing-title {
        top: 3.9%;
        left: 6%;
        width: 88%;
        height: 23%;
    }

    .landing-copy {
        top: 42.3%;
        font-size: 4.05cqw;
        padding: 1.35cqw 2cqw 1cqw;
    }

    .landing-brand-options {
        bottom: 17.4%;
        gap: 2cqw;
    }

    .landing-brand-card {
        min-height: 12.4cqw;
        padding: 2.2cqw 3.6cqw;
    }

    .landing-brand-card img {
        max-height: 7.3cqw;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/
@media (min-width: 481px) and (max-width: 820px) {
    .landing-title {
        top: 4%;
        left: 6%;
        width: 88%;
        height: 25%;
    }

    .landing-copy {
        top: 47.8%;
        left: 8%;
        width: 84%;
        padding: 0.95cqw 1.8cqw 0.75cqw;
        font-size: 3.45cqw;
        border-radius: 0.8cqw;
        background: rgba(0, 0, 0, 0.5);
    }

    .landing-brand-options {
        left: 9.5%;
        bottom: 14%;
        width: 81%;
        gap: 4.2%;
    }

    .landing-brand-card {
        min-height: 7.7cqw;
        padding: 1.45cqw 2cqw;
    }

    .landing-brand-card img {
        max-height: 5.1cqw;
    }

    .landing-brand-card--walmart img {
        max-width: 78%;
    }

    .landing-brand-card--bodega img {
        max-width: 82%;
    }
}

/*
|--------------------------------------------------------------------------
| Laptop / desktop
|--------------------------------------------------------------------------
*/
@media (min-width: 821px) {
    .landing-stage {
        width: min(100vw, calc(100dvh * 0.75), 768px);
        height: auto;
        aspect-ratio: 768 / 1024;
    }

    .landing-title {
        top: 3.6%;
        left: 7%;
        width: 86%;
        height: 26%;
    }

    .landing-copy {
        top: 48%;
        left: 8%;
        width: 84%;
        padding: 0.9cqw 1.8cqw 0.7cqw;
        font-size: 3.35cqw;
        border-radius: 0.75cqw;
        background: rgba(0, 0, 0, 0.5);
    }

    .landing-brand-options {
        left: 9.5%;
        bottom: 14%;
        width: 81%;
        gap: 4.2%;
    }

    .landing-brand-card {
        min-height: 7.5cqw;
        padding: 1.45cqw 2cqw;
    }

    .landing-brand-card img {
        max-height: 5cqw;
    }

    .landing-brand-card--walmart img {
        max-width: 78%;
    }

    .landing-brand-card--bodega img {
        max-width: 82%;
    }
}

/*
|--------------------------------------------------------------------------
| Laptop baja
|--------------------------------------------------------------------------
*/
@media (min-width: 821px) and (max-height: 760px) {
    .landing-title {
        top: 2.5%;
        left: 9%;
        width: 82%;
        height: 24.5%;
    }

    .landing-copy {
        top: 45.6%;
        font-size: 3.2cqw;
        padding: 0.8cqw 1.6cqw 0.65cqw;
    }

    .landing-brand-options {
        bottom: 12.6%;
        left: 10%;
        width: 80%;
    }

    .landing-brand-card {
        min-height: 6.9cqw;
        padding: 1.25cqw 1.7cqw;
    }

    .landing-brand-card img {
        max-height: 4.6cqw;
    }
}