:root {
    color-scheme: dark;
    --fundo: #08110c;
    --painel: #102218;
    --borda: #31533d;
    --texto: #f4f1d0;
    --texto-suave: #a8b99f;
    --verde: #6cdb7c;
    --amarelo: #f5cf57;
    --vermelho: #f06a65;
    --grama-lobby: #397440;
    --grama-escura: #24492a;
    --contorno-lobby: #172b20;
    font-family: "Courier New", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    min-width: 320px;
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    color: var(--texto);
    background: var(--fundo);
}

button { font: inherit; }

/* Estrutura da partida */
.aplicacao-jogo {
    --espaco-reservado-controles: 116px;
    width: min(100%, 1440px);
    height: 100vh;
    min-height: 100vh;
    margin: 0 auto;
    padding: 14px 20px 18px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    font-family: "Courier New", Consolas, monospace;
}

.controles {
    width: 100%;
    background: var(--painel);
    border: 3px solid var(--borda);
    border-radius: 0;
    box-shadow: 5px 5px 0 #020704;
}

.controles-contexto {
    display: flex;
    align-items: center;
    gap: 10px;
}

.controles-contexto strong,
.controles-contexto small { display: block; }

.controles-contexto strong {
    font-size: .84rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.controles-contexto small {
    margin-top: 3px;
    color: var(--texto-suave);
    font-size: .68rem;
}

.palco-com-torres {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    align-items: center;
    gap: 0;
}

.palco-jogo {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    justify-items: end;
}

.posto-comando-lateral {
    position: absolute;
    top: 50%;
    left: 4px;
    z-index: 3;
    width: 176px;
    min-height: 250px;
    max-height: calc(100% - 24px);
    padding: 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 9px;
    overflow: auto;
    pointer-events: none;
    color: #fff36a;
    background: #0c1c13;
    border: 3px solid #355b40;
    box-shadow: 5px 5px 0 #020704;
    transform: translateY(-50%);
}

.posto-boosts-cabecalho {
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 3px solid #294535;
}

.posto-boosts-cabecalho strong,
.posto-boosts-cabecalho small {
    display: block;
    text-align: center;
    text-transform: uppercase;
}

.posto-boosts-cabecalho strong {
    font-size: .68rem;
    letter-spacing: .08em;
    text-shadow: 2px 2px 0 #020704;
}

.posto-boosts-cabecalho small {
    margin-top: 3px;
    color: #8ff0aa;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.posto-boosts-lista {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.posto-boosts-vazio {
    margin: 2px 0;
    padding: 8px 6px;
    color: #779083;
    background: #09160f;
    border: 2px dashed #294535;
    font-size: .54rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
}

.posto-boost-item {
    min-width: 0;
    padding: 6px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    color: #f4f1d0;
    background: #102218;
    border: 2px solid #477052;
    box-shadow: 2px 2px 0 #020704;
}

.posto-boost-icone {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #07120c;
    background: #8ff0aa;
    border: 2px solid #c5f8d0;
    font-size: .58rem;
    font-weight: 900;
    box-shadow: 2px 2px 0 #020704;
}

.posto-boost-texto,
.posto-boost-texto strong,
.posto-boost-texto small {
    min-width: 0;
    display: block;
}

.posto-boost-texto strong {
    overflow: hidden;
    color: #f4f1d0;
    font-size: .52rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.posto-boost-texto small {
    margin-top: 3px;
    color: #8ff0aa;
    font-size: .48rem;
    font-weight: 800;
    line-height: 1.2;
}

.posto-boost-contador {
    padding: 3px 4px;
    color: #fff36a;
    background: #09160f;
    border: 1px solid #4e714f;
    font-size: .48rem;
}

.posto-boost-item[data-tipo="creditos"] .posto-boost-icone {
    background: #fff36a;
    border-color: #fff9ad;
}

.posto-boost-item[data-tipo="dano"] .posto-boost-icone {
    color: #fff;
    background: #c94d4d;
    border-color: #ff9991;
}

.posto-boost-item[data-tipo="alcance"] .posto-boost-icone {
    background: #73c8f2;
    border-color: #bcecff;
}

.posto-boost-temporario {
    padding-top: 8px;
    border-top: 3px solid #294535;
}

.posto-boost-secao {
    margin-bottom: 5px;
    display: block;
    color: #d58aff;
    font-size: .49rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.posto-boost-fliperama {
    position: relative;
    padding-bottom: 18px;
    border-color: #553565;
    opacity: .58;
}

.posto-boost-temporario {
    display: grid;
    gap: 6px;
}

.posto-boost-fliperama[data-estado="ativo"] {
    background: #291737;
    border-color: #d58aff;
    opacity: 1;
}

.posto-boost-fliperama .posto-boost-icone {
    color: #2c1740;
    background: #d58aff;
    border-color: #efc5ff;
}

.posto-boost-barra {
    position: absolute;
    right: 6px;
    bottom: 5px;
    left: 6px;
    height: 9px;
    display: grid;
    gap: 1px;
    background: #07120c;
}

.posto-boost-barra i {
    width: 0;
    height: 4px;
    display: block;
    background: #fff36a;
    transition: width .15s linear;
}

.posto-boost-barra .barra-boost-dano {
    background: #8fc9ff;
}

.posto-pulso-temporal {
    padding-top: 8px;
    border-top: 3px solid #294535;
    pointer-events: auto;
}

.posto-pulso-temporal[hidden] { display: none; }

.botao-pulso-temporal {
    width: 100%;
    min-width: 0;
    padding: 7px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: #fff7cf;
    background: #2d2145;
    border: 2px solid #b56bd2;
    box-shadow: 2px 2px 0 #020704;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.botao-pulso-temporal:hover:not(:disabled),
.botao-pulso-temporal:focus-visible:not(:disabled) {
    background: #493263;
    border-color: #f0bdff;
    transform: translate(-1px, -1px);
}

.botao-pulso-temporal:disabled {
    color: #9387a1;
    background: #1b1922;
    border-color: #4d4457;
    cursor: not-allowed;
}

.posto-pulso-icone {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #24152f;
    background: #d58aff;
    border: 2px solid #f4ceff;
    font-size: .78rem;
}

.botao-pulso-temporal:disabled .posto-pulso-icone {
    background: #766781;
    border-color: #9a8ba4;
}

.posto-pulso-texto,
.posto-pulso-texto strong,
.posto-pulso-texto small {
    min-width: 0;
    display: block;
}

.posto-pulso-texto strong {
    font-size: .53rem;
    line-height: 1.25;
    text-transform: uppercase;
}

.posto-pulso-texto small {
    margin-top: 3px;
    color: #d9a8ec;
    font-size: .46rem;
    font-weight: 800;
    line-height: 1.25;
}

.palco-com-torres canvas {
    position: relative;
    z-index: 1;
    max-height: calc(100vh - var(--espaco-reservado-controles));
    box-shadow: 0 8px 0 #020704;
}

.seletor-torres {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: calc(100vh - var(--espaco-reservado-controles));
    padding: 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    color: var(--texto);
    background: #102218;
    border: 3px solid #477052;
    box-shadow: 5px 5px 0 #020704;
}

.seletor-torres-cabecalho {
    padding: 8px 8px 10px;
    border-bottom: 3px solid #294535;
}

.seletor-torres-cabecalho strong,
.seletor-torres-cabecalho small {
    display: block;
}

.seletor-torres-cabecalho strong {
    color: #fff36a;
    font-size: .86rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #020704;
}

.seletor-torres-cabecalho small {
    margin-top: 5px;
    color: #8ff0aa;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.seletor-torres-lista {
    min-height: 0;
    padding: 2px 5px 5px 2px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #6cdb7c #09160f;
    scrollbar-width: thin;
}

.seletor-torres-lista .botao-construcao {
    width: 100%;
    min-height: 72px;
    padding: 9px 10px;
    flex: 0 0 auto;
    overflow-wrap: anywhere;
    font-size: .68rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
}

.menu-partida {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    font-family: "Courier New", Consolas, monospace;
}

.botao-menu-partida {
    position: relative;
    width: 54px;
    height: 50px;
    padding: 9px 11px;
    display: grid;
    align-content: center;
    gap: 5px;
    color: #f4f1d0;
    background: #102218;
    border: 3px solid #6cdb7c;
    box-shadow: 4px 4px 0 #020704;
    cursor: pointer;
}

.botao-menu-partida::after {
    position: absolute;
    top: 50%;
    right: calc(100% + 9px);
    min-width: 42px;
    padding: 5px 7px;
    content: attr(data-atalho);
    color: #fff36a;
    background: #102218;
    border: 2px solid #6cdb7c;
    box-shadow: 2px 2px 0 #020704;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
}

.botao-menu-partida span {
    width: 100%;
    height: 4px;
    display: block;
    background: currentColor;
    box-shadow: 1px 1px 0 #020704;
}

.botao-menu-partida:hover,
.botao-menu-partida[aria-expanded="true"] {
    color: #17240d;
    background: #fff36a;
    border-color: #fff9ad;
}

.botao-menu-partida:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: 4px;
}

.painel-menu-partida {
    position: absolute;
    top: 60px;
    right: 0;
    width: min(300px, calc(100vw - 42px));
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    padding: 14px;
    color: var(--texto);
    background: #0b1911;
    border: 3px solid #477052;
    box-shadow: 6px 6px 0 #020704;
}

.painel-menu-titulo {
    margin-bottom: 12px;
    display: block;
    color: #8ff0aa;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.camada-tutorial-partida {
    position: fixed;
    inset: 0;
    z-index: 28;
    pointer-events: none;
}

.camada-tutorial-partida[hidden] { display: none; }

.painel-tutorial-partida {
    position: absolute;
    z-index: 1;
    left: 24px;
    bottom: 24px;
    width: min(470px, calc(100% - 48px));
    padding: 22px;
    pointer-events: auto;
    color: #f4f1d0;
    background: #102218;
    border: 4px solid #8ff0aa;
    box-shadow: 9px 9px 0 rgba(2, 7, 4, .88);
    font-family: "Courier New", Consolas, monospace;
}

.camada-tutorial-partida[data-passo="5"] .painel-tutorial-partida {
    top: 78px;
    bottom: auto;
}

.tutorial-partida-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #8ff0aa;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tutorial-partida-cabecalho strong {
    padding: 5px 7px;
    color: #18230d;
    background: #fff36a;
    border: 2px solid #fff9ad;
}

.painel-tutorial-partida h2 {
    margin: 15px 0 8px;
    color: #fff36a;
    font-size: 1.15rem;
    text-transform: uppercase;
}

.painel-tutorial-partida p {
    margin: 0;
    color: #dce8d6;
    font-size: .78rem;
    line-height: 1.55;
}

.acoes-tutorial-partida {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.acoes-tutorial-partida .botao { min-height: 46px; }

.tutorial-destaque {
    outline: 5px solid #fff36a;
    outline-offset: 5px;
    animation: pulso-tutorial 1s steps(2, end) infinite;
}

@keyframes pulso-tutorial {
    50% {
        outline-color: #8ff0aa;
        filter: brightness(1.18);
    }
}

.camada-resultado {
    position: fixed;
    inset: 0;
    z-index: 9;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(2, 7, 4, .82);
    backdrop-filter: blur(3px);
}

.camada-resultado[hidden] { display: none; }

.camada-confirmacao-desistencia,
.camada-confirmacao-compra-loja {
    position: fixed;
    inset: 0;
    z-index: 31;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(2, 7, 4, .88);
    backdrop-filter: blur(3px);
}

.camada-confirmacao-desistencia[hidden],
.camada-confirmacao-compra-loja[hidden] { display: none; }

.painel-confirmacao-desistencia,
.painel-confirmacao-compra-loja {
    width: min(590px, 100%);
    padding: 30px;
    color: #f4f1d0;
    background: #251013;
    border: 5px solid #df6c65;
    outline: 5px solid #020704;
    box-shadow: 12px 12px 0 rgba(2, 7, 4, .8);
    text-align: center;
    font-family: "Courier New", Consolas, monospace;
}

.selo-confirmacao-desistencia,
.selo-confirmacao-compra-loja {
    display: inline-block;
    padding: 7px 10px;
    color: #ffd27d;
    background: #4b231c;
    border: 2px solid #a95a3e;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.painel-confirmacao-desistencia h2,
.painel-confirmacao-compra-loja h2 {
    margin: 18px 0 12px;
    color: #ffffff;
    font-size: clamp(1.65rem, 6vw, 2.75rem);
    line-height: 1.05;
    text-shadow: 4px 4px 0 #020704;
    text-transform: uppercase;
}

.painel-confirmacao-desistencia p,
.painel-confirmacao-compra-loja p {
    max-width: 480px;
    min-height: 46px;
    margin: 0 auto 24px;
    color: #e2cdcb;
    font-size: .82rem;
    line-height: 1.6;
}

.acoes-confirmacao-desistencia,
.acoes-confirmacao-compra-loja {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.acoes-confirmacao-desistencia .botao,
.acoes-confirmacao-compra-loja .botao {
    min-height: 54px;
}

.painel-confirmacao-compra-loja {
    background: #10251b;
    border-color: #efc64b;
}

.selo-confirmacao-compra-loja {
    color: #fff1a8;
    background: #3b3216;
    border-color: #9d7e28;
}

.painel-confirmacao-compra-loja p { color: #dbe9d5; }

.botao-confirmar-compra-loja {
    color: #102617;
    background: #efc64b;
    border-color: #fff0a1;
}

.botao-cancelar-compra-loja {
    color: #e4eee2;
    background: #263f31;
    border-color: #63846e;
}

.botao-confirmar-desistencia,
.menu-partida-desistir {
    color: #ffe0dc;
    background: #642c2b;
    border-color: #bd5b55;
}

.botao-cancelar-desistencia {
    color: #15301d;
    background: #91dc62;
    border-color: #c9f08d;
}

.regiao-notificacoes-progresso {
    position: fixed;
    z-index: 45;
    top: 18px;
    right: 18px;
    width: min(390px, calc(100vw - 36px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.notificacao-progresso {
    padding: 13px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #f4f7dd;
    background: #10251b;
    border: 3px solid #6eb75d;
    outline: 3px solid #020704;
    box-shadow: 8px 8px 0 rgba(2, 7, 4, .58);
    font-family: "Courier New", Consolas, monospace;
    opacity: 0;
    transform: translateX(calc(100% + 30px));
    transition: opacity 180ms ease, transform 220ms ease;
}

.notificacao-progresso[data-tipo="conquista"] {
    background: #29200e;
    border-color: #efc64b;
}

.notificacao-progresso-visivel {
    opacity: 1;
    transform: translateX(0);
}

.notificacao-progresso-saindo {
    opacity: 0;
    transform: translateY(-12px);
}

.notificacao-progresso-icone {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #102617;
    background: #91dc62;
    border: 3px solid #c9f08d;
    font-size: 1.55rem;
    font-weight: 900;
}

.notificacao-progresso[data-tipo="conquista"] .notificacao-progresso-icone {
    background: #efc64b;
    border-color: #fff0a1;
}

.notificacao-progresso small,
.notificacao-progresso strong,
.notificacao-progresso p { display: block; }

.notificacao-progresso small {
    color: #a9d89b;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.notificacao-progresso[data-tipo="conquista"] small { color: #efc64b; }

.notificacao-progresso strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: .85rem;
}

.notificacao-progresso p {
    margin: 4px 0 0;
    color: #cbd8c7;
    font-size: .68rem;
    line-height: 1.4;
}

.camada-bonus-pos-boss {
    position: fixed;
    inset: 0;
    z-index: 20;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(2, 7, 4, .84);
}

.camada-bonus-pos-boss[hidden] { display: none; }

.camada-minigame-fliperama {
    position: fixed;
    inset: 0;
    z-index: 25;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(2, 7, 4, .9);
}

.camada-minigame-fliperama[hidden] { display: none; }

.painel-minigame-fliperama {
    width: min(820px, 100%);
    max-height: calc(100vh - 36px);
    padding: 20px;
    overflow-y: auto;
    color: #f4f1d0;
    background: #241433;
    border: 5px solid #d58aff;
    outline: 5px solid #020704;
    box-shadow: 12px 12px 0 rgba(2, 7, 4, .8);
    font-family: "Courier New", Consolas, monospace;
}

.cabecalho-minigame-fliperama {
    margin-bottom: 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.selo-minigame-fliperama {
    display: inline-block;
    padding: 5px 8px;
    color: #17240d;
    background: #fff36a;
    border: 2px solid #fff9ad;
    box-shadow: 2px 2px 0 #020704;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cabecalho-minigame-fliperama h2 {
    margin: 10px 0 3px;
    color: #ffffff;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1;
    text-shadow: 4px 4px 0 #020704;
    text-transform: uppercase;
}

.cabecalho-minigame-fliperama p {
    margin: 0;
    color: #d6bce2;
    font-size: .72rem;
}

.status-minigame-fliperama {
    display: grid;
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    gap: 8px;
}

.status-minigame-fliperama span {
    min-width: 92px;
    padding: 7px 9px;
    color: #bca5c8;
    background: #120b19;
    border: 3px solid #72498a;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-minigame-fliperama strong {
    margin-top: 4px;
    display: block;
    color: #fff36a;
    font-size: 1.15rem;
}

.status-minigame-fliperama em {
    font-style: normal;
}

.minigame-fliperama {
    width: 100%;
    height: auto;
    max-height: none;
    background: #07120c;
    border: 4px solid #6cdb7c;
    box-shadow: 6px 6px 0 #020704;
    image-rendering: pixelated;
    cursor: crosshair;
}

.minigame-fliperama[data-tipo="labirinto"] {
    cursor: default;
    border-color: #8fc9ff;
}

.controles-toque-labirinto {
    width: 190px;
    margin: 13px auto 0;
    display: none;
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(2, 56px);
    justify-content: center;
    gap: 7px;
    touch-action: none;
}

.controles-toque-labirinto[hidden] { display: none !important; }

.botao-direcao-labirinto {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #eaf8ff;
    background: #183c55;
    border-color: #72b8df;
    font-size: 1.2rem;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.botao-direcao-labirinto.botao-direcao-pressionado {
    color: #17240d;
    background: #fff36a;
    border-color: #fff9ad;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #030805;
}

.direcao-cima { grid-column: 2; grid-row: 1; }
.direcao-esquerda { grid-column: 1; grid-row: 2; }
.direcao-baixo { grid-column: 2; grid-row: 2; }
.direcao-direita { grid-column: 3; grid-row: 2; }

.instrucao-minigame-fliperama {
    margin-top: 13px;
    display: block;
    color: #d6bce2;
    font-size: .66rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 760px), (any-pointer: coarse) {
    .controles-toque-labirinto:not([hidden]) { display: grid; }
}

.painel-bonus-pos-boss {
    width: min(920px, 100%);
    padding: 28px;
    color: #f4f1d0;
    background: #0b2014;
    border: 5px solid #6cdb7c;
    outline: 5px solid #020704;
    box-shadow: 12px 12px 0 rgba(2, 7, 4, .78);
    text-align: center;
    font-family: "Courier New", Consolas, monospace;
}

.selo-bonus-pos-boss {
    display: inline-block;
    padding: 7px 11px;
    color: #17240d;
    background: #fff36a;
    border: 3px solid #fff9ad;
    box-shadow: 3px 3px 0 #020704;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.painel-bonus-pos-boss h2 {
    margin: 18px 0 7px;
    color: #ffffff;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1;
    text-shadow: 4px 4px 0 #020704;
    text-transform: uppercase;
}

.painel-bonus-pos-boss > p {
    margin: 0 auto 24px;
    color: #a9c8b1;
    font-size: .78rem;
    line-height: 1.5;
}

.opcoes-bonus-pos-boss {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.botao-bonus-pos-boss {
    min-height: 176px;
    padding: 18px 14px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    align-items: start;
    gap: 10px;
    color: #eaf8ed;
    background: #153923;
    border-color: #4f9e62;
    text-align: center;
}

.botao-bonus-pos-boss:hover:not(:disabled),
.botao-bonus-pos-boss:focus-visible {
    color: #17240d;
    background: #fff36a;
    border-color: #fff9ad;
}

.icone-bonus-pos-boss {
    min-width: 52px;
    min-height: 46px;
    padding: 10px 8px;
    display: grid;
    place-items: center;
    color: #fff36a;
    background: #07120c;
    border: 3px solid #6cdb7c;
    box-shadow: 3px 3px 0 #020704;
    font-size: 1rem;
    line-height: 1;
}

.botao-bonus-pos-boss:hover .icone-bonus-pos-boss,
.botao-bonus-pos-boss:focus-visible .icone-bonus-pos-boss {
    color: #07120c;
    background: #f4f1d0;
    border-color: #17240d;
}

.botao-bonus-pos-boss strong {
    font-size: .84rem;
    line-height: 1.25;
}

.botao-bonus-pos-boss small {
    color: #a9c8b1;
    font-size: .68rem;
    line-height: 1.5;
    text-transform: none;
}

.botao-bonus-pos-boss:hover small,
.botao-bonus-pos-boss:focus-visible small {
    color: #294535;
}

.painel-resultado {
    width: min(610px, 100%);
    padding: 30px;
    color: #f4f1d0;
    background: #200d10;
    border: 5px solid #d45f5d;
    outline: 5px solid #020704;
    box-shadow: 12px 12px 0 rgba(2, 7, 4, .78);
    text-align: center;
    font-family: "Courier New", Consolas, monospace;
}

.camada-resultado[data-estado="vitoria"] .painel-resultado {
    background: #0a301c;
    border-color: #70df91;
}

.selo-resultado {
    display: inline-block;
    padding: 7px 10px;
    color: #ffaaa6;
    background: #3c171b;
    border: 2px solid #8f3738;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.camada-resultado[data-estado="vitoria"] .selo-resultado {
    color: #9af0b3;
    background: #133e25;
    border-color: #388e55;
}

.painel-resultado h2 {
    margin: 18px 0 10px;
    color: #ffffff;
    font-size: clamp(2.4rem, 9vw, 4.3rem);
    line-height: .95;
    text-shadow: 5px 5px 0 #020704;
}

.painel-resultado p {
    max-width: 480px;
    min-height: 44px;
    margin: 0 auto 24px;
    color: #d4c2c1;
    font-size: .82rem;
    line-height: 1.55;
}

.camada-resultado[data-estado="vitoria"] .painel-resultado p { color: #c0dcc8; }

.acoes-resultado {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.camada-resultado[data-estado="derrota"] .acoes-resultado {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acoes-resultado .botao {
    min-height: 54px;
    padding-inline: 10px;
}

.botao-resultado-repetir {
    color: #ffe0cf;
    background: #5b2928;
    border-color: #a94c49;
}

.camada-resultado[data-estado="vitoria"] .botao-resultado-repetir {
    color: #e8f5ff;
    background: #21435a;
    border-color: #5f91ad;
}

.menu-partida-acao {
    width: 100%;
    margin-top: 8px;
    text-align: left;
}

.camada-configuracoes {
    position: fixed;
    inset: 0;
    z-index: 30;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(2, 7, 4, .78);
    backdrop-filter: blur(2px);
}

.camada-configuracoes[hidden] { display: none; }

.painel-configuracoes {
    width: min(430px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 20px;
    color: var(--texto);
    background: #0b1911;
    border: 5px solid #6cdb7c;
    outline: 5px solid #020704;
    box-shadow: 10px 10px 0 rgba(2, 7, 4, .72);
    font-family: "Courier New", Consolas, monospace;
}

.configuracoes-cabecalho {
    margin-bottom: 18px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 3px solid #294535;
}

.configuracoes-cabecalho small,
.configuracoes-rotulo {
    color: #8ff0aa;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.configuracoes-cabecalho h2 {
    margin: 4px 0 0;
    color: #fff36a;
    font-size: 1.35rem;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #020704;
}

.botao-fechar-configuracoes {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    background: #62302c;
    border-color: #c96f62;
    font-size: 1.35rem;
}

.configuracoes-grupo + .configuracoes-grupo {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 3px solid #294535;
}

.painel-configuracoes label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #c9d6c2;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

#valor-volume-musica,
#valor-volume-efeitos { color: #fff36a; }

#controle-volume-musica,
#controle-volume-efeitos {
    width: 100%;
    margin: 13px 0 7px;
    accent-color: #6cdb7c;
    cursor: pointer;
}

.configuracoes-grupo-aparencia {
    display: grid;
    gap: 8px;
}

.configuracoes-grupo-idioma {
    display: grid;
    gap: 10px;
}

.seletor-idiomas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.botao-idioma {
    min-height: 44px;
    padding: 8px 5px;
    color: #c9d6c2;
    background: #14261a;
    border-color: #405d49;
    font-size: .63rem;
    text-align: center;
}

.botao-idioma:hover,
.botao-idioma:focus-visible {
    color: #fff;
    border-color: #8ff0aa;
}

.botao-idioma-ativo {
    color: #132015;
    background: #fff36a;
    border-color: #fff8ad;
    box-shadow: inset 0 -4px 0 #c6a938;
}

.botao-idioma-ativo:hover,
.botao-idioma-ativo:focus-visible {
    color: #132015;
    border-color: #fff8ad;
}

.lobby-status em {
    font: inherit;
    font-style: normal;
}

.botao-silenciar {
    color: #ffe5a6;
    background: #49391a;
    border-color: #8f7332;
}

.botao-efeitos {
    color: #d9ecff;
    background: #17354f;
    border-color: #4f87ae;
}

body.modo-noturno .menu-principal {
    background-color: #13291d;
    background-blend-mode: multiply;
}

body.modo-noturno .menu-principal.tema-deserto {
    background-color: #4b3925;
}

body.modo-noturno .menu-principal.tema-artico {
    background-color: #294e62;
}

body.modo-noturno .menu-principal.tema-selva {
    background-color: #183d25;
}

body.modo-noturno .menu-principal.tema-temperada {
    background-color: #3a301f;
}

body.modo-noturno .menu-principal.tema-vulcanica {
    background-color: #211517;
}

body.modo-noturno .menu-principal.tema-pantano {
    background-color: #14271e;
}

body.modo-noturno .menu-principal.tema-primordial {
    background-color: #14291b;
}

body.modo-noturno .lobby-cenario {
    filter: brightness(.48) saturate(.78) hue-rotate(8deg);
}

canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    display: block;
    background: #397440;
    border: 4px solid #d9e8c9;
    border-radius: 0;
    box-shadow: 8px 8px 0 #020704;
    image-rendering: pixelated;
}

canvas.inimigo-sob-cursor {
    cursor: help;
}

canvas.fliperama-sob-cursor {
    cursor: pointer;
}

canvas.radio-sob-cursor {
    cursor: pointer;
}

.controles {
    min-height: 64px;
    padding: 9px 10px 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.controles-icone {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--verde);
    background: #0a1710;
    border: 2px solid var(--borda);
    border-radius: 0;
}

.controles-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.botao {
    min-height: 42px;
    padding: 10px 15px;
    color: var(--texto);
    background: #1a3323;
    border: 3px solid #44664d;
    border-radius: 0;
    box-shadow: 3px 3px 0 #030805;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    transition: transform 90ms steps(1), box-shadow 90ms steps(1);
}

.botao:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #030805;
}

.botao:focus-visible,
.botao-lobby:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: 5px;
}

.botao:disabled { cursor: not-allowed; opacity: .42; }

.botao-com-atalho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.botao-com-atalho::after {
    min-width: 25px;
    padding: 4px 6px;
    content: attr(data-atalho);
    color: #fff36a;
    background: #09160f;
    border: 2px solid currentColor;
    box-shadow: 2px 2px 0 #030805;
    font-size: .65rem;
    font-weight: 900;
    line-height: 1;
}

.botao-primario {
    color: #07130b;
    background: var(--verde);
    border-color: #b7efad;
}

.botao-secundario {
    color: #d2ddcc;
    background: #182b20;
    border-color: #3b5843;
}

.botao-perigo {
    color: #ffe0cf;
    background: #5b2928;
    border-color: #a94c49;
}

.botao-construcao {
    color: #d9ecff;
    background: #17354f;
    border-color: #4f87ae;
}

.botao-construcao-pesada {
    color: #ffe3bd;
    background: #512b20;
    border-color: #b8663e;
}

.botao-construcao-pesada:disabled {
    color: #bcaea5;
    background: #30251f;
    border-color: #58453b;
}

.botao-construcao-glacial {
    color: #dcf8ff;
    background: #214d68;
    border-color: #75bfd6;
}

.botao-construcao-glacial:disabled {
    color: #aebec3;
    background: #24343b;
    border-color: #52666f;
}

.botao-construcao-besta {
    color: #f2e8c6;
    background: #4b321e;
    border-color: #b8874c;
}

.botao-construcao-besta:disabled {
    color: #b9b0a0;
    background: #302921;
    border-color: #5c5041;
}

.botao-construcao-esporos {
    color: #ffe0ef;
    background: #52304c;
    border-color: #d584b5;
}

.botao-construcao-esporos:disabled {
    color: #b9aeb6;
    background: #322832;
    border-color: #625063;
}

.botao-construcao-obliterador {
    color: #ffe1dc;
    background: #542326;
    border-color: #f05b55;
}

.botao-construcao-obliterador:disabled {
    color: #b9abab;
    background: #35292a;
    border-color: #66494a;
}

.botao-construcao-sismica {
    color: #ffe3ae;
    background: #4d3528;
    border-color: #f09a4b;
}

.botao-construcao-sismica:disabled {
    color: #b8ada4;
    background: #352c27;
    border-color: #675247;
}

.botao-construcao-isca {
    color: #fff0b0;
    background: #47515b;
    border-color: #e1b94e;
}

.botao-construcao-isca:disabled {
    color: #aeb7bd;
    background: #2b3339;
    border-color: #58636b;
}

.botao-construcao-amplificador {
    color: #c9fff2;
    background: #304860;
    border-color: #61d8c4;
}

.botao-construcao-amplificador:disabled {
    color: #aab9bd;
    background: #28343d;
    border-color: #52646b;
}

.botao-construcao-gerador {
    color: #fff4bd;
    background: #354d3a;
    border-color: #e9c75d;
}

.botao-construcao-gerador:disabled {
    color: #b8b6a6;
    background: #2b342d;
    border-color: #626451;
}

.botao-construcao-raios {
    color: #d8fbff;
    background: #29466c;
    border-color: #70e7ff;
}

.botao-construcao-raios:disabled {
    color: #aab9c4;
    background: #283441;
    border-color: #536575;
}

.botao-construcao-lanca-chamas {
    color: #fff0c9;
    background: #5a2d21;
    border-color: #ff7a2f;
}

.botao-construcao-lanca-chamas:disabled {
    color: #b9ada5;
    background: #352923;
    border-color: #694d3e;
}

.botao-construcao-mina {
    color: #fff0b5;
    background: #3d4148;
    border-color: #d6a94b;
}

.botao-construcao-mina:disabled {
    color: #aaa9a3;
    background: #292c31;
    border-color: #585c62;
}

.botao-construcao-mina-congelante {
    color: #e3fcff;
    background: #31596d;
    border-color: #9ef4ff;
}

.botao-construcao-mina-congelante:disabled {
    color: #abbcc1;
    background: #29383f;
    border-color: #587078;
}

.botao-construcao-bomba {
    color: #ffe1b5;
    background: #563128;
    border-color: #ff8550;
}

.botao-construcao-bomba:disabled {
    color: #aea39c;
    background: #302925;
    border-color: #66574f;
}

.botao-construcao-ativo,
.botao-construcao-ativo:hover {
    color: #17240d;
    background: #fff36a;
    border-color: #fff9ad;
    box-shadow: 3px 3px 0 #030805, inset 0 0 0 2px #c9992e;
}

.oculto { display: none !important; }

/* Lobby inspirado na composição da referência */
.menu-principal {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background-color: var(--grama-lobby);
    background-image: conic-gradient(#3d7a43 25%, #35703d 0 50%, #3d7a43 0 75%, #35703d 0);
    background-size: 96px 96px;
}

.menu-principal.entrada-vinheta-lobby {
    animation: entrada-vinheta-lobby 1400ms cubic-bezier(.2, .72, .24, 1) both;
    will-change: transform;
}

@keyframes entrada-vinheta-lobby {
    0%, 10% {
        transform: translateY(-100%);
        filter: brightness(.72);
    }

    86% {
        transform: translateY(2%);
        filter: brightness(1);
    }

    to {
        transform: translateY(0);
        filter: brightness(1);
    }
}

.menu-principal::before {
    display: none;
}

.menu-principal::after {
    display: none;
}

.lobby-cenario {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.segredo-arvore-lobby {
    position: fixed;
    top: 14%;
    left: 5%;
    z-index: 2;
    width: 102px;
    height: 106px;
    pointer-events: none;
}

.portal-fase-secreta {
    position: absolute;
    top: 25px;
    left: 49px;
    z-index: 1;
    width: 46px;
    height: 52px;
    padding: 0;
    overflow: visible;
    pointer-events: auto;
    color: #70f7df;
    background: #150b25;
    border: 4px solid #a63cff;
    border-radius: 0;
    outline: 0;
    box-shadow:
        0 0 0 4px #07140f,
        7px 0 0 rgba(37, 245, 213, .7),
        -4px 8px 0 rgba(231, 56, 255, .55);
    clip-path: polygon(18% 0, 82% 0, 82% 10%, 100% 10%, 100% 90%, 82% 90%, 82% 100%, 18% 100%, 18% 90%, 0 90%, 0 10%, 18% 10%);
    cursor: pointer;
    opacity: .68;
    animation: falha-portal-secreto 950ms steps(2, end) infinite;
}

.portal-fase-secreta > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: 900;
    text-shadow: 3px 0 #f04dff, -3px 0 #22e8d2;
}

.portal-fase-secreta::before,
.portal-fase-secreta::after {
    position: absolute;
    content: "";
    background: #35efce;
}

.portal-fase-secreta::before {
    top: 7px;
    right: -10px;
    width: 14px;
    height: 6px;
    box-shadow: -4px 24px 0 #ee4eff;
}

.portal-fase-secreta::after {
    right: 5px;
    bottom: -9px;
    width: 7px;
    height: 13px;
    background: #ee4eff;
}

.portal-fase-secreta.portal-fase-secreta-descoberto {
    width: 58px;
    color: #fff36a;
    border-color: #e64cff;
    opacity: 1;
    box-shadow:
        0 0 0 4px #07140f,
        9px 0 0 rgba(37, 245, 213, .82),
        -4px 8px 0 rgba(231, 56, 255, .7);
}

.portal-fase-secreta.portal-fase-secreta-bloqueado {
    pointer-events: auto;
    color: #fff36a;
    border-color: #e64cff;
    opacity: 1;
    filter: brightness(1.18) saturate(1.2);
    box-shadow:
        0 0 0 4px #07140f,
        9px 0 0 rgba(37, 245, 213, .82),
        -4px 8px 0 rgba(231, 56, 255, .72);
}

.portal-fase-secreta:focus-visible {
    outline: 4px solid #fff36a;
    outline-offset: 7px;
}

.menu-principal:not(.tema-campo) .segredo-arvore-lobby {
    display: none;
}

@keyframes falha-portal-secreto {
    0%, 44% { transform: translate(0, 0); filter: brightness(.9); }
    45%, 74% { transform: translate(3px, -2px); filter: brightness(1.45); }
    75%, 100% { transform: translate(-2px, 2px); filter: brightness(1.1); }
}

.camada-transicao-glitch {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        repeating-linear-gradient(0deg, rgba(65, 241, 214, .13) 0 3px, transparent 3px 9px),
        repeating-linear-gradient(90deg, rgba(224, 70, 255, .14) 0 7px, transparent 7px 19px),
        #09030f;
    animation: apagar-transicao-glitch var(--duracao-transicao-glitch, 1600ms) steps(2, end) both;
}

.camada-transicao-glitch[hidden] {
    display: none;
}

.camada-corredores-amarelos {
    position: fixed;
    inset: 0;
    z-index: 84;
    padding: 18px;
    display: grid;
    place-items: center;
    overflow: hidden auto;
    color: #29230d;
    background:
        linear-gradient(90deg, rgba(70, 58, 17, .12) 1px, transparent 1px) 0 0 / 84px 100%,
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 249, 181, .12) 30px 34px),
        #b6a452;
    font-family: "Courier New", Consolas, monospace;
}

.camada-corredores-amarelos[hidden] {
    display: none;
}

.camada-corredores-amarelos::before {
    position: fixed;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(41, 35, 13, .08) 0 1px, transparent 1px 5px),
        radial-gradient(circle at center, transparent 30%, rgba(41, 35, 13, .42));
    animation: piscar-luz-corredores 2.8s steps(2, end) infinite;
}

.painel-corredores-amarelos {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    padding: 18px;
    overflow-y: auto;
    background: #d1c06b;
    border: 5px solid #5e5220;
    outline: 5px solid #26200a;
    box-shadow: 12px 12px 0 rgba(44, 37, 9, .58);
}

.cabecalho-corredores-amarelos {
    margin-bottom: 12px;
    text-align: center;
}

.cabecalho-corredores-amarelos small {
    display: inline-block;
    padding: 4px 8px;
    color: #f3e994;
    background: #39300e;
    border: 2px solid #766728;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.cabecalho-corredores-amarelos h2 {
    margin: 9px 0 3px;
    color: #31290b;
    font-size: clamp(1.35rem, 4vw, 2.35rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(255, 249, 181, .48);
}

.cabecalho-corredores-amarelos p {
    margin: 0;
    color: #4c4015;
    font-size: .72rem;
    font-weight: 800;
}

.moldura-corredores-amarelos {
    padding: 7px;
    background: #2c250a;
    border: 4px solid #756625;
    box-shadow: 6px 6px 0 rgba(44, 37, 10, .48);
}

.labirinto-amarelo {
    width: 100%;
    height: auto;
    display: block;
    background: #b5a34d;
    image-rendering: pixelated;
}

.labirinto-amarelo:focus-visible {
    outline: 4px solid #59e6d2;
    outline-offset: -4px;
}

.controles-toque-corredores .botao-direcao-labirinto {
    color: #fff5a8;
    background: #4d4216;
    border-color: #b8a64f;
}

.controles-toque-corredores .botao-direcao-labirinto.botao-direcao-pressionado {
    color: #282109;
    background: #5ce2d0;
    border-color: #b6fff5;
}

.instrucao-corredores-amarelos {
    margin: 12px 0 0;
    color: #4c4015;
    font-size: .66rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

@keyframes piscar-luz-corredores {
    0%, 82%, 100% { opacity: 1; }
    83%, 87% { opacity: .66; }
    88%, 92% { opacity: .92; }
}

@media (max-width: 760px), (any-pointer: coarse) {
    .camada-corredores-amarelos {
        padding: 10px;
    }

    .painel-corredores-amarelos {
        max-height: calc(100vh - 20px);
        padding: 12px;
        border-width: 4px;
        outline-width: 3px;
        box-shadow: 6px 6px 0 rgba(44, 37, 9, .58);
    }

    .cabecalho-corredores-amarelos {
        margin-bottom: 9px;
    }

    .cabecalho-corredores-amarelos p {
        font-size: .64rem;
    }

    .moldura-corredores-amarelos {
        padding: 4px;
        border-width: 3px;
        box-shadow: 4px 4px 0 rgba(44, 37, 10, .48);
    }

    .controles-toque-corredores {
        margin-top: 9px;
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(2, 48px);
        gap: 5px;
    }

    .controles-toque-corredores .botao-direcao-labirinto {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .instrucao-corredores-amarelos {
        margin-top: 8px;
        font-size: .58rem;
    }
}

.camada-transicao-glitch::before,
.camada-transicao-glitch::after {
    position: absolute;
    inset: -15%;
    content: "";
    pointer-events: none;
}

.camada-transicao-glitch::before {
    background: linear-gradient(transparent 42%, rgba(255, 255, 255, .92) 42% 45%, transparent 45%);
    mix-blend-mode: screen;
    animation: varrer-transicao-glitch 180ms steps(2, end) infinite;
}

.camada-transicao-glitch::after {
    background:
        linear-gradient(90deg, #38efd4 0 16%, transparent 16% 68%, #e54cff 68% 83%, transparent 83%),
        linear-gradient(90deg, transparent 0 28%, rgba(255, 243, 106, .72) 28% 42%, transparent 42%);
    opacity: .24;
    animation: canais-transicao-glitch 130ms steps(2, end) infinite;
}

.transicao-glitch-corte {
    position: absolute;
    z-index: 1;
    height: clamp(18px, 5vh, 54px);
    background: #e84dff;
    box-shadow: 18px 8px 0 #42efd7, -12px -8px 0 #fff36a;
    mix-blend-mode: screen;
    animation: corte-transicao-glitch 230ms steps(2, end) infinite alternate;
}

.transicao-glitch-corte-1 { top: 19%; left: -8%; width: 58%; }
.transicao-glitch-corte-2 { top: 48%; right: -10%; width: 72%; animation-delay: -90ms; }
.transicao-glitch-corte-3 { bottom: 15%; left: 8%; width: 41%; animation-delay: -160ms; }

.transicao-glitch-mensagem {
    position: relative;
    z-index: 3;
    padding: 24px 32px;
    text-align: center;
    background: rgba(12, 3, 20, .88);
    border: 5px solid #4cf0d9;
    outline: 5px solid #d94df4;
    box-shadow: 10px 10px 0 #050208;
    animation: mensagem-transicao-glitch 160ms steps(2, end) infinite;
}

.transicao-glitch-mensagem small,
.transicao-glitch-mensagem strong {
    display: block;
}

.transicao-glitch-mensagem small {
    color: #fff36a;
    font-size: .72rem;
    letter-spacing: .18em;
}

.transicao-glitch-mensagem strong {
    margin-top: 10px;
    font-size: clamp(1rem, 3vw, 2rem);
    text-shadow: 5px 0 #df4dff, -5px 0 #35ead3;
}

.teleporte-glitch-ativo .aplicacao-jogo,
.teleporte-glitch-ativo .menu-principal {
    animation: pane-total-glitch var(--duracao-transicao-glitch, 1600ms) steps(2, end) both;
}

@keyframes apagar-transicao-glitch {
    0% { opacity: 0; }
    8%, 82% { opacity: 1; }
    88% { opacity: .35; }
    94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes varrer-transicao-glitch {
    from { transform: translateY(-22%); }
    to { transform: translateY(22%); }
}

@keyframes canais-transicao-glitch {
    0% { transform: translate(-9%, 3%); }
    50% { transform: translate(7%, -4%); }
    100% { transform: translate(-3%, 7%); }
}

@keyframes corte-transicao-glitch {
    from { transform: translateX(-11%) skewX(18deg); opacity: .28; }
    to { transform: translateX(15%) skewX(-12deg); opacity: .72; }
}

@keyframes mensagem-transicao-glitch {
    0%, 48% { transform: translate(0, 0); filter: brightness(1); }
    49%, 74% { transform: translate(7px, -4px); filter: brightness(1.6); }
    75%, 100% { transform: translate(-5px, 3px); filter: hue-rotate(28deg); }
}

@keyframes pane-total-glitch {
    0% { transform: translate(0); filter: none; }
    18% { transform: translate(10px, -5px) skewX(1deg); filter: hue-rotate(70deg) contrast(1.6); }
    35% { transform: translate(-14px, 4px); filter: invert(.18) saturate(2.4); }
    52% { transform: translate(7px, 8px) scale(1.015); filter: hue-rotate(210deg) contrast(2); }
    69% { transform: translate(-8px, -7px); filter: invert(.75) hue-rotate(280deg); }
    86% { transform: translate(12px, 2px); filter: saturate(3); }
    100% { transform: translate(0); filter: brightness(0); }
}

.menu-principal.tema-campo {
    background-color: #326b35;
    background-image:
        linear-gradient(90deg, rgba(142, 190, 77, .07) 4px, transparent 4px),
        linear-gradient(rgba(24, 82, 48, .18) 4px, transparent 4px),
        conic-gradient(#3f7f3d 25%, #326b35 0 50%, #3f7f3d 0 75%, #326b35 0);
    background-size: 32px 32px, 32px 32px, 80px 80px;
}

body:not(.modo-noturno) .menu-principal.tema-campo .lobby-cenario,
body:not(.modo-noturno) .menu-principal.tema-campo .segredo-arvore-lobby {
    filter: brightness(.68) saturate(.82) contrast(1.06);
}

.lago-lobby {
    position: absolute;
    right: 5%;
    bottom: 8%;
    width: 156px;
    height: 72px;
    background: #45c5c4;
    border: 8px solid #3ca370;
    box-shadow: inset 0 10px 0 #8de9d0, 6px 6px 0 rgba(45, 104, 55, .25);
    clip-path: polygon(12% 0, 88% 0, 88% 12%, 100% 12%, 100% 88%, 88% 88%, 88% 100%, 12% 100%, 12% 88%, 0 88%, 0 12%, 12% 12%);
}

.arvore-lobby {
    position: absolute;
    width: 74px;
    height: 100px;
    background: url("assets/arvore-campo-lobby.png") center / contain no-repeat;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(5px 6px 0 rgba(45, 104, 55, .25));
    image-rendering: pixelated;
}

.arvore-lobby::before,
.arvore-lobby::after {
    display: none;
}

.arvore-lobby-1 { top: 0; left: 0; z-index: 2; }
.arvore-lobby-2 { top: 12%; right: 7%; transform: scale(.82); }
.arvore-lobby-3 { bottom: 13%; left: 9%; transform: scale(1.12); }

.pedra-lobby {
    position: absolute;
    width: 42px;
    height: 28px;
    background: #8d9e78;
    border: 3px solid #557a5a;
    box-shadow: inset 8px 7px 0 #c7c966, 4px 5px 0 rgba(45, 104, 55, .24);
    clip-path: polygon(18% 0, 78% 0, 78% 12%, 100% 12%, 100% 100%, 0 100%, 0 28%, 18% 28%);
}

.pedra-lobby-1 { top: 43%; left: 3%; }
.pedra-lobby-2 { top: 48%; right: 5%; transform: scale(.8); }

.flores-lobby {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #cfff70;
    box-shadow: 18px 8px 0 #ba6156, 36px -4px 0 #fff38a, 54px 10px 0 #3ca370;
    filter: drop-shadow(2px 3px 0 rgba(45, 104, 55, .22));
}

.flores-lobby-1 { top: 29%; left: 15%; }
.flores-lobby-2 { right: 17%; bottom: 24%; transform: scale(.85); }

.decoracao-lobby-campo {
    position: absolute;
}

.menu-principal:not(.tema-campo) .decoracao-lobby-campo {
    display: none;
}

.arbusto-campo-lobby {
    width: 46px;
    height: 30px;
    background: #3ca370;
    box-shadow: inset 11px 0 0 #4aad6d, 5px 5px 0 rgba(45, 104, 55, .24);
    clip-path: polygon(18% 0, 78% 0, 78% 14%, 92% 14%, 92% 34%, 100% 34%, 100% 100%, 0 100%, 0 34%, 8% 34%, 8% 14%, 18% 14%);
}

.arbusto-campo-lobby::after {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 7px;
    height: 7px;
    content: "";
    background: #cfff70;
    box-shadow: 19px 9px 0 #8fde5d;
}

.arbusto-campo-lobby-1 { top: 35%; left: 21%; transform: scale(.82); }
.arbusto-campo-lobby-2 { right: 23%; bottom: 18%; transform: scale(.68); }

.grama-pixel-lobby {
    width: 42px;
    height: 26px;
    background:
        linear-gradient(#8fde5d 0 0) 0 10px / 7px 16px no-repeat,
        linear-gradient(#3ca370 0 0) 13px 0 / 7px 26px no-repeat,
        linear-gradient(#4aad6d 0 0) 27px 6px / 7px 20px no-repeat,
        linear-gradient(#cfff70 0 0) 38px 13px / 4px 13px no-repeat;
}

.grama-pixel-lobby-1 { top: 53%; left: 12%; transform: scale(.86); }
.grama-pixel-lobby-2 { top: 24%; right: 31%; transform: rotate(4deg) scale(.72); }
.grama-pixel-lobby-3 { right: 36%; bottom: 10%; transform: rotate(-5deg) scale(.9); }

.decoracao-central-lobby {
    opacity: .72;
}

.arvore-lobby-central { top: 43%; left: 29%; transform: scale(.64); }
.pedra-lobby-central { top: 48%; right: 30%; transform: scale(.62); }
.flores-lobby-central { left: 47%; bottom: 22%; transform: scale(.72); }

.decoracao-lobby-deserto { display: none; position: absolute; }

.menu-principal.tema-deserto {
    --contorno-lobby: #3b2418;
    background-color: #b87838;
    background-image: conic-gradient(#c98b47 25%, #b97a3a 0 50%, #c98b47 0 75%, #b97a3a 0);
}

.menu-principal.tema-deserto .lago-lobby,
.menu-principal.tema-deserto .arvore-lobby,
.menu-principal.tema-deserto .pedra-lobby,
.menu-principal.tema-deserto .flores-lobby {
    display: none;
}

.menu-principal.tema-deserto .decoracao-lobby-deserto { display: block; }

.piramide-lobby {
    width: 142px;
    height: 92px;
    background: #d9a552;
    box-shadow: inset -44px 0 0 #a76a35, 9px 9px 0 rgba(91, 51, 25, .35);
    clip-path: polygon(
        45% 0, 55% 0, 55% 10%, 62% 10%, 62% 20%, 68% 20%,
        68% 30%, 75% 30%, 75% 40%, 82% 40%, 82% 50%, 88% 50%,
        88% 60%, 94% 60%, 94% 72%, 100% 72%, 100% 100%,
        0 100%, 0 72%, 6% 72%, 6% 60%, 12% 60%, 12% 50%,
        18% 50%, 18% 40%, 25% 40%, 25% 30%, 32% 30%,
        32% 20%, 38% 20%, 38% 10%, 45% 10%
    );
}

.piramide-lobby::after {
    position: absolute;
    left: calc(50% - 8px);
    bottom: 0;
    width: 16px;
    height: 25px;
    content: "";
    background: #5f3822;
}

.piramide-lobby-1 { top: 9%; left: 4%; transform: scale(.9); }
.piramide-lobby-2 { right: 5%; bottom: 9%; transform: scale(1.12); }

.cacto-lobby {
    width: 22px;
    height: 72px;
    background: #3f8650;
    border: 5px solid #245335;
    box-shadow: inset 6px 0 0 #79aa58, 7px 9px 0 rgba(91, 51, 25, .3);
}

.cacto-lobby::before,
.cacto-lobby::after {
    position: absolute;
    width: 28px;
    height: 30px;
    content: "";
    background: #3f8650;
    border: 5px solid #245335;
}

.cacto-lobby::before {
    top: 21px;
    left: -28px;
    clip-path: polygon(0 0, 45% 0, 45% 55%, 100% 55%, 100% 100%, 0 100%);
}

.cacto-lobby::after {
    top: 10px;
    right: -28px;
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%, 0 55%, 55% 55%);
}

.cacto-lobby-1 { left: 7%; bottom: 12%; transform: scale(1.1); }
.cacto-lobby-2 { top: 18%; right: 12%; transform: scale(.85); }
.cacto-lobby-3 { top: 48%; left: 3%; transform: scale(.72); }

.mato-seco-lobby {
    width: 8px;
    height: 42px;
    background: #70401f;
    box-shadow:
        -20px 12px 0 -1px #70401f,
        20px 15px 0 -1px #70401f,
        -31px 27px 0 1px #c1833f,
        29px 30px 0 1px #c1833f,
        7px 34px 0 2px #8e5a2e;
}

.mato-seco-lobby-1 { top: 38%; right: 4%; transform: rotate(90deg) scale(.9); }
.mato-seco-lobby-2 { left: 17%; bottom: 7%; transform: rotate(90deg) scale(1.1); }
.piramide-lobby-central { top: 41%; left: 44%; transform: scale(.38); }
.cacto-lobby-central { left: 31%; bottom: 23%; transform: scale(.52); }
.mato-seco-lobby-central { top: 43%; right: 31%; transform: rotate(90deg) scale(.58); }

.menu-principal.tema-deserto .lobby-selo {
    color: #4b2b18;
    background: #e3ad59;
    border-color: #ffd983;
    box-shadow: 6px 6px 0 #5a3926;
}

.menu-principal.tema-deserto .menu-subtitulo,
.menu-principal.tema-deserto .lobby-topo h1 span {
    color: #ffd36d;
}

.menu-principal.tema-deserto .botao-configuracoes-lobby,
.menu-principal.tema-deserto .lobby-status span {
    background: #684326;
    border-color: #b9783a;
}

.menu-principal.tema-deserto .lobby-rodape {
    background: rgba(94, 57, 31, .92);
    border-color: #c68b48 #c68b48 #5a3926;
}

.menu-principal.tema-deserto .conteudo-menu {
    --fundo-conteudo-menu: #5c3b25;
    background: var(--fundo-conteudo-menu);
    border-color: #dda557;
    box-shadow: 8px 8px 0 #3b2418;
}

.menu-principal.tema-deserto .album-cartao,
.menu-principal.tema-deserto .missao-cartao,
.menu-principal.tema-deserto .premio-colecao,
.menu-principal.tema-deserto .conquista-cartao,
.menu-principal.tema-deserto .tutorial-lista li {
    background: #76502e;
    border-color: #b97a3a;
    box-shadow: 3px 3px 0 #3b2418;
}

.decoracao-lobby-artico {
    position: absolute;
    display: none;
}

.menu-principal.tema-artico {
    --contorno-lobby: #244b61;
    background-color: #a9d1e2;
    background-image: conic-gradient(#c9e8f2 25%, #96c4d8 0 50%, #c9e8f2 0 75%, #96c4d8 0);
}

.menu-principal.tema-artico .lago-lobby,
.menu-principal.tema-artico .arvore-lobby,
.menu-principal.tema-artico .pedra-lobby,
.menu-principal.tema-artico .flores-lobby {
    display: none;
}

.menu-principal.tema-artico .decoracao-lobby-artico { display: block; }

.iglu-lobby {
    width: 132px;
    height: 78px;
    background: #e9f9ff;
    border: 7px solid #6f9fb3;
    box-shadow: inset 0 -17px 0 #b8ddea, 9px 9px 0 rgba(45, 85, 105, .28);
    clip-path: polygon(30% 0, 70% 0, 70% 8%, 82% 8%, 82% 18%, 90% 18%, 90% 31%, 96% 31%, 96% 48%, 100% 48%, 100% 100%, 0 100%, 0 48%, 4% 48%, 4% 31%, 10% 31%, 10% 18%, 18% 18%, 18% 8%, 30% 8%);
}

.iglu-lobby::before {
    position: absolute;
    right: 16px;
    bottom: 0;
    width: 30px;
    height: 36px;
    content: "";
    background: #234b60;
    border: 6px solid #6f9fb3;
    border-bottom: 0;
}

.iglu-lobby::after {
    position: absolute;
    top: 23px;
    left: 12px;
    width: 18px;
    height: 6px;
    content: "";
    background: #9fcddd;
    box-shadow: 27px 0 0 #9fcddd, 54px 0 0 #9fcddd, 13px 18px 0 #9fcddd, 40px 18px 0 #9fcddd;
}

.iglu-lobby-1 { top: 8%; left: 4%; transform: scale(.88); }
.iglu-lobby-2 { right: 5%; bottom: 8%; transform: scale(1.06); }

.pinguim-lobby {
    width: 44px;
    height: 68px;
    background: #152934;
    border: 5px solid #0b1820;
    box-shadow: 7px 8px 0 rgba(45, 85, 105, .28);
    clip-path: polygon(25% 0, 75% 0, 75% 7%, 88% 7%, 88% 18%, 100% 18%, 100% 78%, 88% 78%, 88% 92%, 70% 92%, 70% 100%, 30% 100%, 30% 92%, 12% 92%, 12% 78%, 0 78%, 0 18%, 12% 18%, 12% 7%, 25% 7%);
}

.pinguim-lobby::before {
    position: absolute;
    left: 10px;
    bottom: 7px;
    width: 24px;
    height: 38px;
    content: "";
    background: #f4fbff;
    box-shadow: inset 0 -9px 0 #a6d3e2;
}

.pinguim-lobby::after {
    position: absolute;
    top: 19px;
    left: 17px;
    width: 11px;
    height: 7px;
    content: "";
    background: #f2a83c;
    box-shadow: -14px 43px 0 2px #f2a83c, 14px 43px 0 2px #f2a83c;
}

.pinguim-lobby-1 { left: 12%; bottom: 13%; transform: scale(1.05); }
.pinguim-lobby-2 { top: 13%; right: 17%; transform: scale(.82); }
.pinguim-lobby-3 { top: 43%; left: 3%; transform: scale(.74); }

.pinheiro-nevado-lobby {
    width: 76px;
    height: 104px;
    background: #286077;
    box-shadow: inset 16px 0 0 #347b91, 8px 9px 0 rgba(45, 85, 105, .25);
    clip-path: polygon(43% 0, 57% 0, 57% 10%, 66% 10%, 66% 20%, 74% 20%, 74% 31%, 82% 31%, 82% 42%, 91% 42%, 91% 54%, 100% 54%, 100% 68%, 88% 68%, 88% 78%, 100% 78%, 100% 91%, 58% 91%, 58% 100%, 42% 100%, 42% 91%, 0 91%, 0 78%, 12% 78%, 12% 68%, 0 68%, 0 54%, 9% 54%, 9% 42%, 18% 42%, 18% 31%, 26% 31%, 26% 20%, 34% 20%, 34% 10%, 43% 10%);
}

.pinheiro-nevado-lobby::after {
    position: absolute;
    top: 18px;
    left: 15px;
    width: 47px;
    height: 8px;
    content: "";
    background: #eefbff;
    box-shadow: -7px 22px 0 #eefbff, -14px 44px 0 #eefbff, -9px 65px 0 #d8f2fa;
}

.pinheiro-nevado-lobby-1 { top: 9%; right: 5%; transform: scale(.88); }
.pinheiro-nevado-lobby-2 { left: 6%; bottom: 7%; transform: scale(1.08); }
.pinheiro-nevado-lobby-3 { right: 18%; bottom: 17%; transform: scale(.72); }

.bloco-gelo-lobby {
    width: 54px;
    height: 46px;
    background: #7cc6df;
    border: 6px solid #4d8ca6;
    box-shadow: inset 10px 9px 0 #dff9ff, 7px 8px 0 rgba(45, 85, 105, .25);
    clip-path: polygon(18% 0, 82% 0, 82% 10%, 100% 10%, 100% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 92%, 0 92%, 0 18%, 18% 18%);
}

.bloco-gelo-lobby-1 { top: 39%; right: 4%; transform: rotate(-4deg) scale(.9); }
.bloco-gelo-lobby-2 { left: 19%; bottom: 5%; transform: rotate(5deg) scale(1.08); }
.pinguim-lobby-central { top: 42%; left: 45%; transform: scale(.52); }
.pinheiro-nevado-lobby-central { left: 31%; bottom: 21%; transform: scale(.46); }
.bloco-gelo-lobby-central { top: 42%; right: 30%; transform: rotate(4deg) scale(.56); }

.menu-principal.tema-artico .lobby-selo {
    color: #163a4e;
    background: #dff8ff;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 #47758a;
}

.menu-principal.tema-artico .menu-subtitulo,
.menu-principal.tema-artico .lobby-topo h1 span { color: #bdefff; }

.menu-principal.tema-artico .botao-configuracoes-lobby,
.menu-principal.tema-artico .lobby-status span {
    background: #315f75;
    border-color: #78b8d0;
}

.menu-principal.tema-artico .lobby-rodape {
    background: rgba(42, 88, 108, .92);
    border-color: #85c8df #85c8df #244b61;
}

.menu-principal.tema-artico .conteudo-menu {
    --fundo-conteudo-menu: #28566c;
    background: var(--fundo-conteudo-menu);
    border-color: #b9e9f5;
    box-shadow: 8px 8px 0 #244b61;
}

.menu-principal.tema-artico .album-cartao,
.menu-principal.tema-artico .missao-cartao,
.menu-principal.tema-artico .premio-colecao,
.menu-principal.tema-artico .conquista-cartao,
.menu-principal.tema-artico .tutorial-lista li {
    background: #376b82;
    border-color: #75b1c8;
    box-shadow: 3px 3px 0 #244b61;
}

.decoracao-lobby-selva {
    position: absolute;
    display: none;
}

.menu-principal.tema-selva {
    --contorno-lobby: #162f20;
    background-color: #2f643a;
    background-image: conic-gradient(#326e3e 25%, #295d35 0 50%, #326e3e 0 75%, #295d35 0);
}

.menu-principal.tema-selva .lago-lobby,
.menu-principal.tema-selva .arvore-lobby,
.menu-principal.tema-selva .pedra-lobby,
.menu-principal.tema-selva .flores-lobby {
    display: none;
}

.menu-principal.tema-selva .decoracao-lobby-selva { display: block; }

.ruina-selva-lobby {
    width: 94px;
    height: 92px;
    background: #70775d;
    border: 7px solid #35452f;
    box-shadow: inset 15px 0 0 #8f9271, 9px 9px 0 rgba(12, 35, 20, .35);
    clip-path: polygon(0 24%, 20% 24%, 20% 0, 43% 0, 43% 19%, 67% 19%, 67% 7%, 88% 7%, 88% 35%, 100% 35%, 100% 100%, 0 100%);
}

.ruina-selva-lobby::before {
    position: absolute;
    left: 31px;
    bottom: 0;
    width: 27px;
    height: 49px;
    content: "";
    background: #203728;
    border: 6px solid #4d5e45;
    border-bottom: 0;
}

.ruina-selva-lobby::after {
    position: absolute;
    top: 12px;
    left: -5px;
    width: 38px;
    height: 8px;
    content: "";
    background: #4d833f;
    box-shadow: 46px 24px 0 #4d833f, 55px 31px 0 #4d833f;
}

.ruina-selva-lobby-1 { top: 9%; left: 5%; transform: scale(.95); }
.ruina-selva-lobby-2 { right: 5%; bottom: 8%; transform: scale(1.14); }

.arvore-selva-lobby {
    width: 82px;
    height: 116px;
    background: #245331;
    border: 6px solid #173a24;
    box-shadow: inset 15px 0 0 #367744, 8px 8px 0 rgba(12, 35, 20, .3);
    clip-path: polygon(34% 0, 66% 0, 66% 8%, 82% 8%, 82% 19%, 96% 19%, 96% 44%, 82% 44%, 82% 54%, 62% 54%, 62% 100%, 39% 100%, 39% 54%, 18% 54%, 18% 47%, 2% 47%, 2% 21%, 18% 21%, 18% 9%, 34% 9%);
}

.arvore-selva-lobby::after {
    position: absolute;
    left: 34px;
    bottom: 0;
    width: 18px;
    height: 52px;
    content: "";
    background: #5d4025;
    box-shadow: inset 6px 0 0 #7a5431;
}

.arvore-selva-lobby-1 { right: 13%; top: 8%; transform: scale(.86); }
.arvore-selva-lobby-2 { left: 7%; bottom: 5%; transform: scale(1.08); }
.arvore-selva-lobby-3 { right: 24%; bottom: 10%; transform: scale(.72); }

.cipo-selva-lobby {
    width: 9px;
    height: 122px;
    background: #76a84d;
    border: 3px solid #315c2d;
    box-shadow: 13px 18px 0 -2px #56843d, 24px 35px 0 -2px #76a84d;
}

.cipo-selva-lobby::after {
    position: absolute;
    left: 17px;
    bottom: 30px;
    width: 20px;
    height: 15px;
    content: "";
    background: #75a849;
    border: 3px solid #315c2d;
}

.cipo-selva-lobby-1 { top: 0; left: 20%; transform: rotate(5deg); }
.cipo-selva-lobby-2 { top: -13px; right: 22%; transform: rotate(-5deg) scale(.9); }

.flor-selva-lobby {
    width: 17px;
    height: 17px;
    background: #ffd05d;
    box-shadow: -14px 0 0 #ff668c, 14px 0 0 #ff668c, 0 -14px 0 #ff668c, 0 14px 0 #ff668c, 6px 38px 0 -5px #477d3c;
}

.flor-selva-lobby-1 { left: 17%; bottom: 12%; transform: scale(.9); }
.flor-selva-lobby-2 { top: 33%; right: 7%; transform: scale(1.15); }
.ruina-selva-lobby-central { top: 41%; left: 44%; transform: scale(.38); }
.arvore-selva-lobby-central { right: 30%; bottom: 19%; transform: scale(.45); }
.flor-selva-lobby-central { top: 45%; left: 31%; transform: scale(.7); }

.menu-principal.tema-selva .lobby-selo {
    color: #20351c;
    background: #b9dc78;
    border-color: #e0f3a9;
    box-shadow: 6px 6px 0 #234629;
}

.menu-principal.tema-selva .menu-subtitulo,
.menu-principal.tema-selva .lobby-topo h1 span { color: #d6ec91; }

.menu-principal.tema-selva .botao-configuracoes-lobby,
.menu-principal.tema-selva .lobby-status span {
    background: #2b5232;
    border-color: #6f9851;
}

.menu-principal.tema-selva .lobby-rodape {
    background: rgba(31, 68, 39, .94);
    border-color: #78a754 #78a754 #173722;
}

.menu-principal.tema-selva .conteudo-menu {
    --fundo-conteudo-menu: #285335;
    background: var(--fundo-conteudo-menu);
    border-color: #9bc66c;
    box-shadow: 8px 8px 0 #173722;
}

.menu-principal.tema-selva .album-cartao,
.menu-principal.tema-selva .missao-cartao,
.menu-principal.tema-selva .premio-colecao,
.menu-principal.tema-selva .conquista-cartao,
.menu-principal.tema-selva .tutorial-lista li {
    background: #376940;
    border-color: #6e9c50;
    box-shadow: 3px 3px 0 #173722;
}

.menu-principal.tema-selva .credito-criador {
    background: rgba(35, 73, 42, .95);
    border-color: #9bc66c;
}

.decoracao-lobby-temperada {
    position: absolute;
    display: none;
}

.menu-principal.tema-temperada {
    --contorno-lobby: #3b2b20;
    background-color: #74663a;
    background-image: conic-gradient(#7e7140 25%, #665c35 0 50%, #7e7140 0 75%, #665c35 0);
}

.menu-principal.tema-temperada .lago-lobby,
.menu-principal.tema-temperada .arvore-lobby,
.menu-principal.tema-temperada .pedra-lobby,
.menu-principal.tema-temperada .flores-lobby {
    display: none;
}

.menu-principal.tema-temperada .decoracao-lobby-temperada { display: block; }

.arvore-outonal-lobby {
    width: 88px;
    height: 116px;
    background: #963f24;
    border: 6px solid #4a2d20;
    box-shadow: inset 19px 0 0 #d17a31, 8px 8px 0 rgba(42, 28, 19, .3);
    clip-path: polygon(35% 0, 65% 0, 65% 8%, 82% 8%, 82% 18%, 96% 18%, 96% 45%, 78% 45%, 78% 54%, 60% 54%, 60% 100%, 40% 100%, 40% 54%, 19% 54%, 19% 46%, 3% 46%, 3% 21%, 19% 21%, 19% 9%, 35% 9%);
}

.arvore-outonal-lobby::after {
    position: absolute;
    left: 35px;
    bottom: 0;
    width: 18px;
    height: 54px;
    content: "";
    background: #62412b;
    box-shadow: inset 6px 0 0 #8a5b35;
}

.arvore-outonal-lobby-1 { top: 8%; left: 6%; transform: scale(.9); }
.arvore-outonal-lobby-2 { top: 9%; right: 7%; transform: scale(1.04); }
.arvore-outonal-lobby-3 { bottom: 5%; left: 12%; transform: scale(.78); }

.cogumelos-outonais-lobby {
    width: 132px;
    height: 174px;
    filter: drop-shadow(7px 7px 0 rgba(42, 28, 19, .34));
    image-rendering: pixelated;
    isolation: isolate;
}

.cogumelos-outonais-lobby::before,
.cogumelos-outonais-lobby::after {
    position: absolute;
    content: "";
    image-rendering: pixelated;
}

.cogumelos-outonais-lobby::before { z-index: 2; }
.cogumelos-outonais-lobby::after { z-index: 1; }

.cogumelos-outonais-lobby-1::before {
    left: 0;
    top: 0;
    width: 132px;
    height: 88px;
    background:
        linear-gradient(#fff9e8 0 0) 12px 32px / 24px 20px no-repeat,
        linear-gradient(#fff9e8 0 0) 76px 18px / 20px 18px no-repeat,
        linear-gradient(#fff9e8 0 0) 104px 54px / 20px 22px no-repeat,
        linear-gradient(#ff675a 0 0) 44px 8px / 24px 12px no-repeat,
        linear-gradient(#cf3735 0 0) 8px 64px / 28px 16px no-repeat,
        #ef4d45;
    clip-path: polygon(
        32% 0, 68% 0, 68% 10%, 78% 10%, 78% 20%, 88% 20%,
        88% 34%, 96% 34%, 96% 48%, 100% 48%, 100% 88%, 92% 88%,
        92% 100%, 62% 100%, 62% 86%, 38% 86%, 38% 100%, 0 100%,
        0 48%, 8% 48%, 8% 34%, 18% 34%, 18% 20%, 32% 20%
    );
}

.cogumelos-outonais-lobby-1::after {
    left: 50px;
    top: 76px;
    width: 32px;
    height: 96px;
    background:
        linear-gradient(#ead4ae 0 0) 24px 12px / 8px 76px no-repeat,
        linear-gradient(#fff9e8 0 0) 0 0 / 100% 100% no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 92%, 88% 100%, 12% 100%, 12% 92%, 0 92%);
}

.cogumelos-outonais-lobby-2 {
    width: 120px;
    height: 180px;
}

.cogumelos-outonais-lobby-2::before {
    left: 0;
    top: 0;
    width: 120px;
    height: 94px;
    background:
        linear-gradient(#d95750 0 0) 16px 48px / 14px 14px no-repeat,
        linear-gradient(#d95750 0 0) 46px 20px / 16px 16px no-repeat,
        linear-gradient(#d95750 0 0) 88px 52px / 16px 16px no-repeat,
        linear-gradient(#d95750 0 0) 54px 70px / 14px 16px no-repeat,
        linear-gradient(#ff9d7e 0 0) 34px 8px / 26px 12px no-repeat,
        linear-gradient(#f06f62 0 0) 4px 66px / 28px 20px no-repeat,
        #ff866f;
    clip-path: polygon(
        36% 0, 64% 0, 64% 8%, 76% 8%, 76% 18%, 86% 18%,
        86% 30%, 94% 30%, 94% 44%, 100% 44%, 100% 100%, 0 100%,
        0 44%, 6% 44%, 6% 30%, 14% 30%, 14% 18%, 24% 18%,
        24% 8%, 36% 8%
    );
}

.cogumelos-outonais-lobby-2::after {
    left: 46px;
    top: 86px;
    width: 34px;
    height: 92px;
    background:
        linear-gradient(#ead4ae 0 0) 26px 22px / 8px 62px no-repeat,
        linear-gradient(#fff9e8 0 0) 0 0 / 100% 100% no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 28%, 76% 28%, 76% 46%, 58% 46%, 58% 100%, 0 100%);
}

.cogumelos-outonais-lobby-1 {
    left: 18%;
    bottom: 4%;
    transform: scale(.3);
    transform-origin: bottom center;
}

.cogumelos-outonais-lobby-2 {
    right: 13%;
    top: 7%;
    transform: scale(.3);
    transform-origin: top center;
}

.tronco-outonal-lobby {
    right: 5%;
    bottom: 8%;
    width: 116px;
    height: 35px;
    background: #775035;
    border: 6px solid #3d2b21;
    box-shadow: inset 18px 7px 0 #a67647, 7px 7px 0 rgba(42, 28, 19, .3);
}

.tronco-outonal-lobby::after {
    position: absolute;
    right: -7px;
    top: -4px;
    width: 29px;
    height: 31px;
    content: "";
    background: #493326;
    border: 5px solid #2c211a;
}

.folhas-outonais-lobby {
    width: 10px;
    height: 10px;
    background: #efa943;
    box-shadow: 25px 12px 0 #b84f2d, 51px -7px 0 #d67832, 72px 18px 0 #f0c258, 98px 3px 0 #9c4027;
}

.folhas-outonais-lobby-1 { top: 34%; left: 3%; transform: rotate(8deg); }
.folhas-outonais-lobby-2 { right: 18%; bottom: 25%; transform: rotate(-11deg) scale(.85); }
.arvore-outonal-lobby-central { top: 42%; left: 30%; transform: scale(.44); }
.tronco-outonal-lobby-central { right: auto; left: 44%; bottom: 21%; transform: scale(.46); }
.folhas-outonais-lobby-central { top: 43%; right: 30%; transform: rotate(-8deg) scale(.6); }

.menu-principal.tema-temperada .lobby-selo {
    color: #3b291d;
    background: #e2a84b;
    border-color: #f4d37c;
    box-shadow: 6px 6px 0 #4d3424;
}

.menu-principal.tema-temperada .menu-subtitulo,
.menu-principal.tema-temperada .lobby-topo h1 span { color: #f2c86b; }

.menu-principal.tema-temperada .botao-configuracoes-lobby,
.menu-principal.tema-temperada .lobby-status span {
    background: #5a4731;
    border-color: #a77b43;
}

.menu-principal.tema-temperada .lobby-rodape {
    background: rgba(76, 57, 38, .95);
    border-color: #b98545 #b98545 #35261c;
}

.menu-principal.tema-temperada .conteudo-menu {
    --fundo-conteudo-menu: #55442f;
    background: var(--fundo-conteudo-menu);
    border-color: #d19a4b;
    box-shadow: 8px 8px 0 #35261c;
}

.menu-principal.tema-temperada .album-cartao,
.menu-principal.tema-temperada .missao-cartao,
.menu-principal.tema-temperada .premio-colecao,
.menu-principal.tema-temperada .conquista-cartao,
.menu-principal.tema-temperada .tutorial-lista li {
    background: #685239;
    border-color: #a97b43;
    box-shadow: 3px 3px 0 #35261c;
}

.menu-principal.tema-temperada .credito-criador {
    background: rgba(81, 61, 40, .95);
    border-color: #d19a4b;
}

.decoracao-lobby-vulcanica {
    position: absolute;
    display: none;
}

.menu-principal.tema-vulcanica {
    --contorno-lobby: #1d1113;
    background-color: #38262a;
    background-image: conic-gradient(#402b2e 25%, #312124 0 50%, #402b2e 0 75%, #312124 0);
}

.menu-principal.tema-vulcanica .lago-lobby,
.menu-principal.tema-vulcanica .arvore-lobby,
.menu-principal.tema-vulcanica .pedra-lobby,
.menu-principal.tema-vulcanica .flores-lobby {
    display: none;
}

.menu-principal.tema-vulcanica .decoracao-lobby-vulcanica { display: block; }

.vulcao-lobby {
    width: 132px;
    height: 104px;
    background: #281b20;
    border-bottom: 9px solid #171014;
    clip-path: polygon(44% 0, 62% 0, 70% 27%, 100% 100%, 0 100%, 34% 27%);
    filter: drop-shadow(7px 7px 0 rgba(16, 8, 10, .42));
}

.vulcao-lobby::after {
    position: absolute;
    left: 47px;
    top: 3px;
    width: 38px;
    height: 54px;
    content: "";
    background: #ff5a2d;
    box-shadow: inset 12px 0 0 #ffb13b;
    clip-path: polygon(15% 0, 85% 0, 73% 25%, 95% 100%, 56% 72%, 31% 100%, 0 36%);
}

.vulcao-lobby-1 { left: 4%; bottom: 5%; transform: scale(.85); }
.vulcao-lobby-2 { right: 5%; top: 8%; transform: scale(.7); }

.cristal-obsidiana-lobby {
    width: 54px;
    height: 86px;
    background: #120f18;
    border: 5px solid #6e3e66;
    box-shadow: inset 11px 0 0 #2b1a31, 6px 6px 0 rgba(13, 7, 10, .45);
    clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
}

.cristal-obsidiana-lobby::after {
    position: absolute;
    left: 21px;
    top: 17px;
    width: 9px;
    height: 45px;
    content: "";
    background: #ff5a38;
    box-shadow: 13px 20px 0 #ff9e35;
}

.cristal-obsidiana-lobby-1 { left: 19%; top: 10%; transform: scale(.8) rotate(-8deg); }
.cristal-obsidiana-lobby-2 { right: 14%; bottom: 7%; transform: scale(.95) rotate(7deg); }
.cristal-obsidiana-lobby-central { left: 35%; top: 42%; transform: scale(.55) rotate(-5deg); }

.lago-lava-lobby {
    right: 24%;
    top: 18%;
    width: 118px;
    height: 58px;
    background: #ff5a2d;
    border: 7px solid #21161a;
    box-shadow: inset 0 0 0 10px #c43b25, 7px 7px 0 rgba(16, 8, 10, .4);
    clip-path: polygon(12% 0, 82% 0, 82% 12%, 100% 12%, 100% 78%, 87% 78%, 87% 100%, 16% 100%, 16% 88%, 0 88%, 0 20%, 12% 20%);
}

.menu-principal.tema-vulcanica .lobby-selo {
    color: #32191a;
    background: #ff713f;
    border-color: #ffc35a;
    box-shadow: 6px 6px 0 #251316;
}

.menu-principal.tema-vulcanica .menu-subtitulo,
.menu-principal.tema-vulcanica .lobby-topo h1 span { color: #ff9c55; }

.menu-principal.tema-vulcanica .botao-configuracoes-lobby,
.menu-principal.tema-vulcanica .lobby-status span {
    background: #51272a;
    border-color: #a44a42;
}

.menu-principal.tema-vulcanica .lobby-rodape {
    background: rgba(57, 30, 32, .96);
    border-color: #b34a3d #b34a3d #201215;
}

.menu-principal.tema-vulcanica .conteudo-menu {
    --fundo-conteudo-menu: #48272a;
    background: var(--fundo-conteudo-menu);
    border-color: #e06448;
    box-shadow: 8px 8px 0 #201215;
}

.menu-principal.tema-vulcanica .album-cartao,
.menu-principal.tema-vulcanica .missao-cartao,
.menu-principal.tema-vulcanica .premio-colecao,
.menu-principal.tema-vulcanica .conquista-cartao,
.menu-principal.tema-vulcanica .tutorial-lista li {
    background: #593034;
    border-color: #a94d43;
    box-shadow: 3px 3px 0 #201215;
}

.menu-principal.tema-vulcanica .credito-criador {
    background: rgba(62, 31, 34, .96);
    border-color: #e06448;
}

.decoracao-lobby-pantano {
    position: absolute;
    display: none;
}

.menu-principal.tema-pantano {
    --contorno-lobby: #102019;
    background-color: #263f32;
    background-image: conic-gradient(#2e4b39 25%, #21382c 0 50%, #2e4b39 0 75%, #21382c 0);
}

.menu-principal.tema-pantano .lago-lobby,
.menu-principal.tema-pantano .arvore-lobby,
.menu-principal.tema-pantano .pedra-lobby,
.menu-principal.tema-pantano .flores-lobby {
    display: none;
}

.menu-principal.tema-pantano .decoracao-lobby-pantano { display: block; }

.arvore-pantano-lobby {
    width: 96px;
    height: 138px;
    background: #4a4430;
    border: 7px solid #17281f;
    box-shadow: inset 15px 0 0 #6a6139, 8px 8px 0 rgba(10, 22, 16, .4);
    clip-path: polygon(42% 0, 62% 0, 62% 24%, 88% 13%, 96% 25%, 67% 41%, 67% 100%, 32% 100%, 32% 46%, 2% 30%, 11% 18%, 36% 31%, 36% 0);
}

.arvore-pantano-lobby::after {
    position: absolute;
    left: -28px;
    top: -18px;
    width: 142px;
    height: 56px;
    content: "";
    background: #2d5737;
    border-bottom: 9px solid #1a3626;
    box-shadow: inset 24px 12px 0 #557344;
    clip-path: polygon(8% 22%, 35% 22%, 35% 0, 67% 0, 67% 18%, 93% 18%, 93% 40%, 100% 40%, 100% 82%, 74% 82%, 74% 100%, 26% 100%, 26% 84%, 0 84%, 0 42%, 8% 42%);
}

.arvore-pantano-lobby-1 { left: 5%; bottom: 4%; transform: scale(.85); }
.arvore-pantano-lobby-2 { right: 6%; top: 6%; transform: scale(.72) rotate(4deg); }

.poca-toxica-lobby {
    right: 18%;
    bottom: 9%;
    width: 150px;
    height: 72px;
    background: #87b94c;
    border: 8px solid #172b22;
    box-shadow: inset 0 0 0 11px #54753d, 7px 7px 0 rgba(9, 22, 15, .4);
    clip-path: polygon(12% 0, 82% 0, 82% 12%, 100% 12%, 100% 78%, 88% 78%, 88% 100%, 16% 100%, 16% 88%, 0 88%, 0 20%, 12% 20%);
}

.poca-toxica-lobby::after {
    position: absolute;
    left: 34px;
    top: 22px;
    width: 18px;
    height: 12px;
    content: "";
    background: #d4ef72;
    box-shadow: 52px 13px 0 #b9dd62, 74px -5px 0 #d4ef72;
}

.juncos-pantano-lobby {
    width: 7px;
    height: 61px;
    background: #496b39;
    box-shadow: 17px 8px 0 #3e6136, 34px -3px 0 #557844;
}

.juncos-pantano-lobby::before {
    position: absolute;
    left: -3px;
    top: -12px;
    width: 13px;
    height: 18px;
    content: "";
    background: #9fba53;
    box-shadow: 17px 8px 0 #aeca58, 34px -3px 0 #8eaa4a;
}

.juncos-pantano-lobby-1 { left: 21%; top: 12%; transform: scale(.9); }
.juncos-pantano-lobby-2 { right: 33%; top: 18%; transform: scale(.72); }

.cogumelo-pantano-lobby {
    width: 58px;
    height: 36px;
    background: #5b7d46;
    border: 5px solid #183024;
    border-radius: 50% 50% 8px 8px;
    box-shadow: inset 13px 7px 0 #8fb653, 5px 5px 0 rgba(10, 24, 17, .38);
}

.cogumelo-pantano-lobby::before {
    position: absolute;
    left: 21px;
    top: 31px;
    width: 16px;
    height: 31px;
    content: "";
    background: #d4dba0;
    border: 4px solid #354333;
}

.cogumelo-pantano-lobby::after {
    position: absolute;
    left: 13px;
    top: 10px;
    width: 8px;
    height: 8px;
    content: "";
    background: #c9ef69;
    box-shadow: 24px 7px 0 #d9f27b;
}

.cogumelo-pantano-lobby-1 { left: 12%; top: 15%; transform: scale(.85); }
.cogumelo-pantano-lobby-2 { right: 13%; bottom: 15%; transform: scale(.72); }
.cogumelo-pantano-lobby-central { left: 42%; top: 43%; transform: scale(.62); }

.menu-principal.tema-pantano .lobby-selo {
    color: #203321;
    background: #b7ef5c;
    border-color: #e0f58d;
    box-shadow: 6px 6px 0 #17281e;
}

.menu-principal.tema-pantano .menu-subtitulo,
.menu-principal.tema-pantano .lobby-topo h1 span { color: #c9ed70; }

.menu-principal.tema-pantano .botao-configuracoes-lobby,
.menu-principal.tema-pantano .lobby-status span {
    background: #36583d;
    border-color: #718d4c;
}

.menu-principal.tema-pantano .lobby-rodape {
    background: rgba(28, 54, 39, .96);
    border-color: #78934e #78934e #102219;
}

.menu-principal.tema-pantano .conteudo-menu {
    --fundo-conteudo-menu: #294936;
    background: var(--fundo-conteudo-menu);
    border-color: #9dbb58;
    box-shadow: 8px 8px 0 #102219;
}

.menu-principal.tema-pantano .album-cartao,
.menu-principal.tema-pantano .missao-cartao,
.menu-principal.tema-pantano .premio-colecao,
.menu-principal.tema-pantano .conquista-cartao,
.menu-principal.tema-pantano .tutorial-lista li {
    background: #365640;
    border-color: #77904d;
    box-shadow: 3px 3px 0 #102219;
}

.menu-principal.tema-pantano .credito-criador {
    background: rgba(28, 55, 39, .96);
    border-color: #9dbb58;
}

.decoracao-lobby-primordial {
    position: absolute;
    display: none;
}

.menu-principal.tema-primordial {
    --contorno-lobby: #101d14;
    background-color: #294b2e;
    background-image: conic-gradient(#355c35 25%, #23432a 0 50%, #355c35 0 75%, #23432a 0);
}

.menu-principal.tema-primordial .lago-lobby,
.menu-principal.tema-primordial .arvore-lobby,
.menu-principal.tema-primordial .pedra-lobby,
.menu-principal.tema-primordial .flores-lobby {
    display: none;
}

.menu-principal.tema-primordial .decoracao-lobby-primordial { display: block; }

.arvore-primordial-lobby {
    width: 105px;
    height: 150px;
    background: #49351f;
    border: 8px solid #15291b;
    box-shadow: inset 17px 0 0 #76502c, 8px 8px 0 rgba(7, 18, 11, .45);
    clip-path: polygon(39% 0, 63% 0, 63% 22%, 91% 9%, 99% 22%, 68% 40%, 68% 100%, 30% 100%, 30% 45%, 0 27%, 10% 14%, 38% 30%);
}

.arvore-primordial-lobby::after {
    position: absolute;
    left: -34px;
    top: -25px;
    width: 164px;
    height: 67px;
    content: "";
    background: #234e2b;
    border-bottom: 10px solid #17371f;
    box-shadow: inset 26px 13px 0 #3e7339;
    clip-path: polygon(7% 22%, 31% 22%, 31% 0, 70% 0, 70% 17%, 94% 17%, 94% 38%, 100% 38%, 100% 83%, 75% 83%, 75% 100%, 24% 100%, 24% 84%, 0 84%, 0 42%, 7% 42%);
}

.arvore-primordial-lobby-1 { left: 4%; bottom: 3%; transform: scale(.9); }
.arvore-primordial-lobby-2 { right: 5%; top: 5%; transform: scale(.75) rotate(3deg); }

.samambaia-primordial-lobby {
    width: 7px;
    height: 74px;
    background: #1b4428;
    box-shadow: -29px 17px 0 -1px #3f773d, 29px 29px 0 -1px #356b36;
}

.samambaia-primordial-lobby::before,
.samambaia-primordial-lobby::after {
    position: absolute;
    width: 50px;
    height: 42px;
    content: "";
    background: #4b8440;
    clip-path: polygon(47% 100%, 43% 67%, 0 76%, 34% 55%, 4% 29%, 39% 43%, 29% 0, 51% 39%, 73% 0, 62% 45%, 100% 27%, 68% 57%, 100% 78%, 58% 68%, 53% 100%);
}

.samambaia-primordial-lobby::before { left: -22px; top: -12px; }
.samambaia-primordial-lobby::after { left: -20px; top: 23px; transform: scale(.8); }
.samambaia-primordial-lobby-1 { left: 20%; top: 10%; transform: scale(.9); }
.samambaia-primordial-lobby-2 { right: 25%; bottom: 9%; transform: scale(.75); }

.cristal-ambar-lobby {
    width: 42px;
    height: 72px;
    background: #b86627;
    border: 6px solid #4b331d;
    box-shadow: inset 11px 0 0 #e9a23a, inset -7px 0 0 #7e461f, 6px 6px 0 rgba(10, 20, 13, .4);
    clip-path: polygon(50% 0, 94% 35%, 78% 100%, 22% 100%, 5% 35%);
}

.cristal-ambar-lobby::after {
    position: absolute;
    left: 17px;
    top: 17px;
    width: 7px;
    height: 34px;
    content: "";
    background: #ffd66b;
}

.cristal-ambar-lobby-1 { left: 11%; top: 12%; transform: scale(.85); }
.cristal-ambar-lobby-2 { right: 14%; bottom: 14%; transform: scale(.7); }
.cristal-ambar-lobby-central { left: 43%; top: 44%; transform: scale(.58); }

.ossos-primordiais-lobby {
    right: 32%;
    top: 14%;
    width: 100px;
    height: 14px;
    background: #d4c58b;
    border: 5px solid #4c5137;
    box-shadow: -8px -7px 0 #d4c58b, 87px -7px 0 #d4c58b;
    transform: rotate(-7deg) scale(.78);
}

.menu-principal.tema-primordial .lobby-selo {
    color: #3d2818;
    background: #e4a23b;
    border-color: #ffd66b;
    box-shadow: 6px 6px 0 #14261a;
}

.menu-principal.tema-primordial .menu-subtitulo,
.menu-principal.tema-primordial .lobby-topo h1 span { color: #e8b957; }

.menu-principal.tema-primordial .botao-configuracoes-lobby,
.menu-principal.tema-primordial .lobby-status span {
    background: #36583d;
    border-color: #9b7739;
}

.menu-principal.tema-primordial .lobby-rodape {
    background: rgba(27, 51, 34, .96);
    border-color: #9b7739 #9b7739 #102219;
}

.menu-principal.tema-primordial .conteudo-menu {
    --fundo-conteudo-menu: #294936;
    background: var(--fundo-conteudo-menu);
    border-color: #c6923b;
    box-shadow: 8px 8px 0 #102219;
}

.menu-principal.tema-primordial .album-cartao,
.menu-principal.tema-primordial .missao-cartao,
.menu-principal.tema-primordial .premio-colecao,
.menu-principal.tema-primordial .conquista-cartao,
.menu-principal.tema-primordial .tutorial-lista li {
    background: #365640;
    border-color: #8a703c;
    box-shadow: 3px 3px 0 #102219;
}

.menu-principal.tema-primordial .credito-criador {
    background: rgba(28, 55, 39, .96);
    border-color: #c6923b;
}

.decoracao-lobby-futurista {
    position: absolute;
    display: none;
}

.menu-principal.tema-futurista {
    --contorno-lobby: #050b16;
    background-color: #101b31;
    background-image:
        linear-gradient(rgba(71, 229, 242, .08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(229, 78, 217, .07) 2px, transparent 2px),
        linear-gradient(#152844, #0c172a);
    background-size: 52px 52px, 52px 52px, auto;
}

.menu-principal.tema-futurista .lago-lobby,
.menu-principal.tema-futurista .arvore-lobby,
.menu-principal.tema-futurista .pedra-lobby,
.menu-principal.tema-futurista .flores-lobby {
    display: none;
}

.menu-principal.tema-futurista .decoracao-lobby-futurista { display: block; }

.predio-neon-lobby {
    width: 82px;
    height: 172px;
    background:
        repeating-linear-gradient(0deg, transparent 0 18px, #45f1ed 18px 24px),
        #1b304d;
    border: 8px solid #07101d;
    box-shadow: inset 15px 0 0 #263f60, 8px 8px 0 rgba(1, 5, 12, .52);
}

.predio-neon-lobby::after {
    position: absolute;
    inset: 17px 14px;
    content: "";
    border-left: 7px solid #e955dc;
    border-right: 7px solid #e955dc;
}

.predio-neon-lobby-1 { left: 3%; bottom: 3%; transform: scale(.88); }
.predio-neon-lobby-2 { right: 5%; top: 4%; transform: scale(.72); }

.arvore-holografica-lobby {
    width: 70px;
    height: 92px;
    opacity: .78;
    background: linear-gradient(90deg, transparent 44%, #e955dc 44% 56%, transparent 56%);
    border: 5px solid #45f1ed;
    clip-path: polygon(50% 0, 76% 26%, 65% 26%, 91% 57%, 66% 57%, 100% 85%, 58% 85%, 58% 100%, 42% 100%, 42% 85%, 0 85%, 34% 57%, 9% 57%, 35% 26%, 24% 26%);
    filter: drop-shadow(0 0 8px rgba(69, 241, 237, .58));
}

.arvore-holografica-lobby-1 { left: 20%; top: 8%; transform: scale(.88); }
.arvore-holografica-lobby-2 { right: 24%; bottom: 8%; transform: scale(.72); }

.linha-neon-lobby {
    width: 180px;
    height: 8px;
    background: #45f1ed;
    box-shadow: 22px 15px 0 #e955dc, 55px -13px 0 #243f61;
    opacity: .52;
}

.linha-neon-lobby-1 { left: 34%; top: 10%; }
.linha-neon-lobby-2 { right: 30%; bottom: 13%; transform: rotate(-6deg); }

.menu-principal.tema-futurista .lobby-selo {
    color: #07101d;
    background: #45f1ed;
    border-color: #c8ffff;
    box-shadow: 6px 6px 0 #e955dc;
}

.menu-principal.tema-futurista .menu-subtitulo,
.menu-principal.tema-futurista .lobby-topo h1 span { color: #53f5ff; }

.menu-principal.tema-futurista .botao-configuracoes-lobby,
.menu-principal.tema-futurista .lobby-status span {
    background: #1b304d;
    border-color: #45f1ed;
}

.menu-principal.tema-futurista .lobby-rodape,
.menu-principal.tema-futurista .credito-criador {
    background: rgba(7, 16, 29, .96);
    border-color: #e955dc;
}

.menu-principal.tema-futurista .conteudo-menu {
    --fundo-conteudo-menu: #101f37;
    background: var(--fundo-conteudo-menu);
    border-color: #45f1ed;
    box-shadow: 8px 8px 0 #050b16;
}

.menu-principal.tema-futurista .album-cartao,
.menu-principal.tema-futurista .missao-cartao,
.menu-principal.tema-futurista .premio-colecao,
.menu-principal.tema-futurista .conquista-cartao,
.menu-principal.tema-futurista .tutorial-lista li {
    background: #18304b;
    border-color: #e955dc;
    box-shadow: 3px 3px 0 #050b16;
}

.menu-cartao {
    position: relative;
    z-index: 1;
    width: min(1060px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 30px 22px;
    scrollbar-width: thin;
    scrollbar-color: #90ee55 var(--grama-escura);
}

.credito-criador {
    position: fixed;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    margin: 0;
    padding: 7px 10px;
    color: #d7e7d0;
    background: rgba(12, 28, 19, .92);
    border: 3px solid #5f9b60;
    box-shadow: 4px 4px 0 var(--contorno-lobby);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.credito-criador strong {
    color: #fff36a;
    font: inherit;
}

.menu-principal.tema-deserto .credito-criador {
    background: rgba(92, 59, 37, .94);
    border-color: #dda557;
}

.menu-principal.tema-artico .credito-criador {
    background: rgba(40, 86, 108, .94);
    border-color: #b9e9f5;
}

.lobby-topo {
    position: relative;
    padding: 6px 82px 4px;
    text-align: center;
}

.lobby-selo {
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #17300f;
    background: #8ee94c;
    border: 5px solid #d7ff9b;
    outline: 5px solid var(--contorno-lobby);
    box-shadow: 6px 6px 0 #24492a;
    font-size: .9rem;
    font-weight: 900;
}

.lobby-atalhos {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    gap: 9px;
}

.botao-configuracoes-lobby {
    min-width: 104px;
    min-height: 42px;
    padding: 8px 10px;
    color: #edf7e8;
    background: #234c2d;
    border: 4px solid #5f9b60;
    box-shadow: 4px 4px 0 #24492a;
    cursor: pointer;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.botao-configuracoes-lobby {
    color: #f4edff;
    background: #46346b;
    border-color: #8f70c7;
}

.botao-configuracoes-lobby:hover,
.botao-configuracoes-lobby[aria-expanded="true"] {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #24492a;
}

.botao-configuracoes-lobby[aria-expanded="true"] {
    color: #241735;
    background: #d8c4ff;
    border-color: #f0e8ff;
}

.menu-subtitulo {
    margin: 0 0 6px;
    color: #fff36a;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-shadow: 2px 2px 0 #24492a;
    text-transform: uppercase;
}

.lobby-topo h1 {
    margin: 0;
    color: #ffffff;
    font-family: Impact, "Arial Black", "Courier New", monospace;
    font-size: clamp(3rem, 7.4vw, 6.4rem);
    font-weight: 900;
    letter-spacing: .01em;
    line-height: .92;
    text-transform: uppercase;
    -webkit-text-stroke: 3px var(--contorno-lobby);
    text-shadow: 0 7px 0 #24492a, 5px 12px 0 #142c1a;
}

.lobby-topo h1 span { color: #b4f157; }
.lobby-topo h1 strong { color: #fff267; font: inherit; }

.lobby-topo > p:last-child {
    margin: 16px 0 0;
    color: #edf7e8;
    font-size: .78rem;
    font-weight: 800;
    text-shadow: 2px 2px 0 #24492a;
    text-transform: uppercase;
}

.lobby-acoes {
    min-height: 300px;
    padding: 25px 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 7vw, 86px);
}

.lobby-acoes-extras {
    margin: -16px 0 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.botao-lobby-extra {
    min-width: 254px;
    min-height: 64px;
    padding: 10px 18px;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    color: #ffffff;
    background: #274b32;
    border: 4px solid #79a764;
    box-shadow: 6px 6px 0 #16321e;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 90ms steps(1), box-shadow 90ms steps(1);
}

.botao-lobby-extra:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 #16321e;
}

.botao-lobby-extra span {
    grid-row: 1 / 3;
    color: #ffe66f;
    font-family: Impact, "Arial Black", monospace;
    font-size: 2rem;
    text-align: center;
}

.botao-lobby-extra strong {
    font-size: .78rem;
    letter-spacing: .05em;
}

.botao-lobby-extra small {
    color: #c9d8cb;
    font-size: .53rem;
    font-weight: 800;
}

.botao-lobby-infinito {
    background: #3e315e;
    border-color: #a681dd;
    box-shadow: 6px 6px 0 #251b3b;
}

.botao-lobby-infinito:hover {
    box-shadow: 3px 3px 0 #251b3b;
}

.botao-lobby-missoes {
    background: #264c62;
    border-color: #72bdd7;
    box-shadow: 6px 6px 0 #163143;
}

.botao-lobby-missoes:hover {
    box-shadow: 3px 3px 0 #163143;
}

.botao-lobby-apoiador {
    background: #672d68;
    border-color: #ee8bd8;
    box-shadow: 6px 6px 0 #39183e;
}

.botao-lobby-apoiador:hover {
    box-shadow: 3px 3px 0 #39183e;
}

.botao-lobby-conquistas {
    background: #684c21;
    border-color: #e4bd51;
    box-shadow: 6px 6px 0 #3b2a12;
}

.botao-lobby-conquistas:hover {
    box-shadow: 3px 3px 0 #3b2a12;
}

.botao-lobby {
    width: 160px;
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #ffffff;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}

.icone-lobby {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #f0b62e;
    border: 7px solid #ffe970;
    outline: 6px solid var(--contorno-lobby);
    box-shadow: 8px 8px 0 #24492a;
    font-family: Impact, "Arial Black", monospace;
    font-size: 3.7rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 90ms steps(1), box-shadow 90ms steps(1);
}

.icone-album { background: #f0b62e; }
.icone-fases { color: #10263d; background: #55aee4; border-color: #afe5ff; }
.icone-tutorial { color: #203311; background: #9adb3e; border-color: #d5f56a; }

.icone-jogar {
    width: 168px;
    height: 168px;
    padding-left: 12px;
    color: #ffffff;
    background: #79db39;
    border-color: #c8f365;
    font-size: 5.6rem;
    box-shadow: 10px 10px 0 #24492a;
}

.botao-lobby:hover .icone-lobby {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 #24492a;
}

.botao-lobby strong {
    font-size: .86rem;
    letter-spacing: .06em;
    text-shadow: 3px 3px 0 #24492a;
}

.botao-lobby small {
    margin-top: -6px;
    color: #e3eddc;
    font-size: .58rem;
    font-weight: 800;
    text-shadow: 2px 2px 0 #24492a;
}

.botao-lobby-jogar { width: 210px; }
.botao-lobby-jogar strong { color: #fff46b; font-size: 1rem; }

.lobby-rodape {
    min-height: 72px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(24, 68, 39, .9);
    border-top: 5px solid #76a967;
    border-bottom: 5px solid #24492a;
}

.lobby-jogador {
    display: flex;
    align-items: center;
    gap: 11px;
}

.lobby-jogador small,
.lobby-jogador strong { display: block; }

.lobby-jogador small {
    color: #fff36a;
    font-size: .58rem;
    font-weight: 900;
}

.lobby-jogador strong {
    margin-top: 3px;
    font-size: .72rem;
    text-shadow: 2px 2px 0 #142c1a;
}

.lobby-avatar {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    color: #3f3510;
    background: #f4d43e;
    border: 4px solid #fff17a;
    outline: 3px solid var(--contorno-lobby);
    font-size: .68rem;
    font-weight: 900;
}

.lobby-jogador-apoiador .lobby-avatar {
    color: #351337;
    background: #f08adc;
    border-color: #ffd1f3;
    box-shadow: 4px 4px 0 #3b1d43;
}

.lobby-jogador-apoiador small { color: #ffb7ed; }
.lobby-jogador-apoiador strong { color: #fff3aa; }

.lobby-status { display: flex; gap: 8px; }

.lobby-status span {
    min-width: 82px;
    padding: 7px 9px;
    color: #e4efdd;
    background: #234c2d;
    border: 3px solid #5f9b60;
    font-size: .56rem;
    text-align: center;
    text-transform: uppercase;
}

.lobby-status strong {
    display: block;
    margin-bottom: 2px;
    color: #fff56e;
    font-size: .82rem;
}

/* Conteúdo expandido do Álbum e Tutorial */
.conteudo-menu {
    --fundo-conteudo-menu: #173d29;
    width: 100%;
    margin-top: 18px;
    padding: 24px 28px 30px;
    color: var(--texto);
    background: var(--fundo-conteudo-menu);
    border: 6px solid #d0aa66;
    outline: 5px solid var(--contorno-lobby);
    box-shadow: 8px 8px 0 #142c1a;
}

.conteudo-menu:empty { display: none; }

.menu-principal.pagina-menu-aberta {
    overflow: hidden;
}

.menu-principal.pagina-menu-aberta .menu-cartao {
    z-index: 3;
    overflow: hidden;
}

.menu-principal .conteudo-menu.conteudo-menu-tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 4;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    max-height: none;
    margin: 0;
    padding: clamp(18px, 3vw, 42px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 0;
    outline: 0;
    box-shadow: inset 0 0 0 6px rgba(2, 7, 4, .42);
}

.conteudo-menu-tela-cheia .conteudo-cabecalho {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px 14px 15px;
    background: var(--fundo-conteudo-menu);
    border-bottom: 4px solid rgba(255, 255, 255, .16);
    box-shadow: 0 7px 0 rgba(2, 7, 4, .22);
}

.fase-secreta-painel {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding: 28px;
    overflow: hidden;
    color: #eafef8;
    background:
        linear-gradient(90deg, transparent 47%, rgba(63, 255, 224, .09) 47% 52%, transparent 52%),
        #160d24;
    border: 5px solid #b83cff;
    box-shadow: 7px 7px 0 #07140f, inset 0 0 0 4px #352050;
}

.fase-secreta-painel::before {
    position: absolute;
    inset: 10px 0 auto;
    height: 6px;
    content: "";
    background: #39edd3;
    box-shadow: 210px 46px 0 #e74cff, -80px 122px 0 #39edd3, 370px 180px 0 #fff36a;
    opacity: .65;
}

.fase-secreta-painel small,
.fase-secreta-painel strong,
.fase-secreta-painel p {
    position: relative;
    display: block;
}

.camada-conversa-portal {
    position: fixed;
    inset: 0;
    z-index: 32;
    padding: clamp(14px, 3vw, 34px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(8, 2, 14, .68);
    backdrop-filter: blur(2px) saturate(.7);
}

.camada-conversa-portal[hidden] {
    display: none;
}

.balao-conversa-portal {
    position: relative;
    width: min(1040px, calc(100vw - 48px));
    min-height: 238px;
    padding: 26px 64px 24px 192px;
    overflow: visible;
    color: #f8f2ff;
    background:
        linear-gradient(90deg, rgba(231, 76, 255, .08), transparent 32%),
        #3b2159;
    border: 6px solid #f6edff;
    outline: 5px solid #13081c;
    box-shadow:
        9px 9px 0 rgba(5, 2, 9, .82),
        inset 0 0 0 7px #7a43a0;
}

.balao-conversa-portal::after {
    position: absolute;
    right: 13%;
    bottom: -19px;
    width: 30px;
    height: 22px;
    content: "";
    background: #4cead5;
    border: 5px solid #150b20;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.portal-retrato-conversa {
    position: absolute;
    left: 28px;
    bottom: 26px;
    width: 132px;
    height: 164px;
    display: grid;
    place-items: center;
    color: #fff36a;
    background:
        linear-gradient(90deg, transparent 44%, rgba(60, 245, 218, .18) 44% 55%, transparent 55%),
        linear-gradient(#12081d 0 13%, #55206f 13% 24%, #170b25 24% 78%, #7d2690 78% 91%, #100719 91%);
    border: 6px solid #16091f;
    outline: 4px solid #ce54ef;
    clip-path: polygon(18% 0, 82% 0, 82% 5%, 94% 5%, 94% 14%, 100% 14%, 100% 86%, 92% 86%, 92% 96%, 76% 96%, 76% 100%, 24% 100%, 24% 96%, 8% 96%, 8% 86%, 0 86%, 0 14%, 6% 14%, 6% 5%, 18% 5%);
    box-shadow:
        inset 9px 0 0 rgba(47, 233, 207, .18),
        inset -9px 0 0 rgba(224, 70, 255, .22),
        8px 0 0 #39e7d0,
        -8px 8px 0 #df4dff;
    animation: falha-retrato-portal 1.1s steps(2, end) infinite;
}

.portal-retrato-conversa::before,
.portal-retrato-conversa::after {
    position: absolute;
    content: "";
    background: #47edd5;
}

.portal-retrato-conversa::before {
    top: 18px;
    right: -12px;
    width: 18px;
    height: 8px;
    box-shadow: -5px 94px 0 #e653ff;
}

.portal-retrato-conversa::after {
    right: 22px;
    bottom: -10px;
    width: 10px;
    height: 17px;
    background: #e653ff;
}

.portal-retrato-conversa > span {
    font-family: "Courier New", monospace;
    font-size: 3.2rem;
    font-weight: 900;
    text-shadow: 5px 0 #dd45ff, -5px 0 #32e8d0;
}

.balao-senhor-do-tempo {
    background:
        linear-gradient(90deg, rgba(65, 241, 214, .13), transparent 34%),
        repeating-linear-gradient(0deg, transparent 0 12px, rgba(231, 76, 255, .055) 12px 14px),
        #241638;
    border-color: #dffdf8;
    box-shadow:
        9px 9px 0 rgba(5, 2, 9, .88),
        inset 0 0 0 7px #52316c;
}

.retrato-senhor-do-tempo {
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 44%, rgba(60, 245, 218, .16) 44% 55%, transparent 55%),
        linear-gradient(#100718 0 18%, #2e1742 18% 100%);
}

.senhor-tempo-corpo {
    position: absolute;
    right: 10%;
    bottom: -8%;
    left: 10%;
    height: 55%;
    background: #17101f;
    border: 5px solid #09060d;
    clip-path: polygon(20% 0, 80% 0, 80% 8%, 92% 8%, 92% 20%, 100% 20%, 100% 100%, 0 100%, 0 20%, 8% 20%, 8% 8%, 20% 8%);
    box-shadow: inset 13px 0 #3ee6d0, inset -13px 0 #c84de6;
}

.senhor-tempo-corpo::before {
    position: absolute;
    top: 19%;
    left: 42%;
    width: 16%;
    height: 64%;
    content: "";
    background: #fff36a;
    box-shadow: 0 12px 0 #d84ff0, 0 24px 0 #47ecd5;
}

.senhor-tempo-forma-humana .senhor-tempo-corpo {
    z-index: 1;
    right: 2%;
    bottom: -14%;
    left: 2%;
    height: 72%;
    background: #171a2b;
    clip-path: polygon(32% 0, 68% 0, 68% 5%, 82% 5%, 82% 11%, 92% 11%, 92% 22%, 100% 22%, 92% 100%, 8% 100%, 0 22%, 8% 22%, 8% 11%, 18% 11%, 18% 5%, 32% 5%);
    box-shadow: inset 10px 0 #343b5c, inset -8px 0 #10121f;
}

.senhor-tempo-forma-humana .senhor-tempo-corpo::before,
.senhor-tempo-forma-humana .senhor-tempo-corpo::after {
    position: absolute;
    z-index: 2;
    content: "";
    box-shadow: none;
}

.senhor-tempo-forma-humana .senhor-tempo-corpo::before {
    top: 2%;
    left: 36%;
    width: 28%;
    height: 76%;
    background: #fff5d6;
    clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%);
}

.senhor-tempo-forma-humana .senhor-tempo-corpo::after {
    top: 10%;
    left: 46%;
    width: 9%;
    height: 58%;
    background: #bd315f;
    clip-path: polygon(0 0, 100% 0, 82% 22%, 100% 88%, 50% 100%, 0 88%, 18% 22%);
}

.senhor-tempo-forma-humana .senhor-tempo-braco {
    position: absolute;
    z-index: 3;
    display: block;
    background: #343b5c;
    border: 4px solid #09060d;
}

.senhor-tempo-forma-humana .senhor-tempo-braco-solto {
    top: 22%;
    bottom: 2%;
    left: -1%;
    width: 26%;
    clip-path: polygon(18% 0, 100% 5%, 86% 100%, 0 100%, 6% 22%);
}

.senhor-tempo-forma-humana .senhor-tempo-braco-no-bolso {
    top: 20%;
    right: -1%;
    width: 38%;
    height: 72%;
    clip-path: polygon(15% 0, 74% 4%, 100% 28%, 86% 57%, 39% 100%, 4% 89%, 0 74%, 50% 52%);
}

.senhor-tempo-forma-humana .senhor-tempo-braco-no-bolso::after {
    position: absolute;
    right: 27%;
    bottom: 2%;
    width: 27%;
    height: 13%;
    content: "";
    background: #fff5d6;
}

.senhor-tempo-forma-humana .senhor-tempo-bolso {
    position: absolute;
    z-index: 4;
    right: 17%;
    bottom: 10%;
    width: 28%;
    height: 7%;
    display: block;
    background: #09060d;
    border-top: 4px solid #596487;
    transform: rotate(-8deg);
}

.senhor-tempo-cabeca {
    position: absolute;
    z-index: 5;
    top: 8%;
    left: 21%;
    width: 58%;
    aspect-ratio: 1;
    background:
        linear-gradient(#fff36a 0 9%, transparent 9% 91%, #fff36a 91%),
        linear-gradient(90deg, #fff36a 0 9%, #ddd4ac 9% 91%, #fff36a 91%);
    border: 6px solid #0b0810;
    border-radius: 50%;
    box-shadow: 5px 0 #44ecd5, -5px 5px #d94def;
}

.senhor-tempo-forma-humana .senhor-tempo-cabeca {
    top: 2%;
    left: 26%;
    width: 48%;
}

.senhor-tempo-cabeca::before,
.senhor-tempo-cabeca::after {
    position: absolute;
    left: 46%;
    width: 8%;
    height: 12%;
    content: "";
    background: #261b2e;
    box-shadow: 0 44px 0 #261b2e;
}

.senhor-tempo-cabeca::before { top: 5%; }
.senhor-tempo-cabeca::after { top: 40%; transform: rotate(90deg); }

.ponteiro-relogio {
    position: absolute;
    z-index: 2;
    left: calc(50% - 2px);
    bottom: 50%;
    width: 4px;
    background: #211329;
    transform-origin: 50% 100%;
}

.ponteiro-relogio-hora {
    height: 25%;
    transform: rotate(55deg);
}

.ponteiro-relogio-minuto {
    height: 36%;
    background: #a52bd0;
    animation: girar-ponteiro-senhor-tempo 2.4s steps(12, end) infinite;
}

.centro-relogio {
    position: absolute;
    z-index: 3;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background: #45e7d2;
    border: 2px solid #17101f;
}

.botao-avancar-senhor-tempo {
    width: min(100%, 360px);
    color: #0c1714;
    background: #62e7d3;
    border-color: #dcfff9;
    box-shadow: 5px 5px 0 #b33ed1;
}

@keyframes girar-ponteiro-senhor-tempo {
    to { transform: rotate(360deg); }
}

.conversa-portal-conteudo {
    min-width: 0;
}

.conversa-portal-conteudo > small {
    display: block;
    color: #58eed9;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.conversa-portal-conteudo h2 {
    margin: 7px 0 4px;
    color: #fff36a;
    font-size: 1.18rem;
    text-shadow: 3px 0 #d82cff, -3px 0 #1bcfbd;
}

.conversa-portal-fala {
    min-height: 48px;
    margin: 0 0 18px;
    color: #d9c7ef;
    font-family: "Courier New", monospace;
    font-size: clamp(.78rem, 1.7vw, 1.02rem);
    line-height: 1.45;
}

.conversa-portal-fala[data-autor="jogador"] {
    color: #8ff2df;
    text-shadow: 2px 0 rgba(74, 235, 211, .2);
}

.conversa-portal-jogador {
    margin: 6px 0 2px;
    color: #8ff2df;
    font-size: .65rem;
}

.conversa-portal-escolhas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.botao-conversa-portal {
    min-height: 48px;
    padding: 9px;
    color: #f3eaff;
    background: #241331;
    border-color: #ad59c9;
    border-radius: 0;
    box-shadow: 4px 4px 0 #100a18;
}

.botao-conversa-portal:hover,
.botao-conversa-portal:focus-visible {
    color: #091410;
    background: #61e6d2;
    border-color: #c7fff6;
}

.botao-fechar-conversa-portal {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #fff;
    background: #271333;
    border-color: #d982ef;
    border-radius: 0;
    box-shadow: 3px 3px 0 #100717;
}

@keyframes falha-retrato-portal {
    0%, 72% { transform: translate(0, 0); filter: brightness(1); }
    73%, 86% { transform: translate(3px, -2px); filter: brightness(1.3); }
    87%, 100% { transform: translate(-2px, 1px); filter: brightness(.9); }
}

@media (max-width: 700px) {
    .camada-conversa-portal {
        padding: 12px;
    }

    .balao-conversa-portal {
        width: 100%;
        min-height: 0;
        padding: 78px 14px 16px;
        border-width: 4px;
        outline-width: 3px;
        box-shadow: 5px 5px 0 rgba(5, 2, 9, .82), inset 0 0 0 4px #7a43a0;
    }

    .portal-retrato-conversa {
        top: -28px;
        bottom: auto;
        left: 18px;
        width: 72px;
        height: 92px;
        border-width: 4px;
        outline-width: 3px;
        box-shadow: 5px 0 0 #39e7d0, -5px 5px 0 #df4dff;
    }

    .portal-retrato-conversa > span {
        font-size: 2rem;
        text-shadow: 3px 0 #dd45ff, -3px 0 #32e8d0;
    }

    .conversa-portal-conteudo h2 {
        font-size: .9rem;
    }

    .conversa-portal-fala {
        min-height: 32px;
        margin-bottom: 12px;
        font-size: .72rem;
    }

    .conversa-portal-escolhas {
        gap: 6px;
    }

    .botao-conversa-portal {
        min-height: 44px;
        padding: 6px 4px;
        font-size: .57rem;
    }
}

@media (max-height: 560px) {
    .camada-conversa-portal {
        align-items: center;
    }

    .balao-conversa-portal {
        min-height: 0;
        padding-top: 58px;
    }

    .portal-retrato-conversa {
        top: -20px;
        width: 58px;
        height: 72px;
    }
}

.camada-cutscene-capitulo,
.camada-cutscene-carta {
    position: fixed;
    inset: 0;
    z-index: 90;
    padding: 22px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] {
    color: #eaffff;
    background:
        repeating-linear-gradient(0deg, rgba(83, 245, 255, .05) 0 2px, transparent 2px 8px),
        radial-gradient(circle at 50% 48%, rgba(229, 78, 217, .18), transparent 46%),
        #050b16;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .cutscene-carta-pedra {
    background: #152844;
    border-color: #45f1ed;
    box-shadow: inset 8px 6px 0 #263f60, 7px 7px 0 rgba(0, 0, 0, .48);
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .cutscene-carta-painel > small {
    color: #53f5ff;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa {
    min-height: 390px;
    padding: 32px 34px 26px;
    color: #eaffff;
    background:
        repeating-linear-gradient(0deg, rgba(83, 245, 255, .055) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, rgba(229, 85, 220, .12), transparent 42%),
        #0a1727;
    border-color: #45f1ed;
    outline-color: #02050b;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .55), inset 0 0 0 6px #1c3a57;
    transform: none;
}

.cutscene-carta-em-exibicao[data-tipo-carta="transmissao"] .carta-misteriosa {
    animation: sintonizar-radio 620ms steps(6, end) both;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa::after {
    background: #e955dc;
    box-shadow: 0 8px 0 rgba(83, 245, 255, .22);
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa-selo {
    display: none;
}

.radio-transmissao {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .radio-transmissao {
    position: relative;
    z-index: 2;
    width: 300px;
    height: 145px;
    margin: 18px auto 8px;
    display: block;
    background: #42a774;
    border: 8px solid #05060a;
    box-shadow: 10px 11px 0 rgba(0, 0, 0, .42), inset 0 0 0 4px #75c795;
}

.radio-transmissao-antena {
    position: absolute;
    top: -53px;
    right: -76px;
    z-index: -1;
    width: 106px;
    height: 8px;
    display: block;
    background: #d8e5df;
    border: 6px solid #05060a;
    transform: rotate(-45deg);
    transform-origin: left center;
}

.radio-transmissao-ponta {
    position: absolute;
    top: -93px;
    right: -66px;
    width: 25px;
    height: 25px;
    display: block;
    background: #ef1818;
    border: 7px solid #05060a;
    box-shadow: 0 0 0 4px rgba(239, 24, 24, .12);
    animation: piscar-luz-radio 760ms steps(2, end) infinite;
}

.radio-transmissao-grade {
    position: absolute;
    top: 18px;
    right: 20px;
    left: 20px;
    height: 58px;
    padding: 7px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #b4a500;
    border: 7px solid #05060a;
}

.radio-transmissao-grade i {
    width: 100%;
    height: 6px;
    display: block;
    background: #27230a;
}

.radio-transmissao-alto-falante {
    position: absolute;
    bottom: 11px;
    width: 44px;
    height: 44px;
    display: block;
    background: #11121b;
    border: 8px solid #05060a;
    box-shadow: inset 0 0 0 8px #252638;
    clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}

.radio-transmissao-alto-falante-esquerdo { left: 20px; }
.radio-transmissao-alto-falante-direito { right: 20px; }

.radio-transmissao-botao {
    position: absolute;
    bottom: 18px;
    width: 22px;
    height: 22px;
    display: block;
    background: #686a85;
    border: 7px solid #05060a;
}

.radio-transmissao-botao-esquerdo { left: 113px; }
.radio-transmissao-botao-direito { right: 95px; }

.camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa p {
    margin: 16px 0 14px;
    font-size: .82rem;
    line-height: 1.55;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa strong {
    color: #ec57df;
    font-size: .82rem;
}

.camada-cutscene-carta[data-tipo-carta="transmissao"] .botao-continuar-cutscene-carta {
    color: #07101d;
    background: #53f5ff;
    border-color: #c8ffff;
}

@keyframes sintonizar-radio {
    0% { opacity: 0; transform: scale(.78) translateY(36px); filter: brightness(.45); }
    56% { opacity: 1; transform: scale(1.03) translateY(-5px); filter: brightness(1.18); }
    100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes piscar-luz-radio {
    0%, 48% { background: #761414; box-shadow: none; }
    49%, 100% { background: #ff2828; box-shadow: 0 0 14px rgba(255, 40, 40, .82); }
}

.camada-cutscene-capitulo {
    color: #f7fff0;
    background:
        repeating-linear-gradient(0deg, rgba(104, 255, 173, .08) 0 2px, transparent 2px 8px),
        radial-gradient(circle at 50% 44%, rgba(114, 211, 93, .2), transparent 42%),
        #050d09;
}

.camada-cutscene-capitulo[hidden],
.camada-cutscene-carta[hidden] { display: none; }

.camada-cutscene-carta {
    color: #f9edc8;
    background:
        radial-gradient(circle at 18% 24%, #3a3022 0 5px, transparent 6px),
        radial-gradient(circle at 82% 72%, #4b3a25 0 8px, transparent 9px),
        repeating-linear-gradient(105deg, rgba(255, 188, 83, .035) 0 3px, transparent 3px 15px),
        #17150f;
}

.camada-cutscene-carta::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%, rgba(255, 211, 116, .18), transparent 45%);
    opacity: 0;
}

.cutscene-carta-em-exibicao::before {
    animation: iluminar-carta-encontrada 900ms steps(6, end) both;
}

.cutscene-carta-cenario {
    position: relative;
    width: min(920px, 100%);
    height: min(680px, calc(100vh - 44px));
    display: grid;
    place-items: center;
}

.cutscene-carta-pedra {
    position: absolute;
    width: 72px;
    height: 42px;
    background: #2b2a22;
    border: 5px solid #0a0b08;
    box-shadow: inset 8px 6px 0 #454234, 7px 7px 0 rgba(0, 0, 0, .38);
    clip-path: polygon(14% 18%, 62% 0, 94% 32%, 82% 92%, 18% 100%, 0 58%);
}

.cutscene-carta-pedra-1 { top: 13%; left: 7%; transform: rotate(-9deg); }
.cutscene-carta-pedra-2 { right: 5%; bottom: 12%; transform: scale(.72) rotate(17deg); }

.cutscene-carta-painel {
    position: relative;
    width: min(650px, 100%);
    padding: 24px;
    text-align: center;
    font-family: "Courier New", Consolas, monospace;
}

.cutscene-carta-painel > small {
    margin-bottom: 18px;
    display: block;
    color: #ffcf71;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-shadow: 3px 3px 0 #090804;
}

.cutscene-carta-em-exibicao .cutscene-carta-painel > small {
    animation: aparecer-titulo-carta 480ms steps(4, end) 280ms both;
}

.carta-misteriosa {
    position: relative;
    width: min(560px, 100%);
    min-height: 280px;
    margin: 0 auto;
    padding: 62px 48px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #3c2718;
    background:
        linear-gradient(135deg, transparent 0 16px, rgba(120, 72, 34, .12) 16px 19px, transparent 19px),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(99, 59, 28, .08) 31px 33px),
        #ead39a;
    border: 6px solid #6e4525;
    outline: 5px solid #0c0a06;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .48), inset 0 0 0 6px #f8e7b4;
    transform: rotate(-2deg);
}

.cutscene-carta-em-exibicao .carta-misteriosa {
    animation: erguer-carta-do-chao 760ms steps(6, end) both;
}

.carta-misteriosa::after {
    position: absolute;
    top: 18px;
    right: 20px;
    left: 20px;
    height: 4px;
    content: "";
    background: #b4874f;
    box-shadow: 0 8px 0 rgba(110, 69, 37, .3);
}

.carta-misteriosa-selo {
    position: absolute;
    top: 31px;
    left: calc(50% - 25px);
    z-index: 1;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #ffd889;
    background: #55244f;
    border: 5px solid #281126;
    border-radius: 50%;
    box-shadow: 4px 4px 0 rgba(44, 20, 14, .4);
    font-size: 1.3rem;
    font-weight: 900;
}

.carta-misteriosa p {
    margin: 20px 0 22px;
    font-size: clamp(.86rem, 2.2vw, 1.08rem);
    font-weight: 700;
    line-height: 1.7;
}

.carta-misteriosa strong {
    align-self: flex-end;
    color: #55244f;
    font-size: 1.25rem;
    letter-spacing: .18em;
}

.botao-continuar-cutscene-carta {
    min-width: 240px;
    margin-top: 28px;
    color: #2d2114;
    background: #e1b665;
    border-color: #ffdb8b;
    box-shadow: 5px 5px 0 #090804;
}

@keyframes iluminar-carta-encontrada {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes aparecer-titulo-carta {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes erguer-carta-do-chao {
    0% { opacity: 0; transform: translateY(120px) scale(.66) rotate(12deg); filter: brightness(.5); }
    58% { opacity: 1; transform: translateY(-10px) scale(1.04) rotate(-3deg); }
    100% { transform: translateY(0) scale(1) rotate(-2deg); filter: brightness(1); }
}

.camada-cutscene-capitulo::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 243, 106, .14), transparent);
    transform: translateX(-110%);
}

.cutscene-capitulo-em-exibicao::before {
    animation: varredura-cutscene-capitulo 1.3s steps(8, end) .25s both;
}

.cutscene-capitulo-painel {
    position: relative;
    width: min(760px, 100%);
    padding: clamp(28px, 5vw, 50px);
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(255, 243, 106, .08), transparent 32%),
        #10251a;
    border: 6px solid #9ce35f;
    outline: 6px solid #020704;
    box-shadow: 14px 14px 0 rgba(0, 0, 0, .72), inset 0 0 0 7px #315f35;
    font-family: "Courier New", Consolas, monospace;
}

.cutscene-capitulo-em-exibicao .cutscene-capitulo-painel {
    animation: entrada-cutscene-capitulo 620ms steps(6, end) both;
}

.cutscene-capitulo-painel > small {
    display: block;
    color: #b9f58a;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .2em;
}

.cutscene-capitulo-selo {
    position: relative;
    width: 142px;
    height: 128px;
    margin: 28px auto 18px;
    display: grid;
    place-items: center;
    color: #18311c;
    background: #b7ef5c;
    border: 6px solid #eaff9c;
    outline: 5px solid #07120c;
    box-shadow: 8px 8px 0 #07120c, inset 0 0 0 7px #75a943;
}

.cutscene-capitulo-selo strong {
    font-size: 3.8rem;
    line-height: 1;
    text-shadow: 4px 4px 0 rgba(255, 255, 255, .28);
}

.cutscene-cadeado {
    position: absolute;
    top: -43px;
    left: 43px;
    width: 48px;
    height: 48px;
    border: 9px solid #fff36a;
    border-bottom: 0;
    box-shadow: 5px 0 0 #07120c, -5px 0 0 #07120c;
}

.cutscene-capitulo-em-exibicao .cutscene-cadeado {
    animation: abrir-cadeado-capitulo 700ms steps(5, end) 620ms both;
}

.cutscene-capitulo-painel h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 7vw, 4.4rem);
    line-height: .95;
    text-shadow: 6px 0 #4ce6d0, -6px 0 #8bcf4e, 6px 6px 0 #020704;
}

.cutscene-capitulo-painel p {
    margin: 13px 0 0;
    color: #d3e8c8;
    font-size: clamp(.78rem, 2vw, 1rem);
}

.cutscene-capitulo-mensagem {
    margin: 24px auto 0;
    padding: 10px 14px;
    display: block;
    width: fit-content;
    color: #17240d;
    background: #fff36a;
    border: 3px solid #fff9ad;
    box-shadow: 4px 4px 0 #07120c;
    font-size: .72rem;
    letter-spacing: .08em;
}

.botao-continuar-cutscene {
    min-width: 230px;
    margin-top: 25px;
    color: #102617;
    background: #9ce35f;
    border-color: #ddffac;
    box-shadow: 5px 5px 0 #07120c;
}

.cutscene-capitulo-falha {
    position: absolute;
    z-index: 2;
    height: 8px;
    background: #4ce6d0;
    box-shadow: 12px 6px 0 #fff36a;
    opacity: 0;
}

.cutscene-capitulo-falha-1 { top: 18%; left: -5%; width: 32%; }
.cutscene-capitulo-falha-2 { right: -8%; bottom: 22%; width: 38%; }

.cutscene-capitulo-em-exibicao .cutscene-capitulo-falha {
    animation: falha-cutscene-capitulo 360ms steps(3, end) 1.05s 3;
}

@keyframes entrada-cutscene-capitulo {
    0% { opacity: 0; transform: scale(.72); filter: brightness(2.2); }
    45% { opacity: 1; transform: scale(1.06); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes abrir-cadeado-capitulo {
    0% { transform: translate(0, 0) rotate(0); }
    55% { transform: translate(20px, -12px) rotate(18deg); }
    100% { transform: translate(32px, -56px) rotate(28deg); opacity: 0; }
}

@keyframes falha-cutscene-capitulo {
    0%, 100% { opacity: 0; transform: translateX(0); }
    35%, 70% { opacity: .85; transform: translateX(28px); }
}

@keyframes varredura-cutscene-capitulo {
    to { transform: translateX(110%); }
}

@media (max-width: 600px) {
    .camada-cutscene-capitulo,
    .camada-cutscene-carta { padding: 14px; }
    .cutscene-carta-cenario { height: calc(100vh - 28px); }
    .cutscene-carta-painel { padding: 12px 5px; }
    .cutscene-carta-painel > small { margin-bottom: 13px; font-size: .58rem; }
    .carta-misteriosa { min-height: 310px; padding: 64px 24px 30px; border-width: 4px; outline-width: 4px; }
    .carta-misteriosa p { margin-bottom: 16px; font-size: .8rem; line-height: 1.65; }
    .camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa {
        min-height: 0;
        padding: 18px 14px 16px;
    }
    .camada-cutscene-carta[data-tipo-carta="transmissao"] .radio-transmissao {
        margin-top: 50px;
        margin-bottom: -22px;
        transform: scale(.72);
        transform-origin: top center;
    }
    .camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa p {
        margin: 0 0 10px;
        font-size: .67rem;
        line-height: 1.45;
    }
    .camada-cutscene-carta[data-tipo-carta="transmissao"] .carta-misteriosa strong {
        font-size: .64rem;
        letter-spacing: .1em;
    }
    .botao-continuar-cutscene-carta { width: 100%; min-width: 0; margin-top: 22px; }
    .cutscene-carta-pedra { transform: scale(.6); }
    .cutscene-capitulo-painel { padding: 28px 16px 24px; border-width: 4px; outline-width: 4px; }
    .cutscene-capitulo-selo { width: 108px; height: 100px; margin-top: 24px; }
    .cutscene-capitulo-selo strong { font-size: 3rem; }
    .cutscene-cadeado { top: -37px; left: 31px; width: 40px; height: 42px; border-width: 7px; }
    .cutscene-capitulo-mensagem { font-size: .6rem; line-height: 1.4; }
    .botao-continuar-cutscene { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cutscene-carta-em-exibicao::before,
    .cutscene-carta-em-exibicao .cutscene-carta-painel > small,
    .cutscene-carta-em-exibicao .carta-misteriosa,
    .cutscene-carta-em-exibicao[data-tipo-carta="transmissao"] .carta-misteriosa,
    .radio-transmissao-ponta,
    .cutscene-capitulo-em-exibicao::before,
    .cutscene-capitulo-em-exibicao .cutscene-capitulo-painel,
    .cutscene-capitulo-em-exibicao .cutscene-cadeado,
    .cutscene-capitulo-em-exibicao .cutscene-capitulo-falha {
        animation: none;
    }

    .cutscene-capitulo-em-exibicao .cutscene-cadeado {
        opacity: 0;
        transform: translate(32px, -56px) rotate(28deg);
    }
}

.fase-secreta-painel small {
    color: #53f1d9;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.fase-secreta-painel strong {
    margin-top: 10px;
    color: #fff36a;
    font-size: 1.3rem;
    text-transform: uppercase;
    text-shadow: 3px 0 #d82cff, -3px 0 #1bcfbd;
}

.fase-secreta-painel p {
    max-width: 540px;
    margin: 12px 0 22px;
    color: #cbbfe0;
    font-size: .74rem;
    line-height: 1.7;
}

.botao-entrar-fase-secreta {
    position: relative;
    min-height: 46px;
    color: #12091f;
    background: #55f0d7;
    border-color: #d8fff8;
    border-radius: 0;
    box-shadow: 4px 4px 0 #b83cff;
}

.conteudo-cabecalho {
    margin-bottom: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.conteudo-cabecalho h2 {
    margin: 0;
    color: #fff36a;
    font-size: 1.4rem;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #142c1a;
}

.conteudo-cabecalho p {
    margin: 6px 0 0;
    color: #c7d8c0;
    font-size: .72rem;
}

.botao-fechar {
    min-height: 34px;
    padding: 7px 10px;
    color: #ffffff;
    background: #5b3e25;
    border-color: #d0aa66;
    border-radius: 0;
    box-shadow: 3px 3px 0 #142c1a;
    font-size: .68rem;
}

.album-secao + .album-secao { margin-top: 26px; }

.album-secao h3 {
    margin: 0 0 10px;
    color: #b9d1b1;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.album-abas {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.album-aba {
    min-width: 0;
    padding-inline: 8px;
}

.album-categoria-cabecalho {
    margin-bottom: 12px;
}

.album-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.loja-saldo {
    margin-bottom: 16px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff6c3;
    background: #263d2c;
    border: 4px solid #70844d;
    box-shadow: 4px 4px 0 #122218;
}

.loja-saldo > span {
    color: #ffe66f;
    font-size: 2rem;
    line-height: 1;
}

.loja-saldo small,
.loja-saldo strong {
    display: block;
}

.loja-saldo small {
    color: #afbea9;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.loja-saldo strong {
    margin-top: 3px;
    font-size: .82rem;
}

.loja-abas {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.loja-aba {
    min-height: 72px;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-items: center;
    color: #c1d0c2;
    background: #1d3627;
    border: 4px solid #47644b;
    box-shadow: 4px 4px 0 #102016;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.loja-aba:hover {
    color: #ffffff;
    border-color: #7da162;
    transform: translateY(-2px);
}

.loja-aba:focus-visible {
    outline: 3px solid #fff36a;
    outline-offset: 2px;
}

.loja-aba-icone {
    width: 38px;
    height: 38px;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    color: #23331d;
    background: #8eb45f;
    border: 3px solid #c7e58f;
    box-shadow: 3px 3px 0 #101e14;
    font-size: 1.15rem;
    font-weight: 900;
}

.icone-pixel-loja {
    position: relative;
    width: 30px;
    height: 30px;
    display: block;
    image-rendering: pixelated;
}

.icone-pixel-loja i {
    position: absolute;
    display: block;
    pointer-events: none;
}

.torre-pixel-base {
    left: 3px;
    bottom: 2px;
    width: 24px;
    height: 5px;
    background: #233f69;
    box-shadow: 0 3px 0 #17263a;
}

.torre-pixel-corpo {
    left: 8px;
    bottom: 7px;
    width: 14px;
    height: 11px;
    background: #4379bb;
    box-shadow: -3px 0 0 #223b5b, 3px 0 0 #223b5b;
}

.torre-pixel-topo {
    left: 5px;
    bottom: 18px;
    width: 20px;
    height: 6px;
    background: #6fa7e0;
    box-shadow: -3px 3px 0 #223b5b, 3px 3px 0 #223b5b;
}

.torre-pixel-canhao {
    left: 13px;
    bottom: 24px;
    width: 14px;
    height: 4px;
    background: #e2e8e4;
    box-shadow: 0 -3px 0 #748b96, 3px 0 0 #293d4c;
}

.bomba-pixel-corpo {
    left: 7px;
    bottom: 5px;
    width: 16px;
    height: 14px;
    background: #39414e;
    box-shadow:
        -4px 0 0 #202630,
        4px 0 0 #202630,
        0 -4px 0 #4c5668,
        0 4px 0 #161b22;
}

.bomba-pixel-brilho {
    left: 7px;
    top: 11px;
    width: 4px;
    height: 4px;
    background: #c5d3db;
}

.bomba-pixel-pavio {
    left: 19px;
    top: 5px;
    width: 4px;
    height: 8px;
    background: #865b32;
    box-shadow: 4px -4px 0 #a9753d;
}

.bomba-pixel-faisca {
    left: 25px;
    top: 1px;
    width: 3px;
    height: 3px;
    background: #fff36a;
    box-shadow:
        -3px 3px 0 #ff9f43,
        3px 3px 0 #ffcc4d,
        0 6px 0 #e85c3c;
}

.icone-categoria-texto {
    display: block;
    font-size: 1.15rem;
    line-height: 1;
}

.loja-aba strong,
.loja-aba small {
    min-width: 0;
    display: block;
}

.loja-aba strong {
    align-self: end;
    font-size: .7rem;
    text-transform: uppercase;
}

.loja-aba small {
    align-self: start;
    color: #90a694;
    font-size: .52rem;
    font-weight: 800;
}

.loja-aba-ativa {
    color: #ffffff;
    background: #315b36;
    border-color: #ffe66f;
    box-shadow: 4px 4px 0 #102016, inset 0 0 0 3px #61773f;
}

.loja-aba-ativa > .loja-aba-icone {
    color: #3d3511;
    background: #ffe66f;
    border-color: #fff3aa;
}

.loja-aba-ativa small {
    color: #f5e6a8;
}

.loja-categoria-cabecalho {
    margin-bottom: 12px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(16, 35, 23, .72);
    border-left: 5px solid #9ddd55;
}

.loja-categoria-cabecalho small {
    color: #9cb3a0;
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.loja-categoria-cabecalho h3 {
    margin: 3px 0 0;
    color: #ffffff;
    font-size: .82rem;
    text-transform: uppercase;
}

.loja-categoria-cabecalho p {
    max-width: 430px;
    margin: 0;
    color: #bdd0c0;
    font-size: .6rem;
    line-height: 1.45;
    text-align: right;
}

.loja-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.loja-vazia {
    min-height: 170px;
    padding: 25px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #c6d3c8;
    background-color: #1a3022;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25% 75%, rgba(255, 255, 255, .025) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25% 75%, rgba(255, 255, 255, .025) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
    border: 4px dashed #506b54;
    text-align: left;
}

.loja-vazia-icone {
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #26391f;
    background: #819660;
    border: 4px solid #b2c886;
    box-shadow: 4px 4px 0 #0f1e14;
    font-size: 2rem;
    font-weight: 900;
}

.loja-vazia-icone .icone-pixel-loja {
    transform: scale(1.42);
}

.loja-vazia small {
    color: #ffe66f;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.loja-vazia h3 {
    margin: 5px 0 7px;
    color: #ffffff;
    font-size: .9rem;
    text-transform: uppercase;
}

.loja-vazia p {
    margin: 0;
    color: #aebfb1;
    font-size: .63rem;
    line-height: 1.5;
}

.loja-item {
    padding: 16px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 15px;
    color: #edf5ed;
    background: #244631;
    border: 4px solid #5f8b55;
    box-shadow: 5px 5px 0 #13281a;
}

.loja-item-comprado {
    border-color: #e5c65c;
    box-shadow: 5px 5px 0 #13281a, inset 0 0 0 3px #667443;
}

.loja-item-miniatura {
    width: 92px;
    height: 92px;
    image-rendering: pixelated;
    background: #142d20;
    border: 4px solid #7ca171;
}

.loja-item-miniatura-melhoria {
    display: grid;
    place-items: center;
    color: #fff5a8;
    font-size: 1.45rem;
    font-weight: 1000;
    letter-spacing: -.08em;
    text-shadow: 3px 3px 0 rgba(22, 35, 25, .78);
}

.melhoria-reserva-creditos {
    background: repeating-linear-gradient(135deg, #7b6527 0 12px, #a98931 12px 24px);
    border-color: #ffe66f;
}

.melhoria-licenca-construcao {
    color: #dffaff;
    background: repeating-linear-gradient(45deg, #31526b 0 12px, #3f7285 12px 24px);
    border-color: #8edce8;
}

.melhoria-recompensa-otimizada {
    color: #ffd9f4;
    background: repeating-linear-gradient(135deg, #603c69 0 12px, #85518c 12px 24px);
    border-color: #e2a2e8;
}

.loja-item-dados {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.loja-item-topo {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.loja-item h3 {
    margin: 0;
    color: #ffffff;
    font-size: .88rem;
}

.loja-item p,
.loja-item small {
    margin: 0;
    color: #c5d5c7;
    font-size: .61rem;
    line-height: 1.55;
}

.loja-item small {
    color: #e2c979;
    font-weight: 800;
}

.loja-preco {
    flex: 0 0 auto;
    padding: 5px 7px;
    color: #2c2817;
    background: #ffe66f;
    border: 3px solid #fff3aa;
    box-shadow: 3px 3px 0 #4b4120;
    font-size: .7rem;
    font-weight: 900;
}

.botao-comprar-loja {
    min-height: 39px;
    margin-top: auto;
    color: #17301e;
    background: #9ddd55;
    border-color: #d5f58a;
}

.botao-comprar-loja:disabled {
    color: #b7c0ba;
    background: #3e4d43;
    border-color: #627066;
}

.missoes-semana-cabecalho {
    margin-bottom: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #eef8ec;
    background: #173423;
    border: 3px solid #5e9461;
    box-shadow: 4px 4px 0 #102318;
}

.missoes-semana-cabecalho small,
.missoes-semana-cabecalho strong { display: block; }

.missoes-semana-cabecalho small,
.colecao-missoes > header small {
    color: #8ff0aa;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.missoes-semana-cabecalho strong {
    margin-top: 5px;
    color: #fff36a;
    font-size: .82rem;
    text-transform: uppercase;
}

.missoes-semana-cabecalho p {
    margin: 0;
    color: #c8d9c6;
    font-size: .64rem;
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
}

.missoes-grade {
    display: grid;
    gap: 12px;
}

.missao-cartao {
    min-height: 154px;
    padding: 15px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 15px;
    color: #edf5ed;
    background: #245132;
    border: 4px solid #46794b;
    box-shadow: 5px 5px 0 #142c1a;
}

.missao-concluida {
    border-color: #e5c65c;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px rgba(255, 243, 106, .13);
}

.missao-resgatada { opacity: .76; }

.missao-icone {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    color: #19301e;
    background: #9ddd55;
    border: 4px solid #d5f58a;
    box-shadow: 4px 4px 0 #13281a;
    font-family: Impact, "Arial Black", monospace;
    font-size: 2rem;
}

.missao-concluida .missao-icone {
    background: #ffe66f;
    border-color: #fff3aa;
}

.missao-dados { min-width: 0; }

.missao-topo {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.missao-topo small {
    color: #8ff0aa;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.missao-topo h3 {
    margin: 5px 0 0;
    color: #ffffff;
    font-size: .84rem;
    text-transform: uppercase;
}

.missao-recompensa {
    max-width: 230px;
    padding: 6px 8px;
    color: #332b11;
    background: #ffe66f;
    border: 3px solid #fff3aa;
    box-shadow: 3px 3px 0 #4b4120;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1.35;
    text-align: right;
    text-transform: uppercase;
}

.missao-recompensa i {
    margin-right: 4px;
    font-style: normal;
}

.missao-cartao p {
    margin: 9px 0;
    color: #c5d5c7;
    font-size: .63rem;
    line-height: 1.45;
}

.missao-progresso {
    height: 16px;
    padding: 3px;
    overflow: hidden;
    background: #0b1d12;
    border: 2px solid #3f6a48;
}

.missao-progresso span {
    height: 100%;
    display: block;
    background: #8fe35a;
    transition: width .2s steps(5, end);
}

.missao-concluida .missao-progresso span { background: #ffe66f; }

.missao-rodape {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.missao-rodape strong {
    color: #fff36a;
    font-size: .68rem;
}

.botao-resgatar-missao {
    min-width: 170px;
    min-height: 38px;
    color: #17301e;
    background: #9ddd55;
    border-color: #d5f58a;
}

.botao-resgatar-missao:disabled {
    color: #b7c0ba;
    background: #3e4d43;
    border-color: #627066;
}

.colecao-missoes {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 3px solid #487451;
}

.colecao-missoes > header h3 {
    margin: 5px 0 13px;
    color: #fff36a;
    font-size: .86rem;
    text-transform: uppercase;
}

.colecao-missoes-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.premio-colecao {
    min-height: 142px;
    padding: 14px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 10px 13px;
    color: #edf5ed;
    background: #245132;
    border: 4px solid #46794b;
    box-shadow: 5px 5px 0 #142c1a;
}

.premio-bloqueado {
    filter: grayscale(.7);
    opacity: .62;
}

.premio-desbloqueado { border-color: #e5c65c; }

.premio-colecao small,
.premio-colecao strong { display: block; }

.premio-colecao small {
    color: #8ff0aa;
    font-size: .51rem;
    font-weight: 900;
}

.premio-colecao strong {
    margin-top: 5px;
    color: #ffffff;
    font-size: .75rem;
    text-transform: uppercase;
}

.premio-colecao p {
    margin: 7px 0 0;
    color: #c5d5c7;
    font-size: .58rem;
    line-height: 1.4;
}

.preview-skin-sentinela,
.preview-conquista {
    width: 68px;
    height: 68px;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    background: #142d20;
    border: 4px solid #7ca171;
    box-shadow: 3px 3px 0 #102318;
}

.preview-skin-sentinela {
    position: relative;
}

.preview-skin-sentinela::before {
    width: 36px;
    height: 30px;
    content: "";
    background: #c89528;
    border: 4px solid #ffe36a;
    box-shadow: 4px 4px 0 #4d3518;
}

.preview-skin-sentinela::after {
    position: absolute;
    top: 16px;
    left: 31px;
    width: 24px;
    height: 8px;
    content: "";
    background: #5a431e;
    border: 2px solid #fff0ad;
}

.preview-conquista {
    color: #30250c;
    background: #ffe66f;
    border-color: #fff3aa;
    font-family: Impact, "Arial Black", monospace;
    font-size: 2.2rem;
}

.botao-equipar-skin,
.estado-premio-colecao {
    grid-column: 2;
    min-height: 36px;
}

.botao-equipar-skin {
    color: #17301e;
    background: #9ddd55;
    border-color: #d5f58a;
}

.estado-premio-colecao {
    padding: 9px;
    display: grid;
    place-items: center;
    color: #ffe66f;
    background: #173423;
    border: 3px solid #5e9461;
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pacote-apoiador-hero {
    min-height: 220px;
    padding: 20px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    color: #fff7dc;
    background:
        linear-gradient(135deg, rgba(255, 230, 111, .12), transparent 42%),
        repeating-linear-gradient(135deg, #4c255f 0 18px, #572b6b 18px 36px);
    border: 5px solid #e48bd7;
    box-shadow: 6px 6px 0 #291532;
}

.pacote-apoiador-ativo {
    border-color: #ffe66f;
    box-shadow: 6px 6px 0 #291532, inset 0 0 0 4px rgba(255, 230, 111, .14);
}

.pacote-apoiador-preview {
    position: relative;
    width: 166px;
    height: 166px;
    display: grid;
    place-items: center;
    background: #22142d;
    border: 5px solid #a95fc1;
    box-shadow: inset 0 0 0 5px #392044, 5px 5px 0 #2b1633;
}

.preview-skin-apoiador {
    position: relative;
    width: 116px;
    height: 116px;
    display: block;
}

.preview-skin-apoiador::before {
    position: absolute;
    bottom: 15px;
    left: 23px;
    width: 62px;
    height: 48px;
    content: "";
    background: #704fd0;
    border: 6px solid #c58aff;
    box-shadow: 7px 7px 0 #291532, inset 0 10px 0 #9a58d6;
}

.preview-skin-apoiador::after {
    position: absolute;
    top: 25px;
    left: 45px;
    width: 55px;
    height: 15px;
    content: "";
    background: #56f2d2;
    border: 5px solid #c9fff2;
    box-shadow: 5px 5px 0 #24465a;
}

.preview-skin-apoiador i {
    position: absolute;
    top: 34px;
    left: 31px;
    z-index: 1;
    width: 38px;
    height: 38px;
    background: #d064e2;
    border: 5px solid #ffe66f;
    box-shadow: 5px 5px 0 #412050;
}

.pacote-apoiador-coracao {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #4a183f;
    background: #ffe66f;
    border: 4px solid #fff3aa;
    box-shadow: 4px 4px 0 #2b1633;
    font-size: 1.45rem;
}

.pacote-apoiador-apresentacao small,
.pacote-apoiador-apresentacao strong { display: block; }

.pacote-apoiador-apresentacao small {
    color: #ffb7ed;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.pacote-apoiador-apresentacao h3 {
    margin: 8px 0 10px;
    color: #ffe66f;
    font-size: 1.18rem;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #291532;
}

.pacote-apoiador-apresentacao p {
    margin: 0;
    color: #eed9ec;
    font-size: .7rem;
    line-height: 1.55;
}

.pacote-apoiador-apresentacao strong {
    margin-top: 13px;
    color: #9ff7df;
    font-size: .62rem;
    line-height: 1.45;
    text-transform: uppercase;
}

.pacote-apoiador-itens {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pacote-apoiador-item {
    min-height: 104px;
    padding: 13px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    color: #f8eef7;
    background: #3c2746;
    border: 4px solid #865595;
    box-shadow: 4px 4px 0 #25172c;
}

.pacote-apoiador-item > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #421a3f;
    background: #f08adc;
    border: 3px solid #ffd1f3;
    font-size: .95rem;
    font-weight: 900;
}

.pacote-apoiador-item strong {
    color: #ffe66f;
    font-size: .64rem;
    text-transform: uppercase;
}

.pacote-apoiador-item p {
    margin: 6px 0 0;
    color: #d9c5d7;
    font-size: .55rem;
    line-height: 1.45;
}

.pacote-apoiador-compra {
    margin-top: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #eef8ec;
    background: #173423;
    border: 4px solid #6f9d68;
    box-shadow: 5px 5px 0 #102318;
}

.pacote-apoiador-compra small,
.pacote-apoiador-compra strong { display: block; }

.pacote-apoiador-compra small {
    color: #ffb7ed;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.pacote-apoiador-compra strong {
    margin-top: 5px;
    color: #fff36a;
    font-size: .72rem;
    text-transform: uppercase;
}

.pacote-apoiador-compra p {
    margin: 7px 0 0;
    color: #c5d5c7;
    font-size: .58rem;
    line-height: 1.45;
}

.pacote-apoiador-compra .pacote-apoiador-erro {
    padding: 7px 9px;
    color: #ffd7d2;
    background: #5b2827;
    border: 2px solid #b85a52;
}

.pacote-apoiador-acoes {
    min-width: 240px;
    display: grid;
    gap: 8px;
}

.botao-ativar-apoiador {
    color: #371737;
    background: #f08adc;
    border-color: #ffd1f3;
}

.botao-ativar-apoiador:disabled {
    color: #384026;
    background: #d9c85d;
    border-color: #fff3aa;
}

.botao-equipar-apoiador {
    color: #17352e;
    background: #69e3c9;
    border-color: #c9fff2;
}

.conquistas-resumo {
    margin-bottom: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #eef8ec;
    background: #173423;
    border: 3px solid #927638;
    box-shadow: 4px 4px 0 #102318;
}

.conquistas-resumo > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #34280d;
    background: #ffe66f;
    border: 4px solid #fff3aa;
    box-shadow: 3px 3px 0 #4b4120;
    font-size: 1.7rem;
}

.conquistas-resumo small,
.conquistas-resumo strong { display: block; }

.conquistas-resumo small {
    color: #d9bf72;
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.conquistas-resumo strong {
    margin-top: 5px;
    color: #fff36a;
    font-size: .84rem;
    text-transform: uppercase;
}

.conquistas-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.conquista-cartao {
    min-height: 248px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    color: #edf5ed;
    background: #245132;
    border: 4px solid #46794b;
    box-shadow: 5px 5px 0 #142c1a;
    transition: filter .16s steps(3, end), opacity .16s steps(3, end);
}

.conquista-bloqueada {
    filter: grayscale(1) brightness(.42);
    opacity: .78;
}

.conquista-desbloqueada {
    border-color: #e5c65c;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px rgba(255, 243, 106, .13);
}

.conquista-cartao-topo {
    margin-bottom: 13px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.conquista-icone {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #34280d;
    background: #ffe66f;
    border: 4px solid #fff3aa;
    box-shadow: 4px 4px 0 #4b4120;
    font-family: Impact, "Arial Black", monospace;
    font-size: 1.75rem;
}

.conquista-estado {
    padding: 6px 7px;
    color: #17301e;
    background: #9ddd55;
    border: 3px solid #d5f58a;
    font-size: .5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.conquista-bloqueada .conquista-estado {
    color: #dbe2dc;
    background: #4f5b52;
    border-color: #7a857c;
}

.conquista-cartao > small {
    color: #8ff0aa;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.conquista-cartao h3 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: .78rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.conquista-cartao p {
    margin: 8px 0 13px;
    color: #c5d5c7;
    font-size: .59rem;
    line-height: 1.45;
}

.conquista-progresso {
    height: 15px;
    margin-top: auto;
    padding: 3px;
    overflow: hidden;
    background: #0b1d12;
    border: 2px solid #3f6a48;
}

.conquista-progresso span {
    height: 100%;
    display: block;
    background: #ffe66f;
}

.conquista-contador {
    margin-top: 8px;
    color: #fff36a;
    font-size: .62rem;
    text-align: right;
}

.capitulos-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.capitulo-cartao {
    position: relative;
    min-height: 300px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    color: #f5ffe7;
    background: linear-gradient(145deg, #254f32 0 72%, #193b27 72%);
    border: 5px solid #6c9d50;
    box-shadow: 7px 7px 0 #102719;
}

.capitulo-cartao-com-maquina h3,
.capitulo-cartao-com-maquina .capitulo-intervalo {
    padding-right: 104px;
}

.botao-maquina-tempo-capitulo {
    position: absolute;
    top: 98px;
    right: 17px;
    width: 92px;
    min-height: 112px;
    padding: 8px 6px;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #e9fbff;
    background: #182c3b;
    border: 4px solid #66e5e2;
    border-radius: 0;
    box-shadow: 4px 4px 0 #0b1821, inset 0 0 0 3px #274d5e;
    cursor: pointer;
}

.botao-maquina-tempo-capitulo:hover,
.botao-maquina-tempo-capitulo:focus-visible {
    color: #ffffff;
    background: #244858;
    border-color: #fff36a;
    outline: 3px solid #fff6a0;
    outline-offset: 2px;
}

.botao-maquina-tempo-capitulo strong {
    font-size: .47rem;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

.botao-maquina-tempo-capitulo small {
    padding: 3px 5px;
    color: #172719;
    background: #fff36a;
    border: 2px solid #fff9b0;
    font-size: .42rem;
    font-weight: 900;
}

.maquina-tempo-miniatura,
.maquina-tempo-relogio {
    position: relative;
    display: block;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 46%, #284c59 46% 54%, transparent 54%),
        linear-gradient(transparent 46%, #284c59 46% 54%, transparent 54%),
        #e8fff5;
    border: 6px solid #d3b85a;
    box-shadow: 0 0 0 4px #1a202d, 0 0 16px #65e6e1;
}

.maquina-tempo-miniatura {
    width: 48px;
    height: 48px;
    border-width: 5px;
    box-shadow: 0 0 0 3px #1a202d, 0 0 12px #65e6e1;
}

.maquina-tempo-miniatura::after,
.maquina-tempo-relogio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #2a1d35;
    transform: translate(-50%, -50%);
}

.maquina-tempo-miniatura i,
.maquina-tempo-miniatura b,
.maquina-tempo-relogio i,
.maquina-tempo-relogio b {
    position: absolute;
    left: 50%;
    bottom: 50%;
    display: block;
    background: #ad315d;
    transform-origin: bottom center;
}

.maquina-tempo-miniatura i,
.maquina-tempo-relogio i {
    width: 4px;
    height: 31%;
    transform: translateX(-50%) rotate(38deg);
}

.maquina-tempo-miniatura b,
.maquina-tempo-relogio b {
    width: 3px;
    height: 39%;
    background: #283c63;
    transform: translateX(-50%) rotate(128deg);
}

.capitulo-cartao-atual {
    outline: 3px solid #fff36a;
    outline-offset: -9px;
}

.capitulo-cartao-bloqueado {
    color: #9aa69d;
    background: #24332a;
    border-color: #43564a;
    filter: grayscale(.8) brightness(.72);
}

.capitulo-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.capitulo-numero {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: #203017;
    background: #c8ef66;
    border: 5px solid #eaff9e;
    outline: 3px solid #102719;
    font-size: 1.25rem;
    font-weight: 900;
}

.capitulo-cartao h3 {
    margin: 28px 0 8px;
    color: #ffffff;
    font-size: 1.08rem;
    text-transform: uppercase;
}

.capitulo-intervalo {
    color: #d8f489;
    font-size: .7rem;
    text-transform: uppercase;
}

.capitulo-cartao p {
    margin: 12px 0 18px;
    color: #cbd9c6;
    font-size: .68rem;
    line-height: 1.55;
}

.capitulo-progresso {
    height: 18px;
    margin-top: auto;
    padding: 3px;
    overflow: hidden;
    background: #0c2114;
    border: 2px solid #517345;
}

.capitulo-progresso span {
    height: 100%;
    display: block;
    background: #fff36a;
}

.botao-capitulo-acao {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    color: #173019;
    background: #9adb3e;
    border-color: #d5f56a;
    border-radius: 0;
    box-shadow: 4px 4px 0 #102719;
}

.capitulo-tema-fronteira {
    background: linear-gradient(145deg, #35583e 0 72%, #263f32 72%);
    border-color: #a3c35b;
}

.capitulo-tema-fronteira .capitulo-numero {
    background: #b7ef5c;
    border-color: #e0f58d;
}

.capitulo-tema-misterio {
    background: linear-gradient(145deg, #34294b 0 72%, #211a31 72%);
    border-color: #775d9b;
}

.capitulo-tema-misterio .capitulo-numero {
    color: #f4e9ff;
    background: #6f4e91;
    border-color: #a989c9;
}

.painel-maquina-tempo {
    margin-bottom: 18px;
    padding: 18px;
    color: #eafff9;
    background:
        linear-gradient(90deg, rgba(105, 236, 220, .08) 1px, transparent 1px),
        linear-gradient(rgba(105, 236, 220, .08) 1px, transparent 1px),
        #101f2b;
    background-size: 18px 18px;
    border: 4px solid #4bbfbd;
    box-shadow: 6px 6px 0 #091319, inset 0 0 0 3px #223e4a;
}

.maquina-tempo-cabecalho {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.maquina-tempo-relogio {
    width: 74px;
    height: 74px;
    justify-self: center;
}

.maquina-tempo-cabecalho small {
    color: #6ce8df;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.maquina-tempo-cabecalho h3 {
    margin: 5px 0 0;
    color: #fff36a;
    font-size: 1rem;
    text-transform: uppercase;
}

.maquina-tempo-cabecalho p {
    margin: 7px 0 0;
    color: #c3d9d7;
    font-size: .64rem;
    line-height: 1.5;
}

.maquina-tempo-destinos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.botao-epoca-temporal {
    min-height: 118px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #eaf9f5;
    background: #263744;
    border: 3px solid #54707a;
    border-radius: 0;
    box-shadow: 4px 4px 0 #08131a;
    text-align: left;
    cursor: pointer;
}

.botao-epoca-temporal small {
    color: #9eb3b6;
    font-size: .43rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.botao-epoca-temporal strong {
    margin-top: 8px;
    color: #ffffff;
    font-size: .75rem;
    text-transform: uppercase;
}

.botao-epoca-temporal span {
    margin-top: 7px;
    color: #c4d3d1;
    font-size: .54rem;
    line-height: 1.45;
}

.botao-epoca-passado { background: #584027; border-color: #c8944c; }
.botao-epoca-presente { background: #244d39; border-color: #67ae65; }
.botao-epoca-futuro { background: #293653; border-color: #6e8cce; }

.botao-epoca-temporal:hover,
.botao-epoca-temporal:focus-visible,
.botao-epoca-selecionada {
    border-color: #fff36a;
    outline: 3px solid rgba(255, 243, 106, .26);
    outline-offset: -7px;
}

.botao-epoca-selecionada small { color: #fff36a; }

.fases-epoca-vazia {
    min-height: 170px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #c9d9db;
    background: #172530;
    border: 3px dashed #587080;
    text-align: left;
}

.fases-epoca-vazia > span {
    color: #fff36a;
    font-size: 2rem;
}

.fases-epoca-vazia strong {
    color: #ffffff;
    font-size: .7rem;
    text-transform: uppercase;
}

.fases-epoca-vazia p {
    margin: 7px 0 0;
    font-size: .6rem;
}

.navegacao-capitulos {
    margin-bottom: 18px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #d9efbf;
    background: #173d29;
    border: 3px solid #46794b;
}

.botao-voltar-capitulos {
    min-height: 38px;
    color: #173019;
    background: #fff36a;
    border-color: #fff9ad;
    border-radius: 0;
    box-shadow: 3px 3px 0 #102719;
}

.navegacao-capitulos span {
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.fases-em-desenvolvimento {
    margin-top: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #d8e8cc;
    background: #1c3527;
    border: 3px dashed #78934e;
}

.fases-em-desenvolvimento > span {
    color: #c9ed70;
    font-size: 1.6rem;
}

.fases-em-desenvolvimento strong {
    color: #fff36a;
    font-size: .72rem;
    text-transform: uppercase;
}

.fases-em-desenvolvimento p {
    margin: 5px 0 0;
    font-size: .65rem;
    line-height: 1.5;
}

.fases-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.fase-cartao {
    min-height: 190px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background: #245132;
    border: 4px solid #46794b;
    box-shadow: 5px 5px 0 #142c1a;
}

.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #79984a;
}

.fase-cartao-bloqueado {
    color: #aab8ad;
    background: #263c2e;
    border-color: #425a48;
}

.fase-tema-deserto {
    background: #78502d;
    border-color: #c48a45;
}

.fase-tema-deserto.fase-cartao-bloqueado {
    background: #4d4031;
    border-color: #6f604a;
}

.fase-tema-deserto .fase-numero {
    color: #4b2b18;
    background: #e3ad59;
    border-color: #ffd983;
}

.fase-tema-deserto .fase-estado {
    color: #ffe1a6;
    background: #4f2e1a;
    border-color: #c98b47;
}

.fase-tema-deserto.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #b77a38;
}

.fase-tema-artico {
    background: #32677e;
    border-color: #83c7dc;
}

.fase-tema-artico.fase-cartao-bloqueado {
    background: #344d59;
    border-color: #58727e;
}

.fase-tema-artico .fase-numero {
    color: #173c50;
    background: #dff8ff;
    border-color: #ffffff;
}

.fase-tema-artico .fase-estado {
    color: #ddf8ff;
    background: #244b61;
    border-color: #75b8d0;
}

.fase-tema-artico.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #62a8c1;
}

.fase-tema-selva {
    background: #315b36;
    border-color: #76a853;
}

.fase-tema-selva.fase-cartao-bloqueado {
    background: #354439;
    border-color: #566b55;
}

.fase-tema-selva .fase-numero {
    color: #23351c;
    background: #b9dc78;
    border-color: #e0f3a9;
}

.fase-tema-selva .fase-estado {
    color: #dff0b6;
    background: #203d27;
    border-color: #6c994b;
}

.fase-tema-selva.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #567d3e;
}

.fase-tema-temperada {
    background: #674d34;
    border-color: #c38a43;
}

.fase-tema-temperada.fase-cartao-bloqueado {
    background: #4a4035;
    border-color: #6b5b49;
}

.fase-tema-temperada .fase-numero {
    color: #3b291d;
    background: #e2a84b;
    border-color: #f4d37c;
}

.fase-tema-temperada .fase-estado {
    color: #f6dda3;
    background: #493322;
    border-color: #a9743d;
}

.fase-tema-temperada.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #9c6b38;
}

.fase-tema-vulcanica {
    background: #512a2d;
    border-color: #d85a45;
}

.fase-tema-vulcanica.fase-cartao-bloqueado {
    background: #443438;
    border-color: #6d5458;
}

.fase-tema-vulcanica .fase-numero {
    color: #32191a;
    background: #ff713f;
    border-color: #ffc35a;
}

.fase-tema-vulcanica .fase-estado {
    color: #ffd1b3;
    background: #32191d;
    border-color: #b94a3c;
}

.fase-tema-vulcanica.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #a83f36;
}

.fase-tema-pantano {
    background: #35583e;
    border-color: #91ae55;
}

.fase-tema-pantano.fase-cartao-bloqueado {
    background: #35463b;
    border-color: #5c705f;
}

.fase-tema-pantano .fase-numero {
    color: #203321;
    background: #b7ef5c;
    border-color: #e0f58d;
}

.fase-tema-pantano .fase-estado {
    color: #e0f2a4;
    background: #203729;
    border-color: #78934e;
}

.fase-tema-pantano.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #678945;
}

.fase-tema-primordial {
    background: #31533a;
    border-color: #c18b38;
}

.fase-tema-primordial.fase-cartao-bloqueado {
    background: #35463b;
    border-color: #6c6851;
}

.fase-tema-primordial .fase-numero {
    color: #3b2818;
    background: #e6a43d;
    border-color: #ffd66b;
}

.fase-tema-primordial .fase-estado {
    color: #f4dc9a;
    background: #26392a;
    border-color: #98723a;
}

.fase-tema-primordial.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #142c1a, inset 0 0 0 3px #9d7538;
}

.fase-tema-futurista {
    background: #142742;
    border-color: #45f1ed;
}

.fase-tema-futurista.fase-cartao-bloqueado {
    background: #202c3c;
    border-color: #586778;
}

.fase-tema-futurista .fase-numero {
    color: #07101d;
    background: #53f5ff;
    border-color: #c8ffff;
}

.fase-tema-futurista .fase-estado {
    color: #f7d6ff;
    background: #1d1835;
    border-color: #e955dc;
}

.fase-tema-futurista.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #050b16, inset 0 0 0 3px #e955dc;
}

.fase-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fase-numero {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #18321f;
    background: #fff36a;
    border: 4px solid #fff9ad;
    outline: 3px solid #142c1a;
    font-size: 1rem;
    font-weight: 900;
}

.fase-cartao-bloqueado .fase-numero {
    color: #d1d9d2;
    background: #53665a;
    border-color: #718177;
}

.fase-estado {
    padding: 5px 7px;
    color: #d7f4dd;
    background: #173d29;
    border: 2px solid #5f9b60;
    font-size: .56rem;
    font-weight: 900;
    text-transform: uppercase;
}

.fase-cartao h3 {
    margin: 18px 0 5px;
    color: #ffffff;
    font-size: .92rem;
    text-transform: uppercase;
}

.fase-cartao p {
    margin: 0 0 16px;
    color: #c7d8c0;
    font-size: .66rem;
    line-height: 1.55;
}

.botao-fase-acao {
    width: 100%;
    min-height: 38px;
    margin-top: auto;
    color: #173019;
    background: #9adb3e;
    border-color: #d5f56a;
    border-radius: 0;
    box-shadow: 3px 3px 0 #142c1a;
}

.fase-cartao-selecionado .botao-fase-acao:disabled {
    color: #3d3511;
    background: #fff36a;
    border-color: #fff9ad;
    opacity: 1;
}

.album-cartao,
.tutorial-lista li {
    background: #245132;
    border: 3px solid #46794b;
    box-shadow: 3px 3px 0 #142c1a;
}

.album-cartao { min-height: 94px; padding: 14px; }
.album-cartao:hover { border-color: #fff36a; }
.album-cartao strong { font-size: .78rem; text-transform: uppercase; }

.album-cartao-inimigo,
.album-cartao-torre,
.album-cartao-skin {
    min-height: 118px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.miniatura-inimigo-album,
.miniatura-torre-album,
.miniatura-skin-album {
    width: 76px;
    height: 76px;
    display: block;
    background-color: #173a25;
    background-image: conic-gradient(rgba(255, 255, 255, .06) 25%, transparent 0 50%, rgba(255, 255, 255, .06) 0 75%, transparent 0);
    background-size: 16px 16px;
    border: 3px solid #d9f3df;
    box-shadow: 3px 3px 0 #142c1a;
    image-rendering: pixelated;
}

.album-inimigo-dados,
.album-torre-dados,
.album-skin-dados { min-width: 0; }
.album-inimigo-dados strong,
.album-torre-dados strong,
.album-skin-dados strong { display: block; }
.album-inimigo-dados p,
.album-torre-dados p,
.album-skin-dados p { margin-top: 7px; }

.album-conceito-topo {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.album-skin-topo {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.album-skin-topo span {
    flex: 0 0 auto;
    padding: 4px 5px;
    color: #b8c9b9;
    background: #172d20;
    border: 2px solid #49664b;
    font-size: .48rem;
    font-weight: 900;
    text-transform: uppercase;
}

.album-skin-topo .album-skin-equipada {
    color: #25310f;
    background: #fff36a;
    border-color: #fff9ad;
}

.album-skin-dados > small {
    display: block;
    margin-top: 8px;
    color: #9fb2a1;
    font-size: .55rem;
    line-height: 1.4;
}

.album-cartao-skin-bloqueada {
    filter: grayscale(1);
    opacity: .56;
}

.menu-principal.tema-deserto .miniatura-inimigo-album,
.menu-principal.tema-deserto .miniatura-torre-album,
.menu-principal.tema-deserto .miniatura-skin-album {
    background-color: #5c3b25;
    border-color: #f4cf86;
    box-shadow: 3px 3px 0 #3b2418;
}

.menu-principal.tema-artico .miniatura-inimigo-album,
.menu-principal.tema-artico .miniatura-torre-album,
.menu-principal.tema-artico .miniatura-skin-album {
    background-color: #28566c;
    border-color: #d8f7ff;
    box-shadow: 3px 3px 0 #244b61;
}

.menu-principal.tema-temperada .miniatura-inimigo-album,
.menu-principal.tema-temperada .miniatura-torre-album,
.menu-principal.tema-temperada .miniatura-skin-album {
    background-color: #4c3929;
    border-color: #efc876;
    box-shadow: 3px 3px 0 #35261c;
}

.album-cartao p {
    margin: 8px 0 0;
    color: #c7d8c0;
    font-size: .68rem;
    line-height: 1.45;
}

.conteudo-menu[data-tela="album"] .album-pagina-figurinhas {
    position: relative;
    min-height: 360px;
    padding: 24px 22px 24px 38px;
    overflow: hidden;
    color: #352d20;
    background-color: #eadcae;
    background-image:
        linear-gradient(rgba(105, 82, 44, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 82, 44, .09) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 5px solid #c5a461;
    box-shadow: 7px 7px 0 rgba(12, 23, 15, .5), inset 15px 0 0 rgba(129, 91, 45, .18);
}

.conteudo-menu[data-tela="album"] .album-espiral {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 8px;
    width: 14px;
    background: repeating-linear-gradient(
        to bottom,
        #4a3926 0 7px,
        transparent 7px 22px
    );
    filter: drop-shadow(2px 2px 0 rgba(54, 41, 25, .35));
}

.conteudo-menu[data-tela="album"] .album-categoria-cabecalho {
    margin: 0 0 18px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    color: #352d20;
    background: rgba(255, 250, 224, .72);
    border: 3px dashed #ad8b4d;
    border-left: 8px solid #8a6338;
}

.conteudo-menu[data-tela="album"] .album-categoria-cabecalho small,
.conteudo-menu[data-tela="album"] .album-categoria-cabecalho h3,
.conteudo-menu[data-tela="album"] .album-categoria-cabecalho p {
    color: #352d20;
}

.conteudo-menu[data-tela="album"] .album-categoria-resumo {
    justify-self: end;
    text-align: right;
}

.conteudo-menu[data-tela="album"] .album-categoria-resumo strong {
    display: block;
    color: #7a4b25;
    font-size: .68rem;
    text-transform: uppercase;
}

.conteudo-menu[data-tela="album"] .album-categoria-resumo p {
    margin-top: 5px;
}

.conteudo-menu[data-tela="album"] .album-grade {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.menu-principal .conteudo-menu[data-tela="album"] .album-cartao {
    position: relative;
    min-height: 244px;
    padding: 16px;
    color: #30291f;
    background: #fff8dc;
    border: 4px solid #fffdf1;
    outline: 3px dashed #b99658;
    outline-offset: -8px;
    box-shadow: 5px 6px 0 rgba(94, 67, 34, .32);
    transform: rotate(-.25deg);
}

.menu-principal .conteudo-menu[data-tela="album"] .album-cartao:nth-child(even) {
    transform: rotate(.25deg);
}

.menu-principal .conteudo-menu[data-tela="album"] .album-cartao:hover {
    border-color: #fffdf1;
    outline-color: #7d5b34;
    transform: translateY(-3px) rotate(0);
}

.conteudo-menu[data-tela="album"] .album-cartao::after {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 13px;
    height: 13px;
    content: "";
    background: #e7c85c;
    box-shadow: -4px 4px 0 #ad7e35;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.conteudo-menu[data-tela="album"] .album-cartao-inimigo,
.conteudo-menu[data-tela="album"] .album-cartao-torre,
.conteudo-menu[data-tela="album"] .album-cartao-skin {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    text-align: center;
}

.menu-principal .conteudo-menu[data-tela="album"] .miniatura-inimigo-album,
.menu-principal .conteudo-menu[data-tela="album"] .miniatura-torre-album,
.menu-principal .conteudo-menu[data-tela="album"] .miniatura-skin-album {
    width: 108px;
    height: 108px;
    margin-inline: auto;
    background-color: #dbe4bd;
    border-color: #fffdf1;
    outline: 3px solid #a5844d;
    box-shadow: 4px 4px 0 rgba(84, 63, 34, .32);
}

.menu-principal .conteudo-menu[data-tela="album"] .album-cartao-conceito .miniatura-inimigo-album {
    background-color: #171024;
    background-image:
        linear-gradient(rgba(71, 232, 213, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(218, 58, 204, .09) 1px, transparent 1px);
    background-size: 9px 9px;
    border-color: #62eadb;
    outline-color: #b541b3;
}

.conteudo-menu[data-tela="album"] .album-inimigo-dados strong,
.conteudo-menu[data-tela="album"] .album-torre-dados strong,
.conteudo-menu[data-tela="album"] .album-skin-dados strong {
    color: #3b2c1e;
}

.conteudo-menu[data-tela="album"] .album-cartao p,
.conteudo-menu[data-tela="album"] .album-skin-dados > small {
    color: #5c4b36;
}

.conteudo-menu[data-tela="album"] .album-skin-topo {
    justify-content: center;
    flex-wrap: wrap;
}

.conteudo-menu[data-tela="album"] .album-conceito-topo {
    justify-content: center;
    flex-wrap: wrap;
}

.conteudo-menu[data-tela="album"] .album-grade-vazia {
    display: block;
}

.album-vazio {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 15px;
    text-align: center;
    color: #554632;
    background: rgba(255, 250, 224, .55);
    border: 4px dashed #b8955b;
}

.album-vazio-silhueta {
    width: 92px;
    height: 112px;
    display: grid;
    place-items: center;
    color: #eadcae;
    background: #8a795d;
    border: 6px solid #fff8dc;
    outline: 3px dashed #9e7c48;
    font-size: 2.2rem;
    box-shadow: 5px 5px 0 rgba(83, 60, 32, .25);
}

.album-vazio strong {
    color: #493825;
    font-size: .88rem;
    text-transform: uppercase;
}

.album-vazio p {
    max-width: 480px;
    margin: 8px auto 0;
    color: #66543c;
    font-size: .67rem;
    line-height: 1.55;
}

.tutorial-introducao {
    margin-bottom: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(7, 18, 12, .62);
    border: 3px solid #6cdb7c;
    box-shadow: 3px 3px 0 #142c1a;
}

.tutorial-introducao small,
.tutorial-introducao strong { display: block; }

.tutorial-introducao small {
    color: #8ff0aa;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.tutorial-introducao strong {
    margin-top: 5px;
    color: #fff36a;
    font-size: .84rem;
    text-transform: uppercase;
}

.tutorial-introducao p {
    margin: 7px 0 0;
    color: #dce8d6;
    font-size: .68rem;
    line-height: 1.45;
}

.botao-iniciar-tutorial {
    min-width: 190px;
    min-height: 50px;
}

.tutorial-lista {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    counter-reset: passos;
}

.tutorial-lista li {
    min-height: 88px;
    padding: 13px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    color: #dce8d6;
    font-size: .72rem;
    line-height: 1.5;
    counter-increment: passos;
}

.tutorial-lista li::before {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    content: counter(passos, decimal-leading-zero);
    color: #24310f;
    background: #a8e84e;
    border: 2px solid #e7ff91;
    font-size: .61rem;
    font-weight: 900;
}

.conteudo-menu[data-tela="selecaoDefesas"] {
    --fundo-conteudo-menu: #122b1d;
}

.selecao-defesas-resumo {
    margin-bottom: 12px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #eaffd8;
    background: #1e432b;
    border: 4px solid #5d8658;
    box-shadow: 4px 4px 0 #07150f;
}

.selecao-defesas-resumo small,
.selecao-defesas-resumo strong {
    display: block;
}

.selecao-defesas-resumo small,
.selecao-defesas-equipe > small {
    color: #9fd690;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.selecao-defesas-resumo strong {
    margin-top: 4px;
    color: #fff36a;
    font-size: .9rem;
    text-transform: uppercase;
}

.selecao-defesas-resumo > span {
    color: #fff36a;
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-shadow: 2px 2px 0 #07150f;
}

.selecao-defesas-tutorial {
    margin: 0 0 12px;
    padding: 10px 13px;
    color: #fff4bd;
    background: #55431d;
    border: 3px solid #d7b34e;
    font-size: .66rem;
    line-height: 1.5;
}

.selecao-defesas-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(270px, .75fr);
    align-items: start;
    gap: 16px;
}

.selecao-defesas-catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 10px;
}

.selecao-defesa-cartao {
    position: relative;
    min-width: 0;
    min-height: 142px;
    padding: 12px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: minmax(82px, auto) auto;
    align-items: center;
    gap: 8px 10px;
    color: #dcefd8;
    background: #1d3927;
    border: 4px solid #49694b;
    box-shadow: 4px 4px 0 #07150f;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.selecao-defesa-cartao:hover:not(:disabled),
.selecao-defesa-cartao:focus-visible {
    border-color: #99d96d;
    outline: 3px solid #e8ff91;
    outline-offset: 1px;
}

.selecao-defesa-cartao-selecionado {
    color: #fffbd2;
    background: #315a31;
    border-color: #f4d754;
    box-shadow: 5px 5px 0 #8a6922;
}

.selecao-defesa-cartao-bloqueado {
    cursor: not-allowed;
    filter: grayscale(1) brightness(.58);
}

.selecao-defesa-ordem {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #102015;
    background: #d7e7cf;
    border: 2px solid #07150f;
    font-size: .67rem;
    font-weight: 900;
}

.selecao-defesa-cartao-selecionado .selecao-defesa-ordem {
    background: #fff36a;
}

.miniatura-selecao-defesa {
    width: 82px;
    height: 82px;
    image-rendering: pixelated;
}

.selecao-defesa-dados {
    min-width: 0;
}

.selecao-defesa-dados strong,
.selecao-defesa-dados small,
.selecao-defesa-dados em {
    display: block;
}

.selecao-defesa-dados strong {
    color: #f5ffd8;
    font-size: .7rem;
    line-height: 1.35;
}

.selecao-defesa-dados small {
    margin-top: 5px;
    color: #fff36a;
    font-size: .6rem;
    font-weight: 900;
}

.selecao-defesa-dados em {
    margin-top: 6px;
    color: #a8c4a5;
    font-size: .54rem;
    font-style: normal;
    line-height: 1.45;
}

.selecao-defesa-estado {
    grid-column: 1 / -1;
    padding-top: 7px;
    color: #b7dca9;
    border-top: 2px solid rgba(255, 255, 255, .1);
    font-size: .55rem;
    font-weight: 900;
    text-transform: uppercase;
}

.selecao-defesa-cartao-selecionado .selecao-defesa-estado {
    color: #fff36a;
}

.selecao-defesas-equipe {
    position: sticky;
    top: 118px;
    padding: 16px;
    background: #183522;
    border: 5px solid #789061;
    box-shadow: 6px 6px 0 #07150f;
}

.selecao-defesas-equipe h3 {
    margin: 5px 0 13px;
    color: #fff36a;
    font-size: .83rem;
    text-transform: uppercase;
}

.selecao-defesas-equipe ol {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    list-style: none;
}

.selecao-defesa-vaga {
    min-height: 40px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #ecffde;
    background: #294c2d;
    border: 2px solid #688264;
    font-size: .61rem;
    line-height: 1.3;
}

.selecao-defesa-vaga strong {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: #18210d;
    background: #fff36a;
}

.selecao-defesa-vaga-vazia {
    color: #728a72;
    background: #102619;
    border-style: dashed;
}

.selecao-defesa-vaga-vazia strong {
    color: #829282;
    background: #253a29;
}

.selecao-defesas-mensagem {
    min-height: 38px;
    margin: 11px 0;
    color: #ffd58a;
    font-size: .59rem;
    line-height: 1.45;
}

.botao-confirmar-selecao-defesas {
    width: 100%;
    min-height: 52px;
    color: #10200e;
    background: #a8e84e;
    border-color: #e7ff91;
    box-shadow: 4px 4px 0 #34581f;
}

@media (max-width: 760px) {
    body { overflow: auto; }
    .aplicacao-jogo { --espaco-reservado-controles: 142px; height: auto; padding: 9px; }
    .controles-contexto { display: none; }
    .painel-resultado { padding: 24px 18px; }
    .acoes-resultado { grid-template-columns: 1fr; }
    .acoes-confirmacao-desistencia { grid-template-columns: 1fr; }
    .painel-bonus-pos-boss { max-height: calc(100vh - 24px); padding: 20px 14px; overflow-y: auto; }
    .opcoes-bonus-pos-boss { grid-template-columns: 1fr; gap: 9px; }
    .botao-bonus-pos-boss { min-height: 112px; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; }
    .botao-bonus-pos-boss .icone-bonus-pos-boss { grid-row: 1 / 3; }
    .botao-bonus-pos-boss strong,
    .botao-bonus-pos-boss small { justify-self: stretch; }
    .painel-minigame-fliperama { padding: 14px; }
    .cabecalho-minigame-fliperama { align-items: stretch; flex-direction: column; gap: 10px; }
    .status-minigame-fliperama { width: 100%; }
    .status-minigame-fliperama span { min-width: 0; }
    .palco-com-torres { grid-template-columns: minmax(0, 1fr) 124px; }
    .posto-comando-lateral { left: 2px; width: 132px; min-height: 220px; padding: 7px; gap: 6px; }
    .posto-boost-item { padding: 4px; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 4px; }
    .posto-boost-icone { width: 23px; height: 23px; font-size: .48rem; }
    .posto-boost-texto strong { font-size: .46rem; }
    .posto-boost-texto small { font-size: .42rem; }
    .posto-boost-contador { padding: 2px 3px; font-size: .42rem; }
    .seletor-torres { max-height: calc(100vh - 142px); padding: 6px; gap: 6px; box-shadow: 3px 3px 0 #020704; }
    .seletor-torres-cabecalho { padding: 5px 4px 7px; }
    .seletor-torres-cabecalho strong { font-size: .68rem; }
    .seletor-torres-cabecalho small { display: none; }
    .seletor-torres-lista { gap: 6px; padding-right: 3px; }
    .seletor-torres-lista .botao-construcao { min-height: 58px; padding: 6px; font-size: .56rem; }
    .controles { min-height: auto; padding: 7px; }
    .controles-acoes { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .controles .botao { min-width: 0; padding-inline: 7px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
    .menu-partida { top: 8px; right: 8px; }
    .botao-menu-partida { width: 48px; height: 44px; }
    .painel-menu-partida { top: 52px; }

    .menu-principal { display: block; padding: 8px; }
    .decoracao-central-lobby { opacity: .46; }
    .decoracao-lobby-campo { opacity: .62; }
    .menu-cartao { max-height: none; padding: 12px 16px 20px; }
    .credito-criador { right: 8px; bottom: 7px; padding: 5px 7px; font-size: .5rem; }
    .lobby-topo { padding-inline: 62px; }
    .lobby-selo { width: 42px; height: 42px; border-width: 4px; outline-width: 4px; }
    .lobby-topo h1 { font-size: clamp(2.5rem, 12vw, 4.5rem); -webkit-text-stroke-width: 2px; }
    .lobby-acoes { min-height: 250px; gap: clamp(18px, 5vw, 42px); }
    .botao-lobby { width: 125px; }
    .icone-lobby { width: 88px; height: 88px; border-width: 5px; outline-width: 5px; font-size: 2.8rem; }
    .botao-lobby-jogar { width: 160px; }
    .icone-jogar { width: 126px; height: 126px; font-size: 4.2rem; }
    .lobby-rodape { align-items: stretch; flex-direction: column; }
    .lobby-status { display: grid; grid-template-columns: repeat(2, 1fr); }
    .lobby-status span { min-width: 0; }
    .lobby-acoes-extras { margin-top: -8px; }
    .botao-lobby-extra { min-width: 210px; }
    .conteudo-menu { padding: 21px 18px 26px; }
    .loja-categoria-cabecalho { align-items: start; flex-direction: column; gap: 6px; }
    .loja-categoria-cabecalho p { max-width: none; text-align: left; }
    .colecao-missoes-grade { grid-template-columns: 1fr; }
    .pacote-apoiador-hero { grid-template-columns: 150px minmax(0, 1fr); }
    .pacote-apoiador-preview { width: 138px; height: 138px; transform: scale(.9); }
    .pacote-apoiador-itens { grid-template-columns: 1fr; }
    .conquistas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tutorial-introducao { align-items: stretch; flex-direction: column; }
    .botao-iniciar-tutorial { width: 100%; }
    .tutorial-lista { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .regiao-notificacoes-progresso {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
    .notificacao-progresso { grid-template-columns: 46px minmax(0, 1fr); }
    .notificacao-progresso-icone { width: 42px; height: 42px; }
    .acoes-confirmacao-compra-loja { grid-template-columns: 1fr; }
    .painel-tutorial-partida,
    .camada-tutorial-partida[data-passo="5"] .painel-tutorial-partida {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        padding: 16px;
    }

    .acoes-tutorial-partida { display: grid; }
    .palco-com-torres {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .palco-jogo {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }
    .palco-jogo > canvas {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
    }
    .posto-comando-lateral {
        position: static;
        width: 100%;
        min-height: 0;
        max-height: none;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 82px minmax(0, 1fr) 104px;
        grid-template-rows: minmax(54px, auto) auto;
        align-items: stretch;
        gap: 6px;
        pointer-events: auto;
        transform: none;
    }
    .posto-boosts-cabecalho {
        padding: 5px;
        display: grid;
        place-items: center;
        border-right: 2px solid #294535;
        border-bottom: 0;
    }
    .posto-boosts-lista {
        display: flex;
        align-items: stretch;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .posto-boosts-lista > * {
        min-width: 104px;
        margin: 0;
    }
    .posto-boost-temporario {
        min-width: 0;
        padding: 0 0 0 6px;
        border-top: 0;
        border-left: 2px solid #294535;
    }
    .posto-pulso-temporal {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 6px 0 0;
        border-top: 2px solid #294535;
    }
    .botao-pulso-temporal {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 5px 7px;
    }
    .posto-boosts-cabecalho small,
    .posto-boost-texto small { display: none; }
    .posto-boosts-cabecalho strong,
    .posto-boost-texto strong { font-size: .58rem; }
    .posto-boost-secao { font-size: .54rem; }
    .seletor-torres {
        width: 100%;
        height: auto;
        max-height: none;
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-rows: auto;
        align-self: auto;
    }
    .seletor-torres-cabecalho {
        padding: 6px;
        display: grid;
        place-items: center;
        border-right: 2px solid #294535;
        border-bottom: 0;
    }
    .seletor-torres-lista {
        padding: 2px 3px 5px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }
    .seletor-torres { border-width: 2px; }
    .seletor-torres-lista .botao-construcao {
        min-width: 126px;
        min-height: 58px;
        padding-inline: 7px;
        flex: 0 0 126px;
        font-size: .62rem;
        scroll-snap-align: start;
    }
    .lobby-topo { padding-inline: 0; padding-top: 52px; }
    .lobby-atalhos { gap: 6px; }
    .botao-configuracoes-lobby { min-width: 86px; padding-inline: 7px; font-size: .56rem; }
    .lobby-acoes { min-height: 220px; gap: 8px; }
    .botao-lobby { width: 92px; }
    .botao-lobby-jogar { width: 118px; }
    .icone-lobby { width: 68px; height: 68px; font-size: 2.1rem; border-width: 4px; outline-width: 3px; }
    .icone-jogar { width: 94px; height: 94px; padding-left: 7px; font-size: 3.1rem; }
    .botao-lobby strong { font-size: .68rem; }
    .botao-lobby small { display: none; }
    .lobby-acoes-extras { padding-inline: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .botao-lobby-extra { min-width: 0; min-height: 58px; padding: 7px; grid-template-columns: 32px 1fr; }
    .botao-lobby-extra span { font-size: 1.45rem; }
    .botao-lobby-extra strong { font-size: .61rem; }
    .botao-lobby-extra small { display: none; }
    .missoes-semana-cabecalho { align-items: start; flex-direction: column; }
    .missoes-semana-cabecalho p { text-align: left; }
    .missao-cartao { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 11px; }
    .missao-icone { width: 50px; height: 50px; font-size: 1.45rem; }
    .missao-topo { align-items: stretch; flex-direction: column; }
    .missao-recompensa { max-width: none; text-align: left; }
    .missao-rodape { align-items: stretch; flex-direction: column; }
    .botao-resgatar-missao { width: 100%; min-width: 0; }
    .premio-colecao { grid-template-columns: 58px minmax(0, 1fr); }
    .preview-skin-sentinela,
    .preview-conquista { width: 54px; height: 54px; }
    .preview-skin-sentinela::before { transform: scale(.78); }
    .preview-skin-sentinela::after { top: 12px; left: 24px; transform: scale(.78); }
    .pacote-apoiador-hero { padding: 14px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .pacote-apoiador-apresentacao strong { text-align: left; }
    .pacote-apoiador-compra { align-items: stretch; flex-direction: column; }
    .pacote-apoiador-acoes { min-width: 0; }
    .conquistas-resumo { padding: 11px; }
    .conquistas-resumo > span { width: 46px; height: 46px; font-size: 1.35rem; }
    .conquistas-grade { grid-template-columns: 1fr; }
    .conquista-cartao { min-height: 220px; }
    .lobby-status { gap: 4px; }
    .lobby-status span { padding-inline: 3px; }
    .album-grade { grid-template-columns: 1fr; }
    .selecao-defesas-resumo { align-items: flex-start; flex-direction: column; }
    .selecao-defesas-resumo > span { font-size: .92rem; }
    .selecao-defesas-layout { grid-template-columns: 1fr; }
    .selecao-defesas-catalogo { grid-template-columns: 1fr; }
    .selecao-defesa-cartao { min-height: 132px; }
    .selecao-defesas-equipe { position: static; }
    .album-abas {
        padding-bottom: 7px;
        grid-template-columns: repeat(5, 88px);
        gap: 5px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .album-aba { scroll-snap-align: start; }
    .conteudo-menu[data-tela="album"] .album-pagina-figurinhas {
        padding: 18px 12px 18px 28px;
    }
    .conteudo-menu[data-tela="album"] .album-categoria-cabecalho {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .conteudo-menu[data-tela="album"] .album-categoria-resumo {
        justify-self: stretch;
        text-align: left;
    }
    .conteudo-menu[data-tela="album"] .album-categoria-resumo p {
        text-align: left;
    }
    .menu-principal .conteudo-menu[data-tela="album"] .album-cartao {
        min-height: 132px;
    }
    .conteudo-menu[data-tela="album"] .album-cartao-inimigo,
    .conteudo-menu[data-tela="album"] .album-cartao-torre,
    .conteudo-menu[data-tela="album"] .album-cartao-skin {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }
    .menu-principal .conteudo-menu[data-tela="album"] .miniatura-inimigo-album,
    .menu-principal .conteudo-menu[data-tela="album"] .miniatura-torre-album,
    .menu-principal .conteudo-menu[data-tela="album"] .miniatura-skin-album {
        width: 82px;
        height: 82px;
    }
    .conteudo-menu[data-tela="album"] .album-skin-topo {
        justify-content: flex-start;
    }
    .loja-abas { gap: 5px; }
    .loja-aba { min-height: 60px; padding: 6px 4px; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
    .loja-aba-icone { width: 30px; height: 30px; font-size: .9rem; }
    .loja-aba-icone .icone-pixel-loja { transform: scale(.82); }
    .loja-aba strong { font-size: .52rem; }
    .loja-aba small { display: none; }
    .loja-grade { grid-template-columns: 1fr; }
    .loja-vazia { min-height: 150px; padding: 18px 13px; gap: 13px; }
    .loja-vazia-icone { width: 52px; height: 52px; font-size: 1.45rem; }
    .loja-item { grid-template-columns: 76px minmax(0, 1fr); padding: 11px; gap: 10px; }
    .loja-item-miniatura { width: 72px; height: 72px; }
    .capitulos-grade,
    .fases-grade { grid-template-columns: 1fr; }
    .capitulo-cartao { min-height: 250px; }
    .capitulo-cartao-com-maquina { min-height: 300px; }
    .botao-maquina-tempo-capitulo { top: 91px; right: 13px; width: 84px; min-height: 104px; }
    .capitulo-cartao-com-maquina h3,
    .capitulo-cartao-com-maquina .capitulo-intervalo { padding-right: 92px; }
    .navegacao-capitulos { align-items: stretch; flex-direction: column; }
    .navegacao-capitulos span { text-align: center; }
    .painel-maquina-tempo { padding: 14px; }
    .maquina-tempo-cabecalho { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    .maquina-tempo-relogio { width: 56px; height: 56px; border-width: 5px; }
    .maquina-tempo-destinos { grid-template-columns: 1fr; }
    .botao-epoca-temporal { min-height: 92px; }
    .fases-epoca-vazia { padding: 18px 14px; }
    .conteudo-cabecalho { align-items: start; }
    .camada-configuracoes { padding: 10px; }
    .painel-configuracoes { max-height: calc(100vh - 20px); padding: 16px; }
}