/* Visual montado com as peças e as fontes do próprio jogo. */
@font-face { font-family: "Lilita"; src: url("fonte/display_lilita.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "JogoTexto"; src: url("fonte/pt_br.ttf") format("truetype"); font-display: swap; }
:root {
  --noite: #0c1222;
  --noite-2: #16203a;
  --noite-3: #22305a;
  --borda-noite: #3c5290;
  --creme: #f5e8c8;
  --marrom: #5b3412;
  --marrom-2: #74491e;
  --dourado: #ffcc3d;
  --laranja: #f39a1a;
  --branco: #fffaf0;
  --cinza: #a9b3cc;
  --e-relampago: #a46cf2;
  --e-terra: #d29a46;
  --e-vento: #5fcf8d;
  --e-agua: #4aa6ee;
  --e-fogo: #ee5638;
  --f-titulo: "Lilita", "Lilita One", "Arial Black", sans-serif;
  --f-texto: "JogoTexto", "DejaVu Sans", Verdana, sans-serif;
  --sombra: 0 .06em 0 #3a1a02;
  --sombra-azul: 0 .06em 0 #0f1a40;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--branco); font: 14px/1.55 var(--f-texto);
  background: var(--noite) url("img/ui/fundo.jpg") center top / cover fixed;
  min-height: 100vh; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, #0c122299, #0c1222dd 60%, #0c1222f2); z-index: -1; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--laranja); color: #fff; }
code { font-family: Consolas, monospace; font-size: 12px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, #1d2b55, #121b36); border-bottom: 3px solid #c79a52; box-shadow: 0 4px 0 #00000066; }
.topo-in { max-width: 1240px; margin: auto; display: flex; align-items: center; gap: 22px; padding: 8px 20px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 50px; height: 50px; filter: drop-shadow(0 2px 0 #00000088); }
.marca b { font: 24px var(--f-titulo); letter-spacing: .02em; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; white-space: nowrap; color: var(--dourado); }
.marca small { display: block; color: var(--cinza); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
nav.menu { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
nav.menu a { text-decoration: none; font: 17px var(--f-titulo); padding: 8px 18px 10px; color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill;
  background: url("img/ui/btn_azul.png") center / 100% 100% no-repeat; min-width: 120px; text-align: center; transition: transform .12s; }
nav.menu a:hover { transform: translateY(-2px); }
nav.menu a.on { background-image: url("img/ui/aba_on.png"); text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
@media (max-width: 760px) { .topo-in { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } nav.menu { margin-left: 0; width: 100%; } nav.menu a { flex: 1; min-width: 0; padding: 6px 6px 8px; font-size: 15px; } .marca small { display: none; } }

main { max-width: 1240px; margin: auto; padding: 26px 20px 80px; }
.pagina { animation: entra .45s ease both; }
@keyframes entra { from { transform: translateY(10px); } to { transform: none; } }

/* títulos no estilo dos botões do jogo: Lilita branca com contorno marrom */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .01em; }
h1 { font-size: clamp(36px, 6vw, 70px); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
h1 em { font-style: normal; color: var(--dourado); }
h2 { font-size: clamp(24px, 3vw, 34px); margin: 6px 0; color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
h3 { font-size: 20px; color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.sobre { display: inline-block; font: 15px var(--f-titulo); color: #fff; letter-spacing: .06em; padding: 4px 26px 6px;
  background: linear-gradient(180deg, #ff8a2a, #d24b12); border: 2px solid #ffd27a; border-radius: 6px; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; box-shadow: 0 3px 0 #5a2a06; }
.lead { color: #e7ecf8; max-width: 680px; font-size: 16px; }
.secao { margin-top: 52px; }
.cab { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; position: relative; padding-bottom: 26px; }
.cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: url("img/ui/titulo.png") left bottom / auto 100% repeat-x; opacity: .8; }
.cab p { color: #cdd6ec; max-width: 520px; margin: 0; }

/* painéis de pergaminho (os pop-ups creme do jogo) */
.painel { position: relative; padding: 22px; color: var(--marrom); border-radius: 14px;
  background: linear-gradient(180deg, #fbf2dcf0, #f3e3bdf2), var(--creme) url("img/ui/papel_creme.jpg") center / cover; border: 3px solid #c79a52;
  box-shadow: inset 0 0 0 2px #fff3d4, inset 0 0 40px #c79a5240, 0 6px 0 #00000066; }
.painel h3, .painel h2 { color: var(--marrom); text-shadow: none; }
.painel .aviso { color: var(--marrom-2); }
.painel.escuro { background: linear-gradient(180deg, var(--noite-3), var(--noite-2)); border-color: var(--borda-noite); color: var(--branco); box-shadow: inset 0 0 0 2px #6d84c844, 0 6px 0 #00000066; }
.painel.escuro h3, .painel.escuro h2 { color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; }
.painel.escuro .aviso { color: var(--cinza); }
.grade { display: grid; gap: 16px; }
.grade > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } .g2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g3, .g4 { grid-template-columns: 1fr; } }
.rolar { overflow-x: auto; }
.aviso { color: var(--cinza); font-size: 13px; }

/* ícones do jogo */
img.selo { width: 34px; height: auto; vertical-align: middle; filter: drop-shadow(0 2px 2px #0008); flex: none; }
img.selo.g { width: 56px; }
img.selo.p { width: 24px; }
img.rar { height: 34px; width: auto; vertical-align: middle; filter: drop-shadow(0 2px 2px #0008); }
img.rar.g { height: 60px; }
.estrelas { display: inline-flex; gap: 1px; vertical-align: middle; }
.estrelas img { width: 18px; height: 18px; }

/* abas/chips: aba azul e aba dourada do jogo */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 6px; border-radius: 8px; cursor: pointer; user-select: none;
  font: 15px var(--f-titulo); color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill;
  background: linear-gradient(180deg, #5b86d8, #3557a6); border: 2px solid #a9c6ff; box-shadow: 0 3px 0 #1b2c62; transition: transform .12s; }
.chip:hover { transform: translateY(-1px); }
.chip.on { background: linear-gradient(180deg, #ffe066, #f5a414); border-color: #fff3b0; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; box-shadow: 0 3px 0 #8a4a06; }
.chip img { width: 22px; height: auto; }
.chip.mini { font: 700 11px var(--f-texto); text-shadow: none; padding: 3px 10px; cursor: default; background: #fff6df; color: var(--marrom); border: 1px solid #c79a52; box-shadow: none; }
.chip.mini:hover { transform: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* botões: btn_normal (amarelo) e tab_normal_1 (azul) */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  min-height: 52px; padding: 10px 30px 14px; font: 19px var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill;
  background: url("img/ui/btn_amarelo.png") center / 100% 100% no-repeat; transition: transform .12s, filter .12s; }
.botao:hover { transform: translateY(-2px); filter: brightness(1.06); }
.botao:active { transform: translateY(1px); }
.botao.sec { background-image: url("img/ui/btn_azul.png"); text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; }
.botao.peq { min-height: 40px; padding: 6px 20px 10px; font-size: 15px; }
input.busca { background: #fff6df; border: 2px solid #c79a52; color: var(--marrom); border-radius: 10px; padding: 9px 14px; font: 14px var(--f-texto); min-width: 220px; box-shadow: inset 0 2px 0 #c79a5244; }
input.busca:focus { outline: 3px solid var(--dourado); }

/* capa: a vila do jogo ao fundo */
.capa { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; min-height: 520px; padding: 34px; border-radius: 18px; overflow: hidden;
  background: url("img/ui/vila.jpg") center / cover; border: 3px solid #c79a52; box-shadow: 0 8px 0 #00000077; }
.capa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c1222ee 0%, #0c1222bb 45%, #0c122222 100%); }
.capa > * { position: relative; }
.capa .acoes { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.mural { position: relative; height: 470px; }
.mural img { position: absolute; width: 62%; filter: drop-shadow(0 14px 18px #000c); }
.mural img:nth-child(1) { left: 0; top: 50px; z-index: 2; }
.mural img:nth-child(2) { right: -4%; top: 0; width: 54%; }
.mural img:nth-child(3) { right: 6%; bottom: -14px; width: 58%; z-index: 3; }
@media (max-width: 900px) { .capa { grid-template-columns: 1fr; padding: 22px; } .capa::before { background: linear-gradient(180deg, #0c1222ee, #0c1222aa); } .mural { height: 320px; } }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.numeros div { text-align: center; padding: 14px; }
.numeros b { display: block; font: 38px var(--f-titulo); color: var(--dourado); text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.numeros span { color: var(--marrom); font-weight: 700; font-size: 13px; }
@media (max-width: 700px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
.atalho { text-decoration: none; display: block; transition: transform .15s; }
.atalho:hover { transform: translateY(-4px); }
.atalho img.ic { width: 64px; height: 64px; object-fit: contain; float: right; margin: -6px -4px 0 8px; }
.atalho p { margin: 8px 0 0; }

/* carta: moldura panel_card por raridade, como na bolsa de ninjas do jogo */
.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.carta { position: relative; display: block; aspect-ratio: 402 / 492; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s;
  background: center / 100% 100% no-repeat; filter: drop-shadow(0 5px 0 #0008); }
.carta:hover { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 8px 6px #000a) brightness(1.06); }
.carta .arte { position: absolute; inset: 4% 4.5% 4%; overflow: hidden; border-radius: 4px; }
.carta .arte img { position: absolute; left: 50%; bottom: 14%; width: 118%; max-width: none; transform: translateX(-50%); }
.carta .rar { position: absolute; top: 3%; left: 3%; height: 22%; z-index: 2; }
.carta .selo { position: absolute; top: 4%; right: 5%; width: 22%; z-index: 2; }
.carta .info { position: absolute; left: 4.5%; right: 4.5%; bottom: 4%; padding: 18px 6px 6px; text-align: center; z-index: 2;
  background: linear-gradient(180deg, transparent, #0c1222dd 40%, #0c1222f5); border-radius: 0 0 4px 4px; }
.carta .info b { display: block; font: 15px/1.1 var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.carta .info span { display: block; color: #ffe39a; font-size: 11px; margin-top: 2px; }
.carta .estrelas { position: absolute; left: 0; right: 0; bottom: 25%; justify-content: center; z-index: 2; }
.carta .estrelas img { width: 15%; max-width: 20px; height: auto; }
.carta.em-uso { opacity: .3; pointer-events: none; filter: grayscale(1); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filtros .sep { width: 2px; height: 28px; background: #c79a5266; }

/* ficha */
.ficha { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.ficha .retrato { position: sticky; top: 96px; align-self: start; text-align: center; overflow: hidden; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } .ficha .retrato { position: relative; top: 0; } }
.ficha .moldura { position: relative; aspect-ratio: 402 / 492; background: center / 100% 100% no-repeat; margin: 0 auto 10px; max-width: 320px; filter: drop-shadow(0 6px 0 #0007); }
.ficha .moldura .arte { position: absolute; inset: 4% 4.5% 4%; overflow: hidden; border-radius: 6px; }
.ficha .moldura .arte img { position: absolute; left: 50%; bottom: 4%; width: 120%; max-width: none; transform: translateX(-50%); }
.ficha .moldura .rar { position: absolute; top: 2%; left: 3%; height: 20%; z-index: 2; }
.ficha .moldura .selo { position: absolute; top: 3%; right: 4%; width: 20%; z-index: 2; }
.barra { display: grid; grid-template-columns: 28px 86px 1fr 60px; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; text-align: left; font-weight: 700; }
.barra img { width: 28px; height: 28px; }
.barra .t { height: 12px; background: #5b341233; border-radius: 99px; overflow: hidden; border: 1px solid #c79a52; }
.barra .t i { display: block; height: 100%; background: linear-gradient(180deg, #ffe066, #f39a1a); border-radius: 99px; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.hab { margin: 14px 0; }
.hab .slot { display: inline-block; font: 13px var(--f-titulo); color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; background: linear-gradient(180deg, #5b86d8, #3557a6); padding: 2px 12px 3px; border-radius: 6px; border: 1px solid #a9c6ff; margin-bottom: 6px; }
.hab .slot.sup { background: linear-gradient(180deg, #ff8a2a, #d24b12); border-color: #ffd27a; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.hab h3 { margin: 2px 0 6px; }
.hab p { margin: 6px 0; }
code.f { display: inline-block; font: 12px/1.4 Consolas, monospace; background: #fff6df; border: 1px solid #c79a52; color: #7a3d0a; padding: 3px 7px; border-radius: 6px; word-break: break-all; }
.linha-tempo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.linha-tempo div { background: #fff6dfcc; border: 1px solid #c79a5288; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.linha-tempo div b { color: #c2560e; margin-right: 6px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; text-decoration: none; font: 18px var(--f-titulo); text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.voltar img { width: 42px; }

/* atlas */
.passos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.passos span { display: flex; gap: 8px; align-items: center; font: 16px var(--f-titulo); color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; padding: 6px 16px 8px 8px; background: linear-gradient(180deg, #5b86d8, #3557a6); border: 2px solid #a9c6ff; border-radius: 10px; box-shadow: 0 3px 0 #1b2c62; }
.passos span i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ffe066, #f39a1a); border: 2px solid #fff3b0; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.nucleo { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 14px; align-items: center; }
.casa { position: relative; min-height: 300px; border-radius: 12px; cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: transform .15s;
  background: #fff6df88; border: 3px dashed #c79a52; }
.casa:hover, .casa.alvo { transform: translateY(-2px); border-color: var(--laranja); }
.casa.cheia { border: 0; background: center / 100% 100% no-repeat; filter: drop-shadow(0 5px 0 #0007); }
.casa .arte { position: absolute; inset: 4%; overflow: hidden; border-radius: 6px; }
.casa .arte img { position: absolute; left: 50%; bottom: 10%; height: 105%; max-width: none; transform: translateX(-50%); }
.casa .num { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; z-index: 3; font: 18px var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; background: linear-gradient(180deg, #ffe066, #f39a1a); border: 2px solid #fff3b0; box-shadow: 0 2px 0 #8a4a06; }
.casa .selo { position: absolute; top: 10px; right: 12px; z-index: 3; }
.casa .rar { position: absolute; top: 52px; left: 8px; z-index: 3; height: 44px; }
.casa .nome { position: absolute; bottom: 4%; left: 4%; right: 4%; padding: 30px 10px 10px; z-index: 2; text-align: center; background: linear-gradient(transparent, #0c1222f0 50%); }
.casa .nome b { display: block; font: 19px var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.casa .nome span { color: #ffe39a; font-size: 12px; }
.casa .vazio { text-align: center; font: 17px var(--f-titulo); color: var(--marrom-2); }
.casa .vazio img { width: 80px; opacity: .55; display: block; margin: 0 auto 6px; }
.casa .vazio small { font: 12px var(--f-texto); }
.troca { width: 56px; height: 56px; border: 0; cursor: pointer; font: 24px var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; background: url("img/ui/btn_amarelo.png") center / 100% 100%; border-radius: 50%; }
@media (max-width: 640px) { .nucleo { grid-template-columns: 1fr; } .troca { justify-self: center; transform: rotate(90deg); } }
.caminho { display: flex; gap: 10px; flex-wrap: wrap; }
.passo-c { display: flex; align-items: center; gap: 10px; background: #fff6dfdd; border: 2px solid #c79a52; border-radius: 12px; padding: 5px 10px 5px 5px; color: var(--marrom); }
.passo-c small { display: block; color: var(--marrom-2); font-size: 11px; }
.passo-c button { background: url("img/ui/fechar.png") center / contain no-repeat; border: 0; width: 26px; height: 26px; cursor: pointer; }
.ic-q { position: relative; width: 48px; height: 48px; flex: none; }
.ic-q img.q { position: absolute; inset: 0; width: 100%; height: 100%; }
.ic-q img.r { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: cover; object-position: top; border-radius: 6px; }
.metricas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.metricas div { text-align: center; padding: 14px 10px; border-radius: 12px; background: linear-gradient(180deg, #2a3c70, #1a274a); border: 2px solid var(--borda-noite); box-shadow: 0 4px 0 #0008; }
.metricas b { display: block; font: 30px var(--f-titulo); color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; }
.metricas span { color: var(--cinza); font-size: 12px; }
.metricas .ok { background: linear-gradient(180deg, #ffd34d, #e88a12); border-color: #fff3b0; }
.metricas .ok b { text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; } .metricas .ok span { color: #5a2a06; font-weight: 700; }
@media (max-width: 800px) { .metricas { grid-template-columns: repeat(2, 1fr); } }
.sugestao { display: grid; grid-template-columns: 56px 150px 1fr 260px; gap: 18px; align-items: center; }
.sugestao .ord { font: 40px var(--f-titulo); color: var(--dourado); text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; }
.sugestao .tag { display: inline-block; font: 13px var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .13em #5a2a06; paint-order: stroke fill; padding: 3px 12px 4px; border-radius: 6px; background: linear-gradient(180deg, #ff8a2a, #d24b12); border: 2px solid #ffd27a; margin-bottom: 8px; }
.sugestao .carta { width: 150px; }
.sugestao h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sugestao .porque { font-size: 14px; margin: 8px 0 12px; }
.regua-box { background: linear-gradient(180deg, #2a3c70, #1a274a); border: 2px solid var(--borda-noite); border-radius: 12px; padding: 12px; color: #fff; }
.regua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 12px; font-weight: 700; }
.regua div { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; }
.regua b { font: 18px var(--f-titulo); text-align: right; text-shadow: var(--sombra-azul); -webkit-text-stroke: .13em #1b2c62; paint-order: stroke fill; }
.regua b.alto { color: #8ff0a8; } .regua b.medio { color: var(--dourado); } .regua b.baixo { color: #c4cbe0; }
@media (max-width: 980px) { .sugestao { grid-template-columns: 40px 120px 1fr; } .sugestao .regua-box { grid-column: 1 / -1; } .sugestao .carta { width: 120px; } }
@media (max-width: 640px) { .sugestao { grid-template-columns: 50px 1fr; } .sugestao > div:nth-child(3) { grid-column: 1 / -1; } .sugestao .carta { justify-self: center; } }
.cobertura { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cobertura div { border-radius: 10px; padding: 8px 12px; background: #5b341214; border: 2px solid #c79a5266; }
.cobertura div b { display: block; font-size: 13px; }
.cobertura div span { color: var(--marrom-2); font-size: 12px; }
.cobertura div.tem { background: linear-gradient(180deg, #fff1b8, #ffd76a); border-color: #e3a52a; }
.cobertura div.tem span { color: #7a3d0a; }
.campo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.campo .v { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; min-height: 92px; min-width: 0; padding: 8px 6px; border-radius: 10px; background: #5b341214; border: 2px dashed #c79a5288; font-size: 12px; line-height: 1.25; }
.campo .v.cheia { border-style: solid; background: #fff6df; }
.campo .v b { overflow-wrap: anywhere; }
.campo .v small { color: var(--marrom-2); font-size: 11px; }
.campo .rotulo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 14px var(--f-titulo); color: var(--marrom); margin-top: 4px; }

/* regras */
.matriz { width: 100%; border-collapse: separate; border-spacing: 4px; }
.matriz th, .matriz td { padding: 8px; text-align: center; border-radius: 8px; }
.matriz td { background: #fffaf0; border: 2px solid #e2c48c; color: var(--marrom); font: 18px var(--f-titulo); }
.matriz td.mais { background: linear-gradient(180deg, #c9f7c0, #79d36d); color: #fff; text-shadow: 0 2px 0 #1f6a20, 1px 0 0 #1f6a20, -1px 0 0 #1f6a20, 0 -1px 0 #1f6a20; }
.matriz td.menos { background: linear-gradient(180deg, #ffb7a3, #e2533a); color: #fff; text-shadow: 0 2px 0 #7a1a08, 1px 0 0 #7a1a08, -1px 0 0 #7a1a08, 0 -1px 0 #7a1a08; }
.matriz th { font-size: 13px; font-weight: 700; color: var(--marrom); }
.matriz th img.selo { display: block; margin: 0 auto 2px; }
.matriz tr > th:first-child { text-align: left; white-space: nowrap; }
.matriz tr > th:first-child img.selo { display: inline-block; margin: 0 6px 0 0; }
.ciclo svg { width: 100%; max-width: 420px; display: block; margin: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela td, .tabela th { border-bottom: 1px solid #c79a5288; padding: 9px 8px; text-align: left; vertical-align: top; }
.tabela th { color: var(--marrom-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rodape { color: var(--cinza); font-size: 12px; text-align: center; padding: 26px 20px 40px; border-top: 3px solid #c79a5266; background: #0c1222cc; }

/* seletor (janela) */
.janela { position: fixed; inset: 0; background: #000c; z-index: 50; display: none; overflow: auto; padding: 40px 16px; }
.janela.aberta { display: block; }
.janela .caixa { max-width: 1100px; margin: auto; }
.btn-fechar { width: 56px; height: 56px; border: 0; cursor: pointer; background: url("img/ui/fechar.png") center / contain no-repeat; }
.valor { color: var(--dourado); }

/* legibilidade: nada de contorno em texto pequeno ou em título escuro sobre o pergaminho */
.painel h2, .painel h3, .chip.mini, .painel.escuro .chip.mini { -webkit-text-stroke: 0; text-shadow: none; }
.painel h2, .painel h3 { color: #4a2608; }
.chip.mini { font: 700 12px var(--f-texto); color: #4a2608; }
.chip, .hab .slot, .sobre, .sugestao .tag, .passos span, nav.menu a, .carta .info b, .botao.peq, .casa .num, .passos span i { -webkit-text-stroke-width: .1em; }
.hab .slot, .sugestao .tag { font-size: 14px; padding: 3px 12px 4px; }
.hab h3 { font-size: 21px; }
.hab p { color: #eef2fb; font-size: 15px; line-height: 1.6; }
.hab p b { color: var(--dourado); }
.hab .aviso { color: #c3cce3; }
.cobertura div, .cobertura div b { color: #4a2608; }
.cobertura div b { font-size: 14px; }
.cobertura div span { color: #6a4318; }
.cobertura div:not(.tem) { background: #fff6df; }
.linha-tempo div { background: #fff6df; color: #4a2608; border-color: #c79a52; }
.linha-tempo div b { color: #b4470a; }
.passo-c, .passo-c b { color: #4a2608; }
.ficha .lead { color: #eef2fb; }

/* time completo sugerido */
.time-final { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.time-final > div { text-align: center; min-width: 0; }
.time-final .carta { width: 100%; }
.time-final .carta .info b { font-size: 13px; }
.time-final small { display: inline-block; margin-top: 6px; font: 13px var(--f-titulo); color: #4a2608; }
.time-final .novo small { color: #fff; background: linear-gradient(180deg, #ff8a2a, #d24b12); border: 1px solid #ffd27a; border-radius: 6px; padding: 1px 10px 2px; }
@media (max-width: 800px) { .time-final { grid-template-columns: repeat(3, 1fr); } }
a.alt { color: #b4470a; font-weight: 700; }
a.alt:hover { color: #d24b12; }

/* ---------- menu com 6 abas ---------- */
nav.menu a { min-width: 0; padding: 8px 14px 10px; font-size: 16px; }
@media (max-width: 1100px) { .topo-in { flex-wrap: wrap; gap: 8px; } nav.menu { margin-left: 0; width: 100%; } nav.menu a { flex: 1; } }
@media (max-width: 760px) { nav.menu a { flex: 1 1 30%; font-size: 14px; padding: 6px 4px 8px; white-space: nowrap; } }

/* ---------- simulador ---------- */
.sobre-p { font: 12px var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: #a0581a; margin-bottom: 4px; }
.sim-topo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .sim-topo { grid-template-columns: 1fr; } }
.sim-campo { padding: 16px 18px 20px; background: linear-gradient(180deg, #1d2b55f2, #121b36f5), url("img/ui/vila.jpg") center / cover; }
.sim-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.sim-barra .esp { flex: 1; }
.sim-barra .botao[disabled] { opacity: .45; pointer-events: none; }
.linha-rot { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font: 16px var(--f-titulo); color: #fff; text-shadow: var(--sombra-azul); -webkit-text-stroke: .1em #1b2c62; paint-order: stroke fill; }
.linha-rot img { width: 26px; }
.linha-rot small { font: 12px var(--f-texto); color: var(--cinza); -webkit-text-stroke: 0; text-shadow: none; }
.sim-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sim-casa { min-height: 0; aspect-ratio: 402 / 492; width: 100%; padding: 0; font: inherit; color: inherit; border: 3px dashed #6d84c8aa; background: #ffffff0d; }
.sim-casa:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }
.sim-casa .vazio { color: #cdd6ec; font-size: 15px; }
.sim-casa .vazio img { width: 54px; }
.sim-casa .num { width: 30px; height: 30px; font-size: 16px; top: 7px; left: 7px; }
.sim-casa img.selo { width: 24%; top: 6px; right: 6px; }
.sim-casa img.rar { height: 16%; top: 40px; left: 5px; }
.sim-casa .nome { padding: 22px 6px 6px; }
.sim-casa .nome b { font-size: clamp(12px, 1.4vw, 16px); }
.sim-casa .nome span { font-size: 11px; }
.sim-casa.sel { outline: 4px solid var(--dourado); outline-offset: 3px; }
.sim-casa.levando { opacity: .4; }
.sim-casa .alerta { position: absolute; z-index: 4; right: 8px; bottom: 30%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 17px var(--f-titulo); color: #fff; background: #e0402a; border: 2px solid #ffd2c8; box-shadow: 0 2px 0 #6a1408; }
.sim-lado { display: grid; gap: 16px; }
.sim-sel h3 { font-size: 22px; }
.sel-topo { display: flex; gap: 12px; align-items: center; margin: 4px 0 8px; }
.sel-topo .ic-q { width: 64px; height: 64px; }
.sim-sel .papel { margin: 0 0 10px; font-weight: 700; color: #4a2608; }
.dica-sel { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff6df; border: 2px solid #c79a5266; color: #4a2608; font-size: 13px; }
.dica-sel img { width: 30px; }
.mini-at { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mini-at div { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; background: #fff6df; border: 1px solid #c79a5288; }
.mini-at img { width: 22px; grid-row: span 2; }
.mini-at b { color: #4a2608; font-size: 13px; }
.mini-at span { color: #6a4318; font-size: 10px; }
.acoes-sel { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nota-box { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.nota { width: 88px; height: 88px; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center; border: 4px solid #fff3b0; box-shadow: 0 4px 0 #0005; }
.nota b { font: 36px/1 var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .1em #5a2a06; paint-order: stroke fill; }
.nota span { font-size: 11px; color: #fff; font-weight: 700; }
.nota.alto { background: linear-gradient(180deg, #8ee05a, #3f9a24); }
.nota.medio { background: linear-gradient(180deg, #ffd34d, #e88a12); }
.nota.baixo { background: linear-gradient(180deg, #ff8a6a, #c8361e); }
.sim-m { grid-template-columns: repeat(3, 1fr); }
.sim-m div { padding: 8px 6px; }
.sim-m b { font-size: 22px; }
.soma-at { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.soma-at div { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fff6df; border: 2px solid #c79a5266; }
.soma-at img { width: 28px; grid-row: span 3; }
.soma-at span { color: #6a4318; font-size: 12px; }
.soma-at b { font: 20px var(--f-titulo); color: #4a2608; }
.soma-at small { color: #3f7a1a; font-weight: 700; font-size: 11px; }
.ordem { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: o; display: grid; gap: 6px; }
.ordem li { counter-increment: o; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #fff6df; border: 1px solid #c79a5288; }
.ordem li::before { content: counter(o); font: 18px var(--f-titulo); color: #a0581a; width: 18px; text-align: center; }
.ordem li .ic-q { width: 40px; height: 40px; }
.ordem li div { flex: 1; min-width: 0; }
.ordem li b { display: block; color: #4a2608; font-size: 13px; }
.ordem li small { color: #6a4318; font-size: 11px; }
.ordem li > span { font: 18px var(--f-titulo); color: #4a2608; }
.pos-l { display: flex; gap: 10px; margin-top: 10px; }
.pos-l i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 15px var(--f-titulo); color: #fff; background: #e0402a; }
.pos-l i.ok { background: #3f9a24; }
.pos-l b { color: #4a2608; }
.pos-l p { margin: 2px 0 0; }
.leitura .painel p { margin: 8px 0 0; color: #4a2608; }
.leitura h3 { margin-top: 8px; }
.t-falta, .t-um, .t-ok { display: inline-block; padding: 3px 12px 4px; border-radius: 6px; font: 12px var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.t-falta { background: #c8361e; } .t-um { background: #d9821a; } .t-ok { background: #3f9a24; }
.pecas .peca-l { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #fbf2dcf0, #f3e3bdf2); border: 2px solid #c79a52; color: #4a2608; }
.peca-l b { font: 17px var(--f-titulo); }
.peca-l small { display: block; color: #6a4318; }
.peca-l p { margin: 6px 0 0; font-size: 13px; }
.peca-l .perde { color: #b0301a; font-weight: 700; }
.troca-s { display: flex; flex-direction: column; gap: 6px; }
.troca-s .tag { align-self: flex-start; display: inline-block; padding: 3px 10px 4px; border-radius: 6px; font: 12px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #5b86d8, #3557a6); }
.troca-par { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.troca-par .ic-q { width: 56px; height: 56px; }
.troca-par .seta { font-size: 22px; color: #a0581a; }
.ic-vazio { width: 56px; height: 56px; border-radius: 10px; border: 2px dashed #c79a52; display: grid; place-items: center; font: 22px var(--f-titulo); color: #a0581a; }
.troca-s h3 { font-size: 19px; }
.troca-s .aviso { margin: 0; }
.ganha-perde { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: #4a2608; }
.ganha-perde b { display: block; font: 13px var(--f-titulo); color: #a0581a; }
.ganha-perde p { margin: 2px 0 0; }
.troca-num { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #6a4318; margin: 4px 0 6px; }
.troca-num span { padding: 3px 8px; border-radius: 6px; background: #fff6df; border: 1px solid #c79a5288; }
.troca-num b { color: #3f7a1a; }
.troca-s .botao { margin-top: auto; }
.tabela.comp td.melhor { color: #2f7a14; font-weight: 700; }

/* ---------- tier list ---------- */
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tema { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 2px solid #a9c6ff; border-radius: 10px; padding: 5px 14px 6px 6px; font: 15px var(--f-titulo); color: #fff;
  text-shadow: var(--sombra-azul); -webkit-text-stroke: .1em #1b2c62; paint-order: stroke fill; background: linear-gradient(180deg, #5b86d8, #3557a6); box-shadow: 0 3px 0 #1b2c62; transition: transform .12s; }
.tema img { width: 28px; height: 28px; object-fit: contain; }
.tema:hover { transform: translateY(-2px); }
.tema.on { background: linear-gradient(180deg, #ffe066, #f5a414); border-color: #fff3b0; text-shadow: var(--sombra); -webkit-text-stroke-color: #5a2a06; box-shadow: 0 3px 0 #8a4a06; }
.tier-quadro { padding: 18px; }
.tier-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.tier-titulo { flex: 1 1 280px; min-width: 0; font: 30px var(--f-titulo); color: #fff; background: transparent; border: 0; border-bottom: 2px dashed #6d84c8; padding: 4px 2px; text-shadow: var(--sombra-azul); -webkit-text-stroke: .1em #1b2c62; paint-order: stroke fill; }
.tier-titulo:focus { outline: none; border-bottom-color: var(--dourado); }
.tier-ferr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.faixas-n { display: inline-flex; align-items: center; gap: 6px; color: var(--cinza); font-size: 13px; }
.faixas-n b { font: 18px var(--f-titulo); color: #fff; min-width: 16px; text-align: center; }
.mini-b { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font: 18px var(--f-titulo); color: #5a2a06; border: 2px solid #fff3b0; background: linear-gradient(180deg, #ffe066, #f39a1a); box-shadow: 0 2px 0 #8a4a06; }
.tiers { display: grid; gap: 8px; margin-top: 10px; }
.tier { display: grid; grid-template-columns: 110px 1fr; min-height: 104px; border-radius: 10px; overflow: hidden; border: 2px solid #3c5290; background: #0c122299; }
.tier-nome { background: var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; text-align: center; cursor: text; }
.tier-nome span { font: 34px/1.05 var(--f-titulo); color: #fff; text-shadow: var(--sombra); -webkit-text-stroke: .1em #5a2a06; paint-order: stroke fill; outline: none; overflow-wrap: anywhere; max-width: 100%; white-space: pre-wrap; }
.tier-nome span:focus { background: #0002; border-radius: 6px; }
.tier-nome small { font: 700 11px var(--f-texto); color: #3a1a02; }
.tier-zona { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 8px; min-height: 100px; transition: background .12s; }
.tier-zona.alvo, #tier.escolhendo .tier-zona:hover { background: #ffcc3d22; }
#tier.escolhendo .tier-zona, #tier.escolhendo .tier-nome { cursor: pointer; }
.tier-zona .vazia { color: #6d84c8; font-size: 13px; align-self: center; margin: auto; }
.peca { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 5px; border-radius: 8px; cursor: grab; user-select: none; text-align: center; transition: transform .12s, background .12s; }
.peca:hover { background: #ffffff14; transform: translateY(-2px); }
.peca:focus-visible { outline: 2px solid var(--dourado); }
.peca.sel { background: #ffcc3d44; outline: 2px solid var(--dourado); }
.peca.levando { opacity: .35; }
.peca .ic-q { width: 60px; height: 60px; }
.peca b { font: 700 11px/1.15 var(--f-texto); color: #fff; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.peca small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #ffd76a; }
.banco { margin-top: 16px; }
.banco-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.banco-cab small { font: 13px var(--f-texto); color: #6a4318; margin-left: 6px; }
.banco-cab .busca { flex: 0 1 320px; }
.banco .banco-zona { background: #5b341214; border: 2px dashed #c79a5288; border-radius: 10px; max-height: 520px; overflow: auto; }
.banco .peca b { color: #4a2608; }
.banco .peca small { color: #a0581a; }
.banco .peca:hover { background: #5b341218; }
.banco .tier-zona .vazia { color: #6a4318; }
.assinatura { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 16px; }
.assinatura label { display: grid; gap: 4px; font: 13px var(--f-titulo); color: #4a2608; }
.assinatura input { font: 14px var(--f-texto); padding: 8px 10px; border-radius: 8px; border: 2px solid #c79a52; background: #fffaf0; color: #4a2608; width: 220px; }
.assinatura .aviso { margin: 0 0 8px; }
.compartilhar > div { padding: 14px; border-radius: 12px; background: #fff6df; border: 2px solid #c79a5266; }
.compartilhar h3 { font-size: 18px; }
@media (max-width: 640px) { .tier { grid-template-columns: 72px 1fr; } .tier-nome span { font-size: 24px; } .peca { width: 68px; } .peca .ic-q { width: 50px; height: 50px; } .sim-linha { gap: 6px; } .mini-at { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sim-casa img.rar { display: none; } .sim-casa .num { width: 24px; height: 24px; font-size: 13px; top: 4px; left: 4px; } .sim-casa img.selo { top: 4px; right: 4px; } .sim-casa .nome { padding: 14px 3px 4px; } .sim-casa .nome b { font-size: 11px; -webkit-text-stroke-width: .08em; } .sim-casa .nome span { font-size: 9px; } .sim-casa .alerta { width: 20px; height: 20px; font-size: 13px; } .sim-campo { padding: 12px 10px 14px; } .sim-casa .vazio { font-size: 12px; } .sim-casa .vazio img { width: 34px; } }