body {
    padding: 0;
    margin: 0;
}

/* Container do Unity, centralizado na tela */
#unity-container {
    position: absolute;
}

#unity-container.unity-desktop {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#unity-container.unity-mobile {
    width: 100%;
    height: 100%;
}

/* Fundo do canvas */
#unity-canvas {
    background: #ffffff;
}

.unity-mobile #unity-canvas {
    width: 100%;
    height: 100%;
}

/* Loading centralizado dentro do container */
#unity-loading-bar {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    display: none; /* Unity liga/desliga isso via JS */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --------- RODAPÉ RESPONSIVO --------- */

#unity-footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 4px 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    background: #ffffff;
}

.unity-mobile #unity-footer {
    display: none;
}

/* Logo (usa sua imagem webgl-logo.png / i9Ação) */
#unity-webgl-logo {
    width: 123px;
    height: 38px;
    background: url('webgl-logo.png') no-repeat left center;
    background-size: contain;
    flex-shrink: 0;
}

/* Título do jogo */
#unity-build-title {
    margin: 0;
    font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    flex: 1 1 auto;
}

/* Botão de fullscreen (texto ⛶) */
#unity-fullscreen-button {
    min-width: 38px;
    height: 32px;

    padding: 6px 10px;
    border: 0;
    border-radius: 8px;

    font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #040b4b;
    color: #ffffff;
    cursor: pointer;

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

    flex-shrink: 0;
}

#unity-fullscreen-button:hover {
    filter: brightness(1.05);
}

/* Telas de desktop estreitas (janela estreita) – reorganiza em coluna */
@media only screen and (max-width: 900px) {
    #unity-footer {
        flex-direction: column;
        align-items: center;
    }

    #unity-webgl-logo {
        margin-bottom: 2px;
    }

    #unity-build-title {
        font-size: 14px;
        white-space: normal; /* permite quebrar em 2 linhas */
    }

    #unity-fullscreen-button {
        align-self: center;
    }
}

/* Aviso mobile */
#unity-mobile-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none;
}

/* Responsivo: tamanhos padrão do canvas (portrait/landscape) */
canvas,
.game-landscape {
    height: 218px;
    width: 388px;
}

canvas,
.game-portrait {
    height: 388px;
    width: 218px;
}

@media only screen and (min-width: 1024px) {
    canvas,
    .game-landscape {
        height: 307px;
        width: 546px;
    }

    canvas,
    .game-portrait {
        height: 546px;
        width: 307px;
    }
}

@media only screen and (min-width: 1440px) {
    canvas,
    .game-landscape {
        height: 432px;
        width: 768px;
    }

    canvas,
    .game-portrait {
        height: 768px;
        width: 432px;
    }
}

/* Ajuste extra para telas MUITO pequenas (principalmente mobile) */
@media only screen and (max-width: 480px) {
    #unity-logo {
        width: 60vw;
    }

    #unity-progress-bar-empty {
        width: 70vw;
    }
}

/* Deixa o jogo grande no desktop mantendo proporção 9:16 */
.unity-desktop #unity-canvas.game-portrait {
    aspect-ratio: 9 / 16;
    height: 90vh;
    width: auto;
}

/* --------- ALTURA PEQUENA (ESCONDE LOGO, EVITA SOBREPOR) --------- */
/* Se a altura da janela for pequena (ex.: ≤ 700px),
   o rodapé vira um grid: texto em uma coluna, botão na outra. */
@media only screen and (max-height: 900px) {
    /* Rodapé vira grid: 1 coluna para o texto, 1 para o botão */
    #unity-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 8px;
        justify-content: center;
    }

    /* Esconde o logo para ganhar espaço vertical */
    #unity-webgl-logo {
        display: none;
    }

    /* Texto pode quebrar linha, mas fica na coluna 1 sem ir "por baixo" do botão */
    #unity-build-title {
        grid-column: 1;
        margin: 0;
        white-space: normal;      /* permite múltiplas linhas */
        text-align: center;
        font-size: 14px;
    }

    /* Botão fica na coluna 2, posição normal (sem absolute) */
    #unity-fullscreen-button {
        grid-column: 2;
        position: static;
        transform: none;
    }
}
/* ===== LAYOUT ESPECIAL PARA FULLSCREEN (vertical e horizontal) ===== */

/* Quando o app está em fullscreen, marcamos o body com essa classe via JS */
body.unity-fullscreen-active {
    background: #000; /* deixa o fundo preto por trás do canvas */
}

/* Container do Unity ocupando a tela inteira em fullscreen */
body.unity-fullscreen-active #unity-container {
    position: fixed !important;
    top: 0;
    left: 0;
    transform: none !important;
    margin: 0;
    width: 100vw;
    height: 100vh;
}

/* Canvas ocupa toda a tela, independente de ser vertical ou horizontal */
body.unity-fullscreen-active #unity-canvas {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: auto !important; /* ignora aquele 9:16 para fullscreen */
}

/* Se quiser, pode esconder o rodapé no fullscreen */
body.unity-fullscreen-active #unity-footer {
    display: none;
}