:root{
    --vazio:#03070b;
    --fundo:#071019;
    --grafite:#101820;
    --metal:#18232d;

    --azul-escuro:#153248;
    --azul:#4d8fb8;
    --azul-luz:#b9e7ff;
    --azul-gelo:#dff6ff;

    --ciano:#00f0ff;
    --ciano-luz:#a8fbff;

    --alerta:#ff6a00;
    --alerta-luz:#ffad38;
    --alerta-claro:#ffd08b;

    --texto:#eef7fb;
    --texto-suave:rgba(238,247,251,.74);
    --texto-fraco:rgba(238,247,251,.42);

    --largura-maxima:1280px;
}

*,*::before,*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background:var(--vazio);
    color-scheme:dark;
}

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

body{
    overflow-x:hidden;

    background:
        radial-gradient(circle at 50% -12%,rgba(93,161,205,.16),transparent 34%),
        radial-gradient(circle at 84% 10%,rgba(255,106,0,.07),transparent 26%),
        linear-gradient(
            to bottom,
            #071019 0%,
            #09131d 22%,
            #0b141c 48%,
            #081018 72%,
            #04080d 100%
        );

    color:var(--texto);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img,svg,canvas{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
}

::selection{
    color:#071019;
    background:var(--azul-luz);
}


/* ==========================================================
   ESTRUTURA GERAL
   ========================================================== */

main{
    width:100%;
}

main>section{
    position:relative;

    width:min(
        calc(100% - 40px),
        var(--largura-maxima)
    );

    margin:0 auto;

    padding:112px 0;
}

main>section+section{
    border-top:
        1px solid
        rgba(185,231,255,.07);
}


/* ==========================================================
   TOPO
   ========================================================== */

#topo{
    position:sticky;
    top:0;
    z-index:100;

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

    gap:30px;

    min-height:66px;

    padding:
        0
        max(
            24px,
            calc((100vw - var(--largura-maxima))/2)
        );

    border-bottom:
        1px solid
        rgba(185,231,255,.10);

    background:
        linear-gradient(
            to bottom,
            rgba(3,7,11,.96),
            rgba(7,16,25,.86)
        );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.marca-serie a{
    color:var(--azul-gelo);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:14px;
    font-weight:700;

    letter-spacing:.14em;

    text-decoration:none;
}

#menu-principal{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    flex-wrap:wrap;

    gap:22px;
}

#menu-principal a{
    position:relative;

    padding:5px 0;

    color:var(--texto-fraco);

    font-size:9px;
    font-weight:600;

    letter-spacing:.16em;

    text-decoration:none;
}

#menu-principal a::after{
    content:"";

    position:absolute;

    left:0;
    right:100%;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            to right,
            var(--azul-luz),
            var(--alerta)
        );

    transition:right .18s ease;
}

#menu-principal a:hover{
    color:var(--texto);
}

#menu-principal a:hover::after{
    right:0;
}


/* ==========================================================
   HERO
   ========================================================== */

#livro{
    min-height:
        calc(100vh - 66px);

    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(320px,.95fr)
        minmax(0,.75fr);

    align-items:center;

    gap:60px;
}

#livro::before{
    content:"";

    position:absolute;

    width:820px;
    height:820px;

    left:50%;
    top:46%;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(131,206,248,.16),
            rgba(33,85,118,.08) 34%,
            rgba(255,106,0,.035) 54%,
            transparent 70%
        );

    pointer-events:none;
}

.livro-identificacao,
.livro-apresentacao{
    position:relative;
    z-index:1;
}

.livro-identificacao .serie,
.livro-identificacao .volume{
    margin:0;

    color:var(--azul-luz);

    font-size:9px;

    letter-spacing:.22em;
}

.livro-identificacao .volume{
    margin-top:8px;

    color:var(--texto-fraco);
}

#titulo-prece-final{
    margin:
        20px
        0
        14px;

    color:var(--azul-gelo);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            50px,
            7.2vw,
            106px
        );

    font-weight:500;

    line-height:.88;

    letter-spacing:-.045em;

    text-shadow:
        0 0 30px
            rgba(119,203,248,.16),

        0 3px 0
            rgba(0,0,0,.35);
}

#titulo-prece-final span{
    display:block;

    margin-top:8px;

    color:var(--alerta-claro);

    font-size:.40em;

    line-height:1;

    letter-spacing:.10em;

    text-transform:uppercase;
}

.livro-identificacao .autor{
    margin:0;

    color:var(--texto-suave);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:16px;

    letter-spacing:.12em;
}

.capa-principal{
    position:relative;
    z-index:2;

    margin:0;

    justify-self:center;

    width:min(100%,390px);
}

.capa-principal .placeholder-imagem{
    aspect-ratio:2/3;

    overflow:hidden;

    border:
        1px solid
        rgba(185,231,255,.24);

    background:
        linear-gradient(
            145deg,
            rgba(31,61,85,.78),
            rgba(11,22,31,.92) 46%,
            rgba(255,106,0,.10)
        );

    box-shadow:
        0 35px 90px
            rgba(0,0,0,.52),

        0 0 80px
            rgba(70,161,214,.10),

        0 0 45px
            rgba(255,106,0,.045);
}

.capa-principal .placeholder-imagem img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.capa-principal figcaption{
    margin-top:12px;

    color:var(--texto-fraco);

    font-size:8px;

    letter-spacing:.16em;

    text-align:center;
    text-transform:uppercase;
}

.livro-apresentacao p{
    margin:
        0
        0
        24px;

    color:var(--texto-suave);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            17px,
            2vw,
            22px
        );

    line-height:1.7;
}

.livro-apresentacao a{
    display:inline-flex;
    align-items:center;

    min-height:42px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(185,231,255,.30);

    background:
        rgba(54,124,164,.08);

    color:var(--azul-gelo);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;

    text-decoration:none;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.livro-apresentacao a:hover{
    border-color:
        rgba(255,173,56,.70);

    background:
        rgba(255,106,0,.10);

    color:#fff;
}


/* ==========================================================
   CABEÇALHOS DE SEÇÃO
   ========================================================== */

section>header{
    max-width:760px;

    margin-bottom:48px;
}

section>header>p{
    margin:
        0
        0
        7px;

    color:var(--azul);

    font-size:8px;

    letter-spacing:.20em;
}

section>header>h2{
    margin:0;

    color:var(--azul-gelo);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            34px,
            5vw,
            64px
        );

    font-weight:500;

    line-height:1.05;
}

section>header>h2+p{
    margin-top:16px;

    color:var(--texto-suave);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:17px;

    line-height:1.7;

    letter-spacing:normal;
}


/* ==========================================================
   TEXTO / DADOS
   ========================================================== */

.universo-texto{
    max-width:680px;
}

.universo-texto p{
    margin:
        0
        0
        18px;

    color:var(--texto-suave);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:17px;

    line-height:1.8;
}

.universo-texto strong{
    color:var(--azul-gelo);
}

.universo-dados{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}

.universo-dados article{
    min-height:90px;

    padding:18px;

    border:
        1px solid
        rgba(125,199,240,.13);

    background:
        linear-gradient(
            145deg,
            rgba(13,29,41,.66),
            rgba(7,16,24,.56)
        );

    box-shadow:
        inset
        0
        0
        22px
        rgba(84,167,210,.025);
}

.universo-dados span{
    display:block;

    margin-bottom:11px;

    color:var(--texto-fraco);

    font-size:7px;

    letter-spacing:.17em;
}

.universo-dados strong{
    color:var(--azul-luz);

    font-size:12px;

    letter-spacing:.10em;
}


/* ==========================================================
   UNIVERSO
   ========================================================== */

#universo,
#fajr-kawn{
    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:
        45px
        70px;

    align-items:start;
}

#universo>header,
#fajr-kawn>header{
    grid-column:1/-1;
}

.imagem-universo{
    grid-column:1/-1;

    margin:
        18px
        0
        0;
}

.imagem-universo .placeholder-imagem{
    min-height:380px;

    overflow:hidden;

    border:
        1px solid
        rgba(185,231,255,.12);

    background:
        linear-gradient(
            120deg,
            rgba(25,61,84,.54),
            rgba(11,23,32,.52),
            rgba(255,106,0,.08)
        );
}

.imagem-universo .placeholder-imagem img{
    width:100%;
    height:100%;

    min-height:380px;

    object-fit:cover;
}

.imagem-universo figcaption{
    margin-top:10px;

    color:var(--texto-fraco);

    font-size:8px;

    letter-spacing:.14em;

    text-transform:uppercase;
}


/* ==========================================================
   FAJR KAWN
   ========================================================== */

#fajr-kawn::before{
    content:"";

    position:absolute;

    width:560px;
    height:560px;

    right:-110px;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,121,12,.12),
            rgba(255,106,0,.04) 36%,
            transparent 68%
        );

    pointer-events:none;
}


/* ==========================================================
   GALERIA
   ========================================================== */

.galeria-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px;
}

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

.galeria-grid figure{
    margin:0;
}

.galeria-grid .placeholder-imagem{
    min-height:300px;

    overflow:hidden;

    border:
        1px solid
        rgba(185,231,255,.12);

    background:
        linear-gradient(
            135deg,
            rgba(30,69,93,.46),
            rgba(9,20,29,.78),
            rgba(255,106,0,.06)
        );
}

.galeria-grid .placeholder-imagem img{
    width:100%;
    height:100%;

    min-height:300px;

    object-fit:cover;
}

.galeria-grid figcaption{
    padding-top:10px;

    color:var(--texto-fraco);

    font-size:8px;

    letter-spacing:.11em;

    text-transform:uppercase;
}


/* ==========================================================
   EXPERIÊNCIA
   ========================================================== */

#experiencia{
    width:100%;
    max-width:none;

    padding:
        120px
        max(
            20px,
            calc((100vw - var(--largura-maxima))/2)
        );

    background:
        linear-gradient(
            to bottom,
            rgba(4,10,15,.06),
            rgba(4,12,18,.48),
            rgba(2,7,11,.78)
        );
}


/* ==========================================================
   TERMINAL FAJR
   ========================================================== */

#terminal-fajr{
    position:relative;

    overflow:hidden;

    max-width:1120px;

    margin:0 auto;

    border:
        1px solid
        rgba(118,201,244,.34);

    background:
        radial-gradient(
            circle at 50% 36%,
            rgba(32,104,145,.16),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            rgba(5,18,27,.97),
            rgba(3,10,15,.99)
        );

    box-shadow:
        inset
        0
        0
        56px
        rgba(63,165,218,.045),

        0
        24px
        80px
        rgba(0,0,0,.52);
}

#terminal-fajr::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:.11;

    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(137,215,255,.12) 0,
            rgba(137,215,255,.12) 1px,
            transparent 1px,
            transparent 4px
        );
}

#terminal-fajr::after{
    content:"";

    position:absolute;

    inset:14px;

    z-index:1;

    border:
        1px solid
        rgba(122,205,247,.055);

    pointer-events:none;
}

.terminal-cabecalho,
#interface-sga,
#interface-eridia{
    position:relative;
    z-index:2;
}

.terminal-cabecalho{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:
        22px
        28px;

    border-bottom:
        1px solid
        rgba(116,201,243,.18);
}

.terminal-cabecalho div{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.terminal-cabecalho span,
.idioma-original,
.traducao-sga,
.terminal-instrumentos span,
.terminal-telemetria span{
    color:
        rgba(137,211,247,.42);

    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    letter-spacing:.18em;
}

.terminal-cabecalho strong,
.terminal-instrumentos strong,
.terminal-telemetria strong{
    color:
        rgba(184,231,255,.88);

    font-family:
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:.10em;
}

.traducao-sga{
    display:block;

    margin-top:3px;

    color:
        rgba(227,246,255,.70);

    font-size:6px;

    letter-spacing:.15em;
}

.idioma-original{
    display:block;

    color:
        rgba(105,187,228,.46);
}

.terminal-instrumentos,
.terminal-telemetria{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    border-bottom:
        1px solid
        rgba(116,201,243,.12);
}

.terminal-instrumentos article,
.terminal-telemetria article{
    min-height:72px;

    padding:
        15px
        18px;

    border-right:
        1px solid
        rgba(116,201,243,.08);
}


/* ==========================================================
   JANELA DO JOGO
   ========================================================== */

#janela-experiencia{
    position:relative;

    z-index:2;

    aspect-ratio:16/9;

    width:
        calc(100% - 56px);

    margin:
        28px auto;

    overflow:hidden;

    border:
        1px solid
        rgba(118,201,244,.30);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(28,88,123,.18),
            rgba(2,8,12,.98)
        );

    box-shadow:
        inset
        0
        0
        70px
        rgba(72,179,234,.035);
}

#fajr-canvas{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background:transparent;
}

#fajr-placeholder{
    position:absolute;

    inset:0;

    z-index:1;

    display:flex;

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

    color:
        rgba(149,219,252,.30);

    font-family:
        "Courier New",
        monospace;

    font-size:11px;

    letter-spacing:.24em;
}


/* ==========================================================
   COMANDOS
   ========================================================== */

.terminal-comandos{
    position:relative;
    z-index:2;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    padding:
        18px
        28px
        24px;
}

.terminal-comandos button,
.eridia-comandos button{
    min-height:36px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(112,196,238,.22);

    background:
        rgba(20,71,98,.13);

    color:
        rgba(173,225,251,.48);

    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    letter-spacing:.16em;
}

.terminal-comandos button:not(:disabled):hover{
    border-color:
        rgba(157,226,255,.70);

    background:
        rgba(38,109,145,.25);

    color:
        rgba(231,248,255,.96);
}


/* ==========================================================
   ERIDIA
   ========================================================== */

#interface-eridia{
    min-height:560px;

    padding:
        28px;

    color:var(--ciano);

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(0,240,255,.12),
            transparent 55%
        ),
        #01080a;
}

#terminal-fajr[data-estado="eridia"]{
    border-color:
        rgba(0,240,255,.50);

    box-shadow:
        inset
        0
        0
        70px
        rgba(0,240,255,.06),

        0
        0
        42px
        rgba(0,240,255,.07);
}

#terminal-fajr[data-estado="eridia"]::before{
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(0,240,255,.14) 0,
            rgba(0,240,255,.14) 1px,
            transparent 1px,
            transparent 4px
        );
}

.eridia-cabecalho{
    display:flex;

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

    gap:30px;

    padding:
        16px
        18px;

    border:
        1px solid
        rgba(0,240,255,.22);
}

.idioma-eridia,
.eridia-cabecalho strong,
.eridia-dados strong{
    color:
        rgba(125,250,255,.92);

    font-family:
        "Courier New",
        monospace;

    letter-spacing:.14em;
}

.idioma-eridia{
    font-size:8px;
}

.eridia-cabecalho strong{
    font-size:10px;
}

.eridia-dados{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:10px;

    margin-top:16px;
}

.eridia-dados article{
    min-height:86px;

    padding:17px;

    border:
        1px solid
        rgba(0,240,255,.18);

    background:
        rgba(0,240,255,.025);
}

.eridia-dados strong{
    display:block;

    margin-top:12px;

    font-size:15px;
}

.eridia-comandos{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;
}

.eridia-comandos button{
    border-color:
        rgba(0,240,255,.28);

    background:
        rgba(0,240,255,.025);

    color:
        rgba(128,248,255,.62);
}

.eridia-comandos button:not(:disabled):hover{
    border-color:
        rgba(0,240,255,.85);

    background:
        rgba(0,240,255,.10);

    color:#dfffff;
}


/* ==========================================================
   ESTADOS DE FALHA
   ========================================================== */

#terminal-fajr[data-estado="instavel"]{
    border-color:
        rgba(255,173,56,.38);
}

#terminal-fajr[data-estado="instavel"] .terminal-cabecalho strong,
#terminal-fajr[data-estado="instavel"] .terminal-instrumentos strong,
#terminal-fajr[data-estado="instavel"] .terminal-telemetria strong{
    color:
        rgba(255,190,105,.92);
}

#terminal-fajr[data-estado="falha"]{
    border-color:
        rgba(255,106,0,.64);

    box-shadow:
        inset
        0
        0
        64px
        rgba(255,106,0,.055),

        0
        0
        34px
        rgba(255,106,0,.08);
}

#terminal-fajr[data-estado="falha"]::before{
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(255,106,0,.14) 0,
            rgba(255,106,0,.14) 1px,
            transparent 1px,
            transparent 4px
        );
}


/* ==========================================================
   BOTÃO MOBILE
   ========================================================== */

#fajr-sair-mobile{
    display:none;
}


/* ==========================================================
   RECOMPENSA
   ========================================================== */

#recompensa-fajr{
    max-width:1120px;

    margin:
        45px
        auto
        0;

    padding:30px;

    border:
        1px solid
        rgba(185,231,255,.16);

    background:
        linear-gradient(
            145deg,
            rgba(9,25,35,.64),
            rgba(5,12,18,.72)
        );
}

#recompensa-fajr[hidden]{
    display:none!important;
}


/* ==========================================================
   ARQUIVO / AUTOR
   ========================================================== */

#arquivo{
    padding-bottom:130px;
}

.arquivo-livro{
    display:grid;

    grid-template-columns:
        minmax(130px,210px)
        minmax(0,1fr);

    gap:34px;

    align-items:center;

    max-width:700px;
}

.arquivo-livro figure{
    margin:0;
}

.arquivo-livro .placeholder-imagem{
    aspect-ratio:2/3;

    overflow:hidden;

    border:
        1px solid
        rgba(185,231,255,.18);

    background:
        linear-gradient(
            145deg,
            rgba(24,58,81,.54),
            rgba(9,20,29,.75),
            rgba(255,106,0,.07)
        );
}

.arquivo-livro .placeholder-imagem img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.arquivo-livro p{
    margin:
        0
        0
        8px;

    color:var(--texto-fraco);

    font-size:8px;

    letter-spacing:.15em;
}

.arquivo-livro h3{
    margin:
        6px
        0
        18px;

    color:var(--azul-gelo);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            36px,
            5.5vw,
            68px
        );

    font-weight:500;

    line-height:1;
}

.arquivo-navegacao{
    display:flex;

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

    gap:20px;

    margin-top:60px;

    padding-top:22px;

    border-top:
        1px solid
        rgba(185,231,255,.10);
}

.arquivo-navegacao span,
.arquivo-navegacao a{
    color:var(--texto-fraco);

    font-size:8px;

    letter-spacing:.15em;
}

.arquivo-navegacao a{
    color:var(--azul-luz);

    text-decoration:none;
}


/* ==========================================================
   RODAPÉ
   ========================================================== */

#rodape{
    padding:
        35px
        max(
            20px,
            calc((100vw - var(--largura-maxima))/2)
        );

    border-top:
        1px solid
        rgba(185,231,255,.09);

    background:
        rgba(3,8,12,.84);
}

#rodape nav{
    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:20px;
}

#rodape nav a{
    color:var(--texto-fraco);

    font-size:7px;

    letter-spacing:.14em;

    text-decoration:none;
}

#rodape p{
    margin:0;

    color:
        rgba(222,239,247,.32);

    font-size:7px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.placeholder-imagem{
    position:relative;

    overflow:hidden;
}


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

@media(max-width:980px){

    #topo{
        align-items:flex-start;

        flex-direction:column;

        gap:10px;

        padding-top:15px;
        padding-bottom:15px;
    }

    #livro{
        min-height:auto;

        grid-template-columns:
            1fr
            minmax(280px,420px);

        gap:45px;
    }

    .livro-apresentacao{
        grid-column:1/-1;

        max-width:720px;
    }

    #universo,
    #fajr-kawn{
        grid-template-columns:1fr;
    }

    #universo>header,
    #fajr-kawn>header,
    .imagem-universo{
        grid-column:auto;
    }

    .personagens-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


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

@media(max-width:720px){

    main>section{
        width:
            calc(100% - 28px);

        padding:
            78px
            0;
    }

    #topo{
        position:relative;
    }

    #menu-principal{
        justify-content:flex-start;

        gap:
            10px
            16px;
    }

    #livro{
        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:34px;
    }

    .livro-identificacao{
        order:1;
    }

    .capa-principal{
        order:2;

        width:
            min(
                80vw,
                350px
            );
    }

    .livro-apresentacao{
        order:3;
    }

    #titulo-prece-final{
        font-size:
            clamp(
                48px,
                17vw,
                82px
            );
    }

    .universo-dados{
        grid-template-columns:1fr;
    }

    .imagem-universo .placeholder-imagem,
    .imagem-universo .placeholder-imagem img{
        min-height:260px;
    }

    .galeria-grid,
    .personagens-grid{
        grid-template-columns:1fr;
    }

    .galeria-grid .placeholder-imagem,
    .galeria-grid .placeholder-imagem img{
        min-height:240px;
    }

    #experiencia{
        padding:
            80px
            14px;
    }

    .terminal-cabecalho{
        flex-direction:column;

        align-items:flex-start;

        padding:18px;
    }

    .terminal-instrumentos,
    .terminal-telemetria,
    .eridia-dados{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    #janela-experiencia{
        width:
            calc(100% - 24px);

        margin:
            12px
            auto;
    }

    .terminal-comandos{
        padding:15px;
    }

    .arquivo-livro{
        grid-template-columns:
            minmax(110px,150px)
            minmax(0,1fr);

        gap:20px;
    }

    .arquivo-navegacao{
        align-items:flex-start;

        flex-direction:column;
    }


    /* ======================================================
       EXPERIÊNCIA MOBILE FULLSCREEN
       ====================================================== */

    body.fajr-mobile-ativo{
        overflow:hidden;

        overscroll-behavior:none;

        touch-action:none;
    }

    body.fajr-mobile-ativo #experiencia{
        position:fixed;

        inset:0;

        z-index:10000;

        width:100vw;
        max-width:none;

        height:100vh;
        height:100dvh;

        margin:0;
        padding:0;

        background:var(--vazio);
    }

    body.fajr-mobile-ativo #experiencia>header,
    body.fajr-mobile-ativo #recompensa-fajr{
        display:none!important;
    }

    body.fajr-mobile-ativo #terminal-fajr{
        position:absolute;

        inset:0;

        display:flex;

        flex-direction:column;

        width:100%;
        max-width:none;

        height:100%;

        margin:0;

        border:0;
        border-radius:0;

        box-shadow:none;
    }

    body.fajr-mobile-ativo #terminal-fajr::after{
        inset:4px;
    }

    body.fajr-mobile-ativo .terminal-cabecalho{
        flex:0 0 auto;

        flex-direction:row;

        align-items:center;

        min-height:50px;

        padding:
            calc(7px + env(safe-area-inset-top))
            calc(82px + env(safe-area-inset-right))
            7px
            calc(12px + env(safe-area-inset-left));
    }

    body.fajr-mobile-ativo .terminal-cabecalho div:last-child{
        display:none;
    }

    body.fajr-mobile-ativo .terminal-cabecalho span{
        font-size:6px;
    }

    body.fajr-mobile-ativo .terminal-cabecalho strong{
        font-size:8px;
    }

    body.fajr-mobile-ativo #interface-sga,
    body.fajr-mobile-ativo #interface-eridia{
        flex:1 1 auto;

        min-height:0;
    }

    body.fajr-mobile-ativo #interface-sga{
        display:flex;

        flex-direction:column;
    }

    body.fajr-mobile-ativo .terminal-instrumentos{
        flex:0 0 auto;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.fajr-mobile-ativo .terminal-instrumentos article{
        min-height:56px;

        padding:
            8px
            10px;
    }

    body.fajr-mobile-ativo .terminal-instrumentos strong{
        font-size:8px;
    }

    body.fajr-mobile-ativo #janela-experiencia{
        flex:1 1 auto;

        width:100%;
        height:auto;

        min-height:0;

        aspect-ratio:auto;

        margin:0;

        border:0;
    }

    body.fajr-mobile-ativo #fajr-canvas{
        width:100%;
        height:100%;

        touch-action:none;
    }

    body.fajr-mobile-ativo .terminal-telemetria{
        flex:0 0 auto;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.fajr-mobile-ativo .terminal-telemetria article{
        min-height:50px;

        padding:
            7px
            9px;
    }

    body.fajr-mobile-ativo .terminal-comandos{
        flex:0 0 auto;

        gap:4px;

        padding:
            7px
            calc(8px + env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom))
            calc(8px + env(safe-area-inset-left));
    }

    body.fajr-mobile-ativo .terminal-comandos button{
        flex:
            1
            1
            calc(33.333% - 4px);

        min-height:38px;

        padding:
            0
            7px;

        font-size:6px;
    }

    body.fajr-mobile-ativo #fajr-sair-mobile{
        position:absolute;

        top:
            calc(
                8px +
                env(safe-area-inset-top)
            );

        right:
            calc(
                8px +
                env(safe-area-inset-right)
            );

        z-index:50;

        display:block;

        min-height:32px;

        padding:
            0
            10px;

        border:
            1px solid
            rgba(185,231,255,.32);

        background:
            rgba(4,16,24,.86);

        color:
            rgba(220,245,255,.82);

        font-family:
            "Courier New",
            monospace;

        font-size:7px;

        letter-spacing:.13em;
    }

    body.fajr-mobile-ativo #interface-eridia{
        overflow:auto;

        padding:
            60px
            12px
            calc(12px + env(safe-area-inset-bottom));
    }

    body.fajr-mobile-ativo .eridia-dados{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


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

@media(max-width:430px){

    #menu-principal{
        gap:
            8px
            12px;
    }

    #menu-principal a{
        font-size:7px;
    }

    .terminal-instrumentos,
    .terminal-telemetria,
    .eridia-dados{
        grid-template-columns:1fr;
    }

    body.fajr-mobile-ativo .terminal-instrumentos,
    body.fajr-mobile-ativo .terminal-telemetria{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .arquivo-livro{
        grid-template-columns:1fr;
    }

    .arquivo-livro figure{
        width:160px;
    }

    body.fajr-mobile-ativo .terminal-comandos button{
        font-size:5.5px;
    }
}


/* ==========================================================
   MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;

        transition-duration:.01ms!important;

        animation-duration:.01ms!important;
    }
}