/* A Corte: medieval elegante, só CSS e SVG inline. Madeira e pedra na moldura, pergaminho no texto,
   ouro e cobre nos destaques. Celular primeiro; acima de 860 px as gavetas viram colunas. */
:root {
  --pedra-0: #110e0b; --pedra-1: #17130f; --pedra-2: #1f1a14; --pedra-3: #2a231b;
  --madeira-1: #2b1d12; --madeira-2: #3b2818; --madeira-3: #563a22;
  --pergaminho: #ecdfc2; --pergaminho-2: #c9b997; --pergaminho-3: #9c8d70;
  --tinta: #2a1f14;
  --ferro: #4b4844; --ferro-2: #6f6a63;
  --ouro: #d4ae4a; --ouro-2: #f0d78a; --ouro-3: #8f6f1f; --cobre: #b8743c;
  --perigo: #d1604f; --ok: #79b86a;
  --raio: 10px;
  --serifa: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--pergaminho);
  font: 15px/1.45 var(--sans);
  background-color: var(--pedra-1);
  /* parede de pedra discreta: juntas horizontais e verticais bem apagadas */
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(212, 174, 74, .07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 92px);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
a { color: var(--ouro-2); }
:focus-visible { outline: 2px solid var(--ouro-2); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* campos de texto: pergaminho com tinta escura */
input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea {
  background: var(--pergaminho); color: var(--tinta); border: 1px solid var(--ouro-3); border-radius: 10px;
  padding: 10px 12px; font-size: 16px; /* 16 px: o iPhone não dá zoom ao focar */
}
input::placeholder, textarea::placeholder { color: #7d6d55; }
textarea { resize: vertical; width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--ouro); width: 20px; height: 20px; flex: none; margin: 1px 0 0; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; min-height: 42px;
  border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid transparent; text-align: center;
}
.botao.ouro {
  background: linear-gradient(180deg, var(--ouro-2), var(--ouro) 55%, #b48d2c); color: var(--tinta); border-color: #7a5c17;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .35);
}
.botao.pedra {
  background: linear-gradient(180deg, #4a453f, #34302b); color: var(--pergaminho); border-color: #1c1a17;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .3);
}
.botao.cobre { background: linear-gradient(180deg, #d08a4f, var(--cobre) 60%, #8a5428); color: #1d1208; border-color: #5c3818; }
.botao.perigo { background: linear-gradient(180deg, #d87160, #a8473a); color: #fff; border-color: #6b2a21; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao.largo { width: 100%; }
.botao.pequeno { padding: 6px 14px; min-height: 34px; font-size: 14px; }
.botao-link { color: var(--ouro-2); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.icone { position: relative; font-size: 20px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.icone:hover { background: rgba(0, 0, 0, .25); }
.ponto-aviso { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); }

/* ---------- menu inicial ---------- */
.menu-inicial { height: 100dvh; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; }
.menu-cartao {
  width: min(440px, 100%); text-align: center; padding: 26px 20px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(48, 35, 23, .97), rgba(28, 21, 14, .98));
  border: 1px solid var(--ouro-3);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .35), 0 0 0 6px rgba(212, 174, 74, .22), 0 30px 80px rgba(0, 0, 0, .6);
}
.brasao { width: 92px; height: 108px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.logo-grande {
  font-family: var(--serifa); font-size: clamp(30px, 8vw, 40px); margin: 0; color: var(--ouro-2);
  letter-spacing: .05em; text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.lema { color: var(--pergaminho-2); margin: 6px 0 4px; }
.ornamento { width: 200px; max-width: 100%; height: 14px; color: var(--ouro-3); display: block; margin: 8px auto 16px; }
.rotulo, .bloco-idioma .rotulo {
  display: block; font-family: var(--serifa); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: 8px;
}
.caixa-idade {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer;
  margin: 18px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(212, 174, 74, .2);
}
.caixa-idade.chamando { animation: chamar .5s; border-color: var(--ouro); }
@keyframes chamar { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.aviso-idade { font-size: 12.5px; color: var(--pergaminho-3); margin: 4px 0 16px; }
.menu-acoes { display: grid; gap: 10px; justify-items: center; }
.area-google { position: relative; min-height: 44px; display: flex; justify-content: center; width: 100%; }
.trava-idade { position: absolute; inset: 0; cursor: not-allowed; border-radius: 999px; }
.menu-inicial.sem-idade .gis,
.menu-inicial.sem-idade #menu-google-nativo,
.menu-inicial.sem-idade #menu-observar,
.menu-inicial.sem-idade #menu-dev button { opacity: .5; }
.form-linha { display: flex; gap: 8px; width: 100%; }
.form-linha input { flex: 1; min-width: 0; }
.rotulo-dev { font-size: 12px; color: var(--cobre); margin: -4px 0 0; }
.separador-ou { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--pergaminho-3); font-size: 13px; }
.separador-ou::before, .separador-ou::after { content: ''; flex: 1; height: 1px; background: rgba(212, 174, 74, .25); }
.menu-rodape { font-size: 12.5px; color: var(--pergaminho-3); margin: 18px 0 0; }
.menu-rodape a { display: block; margin-top: 4px; }
.aviso { color: var(--pergaminho-2); font-size: 13.5px; margin: 0; }

/* seletor de língua (menu, perfil e modal) */
.seletor-idioma { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.idioma {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(212, 174, 74, .3); background: rgba(0, 0, 0, .25);
}
.idioma.ativo { border-color: var(--ouro); background: rgba(212, 174, 74, .16); color: var(--ouro-2); box-shadow: inset 0 0 0 1px rgba(212, 174, 74, .35); }
/* selo da língua (PT/EN/ES): emoji de bandeira vira letras no Windows, e bandeira é de país, não de língua */
.sigla-idioma, #bt-idioma { font: 700 12px/1 var(--serifa); letter-spacing: .08em; padding: 3px 6px; border: 1px solid var(--ouro-3); border-radius: 6px; color: var(--ouro-2); }

/* ---------- a Corte ---------- */
/* minmax(0, 1fr): nome comprido no topo não alarga a tela (sem rolagem horizontal) */
.app { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100dvh; }

.topo {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--madeira-2), var(--madeira-1));
  border-bottom: 2px solid var(--ouro-3); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); position: relative; z-index: 15;
}
.logo { font-family: var(--serifa); font-weight: 700; letter-spacing: .04em; color: var(--ouro-2); font-size: 18px; white-space: nowrap; }
.eu { margin-left: auto; min-width: 0; flex: 0 1 auto; display: flex; justify-content: flex-end; }
.chip {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: min(100%, 320px); text-align: left; padding: 3px 12px 3px 6px;
  border: 1px solid rgba(212, 174, 74, .35); border-radius: 999px; background: rgba(0, 0, 0, .25);
}
.chip-icone { font-size: 20px; }
.chip-texto { min-width: 0; display: block; overflow: hidden; }
.chip-nome { display: block; color: var(--cor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip small { display: block; color: var(--pergaminho-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.corpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }

/* painéis laterais: no celular são gavetas */
.painel {
  position: absolute; top: 0; bottom: 0; z-index: 12; width: min(300px, 86vw); overflow-y: auto; padding: 6px 8px 16px;
  background: linear-gradient(180deg, var(--madeira-1), #20160e); box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  transition: transform .22s ease;
}
.esquerda { left: 0; transform: translateX(-105%); border-right: 1px solid rgba(212, 174, 74, .18); }
.direita { right: 0; transform: translateX(105%); border-left: 1px solid rgba(212, 174, 74, .18); }
body.ver-salas .esquerda, body.ver-presenca .direita { transform: none; }
.veu { position: absolute; inset: 0; z-index: 11; background: rgba(0, 0, 0, .5); }
.painel h2 {
  font-family: var(--serifa); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro); margin: 14px 8px 6px;
}
.painel ul { list-style: none; margin: 0; padding: 0; }
.dica { color: var(--pergaminho-3); font-size: 13px; padding: 8px; margin: 0; }

.item-sala { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 8px; border-radius: 8px; }
.item-sala:hover { background: rgba(0, 0, 0, .25); }
.item-sala.ativo { background: rgba(212, 174, 74, .12); box-shadow: inset 3px 0 var(--ouro); }
.item-sala .ic { width: 22px; text-align: center; flex: none; }
.nome-sala { flex: 1; min-width: 0; color: var(--cor, var(--pergaminho)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolha { background: var(--ouro); color: var(--tinta); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; flex: none; }

/* Na Corte agora */
.pessoa { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; padding: 6px 8px; border-radius: 8px; }
.pessoa:hover { background: rgba(0, 0, 0, .25); }
.pessoa.off { opacity: .62; }
.ponto-status { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; display: inline-block; }
.ponto-status.on { background: var(--ok); box-shadow: 0 0 6px rgba(121, 184, 106, .6); }
.ponto-status.off { border: 1.5px solid var(--ferro-2); }
.pessoa-info { min-width: 0; display: block; }
.pessoa-nome { display: block; color: var(--cor); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-meta { display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 11.5px; align-items: center; }
.offline-ha { display: block; color: var(--pergaminho-3); font-size: 11px; }
.painel .tit-offline { color: var(--pergaminho-3); }
.mais-online, .visitantes { font-size: 12.5px; color: var(--pergaminho-3); padding: 2px 8px; margin: 6px 0 0; }

/* ---------- conversa ---------- */
.conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cab-sala {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 16px;
  border-bottom: 1px solid rgba(212, 174, 74, .18); background: rgba(0, 0, 0, .22);
}
.titulo-sala {
  flex: 1; min-width: 0; margin: 0; font-family: var(--serifa); font-size: 16px; color: var(--ouro-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nome-dm { color: var(--cor, var(--ouro-2)); }
.cab-acoes { display: flex; gap: 6px; flex: none; }
.alternar {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 17px;
  border: 1px solid rgba(212, 174, 74, .22); background: rgba(0, 0, 0, .25); color: var(--pergaminho-3);
}
.alternar svg { width: 20px; height: 20px; }
.alternar:not(.ligado) { filter: grayscale(1); opacity: .7; }
.alternar.ligado { color: var(--ouro-2); border-color: var(--ouro); background: rgba(212, 174, 74, .15); }
#bt-apagar-dm { filter: none; opacity: 1; }
.faixa-conexao { background: #4a2a1a; color: var(--pergaminho); text-align: center; font-size: 13px; padding: 6px 16px; }

/* palco: o chat e, por cima do topo dele, a faixa de entrada de Rei e Imperador */
.palco { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mensagens { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; padding: 10px 16px 14px; }
.lista-msgs { display: flex; flex-direction: column; gap: 8px; }
.topo-historico { text-align: center; font-size: 12px; color: var(--pergaminho-3); min-height: 18px; font-family: var(--serifa); letter-spacing: .06em; }
/* convite de quem vê só a tela atual (8e): pergaminho discreto, uma frase e um botão */
.cartao-historico {
  display: grid; justify-items: center; gap: 8px; max-width: 440px; margin: 2px auto 10px; padding: 12px 16px;
  border-radius: 12px; border: 1px solid rgba(212, 174, 74, .28);
  background: linear-gradient(180deg, rgba(236, 223, 194, .07), rgba(0, 0, 0, .2));
  font: 14px/1.4 var(--sans); letter-spacing: 0;
}
.cartao-historico p { margin: 0; font-family: var(--serifa); color: var(--ouro-2); letter-spacing: .02em; }
.vazio { text-align: center; color: var(--pergaminho-3); margin: 40px auto; font-family: var(--serifa); }

.msg {
  position: relative; max-width: 680px; padding: 8px 12px; border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(43, 35, 27, .94), rgba(33, 27, 21, .94));
  border: 1px solid rgba(0, 0, 0, .45); border-left: 3px solid var(--ferro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 2px 6px rgba(0, 0, 0, .25);
}
.msg.pagante { border-left-color: var(--cor); }
.msg.minha { align-self: flex-end; background: linear-gradient(180deg, rgba(58, 40, 24, .96), rgba(45, 31, 19, .96)); }
.msg.imperial {
  border-color: rgba(212, 174, 74, .45); border-left-color: var(--ouro);
  box-shadow: 0 0 0 1px rgba(212, 174, 74, .15), 0 0 18px rgba(212, 174, 74, .12);
}
.msg.pendente { opacity: .6; }
.msg.falhou { border-color: var(--perigo); }
.msg.apagada { opacity: .6; }
.texto-apagado { margin: 0; font-style: italic; color: var(--pergaminho-3); font-size: 13px; }
.msg-cab { display: flex; align-items: baseline; gap: 6px; position: relative; }
.autor { color: var(--cor); font-weight: 700; font-size: 15px; padding: 0; text-align: left; overflow-wrap: anywhere; }
.msg time { margin-left: auto; font-size: 11px; color: var(--pergaminho-3); white-space: nowrap; }
.msg-mais { padding: 0 6px; margin-right: -6px; color: var(--pergaminho-3); font-size: 18px; line-height: 1; border-radius: 6px; }
.msg-mais:hover, .msg-mais[aria-expanded="true"] { background: rgba(0, 0, 0, .3); color: var(--pergaminho); }
.selo-anuncio { font-size: 12px; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12px; margin-top: 1px; }
.titulo-nivel { font-family: var(--serifa); letter-spacing: .03em; color: var(--pergaminho-2); white-space: nowrap; }
.insignias { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.insignia {
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(212, 174, 74, .22); border-radius: 6px;
  padding: 0 5px; font-size: 11.5px; line-height: 1.55; white-space: nowrap;
}
.texto { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.original { margin: 3px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--pergaminho-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.rotulo-original { font-style: italic; }
.link-externo { color: var(--ouro-2); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; cursor: pointer; }
.miniatura { display: block; margin-top: 6px; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(212, 174, 74, .3); max-width: 100%; }
.miniatura img { display: block; max-width: min(240px, 100%); max-height: 240px; min-width: 60px; min-height: 60px; object-fit: cover; background: var(--pedra-3); }
.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; }
.reacoes:empty { display: none; }
.reacao { font-size: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(212, 174, 74, .2); border-radius: 999px; padding: 1px 8px; }
.reacao.minha { border-color: var(--ouro); background: rgba(212, 174, 74, .16); }
.reacao:disabled { cursor: default; opacity: .9; }
.menu-msg {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 6; min-width: 210px; display: flex; flex-direction: column; padding: 4px;
  background: var(--madeira-2); border: 1px solid var(--ouro-3); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.menu-msg button { text-align: left; padding: 9px 12px; border-radius: 6px; }
.menu-reacoes { display: flex; justify-content: space-between; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(212, 174, 74, .2); }
.menu-msg .menu-reacoes button { font-size: 20px; padding: 4px 6px; text-align: center; }
.menu-msg button:hover, .menu-msg button:focus-visible { background: rgba(212, 174, 74, .12); }
.falha { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--perigo); }

/* rodapé do chat */
.rodape-chat {
  position: relative; padding: 10px 16px; border-top: 1px solid rgba(212, 174, 74, .2);
  background: linear-gradient(180deg, var(--madeira-1), #1f150d);
}
.pilula-novas {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--tinta);
  background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); border: 1px solid #7a5c17; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.escrever { display: flex; gap: 8px; align-items: center; }
.escrever #texto { flex: 1; min-width: 0; border-radius: 999px; padding: 10px 16px; }
.foto { font-size: 20px; }
.enviar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 18px; color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, var(--ouro-2), var(--ouro) 60%, var(--ouro-3)); box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.aviso-rodape { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--pergaminho-2); }
.aviso-rodape p { margin: 0; }
.convite { max-width: 520px; }
.contador { font-variant-numeric: tabular-nums; color: var(--ouro-2); font-weight: 600; }
.status-anuncio { color: var(--ouro-2); }
.acoes-rodape { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }

/* barra inferior */
.barra {
  display: flex; justify-content: space-around; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--madeira-2), var(--madeira-1)); border-top: 2px solid var(--ouro-3);
}
.barra button { flex: 1; max-width: 200px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; border-radius: 10px; }
.barra button:hover { background: rgba(0, 0, 0, .25); }
.barra .ic { font-size: 21px; line-height: 1.2; }
.barra span:last-child { font-size: 11px; line-height: 1.2; color: var(--pergaminho-2); text-align: center; }

/* ---------- modal ---------- */
.fundo-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(8, 6, 4, .74); }
.modal {
  position: relative; width: min(560px, 100%); max-height: min(88dvh, 900px); overflow-y: auto; padding: 22px 18px 18px;
  background: linear-gradient(180deg, #2c2218, #1f1811); border: 1px solid var(--ouro-3); border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 0 5px rgba(212, 174, 74, .25), 0 24px 60px rgba(0, 0, 0, .6);
}
.modal h2 { font-family: var(--serifa); color: var(--ouro-2); font-size: 20px; margin: 0 36px 8px 0; }
.modal h3 { font-family: var(--serifa); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); margin: 18px 0 6px; }
.fechar { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; color: var(--pergaminho-3); }
.fechar:hover { background: rgba(0, 0, 0, .3); color: var(--pergaminho); }
.fundo-modal.so-imagem .modal { width: auto; max-width: 100%; padding: 8px; background: #000; }
.imagem-grande { display: block; max-width: 100%; max-height: 80dvh; margin: 0 auto; border-radius: 8px; }
.sub { color: var(--pergaminho-2); font-size: 14px; margin: 4px 0 12px; }
.sutil { color: var(--pergaminho-3); font-size: 13px; }
.acoes-modal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.acoes-modal.coluna { flex-direction: column; align-items: stretch; }
.url-destino { word-break: break-all; background: rgba(0, 0, 0, .3); padding: 8px 10px; border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.regras { padding-left: 20px; }
.regras li { margin: 6px 0; }
.caixa-aceite { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-top: 12px; }
.form-denuncia fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.form-denuncia legend { margin-bottom: 6px; color: var(--pergaminho-2); }
.opcao { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .22); cursor: pointer; }
.rotulo-campo { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--pergaminho-2); }
.citacao {
  margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--ferro-2); background: rgba(0, 0, 0, .25);
  color: var(--pergaminho-2); font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere;
}
.username-novo { font-family: var(--serifa); font-size: 26px; color: var(--ouro-2); text-align: center; margin: 8px 0; letter-spacing: .03em; overflow-wrap: anywhere; }

/* perfis */
.nome-perfil { color: var(--cor); }
.status-perfil { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pergaminho-2); margin: 0 0 6px; }
.status-perfil .ponto-status { margin-top: 0; }
.dados-perfil { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; align-items: baseline; }
.dados-perfil dt { color: var(--pergaminho-3); font-size: 13px; }
.dados-perfil dd { margin: 0; overflow-wrap: anywhere; }
.cartao-eu { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border-left: 3px solid var(--cor); }
.nome-perfil-eu { display: block; color: var(--cor); font-size: 18px; overflow-wrap: anywhere; }
.icone-grande { font-size: 30px; line-height: 1; flex: none; }
.conquistas-mini { display: flex; flex-wrap: wrap; gap: 6px; font-size: 22px; }
.lista-bloqueados { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lista-bloqueados li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .22); }

/* loja */
.lista-loja { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.cartao-nivel {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(212, 174, 74, .22); border-top: 3px solid var(--cor);
}
.cartao-nivel.atual { box-shadow: inset 0 0 0 1px var(--cor); }
.cartao-nivel.imperial { background: linear-gradient(180deg, rgba(212, 174, 74, .12), rgba(0, 0, 0, .25)); }
.cartao-topo { display: flex; gap: 10px; align-items: center; }
.nome-nivel { display: block; color: var(--cor); font-family: var(--serifa); font-size: 17px; }
.cartao-topo .sutil { font-size: 12px; }
.beneficios { margin: 0; padding-left: 18px; font-size: 13px; color: var(--pergaminho-2); display: grid; gap: 2px; align-content: start; flex: 1; }
.beneficios li.sutil { list-style: none; margin-left: -18px; font-style: italic; font-size: 12.5px; }
.selo-atual { margin: 0; font-size: 12px; font-weight: 700; color: var(--cor); }
.tem { margin: 0; font-size: 13px; color: var(--ok); }
.cartao-nivel .botao { width: 100%; }
.aviso-dev { color: var(--cobre); font-size: 13px; }
.confirmando { color: var(--ouro-2); font-weight: 600; }

/* Hall e conquistas */
.lista-hall, .lista-conquistas { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.linha-hall { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.linha-hall.imperial { box-shadow: inset 0 0 0 1px rgba(212, 174, 74, .35); }
.pos { flex: none; width: 36px; text-align: right; font-family: var(--serifa); color: var(--ouro); }
#hall-mais { margin-top: 10px; width: 100%; }
.linha-hall .pessoa-info { flex: 1; }
.prestigio-hall { flex: none; font-family: var(--serifa); color: var(--ouro-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.abas-hall {
  display: flex; gap: 4px; margin: 6px 0 4px; padding: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(212, 174, 74, .2);
}
.aba-hall { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--pergaminho-2); }
.aba-hall:hover { color: var(--pergaminho); }
.aba-hall.ativa {
  color: var(--ouro-2); background: linear-gradient(180deg, rgba(240, 215, 138, .2), rgba(212, 174, 74, .1));
  box-shadow: inset 0 0 0 1px rgba(212, 174, 74, .45);
}

/* ---------- grupos de dono (8g) ---------- */
#bt-grupo { filter: none; opacity: 1; }
.regras-grupo {
  margin: 0; padding: 6px 16px; border-bottom: 1px solid rgba(212, 174, 74, .18);
  background: linear-gradient(180deg, rgba(236, 223, 194, .07), rgba(0, 0, 0, .18));
}
.regras-grupo summary { cursor: pointer; font-family: var(--serifa); font-size: 13px; letter-spacing: .04em; color: var(--ouro-2); padding: 2px 0; }
.regras-grupo-texto {
  margin: 4px 0 4px; max-height: 26dvh; overflow-y: auto; font-size: 13.5px; color: var(--pergaminho-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lista-grupos, .lista-membros { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.cartao-grupo {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; min-width: 0;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(212, 174, 74, .22);
}
.cartao-grupo.membro { box-shadow: inset 3px 0 var(--ouro); }
.grupo-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.nome-grupo { font-family: var(--serifa); color: var(--ouro-2); font-size: 16px; overflow-wrap: anywhere; min-width: 0; }
.selo-grupo { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(212, 174, 74, .3); background: rgba(0, 0, 0, .3); color: var(--pergaminho-2); white-space: nowrap; }
.selo-grupo.ouro { color: var(--tinta); background: var(--ouro); border-color: var(--ouro-3); }
.grupo-dono { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; min-width: 0; }
.nome-dono { color: var(--cor); font-weight: 700; overflow-wrap: anywhere; }
.grupo-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--pergaminho-3); }
.grupo-meta .ponto-status { margin-top: 0; vertical-align: middle; }
.acoes-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.linha-membro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.linha-membro .pessoa { flex: 1 1 160px; min-width: 0; }
.botoes-membro { display: flex; gap: 4px; padding: 0 6px 6px; margin-left: auto; }
.marca-dono { color: var(--ouro-2); font-family: var(--serifa); }
.form-grupo { display: grid; gap: 2px; }
.form-grupo input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.campo-select {
  font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px; width: 100%;
  background: var(--pergaminho); color: var(--tinta); border: 1px solid var(--ouro-3);
}
.campo-acesso { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.campo-acesso legend { margin-bottom: 6px; color: var(--pergaminho-2); font-size: 13px; }

/* prestígio no perfil e na confirmação */
.prestigio-perfil { margin: 2px 0 8px; font-family: var(--serifa); color: var(--ouro-2); letter-spacing: .02em; }
.alvo-prestigio {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px;
  background: rgba(0, 0, 0, .25); border-left: 3px solid var(--cor);
}
.nome-alvo { display: block; color: var(--cor); font-size: 18px; overflow-wrap: anywhere; }
.acoes-modal.entre { justify-content: space-between; align-items: center; }
.lista-conquistas li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); opacity: .5; }
.lista-conquistas li.tem { opacity: 1; box-shadow: inset 0 0 0 1px rgba(212, 174, 74, .3); }
.lista-conquistas small { display: block; color: var(--pergaminho-3); }

/* avisos flutuantes */
.toasts {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(440px, calc(100% - 32px)); display: grid; gap: 6px; pointer-events: none;
}
.toast {
  padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, #3a2a1b, #2a1e13);
  border: 1px solid rgba(212, 174, 74, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transition: opacity .3s, transform .3s;
}
.toast.erro { border-color: var(--perigo); }
.toast.ouro { border-color: var(--ouro); color: var(--ouro-2); }
.toast.saindo { opacity: 0; transform: translateY(-6px); }

/* anúncio de teste (só dev, plataforma.js) */
.anuncio-dev { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .88); }
.anuncio-dev-caixa {
  width: min(380px, 100%); text-align: center; padding: 24px 18px; border-radius: 14px;
  background: linear-gradient(180deg, #2c2218, #1f1811); border: 1px dashed var(--cobre);
}
.anuncio-dev-caixa h2 { font-family: var(--serifa); color: var(--ouro-2); margin: 0 0 8px; }
.anuncio-dev-contagem { font-size: 18px; color: var(--ouro-2); font-variant-numeric: tabular-nums; }

/* ---------- brilho do Imperador: varredura lenta de luz, sem piscar ---------- */
.brilho {
  background: linear-gradient(100deg, var(--cor, #ffe9a8) 0%, var(--cor, #ffe9a8) 38%, #fff8de 50%, var(--cor, #ffe9a8) 62%, var(--ouro) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 5px rgba(240, 215, 138, .45));
  animation: brilho-real 8s ease-in-out infinite;
}
@keyframes brilho-real { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ---------- faíscas do prestígio (8e): pó de estrelas abaixo do nome, por faixa 1..5 ----------
   Sem número e sem piscar: duas camadas que cintilam devagar, fora de fase; nas faixas 4 e 5 elas ainda derivam
   bem devagar, em sentidos opostos. O desenho é um ladrilho SVG de 26x7 (três estrelinhas e um ponto). */
/* inline-block: num span inline que quebra de linha, o bloco de referência da .faisca (absolute) vai do começo do
   1º pedaço ao fim do último e encolhe para ~4px (faixa do Imperador em 360px). max-width deixa nome comprido
   quebrar dentro da própria caixa (nowrap transbordaria a faixa com 20 letras largas). */
.nome-faisca { position: relative; display: inline-block; max-width: 100%; }
/* na lista de pessoas o nome não quebra (nowrap + reticências); inline-block ali mataria o "…" */
.pessoa-nome .nome-faisca { display: inline; }
.tem-faisca { padding-bottom: 5px; }
.faisca {
  position: absolute; left: -2px; right: -2px; top: calc(100% - 1px); height: 7px; pointer-events: none;
  --fa-passo: 26px; --fa-min: .3; --fa-max: .5;
}
.faisca::before, .faisca::after {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 7'%3E%3Cpath fill='%23fff6d2' d='M3.5 .5L4.4 2.6L6.5 3.5L4.4 4.4L3.5 6.5L2.6 4.4L.5 3.5L2.6 2.6Z'/%3E%3Cpath fill='%23f0d78a' d='M12 2.9L12.5 4L13.6 4.5L12.5 5L12 6.1L11.5 5L10.4 4.5L11.5 4Z'/%3E%3Cpath fill='%23ffe9a8' d='M19.5 .4L20.2 1.9L21.7 2.6L20.2 3.3L19.5 4.8L18.8 3.3L17.3 2.6L18.8 1.9Z'/%3E%3Ccircle fill='%23fff' cx='24.5' cy='5.2' r='.6'/%3E%3C/svg%3E") 0 50% / var(--fa-passo) 7px repeat-x;
  opacity: var(--fa-max);
  animation: faisca-cintila 5s ease-in-out infinite;
}
.faisca::after { display: none; background-position: calc(var(--fa-passo) / 2) 50%; animation-delay: -2.5s; }
.faisca[data-faisca="1"] { --fa-passo: 40px; --fa-min: .22; --fa-max: .42; }
.faisca[data-faisca="2"] { --fa-passo: 32px; --fa-min: .32; --fa-max: .58; }
.faisca[data-faisca="3"] { --fa-min: .42; --fa-max: .72; filter: drop-shadow(0 0 1.5px rgba(240, 215, 138, .55)); }
.faisca[data-faisca="4"] { --fa-min: .52; --fa-max: .85; filter: drop-shadow(0 0 2px rgba(240, 215, 138, .7)); }
.faisca[data-faisca="5"] { --fa-min: .62; --fa-max: 1; height: 8px; filter: drop-shadow(0 0 3px rgba(255, 226, 140, .85)); }
.faisca[data-faisca="3"]::after, .faisca[data-faisca="4"]::after, .faisca[data-faisca="5"]::after { display: block; }
.faisca[data-faisca="4"]::before, .faisca[data-faisca="5"]::before {
  animation: faisca-cintila 5s ease-in-out infinite, faisca-deriva 18s linear infinite;
}
.faisca[data-faisca="4"]::after, .faisca[data-faisca="5"]::after {
  animation: faisca-cintila 5s ease-in-out -2.5s infinite, faisca-deriva-2 24s linear infinite reverse;
}
@keyframes faisca-cintila { 0%, 100% { opacity: var(--fa-min); } 50% { opacity: var(--fa-max); } }
@keyframes faisca-deriva { from { background-position: 0 50%; } to { background-position: 26px 50%; } }
@keyframes faisca-deriva-2 { from { background-position: 13px 50%; } to { background-position: 39px 50%; } }

/* ---------- faixa de entrada de Rei e Imperador (8c) ---------- */
.area-faixa {
  position: absolute; top: 8px; left: 12px; right: 12px; z-index: 7;
  display: flex; justify-content: center; pointer-events: none;
}
.faixa-nobre {
  pointer-events: auto; position: relative; overflow: hidden; width: min(560px, 100%);
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; text-align: left; border-radius: 12px;
  background:
    linear-gradient(90deg, transparent, rgba(212, 174, 74, .1) 50%, transparent),
    linear-gradient(180deg, rgba(70, 49, 28, .97), rgba(36, 25, 15, .97));
  border: 1px solid var(--ouro);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 0 4px rgba(212, 174, 74, .22), 0 10px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(212, 174, 74, .16);
  animation: faixa-entra .32s ease-out both;
}
.faixa-nobre:hover { border-color: var(--ouro-2); }
.faixa-nobre.saindo { animation: faixa-sai .26s ease-in both; }
/* o Imperador ganha uma única passada de luz ao entrar (nada que repita ou pisque) */
.faixa-nobre.imperial { border-color: var(--ouro-2); }
.faixa-nobre.imperial::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 190, .16) 50%, transparent 70%);
  animation: faixa-varre 1.8s ease-in-out .3s both;
}
.faixa-icone { font-size: 28px; line-height: 1; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.faixa-texto { min-width: 0; display: block; }
.faixa-frase { display: block; font-family: var(--serifa); font-size: 15px; line-height: 1.6; letter-spacing: .02em; color: var(--pergaminho); overflow-wrap: anywhere; }
.faixa-nome { color: var(--cor); }
.faixa-dica { display: block; margin-top: 1px; font-size: 12px; color: var(--ouro-2); opacity: .85; }
/* o tempo que falta, num fio de ouro que encolhe (pausa com o mouse ou o foco em cima) */
.faixa-tempo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: linear-gradient(90deg, var(--ouro-3), var(--ouro-2), var(--ouro-3));
  animation: faixa-tempo var(--dur, 5s) linear both;
}
.faixa-nobre.pausada .faixa-tempo { animation-play-state: paused; }
@keyframes faixa-entra { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes faixa-sai { to { opacity: 0; transform: translateY(-6px); } }
@keyframes faixa-varre { to { transform: translateX(100%); } }
@keyframes faixa-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .brilho { animation: none; background-position: 50% 0; }
  .painel, .toast { transition: none; }
  .caixa-idade.chamando { animation: none; }
  .faisca::before, .faisca::after { animation: none !important; opacity: var(--fa-max); }
  .faixa-nobre, .faixa-nobre.saindo { animation: none; }
  .faixa-nobre.saindo { opacity: 0; }
  .faixa-nobre.imperial::after, .faixa-tempo { display: none; }
}

/* ---------- site: a Corte no navegador (8d) ---------- */
.site { height: 100dvh; overflow-y: auto; padding: 0 16px 28px; }
.site-pagina { width: min(760px, 100%); margin: 0 auto; display: grid; gap: 16px; }
.site-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0;
  border-bottom: 1px solid rgba(212, 174, 74, .22);
}
.site-linguas .idioma { padding: 6px 10px; }
@media (max-width: 520px) { .site-linguas .idioma span:last-child { display: none; } .site-linguas .idioma { padding: 6px 8px; } }
.site-heroi { width: 100%; box-sizing: border-box; justify-self: center; max-width: 560px; }
.site-sobre { color: var(--pergaminho); margin: 10px 0 6px; }
.site-pontos { text-align: left; margin: 8px 0 14px; padding-left: 20px; color: var(--pergaminho-2); font-size: 14px; display: grid; gap: 4px; }
.site-bloco {
  padding: 18px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(44, 34, 24, .96), rgba(28, 21, 14, .97));
  border: 1px solid rgba(212, 174, 74, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); min-width: 0;
}
.site-bloco h2 { font-family: var(--serifa); color: var(--ouro-2); font-size: 20px; margin: 0 0 8px; }
.site-pagamento { border-color: var(--ouro); }
.site-passos { margin: 6px 0 14px; padding-left: 22px; color: var(--pergaminho-2); display: grid; gap: 4px; font-size: 14px; }
.campo-codigo { font: 700 22px/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; text-align: center; }
.aviso-site { color: var(--pergaminho-2); background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 10px 12px; margin: 0; }
.site-ranking-lista { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 4px; }
.site-ranking-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.site-ranking-lista .pos { width: 26px; text-align: center; font-family: var(--serifa); color: var(--ouro); flex: none; }
.site-ranking-nome { flex: 1; min-width: 0; display: grid; }
.site-ranking-nome strong { color: var(--cor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-ranking-nome small { color: var(--pergaminho-3); font-size: 12px; }
.site-ranking-prestigio { color: var(--ouro-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-rodape { text-align: center; font-size: 12.5px; color: var(--pergaminho-3); }
.site-rodape p { margin: 4px 0; }
.site-gis { margin: 8px 0; }
/* código de 6 dígitos no app (Conectar navegador) */
.codigo-web {
  font: 700 clamp(34px, 11vw, 46px)/1.1 ui-monospace, Consolas, monospace; letter-spacing: .18em; text-align: center;
  color: var(--ouro-2); margin: 10px 0 4px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .3);
  border: 1px dashed var(--ouro-3); user-select: all;
}
.contador-codigo { text-align: center; color: var(--pergaminho-2); font-variant-numeric: tabular-nums; margin: 0 0 8px; }
.lista-navegadores li > span { display: grid; min-width: 0; }
.lista-navegadores small { font-size: 11.5px; }
.rotulo-lista { margin: 10px 0 4px; font-size: 13px; color: var(--pergaminho-2); }

/* ---------- telas largas: gavetas viram colunas ---------- */
@media (min-width: 860px) {
  .so-celular { display: none !important; }
  .veu { display: none !important; }
  .corpo { grid-template-columns: 240px minmax(0, 1fr) 260px; }
  .painel { position: static; width: auto; transform: none !important; box-shadow: none; transition: none; z-index: auto; }
  .esquerda { grid-column: 1; }
  .conversa { grid-column: 2; }
  .direita { grid-column: 3; }
  .topo { padding-left: 16px; padding-right: 16px; }
  .logo { font-size: 20px; }
  .modal { padding: 24px 24px 20px; }
}

/* fino e discreto */
* { scrollbar-width: thin; scrollbar-color: rgba(212, 174, 74, .3) transparent; }