/* ==========================================================
           CHAMADA DO GAME
           ========================================================== */
        .game-hidratacao {
            /*
             * IMAGEM DE FUNDO DA CHAMADA
             * Para trocar depois, altere somente a URL abaixo.
             * Exemplo VTEX:
             * url("/arquivos/banner-game-hidratacao.jpg")
             */
            --game-hidratacao-background:
                url("/arquivos/banner-game-hidratacao.jpg");

            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 340px;
            width: 100%;
            padding: 50px 24px;
            overflow: hidden;
            cursor: pointer;
            text-align: center;

            /* A cor aparece como fallback caso a imagem não carregue. */
            background-color: #66b6cd;
            background-image:
                linear-gradient(
                    rgba(37, 111, 132, .24),
                    rgba(37, 111, 132, .24)
                ),
                var(--game-hidratacao-background);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .game-hidratacao:focus {
            outline: 3px solid #ffffff;
            outline-offset: -6px;
        }

        /*
         * Os antigos círculos decorativos foram removidos para não
         * interferirem na imagem de fundo.
         */
        .game-hidratacao::before,
        .game-hidratacao::after {
            content: none;
        }

        .game-hidratacao__content {
            position: relative;
            z-index: 1;
            max-width: 720px;
            color: #ffffff;
        }

        .game-hidratacao__eyebrow {
            display: block;
            margin-bottom: 12px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .game-hidratacao__title {
            margin: 0;
            font-size: clamp(34px, 5vw, 58px);
            line-height: 1.05;
            font-weight: 700;
        }

        .game-hidratacao__text {
            max-width: 590px;
            margin: 18px auto 26px;
            font-size: 18px;
            line-height: 1.5;
        }

        .game-hidratacao__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 14px 30px;
            border: 1px solid #ffffff;
            border-radius: 999px;
            background: #ffffff;
            color: #367c90;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            box-shadow: 0 12px 25px rgba(27,94,112,.22);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .game-hidratacao:hover .game-hidratacao__button {
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(27,94,112,.30);
        }

        /* ==========================================================
           POPUP
           ========================================================== */
        .hydration-game-modal {
            position: fixed;
            inset: 0;
            z-index: 999999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0,0,0,.72);
        }

        .hydration-game-modal.is-open {
            display: flex;
        }

        .hydration-game-modal__dialog {
            position: relative;
            width: min(520px, 100%);
            height: min(860px, calc(100vh - 40px));
            overflow: hidden;
            border-radius: 24px;
            background: #215f70;
            box-shadow: 0 24px 80px rgba(0,0,0,.45);
        }

        .hydration-game-modal__close {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 1px solid rgba(255,255,255,.5);
            border-radius: 50%;
            background: rgba(15,70,86,.78);
            color: #ffffff;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
        }

        body.hydration-game-lock {
            overflow: hidden !important;
        }

        /* ==========================================================
           GAME — todos os seletores estão limitados ao popup
           ========================================================== */
        #hydrationGameApp {
            --agua-fundo: #215f70;
            --agua-med: #66b6cd;
            --aqua: #66b6cd;
            --menta: #d9f1f6;
            --coral: #ff8a73;
            --creme: #f3fbfb;
            --sombra: rgba(24,82,98,.42);
            --game-font: "Trebuchet MS", "Segoe UI", Arial, sans-serif;

            position: absolute;
            inset: 0;
            overflow: hidden;
            background: var(--agua-fundo);
            color: var(--creme);
            font-family: var(--game-font);
        }

        #hydrationGameApp,
        #hydrationGameApp * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        #hydrationGameStage {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(
                120% 80% at 50% -10%,
                #a9dce7 0%,
                var(--agua-med) 42%,
                var(--agua-fundo) 100%
            );
        }

        #hydrationGameFrame {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 520px;
            overflow: hidden;
            box-shadow: 0 0 60px var(--sombra);
        }

        #hydrationGameCanvas {
            display: block;
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        #hydrationPlayerSprite {
            position: absolute;
            z-index: 1;
            display: none;
            pointer-events: none;
            transform: translate(-50%, -50%);
            will-change: left, top, width;
        }

        #hydrationHud {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px 64px 14px 16px;
            pointer-events: none;
        }

        #hydrationGameApp .hud-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        #hydrationGameApp .hidro-wrap {
            flex: 1;
            max-width: 230px;
        }

        #hydrationGameApp .hidro-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 2px 5px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            opacity: .85;
        }

        #hydrationGameApp .hidro-bar {
            height: 16px;
            overflow: hidden;
            border: 1px solid rgba(217,241,246,.30);
            border-radius: 20px;
            background: rgba(3,26,32,.55);
            box-shadow: inset 0 1px 3px rgba(0,0,0,.40);
        }

        #hydrationGameApp .hidro-fill {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: linear-gradient(90deg, var(--aqua), var(--menta));
            transition: width .12s linear, background .3s;
        }

        #hydrationGameApp .hidro-fill.low {
            background: linear-gradient(90deg, #ff6f5e, #ffb199);
        }

        #hydrationGameApp .placar {
            text-align: right;
        }

        #hydrationGameApp .placar .dist {
            font-size: 30px;
            font-weight: 800;
            line-height: 1;
            text-shadow: 0 2px 6px var(--sombra);
        }

        #hydrationGameApp .placar .dist small {
            margin-left: 3px;
            font-size: 13px;
            font-weight: 600;
            opacity: .8;
        }

        #hydrationGameApp .placar .boost {
            margin-top: 5px;
            color: var(--menta);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            opacity: 0;
            transition: opacity .2s;
        }

        #hydrationGameApp .placar .boost.on {
            opacity: 1;
            animation: hydrationPulse .5s infinite alternate;
        }

        @keyframes hydrationPulse {
            to { transform: scale(1.08); }
        }

        #hydrationGameApp .game-tela {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            padding: 74px 26px 32px;
            overflow-y: auto;
            text-align: center;
            background: linear-gradient(
                180deg,
                rgba(33,95,112,.74),
                rgba(33,95,112,.96)
            );
            backdrop-filter: blur(3px);
        }

        #hydrationGameApp .game-tela.game-hide {
            display: none;
        }

        #hydrationGameApp .game-marca {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .32em;
            text-transform: uppercase;
            opacity: .75;
        }

        #hydrationGameApp .game-titulo {
            margin: 0;
            font-size: clamp(30px, 9vw, 46px);
            font-weight: 800;
            line-height: 1.02;
            letter-spacing: -.01em;
        }

        #hydrationGameApp .game-titulo .gota {
            color: #bfe6ef;
        }

        #hydrationGameApp .game-titulo--small {
            font-size: 30px;
        }

        #hydrationGameApp .game-sub {
            max-width: 350px;
            margin: 0;
            font-size: 15px;
            line-height: 1.5;
            opacity: .92;
        }

        #hydrationGameApp .game-como {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
            max-width: 360px;
            margin-top: 2px;
        }

        #hydrationGameApp .game-como .game-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 88px;
            font-size: 12.5px;
            opacity: .92;
        }

        #hydrationGameApp .game-como .game-ico {
            font-size: 22px;
        }

        #hydrationGameApp .game-btn {
            min-height: 50px;
            padding: 15px 40px;
            border: 0;
            border-radius: 40px;
            background: linear-gradient(180deg, var(--menta), var(--aqua));
            color: var(--agua-fundo);
            font-family: var(--game-font);
            font-size: 17px;
            font-weight: 800;
            letter-spacing: .02em;
            cursor: pointer;
            pointer-events: auto;
            box-shadow:
                0 8px 22px rgba(102,182,205,.42),
                inset 0 1px 0 rgba(255,255,255,.50);
            transition: transform .1s, box-shadow .2s;
        }

        #hydrationGameApp .game-btn:hover {
            transform: translateY(-2px);
        }

        #hydrationGameApp .game-btn:active {
            transform: translateY(1px);
        }

        #hydrationGameApp .game-btn.coral {
            background: linear-gradient(180deg, #ffb199, var(--coral));
            box-shadow:
                0 8px 22px rgba(255,138,115,.40),
                inset 0 1px 0 rgba(255,255,255,.50);
        }

        #hydrationGameApp .game-btn.ghost {
            padding: 13px 30px;
            border: 1.5px solid rgba(217,241,246,.45);
            background: transparent;
            color: var(--creme);
            font-size: 15px;
            box-shadow: none;
        }

        #hydrationGameApp .game-botoes {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        #hydrationGameApp .game-resultado .dist-final {
            font-size: 15px;
            opacity: .85;
        }

        #hydrationGameApp .game-resultado .dist-final b {
            color: var(--menta);
            font-size: 19px;
        }

        #hydrationGameApp .game-premio {
            min-width: 250px;
            margin: 4px 0;
            padding: 20px 24px;
            border: 1px dashed rgba(217,241,246,.50);
            border-radius: 18px;
            background: rgba(255,255,255,.07);
        }

        #hydrationGameApp .game-premio .nivel {
            font-size: 13px;
            letter-spacing: .10em;
            text-transform: uppercase;
            opacity: .8;
        }

        #hydrationGameApp .game-premio .off {
            margin: 4px 0;
            color: var(--menta);
            font-size: 38px;
            font-weight: 800;
            line-height: 1.1;
        }

        #hydrationGameApp .game-cupom {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
            padding: 9px 16px;
            border: 1px solid rgba(255,138,115,.40);
            border-radius: 12px;
            background: rgba(255,138,115,.12);
            color: var(--coral);
            font-family: var(--game-font);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: .14em;
            cursor: pointer;
            transition: background .2s;
        }

        #hydrationGameApp .game-cupom:hover {
            background: rgba(255,138,115,.22);
        }

        #hydrationGameApp .game-cupom .copyico {
            display: inline-flex;
            opacity: .85;
        }

        #hydrationGameApp .game-premio .copiado {
            height: 14px;
            margin-top: 9px;
            font-size: 11px;
            letter-spacing: .04em;
            opacity: .75;
        }

        #hydrationGameApp .game-semcupom {
            max-width: 300px;
            font-size: 15px;
            opacity: .9;
        }

        #hydrationGameApp .login-campos {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 300px;
        }

        #hydrationGameApp .login-campos input {
            padding: 13px 16px;
            border: 1px solid rgba(217,241,246,.30);
            border-radius: 12px;
            background: rgba(3,26,32,.50);
            color: var(--creme);
            font-family: var(--game-font);
            font-size: 15px;
        }

        #hydrationGameApp .login-campos input::placeholder {
            color: rgba(243,251,251,.50);
        }

        #hydrationGameApp .score-registration {
            width: 100%;
            max-width: 320px;
        }

        /*
         * Regra de segurança: o atributo hidden sempre prevalece, mesmo
         * que algum CSS global da VTEX tente alterar o display.
         */
        #hydrationGameApp [hidden] {
            display: none !important;
        }

        #hydrationGameApp .score-register-trigger {
            /*
             * Para desativar o botão "Registrar minha pontuação",
             * altere display: inline-flex para display: none.
             */
            display: inline-flex;
            margin: 2px auto 0;
        }

        #hydrationGameApp .score-form {
            display: none;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            padding: 16px;
            border: 1px solid rgba(217,241,246,.35);
            border-radius: 16px;
            background: rgba(3,26,32,.28);
        }

        #hydrationGameApp .score-form.is-visible:not([hidden]) {
            display: flex !important;
        }

        #hydrationGameApp .score-form__title {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
        }

        #hydrationGameApp .score-form__text {
            margin: -4px 0 2px;
            font-size: 12px;
            line-height: 1.4;
            opacity: .82;
        }

        #hydrationGameApp .score-form input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid rgba(217,241,246,.30);
            border-radius: 11px;
            outline: none;
            background: rgba(3,26,32,.48);
            color: var(--creme);
            font-family: var(--game-font);
            font-size: 14px;
        }

        #hydrationGameApp .score-form input:focus {
            border-color: rgba(255,255,255,.78);
            box-shadow: 0 0 0 2px rgba(255,255,255,.10);
        }

        #hydrationGameApp .score-form input::placeholder {
            color: rgba(243,251,251,.52);
        }

        #hydrationGameApp .score-form__message {
            min-height: 18px;
            margin: 0;
            font-size: 12px;
            line-height: 1.4;
        }

        #hydrationGameApp .score-form__message.success {
            color: #d9f1f6;
            font-weight: 700;
        }

        #hydrationGameApp .score-form__message.error {
            color: #ffd4cc;
            font-weight: 700;
        }

        #hydrationGameApp .score-submit[disabled] {
            cursor: wait;
            opacity: .68;
            transform: none;
        }

        #hydrationGameApp .score-success {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 230px;
            padding: 28px 22px;
            border: 1px solid rgba(217,241,246,.42);
            border-radius: 18px;
            background:
                radial-gradient(
                    circle at 50% 10%,
                    rgba(255,255,255,.10),
                    transparent 48%
                ),
                rgba(3,26,32,.30);
            text-align: center;
        }

        #hydrationGameApp .score-success.is-visible:not([hidden]) {
            display: flex !important;
            animation: scoreSuccessIn .28s ease-out both;
        }

        #hydrationGameApp .score-success__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            border: 2px solid rgba(217,241,246,.72);
            border-radius: 50%;
            background: rgba(102,182,205,.22);
            color: #d9f1f6;
            font-size: 34px;
            font-weight: 800;
            line-height: 1;
            box-shadow: 0 10px 30px rgba(3,26,32,.22);
        }

        #hydrationGameApp .score-success__title {
            margin: 2px 0 0;
            color: #ffffff;
            font-size: 21px;
            font-weight: 800;
            line-height: 1.2;
        }

        #hydrationGameApp .score-success__text {
            max-width: 250px;
            margin: 0;
            color: rgba(243,251,251,.88);
            font-size: 14px;
            line-height: 1.5;
        }

        #hydrationGameApp .score-success__text strong {
            color: #d9f1f6;
        }

        @keyframes scoreSuccessIn {
            from {
                opacity: 0;
                transform: translateY(8px) scale(.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #hydrationGameApp .game-rodape {
            position: absolute;
            bottom: 12px;
            font-size: 10px;
            letter-spacing: .10em;
            opacity: .55;
        }

        #hydrationGameFlash {
            position: absolute;
            inset: 0;
            z-index: 4;
            background: var(--coral);
            opacity: 0;
            pointer-events: none;
        }

        @media (max-width: 767px) {
            .game-hidratacao {
                min-height: 300px;
                padding: 42px 20px;
            }

            .game-hidratacao__title {
                font-size: 38px;
            }

            .game-hidratacao__text {
                font-size: 16px;
            }

            .hydration-game-modal {
                padding: 0;
            }

            .hydration-game-modal__dialog {
                width: 100%;
                height: 100%;
                max-width: none;
                border-radius: 0;
            }

            #hydrationGameApp .game-tela {
                padding-top: 68px;
            }

            #hydrationHud {
                padding-right: 62px;
            }
        }

        @media (max-height: 650px) {
            #hydrationGameApp .game-tela {
                justify-content: flex-start;
                gap: 12px;
                padding-top: 64px;
            }

            #hydrationGameApp .game-como {
                gap: 10px;
            }

            #hydrationGameApp .game-rodape {
                position: static;
                margin-top: 2px;
            }
        }