/* =========================================================
   BASE
========================================================= */

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}


/* =========================================================
   PÁGINA
========================================================= */

.anime-page {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 16px;

    box-sizing: border-box;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.anime-top {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 8px 0 18px;
}

.anime-top small,
.episodes-head small,
.now-playing small {
    color: var(--green);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.anime-top h1 {
    margin: 3px 0 0;

    font-size: 23px;
}


/* =========================================================
   BOTÃO VOLTAR
========================================================= */

.back {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid var(--line);
    border-radius: 50%;

    color: var(--text);

    font-size: 30px;
    text-decoration: none;
}


/* =========================================================
   CARDS
========================================================= */

.player-card,
.episodes-card {
    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--panel);

    overflow: hidden;
}

.player-card {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   PLAYER
========================================================= */

.player-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #000;

    overflow: hidden;
}

.player-wrap iframe {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    display: block;

    border: 0;

    background: #000;
}


/* =========================================================
   BLOQUEIA BOTÃO "ABRIR NO GOOGLE DRIVE"
========================================================= */

.block-drive-open {
    position: absolute;

    top: 0;
    right: 0;

    width: 70px;
    height: 70px;

    /*
       Invisível.
       Serve apenas para impedir o clique
       no botão externo do Google Drive.
    */

    background: transparent !important;

    border: 0;
    box-shadow: none;

    pointer-events: auto;

    z-index: 9998;
}


/* =========================================================
   BOTÃO WALA / FULLSCREEN
========================================================= */

.wala-fullscreen {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 6px;

    /*
       TOTALMENTE TRANSPARENTE
    */

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9999;
}


/* remove qualquer efeito padrão do botão */

.wala-fullscreen:hover,
.wala-fullscreen:focus,
.wala-fullscreen:active,
.wala-fullscreen:focus-visible {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   LOGO DO BOTÃO
========================================================= */

.wala-fullscreen-logo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: transparent !important;

    border: 0;
    outline: 0;
    box-shadow: none;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   FULLSCREEN
========================================================= */

.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen {
    width: 100vw !important;

    height: 100vh !important;
    height: 100dvh !important;

    aspect-ratio: auto !important;

    background: #000;

    border-radius: 0;

    overflow: hidden;
}


/* iframe em fullscreen */

.player-wrap:fullscreen iframe,
.player-wrap:-webkit-full-screen iframe {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    border: 0;
}


/* Logo continua no canto no fullscreen */

.player-wrap:fullscreen .wala-fullscreen,
.player-wrap:-webkit-full-screen .wala-fullscreen {
    position: fixed !important;

    top: 12px !important;
    right: 12px !important;

    width: 52px;
    height: 52px;

    padding: 6px;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2147483647 !important;
}


/* Bloqueia o botão do Drive também em fullscreen */

.player-wrap:fullscreen .block-drive-open,
.player-wrap:-webkit-full-screen .block-drive-open {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;

    width: 80px;
    height: 80px;

    background: transparent !important;

    border: 0;

    z-index: 2147483646 !important;
}


/* =========================================================
   PLAYER VAZIO
========================================================= */

.player-empty {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 25px;

    text-align: center;

    background:
        radial-gradient(
            circle,
            #17251c,
            #050706
        );

    color: var(--muted);
}

.player-empty strong {
    font-size: 21px;

    color: var(--text);
}

.player-empty span {
    max-width: 480px;

    font-size: 13px;
    line-height: 1.5;
}

.player-empty[hidden] {
    display: none;
}


/* =========================================================
   AGORA REPRODUZINDO
========================================================= */

.now-playing {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 15px 17px;
}

.now-playing > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

#fullscreenButton {
    padding: 9px 12px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--panel2);

    color: var(--text);

    cursor: pointer;
}


/* =========================================================
   INFORMAÇÕES DO FILME
========================================================= */

.movie-info {
    width: 100%;

    margin-top: 18px;

    padding: 4px 2px 20px;
}


/* Tipo */

.movie-type {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border: 1px solid rgba(61, 255, 126, 0.35);
    border-radius: 20px;

    color: #3dff7e;

    background: rgba(61, 255, 126, 0.08);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.12em;
}


/* Título */

.movie-title {
    margin: 12px 0 5px;

    color: #fff;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.2;
}


/* Ano / duração / gênero */

.movie-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 14px;

    color: #8d9891;

    font-size: 13px;
}


/* Descrição */

.movie-description {
    max-width: 800px;

    margin: 0;

    color: #b8c0bb;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   EPISÓDIOS
========================================================= */

.episodes-card {
    margin-top: 14px;

    padding: 18px;
}

.episodes-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.episodes-head h2 {
    margin: 4px 0 0;
}


/* Busca */

#episodeSearch {
    width: 165px;

    padding: 10px 13px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background: var(--panel2);

    color: var(--text);

    outline: 0;
}

#episodeSearch:focus {
    border-color: var(--green);
}


/* Grid */

.episode-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(94px, 1fr));

    gap: 8px;
}


/* Botão episódio */

.episode-button {
    padding: 11px 7px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--panel2);

    color: var(--text);

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.episode-button:hover,
.episode-button.active {
    border-color: var(--green);

    color: var(--green);

    background: #102117;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .anime-page {
        padding: 12px;
    }

    .player-card {
        border-radius: 14px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .anime-page {
        padding: 10px 10px 35px;
    }


    /* Cabeçalho */

    .anime-top {
        padding: 8px 0 14px;
    }

    .anime-top h1 {
        font-size: 19px;
    }


    /* =====================================
       PLAYER MAIOR NO CELULAR
    ===================================== */

    .player-card {
        width: 100%;

        border-radius: 12px;
    }

    .player-wrap {
        position: relative;

        width: 100%;

        /*
           No celular não força 16:9.
           Dá mais espaço para os controles
           do Google Drive.
        */

        aspect-ratio: auto;

        height: 52vh;

        min-height: 340px;
        max-height: 500px;

        background: #000;

        overflow: hidden;
    }

    .player-wrap iframe {
        position: absolute;

        inset: 0;

        width: 100% !important;
        height: 100% !important;

        display: block;

        border: 0;
    }


    /* Informações */

    .movie-info {
        margin-top: 14px;
    }

    .movie-title {
        font-size: 21px;
    }

    .movie-description {
        font-size: 13px;

        line-height: 1.6;
    }


    /* Episódios */

    .episodes-head {
        align-items: flex-start;
        flex-direction: column;
    }

    #episodeSearch {
        width: 100%;
    }

    .episode-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .now-playing {
        padding: 12px;
    }
}


/* =========================================================
   WALA PLAYER
========================================================= */

.player-wrap.wala-player {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;

    background: #000;

    overflow: hidden;

    user-select: none;
    -webkit-user-select: none;

    touch-action: manipulation;
}


/* REMOVE EFEITOS DO PLAYER ANTIGO */

.player-wrap.wala-player iframe,
.player-wrap.wala-player .block-drive-open {
    display: none !important;
}


/* =========================================================
   VÍDEO
========================================================= */

.wala-video {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}


/* =========================================================
   PLAY CENTRAL
========================================================= */

.wala-center-play {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 20;

    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 5px;

    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.65);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}


.wala-center-play:hover {
    background: rgba(0, 0, 0, 0.82);

    transform:
        translate(-50%, -50%)
        scale(1.07);
}


.wala-center-play.is-hidden {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   CONTROLES
========================================================= */

.wala-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 30;

    padding:
        35px
        14px
        12px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.5),
            transparent
        );

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.wala-player.controls-hidden
.wala-controls {
    opacity: 0;

    transform:
        translateY(8px);

    pointer-events: none;
}


/* =========================================================
   PROGRESSO
========================================================= */

.wala-progress-area {
    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 7px;
}


.wala-progress {
    width: 100%;

    height: 4px;

    margin: 0;

    cursor: pointer;

    accent-color: #fff;
}


/* =========================================================
   LINHA DE CONTROLES
========================================================= */

.wala-controls-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.wala-controls-left,
.wala-controls-right {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* =========================================================
   BOTÕES
========================================================= */

.wala-control-button {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 19px;

    cursor: pointer;
}


/* =========================================================
   VOLUME
========================================================= */

.wala-volume {
    width: 80px;

    accent-color: #fff;

    cursor: pointer;
}


/* =========================================================
   TEMPO
========================================================= */

.wala-time {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #fff;

    font-size: 13px;

    white-space: nowrap;
}


/* =========================================================
   FULLSCREEN
========================================================= */

.wala-controls
.wala-fullscreen {
    position: static;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.wala-controls
.wala-fullscreen-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   LOADING
========================================================= */

.wala-loading {
    position: absolute;

    inset: 0;

    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}


.wala-loading[hidden] {
    display: none;
}


.wala-spinner {
    width: 42px;
    height: 42px;

    border:
        4px solid
        rgba(255, 255, 255, 0.25);

    border-top-color: #fff;

    border-radius: 50%;

    animation:
        wala-spin
        0.8s
        linear
        infinite;
}


@keyframes wala-spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FULLSCREEN
========================================================= */

.player-wrap.wala-player:fullscreen,
.player-wrap.wala-player:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    border-radius: 0 !important;

    background: #000;
}


.player-wrap.wala-player:fullscreen
.wala-video,
.player-wrap.wala-player:-webkit-full-screen
.wala-video {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    /*
     * Isto é importante:
     * sobrescreve aquele antigo height:52vh.
     */

    .player-wrap.wala-player {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;
    }


    .wala-center-play {
        width: 58px;
        height: 58px;

        font-size: 24px;
    }


    .wala-controls {
        padding:
            28px
            9px
            8px;
    }


    .wala-controls-left {
        gap: 5px;
    }


    .wala-volume {
        display: none;
    }


    .wala-time {
        font-size: 11px;
    }


    .wala-control-button {
        width: 30px;
        height: 30px;

        font-size: 16px;
    }


    .wala-controls
    .wala-fullscreen {
        width: 34px;
        height: 34px;
    }

}

/* =========================================================
   WALA PLAYER — FULLSCREEN
========================================================= */

.wala-controls .wala-fullscreen {
    position: static !important;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 6px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    /* VERDE WALA */
    color: #00ff88;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* HOVER */

.wala-controls .wala-fullscreen:hover {
    background: rgba(0, 255, 136, 0.12);

    transform: scale(1.08);
}


/* CLIQUE */

.wala-controls .wala-fullscreen:active {
    transform: scale(0.94);
}


/* ÍCONE SVG */

.wala-fullscreen-icon {
    display: block;

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


/* =========================================================
   REMOVE QUALQUER LOGO ANTIGA DO FULLSCREEN
========================================================= */

.wala-fullscreen-logo {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wala-controls .wala-fullscreen {
        width: 36px;
        height: 36px;

        padding: 6px;
    }

    .wala-fullscreen-icon {
        width: 22px;
        height: 22px;
    }

}


/* =========================================================
   WALA PLAYER — MODERN STREAMING UI
========================================================= */

.wala-player {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    border-radius: 12px;

    color: #fff;

    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   VÍDEO
========================================================= */

.wala-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #000;
}


/* =========================================================
   PLAY CENTRAL
========================================================= */

.wala-center-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 20;

    transform: translate(-50%, -50%);

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #000;

    background: rgba(255, 255, 255, 0.94);

    cursor: pointer;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.35);

    transition:
        transform .18s ease,
        opacity .18s ease,
        background .18s ease;
}


.wala-center-play svg {
    width: 31px;
    height: 31px;

    margin-left: 4px;

    fill: currentColor;
}


.wala-center-play:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: #fff;
}


.wala-center-play:active {
    transform:
        translate(-50%, -50%)
        scale(.94);
}


.wala-center-play.is-hidden {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   CONTROLES
========================================================= */

.wala-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 30;

    padding:
        55px
        16px
        13px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .92) 0%,
            rgba(0, 0, 0, .58) 45%,
            rgba(0, 0, 0, 0) 100%
        );

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.wala-player.controls-hidden .wala-controls {
    opacity: 0;

    transform: translateY(8px);

    pointer-events: none;
}


/* =========================================================
   PROGRESSO
========================================================= */

.wala-progress-area {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 9px;
}


.wala-progress {
    width: 100%;
    height: 4px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;

    outline: none;

    background:
        rgba(255, 255, 255, .35);

    cursor: pointer;

    transition: height .15s ease;
}


.wala-progress:hover {
    height: 6px;
}


/* CHROME / EDGE / BRAVE */

.wala-progress::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: #00ff88;

    cursor: pointer;

    box-shadow:
        0 0 0 3px
        rgba(0, 255, 136, .15);
}


/* FIREFOX */

.wala-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: #00ff88;

    cursor: pointer;
}


/* =========================================================
   LINHA INFERIOR
========================================================= */

.wala-controls-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 36px;
}


.wala-controls-left,
.wala-controls-right {
    display: flex;
    align-items: center;

    gap: 9px;
}


/* =========================================================
   BOTÕES
========================================================= */

.wala-control-button,
.wala-fullscreen {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #fff;

    cursor: pointer;

    transition:
        transform .15s ease,
        opacity .15s ease,
        background .15s ease;
}


.wala-control-button:hover,
.wala-fullscreen:hover {
    transform: scale(1.12);

    background:
        rgba(255, 255, 255, .10);
}


.wala-control-button:active,
.wala-fullscreen:active {
    transform: scale(.92);
}


/* =========================================================
   PLAY
========================================================= */

.wala-play-icon {
    width: 22px;
    height: 22px;

    fill: currentColor;

    pointer-events: none;
}


/* =========================================================
   VOLUME
========================================================= */

.wala-volume-group {
    display: flex;
    align-items: center;

    gap: 2px;
}


.wala-volume-icon {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


.wala-volume-icon .volume-speaker {
    fill: currentColor;
    stroke: currentColor;
}


.wala-volume {
    width: 0;

    opacity: 0;

    appearance: none;
    -webkit-appearance: none;

    height: 4px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .4);

    cursor: pointer;

    transition:
        width .22s ease,
        opacity .18s ease,
        margin .22s ease;
}


/* VOLUME ABRE NO HOVER */

.wala-volume-group:hover .wala-volume,
.wala-volume:focus {
    width: 72px;

    opacity: 1;

    margin-right: 4px;
}


.wala-volume::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 11px;
    height: 11px;

    border: 0;
    border-radius: 50%;

    background: #fff;
}


.wala-volume::-moz-range-thumb {
    width: 11px;
    height: 11px;

    border: 0;
    border-radius: 50%;

    background: #fff;
}


/* =========================================================
   TEMPO
========================================================= */

.wala-time {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-left: 2px;

    color: rgba(255, 255, 255, .95);

    font-size: 12px;
    font-weight: 500;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


.wala-time-divider {
    color:
        rgba(255, 255, 255, .55);
}


/* =========================================================
   FULLSCREEN WALA
========================================================= */

.wala-controls .wala-fullscreen {
    position: static !important;

    color: #00ff88;
}


.wala-fullscreen-icon {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


/* =========================================================
   LOADING
========================================================= */

.wala-loading {
    position: absolute;

    inset: 0;

    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}


.wala-loading[hidden] {
    display: none;
}


.wala-spinner {
    width: 44px;
    height: 44px;

    border:
        3px solid
        rgba(255, 255, 255, .25);

    border-top-color: #00ff88;

    border-radius: 50%;

    animation:
        walaSpin .75s
        linear
        infinite;
}


@keyframes walaSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FULLSCREEN
========================================================= */

.wala-player:fullscreen,
.wala-player:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    border-radius: 0 !important;

    background: #000;
}


.wala-player:fullscreen .wala-video,
.wala-player:-webkit-full-screen .wala-video {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .player-wrap.wala-player {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;
    }


    .wala-controls {
        padding:
            42px
            10px
            8px;
    }


    .wala-center-play {
        width: 56px;
        height: 56px;
    }


    .wala-center-play svg {
        width: 27px;
        height: 27px;
    }


    .wala-controls-left,
    .wala-controls-right {
        gap: 4px;
    }


    /* No celular não precisamos
       da barra horizontal de volume */

    .wala-volume {
        display: none;
    }


    .wala-time {
        font-size: 11px;
    }


    .wala-control-button,
    .wala-fullscreen {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

}

/* =========================================================
   WALA PLAYER — FULLSCREEN PERSONALIZADO
   Funciona inclusive com celular em modo retrato
========================================================= */


/* =========================================================
   BLOQUEIA A PÁGINA
========================================================= */

html.wala-fullscreen-active,
body.wala-fullscreen-active {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overscroll-behavior: none;

    background: #000;
}


/* =========================================================
   PLAYER EM TELA CHEIA
========================================================= */

.player-wrap.wala-player.wala-fullscreen {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 100vw !important;
    height: 100dvh !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #000 !important;

    overflow: hidden !important;

    z-index: 2147483647 !important;

    transform: none;
    transform-origin: center center;

    touch-action: manipulation;
}


/* =========================================================
   VÍDEO
========================================================= */

.player-wrap.wala-player.wala-fullscreen
.wala-video {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    background: #000 !important;
}


/* =========================================================
   CONTROLES NO FULLSCREEN
========================================================= */

.player-wrap.wala-player.wala-fullscreen
.wala-controls {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    box-sizing: border-box;

    z-index: 100 !important;
}


/* =========================================================
   PLAY CENTRAL
========================================================= */

.player-wrap.wala-player.wala-fullscreen
.wala-center-play {
    z-index: 90 !important;
}


/* =========================================================
   LOADING
========================================================= */

.player-wrap.wala-player.wala-fullscreen
.wala-loading {
    position: absolute !important;

    inset: 0 !important;

    z-index: 80 !important;
}


/* =========================================================
   CELULAR FISICAMENTE EM RETRATO

   O aparelho continua em retrato,
   mas o Wala Player é girado para landscape.
========================================================= */

@media (orientation: portrait) {

    .player-wrap.wala-player.wala-fullscreen {
        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        /*
         * Depois de girar 90 graus:
         *
         * altura física da tela vira largura
         * largura física vira altura
         */

        width: 100dvh !important;
        height: 100vw !important;

        transform:
            translate(-50%, -50%)
            rotate(90deg) !important;

        transform-origin:
            center center !important;
    }

}


/* =========================================================
   CELULAR EM LANDSCAPE

   Se o aparelho já estiver deitado,
   não precisamos simular rotação.
========================================================= */

@media (orientation: landscape) {

    .player-wrap.wala-player.wala-fullscreen {
        top: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        transform: none !important;
    }

}


/* =========================================================
   AJUSTES DOS CONTROLES NO CELULAR FULLSCREEN
========================================================= */

@media (max-width: 600px) {

    .player-wrap.wala-player.wala-fullscreen
    .wala-controls {
        padding:
            42px
            max(12px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left)) !important;
    }


    .player-wrap.wala-player.wala-fullscreen
    .wala-center-play {
        width: 58px;
        height: 58px;
    }


    .player-wrap.wala-player.wala-fullscreen
    .wala-control-button,

    .player-wrap.wala-player.wala-fullscreen
    .wala-fullscreen {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

}


/* =========================================================
   REMOVE ARREDONDAMENTO DO PLAYER EM FULLSCREEN
========================================================= */

.player-card:has(
    .wala-player.wala-fullscreen
) {
    border-radius: 0 !important;
}

/* =========================================
   DEAD CITY — IMAGEM MAIOR NO FULLSCREEN
========================================= */

.wala-fullscreen .dead-city-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PADRÃO */
.wala-fullscreen .video-com-zoom {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    transform: scale(1.30) !important;
    transform-origin: center center !important;
}


/* CELULARES MÉDIOS */
@media (max-width: 430px) {
    .wala-fullscreen .video-com-zoom {
        transform: scale(1.55) !important;
    }
}

/* CELULARES GRANDES */
@media (max-width: 480px) {
    .wala-fullscreen .video-com-zoom {
        transform: scale(1.55) !important;
    }
}


/* CELULARES PEQUENOS */
@media (max-width: 375px) {
    .wala-fullscreen .video-com-zoom {
        transform: scale(1.50) !important;
    }
}


/* TELAS MUITO PEQUENAS */
@media (max-width: 340px) {
    .wala-fullscreen .video-com-zoom {
        transform: scale(1.60) !important;
    }
}