/* Menu inicial */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: #3d2f22;
    background: #47aba9 url('../assets/terrain/water.png');
    image-rendering: pixelated;
}

.menu-ts {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
    gap: 0;
}

/* ---------- cena animada ----------
   Cada sprite tem os pés em alturas diferentes dentro do quadro (âncora em config.js);
   o "bottom" de cada um compensa isso para todos pisarem na mesma linha de chão. */
.cena { width: min(760px, 100%); height: 250px; position: relative; display: flex; justify-content: center; }
.ilha {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 700px; height: 150px;
    background: url('../assets/ui/grama.png');
    border-radius: 48% 52% 0 0 / 70% 70% 0 0;
    box-shadow: 0 -6px 0 #e9f3d0 inset, 0 0 0 6px rgba(255, 255, 255, .55);
}
.castelo { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 260px; image-rendering: pixelated; }

.spr {
    position: absolute; bottom: 0; display: block;
    width: var(--fw); height: var(--fh);
    background-repeat: no-repeat;
    animation: quadros var(--t, .9s) steps(var(--n)) infinite;
    transform-origin: 50% 100%;
    pointer-events: none;
}
@keyframes quadros { to { background-position: calc(-1 * var(--fw) * var(--n)) 0; } }
.spr.virado { transform: scaleX(-1); }
.peao      { --fw: 192px; --fh: 192px; --n: 8;  background-image: url('../assets/units/pawn_idle.png'); bottom: -28px; }
.guerreiro { --fw: 192px; --fh: 192px; --n: 8;  background-image: url('../assets/units/warrior_idle.png'); bottom: -26px; }
.arqueiro  { --fw: 192px; --fh: 192px; --n: 6;  background-image: url('../assets/units/archer_idle.png'); bottom: -26px; }
.tocha     { --fw: 192px; --fh: 192px; --n: 8;  background-image: url('../assets/enemy/torch_idle.png'); bottom: -26px; --t: .8s; }
.lanca     { --fw: 256px; --fh: 256px; --n: 8;  background-image: url('../assets/enemy/spear_idle.png'); }
.ovelha    { --fw: 128px; --fh: 128px; --n: 6;  background-image: url('../assets/res/sheep_idle.png'); --t: .8s; bottom: -20px; z-index: 1; }
.arvore    { --fw: 192px; --fh: 256px; --n: 8;  background-image: url('../assets/res/tree1.png'); --t: 1.1s; }

/* ---------- painel ---------- */
.menu-painel { width: min(560px, 100%); margin-top: -6px; text-align: center; position: relative; z-index: 2; }
.menu-painel .fita { font-size: 30px; margin-top: -40px; }
.menu-sub { margin: 0 auto 18px; max-width: 420px; line-height: 1.5; font-size: 15px; }
.menu-botoes { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.menu-botoes .btn-ts:not(.grande) { min-width: 200px; }
.menu-som { margin: 14px 0 0; font-size: 13px; color: #6b5844; }
.menu-som.hide { visibility: hidden; }

/* janela "Como jogar" */
.como-box { width: min(560px, 100%); text-align: left; }
.como-box .fita { margin-left: auto; margin-right: auto; }
.como-box h3 { margin: 10px 0 4px; font-size: 16px; color: #2b5d7a; }
.como-box ul { margin: 0 0 6px; padding-left: 20px; line-height: 1.5; font-size: 14px; }
.como-box .btn-ts { display: flex; margin: 14px auto 0; }

/* celular deitado / telas baixas: cena menor e botões lado a lado */
@media (max-height: 620px) {
    .menu-ts { justify-content: flex-start; padding-top: 6px; }
    .cena { height: 128px; }
    .menu-painel { width: min(640px, 100%); }
    .menu-painel .fita { margin-top: -22px; }
    .ilha { transform: translateX(-50%) scale(.52); transform-origin: 50% 100%; }
    .menu-painel .fita { font-size: 22px; }
    .menu-sub { margin-bottom: 10px; font-size: 13px; }
    .menu-botoes { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .menu-botoes .btn-ts, .menu-botoes .btn-ts.grande, .menu-botoes .btn-ts:not(.grande) { min-width: 140px; min-height: 48px; font-size: 17px; }
    .menu-som { margin-top: 8px; }
}
@media (max-width: 560px) {
    .ilha { transform: translateX(-50%) scale(.55); transform-origin: 50% 100%; }
    .cena { height: 160px; }
}

/* janela de dificuldade */
.dif-box { width: min(420px, 100%); }
.dif-op { display: flex; margin: 10px auto 2px; min-width: 220px; }
.dif-desc { margin: 0 0 8px; font-size: 13px; color: #6b5844; }
.dif-voltar { margin-top: 6px; font: inherit; font-weight: 700; color: #6b5844; background: none; border: none; text-decoration: underline; cursor: pointer; padding: 6px 12px; }
@media (max-height: 560px) {
    .dif-op { margin-top: 4px; min-height: 42px; }
    .dif-desc { margin-bottom: 2px; font-size: 12px; }
}

/* ---------- conta: canto do menu (Entrar / Criar conta ou apelido) ---------- */
.conta-barra {
    position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 30;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 10px; background: rgba(43, 47, 63, .82);
    font-size: 14px; font-weight: 700;
}
.conta-barra form { margin: 0; }
.conta-nome, .conta-link {
    color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 7px;
    background: none; border: none; font: inherit; cursor: pointer;
}
.conta-nome:hover, .conta-link:hover { background: rgba(255, 255, 255, .12); }
.conta-link.destaque { background: #3f8fd6; }
.conta-link.destaque:hover { background: #4b9be2; }

/* ---------- páginas de conta e ranking ---------- */
.pagina-ts {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 56px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left));
}
.caixa-ts { width: min(440px, 100%); text-align: center; }
.caixa-ts.larga { width: min(860px, 100%); }
.fita.vermelha { filter: hue-rotate(160deg) saturate(1.3); }

.form-ts { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 4px; }
.form-ts label { margin-top: 8px; font-weight: 700; font-size: 14px; }
.form-ts input:not([type=checkbox]) {
    font: inherit; font-size: 16px; color: #3d2f22; padding: 10px 12px;
    background: #fbf3df; border: 2px solid #8a6a45; border-radius: 8px; outline: none;
}
.form-ts input:focus { border-color: #3f8fd6; box-shadow: 0 0 0 3px rgba(63, 143, 214, .25); }
.form-ts input.input-validation-error { border-color: #c0392b; }
.form-ts .btn-ts { align-self: center; margin-top: 16px; }
.form-check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.form-check input { width: 20px; height: 20px; accent-color: #3f8fd6; }
.form-erro { color: #b03a2e; font-size: 13px; font-weight: 600; min-height: 0; }
.form-erros ul { margin: 0 0 6px; padding: 10px 12px 10px 28px; background: #f6d5cc; border: 2px solid #c0392b; border-radius: 8px; color: #8e2a1f; font-size: 14px; font-weight: 600; }
.form-erros.validation-summary-valid { display: none; }
.form-aviso { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.form-ok { margin: 0 0 10px; padding: 8px 12px; background: #d8efc9; border: 2px solid #5e9a3a; border-radius: 8px; font-weight: 700; color: #35621c; }
.form-intro { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #5a4632; }
.form-links { margin: 16px 0 0; font-size: 14px; }
.caixa-ts a:not(.btn-ts):not(.aba-ts):not(.resumo-item) { color: #2b5d7a; font-weight: 700; }
.voltar-ts { display: inline-block; margin-top: 14px; font-size: 14px; }
.msg-texto { margin: 4px 0 18px; line-height: 1.6; font-size: 15px; }
.msg-botao { display: flex; width: fit-content; margin: 0 auto; }

.conta-info { margin: 0 0 14px; font-size: 13px; color: #6b5844; }
.sub-ts { margin: 22px 0 8px; font-size: 18px; color: #2b5d7a; text-align: left; }
.vazio-ts { margin: 18px 0; color: #6b5844; }

.resumo-ts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.resumo-item {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 8px;
    background: #fbf3df; border: 2px solid #c8ab7d; border-radius: 10px;
    color: #3d2f22; text-decoration: none;
}
.resumo-item:hover { border-color: #3f8fd6; }
.resumo-dif { font-weight: 800; color: #2b5d7a; }
.resumo-pontos { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.resumo-sub { font-size: 12px; color: #6b5844; }

.abas-ts { display: flex; justify-content: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.aba-ts {
    padding: 8px 18px; border-radius: 8px; font-weight: 800; text-decoration: none;
    color: #2b5d7a; background: #fbf3df; border: 2px solid #c8ab7d;
}
.aba-ts.ativa { color: #fff; background: #3f8fd6; border-color: #2e6fa8; }

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-ts { width: 100%; border-collapse: collapse; font-size: 14px; background: #fbf3df; border-radius: 8px; overflow: hidden; }
.tabela-ts th { background: #8a6a45; color: #fff; padding: 8px 10px; text-align: left; white-space: nowrap; }
.tabela-ts td { padding: 7px 10px; border-top: 1px solid #e3d2b0; text-align: left; white-space: nowrap; }
.tabela-ts .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.tabela-ts .nome { font-weight: 700; }
.tabela-ts .vit { color: #35621c; font-weight: 700; }
.tabela-ts .der { color: #a33b2c; font-weight: 700; }
.tabela-ts tr.eu td { background: #d9ebfa; }
.tabela-ts tr.pos1 td:first-child::before { content: "🥇 "; }
.tabela-ts tr.pos2 td:first-child::before { content: "🥈 "; }
.tabela-ts tr.pos3 td:first-child::before { content: "🥉 "; }
.tabela-ts tr.separador td { text-align: center; color: #8a6a45; padding: 2px; }
.ranking-regra { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: #6b5844; }

.acoes-ts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.acoes-ts form { margin: 0; }
.acoes-ts .btn-ts { min-width: 140px; }

@media (max-width: 640px) {
    .resumo-ts { grid-template-columns: 1fr; }
    .resumo-item { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
    .tabela-ts { font-size: 13px; }
    .tabela-ts th, .tabela-ts td { padding: 6px 7px; }
}
@media (max-height: 620px) {
    .pagina-ts { align-items: flex-start; padding-top: 52px; }
    .conta-barra { top: 6px; padding: 4px 6px; font-size: 13px; }
}

/* ---------- painel do admin ---------- */
.busca-ts { display: flex; gap: 8px; margin: 0 0 10px; }
.busca-ts input { flex: 1; font: inherit; font-size: 15px; padding: 8px 12px; background: #fbf3df; border: 2px solid #8a6a45; border-radius: 8px; color: #3d2f22; }
.busca-ts .btn-ts { min-width: 110px; min-height: 44px; font-size: 16px; }
.selo { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #3f8fd6; color: #fff; font-size: 11px; vertical-align: middle; }
.acoes-linha { display: flex; gap: 6px; }
.acoes-linha form { margin: 0; }
.mini-btn { font: inherit; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 2px solid #8a6a45; background: #f3e7c9; color: #3d2f22; cursor: pointer; white-space: nowrap; }
.mini-btn:hover { background: #fff6e0; }
.mini-btn.perigo { border-color: #c0392b; color: #a33b2c; }
.conta-link.admin { background: #8a6a45; }
.caixa-ts.admin-caixa { width: min(1180px, 100%); }

/* ---------- torneios ---------- */
.torneio-faixa {
    display: flex; flex-direction: column; gap: 2px; margin: 0 auto 14px; max-width: 420px;
    padding: 8px 12px; border-radius: 10px; text-decoration: none; color: #3d2f22;
    background: #ffe9a8; border: 2px solid #d4a23a; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.torneio-faixa:hover { background: #fff1c4; }
.torneio-faixa span { font-size: 13px; color: #6b5844; }
.torneio-cartao { text-align: left; margin: 0 0 10px; padding: 12px 14px; background: #fbf3df; border: 2px solid #c8ab7d; border-radius: 10px; }
.torneio-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.torneio-nome { font-weight: 800; font-size: 17px; color: #2b5d7a; }
.torneio-desc { margin: 6px 0 0; font-size: 14px; }
.torneio-info { margin: 6px 0 0; font-size: 13px; color: #6b5844; }
.torneio-botoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.torneio-botoes .btn-ts { min-width: 120px; min-height: 42px; font-size: 16px; }
.selo-sit { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; color: #fff; white-space: nowrap; }
.selo-sit.aberto { background: #4c9a2a; }
.selo-sit.breve { background: #3f8fd6; }
.selo-sit.fim { background: #8a6a45; }
.acoes-ts.topo { margin: 0 0 12px; justify-content: flex-start; }
.select-ts { font: inherit; font-size: 16px; color: #3d2f22; padding: 10px 12px; background: #fbf3df; border: 2px solid #8a6a45; border-radius: 8px; }
.menu-linha { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.menu-linha .btn-ts:not(.grande) { min-width: 170px; }
@media (max-height: 620px) { .menu-linha { display: contents; } }

/* ---------- multiplayer (salas) ---------- */
.mp-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.mp-bloco { display: flex; flex-direction: column; gap: 6px; }
.mp-bloco .btn-ts { align-self: flex-start; margin-top: 6px; }
.mp-label { font-weight: 700; font-size: 14px; margin-top: 4px; }
.mp-sala-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; text-align: left; margin-bottom: 8px; }
.mp-codigo { font-size: 15px; background: #fbf3df; border: 2px dashed #c8ab7d; border-radius: 8px; padding: 4px 10px; }
.mp-codigo b { letter-spacing: 2px; color: #2b5d7a; }
.mp-jog { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; margin-bottom: 6px; background: #fbf3df; border: 2px solid #c8ab7d; border-radius: 8px; }
.mp-cor { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3d2f22; flex: none; }
.mp-time { font-size: 12px; color: #6b5844; }
.mp-pronto { margin-left: auto; font-size: 12px; font-weight: 700; color: #a33b2c; }
.mp-pronto.sim { color: #35621c; }
.mp-cores { margin: 10px 0; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mp-cor-btn { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fbf3df; box-shadow: 0 0 0 2px #8a6a45; cursor: pointer; }
.mp-cor-btn.on { box-shadow: 0 0 0 3px #2b5d7a; }
.mp-cor-btn:disabled { opacity: .25; cursor: not-allowed; }
.mp-times { display: flex; gap: 8px; justify-content: center; }
@media (max-width: 700px) { .mp-colunas { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }