/* Layout e componentes do app — Crepúsculo Real. */

/* ---------- Arte do fundo ---------- */
.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--cor-fundo); }
.cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fundo__veu { position: absolute; inset: 0; background: var(--veu); transition: background var(--transicao); }
/* nas telas de leitura a arte fica ao fundo, mais calma; só o "Meu feudo" e a entrada a mostram inteira */
body:not([data-rota='feudo'], [data-rota='entrar']) .fundo__veu { background: linear-gradient(color-mix(in srgb, var(--cor-fundo) 45%, transparent), color-mix(in srgb, var(--cor-fundo) 85%, transparent)); }

.cena__ceu-0 { stop-color: var(--cena-ceu-0); } .cena__ceu-1 { stop-color: var(--cena-ceu-1); }
.cena__ceu-2 { stop-color: var(--cena-ceu-2); } .cena__ceu-3 { stop-color: var(--cena-ceu-3); }
.cena__sol-parada { stop-color: var(--cena-sol); }
.cena__nevoa-parada { stop-color: var(--cena-nevoa); }
.cena__nuvem-parada { stop-color: var(--cena-nuvem); }
.cena__brilho-parada { stop-color: var(--cena-luz); }
.cena__estrela { fill: var(--cena-estrela); }
.cena__sol { fill: var(--cena-sol); }
.cena__ave { fill: var(--cena-ave); }
.cena__ave--longe { opacity: 0.7; }
.cena__longe { fill: var(--cena-longe); }
.cena__meio { fill: var(--cena-meio); }
.cena__castelo { fill: var(--cena-castelo); }
.cena__ameias, .cena__mastro { stroke: var(--cena-castelo); }
.cena__telhado { fill: var(--cena-telhado); }
.cena__janela, .cena__luz { fill: var(--cena-luz); }
.cena__bandeira { fill: var(--cena-bandeira); }
.cena__colina { fill: var(--cena-colina); }
.cena__chao { fill: var(--cena-chao); }
.cena__estrada { fill: var(--cena-estrada); }
.cena__floresta-longe { fill: var(--cena-floresta-longe); }
.cena__floresta { fill: var(--cena-floresta); }
.cena__primeiro { fill: var(--cena-primeiro); }
/* estrelas e vaga-lumes só existem à noite (tema escuro) */
.cena__noite { opacity: var(--cena-noite); }
.cena * { transition: fill 0.6s ease, stroke 0.6s ease, stop-color 0.6s ease, opacity 0.6s ease; }

/* ---------- Movimento da arte ---------- */
/* a gaivota cruza a cena de ponta a ponta (`--de`/`--ate` são o deslocamento a partir de onde foi desenhada), ondula subindo e descendo
   (`--onda`, de `--amplitude`) e inclina o bico para onde vai: sobe com o bico para cima, desce com ele para baixo */
.cena__voo { animation: voo var(--duracao) linear var(--atraso) infinite, ondular var(--onda) ease-in-out var(--atraso) infinite alternate; }
.cena__arfar { animation: arfar calc(var(--onda) * 2) ease-in-out var(--atraso) infinite; }
.cena__voo--1 { --de: -280px; --ate: 1620px; --duracao: 46s; --atraso: -14s; --onda: 5.5s; --amplitude: 26px; }
.cena__voo--2 { --de: -340px; --ate: 1560px; --duracao: 58s; --atraso: -40s; --onda: 6.8s; --amplitude: 20px; }
.cena__voo--3 { --de: 250px; --ate: -1650px; --duracao: 52s; --atraso: -12s; --onda: 6.2s; --amplitude: 22px; }
.cena__voo--4 { --de: -770px; --ate: 1130px; --duracao: 70s; --atraso: -35s; --onda: 7.4s; --amplitude: 14px; }
.cena__voo--5 { --de: -1050px; --ate: 850px; --duracao: 80s; --atraso: -50s; --onda: 8.2s; --amplitude: 12px; }
/* as bandeiras presas ao mastro ondulam: encolhem e entortam a partir da haste */
.cena__bandeira { transform-box: fill-box; transform-origin: left center; animation: tremular 2.6s ease-in-out infinite; }
.cena__bandeira--2 { animation-duration: 3.1s; animation-delay: -1.2s; }
.cena__bandeira--3 { animation-duration: 2.9s; animation-delay: -2s; }
.cena__nuvem { animation: deriva 55s ease-in-out infinite alternate; }
.cena__nuvem--2 { animation-duration: 70s; animation-delay: -25s; }
.cena__nuvem--3 { animation-duration: 62s; animation-delay: -40s; }
.cena__bruma--1 { animation: deriva 80s ease-in-out infinite alternate; }
.cena__bruma--2 { animation: deriva 65s ease-in-out -30s infinite alternate-reverse; }
.cena__halo { transform-box: fill-box; transform-origin: center; animation: respirar 7s ease-in-out infinite alternate; }
.cena__janela { animation: cintilar 5s ease-in-out infinite; }
.cena__janela:nth-of-type(3n) { animation-duration: 6.3s; animation-delay: -1.7s; }
.cena__janela:nth-of-type(3n + 1) { animation-duration: 4.1s; animation-delay: -3.2s; }
.cena__estrela { animation: cintilar-estrela 4s ease-in-out infinite; }
.cena__estrela:nth-of-type(3n) { animation-duration: 5.5s; animation-delay: -1.5s; }
.cena__estrela:nth-of-type(3n + 1) { animation-duration: 3.2s; animation-delay: -2.4s; }
.cena__vagalume { animation: vagalume 13s ease-in-out infinite; }
.cena__vagalume:nth-of-type(4n) { animation-duration: 10s; animation-delay: -3s; }
.cena__vagalume:nth-of-type(4n + 1) { animation-duration: 16s; animation-delay: -7s; }
.cena__vagalume:nth-of-type(4n + 2) { animation-duration: 11.5s; animation-delay: -9s; }

@keyframes voo { from { transform: translateX(var(--de)); } to { transform: translateX(var(--ate)); } }
@keyframes ondular { from { translate: 0 calc(var(--amplitude) * -1); } to { translate: 0 var(--amplitude); } }
@keyframes arfar { 0%, 50%, 100% { rotate: 0deg; } 25% { rotate: 7deg; } 75% { rotate: -7deg; } }
@keyframes tremular { 0%, 100% { transform: skewY(0deg) scaleX(1); } 35% { transform: skewY(-5deg) scaleX(0.88); } 70% { transform: skewY(4deg) scaleX(0.94); } }
@keyframes deriva { from { transform: translateX(-90px); } to { transform: translateX(90px); } }
@keyframes respirar { from { transform: scale(0.95); opacity: 0.85; } to { transform: scale(1.08); opacity: 1; } }
@keyframes cintilar { 0%, 100% { opacity: 1; } 45% { opacity: 0.35; } 60% { opacity: 0.9; } }
@keyframes cintilar-estrela { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }
@keyframes vagalume { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 50% { opacity: 0.7; translate: 34px -38px; } 85% { opacity: 1; } 100% { opacity: 0; translate: -12px -90px; } }

@media (max-width: 760px) {
  /* no celular a arte ocupa só o alto da tela e some no fundo liso; o castelo fica à vista */
  .fundo { bottom: auto; height: 520px; }
  .cena { width: auto; right: -150px; left: auto; }
  .fundo__veu { background: linear-gradient(transparent 55%, var(--cor-fundo) 100%); }
  body:not([data-rota='feudo'], [data-rota='entrar']) .fundo__veu { background: linear-gradient(color-mix(in srgb, var(--cor-fundo) 45%, transparent), var(--cor-fundo) 90%); }
}

/* ---------- Marca ---------- */
.marca__escudo { fill: var(--cor-destaque); stroke: var(--cor-ouro); }
.marca__castelo { fill: var(--cor-ouro); }
.marca__porta { fill: var(--cor-destaque); }
.icone { flex: none; }
.vidro { backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); box-shadow: var(--sombra); }

/* ---------- Estrutura ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: calc(var(--espaco-4) + var(--borda-topo)) max(var(--espaco-5), var(--borda-direita)) 0 max(var(--espaco-5), var(--borda-esquerda)); width: 100%; max-width: 1360px; margin: 0 auto; position: relative; z-index: 2; }
.topo__marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: 1.95rem; font-weight: 700; letter-spacing: 0.04em; }
.topo__marca:hover { text-decoration: none; }
.topo__direita { display: flex; align-items: center; gap: 10px; flex: none; }

.chip { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula); background: var(--cor-fundo-painel); color: var(--cor-destaque-claro); font-weight: 600; font-size: 0.95rem; }
.chip b { color: var(--cor-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.redondo { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--cor-borda); border-radius: 50%; background: var(--cor-fundo-painel); color: var(--cor-texto); }
.redondo:hover { text-decoration: none; border-color: var(--cor-destaque); }
.redondo .insignia { position: absolute; top: -5px; right: -5px; }
.avatar { background: var(--gradiente); border-color: transparent; color: var(--cor-texto-inverso); font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pagina-titulo { width: 100%; max-width: var(--largura-conteudo); margin: var(--espaco-5) auto 0; padding: 0 max(var(--espaco-5), var(--borda-direita)) 0 max(var(--espaco-5), var(--borda-esquerda)); overflow-wrap: anywhere; }
.conteudo { flex: 1; padding: var(--espaco-4) max(var(--espaco-5), var(--borda-direita)) calc(var(--altura-doca) + var(--borda-segura) + var(--espaco-6)) max(var(--espaco-5), var(--borda-esquerda)); max-width: var(--largura-conteudo); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); align-content: start; }
body[data-rota='feudo'] .pagina-titulo { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* a doca flutuante no lugar das abas */
.doca { position: fixed; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 16px - var(--borda-esquerda) - var(--borda-direita)); bottom: calc(18px + var(--borda-segura)); z-index: 5; display: flex; gap: 4px; padding: 7px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); background: var(--cor-menu); backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); box-shadow: var(--sombra); }
.doca a { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--raio-pilula); color: var(--cor-texto-fraco); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.doca a:hover { text-decoration: none; color: var(--cor-texto); }
.doca a[aria-current='page'] { background: var(--gradiente); color: var(--cor-texto-inverso); }
.doca .insignia { position: absolute; top: -2px; right: 0; }

@media (min-width: 761px) {
  body[data-rota='feudo'] .conteudo { max-width: 1360px; grid-template-columns: minmax(0, 1fr) minmax(320px, 456px); gap: var(--espaco-6); }
  body[data-rota='feudo'] .heroi { position: sticky; top: var(--espaco-6); align-self: start; padding-top: 6vh; }
}

@media (max-width: 760px) {
  .topo { padding: calc(var(--espaco-3) + var(--borda-topo)) max(var(--espaco-4), var(--borda-direita)) 0 max(var(--espaco-4), var(--borda-esquerda)); }
  .topo__marca { font-size: 1.7rem; }
  .chip { display: none; }
  .pagina-titulo { padding-left: max(var(--espaco-4), var(--borda-esquerda)); padding-right: max(var(--espaco-4), var(--borda-direita)); }
  .conteudo { padding-left: max(var(--espaco-4), var(--borda-esquerda)); padding-right: max(var(--espaco-4), var(--borda-direita)); }
  .doca { gap: 2px; padding: 5px; }
  .doca a { padding: 0 13px; height: 40px; }
  .doca a span:not(.insignia) { display: none; }
}

/* telas estreitas (até ~360 px, dobráveis fechados): só o escudo da marca, doca e botões do topo mais justos */
@media (max-width: 400px) {
  .topo__nome { display: none; }
  .topo__direita { gap: 4px; }
  .doca a { padding: 0 9px; }
}
@media (max-width: 320px) {
  .topo .redondo { width: 32px; height: 32px; }
  .doca { gap: 0; padding: 4px; }
  .doca a { padding: 0 6px; }
}

/* ---------- Painéis de vidro ---------- */
.cartao { background: var(--cor-fundo-painel); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-grande); padding: var(--espaco-4); backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); box-shadow: var(--sombra); }
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao__cabecalho { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
.cartao__cabecalho h2 { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; font-family: var(--fonte-texto); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.cartao__cabecalho h2::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-destaque); flex: none; }
.cartao__cabecalho h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cor-borda-forte), transparent); }
.cartao__cabecalho h3 { margin: 0; }

.coluna { display: grid; gap: var(--espaco-4); align-content: start; min-width: 0; }
.heroi { position: relative; z-index: 1; }
.heroi__sobre { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--espaco-1); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cor-destaque-forte); }
.heroi__sobre::before { content: ''; width: 32px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--cor-destaque-claro), var(--cor-destaque)); }
.heroi__nome { margin: var(--espaco-2) 0; font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); line-height: 0.95; text-shadow: 0 4px 30px color-mix(in srgb, var(--cor-fundo) 60%, transparent); overflow-wrap: anywhere; }
.heroi__titulo { margin: 0 0 var(--espaco-3); color: var(--cor-texto); opacity: 0.85; }
.heroi__prestigio { display: none; align-items: baseline; gap: 8px; margin-bottom: var(--espaco-3); }
.heroi__prestigio b { font-size: 1.75rem; font-weight: 600; color: var(--cor-destaque-forte); font-variant-numeric: tabular-nums; }
.heroi__prestigio small { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cor-texto); opacity: 0.8; }
.selos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--espaco-4); }
.heroi .selo { backdrop-filter: blur(10px); background: var(--cor-fundo-painel); font-size: 0.78rem; padding: 4px 12px; color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.heroi .selo--ouro { color: var(--cor-ouro); border-color: color-mix(in srgb, var(--cor-ouro) 60%, transparent); }
.heroi .selo--destaque { background: var(--gradiente); border-color: transparent; color: var(--cor-texto-inverso); font-weight: 600; }
.heroi__estatisticas { display: flex; flex-wrap: wrap; gap: 10px; }

.sem-reino { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); }
.sem-reino h3 { margin: 0 0 4px; font-size: 1.25rem; }
.sem-reino .nota { margin: 0; }
.chamada { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 10px var(--espaco-5); border-radius: var(--raio-pilula); background: var(--gradiente); color: var(--cor-texto-inverso); font-weight: 700; box-shadow: 0 8px 22px -8px var(--cor-destaque); }
.chamada:hover { text-decoration: none; transform: translateY(-2px); }
.estatisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--espaco-3); }
.heroi__estatisticas .estatistica { flex: 0 1 auto; min-width: 128px; }
.estatistica { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cor-fundo-painel); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.estatistica__texto { display: grid; min-width: 0; }
.estatistica__rotulo { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cor-texto-fraco); }
.estatistica__valor { font-size: 1.25rem; font-weight: 600; line-height: 1.15; color: var(--cor-texto); overflow-wrap: anywhere; }
.estatistica__detalhe { font-size: 0.78rem; color: var(--cor-texto-apagado); }

.estado-vazio { text-align: center; color: var(--cor-texto-fraco); padding: var(--espaco-5) var(--espaco-3); }
.estado-vazio__icone { font-size: 2rem; display: block; margin-bottom: var(--espaco-2); }
.estado-erro { color: var(--cor-perigo); }
.carregando { text-align: center; padding: var(--espaco-7) 0; color: var(--cor-texto-fraco); }

/* ---------- Botões de ação ---------- */
.acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--espaco-2); }
.painel-do-dia .acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acao { flex-direction: column; gap: 6px; padding: var(--espaco-3) var(--espaco-2); min-height: 78px; text-align: center; line-height: 1.25; border-radius: 16px; background: var(--cor-fundo-elevado); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.acao--linha { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 44px; border-radius: var(--raio-pilula); padding: 6px var(--espaco-4); }
.aro { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1.5px solid var(--cor-borda-forte); border-radius: 50%; background: color-mix(in srgb, var(--cor-fundo-elevado) 60%, transparent); color: var(--cor-destaque-claro); font-size: 1rem; line-height: 1; }
.acao__rotulo { font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.acao--linha .aro { width: 28px; height: 28px; font-size: 0.85rem; }
.acao--destaque { background: var(--gradiente); border-color: transparent; color: var(--cor-texto-inverso); box-shadow: 0 8px 24px -8px var(--cor-destaque); }
.acao--destaque .aro { background: rgba(0, 0, 0, 0.13); border-color: rgba(255, 255, 255, 0.45); color: var(--cor-texto-inverso); }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); background: color-mix(in srgb, var(--cor-texto) 5%, transparent); border: 1px solid transparent; border-radius: var(--raio); padding: 8px 12px; }
.linha--meu { border-color: var(--cor-destaque); background: color-mix(in srgb, var(--cor-destaque) 14%, transparent); }
.linha__posicao { font-size: 1rem; font-weight: 600; color: var(--cor-ouro); min-width: 2.4ch; text-align: center; }
.linha__corpo { flex: 1 1 150px; min-width: 0; }
.linha__titulo { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.linha__detalhe { font-size: 0.75rem; color: var(--cor-texto-fraco); }
.linha__barra { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, var(--cor-texto) 13%, transparent); overflow: hidden; }
.linha__barra i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cor-destaque), var(--cor-destaque-claro)); }
.linha > strong { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.linha button { min-height: 36px; padding: 6px var(--espaco-4); flex: none; }
.selo { display: inline-block; font-size: 0.68rem; padding: 1px 9px; border-radius: var(--raio-pilula); border: 1px solid var(--cor-borda-forte); background: var(--cor-fundo-elevado); color: var(--cor-texto-fraco); }
.insignia { min-width: 17px; padding: 0 5px; border-radius: var(--raio-pilula); background: #e5365a; color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 17px; text-align: center; }
.insignia[hidden] { display: none; }
.entrega + .entrega { margin-top: var(--espaco-4); padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda-forte); }
.entrega__quando { display: block; margin-bottom: var(--espaco-2); font-size: 0.78rem; color: var(--cor-texto-apagado); }
.selo--ouro { border-color: color-mix(in srgb, var(--cor-ouro) 60%, transparent); color: var(--cor-ouro); background: color-mix(in srgb, var(--cor-ouro) 12%, transparent); }
.contagem { font-variant-numeric: tabular-nums; color: var(--cor-destaque-forte); font-weight: 600; }

/* ---------- Tropas ---------- */
.classe-tropas + .classe-tropas { margin-top: var(--espaco-4); }
.classe-tropas__titulo { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--espaco-2); color: var(--cor-classe, var(--cor-texto-fraco)); }
.tropas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--espaco-2); }
.tropa { display: flex; align-items: center; gap: var(--espaco-3); background: color-mix(in srgb, var(--cor-texto) 5%, transparent); border: 1px solid var(--cor-borda); border-radius: 16px; padding: var(--espaco-2) var(--espaco-3); }
.classe-guerreiro { --cor-classe: var(--cor-guerreiro); }
.classe-tanque { --cor-classe: var(--cor-tanque); }
.classe-dano { --cor-classe: var(--cor-dano); }
.classe-suporte { --cor-classe: var(--cor-suporte); }
.tropa__icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1.5px solid var(--cor-classe, var(--cor-borda-forte)); border-radius: 50%; font-size: 1.1rem; }
.tropa__corpo { flex: 1; min-width: 0; display: grid; }
.tropa__nome { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tropa__tipo { font-size: 0.72rem; color: var(--cor-texto-fraco); }
.tropa__quantidade { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tropa progress { width: 100%; height: 4px; margin-top: 4px; accent-color: var(--cor-classe, var(--cor-destaque)); }

/* ---------- Entrar ---------- */
.entrar { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--espaco-5); padding: calc(var(--espaco-5) + var(--borda-topo)) max(var(--espaco-4), var(--borda-direita)) calc(var(--espaco-5) + var(--borda-segura)) max(var(--espaco-4), var(--borda-esquerda)); }
.entrar__marca { text-align: center; position: relative; z-index: 1; max-width: 100%; }
.entrar__marca h1 { margin: var(--espaco-2) 0 0; font-size: clamp(3rem, 2.4rem + 3vw, 4.4rem); letter-spacing: 0.1em; text-shadow: 0 2px 24px color-mix(in srgb, var(--cor-destaque) 55%, transparent); }
.entrar__marca p { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cor-texto); text-shadow: 0 1px 10px var(--cor-fundo); }
.entrar__cartao { width: min(440px, 100%); padding: var(--espaco-5) var(--espaco-4); border-radius: 28px; }
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); overflow: hidden; margin-bottom: var(--espaco-4); }
.segmentos button { min-height: 38px; border: 0; border-radius: 0; background: transparent; font-size: 0.78rem; letter-spacing: 0.04em; padding: 6px 4px; color: var(--cor-texto-fraco); overflow-wrap: anywhere; line-height: 1.2; }
.segmentos button[aria-selected='true'] { background: var(--gradiente); color: var(--cor-texto-inverso); }
.separador { display: flex; align-items: center; gap: var(--espaco-3); margin: var(--espaco-4) 0 var(--espaco-3); color: var(--cor-texto-fraco); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.separador::before, .separador::after { content: ''; flex: 1; border-top: 1px solid var(--cor-borda-forte); }
/* o iframe do Google nasce grande e só depois assume o tamanho pedido: a caixa tem altura fixa e o botão só aparece quando está pronto */
.google-botao { color-scheme: light; display: flex; justify-content: center; max-width: 100%; height: 44px; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.google-botao[data-pronto] { opacity: 1; }
.passos { margin: 0 0 var(--espaco-3); color: var(--cor-texto-fraco); font-size: 0.85rem; }

@media (min-width: 761px) {
  .entrar { justify-content: center; }
}

/* ---------- Formulários ---------- */
.campo { display: grid; gap: 6px; margin-bottom: var(--espaco-3); border: 0; padding: 0; min-width: 0; }
.campo > label, .campo > legend { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cor-texto-fraco); padding: 0; }
.campo__dica { font-size: 0.75rem; color: var(--cor-texto-apagado); }
.erro-do-formulario { color: var(--cor-perigo); min-height: 1.2em; margin: 0 0 var(--espaco-2); font-size: 0.88rem; }

.fichas { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; inset: 0; min-height: 0; width: 100%; height: 100%; cursor: pointer; }
.ficha span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px var(--espaco-4); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); background: var(--cor-fundo-elevado); }
.ficha input:checked + span { border-color: var(--cor-destaque-forte); background: var(--cor-fundo-destaque); color: var(--cor-destaque-forte); }
.ficha input:focus-visible + span { outline: 2px solid var(--cor-destaque-forte); outline-offset: 2px; }

.criaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: var(--espaco-2); }
.criaturas .ficha span { display: grid; justify-items: center; gap: 2px; border-radius: 16px; width: 100%; text-align: center; padding: var(--espaco-2); font-size: 0.8rem; }
.criaturas .ficha span b { font-size: 1.4rem; font-weight: 400; }
.classe-titulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cor-texto-apagado); margin: var(--espaco-2) 0 4px; }

/* tema: claro, escuro ou o do sistema */
.tema { display: inline-flex; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); overflow: hidden; background: var(--cor-fundo-elevado); }
.tema button { border: 0; border-radius: 0; min-height: 40px; padding: 8px var(--espaco-4); background: transparent; color: var(--cor-texto-fraco); font-size: 0.82rem; }
.tema button[aria-pressed='true'] { background: var(--gradiente); color: var(--cor-texto-inverso); }

/* ---------- Folha (janela de ação e de resultado) ---------- */
dialog.folha {
  width: min(560px, 100%); max-width: 100%; max-height: 88dvh; margin: auto auto 0; overflow: hidden;
  padding: 0; border: 1px solid var(--cor-borda-forte); border-radius: 30px 30px 0 0;
  background: color-mix(in srgb, var(--cor-fundo) 90%, transparent); color: var(--cor-texto);
  backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); box-shadow: var(--sombra-forte);
}
dialog.folha::backdrop { background: rgba(10, 4, 30, 0.55); backdrop-filter: blur(3px); }
dialog.folha[open] { display: flex; flex-direction: column; animation: subir 200ms ease; }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 761px) { dialog.folha { margin: auto; border-radius: 28px; } }
.folha__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4) var(--espaco-3) var(--espaco-5); border-bottom: 1px solid var(--cor-borda-forte); }
.folha__topo h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.folha__corpo { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; min-width: 0; padding: var(--espaco-4) max(var(--espaco-5), var(--borda-direita)) calc(var(--espaco-4) + var(--borda-segura)) max(var(--espaco-5), var(--borda-esquerda)); }
.folha__rodape { display: flex; flex-wrap: wrap; gap: var(--espaco-2); justify-content: flex-end; margin-top: var(--espaco-4); }
.folha__rodape button { flex: 1; }
.folha__descricao { color: var(--cor-texto-fraco); font-size: 0.88rem; }

/* ---------- Respostas do jogo ---------- */
.balao { background: color-mix(in srgb, var(--cor-texto) 6%, transparent); border: 1px solid var(--cor-borda); border-radius: 16px; padding: var(--espaco-3); margin-bottom: var(--espaco-2); overflow-wrap: anywhere; }
.balao--imagem { padding: 0; overflow: hidden; }
.balao--imagem img { display: block; width: 100%; height: auto; }
.balao pre, .balao code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao table { display: block; max-width: 100%; overflow-x: auto; }
.balao--imagem figcaption { padding: var(--espaco-3); }
.balao--erro { border-color: var(--cor-perigo); color: var(--cor-perigo); }
.balao details summary { cursor: pointer; color: var(--cor-destaque-forte); margin-top: var(--espaco-2); }
.balao__copiar { margin-top: var(--espaco-2); min-height: 36px; }
.enquete { border-color: var(--cor-destaque); }
.enquete__pergunta { font-weight: 600; margin-bottom: var(--espaco-2); }
.enquete__opcoes { display: grid; gap: var(--espaco-2); }
.enquete__opcoes button.escolhida { border-color: var(--cor-destaque-forte); background: var(--cor-fundo-destaque); }
.nota { color: var(--cor-texto-fraco); font-size: 0.85rem; margin: 0 0 var(--espaco-2); }
.digitando { display: flex; gap: 5px; justify-content: center; padding: var(--espaco-4); }
.digitando span { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-destaque); animation: pulsar 1s infinite ease-in-out; }
.digitando span:nth-child(2) { animation-delay: 0.15s; }
.digitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulsar { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

.texto-do-bot h3 { margin: var(--espaco-3) 0 var(--espaco-1); font-size: 1.05rem; }
.texto-do-bot h3:first-child { margin-top: 0; }
.texto-do-bot p { margin: 0 0 var(--espaco-2); }
.texto-do-bot ul { padding-left: var(--espaco-4); margin: 0 0 var(--espaco-2); }
.texto-do-bot blockquote { margin: 0 0 var(--espaco-2); padding-left: var(--espaco-3); border-left: 2px solid var(--cor-borda-forte); color: var(--cor-texto-fraco); }

/* ---------- Aviso rápido ---------- */
.aviso { position: fixed; inset-inline: 0; margin-inline: auto; width: max-content; bottom: calc(var(--altura-doca) + var(--borda-segura) + var(--espaco-4)); z-index: 20; max-width: min(calc(100% - 32px), 420px); background: color-mix(in srgb, var(--cor-fundo) 92%, transparent); backdrop-filter: var(--vidro); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); padding: 10px var(--espaco-4); box-shadow: var(--sombra-forte); }

.rodape-inicio { justify-content: flex-start; flex-wrap: wrap; }
.rodape-inicio button { flex: 0 1 auto; }

.entrar__cartao button[type="submit"] { width: 100%; }

/* ---------- Celular: a arte ocupa o alto e o conteúdo flutua sobre ela ---------- */
@media (max-width: 760px) {
  .heroi__prestigio { display: flex; }
  .heroi { padding-top: var(--espaco-5); }
  .heroi__nome { font-size: 2.9rem; }
  .estatisticas, .heroi__estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroi__estatisticas { display: grid; }
  .heroi__estatisticas .estatistica { min-width: 0; }
  .tropas { grid-template-columns: 1fr; }
  .sem-reino { flex-direction: column; align-items: stretch; text-align: center; }
}

/* celular deitado: pouca altura, então a doca fica mais compacta e a arte do fundo deixa de ser fixa em 520 px */
@media (max-height: 480px) and (orientation: landscape) {
  .doca { bottom: calc(8px + var(--borda-segura)); }
  .doca a { height: 36px; }
  .fundo { height: 100%; }
  dialog.folha { max-height: 94dvh; }
}

/* ---------- Movimento da interface ---------- */
body, .cartao, .doca, .chip, .redondo, .estatistica, .linha, .tropa { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }

/* o topo desce e a doca sobe quando o app abre; ao trocar de tela, o que há nela entra em cascata */
.topo { animation: desce 0.5s ease both; }
.doca { animation: sobe 0.55s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.conteudo[data-entrando] > *, .conteudo[data-entrando] .coluna > *, .conteudo[data-entrando] .heroi > * { animation: aparecer 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.conteudo[data-entrando] > :nth-child(2), .conteudo[data-entrando] .coluna > :nth-child(1), .conteudo[data-entrando] .heroi > :nth-child(2) { animation-delay: 70ms; }
.conteudo[data-entrando] > :nth-child(3), .conteudo[data-entrando] .coluna > :nth-child(2), .conteudo[data-entrando] .heroi > :nth-child(3) { animation-delay: 140ms; }
.conteudo[data-entrando] > :nth-child(4), .conteudo[data-entrando] .coluna > :nth-child(3), .conteudo[data-entrando] .heroi > :nth-child(4) { animation-delay: 210ms; }
.conteudo[data-entrando] > :nth-child(n + 5), .conteudo[data-entrando] .heroi > :nth-child(n + 5) { animation-delay: 280ms; }
.entrar__marca { animation: aparecer 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.entrar__cartao { animation: aparecer 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }
@keyframes desce { from { opacity: 0; transform: translateY(-12px); } }
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } }

/* o que responde ao toque se ergue um pouco; a barra do ranking cresce até o valor */
.acao { transition: transform var(--transicao), border-color var(--transicao), background var(--transicao), box-shadow var(--transicao); }
.acao:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -12px var(--cor-destaque); }
.acao:active { transform: scale(0.97); }
.linha { transition: background-color 0.4s ease, border-color 0.4s ease, transform var(--transicao); }
.linha:hover { transform: translateX(3px); }
.tropa:hover { border-color: var(--cor-classe, var(--cor-borda-forte)); }
.doca a { transition: color var(--transicao), background var(--transicao), transform var(--transicao); }
.doca a:hover .icone { transform: translateY(-2px) scale(1.12); }
.doca .icone { transition: transform var(--transicao); }
.linha__barra i { transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* um brilho passa de tempos em tempos pelo botão principal */
.acao--destaque { position: relative; overflow: hidden; }
.acao--destaque::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); animation: brilho 5s 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes brilho { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* com aviso novo, o sino balança e a insígnia pulsa */
.redondo:has(.insignia:not([hidden])) .icone { transform-origin: 50% 10%; animation: sino 4s 1s ease-in-out infinite; }
.insignia:not([hidden]) { animation: pulsar-selo 2.2s ease-in-out infinite; }
@keyframes sino { 0%, 12%, 100% { transform: rotate(0); } 3% { transform: rotate(16deg); } 6% { transform: rotate(-14deg); } 9% { transform: rotate(9deg); } }
@keyframes pulsar-selo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }