: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;
    --cursor-pixel-normal: url("assets/cursor-pixel-seta.png") 3 2, auto;
    --cursor-pixel-acao: url("assets/cursor-pixel-mao.png") 14 2, pointer;
    --cursor-pixel-construcao: url("assets/cursor-pixel-construcao.png") 5 5, crosshair;
    --cursor-pixel-invalido: url("assets/cursor-pixel-invalido.png") 16 16, not-allowed;
    --cursor-pixel-mira: url("assets/cursor-pixel-mira.png") 16 16, crosshair;
    --cursor-pixel-explosivo: url("assets/cursor-pixel-explosivo.png") 5 5, crosshair;
    --tempo-transicao-ui: 150ms;
    --tempo-transicao-ui-salva: 220ms;
    --tempo-transicao-ui-media: 320ms;
    --easing-ui: cubic-bezier(.2, .72, .22, 1);
    font-family: "Courier New", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    min-width: 320px;
    min-height: 100%;
    cursor: var(--cursor-pixel-normal);
}

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


body.jogo-antes-do-lobby .aplicacao-jogo,
body.jogo-antes-do-lobby .menu-principal {
    visibility: hidden;
    pointer-events: none;
}

.tela-carregamento,
.tela-inicial-jogo {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100dvh;
    font-family: "Courier New", Consolas, monospace;
}

.tela-carregamento[hidden],
.tela-inicial-jogo[hidden] {
    display: none;
}

.tela-carregamento {
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    color: #fff5d6;
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 159, 28, .07) 50%, transparent 51%) 0 0 / 32px 32px,
        linear-gradient(transparent 49%, rgba(255, 159, 28, .07) 50%, transparent 51%) 0 0 / 32px 32px,
        #090a10;
    opacity: 1;
    transition: opacity var(--tempo-transicao-ui-media) var(--easing-ui), visibility var(--tempo-transicao-ui-media) var(--easing-ui);
}

.tela-carregamento::before,
.tela-carregamento::after {
    content: "";
    position: absolute;
    width: min(42vw, 520px);
    height: min(42vw, 520px);
    border: 3px solid rgba(255, 139, 22, .16);
    transform: rotate(45deg);
}

.tela-carregamento::before {
    top: -32%;
    left: -12%;
}

.tela-carregamento::after {
    right: -12%;
    bottom: -32%;
}

.tela-carregamento.carregamento-concluido {
    visibility: hidden;
    opacity: 0;
}

.carregamento-conteudo {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.carregamento-selo {
    padding: 6px 12px;
    color: #ffc45d;
    background: #17141a;
    border: 2px solid #ff8b16;
    box-shadow: 4px 4px 0 #000;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .22em;
}

.carregamento-logo-moldura {
    width: min(78vw, 410px);
    padding: 7px;
    background: #050506;
    border: 4px solid #ff9a19;
    box-shadow: 8px 8px 0 #000, inset 0 0 0 3px #5b240b;
}

.carregamento-logo-moldura img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 48vh;
    object-fit: contain;
    image-rendering: pixelated;
}

.carregamento-conteudo p {
    margin: 5px 0 0;
    color: #d7bea0;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.carregamento-conteudo > strong {
    color: #ffb13b;
    font-size: .82rem;
    letter-spacing: .17em;
}

.carregamento-barra {
    width: min(76vw, 360px);
    height: 16px;
    padding: 3px;
    overflow: hidden;
    background: #111117;
    border: 3px solid #30232a;
    box-shadow: 3px 3px 0 #000;
}

.carregamento-barra span {
    display: block;
    width: 38%;
    height: 100%;
    background: linear-gradient(90deg, #ff7917, #ffd04f, #ff7917);
    animation: percorrer-carregamento 1300ms linear infinite;
}

@keyframes percorrer-carregamento {
    from { transform: translateX(-115%); }
    to { transform: translateX(300%); }
}

.tela-inicial-jogo {
    z-index: 9990;
    display: grid;
    place-items: center;
    padding: 22px;
    overflow: hidden;
    color: #f9f3cf;
    background-color: #28613a;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        radial-gradient(circle at 50% 35%, rgba(145, 235, 116, .88) 0 7%, rgba(67, 148, 73, .82) 27%, rgba(18, 63, 39, .96) 72%);
    background-size: 38px 38px, 38px 38px, 100% 100%;
    opacity: 0;
    transition: opacity var(--tempo-transicao-ui-media) var(--easing-ui);
}

.tela-inicial-jogo.menu-inicial-visivel {
    opacity: 1;
}

.tela-inicial-jogo.menu-inicial-saindo {
    opacity: 0;
    transform: scale(1.025);
    transition: opacity var(--tempo-transicao-ui) var(--easing-ui), transform var(--tempo-transicao-ui) var(--easing-ui);
}

.menu-inicial-cenario,
.menu-inicial-cenario::before,
.menu-inicial-cenario::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.menu-inicial-cenario::before,
.menu-inicial-cenario::after {
    content: "";
}

.menu-inicial-cenario::before {
    top: auto;
    height: 25%;
    background:
        linear-gradient(135deg, transparent 0 22%, #1c4a30 22% 38%, transparent 38% 58%, #1c4a30 58% 72%, transparent 72%),
        #2f7540;
    border-top: 5px solid #183d28;
    box-shadow: 0 -8px 0 rgba(13, 43, 27, .3);
}

.menu-inicial-cenario::after {
    inset: 8% 9% auto;
    height: 14px;
    opacity: .45;
    background: repeating-linear-gradient(90deg, #d9f58a 0 24px, transparent 24px 54px);
}

.menu-inicial-relogio-fundo {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 44%;
    width: min(68vmin, 650px);
    aspect-ratio: 1;
    border: clamp(18px, 2.2vmin, 30px) solid rgba(220, 236, 187, .56);
    border-radius: 50%;
    background: repeating-conic-gradient(
        from -1.5deg,
        rgba(239, 246, 205, .72) 0 3deg,
        transparent 3deg 30deg
    );
    box-shadow:
        inset 0 0 0 clamp(88px, 17vmin, 165px) rgba(31, 94, 51, .9),
        0 0 0 clamp(7px, 1vmin, 13px) rgba(20, 58, 35, .5),
        0 0 70px rgba(235, 244, 203, .2);
    opacity: .3;
    filter: blur(6px);
    transform: translate(-50%, -50%) rotate(-2deg);
}

.menu-inicial-relogio-fundo::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: clamp(18px, 2.6vmin, 28px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(247, 239, 188, .9);
    box-shadow: 0 0 0 7px rgba(20, 58, 35, .7);
    transform: translate(-50%, -50%);
}

.menu-inicial-relogio-fundo i,
.menu-inicial-relogio-fundo b {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 50%;
    display: block;
    transform-origin: 50% 100%;
}

.menu-inicial-relogio-fundo i {
    width: clamp(10px, 1.4vmin, 17px);
    height: 34%;
    background: rgba(244, 240, 199, .88);
    transform: translateX(-50%) rotate(49deg);
}

.menu-inicial-relogio-fundo b {
    width: clamp(13px, 1.8vmin, 21px);
    height: 25%;
    background: rgba(244, 240, 199, .88);
    transform: translateX(-50%) rotate(-43deg);
}

.menu-inicial-conteudo {
    position: relative;
    z-index: 3;
    width: min(94vw, 720px);
    min-height: min(760px, calc(100dvh - 44px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.menu-inicial-selo {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: #173120;
    background: #f6c84e;
    border: 5px solid #fff0a2;
    outline: 5px solid #173120;
    box-shadow: 7px 7px 0 rgba(7, 25, 15, .72);
    font-size: 1.55rem;
    font-weight: 1000;
    transform: rotate(-3deg);
}

.menu-inicial-saudacao {
    margin: 12px 0 4px;
    padding: 6px 14px;
    color: #fff2a7;
    background: rgba(15, 51, 31, .9);
    border: 3px solid #9ed768;
    box-shadow: 4px 4px 0 #102c1c;
    font-size: clamp(.82rem, 2vw, 1.08rem);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.menu-inicial-conteudo h1 {
    margin: 8px 0 6px;
    line-height: .82;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.menu-inicial-conteudo h1 span,
.menu-inicial-conteudo h1 strong {
    display: block;
    color: #f8efc6;
    -webkit-text-stroke: 3px #142b1d;
    paint-order: stroke fill;
    text-shadow: 0 7px 0 #142b1d, 7px 7px 0 rgba(0, 0, 0, .28);
}

.menu-inicial-conteudo h1 span {
    font-size: clamp(2.6rem, 8vw, 5.3rem);
    letter-spacing: -.08em;
}

.menu-inicial-conteudo h1 strong {
    margin-top: 13px;
    color: #f4bd38;
    font-size: clamp(2.05rem, 6.3vw, 4.25rem);
    letter-spacing: .02em;
}

.menu-inicial-descricao {
    max-width: 520px;
    margin: 19px 0 22px;
    color: #e4f3c9;
    font-size: clamp(.77rem, 1.8vw, .98rem);
    font-weight: 800;
    line-height: 1.55;
}

.menu-inicial-acoes {
    width: min(100%, 390px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 12px;
}

.botao-menu-inicial {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fffce2;
    border: 4px solid #183320;
    box-shadow: 7px 7px 0 rgba(7, 24, 14, .72), inset 0 0 0 3px rgba(255, 255, 255, .2);
    font-weight: 1000;
    letter-spacing: .09em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .34);
    will-change: transform, filter;
    transition: transform var(--tempo-transicao-ui) var(--easing-ui), filter var(--tempo-transicao-ui) var(--easing-ui);
}

.botao-menu-inicial:hover,
.botao-menu-inicial:focus-visible {
    filter: brightness(1.14);
    transform: translate(-2px, -2px);
    outline: 4px solid #fff3a1;
    outline-offset: 3px;
}

.botao-menu-inicial:active {
    transform: translate(4px, 4px);
    box-shadow: 3px 3px 0 rgba(7, 24, 14, .72), inset 0 0 0 3px rgba(255, 255, 255, .14);
}

.botao-menu-inicial span {
    font-size: 1.25rem;
}

.botao-menu-inicial-jogar {
    background: linear-gradient(#76d83f 0 48%, #45a82f 48%);
}

.botao-menu-inicial-sair {
    background: linear-gradient(#8b4540 0 48%, #632c31 48%);
}

.menu-inicial-produtora {
    margin-top: 24px;
    color: rgba(239, 248, 211, .72);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.menu-inicial-torre,
.menu-inicial-inimigo {
    position: absolute;
    display: block;
    image-rendering: pixelated;
    filter: drop-shadow(7px 8px 0 rgba(8, 29, 17, .45));
}

.menu-inicial-torre {
    bottom: 12%;
    width: 112px;
    height: 98px;
    background: #304558;
    border: 8px solid #162431;
    box-shadow: inset 0 -18px 0 #23323f, inset 0 0 0 7px #6aa6bd;
}

.menu-inicial-torre::before {
    content: "";
    position: absolute;
    left: 27px;
    top: -48px;
    width: 48px;
    height: 54px;
    background: #55798f;
    border: 8px solid #162431;
}

.menu-inicial-torre i {
    position: absolute;
    left: 66px;
    top: -29px;
    width: 64px;
    height: 20px;
    background: #e1b944;
    border: 7px solid #162431;
}

.menu-inicial-torre-esquerda {
    left: 7%;
    transform: rotate(5deg);
}

.menu-inicial-torre-direita {
    right: 7%;
    transform: scaleX(-1) rotate(5deg);
}

.menu-inicial-inimigo {
    width: 58px;
    height: 58px;
    background: #9b4bc1;
    border: 8px solid #261e36;
    border-radius: 14px;
    box-shadow: inset 10px -10px 0 #6d3291;
}

.menu-inicial-inimigo::before,
.menu-inicial-inimigo::after {
    content: "";
    position: absolute;
    top: 13px;
    width: 9px;
    height: 13px;
    background: #fff2a8;
    border: 3px solid #261e36;
}

.menu-inicial-inimigo::before { left: 7px; }
.menu-inicial-inimigo::after { right: 7px; }

.menu-inicial-inimigo-1 {
    top: 17%;
    left: 12%;
    transform: rotate(-9deg);
}

.menu-inicial-inimigo-2 {
    top: 12%;
    right: 13%;
    background: #d45a43;
    transform: rotate(8deg) scale(.88);
}

.menu-inicial-inimigo-3 {
    right: 19%;
    bottom: 25%;
    background: #506fc1;
    transform: rotate(-4deg) scale(.72);
}

.tela-inicial-jogo[data-estado="encerrado"] .menu-inicial-cenario {
    filter: grayscale(1) brightness(.5);
}

.tela-inicial-jogo[data-estado="encerrado"] .menu-inicial-selo,
.tela-inicial-jogo[data-estado="encerrado"] h1,
.tela-inicial-jogo[data-estado="encerrado"] .menu-inicial-acoes {
    display: none;
}

@media (max-width: 700px) {
    .tela-carregamento,
    .tela-inicial-jogo {
        padding: 16px;
    }

    .menu-inicial-conteudo {
        min-height: calc(100dvh - 32px);
    }

    .menu-inicial-relogio-fundo {
        top: 43%;
        width: min(94vmin, 520px);
        opacity: .24;
        filter: blur(5px);
    }

    .menu-inicial-selo {
        width: 58px;
        height: 58px;
        border-width: 4px;
        outline-width: 4px;
        font-size: 1.14rem;
    }

    .menu-inicial-conteudo h1 span,
    .menu-inicial-conteudo h1 strong {
        -webkit-text-stroke-width: 2px;
        text-shadow: 0 5px 0 #142b1d, 5px 5px 0 rgba(0, 0, 0, .28);
    }

    .menu-inicial-acoes {
        width: min(100%, 330px);
        grid-template-columns: 1fr;
    }

    .botao-menu-inicial {
        min-height: 54px;
    }

    .menu-inicial-torre {
        bottom: 5%;
        transform: scale(.58);
    }

    .menu-inicial-torre-esquerda { left: -3%; }
    .menu-inicial-torre-direita { right: -3%; transform: scaleX(-1) scale(.58); }
    .menu-inicial-inimigo-1 { left: 4%; }
    .menu-inicial-inimigo-2 { right: 5%; }
    .menu-inicial-inimigo-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tela-carregamento,
    .tela-inicial-jogo,
    .botao-menu-inicial,
    .botao,
    .botao-lobby-extra,
    .icone-lobby,
    .relogio-quebrado-corpo,
    .notificacao-progresso,
    .conquista-cartao {
        transition-duration: 1ms;
    }

    .carregamento-barra span {
        animation-duration: 1800ms;
    }
}


button { font: inherit; }

button:not(:disabled),
a[href],
label[for],
select:not(:disabled),
input[type="range"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]):not(:disabled),
canvas.fliperama-sob-cursor,
canvas.radio-sob-cursor,
canvas.terminal-sob-cursor,
canvas.transmissor-sob-cursor {
    cursor: var(--cursor-pixel-acao) !important;
}

/* 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;
}

.botao.botao-pulso-temporal {
    width: auto;
    min-width: 188px;
    min-height: 42px;
    padding: 5px 8px;
    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;
    text-align: left;
}

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

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

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

.controle-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 .controle-pulso-icone {
    background: #766781;
    border-color: #9a8ba4;
}

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

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

.controle-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));
    will-change: opacity, transform;
    transition: opacity var(--tempo-transicao-ui) var(--easing-ui), transform var(--tempo-transicao-ui-salva) var(--easing-ui);
}

.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;
}

.painel-status-minigame-fliperama {
    display: grid;
    justify-items: stretch;
    gap: 9px;
}

.botao-sair-minigame-treinamento {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    color: #f5e9ff;
    background: #503261;
    border-color: #d58aff;
}

.botao-sair-minigame-treinamento[hidden] { display: none; }

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

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

.painel-minigame-treinamento-fliperama {
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    padding: 18px;
    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;
}

.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: var(--cursor-pixel-mira);
}

.minigame-fliperama[data-tipo="labirinto"] {
    cursor: var(--cursor-pixel-normal);
    border-color: #8fc9ff;
}

.minigame-fliperama[data-tipo="voo"] {
    cursor: var(--cursor-pixel-acao);
    border-color: #71ddff;
}

.minigame-fliperama[data-tipo="coleta"] {
    cursor: var(--cursor-pixel-normal);
    border-color: #fff36a;
}

.minigame-fliperama[data-tipo="sequencia"] {
    cursor: var(--cursor-pixel-acao);
    border-color: #ff83dc;
}

.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[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; }

.controles-toque-labirinto[data-tipo="coleta"] {
    grid-template-rows: 56px;
}

.controles-toque-labirinto[data-tipo="coleta"] .direcao-esquerda,
.controles-toque-labirinto[data-tipo="coleta"] .direcao-direita {
    grid-row: 1;
}

.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: var(--cursor-pixel-mira) !important;
}

canvas.construcao-sob-cursor {
    cursor: var(--cursor-pixel-construcao);
}

canvas.explosivo-sob-cursor {
    cursor: var(--cursor-pixel-explosivo);
}

canvas.posicao-invalida-sob-cursor {
    cursor: var(--cursor-pixel-invalido) !important;
}

canvas.objeto-interativo-sob-cursor {
    cursor: var(--cursor-pixel-acao) !important;
}

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

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

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

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

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

canvas.registro-ponto-zero-sob-cursor {
    cursor: pointer;
}

canvas.relogio-intervalo-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;
    will-change: transform, box-shadow;
    transition: transform var(--tempo-transicao-ui) var(--easing-ui), box-shadow var(--tempo-transicao-ui) var(--easing-ui);
}

.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-varredura {
    color: #e8fffb;
    background: #263f49;
    border-color: #62e4d6;
}

.botao-construcao-varredura:disabled {
    color: #afbdba;
    background: #293438;
    border-color: #52676a;
}

.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-perfuradora {
    color: #d4fffa;
    background: #234c55;
    border-color: #69e5da;
}

.botao-construcao-marcadora {
    color: #f2dcff;
    background: #453365;
    border-color: #cf71ff;
}

.botao-construcao-drones {
    color: #e0f8ff;
    background: #29466b;
    border-color: #ff9e3d;
}

.botao-construcao-correntes {
    color: #ffe8b5;
    background: #554235;
    border-color: #d39448;
}

.botao-construcao-sucata {
    color: #f3dfae;
    background: #4e5351;
    border-color: #a86e43;
}

.botao-construcao-prismatico {
    color: #f1f3ff;
    background: #303858;
    border-color: #ff76c9;
}

.botao-construcao-perfuradora:disabled,
.botao-construcao-marcadora:disabled,
.botao-construcao-drones:disabled,
.botao-construcao-correntes:disabled,
.botao-construcao-sucata:disabled,
.botao-construcao-prismatico:disabled {
    color: #adb3ba;
    background: #2b3035;
    border-color: #59616a;
}

.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-mina-pulso {
    color: #edfcff;
    background: #493b74;
    border-color: #61edf2;
}

.botao-construcao-mina-pulso:disabled {
    color: #b3aebf;
    background: #302b40;
    border-color: #625a78;
}

.botao-construcao-mina-corrosiva {
    color: #f1ffd1;
    background: #34552f;
    border-color: #a8ef55;
}

.botao-construcao-mina-corrosiva:disabled {
    color: #b4bda9;
    background: #2a3528;
    border-color: #586650;
}

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

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

.botao-construcao-bomba-fragmentacao {
    color: #fff1c7;
    background: #613b31;
    border-color: #ffbc55;
}

.botao-construcao-bomba-fragmentacao:disabled {
    color: #b6aaa2;
    background: #382d29;
    border-color: #6e5a50;
}

.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;
}

.botao-retorno-limbo {
    position: fixed;
    left: clamp(20px, 5vw, 76px);
    bottom: calc(clamp(30px, 6vh, 62px) + 90px);
    z-index: 4;
    width: 158px;
    min-height: 48px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff0ca;
    background: #30213e;
    border: 3px solid #c9a968;
    box-shadow: 3px 3px 0 #15101e, inset 0 0 0 2px #655075;
    font-family: "Courier New", monospace;
    cursor: pointer;
}
.botao-retorno-limbo span { color: #eac773; font-size: 24px; }
.botao-retorno-limbo strong { font-size: 12px; line-height: 1.3; }
.botao-retorno-limbo:hover { background: #493055; }
.botao-retorno-limbo:focus-visible { outline: 3px solid #fff0ca; outline-offset: 3px; }
.menu-principal.pagina-menu-aberta .botao-retorno-limbo { visibility: hidden; }
@media (max-width: 720px) {
    .botao-retorno-limbo { left: auto; right: 8px; bottom: 288px; }
}
.relogio-quebrado-intervalo {
    position: fixed;
    left: clamp(20px, 5vw, 76px);
    bottom: clamp(30px, 6vh, 62px);
    z-index: 4;
    width: 158px;
    height: 80px;
    padding: 0;
    appearance: none;
    color: #efe5ff;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: "Courier New", monospace;
    cursor: pointer;
}

.relogio-quebrado-intervalo[hidden] { display: none; }
.relogio-quebrado-intervalo:focus-visible {
    outline: 4px dashed #fff1a0;
    outline-offset: 5px;
}
.relogio-quebrado-intervalo:disabled { cursor: wait; opacity: .68; }

.relogio-quebrado-intervalo::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 82px;
    height: 12px;
    content: "";
    background: rgba(12, 15, 13, .42);
    clip-path: polygon(9px 0, 72px 0, 72px 2px, 79px 2px, 79px 5px, 82px 5px, 82px 9px, 76px 9px, 76px 11px, 16px 11px, 16px 12px, 5px 12px, 5px 10px, 0 10px, 0 5px, 9px 5px);
}

.relogio-quebrado-corpo {
    position: absolute;
    left: 4px;
    bottom: 7px;
    display: block;
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    background: #514a43;
    border: 3px solid #171513;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 4px #887a6b,
        inset -5px -5px 0 rgba(39, 33, 29, .42),
        5px 5px 0 rgba(20, 15, 13, .5);
    will-change: filter, transform;
    transition: filter var(--tempo-transicao-ui-media) var(--easing-ui), transform var(--tempo-transicao-ui-media) var(--easing-ui);
}

.relogio-quebrado-aro {
    position: absolute;
    inset: 3px;
    display: block;
    overflow: hidden;
    background: #ded5c3;
    border: 4px solid #aa9b87;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #2b2723;
}

.relogio-quebrado-aro::before {
    position: absolute;
    top: -4px;
    right: 0;
    width: 18px;
    height: 17px;
    content: "";
    background: #171513;
    clip-path: polygon(7px 0, 18px 0, 18px 13px, 14px 13px, 14px 17px, 8px 17px, 8px 13px, 5px 13px, 5px 8px, 0 8px, 0 5px, 7px 5px);
}

.relogio-quebrado-mostrador {
    position: absolute;
    top: 7px;
    left: 7px;
    display: block;
    overflow: hidden;
    width: 48px;
    height: 48px;
    background: #f3eddf;
    border: 0;
    border-radius: 50%;
    outline: 3px solid #403932;
    box-shadow: inset 4px -4px 0 #d2c7b5, inset -3px 3px 0 #fffaf0;
}

.relogio-quebrado-marcas,
.relogio-quebrado-marcas i {
    position: absolute;
    display: block;
}

.relogio-quebrado-marcas { inset: 0; }
.relogio-quebrado-marcas i {
    width: 3px;
    height: 4px;
    background: #3d3934;
}

.relogio-quebrado-marcas i:nth-child(1) { top: 2px; left: 23px; width: 3px; height: 6px; }
.relogio-quebrado-marcas i:nth-child(2) { top: 5px; left: 33px; }
.relogio-quebrado-marcas i:nth-child(3) { top: 12px; left: 40px; width: 5px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(4) { top: 23px; left: 42px; width: 6px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(5) { top: 34px; left: 40px; width: 5px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(6) { top: 41px; left: 33px; }
.relogio-quebrado-marcas i:nth-child(7) { top: 40px; left: 23px; width: 3px; height: 6px; }
.relogio-quebrado-marcas i:nth-child(8) { top: 41px; left: 12px; }
.relogio-quebrado-marcas i:nth-child(9) { top: 34px; left: 3px; width: 5px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(10) { top: 23px; left: 0; width: 6px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(11) { top: 12px; left: 3px; width: 5px; height: 3px; }
.relogio-quebrado-marcas i:nth-child(12) { top: 5px; left: 12px; }

.relogio-ponteiro {
    position: absolute;
    left: 22px;
    bottom: 24px;
    width: 4px;
    background: #25211e;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .32);
}

.relogio-ponteiro-horas { height: 13px; }
.relogio-ponteiro-minutos { left: 23px; width: 3px; height: 19px; }

.relogio-quebrado-pino {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 8px;
    height: 8px;
    background: #a9894f;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #28231f;
}

.relogio-rachadura {
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    color: #5b554e;
    background: currentColor;
}

.relogio-rachadura-1 {
    top: 4px;
    left: 36px;
    box-shadow:
        -3px 3px 0 currentColor,
        -3px 6px 0 currentColor,
        -6px 9px 0 currentColor,
        -6px 12px 0 currentColor,
        -9px 15px 0 currentColor,
        -6px 15px 0 currentColor;
}

.relogio-rachadura-2 {
    right: 4px;
    bottom: 4px;
    box-shadow:
        -3px -3px 0 currentColor,
        -3px -6px 0 currentColor,
        -6px -9px 0 currentColor,
        -6px -12px 0 currentColor,
        -9px -12px 0 currentColor;
}

.relogio-rachadura-3 {
    left: 3px;
    bottom: 10px;
    box-shadow:
        3px -3px 0 currentColor,
        6px -3px 0 currentColor,
        9px -6px 0 currentColor,
        12px -6px 0 currentColor;
}

.relogio-quebrado-falta {
    position: absolute;
    top: -1px;
    right: -1px;
    display: block;
    width: 16px;
    height: 18px;
    background: #1a1715;
    clip-path: polygon(7px 0, 16px 0, 16px 18px, 11px 18px, 11px 14px, 7px 14px, 7px 11px, 3px 11px, 3px 7px, 0 7px, 0 4px, 7px 4px);
}

.relogio-quebrado-cacos,
.relogio-quebrado-cacos i {
    position: absolute;
    display: block;
}

.relogio-quebrado-cacos {
    left: 66px;
    bottom: 2px;
    width: 32px;
    height: 18px;
}

.relogio-quebrado-cacos i {
    width: 6px;
    height: 5px;
    background: #d8cfbd;
    box-shadow:
        -2px 0 0 #332e2a,
        2px 0 0 #332e2a,
        0 -2px 0 #332e2a,
        0 2px 0 #332e2a;
}

.relogio-quebrado-cacos i:nth-child(1) { left: 2px; top: 2px; }
.relogio-quebrado-cacos i:nth-child(2) { left: 21px; top: 9px; width: 5px; height: 4px; }
.relogio-quebrado-cacos i:nth-child(3) { left: 8px; top: 14px; width: 4px; height: 4px; }

.relogio-quebrado-legenda {
    position: absolute;
    left: 82px;
    top: 20px;
    display: block;
    width: 72px;
    text-align: left;
    text-shadow: 2px 2px 0 #101313;
}

.relogio-quebrado-legenda strong,
.relogio-quebrado-legenda small { display: block; }
.relogio-quebrado-legenda strong {
    color: #fff1a0;
    font-size: .7rem;
    letter-spacing: .08em;
}
.relogio-quebrado-legenda small {
    margin-top: 3px;
    color: #64dfd0;
    font-size: .39rem;
    font-weight: 900;
    line-height: 1.2;
    opacity: .58;
    transition: opacity var(--tempo-transicao-ui-media) var(--easing-ui);
}

.relogio-quebrado-intervalo:hover .relogio-quebrado-corpo,
.relogio-quebrado-intervalo:focus-visible .relogio-quebrado-corpo {
    filter: brightness(1.2);
    transform: translateY(-3px);
}

.relogio-quebrado-intervalo:hover .relogio-quebrado-legenda small,
.relogio-quebrado-intervalo:focus-visible .relogio-quebrado-legenda small { opacity: 1; }

.relogio-quebrado-descoberto .relogio-rachadura {
    color: #56e0cf;
}

.relogio-quebrado-concluido .relogio-quebrado-corpo { filter: saturate(.62); }

.camada-transicao-intervalo {
    position: fixed;
    inset: 0;
    z-index: 82;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        repeating-linear-gradient(90deg, rgba(95, 224, 210, .12) 0 3px, transparent 3px 36px),
        repeating-linear-gradient(0deg, rgba(240, 185, 95, .08) 0 2px, transparent 2px 28px),
        #050409;
}

.camada-transicao-intervalo[hidden] { display: none; }
.camada-transicao-intervalo.transicao-intervalo-ativa { animation: atravessar-intervalo 1.4s steps(8, end) both; }

.transicao-intervalo-ponteiro {
    position: absolute;
    width: min(68vw, 620px);
    aspect-ratio: 1;
    border: 18px solid rgba(240, 185, 95, .5);
    border-radius: 50%;
    outline: 9px dashed rgba(98, 228, 214, .42);
    animation: girar-intervalo 720ms steps(12, end) infinite;
}

.transicao-intervalo-ponteiro::before,
.transicao-intervalo-ponteiro::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    content: "";
    background: #fff2a3;
    transform-origin: 6px 6px;
}
.transicao-intervalo-ponteiro::before { height: 42%; transform: translate(-6px, -6px) rotate(205deg); }
.transicao-intervalo-ponteiro::after { height: 31%; transform: translate(-6px, -6px) rotate(90deg); }

.transicao-intervalo-mensagem {
    position: relative;
    z-index: 1;
    padding: 22px 28px;
    text-align: center;
    background: rgba(7, 6, 13, .94);
    border: 5px solid #62e4d6;
    outline: 5px solid #d0a85f;
    box-shadow: 10px 10px 0 #020205;
}
.transicao-intervalo-mensagem small,
.transicao-intervalo-mensagem strong { display: block; }
.transicao-intervalo-mensagem small { color: #fff1a0; font-size: .67rem; letter-spacing: .16em; }
.transicao-intervalo-mensagem strong { margin-top: 10px; font-size: clamp(.9rem, 3vw, 1.7rem); }

@keyframes girar-intervalo { to { transform: rotate(360deg); } }
@keyframes atravessar-intervalo {
    0% { opacity: 0; filter: brightness(3); }
    14%, 72% { opacity: 1; }
    35% { filter: hue-rotate(70deg) contrast(1.8); }
    74% { transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); filter: brightness(0); }
}

@media (max-width: 720px) {
    .relogio-quebrado-intervalo {
        right: 8px;
        bottom: 198px;
        left: auto;
        transform: none;
    }

    .transicao-intervalo-mensagem { margin: 16px; padding: 18px 14px; }
}

@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;
}

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

.menu-principal.tema-laboratorio {
    --contorno-lobby: #191716;
    background-color: #3e3a35;
    background-image:
        linear-gradient(rgba(105, 226, 207, .055) 2px, transparent 2px),
        linear-gradient(90deg, rgba(198, 154, 81, .065) 2px, transparent 2px),
        linear-gradient(#504a42, #302d2a);
    background-size: 56px 56px, 56px 56px, auto;
}

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

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

.bobina-laboratorio-lobby {
    width: 74px;
    height: 128px;
    background:
        repeating-linear-gradient(0deg, #332d28 0 12px, #c69a51 12px 18px),
        #332d28;
    border: 8px solid #191716;
    box-shadow: inset 11px 0 0 rgba(255, 255, 255, .06), 7px 7px 0 rgba(0, 0, 0, .34);
}

.bobina-laboratorio-lobby::after {
    position: absolute;
    inset: 20px -15px;
    content: "";
    border: 5px solid #69e2cf;
    box-shadow: 0 0 12px rgba(105, 226, 207, .45);
}

.bobina-laboratorio-lobby-1 { left: 4%; bottom: 3%; transform: scale(.82); }
.bobina-laboratorio-lobby-2 { right: 6%; top: 4%; transform: scale(.68); }

.tubo-laboratorio-lobby {
    width: 66px;
    height: 118px;
    background: linear-gradient(90deg, #5a675f, #9cc3b5 48%, #425049);
    border: 8px solid #24211f;
    box-shadow: inset 0 -31px 0 rgba(105, 226, 207, .24), 7px 7px 0 rgba(0, 0, 0, .32);
}

.tubo-laboratorio-lobby-1 { left: 21%; top: 7%; transform: scale(.7); }
.tubo-laboratorio-lobby-2 { right: 23%; bottom: 5%; transform: scale(.8); }

.cabo-laboratorio-lobby {
    width: 185px;
    height: 9px;
    background: #191716;
    box-shadow: 28px 16px 0 #69e2cf, 71px -13px 0 #c69a51;
    opacity: .64;
}

.cabo-laboratorio-lobby-1 { left: 33%; top: 9%; transform: rotate(4deg); }
.cabo-laboratorio-lobby-2 { right: 30%; bottom: 12%; transform: rotate(-7deg); }

.menu-principal.tema-laboratorio .lobby-selo {
    color: #211d1a;
    background: #c69a51;
    border-color: #f0c776;
    box-shadow: 6px 6px 0 #2b2724;
}

.menu-principal.tema-laboratorio .menu-subtitulo,
.menu-principal.tema-laboratorio .lobby-topo h1 span { color: #8bf1df; }

.menu-principal.tema-laboratorio .botao-configuracoes-lobby,
.menu-principal.tema-laboratorio .lobby-status span {
    background: #575047;
    border-color: #c69a51;
}

.menu-principal.tema-laboratorio .lobby-rodape,
.menu-principal.tema-laboratorio .credito-criador {
    background: rgba(39, 36, 33, .96);
    border-color: #69e2cf;
}

.menu-principal.tema-laboratorio .conteudo-menu {
    --fundo-conteudo-menu: #45403a;
    background: var(--fundo-conteudo-menu);
    border-color: #c69a51;
    box-shadow: 8px 8px 0 #191716;
}

.menu-principal.tema-laboratorio .album-cartao,
.menu-principal.tema-laboratorio .missao-cartao,
.menu-principal.tema-laboratorio .premio-colecao,
.menu-principal.tema-laboratorio .conquista-cartao,
.menu-principal.tema-laboratorio .tutorial-lista li {
    background: #534c44;
    border-color: #69e2cf;
    box-shadow: 3px 3px 0 #211f1d;
}

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

.menu-principal.tema-futuroDespedacado {
    --contorno-lobby: #070911;
    background-color: #11151f;
    background-image:
        linear-gradient(rgba(84, 232, 220, .05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(188, 92, 255, .06) 2px, transparent 2px),
        linear-gradient(150deg, transparent 0 46%, rgba(0, 0, 0, .24) 47% 51%, transparent 52%),
        linear-gradient(#1a202d, #090d15);
    background-size: 54px 54px, 54px 54px, 230px 230px, auto;
}

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

.menu-principal.tema-futuroDespedacado .decoracao-lobby-futuro-despedacado {
    display: block;
}

.ruina-futuro-lobby {
    width: 88px;
    height: 156px;
    background:
        repeating-linear-gradient(0deg, transparent 0 20px, #654478 20px 26px),
        #293342;
    border: 8px solid #080b12;
    clip-path: polygon(0 16%, 21% 4%, 37% 17%, 58% 0, 77% 13%, 100% 6%, 100% 100%, 0 100%);
    box-shadow: inset 16px 0 0 #3a4656, 8px 8px 0 rgba(0, 0, 0, .5);
}

.ruina-futuro-lobby-1 { left: 3%; bottom: 3%; transform: scale(.86); }
.ruina-futuro-lobby-2 { right: 5%; top: 4%; transform: scale(.7); }

.relogio-futuro-lobby {
    width: 72px;
    height: 72px;
    border: 10px solid #303947;
    border-radius: 50%;
    background: #c3b987;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, .42), inset 0 0 0 5px #1a202b;
}

.relogio-futuro-lobby::before,
.relogio-futuro-lobby::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    background: #1a202b;
    transform-origin: 2px 2px;
}

.relogio-futuro-lobby::before {
    width: 4px;
    height: 25px;
    transform: translate(-2px, -2px) rotate(180deg);
}

.relogio-futuro-lobby::after {
    width: 4px;
    height: 20px;
    transform: translate(-2px, -2px) rotate(103deg);
}

.relogio-futuro-lobby-1 { left: 20%; top: 8%; transform: scale(.8); }
.relogio-futuro-lobby-2 { right: 24%; bottom: 8%; transform: scale(.68); }

.fenda-futuro-lobby {
    width: 86px;
    height: 86px;
    border: 8px dashed #bc5cff;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(188, 92, 255, .54), inset 0 0 16px rgba(84, 232, 220, .32);
}

.fenda-futuro-lobby-1 { left: 34%; top: 8%; transform: scale(.72); }
.fenda-futuro-lobby-2 { right: 31%; bottom: 9%; transform: scale(.62); border-color: #54e8dc; }

.menu-principal.tema-futuroDespedacado .lobby-selo {
    color: #080b12;
    background: #54e8dc;
    border-color: #c9fffa;
    box-shadow: 6px 6px 0 #654478;
}

.menu-principal.tema-futuroDespedacado .menu-subtitulo,
.menu-principal.tema-futuroDespedacado .lobby-topo h1 span { color: #8df5eb; }

.menu-principal.tema-futuroDespedacado .botao-configuracoes-lobby,
.menu-principal.tema-futuroDespedacado .lobby-status span {
    background: #293342;
    border-color: #654478;
}

.menu-principal.tema-futuroDespedacado .lobby-rodape,
.menu-principal.tema-futuroDespedacado .credito-criador {
    background: rgba(8, 11, 18, .96);
    border-color: #54e8dc;
}

.menu-principal.tema-futuroDespedacado .conteudo-menu {
    --fundo-conteudo-menu: #171d28;
    background: var(--fundo-conteudo-menu);
    border-color: #654478;
    box-shadow: 8px 8px 0 #070911;
}

.menu-principal.tema-futuroDespedacado .album-cartao,
.menu-principal.tema-futuroDespedacado .missao-cartao,
.menu-principal.tema-futuroDespedacado .premio-colecao,
.menu-principal.tema-futuroDespedacado .conquista-cartao,
.menu-principal.tema-futuroDespedacado .tutorial-lista li {
    background: #222b39;
    border-color: #54e8dc;
    box-shadow: 3px 3px 0 #070911;
}

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

.menu-principal.tema-pontoZero {
    --contorno-lobby: #05070c;
    background-color: #0e1118;
    background-image:
        linear-gradient(rgba(240, 189, 98, .055) 2px, transparent 2px),
        linear-gradient(90deg, rgba(103, 229, 219, .055) 2px, transparent 2px),
        radial-gradient(circle at 50% 44%, rgba(143, 95, 181, .22), transparent 36%),
        linear-gradient(#171b25, #07090e);
    background-size: 48px 48px, 48px 48px, auto, auto;
}

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

.menu-principal.tema-pontoZero .decoracao-lobby-ponto-zero {
    display: block;
}

.anel-ponto-zero-lobby {
    width: 104px;
    height: 104px;
    border: 10px solid #f0bd62;
    border-radius: 50%;
    outline: 5px dashed #67e5db;
    box-shadow: 0 0 26px rgba(240, 189, 98, .35), inset 0 0 24px rgba(103, 229, 219, .2);
}

.anel-ponto-zero-lobby::before,
.anel-ponto-zero-lobby::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    background: #f5e5b9;
    transform-origin: 3px 3px;
}

.anel-ponto-zero-lobby::before { width: 6px; height: 38px; transform: translate(-3px, -3px) rotate(180deg); }
.anel-ponto-zero-lobby::after { width: 6px; height: 31px; transform: translate(-3px, -3px) rotate(68deg); }
.anel-ponto-zero-lobby-1 { left: 7%; top: 9%; transform: scale(.72); }
.anel-ponto-zero-lobby-2 { right: 8%; bottom: 8%; transform: scale(.58); }

.terminal-ponto-zero-lobby {
    width: 82px;
    height: 118px;
    background: repeating-linear-gradient(0deg, #202a3c 0 16px, #67e5db 16px 20px);
    border: 8px solid #05070c;
    box-shadow: inset 10px 0 #303c50, 8px 8px 0 rgba(0, 0, 0, .5);
    clip-path: polygon(0 0, 100% 0, 100% 82%, 84% 82%, 84% 100%, 16% 100%, 16% 82%, 0 82%);
}

.terminal-ponto-zero-lobby-1 { left: 22%; bottom: 5%; transform: scale(.72); }
.terminal-ponto-zero-lobby-2 { right: 21%; top: 5%; transform: scale(.62); }

.linha-ponto-zero-lobby {
    width: 150px;
    height: 10px;
    background: #8f5fb5;
    border: 4px solid #05070c;
    box-shadow: 0 0 14px rgba(143, 95, 181, .55);
}

.linha-ponto-zero-lobby-1 { left: 31%; top: 12%; transform: rotate(-18deg); }
.linha-ponto-zero-lobby-2 { right: 30%; bottom: 11%; background: #67e5db; transform: rotate(18deg); }

.menu-principal.tema-pontoZero .lobby-selo {
    color: #11151f;
    background: #f0bd62;
    border-color: #fff0bc;
    box-shadow: 6px 6px 0 #67e5db;
}

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

.menu-principal.tema-pontoZero .botao-configuracoes-lobby,
.menu-principal.tema-pontoZero .lobby-status span {
    background: #202a3c;
    border-color: #8f5fb5;
}

.menu-principal.tema-pontoZero .lobby-rodape,
.menu-principal.tema-pontoZero .credito-criador {
    background: rgba(5, 7, 12, .96);
    border-color: #f0bd62;
}

.menu-principal.tema-pontoZero .conteudo-menu {
    --fundo-conteudo-menu: #171b25;
    background: var(--fundo-conteudo-menu);
    border-color: #f0bd62;
    box-shadow: 8px 8px 0 #05070c;
}

.menu-principal.tema-pontoZero .album-cartao,
.menu-principal.tema-pontoZero .missao-cartao,
.menu-principal.tema-pontoZero .premio-colecao,
.menu-principal.tema-pontoZero .conquista-cartao,
.menu-principal.tema-pontoZero .tutorial-lista li {
    background: #202a3c;
    border-color: #67e5db;
    box-shadow: 3px 3px 0 #05070c;
}

.menu-principal.tema-linhaTemporal,
.menu-principal.tema-intervaloPerdido {
    --contorno-lobby: #05050b;
    background-color: #100d1a;
    background-image:
        linear-gradient(90deg, rgba(96, 227, 212, .07) 2px, transparent 2px),
        linear-gradient(rgba(239, 182, 83, .06) 2px, transparent 2px),
        radial-gradient(circle at 50% 42%, rgba(140, 75, 166, .3), transparent 38%),
        linear-gradient(#1c172b, #070710);
    background-size: 44px 44px, 44px 44px, auto, auto;
}

.menu-principal.tema-eraApagada {
    --contorno-lobby: #42434b;
    background-color: #c9c9cd;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 252, .38) 3px, transparent 3px),
        linear-gradient(rgba(74, 75, 84, .12) 2px, transparent 2px),
        linear-gradient(135deg, #e8e8e5, #a7a7ae);
    background-size: 52px 52px, 52px 52px, auto;
}

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

.menu-principal.tema-eraApagada .lobby-selo {
    color: #30313a;
    background: #f5f2d1;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 #696a74;
}

.menu-principal.tema-eraApagada .menu-subtitulo,
.menu-principal.tema-eraApagada .lobby-topo h1 span { color: #30313a; }

.menu-principal.tema-eraApagada .menu-subtitulo,
.menu-principal.tema-eraApagada .lobby-topo > p:last-child {
    color: #30313a;
    text-shadow: 2px 2px 0 rgba(255, 255, 252, .72);
}

.menu-principal.tema-eraApagada .conteudo-menu {
    --fundo-conteudo-menu: #4b4c55;
    background: var(--fundo-conteudo-menu);
    border-color: #f5f2d1;
    box-shadow: 8px 8px 0 #34353d;
}

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

.menu-principal.tema-linhaTemporal .lobby-selo,
.menu-principal.tema-intervaloPerdido .lobby-selo {
    color: #10101b;
    background: #efb653;
    border-color: #fff0aa;
    box-shadow: 6px 6px 0 #60e3d4;
}

.menu-principal.tema-linhaTemporal .menu-subtitulo,
.menu-principal.tema-linhaTemporal .lobby-topo h1 span,
.menu-principal.tema-intervaloPerdido .menu-subtitulo,
.menu-principal.tema-intervaloPerdido .lobby-topo h1 span { color: #60e3d4; }

.menu-principal.tema-linhaTemporal .conteudo-menu,
.menu-principal.tema-intervaloPerdido .conteudo-menu {
    --fundo-conteudo-menu: #191525;
    background: var(--fundo-conteudo-menu);
    border-color: #efb653;
    box-shadow: 8px 8px 0 #05050b;
}

.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;
    will-change: transform, box-shadow;
    transition: transform var(--tempo-transicao-ui) var(--easing-ui), box-shadow var(--tempo-transicao-ui) var(--easing-ui);
}

.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-salvos {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 6px;
    border: 3px solid;
    cursor: pointer;
    background: #33475f;
    border-color: #91c8ee;
    box-shadow: 6px 6px 0 #182737;
}

.lobby-perfil-e-salvos { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.botao-modo-classico { background:#294655; border-color:#75cfbd; box-shadow:6px 6px 0 #142e38; }
.classico-apresentacao { max-width:720px; margin:32px auto; padding:clamp(20px,5vw,48px); border:4px solid #75cfbd; background:#172c38; color:#f7efd1; text-align:center; box-shadow:8px 8px 0 #0c1d27; }
.classico-emblema { display:block; color:#f5d67a; font:80px monospace; }
.classico-em-breve { display:inline-block; padding:8px 12px; background:#314c58; color:#a9e5d9; }
.classico-apresentacao h3 { margin:24px 0 16px; line-height:1.6; }
.classico-apresentacao p { line-height:2; margin-bottom:28px; }
.classico-apresentacao button { max-width:100%; white-space:normal; line-height:1.8; }
.botao-lobby-salvos:focus-visible { outline:3px solid #fff3aa; outline-offset:4px; }

.botao-lobby-salvos:hover {
    box-shadow: 3px 3px 0 #182737;
}

.icone-partidas-salvas {
    display: block;
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

#botao-retomar-castelo[hidden] {
    display: none;
}

.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;
    will-change: transform, box-shadow;
    transition: transform var(--tempo-transicao-ui) var(--easing-ui), box-shadow var(--tempo-transicao-ui) var(--easing-ui);
}

.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-nivel {
    width: 190px;
    min-height: 50px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    appearance: none;
    color: #eef9ff;
    background: #173b50;
    border: 3px solid #65c5df;
    box-shadow: 4px 4px 0 #142c1a;
    font-family: "Courier New", monospace;
    text-align: left;
    cursor: pointer;
}

.lobby-nivel:hover,
.lobby-nivel:focus-visible {
    background: #20566d;
    border-color: #a8efff;
    outline: 2px dashed #fff36a;
    outline-offset: 2px;
}

.lobby-nivel-selo {
    width: 40px;
    height: 36px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #1c3040;
    background: #7fe8ff;
    border: 3px solid #d0f8ff;
    box-shadow: 2px 2px 0 #0d2431;
    text-align: center;
}

.lobby-nivel-selo small,
.lobby-nivel-selo strong,
.lobby-nivel-dados small,
.lobby-nivel-dados em { display: block; }

.lobby-nivel-selo small {
    font-size: .38rem;
    font-weight: 900;
}

.lobby-nivel-selo strong {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    text-shadow: none;
}

.lobby-nivel-dados small {
    color: #8eeaff;
    font-size: .43rem;
    font-weight: 900;
}

.lobby-nivel-dados em {
    margin-top: 2px;
    font-size: .48rem;
    font-style: normal;
    font-weight: 900;
}

.lobby-nivel-barra {
    width: 100%;
    height: 7px;
    margin-top: 4px;
    display: block;
    overflow: hidden;
    background: #0b2230;
    border: 2px solid #8ddff0;
}

.lobby-nivel-barra i {
    width: 0;
    height: 100%;
    display: block;
    background: #fff36a;
}

.nivel-progresso-hero {
    margin-top: 18px;
    padding: 20px;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    color: #effaff;
    background: #163d50;
    border: 5px solid #76d9ee;
    box-shadow: 7px 7px 0 #102834;
}

.nivel-progresso-selo {
    width: 98px;
    height: 98px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #173247;
    background: #7de4f4;
    border: 6px solid #d0f8ff;
    outline: 4px solid #102834;
    box-shadow: inset 0 -10px 0 #44aabf;
}

.nivel-progresso-selo small,
.nivel-progresso-selo strong { display: block; }

.nivel-progresso-selo small {
    font-size: .58rem;
    font-weight: 900;
}

.nivel-progresso-selo strong {
    font-size: 2.35rem;
    line-height: 1;
}

.nivel-progresso-dados header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.nivel-progresso-dados header small,
.nivel-progresso-dados header strong { display: block; }

.nivel-progresso-dados header small {
    color: #8eeaff;
    font-size: .58rem;
    font-weight: 900;
}

.nivel-progresso-dados header strong {
    margin-top: 5px;
    color: #fff36a;
    font-size: 1.15rem;
}

.nivel-progresso-dados header em {
    color: #c8edf5;
    font-size: .62rem;
    font-style: normal;
}

.nivel-progresso-barra {
    height: 22px;
    margin-top: 12px;
    overflow: hidden;
    background: #091f2b;
    border: 4px solid #a9edf8;
    box-shadow: inset 0 0 0 3px #17384a;
}

.nivel-progresso-barra span {
    min-width: 0;
    height: 100%;
    display: block;
    background: repeating-linear-gradient(90deg, #fff36a 0 14px, #e6bd45 14px 18px);
}

.nivel-progresso-dados p {
    margin: 11px 0 0;
    color: #bfe7ef;
    font-size: .58rem;
    line-height: 1.6;
}

.nivel-recompensas {
    margin-top: 24px;
}

.nivel-recompensas > header {
    margin-bottom: 10px;
    color: #fff36a;
    font-size: .72rem;
    font-weight: 900;
}

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

.nivel-recompensa {
    min-height: 210px;
    padding: 16px;
    display: grid;
    grid-template-rows: 64px 1fr auto;
    gap: 11px;
    background: #1b4936;
    border: 4px solid #72aa73;
    box-shadow: 5px 5px 0 #102d22;
}

.nivel-recompensa-bloqueada {
    filter: grayscale(1);
    opacity: .62;
}

.nivel-recompensa-icone {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    color: #173329;
    background: #77e0a4;
    border: 5px solid #c5f7d7;
    box-shadow: 4px 4px 0 #0f2c20;
    font-size: 1.4rem;
    font-weight: 900;
}

.nivel-recompensa-torre { color: #183350; background: #73d9f1; border-color: #c8f6ff; }
.nivel-recompensa-melhoria { color: #463312; background: #ffe36a; border-color: #fff5ad; font-size: .72rem; }

.nivel-recompensa-dados small,
.nivel-recompensa-dados strong,
.nivel-recompensa-dados em { display: block; }

.nivel-recompensa-dados small {
    color: #99eab8;
    font-size: .52rem;
    font-weight: 900;
}

.nivel-recompensa-dados strong {
    margin-top: 6px;
    color: #fff;
    font-size: .77rem;
}

.nivel-recompensa-dados p {
    margin: 8px 0;
    color: #d3e9da;
    font-size: .58rem;
    line-height: 1.45;
}

.nivel-recompensa-dados em {
    color: #fff36a;
    font-size: .52rem;
    font-style: normal;
    font-weight: 900;
}

.nivel-recompensa-acao {
    width: 100%;
    min-height: 42px;
    font-size: .58rem;
}

.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: 12;
    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,
.categorias-missoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.premio-final-missoes { padding: 18px; margin: 16px 0; border: 3px solid #e4bf62; background: #142d22; }
.premio-final-skin { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px; }
.premio-final-skin .preview-skin-sentinela { flex: 0 0 68px; }
.premio-final-skin .preview-skin-sentinela::before { background: var(--cor-base-premio); border-color: var(--cor-canhao-premio); }
.premio-final-skin .preview-skin-sentinela::after { background: var(--cor-canhao-premio); border-color: #f5f5ff; }
.categorias-missoes .botao { min-height: 44px; }
.categoria-missao-premio {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    background: #ffdc58;
    color: #231b09;
    border: 2px solid #231b09;
    font-weight: 900;
    line-height: 1;
}
.categorias-missoes .botao[aria-pressed="true"] { background: #e4bf62; color: #162315; }
@media (max-width: 600px) {
    .categorias-missoes { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 12px; }
    .categorias-missoes .botao { flex: 0 0 auto; }
}

.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="introducao-fase-1"] {
    background: rgba(4, 12, 9, .82);
}

.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] .cutscene-carta-painel > small {
    opacity: 1;
    animation: none;
    color: #f2f5df;
}

.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] :is(.cutscene-carta-pedra, .carta-misteriosa-selo),
.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] .carta-misteriosa::before,
.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] .carta-misteriosa::after {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] .carta-misteriosa {
    min-height: 0;
    padding: clamp(24px, 5vw, 44px);
    background: #12271d;
    border-color: #91b878;
    color: #f2f5df;
    transform: none;
    animation: none;
}

.camada-cutscene-carta[data-tipo-carta="introducao-fase-1"] .carta-misteriosa p {
    color: #f2f5df;
}

.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;
}

.terminal-registro {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) {
    color: #eef7e9;
    background:
        repeating-linear-gradient(0deg, rgba(105, 226, 207, .045) 0 2px, transparent 2px 9px),
        radial-gradient(circle at 50% 46%, rgba(198, 154, 81, .16), transparent 47%),
        #211f1d;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .cutscene-carta-pedra {
    background: #514a42;
    border-color: #c69a51;
    box-shadow: inset 8px 6px 0 #6d6253, 7px 7px 0 rgba(0, 0, 0, .48);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .cutscene-carta-painel > small {
    color: #8bf1df;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa {
    min-height: 410px;
    padding: 28px 34px 25px;
    color: #eef7e9;
    background:
        repeating-linear-gradient(0deg, rgba(105, 226, 207, .045) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, rgba(198, 154, 81, .12), transparent 44%),
        #2b2a27;
    border-color: #c69a51;
    outline-color: #171513;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .5), inset 0 0 0 6px #514a42;
    transform: none;
}

.cutscene-carta-em-exibicao:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa {
    animation: ligar-terminal-registro 540ms steps(5, end) both;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa::after {
    background: #69e2cf;
    box-shadow: 0 8px 0 rgba(198, 154, 81, .28);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa-selo,
.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .radio-transmissao {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .terminal-registro {
    position: relative;
    z-index: 2;
    width: 240px;
    height: 132px;
    margin: 10px auto 15px;
    display: block;
    background: #595149;
    border: 8px solid #171513;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .38), inset 0 0 0 4px #74695c;
}

.terminal-registro-tela {
    position: absolute;
    inset: 15px 17px 48px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #17211e;
    border: 6px solid #24211f;
}

.terminal-registro-tela i {
    width: 72%;
    height: 5px;
    display: block;
    background: #69e2cf;
    box-shadow: 0 0 8px rgba(105, 226, 207, .52);
}

.terminal-registro-tela i:nth-child(2) { width: 91%; }
.terminal-registro-tela i:nth-child(3) { width: 55%; }

.terminal-registro-teclas {
    position: absolute;
    bottom: 14px;
    left: 30px;
    display: flex;
    gap: 12px;
}

.terminal-registro-teclas i {
    width: 35px;
    height: 13px;
    display: block;
    background: #c69a51;
    border: 4px solid #24211f;
}

.terminal-registro-base {
    position: absolute;
    right: 21px;
    bottom: -24px;
    left: 21px;
    height: 18px;
    display: block;
    background: #302b27;
    border: 6px solid #171513;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa p {
    margin: 14px 0 13px;
    font-size: .77rem;
    line-height: 1.55;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .carta-misteriosa strong {
    color: #e8bd72;
    font-size: .72rem;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro"],
    [data-tipo-carta="cena-final-laboratorio"]
) .botao-continuar-cutscene-carta {
    color: #211d1a;
    background: #c69a51;
    border-color: #f0c776;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-13"]:is(
    [data-etapa-cena="prototipo"],
    [data-etapa-cena="fichaTecnica"],
    [data-etapa-cena="camuflados"]
) .carta-misteriosa {
    background:
        linear-gradient(90deg, transparent 48%, rgba(98, 228, 214, .16) 48% 52%, transparent 52%),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(98, 228, 214, .1) 22px 25px),
        #12232a;
    border-color: #62e4d6;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .56), inset 0 0 0 6px #263f49;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-13"]:is(
    [data-etapa-cena="prototipo"],
    [data-etapa-cena="fichaTecnica"],
    [data-etapa-cena="camuflados"]
) .carta-misteriosa-selo {
    width: 76px;
    height: 76px;
    color: transparent;
    background:
        linear-gradient(#f5ffff 0 0) 34px 10px / 8px 24px no-repeat,
        linear-gradient(#62e4d6 0 0) 17px 31px / 42px 8px no-repeat,
        linear-gradient(#263f49 0 0) center / 58px 58px no-repeat;
    border-color: #efffff;
    box-shadow: 5px 5px 0 #d95ee5;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-13"][data-etapa-cena="fichaTecnica"] .carta-misteriosa p {
    padding: 13px;
    color: #12232a;
    background: #dff7f3;
    border: 4px solid #62e4d6;
    box-shadow: 5px 5px 0 #070b0d;
}

.maquina-tempo-cena-final {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"] .cutscene-carta-painel > small {
    text-shadow: 0 0 12px rgba(105, 226, 207, .42);
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="gravacao"] .terminal-registro-tela {
    overflow: hidden;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="gravacao"] .terminal-registro-tela i {
    width: 100%;
    opacity: .22;
    transform: translateX(-18px);
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="gravacao"] .terminal-registro-tela i:nth-child(2) {
    transform: translateX(29px);
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="gravacao"] .terminal-registro-tela::after {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 30px;
    height: 52px;
    content: "";
    background: #07100f;
    box-shadow: -22px 19px 0 -11px #07100f, 22px 19px 0 -11px #07100f;
    clip-path: polygon(34% 0, 66% 0, 76% 18%, 69% 36%, 92% 100%, 8% 100%, 31% 36%, 24% 18%);
    transform: translateX(-50%);
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="coordenada"] .terminal-registro {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"][data-etapa-cena="coordenada"] .maquina-tempo-cena-final {
    width: 250px;
    min-height: 142px;
    margin: 10px auto 15px;
    padding: 15px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    background: #17252b;
    border: 8px solid #171513;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .38), inset 0 0 0 4px #46616a;
}

.maquina-tempo-cena-final .maquina-tempo-relogio {
    width: 82px;
    height: 82px;
}

.coordenada-temporal {
    padding: 12px 9px;
    display: grid;
    gap: 9px;
    background: #07100f;
    border: 4px solid #38555a;
}

.coordenada-temporal i {
    width: 100%;
    height: 6px;
    display: block;
    background: #69e2cf;
    box-shadow: 0 0 8px rgba(105, 226, 207, .62);
}

.coordenada-temporal i:nth-child(2) {
    width: 70%;
    background: #e8bd72;
}

.coordenada-temporal i:nth-child(3) {
    width: 42%;
    background: #e955dc;
}

.transmissao-futuro-visual {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) {
    color: #f6edff;
    background:
        repeating-linear-gradient(0deg, rgba(84, 232, 220, .045) 0 2px, transparent 2px 8px),
        radial-gradient(circle at 50% 45%, rgba(188, 92, 255, .16), transparent 48%),
        #080b12;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .cutscene-carta-pedra {
    background: #202733;
    border-color: #05070c;
    box-shadow: inset 8px 6px 0 #354252, 7px 7px 0 rgba(0, 0, 0, .52);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .cutscene-carta-painel > small {
    color: #8df5eb;
    text-shadow: 0 0 12px rgba(84, 232, 220, .46);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .carta-misteriosa {
    min-height: 430px;
    padding: 28px 34px 25px;
    color: #eff6ff;
    background:
        repeating-linear-gradient(0deg, rgba(84, 232, 220, .045) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, rgba(188, 92, 255, .14), transparent 48%),
        #161c27;
    border-color: #654478;
    outline-color: #05070c;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .54), inset 0 0 0 6px #293442;
    transform: none;
}

.cutscene-carta-em-exibicao:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .carta-misteriosa {
    animation: ligar-terminal-registro 540ms steps(5, end) both;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .carta-misteriosa::after {
    background: #54e8dc;
    box-shadow: 0 8px 0 rgba(188, 92, 255, .3);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) :is(.carta-misteriosa-selo, .radio-transmissao, .terminal-registro) {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .transmissao-futuro-visual {
    position: relative;
    width: 250px;
    height: 145px;
    margin: 8px auto 14px;
    display: block;
    overflow: hidden;
    background: #070a11;
    border: 8px solid #05070c;
    box-shadow: inset 0 0 0 4px #364253, 9px 10px 0 rgba(0, 0, 0, .42);
}

.transmissao-futuro-corpo {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 82px;
    height: 91px;
    display: block;
    background: #111522;
    clip-path: polygon(34% 0, 66% 0, 76% 20%, 71% 36%, 94% 100%, 6% 100%, 29% 36%, 24% 20%);
    transform: translateX(-50%);
    opacity: .24;
}

.transmissao-futuro-relogio {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 50%;
    width: 52px;
    height: 52px;
    display: block;
    border: 7px solid #171321;
    border-radius: 50%;
    background: #302c3a;
    transform: translateX(-50%);
    opacity: .18;
}

.transmissao-futuro-relogio::before,
.transmissao-futuro-relogio::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: #0a0810;
    transform-origin: 2px 2px;
}

.transmissao-futuro-relogio::before {
    width: 4px;
    height: 17px;
    transform: translate(-2px, -2px) rotate(180deg);
}

.transmissao-futuro-relogio::after {
    width: 4px;
    height: 14px;
    transform: translate(-2px, -2px) rotate(103deg);
}

.transmissao-futuro-falha {
    position: absolute;
    z-index: 3;
    left: 0;
    width: 100%;
    height: 10px;
    display: block;
    background: #bc5cff;
    opacity: .62;
}

.transmissao-futuro-falha-1 { top: 34px; transform: translateX(-31px); }
.transmissao-futuro-falha-2 { top: 94px; background: #54e8dc; transform: translateX(42px); }

.camada-cutscene-carta[data-tipo-carta="cena-final-futuro-despedacado"][data-etapa-cena="silhueta"] :is(
    .transmissao-futuro-corpo,
    .transmissao-futuro-relogio
) {
    opacity: 1;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-futuro-despedacado"][data-etapa-cena="silhueta"] .transmissao-futuro-relogio {
    border-color: #74604a;
    background: #cabd7e;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-futuro-despedacado"][data-etapa-cena="coordenada"] .transmissao-futuro-visual {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-futuro-despedacado"][data-etapa-cena="coordenada"] .maquina-tempo-cena-final {
    width: 250px;
    min-height: 142px;
    margin: 10px auto 15px;
    padding: 15px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    background: #111c25;
    border: 8px solid #05070c;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .42), inset 0 0 0 4px #354252;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .carta-misteriosa p {
    margin: 13px 0 12px;
    font-size: .76rem;
    line-height: 1.52;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .carta-misteriosa strong {
    color: #c88aff;
    font-size: .71rem;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="transmissao-futuro-despedacado"],
    [data-tipo-carta="cena-final-futuro-despedacado"]
) .botao-continuar-cutscene-carta {
    color: #080b12;
    background: #54e8dc;
    border-color: #c9fffa;
}

.senhor-tempo-revelado {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) {
    color: #fff8e5;
    background:
        repeating-linear-gradient(0deg, rgba(103, 229, 219, .045) 0 2px, transparent 2px 9px),
        radial-gradient(circle at 50% 43%, rgba(240, 189, 98, .18), transparent 45%),
        #07090e;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .cutscene-carta-pedra {
    background: #202a3c;
    border-color: #05070c;
    box-shadow: inset 8px 6px 0 #354156, 7px 7px 0 rgba(0, 0, 0, .52);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .cutscene-carta-painel > small {
    color: #f0bd62;
    text-shadow: 0 0 12px rgba(240, 189, 98, .4);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .carta-misteriosa {
    min-height: 430px;
    padding: 26px 34px;
    color: #f7f4e9;
    background:
        repeating-linear-gradient(0deg, rgba(103, 229, 219, .04) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, rgba(143, 95, 181, .16), transparent 48%),
        #171b25;
    border-color: #f0bd62;
    outline-color: #05070c;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .58), inset 0 0 0 6px #283347;
    transform: none;
}

.cutscene-carta-em-exibicao:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .carta-misteriosa {
    animation: ligar-terminal-registro 540ms steps(5, end) both;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .carta-misteriosa::after {
    background: #f0bd62;
    box-shadow: 0 8px 0 rgba(103, 229, 219, .28);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) :is(.carta-misteriosa-selo, .radio-transmissao, .transmissao-futuro-visual, .maquina-tempo-cena-final) {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="registro-ponto-zero"] .terminal-registro,
.camada-cutscene-carta[data-tipo-carta="cena-final-ponto-zero"][data-etapa-cena="arquivo"] .terminal-registro {
    position: relative;
    z-index: 2;
    width: 240px;
    height: 132px;
    margin: 10px auto 15px;
    display: block;
    background: #30394a;
    border: 8px solid #05070c;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .42), inset 0 0 0 4px #566177;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-ponto-zero"]:is(
    [data-etapa-cena="aparicao"],
    [data-etapa-cena="protecoes"],
    [data-etapa-cena="capitulo3"]
) .senhor-tempo-revelado {
    position: relative;
    width: 150px;
    height: 188px;
    margin: 4px auto 10px;
    display: block;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 43%, rgba(103, 229, 219, .12) 43% 57%, transparent 57%),
        #0d1018;
    border: 7px solid #05070c;
    outline: 3px solid #8f5fb5;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .48), 0 0 24px rgba(103, 229, 219, .2);
}

.camada-cutscene-carta[data-tipo-carta="cena-final-ponto-zero"][data-etapa-cena="maquina"] .maquina-tempo-cena-final {
    width: 250px;
    min-height: 142px;
    margin: 10px auto 15px;
    padding: 15px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    background: #111722;
    border: 8px solid #05070c;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .46), inset 0 0 0 4px #354156;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .carta-misteriosa p {
    margin: 12px 0;
    font-size: .76rem;
    line-height: 1.5;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .carta-misteriosa strong {
    color: #67e5db;
    font-size: .7rem;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="registro-ponto-zero"],
    [data-tipo-carta="cena-final-ponto-zero"]
) .botao-continuar-cutscene-carta {
    color: #11151f;
    background: #f0bd62;
    border-color: #fff0bc;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-ponto-zero"][data-etapa-cena="capitulo3"] .carta-misteriosa {
    border-color: #67e5db;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .58), inset 0 0 0 6px #8f5fb5;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) {
    color: #f7f2cf;
    background:
        linear-gradient(90deg, rgba(239, 182, 83, .2) 0 33.33%, rgba(217, 94, 229, .16) 33.33% 66.66%, rgba(96, 227, 212, .18) 66.66%),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .06) 31px 34px),
        #0b0a12;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) .cutscene-carta-pedra {
    background: #211a2d;
    border-color: #07060c;
    box-shadow: inset 8px 6px 0 #4b3c5d, 7px 7px 0 rgba(0, 0, 0, .48);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) .carta-misteriosa {
    color: #f7f3dd;
    background:
        linear-gradient(90deg, rgba(239, 182, 83, .14) 0 33.33%, rgba(217, 94, 229, .1) 33.33% 66.66%, rgba(96, 227, 212, .13) 66.66%),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(96, 227, 212, .08) 26px 29px),
        #171424;
    border-color: #60e3d4;
    outline-color: #08070e;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .52), inset 0 0 0 6px #3d2d50;
    transform: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) :is(.radio-transmissao, .terminal-registro, .maquina-tempo-cena-final, .transmissao-futuro-visual, .senhor-tempo-revelado) {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) .carta-misteriosa-selo {
    color: #090a12;
    background: #efb653;
    border-color: #fff1b3;
    border-radius: 0;
    box-shadow: 5px 5px 0 #d95ee5;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) .carta-misteriosa strong {
    color: #60e3d4;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-13"],
    [data-tipo-carta="cena-final-fase-13"]
) .botao-continuar-cutscene-carta {
    color: #090a12;
    background: #efb653;
    border-color: #fff1b3;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) {
    color: #f7f5dc;
    background:
        linear-gradient(90deg, rgba(255, 255, 252, .18) 50%, transparent 50%) 0 0 / 88px 88px,
        linear-gradient(rgba(255, 255, 252, .14) 50%, transparent 50%) 0 0 / 88px 88px,
        radial-gradient(circle at 50% 44%, rgba(141, 224, 218, .2), transparent 42%),
        #42434b;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .cutscene-carta-pedra {
    background: #b7b7bb;
    border-color: #45464f;
    box-shadow: inset 8px 6px 0 #eeeeeb, 7px 7px 0 rgba(0, 0, 0, .36);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .cutscene-carta-painel > small {
    color: #f5f2d1;
    text-shadow: 3px 3px 0 #393a42;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa {
    min-height: 340px;
    padding: 54px 38px 30px;
    color: #30313a;
    background:
        linear-gradient(90deg, transparent 0 76%, rgba(255, 255, 255, .82) 76% 84%, transparent 84%),
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(75, 76, 85, .08) 30px 33px),
        #dededb;
    border-color: #5b5c66;
    outline-color: #25262d;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .42), inset 0 0 0 6px #f7f7f2;
    transform: none;
}

.cutscene-carta-em-exibicao:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa {
    animation: ligar-terminal-registro 540ms steps(5, end) both;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa::after {
    background: #8de0da;
    box-shadow: 0 8px 0 rgba(75, 76, 85, .24);
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa-selo {
    color: #f5f2d1;
    background: #4b4c55;
    border-color: #25262d;
    border-radius: 0;
    box-shadow: 4px 4px 0 #8de0da;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) :is(.radio-transmissao, .terminal-registro, .maquina-tempo-cena-final, .transmissao-futuro-visual, .senhor-tempo-revelado) {
    display: none;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa p {
    margin: 14px 0 20px;
    font-weight: 900;
    line-height: 1.58;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .carta-misteriosa strong {
    color: #4a4b55;
    font-size: .78rem;
}

.camada-cutscene-carta:is(
    [data-tipo-carta="introducao-fase-14"],
    [data-tipo-carta="cena-final-fase-14"]
) .botao-continuar-cutscene-carta {
    color: #272831;
    background: #8de0da;
    border-color: #e7ffff;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-14"][data-etapa-cena="interrupcao"] .carta-misteriosa {
    min-height: 480px;
    padding-top: 24px;
    border-color: #8de0da;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-14"][data-etapa-cena="interrupcao"] .carta-misteriosa-selo,
.camada-cutscene-carta[data-tipo-carta="introducao-fase-14"]:is(
    [data-etapa-cena="avisoReescrita"],
    [data-etapa-cena="inimigosCamuflados"]
) .carta-misteriosa-selo {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-fase-14"][data-etapa-cena="interrupcao"] .senhor-tempo-revelado,
.camada-cutscene-carta[data-tipo-carta="introducao-fase-14"]:is(
    [data-etapa-cena="avisoReescrita"],
    [data-etapa-cena="inimigosCamuflados"]
) .senhor-tempo-revelado {
    position: relative;
    width: 150px;
    height: 188px;
    margin: 4px auto 10px;
    display: block;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 43%, rgba(141, 224, 218, .14) 43% 57%, transparent 57%),
        #292a32;
    border: 7px solid #25262d;
    outline: 3px solid #8de0da;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .38);
}

@keyframes ligar-terminal-registro {
    0% { opacity: 0; transform: scale(.86) translateY(24px); filter: brightness(.35); }
    62% { opacity: 1; transform: scale(1.02) translateY(-3px); filter: brightness(1.15); }
    100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

@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); }

#exploracao-limbo:not([hidden]) { display: flex; }
#exploracao-limbo { position: fixed; inset: 0; z-index: 15000; overflow: auto; padding: 16px; background: #100d19; align-items: flex-start; justify-content: center; }
.limbo-exploracao-painel { width: min(820px, 100%); margin: auto; color: #eee3cc; font-family: monospace; }
.limbo-exploracao-painel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.limbo-exploracao-painel h2 { font-size: 1.1rem; }
#canvas-exploracao-limbo { display: block; width: 100%; height: auto; margin: 12px 0; border: 3px solid #a58d50; background: #14101d; image-rendering: pixelated; box-shadow: none; touch-action: none; }
#limbo-aviso { min-height: 2.6em; line-height: 1.4; color: #e9d58a; }
#limbo-dialogo { border: 3px solid #a58d50; padding: 16px; background: #251d34; }
#limbo-dialogo p { font-size: 1rem; line-height: 1.6; }
#limbo-retrato-ampliado { image-rendering: pixelated; max-width: 100%; background: #251d34; border: 0; box-shadow: none; }
#limbo-retrato-ampliado[hidden] { display: none; }
#limbo-controles-exploracao, #limbo-controles-arena:not([hidden]), #limbo-defesas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#limbo-controles-exploracao[hidden] { display: none; }
.limbo-direcional { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; }
.limbo-direcional button { min-height: 44px; padding: 4px; touch-action: none; }
.limbo-direcional button:first-child { grid-column: 2; }
.limbo-direcional button:nth-child(2) { grid-column: 1; }
#limbo-controles-arena .botao, #limbo-interagir { min-height: 44px; }
#limbo-defesas [aria-pressed="true"] { outline: 3px solid #f6d788; }
.limbo-amanhecer #canvas-exploracao-limbo { animation: amanhecer-no-limbo 1600ms steps(8, end); }
@keyframes amanhecer-no-limbo { from { filter: brightness(0); } to { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .limbo-amanhecer #canvas-exploracao-limbo { animation: none; } }
@media (max-width: 600px) { #exploracao-limbo { padding: 8px; } .limbo-exploracao-painel header { flex-wrap: wrap; } #limbo-dialogo { padding: 10px; } }

.cenario-entidade-limbo { display: none; }

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .cutscene-carta-cenario {
    background: #100e1b;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .cutscene-carta-pedra { display: none; }

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .cutscene-carta-painel > small {
    animation: none;
    opacity: 1;
    color: #eed28c;
}

.cenario-entidade-limbo canvas {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    max-width: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .carta-misteriosa {
    padding: 18px 24px 24px;
    background: #21192d;
    color: #f6edd8;
    border-color: #b69954;
    box-shadow: 8px 8px 0 #09070f;
    transform: none;
    animation: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .carta-misteriosa::after,
.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .carta-misteriosa-selo {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .carta-misteriosa strong {
    color: #eed28c;
}

.camada-cutscene-carta[data-tipo-carta="cena-final-intervalo-perdido"] .cenario-entidade-limbo {
    display: block;
    position: relative;
    height: 190px;
    overflow: hidden;
}

#paisagem-entidade-limbo { width: 100%; height: 190px; image-rendering: pixelated; }
#retrato-entidade-limbo {
    position: absolute;
    width: 120px;
    height: 160px;
    bottom: 0;
    left: calc(50% - 60px);
    image-rendering: pixelated;
    transform-origin: bottom center;
}

[data-etapa-cena="aproximacao"] #retrato-entidade-limbo {
    animation: aproximar-entidade-limbo 2200ms steps(10, end) both;
}

[data-etapa-cena="castelo"] #retrato-entidade-limbo { left: 5%; transform: scale(.5); }

#escolhas-entidade-limbo:not([hidden]) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#escolhas-entidade-limbo .botao { flex: 1 1 190px; min-height: 48px; }

@keyframes aproximar-entidade-limbo {
    from { transform: translateY(-55px) scale(.22); opacity: .35; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    [data-etapa-cena="aproximacao"] #retrato-entidade-limbo { animation: none; }
}

.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;
}

.camada-cutscene-carta:is([data-tipo-carta="entrada-arquivo-proibido"], [data-tipo-carta="final-arquivo-proibido"]) .carta-misteriosa {
    transform: none;
    animation: none;
    opacity: 1;
    background: #eee2bc;
    border-color: #72938d;
}

.camada-cutscene-carta[data-tipo-carta="final-arquivo-proibido"][data-etapa-cena="1"] .carta-misteriosa {
    background: #211a31;
    color: #f5efd5;
    border-color: #66e0d0;
}

.camada-cutscene-carta:is([data-tipo-carta="entrada-arquivo-proibido"], [data-tipo-carta="final-arquivo-proibido"]) .cutscene-carta-painel > small {
    animation: none;
    opacity: 1;
    color: #f5e6b8;
}

.camada-cutscene-carta[data-tipo-carta="final-arquivo-proibido"][data-etapa-cena="1"] .carta-misteriosa strong {
    color: #8aeee1;
}

.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;
}

.camada-cutscene-capitulo[data-capitulo="3"] .cutscene-capitulo-painel {
    background:
        linear-gradient(135deg, rgba(96, 227, 212, .11), transparent 35%),
        #171225;
    border-color: #60e3d4;
    box-shadow: 14px 14px 0 rgba(0, 0, 0, .76), inset 0 0 0 7px #4a285e;
}

.camada-cutscene-capitulo[data-capitulo="3"] .cutscene-capitulo-selo {
    color: #171225;
    background: #efb653;
    border-color: #fff0aa;
    box-shadow: 8px 8px 0 #05050b, inset 0 0 0 7px #9d6634;
}

.camada-cutscene-capitulo[data-capitulo="3"] .cutscene-capitulo-painel h2 {
    text-shadow: 6px 0 #60e3d4, -6px 0 #a655be, 6px 6px 0 #030306;
}

.camada-cutscene-capitulo[data-capitulo="3"] .botao-continuar-cutscene {
    color: #151020;
    background: #60e3d4;
    border-color: #c9fff8;
    box-shadow: 5px 5px 0 #05050b;
}

.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;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="registro"],
        [data-tipo-carta="cena-final-laboratorio"]
    ) .carta-misteriosa {
        min-height: 0;
        padding: 16px 14px;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="registro"],
        [data-tipo-carta="cena-final-laboratorio"]
    ) .terminal-registro,
    .camada-cutscene-carta[data-tipo-carta="cena-final-laboratorio"] .maquina-tempo-cena-final {
        margin-top: 9px;
        margin-bottom: -2px;
        transform: scale(.76);
        transform-origin: top center;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="registro"],
        [data-tipo-carta="cena-final-laboratorio"]
    ) .carta-misteriosa p {
        margin: -16px 0 9px;
        font-size: .64rem;
        line-height: 1.42;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="registro"],
        [data-tipo-carta="cena-final-laboratorio"]
    ) .carta-misteriosa strong {
        font-size: .6rem;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="transmissao-futuro-despedacado"],
        [data-tipo-carta="cena-final-futuro-despedacado"]
    ) .carta-misteriosa {
        min-height: 0;
        padding: 16px 14px;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="transmissao-futuro-despedacado"],
        [data-tipo-carta="cena-final-futuro-despedacado"]
    ) .transmissao-futuro-visual,
    .camada-cutscene-carta[data-tipo-carta="cena-final-futuro-despedacado"][data-etapa-cena="coordenada"] .maquina-tempo-cena-final {
        margin-top: 9px;
        margin-bottom: -2px;
        transform: scale(.76);
        transform-origin: top center;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="transmissao-futuro-despedacado"],
        [data-tipo-carta="cena-final-futuro-despedacado"]
    ) .carta-misteriosa p {
        margin: -16px 0 9px;
        font-size: .64rem;
        line-height: 1.42;
    }
    .camada-cutscene-carta:is(
        [data-tipo-carta="transmissao-futuro-despedacado"],
        [data-tipo-carta="cena-final-futuro-despedacado"]
    ) .carta-misteriosa strong {
        font-size: .6rem;
    }
    .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,
    .cutscene-carta-em-exibicao[data-tipo-carta="registro"] .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-oferta-semanal {
    margin-bottom: 16px;
    padding: 14px 16px 16px;
    color: #fff8db;
    background:
        linear-gradient(135deg, rgba(255, 230, 111, .12), transparent 48%),
        #352f1d;
    border: 4px solid #e4b94f;
    box-shadow: 5px 5px 0 #17150d, inset 0 0 0 3px #6d5425;
}

.loja-oferta-semanal > header {
    margin-bottom: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.loja-oferta-semanal > header small,
.loja-oferta-semanal > header strong {
    display: block;
}

.loja-oferta-semanal > header small {
    color: #ffe66f;
    font-size: .58rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.loja-oferta-semanal > header strong {
    margin-top: 4px;
    font-size: .72rem;
}

.loja-oferta-semanal > header p {
    margin: 0;
    color: #e7d8a3;
    font-size: .58rem;
    font-weight: 800;
    text-align: right;
}

.loja-abas {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(4, 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-em-oferta {
    border-color: #f0b64f;
    box-shadow: 5px 5px 0 #13281a, inset 0 0 0 3px #72512a;
}

.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;
}

.melhoria-mira-calibrada {
    color: #fff3ba;
    background: repeating-linear-gradient(45deg, #6b3b31 0 12px, #925044 12px 24px);
    border-color: #ffb06d;
}

.melhoria-sensores-longo-alcance {
    color: #d9fbff;
    background: repeating-linear-gradient(135deg, #284e66 0 12px, #34728a 12px 24px);
    border-color: #74e8f5;
}

.melhoria-contrato-recuperacao {
    color: #e5ffd3;
    background: repeating-linear-gradient(45deg, #365e3c 0 12px, #4c8050 12px 24px);
    border-color: #9ee27b;
}

.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;
}

.loja-precos {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.loja-selo-desconto {
    padding: 5px 6px;
    display: grid;
    place-items: center;
    color: #341b11;
    background: #ff9854;
    border: 3px solid #ffd19a;
    box-shadow: 3px 3px 0 #5b2d1e;
    font-size: .62rem;
    font-weight: 1000;
}

.loja-preco-em-oferta {
    padding-block: 3px;
    display: grid;
    gap: 1px;
    text-align: center;
}

.loja-preco-em-oferta del {
    color: #776d42;
    font-size: .48rem;
    line-height: 1;
}

.loja-preco-em-oferta strong {
    font-size: .72rem;
    line-height: 1;
}

.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;
}
.abas-conquistas { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.abas-conquistas .botao { flex: 1 1 220px; min-height: 48px; }
.abas-conquistas .botao[aria-pressed="true"] { background: #e4bf62; color: #162315; }
.abas-conquistas span { white-space: nowrap; margin-left: 8px; }

.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;
    will-change: filter, opacity;
    transition: filter var(--tempo-transicao-ui-media) var(--easing-ui), opacity var(--tempo-transicao-ui-media) var(--easing-ui);
}

.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;
}

.imagem-conquista {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.conquista-icone,
.notificacao-progresso-icone {
    flex-shrink: 0;
    overflow: hidden;
}

.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-tema-laboratorio {
    background: #4b453e;
    border-color: #c69a51;
}

.fase-tema-laboratorio.fase-cartao-bloqueado {
    background: #45423e;
    border-color: #716c65;
}

.fase-tema-laboratorio .fase-numero {
    color: #211d1a;
    background: #c69a51;
    border-color: #f0c776;
}

.fase-tema-laboratorio .fase-estado {
    color: #dffaf3;
    background: #2d4841;
    border-color: #69e2cf;
}

.fase-tema-laboratorio.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #211f1d, inset 0 0 0 3px #69e2cf;
}

.fase-tema-futuroDespedacado {
    background: #1b2330;
    border-color: #654478;
}

.fase-tema-futuroDespedacado.fase-cartao-bloqueado {
    background: #252a32;
    border-color: #5e6370;
}

.fase-tema-futuroDespedacado .fase-numero {
    color: #080b12;
    background: #54e8dc;
    border-color: #c9fffa;
}

.fase-tema-futuroDespedacado .fase-estado {
    color: #f7eaff;
    background: #2b1d39;
    border-color: #bc5cff;
}

.fase-tema-futuroDespedacado.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #070911, inset 0 0 0 3px #54e8dc;
}

.fase-tema-pontoZero {
    background: #202a3c;
    border-color: #f0bd62;
}

.fase-tema-pontoZero.fase-cartao-bloqueado {
    background: #282c35;
    border-color: #62656d;
}

.fase-tema-pontoZero .fase-numero {
    color: #10141d;
    background: #f0bd62;
    border-color: #fff0bc;
}

.fase-tema-pontoZero .fase-estado {
    color: #e8fffd;
    background: #243f43;
    border-color: #67e5db;
}

.fase-tema-pontoZero.fase-cartao-selecionado {
    border-color: #fff36a;
    box-shadow: 5px 5px 0 #05070c, inset 0 0 0 3px #8f5fb5;
}

.fase-tema-linhaTemporal {
    background: linear-gradient(135deg, #25203a, #172f37);
    border-color: #60e3d4;
}

.fase-tema-linhaTemporal.fase-cartao-bloqueado {
    background: #292834;
    border-color: #666573;
}

.fase-tema-linhaTemporal .fase-numero {
    color: #12101a;
    background: #efb653;
    border-color: #fff0aa;
}

.fase-tema-linhaTemporal .fase-estado {
    color: #e9fffc;
    background: #244148;
    border-color: #60e3d4;
}

.fase-tema-linhaTemporal.fase-cartao-selecionado {
    border-color: #fff06c;
    box-shadow: 5px 5px 0 #05050b, inset 0 0 0 3px #a655be;
}

.fase-tema-eraApagada {
    color: #30313a;
    background: linear-gradient(135deg, #efefec, #a8a8af);
    border-color: #f5f2d1;
}

.fase-tema-eraApagada.fase-cartao-bloqueado {
    color: #d8d8dc;
    background: #555660;
    border-color: #7d7e87;
}

.fase-tema-eraApagada .fase-numero {
    color: #34353d;
    background: #f5f2d1;
    border-color: #ffffff;
}

.fase-tema-eraApagada .fase-estado {
    color: #f4ffff;
    background: #515660;
    border-color: #8de0da;
}

.fase-tema-eraApagada.fase-cartao-selecionado {
    border-color: #fff06c;
    box-shadow: 5px 5px 0 #3e3f47, inset 0 0 0 3px #8de0da;
}

.fase-cartao.fase-tema-eraApagada h3 { color: #292a31; }
.fase-cartao.fase-tema-eraApagada p { color: #393a43; }

.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; }

button.album-cartao {
    width: 100%;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

button.album-cartao:focus-visible {
    border-color: #fff36a;
    outline: 4px solid #fff36a;
    outline-offset: 3px;
}

.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;
}

.album-detalhes-camada {
    position: fixed;
    z-index: 80;
    inset: 0;
    padding: 18px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(4, 15, 10, .76);
    backdrop-filter: blur(3px);
}

body.album-detalhes-abertos .regiao-notificacoes-progresso {
    opacity: 0;
}

.album-detalhes-painel {
    width: min(410px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    padding: 20px;
    overflow-y: auto;
    color: #362b1e;
    background-color: #f6e9bd;
    background-image:
        linear-gradient(rgba(120, 91, 47, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 91, 47, .08) 1px, transparent 1px);
    background-size: 18px 18px;
    border: 5px solid #fff7d7;
    outline: 4px solid #b68b48;
    outline-offset: -10px;
    box-shadow: -10px 10px 0 rgba(7, 18, 11, .5);
    animation: album-detalhes-entrar 180ms ease-out both;
}

@keyframes album-detalhes-entrar {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

.album-detalhes-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 3px dashed #b68b48;
}

.album-detalhes-cabecalho small,
.album-detalhes-cabecalho span {
    display: block;
    color: #79542f;
    font-weight: 900;
    text-transform: uppercase;
}

.album-detalhes-cabecalho small {
    font-size: .62rem;
}

.album-detalhes-cabecalho span {
    margin-top: 5px;
    font-size: .52rem;
}

.album-detalhes-fechar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff8dd;
    background: #7c3f2d;
    border: 3px solid #3d271d;
    box-shadow: 3px 3px 0 #3d271d;
    font: 900 1.2rem/1 monospace;
    cursor: pointer;
}

.album-detalhes-fechar:hover,
.album-detalhes-fechar:focus-visible {
    color: #312417;
    background: #fff36a;
    outline: none;
}

.album-detalhes-retrato {
    padding: 18px 0 14px;
    text-align: center;
}

.menu-principal .conteudo-menu[data-tela="album"] .album-detalhes-miniatura {
    width: 172px;
    height: 172px;
    margin-inline: auto;
    background-color: #dbe4bd;
    border: 5px solid #fffdf1;
    outline: 4px solid #9b7744;
    box-shadow: 6px 6px 0 rgba(84, 63, 34, .35);
}

.album-detalhes-retrato h2 {
    margin: 18px 0 0;
    color: #362b1e;
    font-size: 1rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.album-detalhes-atributos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.album-detalhes-atributo {
    min-height: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 252, 227, .72);
    border: 2px solid #c4a46a;
    box-shadow: 2px 2px 0 rgba(91, 65, 35, .2);
}

.album-detalhes-atributo span {
    color: #856038;
    font-size: .5rem;
    font-weight: 900;
    line-height: 1.35;
    text-transform: uppercase;
}

.album-detalhes-atributo strong {
    margin-top: 6px;
    color: #3a2b1d;
    font-size: .68rem;
    line-height: 1.45;
}

.album-detalhes-atributo-destaque {
    background: #fff3a6;
    border-color: #bd8637;
}

.album-detalhes-texto {
    margin-top: 14px;
    padding: 13px;
    background: #e4d298;
    border-left: 6px solid #805633;
}

.album-detalhes-texto h3 {
    margin: 0;
    color: #684525;
    font-size: .65rem;
    text-transform: uppercase;
}

.album-detalhes-texto p,
.album-detalhes-observacao {
    color: #4f402d;
    font-size: .62rem;
    line-height: 1.65;
}

.album-detalhes-texto p {
    margin: 8px 0 0;
}

.album-detalhes-observacao {
    margin: 12px 0 0;
    padding: 10px;
    text-align: center;
    background: rgba(255, 248, 212, .62);
    border: 2px dashed #b68b48;
}

.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; }
    .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-nivel { width: 100%; box-sizing: border-box; }
    .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-oferta-semanal > header { align-items: start; flex-direction: column; gap: 7px; }
    .loja-oferta-semanal > header p { text-align: left; }
    .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)); }
    .nivel-progresso-hero { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .nivel-progresso-selo { width: 72px; height: 72px; border-width: 4px; outline-width: 3px; }
    .nivel-progresso-selo strong { font-size: 1.7rem; }
    .nivel-progresso-dados header { align-items: start; flex-direction: column; gap: 5px; }
    .nivel-recompensas-grade { grid-template-columns: 1fr; }
    .nivel-recompensa { min-height: 0; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; }
    .nivel-recompensa-acao { grid-column: 1 / -1; }
    .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;
    }
    .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;
    }
    .album-detalhes-camada {
        padding: 8px;
        align-items: flex-end;
    }
    .album-detalhes-painel {
        width: 100%;
        max-height: calc(100vh - 16px);
        padding: 16px;
        box-shadow: 0 -7px 0 rgba(7, 18, 11, .45);
    }
    .menu-principal .conteudo-menu[data-tela="album"] .album-detalhes-miniatura {
        width: 132px;
        height: 132px;
    }
    .album-detalhes-retrato {
        padding-top: 12px;
    }
    .album-detalhes-retrato h2 {
        margin-top: 13px;
        font-size: .82rem;
    }
    .album-detalhes-atributos {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .album-detalhes-atributo {
        min-height: 58px;
    }
    .loja-abas { gap: 5px; }
    .loja-oferta-semanal { padding: 12px; }
    .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; }
}
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] {
    color: #edffff;
    background:
        repeating-linear-gradient(90deg, rgba(98, 228, 214, .045) 0 3px, transparent 3px 32px),
        repeating-linear-gradient(0deg, rgba(240, 185, 95, .035) 0 3px, transparent 3px 32px),
        radial-gradient(circle at 50% 45%, rgba(123, 77, 145, .42), transparent 43%),
        #03050a;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .cutscene-carta-pedra {
    background: #172537;
    border-color: #62e4d6;
    box-shadow: inset 8px 6px 0 #263f50, 7px 7px 0 rgba(0, 0, 0, .58);
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .cutscene-carta-painel > small {
    color: #f0b95f;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .carta-misteriosa {
    min-height: 300px;
    padding: 56px 36px 30px;
    color: #edffff;
    background:
        linear-gradient(90deg, transparent 49%, rgba(98, 228, 214, .22) 49% 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(240, 185, 95, .18) 49% 51%, transparent 51%),
        #09101b;
    border-color: #62e4d6;
    outline-color: #020306;
    box-shadow: 14px 16px 0 rgba(0, 0, 0, .62), inset 0 0 0 6px #1d2940;
    transform: none;
}

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

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .carta-misteriosa-selo,
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .radio-transmissao,
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .terminal-registro,
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .maquina-tempo-cena-final,
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .transmissao-futuro-visual,
.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .senhor-tempo-revelado {
    display: none;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .carta-misteriosa::before {
    content: "00:00";
    display: block;
    margin: 0 auto 28px;
    color: #f0b95f;
    font: 900 2.2rem/1 "Courier New", monospace;
    letter-spacing: .22em;
    text-align: center;
    text-shadow: 4px 0 #7b4d91, -4px 0 #174a52;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .carta-misteriosa p {
    font-family: "Courier New", monospace;
    font-weight: 900;
    line-height: 1.55;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .carta-misteriosa strong {
    color: #62e4d6;
}

.camada-cutscene-carta[data-tipo-carta="introducao-intervalo-perdido"] .botao-continuar-cutscene-carta {
    color: #090812;
    background: #f0b95f;
    border-color: #fff2a3;
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] {
    background:
        repeating-linear-gradient(0deg, rgba(231, 76, 255, .035) 0 2px, transparent 2px 10px),
        radial-gradient(circle at 50% 42%, rgba(122, 42, 75, .38), transparent 48%),
        rgba(2, 2, 6, .94);
    backdrop-filter: blur(4px) saturate(.55);
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] .balao-senhor-do-tempo {
    background:
        linear-gradient(90deg, rgba(189, 49, 95, .2), transparent 38%),
        repeating-linear-gradient(0deg, transparent 0 14px, rgba(240, 185, 95, .045) 14px 16px),
        #130e1b;
    border-color: #f0b95f;
    box-shadow: 9px 9px 0 rgba(0, 0, 0, .9), inset 0 0 0 7px #44243b;
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] .conversa-portal-conteudo small {
    color: #f0b95f;
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] .conversa-portal-fala {
    color: #fff8e8;
    text-shadow: 2px 2px 0 #050207;
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] .retrato-senhor-do-tempo {
    border-color: #f0b95f;
    outline-color: #8e294e;
    box-shadow: 7px 0 0 #bd315f, -7px 7px 0 #62e4d6;
}

.camada-conversa-portal[data-tipo-conversa="armadilha-intervalo"] .botao-conversa-portal {
    color: #fff8e8;
    background: #8e294e;
    border-color: #f0b95f;
    box-shadow: 4px 4px 0 #030105;
}


.botao-lobby-editor {
    background: #245d52;
    border-color: #68e0c1;
    box-shadow: 6px 6px 0 #12362f;
}

.botao-lobby-editor:hover {
    box-shadow: 3px 3px 0 #12362f;
}

.botao-lobby-editor:disabled,
.botao-lobby-editor:disabled:hover {
    opacity: .62;
    filter: grayscale(.72);
    cursor: var(--cursor-pixel-normal);
    transform: none;
    box-shadow: 6px 6px 0 #12362f;
}

.botao-lobby-editor-bloqueado small {
    color: #fff36a;
}

.botao-lobby-treinamento {
    background: #59356d;
    border-color: #df8cff;
    box-shadow: 6px 6px 0 #301b3d;
}

.botao-lobby-treinamento:hover {
    box-shadow: 3px 3px 0 #301b3d;
}

.salvos-aviso {
    margin: 12px 0 24px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #eaf8ff;
    border: 4px solid #91c8ee;
    background: linear-gradient(135deg, #1b2c41, #2b3654);
    box-shadow: 7px 7px 0 rgba(4, 10, 19, .68);
}

.salvos-aviso > span {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff36a;
    border: 4px solid #0c1724;
    background: #466b8d;
    box-shadow: inset 0 0 0 4px #8dc8ea, 5px 5px 0 #09121d;
    font-size: 1.8rem;
}

.salvos-aviso strong {
    display: block;
    margin-bottom: 6px;
    color: #fff36a;
    font-size: .7rem;
    letter-spacing: .1em;
}

.salvos-aviso p {
    max-width: 900px;
    margin: 0;
    font-size: .7rem;
    line-height: 1.6;
}

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

.salvo-cartao {
    min-height: 390px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: #edf8ff;
    border: 5px solid #67839d;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 3px, transparent 3px 9px),
        #1a2b3d;
    box-shadow: inset 0 0 0 4px #2b435a, 8px 8px 0 rgba(3, 8, 15, .72);
}

.salvo-cartao > header {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 4px solid rgba(145, 200, 238, .24);
}

.salvo-numero {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #102033;
    border: 4px solid #c9edff;
    background: #91c8ee;
    box-shadow: 4px 4px 0 #08111c;
    font-size: 1.4rem;
    font-weight: 900;
}

.salvo-cartao > header small,
.salvo-cartao > header strong {
    display: block;
    text-transform: uppercase;
}

.salvo-cartao > header small {
    margin-bottom: 5px;
    color: #acc5d6;
    font-size: .58rem;
}

.salvo-cartao > header strong {
    color: #fff36a;
    font-size: .86rem;
    letter-spacing: .08em;
}

.salvo-cartao-ativo {
    border-color: #79e4b6;
    box-shadow: inset 0 0 0 4px #285849, 8px 8px 0 rgba(3, 8, 15, .72);
}

.salvo-cartao-ativo .salvo-numero {
    color: #0d2c22;
    border-color: #c9ffe9;
    background: #79e4b6;
}

.salvo-cartao-vazio {
    border-style: dashed;
    background: #172534;
}

.salvo-origem {
    margin: 18px 0 12px;
    color: #bcd2df;
    font-size: .63rem;
    font-weight: 900;
    text-transform: uppercase;
}

.salvo-resumo {
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 9px;
    list-style: none;
}

.salvo-resumo li {
    min-height: 45px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 3px solid #39556b;
    background: rgba(5, 14, 24, .48);
}

.salvo-resumo li > span {
    width: 25px;
    color: #fff36a;
    font-size: 1rem;
    text-align: center;
}

.salvo-resumo strong {
    font-size: .66rem;
    line-height: 1.35;
}

.salvo-vazio-conteudo {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.salvo-vazio-conteudo > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    color: #91c8ee;
    border: 4px dashed #557590;
    font-size: 2rem;
}

.salvo-vazio-conteudo p {
    max-width: 220px;
    margin: 0;
    color: #9fb8c9;
    font-size: .68rem;
    line-height: 1.6;
}

.salvo-acao {
    width: 100%;
    margin-top: auto;
}

.salvo-acao:disabled {
    color: #17352b;
    border-color: #b4f4d8;
    background: #79e4b6;
    cursor: var(--cursor-pixel-normal);
    opacity: 1;
}

@media (max-width: 900px) {
    .salvos-grade {
        grid-template-columns: 1fr;
    }

    .salvo-cartao {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .salvos-aviso {
        padding: 14px;
        align-items: flex-start;
    }

    .salvos-aviso > span {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .salvo-cartao {
        padding: 15px;
    }
}

.treinamento-apresentacao {
    margin: 12px 0 22px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #e9f8ff;
    border: 4px solid #72d7ff;
    background: linear-gradient(135deg, #172e49, #29204c);
    box-shadow: 7px 7px 0 rgba(3, 7, 18, .72);
}

.treinamento-apresentacao small,
.treinamento-desafio-topo > div > small,
.treinamento-resultado > small {
    display: block;
    margin-bottom: 7px;
    color: #fff36a;
    font-size: .64rem;
    font-style: normal;
    letter-spacing: .12em;
}

.treinamento-apresentacao p {
    max-width: 760px;
    margin: 0;
    font-size: .74rem;
    line-height: 1.65;
}

.treinamento-oficina-visual {
    position: relative;
    width: 82px;
    height: 68px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff36a;
    border: 5px solid #0a1325;
    background: #40657f;
    box-shadow: inset 0 0 0 5px #78dcff, 5px 5px 0 #091020;
}

.treinamento-oficina-visual::before,
.treinamento-oficina-visual::after,
.treinamento-oficina-visual i {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ff9d4c;
    box-shadow: 16px 0 0 #d65cff;
}

.treinamento-oficina-visual::before { left: 9px; top: 9px; }
.treinamento-oficina-visual::after { right: 25px; bottom: 9px; }
.treinamento-oficina-visual i:first-of-type { right: 9px; top: 9px; }
.treinamento-oficina-visual i:last-of-type { left: 9px; bottom: 9px; }
.treinamento-oficina-visual span { z-index: 1; font-size: .8rem; }

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

.treinamento-cartao {
    --cor-treino: #65dcff;
    --sombra-treino: #102d3e;
    position: relative;
    min-height: 270px;
    padding: 16px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 15px;
    border: 4px solid var(--cor-treino);
    background: #17283a;
    box-shadow: 7px 7px 0 var(--sombra-treino);
}

.treinamento-cartao[data-tipo="reflexo"] {
    --cor-treino: #7dff91;
    --sombra-treino: #153722;
    background: #183326;
}

.treinamento-cartao[data-tipo="alvo"],
.treinamento-cartao[data-tipo="voo"] {
    --cor-treino: #72d7ff;
    --sombra-treino: #102d3e;
}

.treinamento-cartao[data-tipo="labirinto"],
.treinamento-cartao[data-tipo="coleta"] {
    --cor-treino: #75ec96;
    --sombra-treino: #153722;
    background: #183326;
}

.treinamento-cartao[data-tipo="sequencia"] {
    --cor-treino: #fff36a;
    --sombra-treino: #493b0b;
    background: #39331c;
}

.treinamento-cartao[data-tipo="pulso"] {
    --cor-treino: #e38cff;
    --sombra-treino: #381742;
    background: #30203c;
}

.treinamento-cartao[data-concluido="true"]::after {
    content: "★";
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 5px 7px;
    color: #30250a;
    border: 3px solid #412f09;
    background: #fff36a;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
}

.treinamento-cartao-maquina {
    position: relative;
    width: 84px;
    height: 132px;
    align-self: center;
    display: grid;
    place-items: center;
    color: #fff;
    border: 5px solid #080b15;
    background: color-mix(in srgb, var(--cor-treino) 38%, #162038);
    box-shadow: inset 0 0 0 5px #26334b, 5px 5px 0 #080b15;
}

.treinamento-cartao-maquina::before {
    content: "";
    position: absolute;
    inset: 13px 12px 52px;
    border: 4px solid #070b12;
    background: #101625;
    box-shadow: inset 0 0 0 4px var(--cor-treino);
}

.treinamento-cartao-maquina span {
    z-index: 1;
    margin-top: -36px;
    color: var(--cor-treino);
    font-size: 1.5rem;
    text-shadow: 2px 2px 0 #000;
}

.treinamento-cartao-maquina i {
    position: absolute;
    bottom: 19px;
    width: 10px;
    height: 10px;
    background: #fff36a;
    box-shadow: 2px 2px 0 #080b15;
}

.treinamento-cartao-maquina i:first-of-type { left: 13px; }
.treinamento-cartao-maquina i:nth-of-type(2) { left: 35px; background: #ff785e; }
.treinamento-cartao-maquina i:last-of-type { right: 13px; background: #74ff9c; }

.treinamento-cartao-conteudo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.treinamento-cartao-conteudo small {
    color: var(--cor-treino);
    font-size: .58rem;
    letter-spacing: .1em;
}

.treinamento-cartao h3 {
    margin: 7px 0 10px;
    color: #fff;
    font-size: .94rem;
    line-height: 1.35;
}

.treinamento-cartao p {
    margin: 0 0 12px;
    color: #cad8e1;
    font-size: .67rem;
    line-height: 1.55;
}

.treinamento-cartao-conteudo > strong {
    margin: auto 0 13px;
    color: #fff36a;
    font-size: .62rem;
    line-height: 1.4;
}

.treinamento-cartao .botao { width: 100%; }

.treinamento-desafio {
    max-width: 940px;
    margin: 12px auto 0;
    padding: 18px;
    color: #eaf7ff;
    border: 5px solid #38526d;
    background: #101827;
    box-shadow: 9px 9px 0 rgba(2, 6, 14, .75);
}

.treinamento-desafio-topo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

.treinamento-desafio[data-origem="fliperama"] {
    margin-top: 0;
    box-shadow: none;
}

.treinamento-desafio[data-origem="fliperama"] .treinamento-desafio-topo {
    grid-template-columns: 1fr auto;
}

.treinamento-desafio-topo h3 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

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

.treinamento-status span {
    min-width: 92px;
    padding: 8px 10px;
    display: grid;
    gap: 5px;
    text-align: center;
    border: 3px solid #5c7590;
    background: #17253a;
}

.treinamento-status small { color: #9db3c7; font-size: .54rem; }
.treinamento-status strong { color: #fff36a; font-size: .8rem; }

.treinamento-instrucao {
    margin: 16px 0 12px;
    color: #bfd0df;
    font-size: .68rem;
    line-height: 1.55;
    text-align: center;
}

.treinamento-arena {
    position: relative;
    min-height: 370px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    overflow: hidden;
    border: 5px solid #080d17;
    background-color: #162034;
    background-image:
        linear-gradient(rgba(94, 139, 180, .12) 2px, transparent 2px),
        linear-gradient(90deg, rgba(94, 139, 180, .12) 2px, transparent 2px);
    background-size: 32px 32px;
    box-shadow: inset 0 0 0 5px #263750;
}

.treinamento-contagem {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-content: center;
    gap: 10px;
    text-align: center;
    color: #fff36a;
    background: rgba(7, 12, 24, .86);
}

.treinamento-contagem[hidden] { display: none; }
.treinamento-contagem small { font-size: .66rem; letter-spacing: .12em; }
.treinamento-contagem strong { font-size: 4.4rem; text-shadow: 6px 6px 0 #183d58; }

.treinamento-nucleo {
    position: relative;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #e9fbff;
    border: 8px solid #070b13;
    border-radius: 50%;
    background: #1a2942;
    box-shadow: inset 0 0 0 7px #45647d, 0 0 0 7px #26364b, 8px 8px 0 #070b13;
}

.treinamento-nucleo i {
    position: absolute;
    inset: auto 0 0;
    height: 0;
    background: repeating-linear-gradient(0deg, #42eeff 0 12px, #8c67ff 12px 24px);
}

.treinamento-nucleo span { z-index: 1; font-size: 1rem; text-shadow: 3px 3px 0 #07121d; }

.treinamento-botao-acao {
    min-width: 230px;
    min-height: 76px;
    padding: 14px 24px;
    color: #fff;
    font: inherit;
    font-size: .9rem;
    border: 6px solid #0a0d15;
    background: #d94a54;
    box-shadow: inset 0 -9px 0 rgba(89, 16, 29, .5), 8px 8px 0 #080b12;
    cursor: var(--cursor-pixel-acao);
}

.treinamento-botao-acao:not(:disabled):active {
    transform: translate(5px, 5px);
    box-shadow: inset 0 -4px 0 rgba(89, 16, 29, .5), 3px 3px 0 #080b12;
}

.treinamento-botao-acao:disabled { cursor: var(--cursor-pixel-normal); opacity: .62; }

.treinamento-botao-carga { background: #d94a54; }

.treinamento-botao-reflexo {
    width: min(360px, 90%);
    height: 180px;
    background: #8f3441;
    box-shadow: inset 0 -14px 0 #5f202b, 9px 9px 0 #080b12;
}

.treinamento-botao-reflexo[data-estado="agora"] {
    color: #102014;
    background: #72f18b;
    box-shadow: inset 0 -14px 0 #36ad58, 0 0 30px rgba(114, 241, 139, .7), 9px 9px 0 #080b12;
}

.treinamento-luzes { display: flex; gap: 18px; }
.treinamento-luzes i {
    width: 26px;
    height: 26px;
    border: 5px solid #080b12;
    border-radius: 50%;
    background: #3c1e2b;
}

.treinamento-arena:has(.treinamento-botao-reflexo[data-estado="agora"]) .treinamento-luzes i {
    background: #72f18b;
    box-shadow: 0 0 18px rgba(114, 241, 139, .75);
}

.treinamento-medidor {
    position: relative;
    width: min(680px, 92%);
    height: 74px;
    border: 7px solid #080b12;
    background: repeating-linear-gradient(90deg, #22304b 0 30px, #19243a 30px 60px);
    box-shadow: inset 0 0 0 5px #3c4e69, 8px 8px 0 #080b12;
}

.treinamento-faixa-alvo {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(111, 255, 152, .68);
    box-shadow: inset 5px 0 0 #baffc6, inset -5px 0 0 #baffc6;
}

.treinamento-marcador-pulso {
    position: absolute;
    z-index: 1;
    top: -10px;
    bottom: -10px;
    width: 12px;
    transform: translateX(-50%);
    background: #fff36a;
    box-shadow: 0 0 0 4px #4f4010, 0 0 16px rgba(255, 243, 106, .75);
}

.treinamento-botao-pulso { background: #7c47b6; box-shadow: inset 0 -9px 0 #4f287e, 8px 8px 0 #080b12; }

.treinamento-feedback {
    min-height: 22px;
    margin: -8px 0 0;
    color: #fff36a;
    font-size: .72rem;
    text-shadow: 2px 2px 0 #000;
}

.treinamento-resultado {
    max-width: 660px;
    margin: 34px auto;
    padding: 34px 24px;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    color: #e7f5ff;
    border: 5px solid #718ca6;
    background: #17243a;
    box-shadow: 10px 10px 0 rgba(3, 8, 18, .74);
}

.treinamento-resultado[data-vitoria="true"] { border-color: #75ec96; }
.treinamento-resultado-emblema {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    color: #fff36a;
    border: 6px solid #121424;
    background: #554c9d;
    box-shadow: inset 0 0 0 5px #9587f1, 7px 7px 0 #080b12;
    font-size: 2.4rem;
}

.treinamento-resultado h3 { margin: 5px 0; color: #fff; font-size: 1.2rem; }
.treinamento-resultado p { max-width: 520px; margin: 0; font-size: .72rem; line-height: 1.65; }
.treinamento-resultado > strong { color: #fff36a; font-size: .78rem; }
.treinamento-resultado > div:last-child { margin-top: 10px; display: flex; justify-content: center; gap: 10px; }

@media (max-width: 900px) {
    .treinamento-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .treinamento-cartao { min-height: 210px; }
}

@media (max-width: 620px) {
    .treinamento-apresentacao { align-items: flex-start; padding: 14px; }
    .treinamento-oficina-visual { width: 62px; height: 56px; }
    .treinamento-cartao { grid-template-columns: 70px minmax(0, 1fr); padding: 12px; }
    .treinamento-grade { grid-template-columns: 1fr; }
    .treinamento-cartao-maquina { width: 62px; height: 112px; }
    .treinamento-desafio { padding: 11px; }
    .treinamento-desafio-topo { grid-template-columns: 1fr; align-items: stretch; }
    .treinamento-desafio-topo > .botao { justify-self: start; }
    .treinamento-status { width: 100%; }
    .treinamento-status span { min-width: 0; flex: 1; }
    .treinamento-arena { min-height: 330px; padding: 20px 10px; }
    .treinamento-botao-acao { min-width: min(230px, 86%); }
    .treinamento-resultado > div:last-child { width: 100%; flex-direction: column; }
    .painel-minigame-treinamento-fliperama { padding: 8px; border-width: 4px; outline-width: 3px; }
    .treinamento-desafio[data-origem="fliperama"] .treinamento-desafio-topo { grid-template-columns: 1fr; }
}

.editor-abas {
    margin: 14px 0 18px;
    display: flex;
    gap: 8px;
}

.editor-abas .botao {
    min-width: 150px;
}

.editor-abas .ativo {
    color: #071d18;
    background: #6fe2bd;
    border-color: #b9ffe7;
}

.editor-mensagem {
    margin: 0 0 14px;
    padding: 11px 14px;
    color: #fff8bb;
    background: #243d31;
    border: 3px solid #79bf79;
    font-size: .72rem;
    font-weight: 900;
}

.editor-barra-criacao,
.editor-importacao {
    margin-bottom: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #153c32;
    border: 4px solid #4fae8d;
    box-shadow: 6px 6px 0 rgba(4, 18, 14, .55);
}

.editor-importacao {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr) auto;
}

.editor-importacao h3,
.editor-importacao p {
    margin: 0;
}

.editor-importacao p {
    margin-top: 7px;
    color: #b9d8cb;
    font-size: .68rem;
}

.editor-importacao textarea,
.editor-compartilhamento textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
}

.editor-mapas-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.editor-vazio {
    grid-column: 1 / -1;
    min-height: 150px;
    margin: 0;
    display: grid;
    place-items: center;
    color: #b9d8cb;
    background: rgba(10, 34, 27, .6);
    border: 4px dashed #49725e;
    text-align: center;
}

.editor-mapa-cartao {
    padding: 17px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: #194535;
    border: 4px solid #67ad75;
    box-shadow: 7px 7px 0 rgba(4, 20, 13, .52);
}

.editor-mapa-cartao > header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.editor-mapa-tema,
.editor-mapa-cartao > header small {
    padding: 5px 7px;
    color: #d9ffe9;
    background: #0d2d25;
    border: 2px solid #4e9273;
    font-size: .55rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-mapa-cartao h3,
.editor-mapa-cartao p {
    margin: 0;
}

.editor-mapa-cartao h3 {
    color: #fff36a;
    font-size: 1rem;
}

.editor-mapa-cartao > strong {
    color: #7fe4c2;
    font-size: .66rem;
}

.editor-mapa-cartao > p {
    min-height: 36px;
    color: #e3eee7;
    font-size: .72rem;
    line-height: 1.5;
}

.editor-mapa-cartao > em {
    color: #b4cfc1;
    font-size: .62rem;
    font-style: normal;
    font-weight: 900;
}

.editor-mapa-acoes {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.editor-mapa-acoes .botao {
    flex: 1 1 130px;
}

.editor-botao-perigo {
    color: #ffdada;
    background: #652f39;
    border-color: #c66b71;
}

.editor-botao-confirmar {
    background: #932f3d;
    border-color: #ff8a8a;
}

.editor-compartilhamento,
.editor-avaliacao {
    margin-top: 7px;
    padding: 12px;
    display: grid;
    gap: 9px;
    background: #0d2c25;
    border: 3px solid #4c8e70;
}

.editor-compartilhamento p {
    margin: 0;
    color: #b9d8cb;
    font-size: .62rem;
}

.editor-avaliacao {
    grid-template-columns: 160px minmax(160px, 1fr) auto;
    align-items: end;
}

.editor-avaliacao label {
    display: grid;
    gap: 6px;
    color: #d9ffe9;
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-avaliacao textarea {
    min-height: 58px;
    resize: vertical;
}

.editor-voltar {
    margin: 4px 0 14px;
}

.editor-formulario-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    align-items: start;
    gap: 18px;
}

.editor-formulario {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.editor-formulario fieldset {
    min-width: 0;
    margin: 0;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: #153a30;
    border: 4px solid #4c9374;
}

.editor-formulario legend {
    padding: 0 8px;
    color: #fff36a;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-formulario label {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: #d5eee1;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-formulario label:has(textarea),
.editor-formulario fieldset.editor-waves {
    grid-column: 1 / -1;
}

.editor-formulario input,
.editor-formulario select,
.editor-formulario textarea,
.editor-importacao textarea,
.editor-avaliacao select,
.editor-avaliacao textarea,
.editor-compartilhamento textarea {
    box-sizing: border-box;
    padding: 10px;
    color: #f5fff8;
    background: #091f19;
    border: 3px solid #5eaa87;
    border-radius: 0;
    font: 800 .72rem/1.3 system-ui, sans-serif;
}

.editor-formulario textarea {
    min-height: 86px;
    resize: vertical;
}

.editor-waves-topo,
.editor-wave-cartao > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.editor-waves-lista {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}

.editor-wave-cartao {
    padding: 12px;
    display: grid;
    gap: 10px;
    background: #0f2d25;
    border: 3px solid #396e59;
}

.editor-wave-cartao h4 {
    margin: 0;
    color: #7fe4c2;
}

.editor-grupo-inimigo {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 130px auto;
    align-items: end;
    gap: 9px;
}

.editor-salvar {
    min-height: 52px;
}

.editor-previa-painel {
    position: sticky;
    top: 14px;
    padding: 14px;
    display: grid;
    gap: 10px;
    color: #d9ffe9;
    background: #102f27;
    border: 4px solid #68c49d;
    box-shadow: 7px 7px 0 rgba(4, 18, 14, .55);
}

.editor-previa-painel canvas {
    width: 100%;
    height: auto;
    display: block;
    border: 4px solid #071b16;
    image-rendering: pixelated;
}

.editor-previa-painel p {
    margin: 0;
    color: #b9d8cb;
    font-size: .64rem;
}

@media (max-width: 820px) {
    .editor-mapas-grade,
    .editor-formulario-layout {
        grid-template-columns: 1fr;
    }

    .editor-previa-painel {
        position: static;
        grid-row: 1;
    }

    .editor-importacao,
    .editor-avaliacao {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .editor-abas,
    .editor-barra-criacao,
    .editor-waves-topo,
    .editor-wave-cartao > header {
        align-items: stretch;
        flex-direction: column;
    }

    .editor-abas .botao {
        width: 100%;
    }

    .editor-formulario fieldset,
    .editor-grupo-inimigo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .botao-lobby-editor-bloqueado small {
        display: block;
        font-size: .46rem;
    }
}

/* Toque: menus roláveis e ampliação apenas do tabuleiro, sem zoom da página. */
#botao-ampliar-mapa { display: none; }
@media (max-width: 760px), (pointer: coarse) {
    button { touch-action: manipulation; }
    .tela-inicial-jogo { overflow-y: auto; align-items: start; }
    .menu-inicial-conteudo { min-height: 0; padding-block: 16px; }
    .menu-principal { overflow-y: auto; }
    .menu-cartao { max-height: none; }
    .menu-cartao > * { flex-shrink: 0; }
    .lobby-acoes-extras { margin-top: 12px; }
    .lobby-acoes { flex-wrap: wrap; min-height: 0; gap: 16px; }
    .lobby-acoes .botao-lobby { flex-shrink: 0; min-height: 48px; }
    .menu-principal .conteudo-menu.conteudo-menu-tela-cheia { min-height: 0; height: 100dvh; padding: 12px; }
    .conteudo-menu-tela-cheia .conteudo-cabecalho { position: relative; top: auto; }
    .selecao-defesas-layout { grid-template-columns: minmax(0, 1fr); }
    .selecao-defesas-equipe { position: static; grid-row: 1; padding: 10px; }
    .selecao-defesas-equipe ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .selecao-defesas-equipe li { min-height: 36px; padding: 4px; }
    .botao-confirmar-selecao-defesas { min-height: 48px; }
    .aplicacao-jogo { height: auto; min-height: 100dvh; grid-template-rows: auto auto; align-content: start; }
    .palco-com-torres { height: auto; align-items: start; }
    .palco-jogo { height: auto; }
    #botao-ampliar-mapa { display: block; min-height: 44px; width: 100%; padding: 5px; font-size: .65rem; }
    .palco-jogo.mapa-ampliado { display: block; overflow: auto; max-height: 65dvh; touch-action: pan-x pan-y; }
    .palco-jogo.mapa-ampliado > canvas { display: block; width: max(720px, 100%); min-width: 720px; max-width: none; height: auto; max-height: none; touch-action: pan-x pan-y; }
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .aplicacao-jogo { padding: 4px; gap: 5px; --espaco-reservado-controles: 64px; }
    .palco-com-torres { grid-template-columns: minmax(0, 1fr) 125px; }
    .palco-jogo { justify-items: center; }
    .palco-com-torres canvas { max-height: calc(100dvh - 68px); width: auto; max-width: 100%; }
    .seletor-torres { max-height: calc(100dvh - 68px); padding: 4px; }
    .seletor-torres-cabecalho { padding: 2px; }
    .seletor-torres-cabecalho strong, .seletor-torres-cabecalho small { display: none; }
    .seletor-torres-lista .botao-construcao { min-height: 44px; padding: 5px; font-size: .6rem; }
    .controles { padding: 4px; }
    .controles-contexto { display: none; }
    .controles-acoes { display: flex; flex-wrap: nowrap; gap: 4px; }
    .controles .botao { min-width: 0; min-height: 44px; flex: 1; padding: 4px; font-size: .58rem; }
    .menu-cartao { padding: 10px; }
    .lobby-topo { padding-top: 40px; }
    .lobby-topo h1 { font-size: 2rem; }
    .lobby-acoes { padding: 12px 0; }
}