@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap");

/*
 * Tema DDTank do site: as peças vêm do próprio jogo (SWFs do pack, exportadas com o ffdec para public/images/ddt).
 * - ui/        molduras, faixas, botões e texturas da interface (ddtcorei, roadcomponent, ddtcorescalebitmap)
 * - barra/     a barra de couro e os ícones dourados da barra do salão (toolbar)
 * - atividades/ os ícones redondos das atividades do salão (ddthallIcon)
 * - personagens/ os personagens do salão (ddthall)
 * - fundos/    os fundos dos mapas de batalha (image/map/<id>/back.jpg)
 * As molduras usam border-image, que estica como o 9-slice (scaleGridString) do jogo.
 * Classes com o prefixo "jogo-" para não colidir com o CSS antigo das páginas.
 */

:root {
    --jogo-madeira-escura: #2a1404;
    --jogo-madeira: #5b2f0d;
    --jogo-madeira-clara: #8a4f1c;
    --jogo-couro: #7a4318;
    --jogo-ouro: #ffd84d;
    --jogo-ouro-claro: #fff3b8;
    --jogo-ouro-escuro: #b8791a;
    --jogo-pergaminho: #f2cf86;
    --jogo-pergaminho-claro: #fbe7b8;
    --jogo-texto: #4a2509;
    --jogo-texto-suave: #6a3c12;
    --jogo-contorno: #3d1b03;
    --jogo-verde: #5fd13a;
    --jogo-vermelho: #d8381c;
    --jogo-ceu: #39b6ea;
    --jogo-fonte-titulo: "Lilita One", "Arial Black", system-ui, sans-serif;
    --jogo-fonte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --jogo-largura: 1180px;
    --jogo-topo-altura: 68px;
}

/* ------------------------------------------------------------------ texto do jogo */

/* o texto branco ou dourado com contorno marrom grosso dos títulos do jogo */
.jogo-contorno {
    color: var(--jogo-ouro-claro);
    text-shadow:
        0 2px 0 var(--jogo-contorno), 2px 0 0 var(--jogo-contorno), -2px 0 0 var(--jogo-contorno), 0 -2px 0 var(--jogo-contorno),
        2px 2px 0 var(--jogo-contorno), -2px 2px 0 var(--jogo-contorno), 2px -2px 0 var(--jogo-contorno), -2px -2px 0 var(--jogo-contorno),
        0 4px 0 var(--jogo-contorno), 0 6px 10px rgba(0, 0, 0, .45);
}

.jogo-contorno--fino {
    text-shadow:
        0 1px 0 var(--jogo-contorno), 1px 0 0 var(--jogo-contorno), -1px 0 0 var(--jogo-contorno), 0 -1px 0 var(--jogo-contorno),
        1px 1px 0 var(--jogo-contorno), -1px 1px 0 var(--jogo-contorno), 1px -1px 0 var(--jogo-contorno), -1px -1px 0 var(--jogo-contorno),
        0 2px 4px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------------ botões (btmc003, btmc005, btmc015, btmc013, littleGreenBtn) */

.jogo-btn {
    --jogo-btn-img: url("../images/ddt/ui/btn-vermelho.png");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 26px;
    border-style: solid;
    border-width: 12px 16px;
    border-image: var(--jogo-btn-img) 12 16 fill / 12px 16px stretch;
    background: none;
    font: 400 20px/1 var(--jogo-fonte-titulo);
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    filter: drop-shadow(0 4px 0 rgba(42, 20, 4, .55));
    transition: filter .15s ease, transform .15s ease;
    text-shadow:
        0 2px 0 rgba(60, 10, 0, .9), 2px 0 0 rgba(60, 10, 0, .9), -2px 0 0 rgba(60, 10, 0, .9), 0 -2px 0 rgba(60, 10, 0, .9),
        1px 1px 0 rgba(60, 10, 0, .9), -1px 1px 0 rgba(60, 10, 0, .9), 1px -1px 0 rgba(60, 10, 0, .9), -1px -1px 0 rgba(60, 10, 0, .9);
}

.jogo-btn > * {
    margin: -12px 0;
}

.jogo-btn:hover,
.jogo-btn:focus-visible {
    filter: drop-shadow(0 4px 0 rgba(42, 20, 4, .55)) brightness(1.12) saturate(1.1);
    transform: translateY(-1px);
    color: #fff;
}

.jogo-btn:active {
    filter: drop-shadow(0 1px 0 rgba(42, 20, 4, .55)) brightness(.92);
    transform: translateY(2px);
}

.jogo-btn:focus-visible {
    outline: 3px solid var(--jogo-ouro);
    outline-offset: 4px;
}

.jogo-btn--laranja { --jogo-btn-img: url("../images/ddt/ui/btn-laranja.png"); }
.jogo-btn--turquesa { --jogo-btn-img: url("../images/ddt/ui/btn-turquesa.png"); }
.jogo-btn--amarelo { --jogo-btn-img: url("../images/ddt/ui/btn-amarelo.png"); color: #fff; }
.jogo-btn--verde { --jogo-btn-img: url("../images/ddt/ui/btn-verde.png"); border-width: 8px 12px; border-image-slice: 8 12 fill; border-image-width: 8px 12px; }

.jogo-btn--grande {
    min-height: 64px;
    padding: 0 38px;
    font-size: 25px;
}

.jogo-btn--pequeno {
    min-height: 40px;
    padding: 0 14px;
    font-size: 16px;
    border-width: 10px 12px;
    border-image-width: 10px 12px;
}

.jogo-btn[disabled],
.jogo-btn--apagado {
    filter: grayscale(1) brightness(.85);
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------------------------------------------ janela de pergaminho (asset.core.frameBigBg) */

.jogo-janela {
    position: relative;
    border-style: solid;
    border-width: 44px 20px 22px;
    border-image: url("../images/ddt/ui/moldura-pergaminho.png") 44 22 24 fill / 44px 20px 22px stretch;
    color: var(--jogo-texto);
    padding: 22px 18px 14px;
    filter: drop-shadow(0 10px 18px rgba(20, 8, 0, .45));
}

/* o título fica na faixa de madeira de cima da moldura */
.jogo-janela > .jogo-janela__titulo {
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font: 400 21px/1 var(--jogo-fonte-titulo);
    letter-spacing: .02em;
    color: var(--jogo-ouro-claro);
}

.jogo-janela > .jogo-janela__titulo img {
    height: 30px;
    width: auto;
}

/* papel claro dentro da janela (asset.roadcomponent.normalFrameBg) */
.jogo-cartao {
    border-style: solid;
    border-width: 10px;
    border-image: url("../images/ddt/ui/painel-claro.png") 14 fill / 10px stretch;
    padding: 10px 12px;
    color: var(--jogo-texto);
}

/* moldura escura de couro (barra do salão) para faixas de destaque */
.jogo-couro {
    border-style: solid;
    border-width: 14px 22px;
    border-image: url("../images/ddt/barra/fundo.png") 18 40 fill / 14px 22px stretch;
    color: #fff3cf;
}

/* ------------------------------------------------------------------ faixa de título (asset.ddtcore.title2Bg) */

/* A faixa (374 × 58) tem a parte reta só de y 21 a 55: em cima ficam só as pontas dos rolos, e os rolos ocupam
   x 0–46 e 326–374. O 9-slice corta nessas linhas (21 em cima, 2 embaixo, 46/48 dos lados), então a caixa do
   texto é exatamente a parte reta e o texto centraliza nela, em qualquer altura. Escala 1,2 no computador. */
.jogo-faixa {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 0 12px 2px;
    border-style: solid;
    border-width: 25px 57px 3px 55px;
    border-image: url("../images/ddt/ui/faixa-titulo.png") 21 48 2 46 fill / 25px 57px 3px 55px stretch;
    font: 400 clamp(21px, 2.6vw, 29px)/1.05 var(--jogo-fonte-titulo);
    white-space: nowrap;
    color: var(--jogo-texto);
    text-shadow: 0 1px 0 rgba(255, 245, 210, .8);
    margin: 0;
    max-width: 100%;
    text-align: center;
}

.jogo-secao-titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    text-align: center;
}

.jogo-secao-titulo p {
    margin: 0;
    max-width: 640px;
    font: 700 17px/1.45 var(--jogo-fonte);
    color: #fff;
}

/* ------------------------------------------------------------------ cabeçalho (barra de couro do salão) */

.jogo-topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 8px 12px 0;
    pointer-events: none;
}

.jogo-topo__barra {
    pointer-events: auto;
    max-width: var(--jogo-largura);
    margin: 0 auto;
    height: var(--jogo-topo-altura);
    display: flex;
    align-items: center;
    gap: 12px;
    border-style: solid;
    border-width: 12px 20px;
    border-image: url("../images/ddt/barra/fundo.png") 16 36 fill / 12px 20px stretch;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}

.jogo-topo__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: -14px 0;
}

.jogo-topo__logo img {
    height: 58px;
    width: auto;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}

.jogo-topo__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jogo-topo__menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 8px;
    font: 800 14px/1 var(--jogo-fonte);
    color: #ffe9b0;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.jogo-topo__menu a img {
    height: 28px;
    width: auto;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    transition: transform .15s ease;
}

.jogo-topo__menu a:hover,
.jogo-topo__menu a.ativo {
    background: rgba(255, 216, 77, .14);
    color: var(--jogo-ouro);
}

.jogo-topo__menu a:hover img {
    transform: scale(1.12) rotate(-4deg);
}

.jogo-selo-novo {
    padding: 2px 5px 3px;
    border-radius: 6px;
    background: linear-gradient(#ff5b3a, #c11d06);
    border: 1px solid #ffd84d;
    font: 400 10px/1 var(--jogo-fonte-titulo);
    color: #fff;
    text-transform: uppercase;
}

.jogo-topo__conta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.jogo-topo__conta .jogo-btn {
    margin: -14px 0;
}

.jogo-topo__abrir {
    display: none;
}

/* no computador o painel some e o menu e a conta ficam direto na barra; no celular ele vira a janela que desce */
.jogo-topo__painel {
    display: contents;
}

/* menu da conta */
.jogo-conta {
    position: relative;
}

.jogo-conta__botao {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 230px;
    padding: 6px 12px;
    border: 2px solid #b8791a;
    border-radius: 10px;
    background: linear-gradient(#6d3a12, #3d1d06);
    color: var(--jogo-ouro-claro);
    font: 800 14px/1 var(--jogo-fonte);
    cursor: pointer;
}

.jogo-conta__botao span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogo-conta__botao img {
    height: 22px;
    width: auto;
}

.jogo-conta__lista {
    position: absolute;
    top: calc(100% + 16px);
    right: -8px;
    width: 250px;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.jogo-conta__lista.aberta {
    display: flex;
}

.jogo-conta__creditos {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px dashed rgba(122, 74, 29, .5);
    font: 800 14px/1.2 var(--jogo-fonte);
    color: var(--jogo-texto);
}

.jogo-conta__creditos strong {
    font: 400 20px/1 var(--jogo-fonte-titulo);
    color: #b03a06;
}

.jogo-conta__item,
.jogo-conta__lista form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: 800 14px/1.2 var(--jogo-fonte);
    color: var(--jogo-texto);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.jogo-conta__item img,
.jogo-conta__lista form button img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.jogo-conta__item:hover,
.jogo-conta__lista form button:hover {
    background: rgba(184, 121, 26, .22);
}

.jogo-conta__lista form button {
    color: #9b2306;
}

/* ------------------------------------------------------------------ janela de login (BaseFrame do jogo) */

.jogo-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(18, 8, 0, .62);
    backdrop-filter: blur(3px);
}

.jogo-modal.aberto {
    display: flex;
}

.jogo-modal .jogo-janela {
    width: min(440px, 100%);
    padding: 24px 22px 18px;
    animation: jogo-surgir .22s ease-out;
}

@keyframes jogo-surgir {
    from { transform: scale(.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* o X vermelho do jogo (asset.core.bg010) */
.jogo-fechar {
    position: absolute;
    top: -40px;
    right: -6px;
    width: 47px;
    height: 31px;
    border: 0;
    background: url("../images/ddt/ui/fechar.png") center / contain no-repeat;
    cursor: pointer;
    font-size: 0;
}

.jogo-fechar:hover {
    filter: brightness(1.15);
}

.jogo-campo {
    display: block;
    margin-bottom: 12px;
}

.jogo-campo span {
    display: block;
    margin-bottom: 5px;
    font: 800 14px/1 var(--jogo-fonte);
    color: var(--jogo-texto);
}

.jogo-campo input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 2px solid #8a4f1c;
    border-radius: 9px;
    background: #fff8e6;
    box-shadow: inset 0 2px 4px rgba(90, 47, 13, .25);
    font: 700 16px/1 var(--jogo-fonte);
    color: var(--jogo-texto);
}

.jogo-campo input:focus {
    outline: none;
    border-color: #e08a12;
    box-shadow: 0 0 0 3px rgba(255, 216, 77, .55), inset 0 2px 4px rgba(90, 47, 13, .2);
}

.jogo-erros {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 2px solid #c8321e;
    border-radius: 9px;
    background: #ffe3d6;
    color: #8f1d06;
    font: 700 14px/1.35 var(--jogo-fonte);
}

.jogo-erros p {
    margin: 0;
}

.jogo-login__opcoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
    font: 700 13px/1.2 var(--jogo-fonte);
    color: var(--jogo-texto-suave);
}

.jogo-login__opcoes label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.jogo-login__opcoes input {
    width: 18px;
    height: 18px;
    accent-color: #c8321e;
}

.jogo-login__opcoes a {
    color: #a03c06;
}

.jogo-login__botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.jogo-login__botoes .jogo-btn {
    width: 100%;
    font-size: 18px;
}

/* ------------------------------------------------------------------ página e seções */

.jogo-pagina {
    margin: 0;
    background: #2b5e7c url("../images/ddt/fundos/ceu.webp") center top / cover fixed;
    font-family: var(--jogo-fonte);
    color: var(--jogo-texto);
    overflow-x: hidden;
}

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

.jogo-conteudo {
    width: min(var(--jogo-largura), calc(100% - 32px));
    margin: 0 auto;
}

.jogo-secao {
    position: relative;
    padding: 86px 0;
    background: var(--jogo-secao-fundo, none) center / cover no-repeat;
}

.jogo-secao::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jogo-secao-veu, linear-gradient(rgba(30, 12, 0, .42), rgba(30, 12, 0, .12) 45%, rgba(30, 12, 0, .4)));
    pointer-events: none;
}

.jogo-secao > * {
    position: relative;
}

/* emenda entre seções: uma borda de madeira e ouro, como a borda das janelas */
.jogo-secao + .jogo-secao {
    border-top: 6px solid var(--jogo-madeira);
    box-shadow: inset 0 3px 0 var(--jogo-ouro-escuro);
}

/* ------------------------------------------------------------------ topo da home */

.jogo-heroi {
    position: relative;
    min-height: min(100svh, 860px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--jogo-topo-altura) + 40px) 16px 120px;
    background: #37a9d8 url("../images/ddt/fundos/ilha-baleia.webp") center 38% / cover no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.jogo-heroi::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 50% 45% at 50% 42%, rgba(20, 50, 80, .28), transparent 75%),
        linear-gradient(rgba(8, 40, 70, .45), transparent 26%, transparent 60%, rgba(40, 18, 2, .8));
}

/* raios de luz do jogo (os raios da recompensa) girando atrás do logo */
.jogo-heroi__raios {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    margin: -560px 0 0 -450px;
    z-index: -1;
    background: url("../images/ddt/ui/raios.png") center / contain no-repeat;
    opacity: .13;
    mix-blend-mode: screen;
    animation: jogo-girar 60s linear infinite;
    pointer-events: none;
}

@keyframes jogo-girar {
    to { transform: rotate(360deg); }
}

.jogo-heroi__centro {
    max-width: 760px;
    text-align: center;
}

.jogo-heroi__logo {
    width: min(430px, 82vw);
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
    animation: jogo-flutuar 5s ease-in-out infinite;
}

@keyframes jogo-flutuar {
    50% { transform: translateY(-8px); }
}

.jogo-heroi h1 {
    margin: 4px 0 10px;
    font: 400 clamp(34px, 6vw, 62px)/1.02 var(--jogo-fonte-titulo);
    letter-spacing: .01em;
}

.jogo-heroi__frase {
    margin: 0 auto 26px;
    max-width: 560px;
    font: 800 clamp(16px, 2.2vw, 20px)/1.4 var(--jogo-fonte);
    color: #fff;
}

.jogo-heroi__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.jogo-heroi__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 4px 6px;
    font: 800 14px/1 var(--jogo-fonte);
}

.jogo-heroi__status i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--jogo-verde);
    box-shadow: 0 0 0 3px rgba(95, 209, 58, .3), 0 0 10px var(--jogo-verde);
    animation: jogo-piscar 1.6s ease-in-out infinite;
}

@keyframes jogo-piscar {
    50% { opacity: .45; }
}

.jogo-heroi__personagem {
    position: absolute;
    bottom: 20px;
    z-index: -1;
    height: min(46vh, 380px);
    width: auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
    pointer-events: none;
}

.jogo-heroi__personagem--esq {
    left: max(2vw, calc(50% - 640px));
    animation: jogo-flutuar 6s ease-in-out infinite;
}

.jogo-heroi__personagem--dir {
    right: max(2vw, calc(50% - 640px));
    animation: jogo-flutuar 6s ease-in-out 1.5s infinite;
}

.jogo-heroi__descer,
.jogo-heroi__descer:hover {
    color: var(--jogo-ouro-claro);
}

.jogo-heroi__descer {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font: 400 14px/1 var(--jogo-fonte-titulo);
    text-decoration: none;
    letter-spacing: .04em;
}

.jogo-heroi__descer img {
    width: 34px;
    transform: rotate(90deg);
    animation: jogo-quicar 1.4s ease-in-out infinite;
}

@keyframes jogo-quicar {
    50% { transform: rotate(90deg) translateX(6px); }
}

/* ------------------------------------------------------------------ atividades (ícones do salão) */

.jogo-atividades {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.jogo-atividade {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 100px;
}

.jogo-atividade img {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 3px 3px rgba(60, 25, 0, .45));
    transition: transform .2s ease;
}

.jogo-atividade:hover img {
    transform: scale(1.1) rotate(-6deg);
}

.jogo-atividade h3 {
    margin: 0 0 4px;
    font: 400 18px/1.1 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.jogo-atividade p {
    margin: 0;
    font: 700 14px/1.35 var(--jogo-fonte);
    color: var(--jogo-texto-suave);
}

/* ------------------------------------------------------------------ personagens (raios + arte do salão) */

.jogo-visual {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 36px;
    align-items: center;
}

.jogo-visual__texto h3 {
    margin: 0 0 12px;
    font: 400 clamp(26px, 3.4vw, 36px)/1.1 var(--jogo-fonte-titulo);
}

.jogo-visual__texto > p {
    margin: 0 0 20px;
    font: 700 16px/1.55 var(--jogo-fonte);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.jogo-tracos {
    display: grid;
    gap: 10px;
}

.jogo-traco {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jogo-traco img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.jogo-traco strong {
    display: block;
    font: 400 19px/1.1 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.jogo-traco small {
    font: 700 14px/1.3 var(--jogo-fonte);
    color: var(--jogo-texto-suave);
}

.jogo-palco {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.jogo-palco::before {
    content: "";
    position: absolute;
    inset: 0 10% 12%;
    background: url("../images/ddt/ui/raios.png") center / contain no-repeat;
    opacity: .55;
    animation: jogo-girar 40s linear infinite;
}

.jogo-palco img {
    position: relative;
    height: 300px;
    width: auto;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .45));
    transition: transform .25s ease;
}

.jogo-palco img:nth-child(1) { margin-right: -60px; height: 270px; }
.jogo-palco img:nth-child(2) { z-index: 1; height: 330px; }
.jogo-palco img:nth-child(3) { margin-left: -60px; height: 270px; }

.jogo-palco img:hover {
    transform: translateY(-10px) scale(1.04);
    z-index: 2;
}

/* ------------------------------------------------------------------ pilares */

.jogo-pilares {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 56px;
}

.jogo-pilar {
    text-align: center;
}

.jogo-pilar img {
    height: 58px;
    width: auto;
    margin-bottom: 6px;
}

.jogo-pilar h3 {
    margin: 0 0 6px;
    font: 400 21px/1.1 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.jogo-pilar p {
    margin: 0;
    font: 700 15px/1.45 var(--jogo-fonte);
    color: var(--jogo-texto-suave);
}

/* ------------------------------------------------------------------ servidores */

.jogo-servidores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.jogo-servidor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.jogo-servidor h3 {
    margin: 0;
    font: 400 22px/1.1 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.jogo-servidor__estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 800 13px/1 var(--jogo-fonte);
    text-transform: uppercase;
    color: #2c7a12;
}

.jogo-servidor__estado i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--jogo-verde);
    box-shadow: 0 0 6px var(--jogo-verde);
}

.jogo-servidor--fora .jogo-servidor__estado {
    color: #9b2306;
}

.jogo-servidor--fora .jogo-servidor__estado i {
    background: #c8321e;
    box-shadow: none;
}

/* ------------------------------------------------------------------ chamada (VS) */

.jogo-chamada {
    text-align: center;
}

.jogo-chamada h2 {
    margin: 0 0 12px;
    font: 400 clamp(36px, 6vw, 64px)/1 var(--jogo-fonte-titulo);
}

.jogo-chamada p {
    margin: 0 auto 26px;
    max-width: 560px;
    font: 800 18px/1.45 var(--jogo-fonte);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}

.jogo-chamada__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ------------------------------------------------------------------ primeiros passos */

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

.jogo-passo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jogo-passo__numero {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe680, #e08a12 60%, #a2520a);
    border: 2px solid #5b2f0d;
    font: 400 22px/1 var(--jogo-fonte-titulo);
    color: #fff;
}

.jogo-passo h3 {
    margin: 0;
    font: 400 20px/1.15 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.jogo-passo p {
    flex: 1;
    margin: 0;
    font: 700 15px/1.45 var(--jogo-fonte);
    color: var(--jogo-texto-suave);
}

.jogo-passo .jogo-btn {
    align-self: flex-start;
}

/* ------------------------------------------------------------------ rodapé */

.jogo-rodape {
    position: relative;
    padding: 50px 0 26px;
    background: #2a1404 url("../images/ddt/ui/couro.png");
    border-top: 6px solid var(--jogo-madeira-clara);
    box-shadow: inset 0 3px 0 var(--jogo-ouro-escuro), inset 0 12px 30px rgba(0, 0, 0, .5);
    color: #e8c98e;
    font-family: var(--jogo-fonte);
}

.jogo-rodape__grade {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 30px;
}

.jogo-rodape__marca img {
    width: 170px;
    height: auto;
}

.jogo-rodape__marca p {
    margin: 10px 0 0;
    font: 700 14px/1.5 var(--jogo-fonte);
    color: #d9b47a;
}

.jogo-rodape h4 {
    margin: 0 0 12px;
    font: 400 18px/1 var(--jogo-fonte-titulo);
    color: var(--jogo-ouro);
}

.jogo-rodape ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.jogo-rodape a {
    font: 700 14px/1.3 var(--jogo-fonte);
    color: #f1d9a8;
    text-decoration: none;
}

.jogo-rodape a:hover {
    color: var(--jogo-ouro);
    text-decoration: underline;
}

.jogo-rodape__social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.jogo-rodape__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--jogo-ouro-escuro);
    background: linear-gradient(#6d3a12, #3d1d06);
    color: var(--jogo-ouro-claro);
}

.jogo-rodape__social svg {
    width: 20px;
    height: 20px;
}

.jogo-rodape__base {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px dashed rgba(232, 201, 142, .3);
    text-align: center;
    font: 700 13px/1.6 var(--jogo-fonte);
    color: #b8935a;
}

.jogo-rodape__base p {
    margin: 0;
}

/* ------------------------------------------------------------------ aviso de sucesso */

.jogo-aviso {
    position: fixed;
    top: calc(var(--jogo-topo-altura) + 22px);
    left: 50%;
    z-index: 3000;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border: 2px solid #3f8c18;
    border-radius: 10px;
    background: linear-gradient(#f3ffe0, #d4f5b0);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    font: 800 14px/1.3 var(--jogo-fonte);
    color: #2c5e0e;
    text-align: center;
    transition: opacity .4s ease;
}

/* ------------------------------------------------------------------ tablet */

@media (max-width: 1060px) {
    .jogo-topo__menu a span:not(.jogo-selo-novo) {
        display: none;
    }

    .jogo-topo__menu a img {
        height: 32px;
    }

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

    .jogo-rodape__grade {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 760px) {
    :root {
        --jogo-topo-altura: 60px;
    }

    .jogo-topo {
        padding: 6px 8px 0;
    }

    .jogo-topo__barra {
        gap: 8px;
        border-width: 10px 14px;
        border-image-width: 10px 14px;
    }

    .jogo-topo__logo img {
        height: 46px;
    }

    .jogo-topo__abrir {
        display: grid;
        place-items: center;
        width: 46px;
        height: 40px;
        margin: -10px 0 -10px auto;
        border: 2px solid var(--jogo-ouro-escuro);
        border-radius: 9px;
        background: linear-gradient(#6d3a12, #3d1d06);
        cursor: pointer;
    }

    .jogo-topo__abrir span,
    .jogo-topo__abrir span::before,
    .jogo-topo__abrir span::after {
        display: block;
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: var(--jogo-ouro);
        content: "";
    }

    .jogo-topo__abrir span {
        position: relative;
    }

    .jogo-topo__abrir span::before {
        position: absolute;
        top: -6px;
    }

    .jogo-topo__abrir span::after {
        position: absolute;
        top: 6px;
    }

    /* o menu vira uma janela de pergaminho que desce da barra */
    .jogo-topo__painel {
        display: none;
        pointer-events: auto;
        position: absolute;
        top: calc(var(--jogo-topo-altura) + 14px);
        left: 8px;
        right: 8px;
        max-height: calc(100svh - var(--jogo-topo-altura) - 30px);
        overflow-y: auto;
        border-style: solid;
        border-width: 22px 14px 18px;
        border-image: url("../images/ddt/ui/moldura-pergaminho.png") 44 22 24 fill / 22px 14px 18px stretch;
        padding: 6px 6px 4px;
        filter: drop-shadow(0 10px 18px rgba(20, 8, 0, .5));
    }

    .jogo-topo.aberto .jogo-topo__painel {
        display: block;
    }

    .jogo-topo__painel .jogo-topo__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .jogo-topo__painel .jogo-topo__menu a {
        padding: 9px 10px;
        font-size: 16px;
        color: var(--jogo-texto);
    }

    .jogo-topo__painel .jogo-topo__menu a span:not(.jogo-selo-novo) {
        display: inline;
    }

    .jogo-topo__painel .jogo-topo__menu a:hover,
    .jogo-topo__painel .jogo-topo__menu a.ativo {
        background: rgba(184, 121, 26, .22);
        color: #8f3205;
    }

    .jogo-topo__painel .jogo-topo__conta {
        flex-direction: column;
        align-items: stretch;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed rgba(122, 74, 29, .5);
    }

    .jogo-topo__painel .jogo-topo__conta .jogo-btn {
        margin: 0;
    }

    .jogo-topo__painel .jogo-conta__botao {
        display: none;
    }

    .jogo-topo__painel .jogo-conta__lista {
        position: static;
        display: flex;
        width: auto;
    }

    .jogo-topo__painel .jogo-conta__lista.jogo-janela {
        border: 0;
        padding: 0;
        filter: none;
    }

    .jogo-topo__painel .jogo-conta__lista .jogo-janela__titulo {
        display: none;
    }

    .jogo-secao {
        padding: 64px 0;
    }

    .jogo-heroi {
        min-height: auto;
        padding: calc(var(--jogo-topo-altura) + 36px) 16px 210px;
        background-position: 46% 30%;
    }

    .jogo-heroi__personagem {
        height: 190px;
        bottom: 12px;
    }

    .jogo-heroi__personagem--esq { left: 4px; }
    .jogo-heroi__personagem--dir { right: 4px; }

    .jogo-heroi__descer {
        display: none;
    }

    .jogo-btn--grande {
        min-height: 56px;
        padding: 0 24px;
        font-size: 21px;
    }

    .jogo-heroi__acoes .jogo-btn {
        width: min(100%, 300px);
    }

    .jogo-faixa {
        padding: 0 6px 2px;
        border-width: 20px 45px 2px 44px;
        border-image-width: 20px 45px 2px 44px;
        min-height: 56px;
        max-width: calc(100vw - 24px);
        font-size: clamp(16px, 4.8vw, 21px);
        line-height: 1.05;
        white-space: normal;
    }

    .jogo-atividades,
    .jogo-pilares,
    .jogo-passos {
        grid-template-columns: 1fr;
    }

    .jogo-atividade {
        min-height: 0;
    }

    .jogo-visual {
        grid-template-columns: 1fr;
    }

    .jogo-palco {
        min-height: 300px;
        order: -1;
    }

    .jogo-palco img:nth-child(1),
    .jogo-palco img:nth-child(3) { height: 170px; margin: 0 -36px; }
    .jogo-palco img:nth-child(2) { height: 220px; }

    .jogo-janela {
        border-width: 40px 14px 18px;
        border-image-width: 40px 14px 18px;
        padding: 18px 10px 10px;
    }

    .jogo-janela > .jogo-janela__titulo {
        top: -40px;
        height: 40px;
        font-size: 18px;
    }

    .jogo-rodape__grade {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jogo-rodape__marca img {
        margin: 0 auto;
    }

    .jogo-rodape__social {
        justify-content: center;
    }

    .jogo-login__botoes {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jogo-heroi__raios,
    .jogo-palco::before,
    .jogo-heroi__logo,
    .jogo-heroi__personagem,
    .jogo-heroi__status i,
    .jogo-heroi__descer img {
        animation: none;
    }
}