/*!
 * Game Rush - home: interruptor da animação/personagem + troca mobile
 * (portal/Dave no cabeçalho x marca "GAME RUSH" no bloco do portal).
 *
 * - html.rf-home-character-off oculta o bloco animado .rgh-machine (setting
 *   home_character_enabled, controlada no admin > Personalizar).
 * - A troca de lugar só ocorre até 899px e quando o JS
 *   (assets/js/rush-mobile-swap.js) efetivamente fez a troca.
 */

/* Admin > Personalizar: animação/portal do Dave desligada */
html.rf-home-character-off .rgh-machine {
    display: none !important;
}

@media (max-width: 899px) {
    /* ------------------------------------------------------------------
     * 1) Cabeçalho: portal/Dave no lugar da marca
     * ------------------------------------------------------------------ */
    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 60px;
        height: 56px;
        padding: 0;
        font-size: 0;
        line-height: 0;
    }

    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal > .rgh-portal {
        position: relative;
        inset: auto;
        width: 56px;
        height: 56px;
        margin: 0;
        border: 5px solid #386286;
        border-radius: 50%;
        background: radial-gradient(ellipse at 50% 65%, #0b74a4, #063b66 57%, #031b39 72%);
        box-shadow: 0 0 0 2px #0b2a4d, inset 0 0 0 2px #d5eef2, inset 0 0 0 5px #102a4d, 0 6px 16px rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }

    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal > .rgh-portal::after {
        inset: 3px;
        border-width: 2px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(47, 239, 255, 0.47), inset 0 0 10px rgba(41, 213, 255, 0.4);
    }

    /* No cabeçalho o portal é pequeno: esconde os parafusos e o selo "DAVE PRONTO!" */
    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal .rgh-portal > i,
    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal .rgh-portal > .rgh-ready {
        display: none;
    }

    /* Personagem (canvas WebGL) preenchendo o portal mini */
    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal .rgh-portal .rush-lobby-character {
        position: absolute;
        left: -12.5%;
        bottom: 0;
        width: 125%;
        height: 100%;
        transform: none;
        pointer-events: none;
    }

    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal .rgh-portal canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* A marca original fica no header, mas oculta enquanto o portal ocupa o lugar */
    html.rf-mobile-swapped .rgh-header-logo.rf-has-portal > .rush-brand {
        display: none;
    }

    /* ------------------------------------------------------------------
     * 2) Bloco do portal: marca "GAME RUSH" no lugar do Dave
     * ------------------------------------------------------------------ */
    html.rf-mobile-swapped .rgh-machine.rf-has-brand {
        display: block;
    }

    /* Recria o círculo do portal atrás da marca para o bloco não ficar vazio */
    html.rf-mobile-swapped .rgh-machine.rf-has-brand::before {
        content: '';
        position: absolute;
        inset: 6%;
        z-index: 0;
        border: 14px solid #386286;
        border-radius: 50%;
        background: radial-gradient(ellipse at 50% 65%, #0b74a4, #063b66 57%, #031b39 72%);
        box-shadow: 0 0 0 4px #0b2a4d, inset 0 0 0 4px #d5eef2, inset 0 0 0 10px #102a4d, 0 15px 40px rgba(0, 0, 0, 0.53);
        pointer-events: none;
    }

    html.rf-mobile-swapped .rgh-machine.rf-has-brand::after {
        content: '';
        position: absolute;
        inset: 7%;
        z-index: 0;
        border: 4px solid #51e5f1;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(47, 239, 255, 0.47), inset 0 0 20px rgba(41, 213, 255, 0.4);
        pointer-events: none;
    }

    html.rf-mobile-swapped .rgh-machine.rf-has-brand > .rf-brand-clone {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 3;
        display: inline-block;
        font-size: 54px;
        line-height: 0.82;
        text-align: left;
        white-space: nowrap;
        transform: translate(-50%, -50%) rotate(-8deg) skew(-7deg);
        filter: drop-shadow(0.04em 0.07em 0 #00101e);
    }
}

/* Telas um pouco maiores dentro do modo compacto: marca um pouco maior */
@media (max-width: 899px) and (min-width: 560px) {
    html.rf-mobile-swapped .rgh-machine.rf-has-brand > .rf-brand-clone {
        font-size: 64px;
    }
}

/* ------------------------------------------------------------------
 * 3) Mobile: bloco animado no lugar da marca grande (.rgh-hero-brand)
 *    O JS move o .rgh-machine para o topo da home e oculta a marca grande.
 * ------------------------------------------------------------------ */
@media (max-width: 899px) {
    html.rf-machine-in-hero .rgh-hero-brand {
        display: none !important;
    }

    html.rf-machine-in-hero .rgh-hero .rgh-copy > .rgh-machine.rf-machine-hero {
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 18px;
        aspect-ratio: 1;
    }

    html.rf-machine-in-hero .rgh-hero .rgh-copy > .rgh-machine.rf-machine-hero .rgh-lab-sign {
        font-size: 9px;
    }
}