/* ═══════════════════════════════════════════════════════════
   ASAF DAMAS — assets/base.css
   Painel do jogador, páginas de acesso e administração.
   Três ambientes: madeira, savana e noite.
   Desenho pensado para ecrãs a partir de 4 polegadas (320 px).
   ═══════════════════════════════════════════════════════════ */

/* ── Ambiente padrão: Madeira ───────────────────────────── */
:root,
[data-tema="madeira"] {
  --papel:      #fbf6ec;
  --papel-alt:  #f3e9d7;
  --tinta:      #2f2317;
  --tinta-fraca:#6d5b45;
  --risco:      #d9cbb2;
  --realce:     #8b4513;
  --realce-alt: #5c2a00;
  --dourado:    #b07d2a;
  --verde:      #4a6b3a;
  --vermelho:   #a33227;
  --topo:       #f6efe1;
}

[data-tema="savana"] {
  --papel:      #fdfaf3;
  --papel-alt:  #f4ecdc;
  --tinta:      #2b2a20;
  --tinta-fraca:#6a6552;
  --risco:      #ddd3ba;
  --realce:     #a5642a;
  --realce-alt: #7a4416;
  --dourado:    #c08a1e;
  --verde:      #56693a;
  --vermelho:   #9c3b26;
  --topo:       #f7f0e0;
}

[data-tema="noite"] {
  --papel:      #191410;
  --papel-alt:  #221a13;
  --tinta:      #ece0cc;
  --tinta-fraca:#a2917a;
  --risco:      #3a2d20;
  --realce:     #d9a04a;
  --realce-alt: #b57c2a;
  --dourado:    #e0b25c;
  --verde:      #7fa25f;
  --vermelho:   #d4705f;
  --topo:       #1f1811;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .6em;
  color: var(--tinta);
}
h1 { font-size: 1.55rem; letter-spacing: .3px; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

p { margin: 0 0 1em; }

a { color: var(--realce); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--realce); }

/* ── Estrutura ──────────────────────────────────────────── */
.envoltorio {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px 40px;
}
.estreito { max-width: 460px; }

.barra-topo {
  background: var(--topo);
  border-bottom: 2px solid var(--realce);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.barra-topo .envoltorio {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.marca {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: var(--tinta);
}
.marca:hover { border: 0; color: var(--realce); }
.marca span.coroa { color: var(--realce); font-size: 1.3rem; }

.barra-topo nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.barra-topo nav a,
.barra-topo nav button {
  font: inherit;
  font-size: .87rem;
  padding: 6px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  border-radius: 0;
}
.barra-topo nav a:hover,
.barra-topo nav a.activo,
.barra-topo nav button:hover {
  color: var(--realce);
  border-bottom-color: var(--realce);
}

.rodape-pagina {
  border-top: 1px solid var(--risco);
  margin-top: 34px;
  padding: 16px 0 26px;
  font-size: .82rem;
  color: var(--tinta-fraca);
  text-align: center;
}
.rodape-pagina a { color: var(--tinta-fraca); }

/* ── Secções (sem cartões flutuantes) ───────────────────── */
.seccao { margin: 26px 0; }
.seccao > h2 {
  border-bottom: 1px solid var(--risco);
  padding-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.seccao > h2 small {
  font-family: 'Lato', sans-serif;
  font-size: .74rem;
  font-weight: 400;
  color: var(--tinta-fraca);
  letter-spacing: 0;
}

.bloco {
  border: 1px solid var(--risco);
  border-left: 3px solid var(--realce);
  background: var(--papel-alt);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.bloco.discreto { border-left-color: var(--risco); }

.nota {
  font-size: .86rem;
  color: var(--tinta-fraca);
  border-left: 3px solid var(--dourado);
  padding: 8px 12px;
  background: var(--papel-alt);
  margin: 0 0 14px;
}

/* ── Mensagens ──────────────────────────────────────────── */
.aviso {
  padding: 10px 14px;
  margin: 0 0 16px;
  border-left: 4px solid var(--realce);
  background: var(--papel-alt);
  font-size: .92rem;
}
.aviso.erro   { border-left-color: var(--vermelho); }
.aviso.bom    { border-left-color: var(--verde); }
.aviso.atencao{ border-left-color: var(--dourado); }

/* ── Formulários ────────────────────────────────────────── */
.campo { margin: 0 0 14px; }
.campo label {
  display: block;
  font-size: .84rem;
  letter-spacing: .3px;
  color: var(--tinta-fraca);
  margin-bottom: 4px;
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo input[type=datetime-local],
.campo input[type=number],
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 9px 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--risco);
  border-bottom: 2px solid var(--tinta-fraca);
  border-radius: 2px;
  outline: none;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-bottom-color: var(--realce);
  background: var(--papel-alt);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo .ajuda { font-size: .78rem; color: var(--tinta-fraca); margin-top: 4px; }

.escolha-genero { display: flex; gap: 8px; flex-wrap: wrap; }
.escolha-genero label {
  flex: 1 1 90px;
  border: 1px solid var(--risco);
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
  font-size: .9rem;
  color: var(--tinta);
  background: var(--papel);
}
.escolha-genero input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-genero input:checked + span { font-weight: 700; }
.escolha-genero label:has(input:checked) {
  border-color: var(--realce);
  background: var(--papel-alt);
  box-shadow: inset 0 -3px 0 var(--realce);
}

.botao {
  font: inherit;
  font-size: .95rem;
  letter-spacing: .4px;
  padding: 10px 18px;
  border: 1px solid var(--realce-alt);
  background: var(--realce);
  color: #fff8ee;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: center;
  justify-content: center;
}
.botao:hover { background: var(--realce-alt); border-bottom: 0; color: #fff8ee; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.largo { width: 100%; }
.botao.secundario {
  background: transparent;
  color: var(--realce);
  border-color: var(--risco);
}
.botao.secundario:hover { background: var(--papel-alt); color: var(--realce-alt); }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); }
.botao.mini { padding: 5px 10px; font-size: .8rem; }

.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Código de validação ────────────────────────────────── */
.caixa-codigo {
  width: 100%;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.8rem;
  letter-spacing: 12px;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--risco);
  border-bottom: 3px solid var(--realce);
  background: var(--papel-alt);
  color: var(--tinta);
}
.conta-regressiva {
  text-align: center;
  font-size: 1.05rem;
  margin: 12px 0;
  color: var(--tinta-fraca);
}
.conta-regressiva strong { font-size: 1.5rem; color: var(--realce); }
.conta-regressiva.esgotado strong { color: var(--vermelho); }

/* ── Escolha de modo de jogo ────────────────────────────── */
.modos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .modos { grid-template-columns: repeat(3, 1fr); } }

.modo {
  border: 1px solid var(--risco);
  border-top: 3px solid var(--realce);
  background: var(--papel-alt);
  padding: 14px;
  display: block;
  color: var(--tinta);
}
.modo:hover { background: var(--papel); border-bottom: 1px solid var(--risco); }
.modo .icone { font-size: 1.7rem; display: block; margin-bottom: 6px; }
.modo strong { display: block; font-family: 'Cinzel', serif; margin-bottom: 3px; }
.modo p { font-size: .85rem; color: var(--tinta-fraca); margin: 0; }

/* ── Listas (amigos, jogos, notificações) ───────────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  border-bottom: 1px solid var(--risco);
  padding: 11px 2px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lista li:last-child { border-bottom: 0; }
.lista .principal { flex: 1 1 160px; min-width: 0; }
.lista .principal strong { display: block; }
.lista .principal small { color: var(--tinta-fraca); font-size: .8rem; }
.lista .accoes { display: flex; gap: 6px; flex-wrap: wrap; }

.sinal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.sinal .ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tinta-fraca);
  display: inline-block;
  flex: 0 0 auto;
}
.sinal.em-linha { color: var(--verde); font-weight: 700; }
.sinal.em-linha .ponto {
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(74,107,58,.55);
  animation: pulsar 2s infinite;
}
@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0 rgba(74,107,58,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(74,107,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,107,58,0); }
}

.etiqueta {
  font-size: .72rem;
  letter-spacing: .4px;
  padding: 2px 7px;
  border: 1px solid var(--risco);
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.etiqueta.vitoria { border-color: var(--verde); color: var(--verde); }
.etiqueta.derrota { border-color: var(--vermelho); color: var(--vermelho); }
.etiqueta.empate  { border-color: var(--dourado); color: var(--dourado); }

/* ── Números do painel ──────────────────────────────────── */
.numeros {
  display: grid;
  gap: 1px;
  background: var(--risco);
  border: 1px solid var(--risco);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numeros div {
  background: var(--papel-alt);
  padding: 12px 10px;
  text-align: center;
}
.numeros strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--realce);
  line-height: 1.1;
}
.numeros span { font-size: .76rem; color: var(--tinta-fraca); }

/* ── Tabelas ────────────────────────────────────────────── */
.tabela-envolve { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 520px;
}
table.dados th,
table.dados td {
  border-bottom: 1px solid var(--risco);
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}
table.dados th {
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  letter-spacing: .4px;
  border-bottom: 2px solid var(--realce);
  white-space: nowrap;
}
table.dados tbody tr:hover { background: var(--papel-alt); }

/* ── Selector de ambiente ───────────────────────────────── */
.ambientes { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ambientes { grid-template-columns: repeat(3, 1fr); } }
.ambientes label {
  border: 1px solid var(--risco);
  padding: 12px;
  cursor: pointer;
  display: block;
}
.ambientes label:has(input:checked) {
  border-color: var(--realce);
  box-shadow: inset 0 -3px 0 var(--realce);
  background: var(--papel-alt);
}
.ambientes input { margin-right: 6px; }
.ambientes strong { font-family: 'Cinzel', serif; }
.ambientes p { font-size: .8rem; color: var(--tinta-fraca); margin: 4px 0 8px; }
.amostra { display: flex; height: 22px; border: 1px solid var(--risco); }
.amostra i { flex: 1; }

/* ── Janelas ────────────────────────────────────────────── */
.janela {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 4, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 80;
}
.janela[hidden] { display: none; }
.janela-caixa {
  background: var(--papel);
  border: 1px solid var(--realce);
  border-top: 4px solid var(--realce);
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px;
}
.janela-caixa h2 { margin-top: 0; }
.fechar-janela {
  float: right;
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--tinta-fraca);
  line-height: 1;
}

/* ── Barra de cookies ───────────────────────────────────── */
.faixa-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--topo);
  border-top: 2px solid var(--realce);
  padding: 12px 14px;
  z-index: 70;
  font-size: .86rem;
}
.faixa-cookies[hidden] { display: none; }
.faixa-cookies .envoltorio {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.faixa-cookies p { margin: 0; flex: 1 1 240px; }

/* ── Texto legal ────────────────────────────────────────── */
.legal h3 { margin-top: 1.2em; font-size: .98rem; }
.legal p, .legal li { font-size: .9rem; }
.legal ul { padding-left: 20px; }

/* ── Notificações do painel ─────────────────────────────── */
.sino {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sino .conta {
  position: absolute;
  top: -2px; right: -4px;
  background: var(--vermelho);
  color: #fff;
  font-size: .64rem;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  padding: 0 3px;
}
.sino .conta[hidden] { display: none; }

/* ── Ecrãs muito pequenos (4 polegadas) ─────────────────── */
@media (max-width: 400px) {
  body { font-size: 15px; }
  h1 { font-size: 1.3rem; }
  .envoltorio { padding: 0 10px 30px; }
  .barra-topo nav a,
  .barra-topo nav button { padding: 5px 7px; font-size: .8rem; }
  .caixa-codigo { font-size: 1.4rem; letter-spacing: 8px; }
  .numeros strong { font-size: 1.3rem; }
  .botao { width: 100%; }
  .linha-botoes .botao { width: auto; flex: 1 1 120px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Impressão simples dos relatórios do administrador */
@media print {
  .barra-topo, .faixa-cookies, .linha-botoes, .rodape-pagina { display: none; }
  body { background: #fff; color: #000; }
}

/* ── Fotografia de perfil ───────────────────────────────── */
.foto-linha { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.foto-instrucoes { flex: 1 1 220px; min-width: 0; }

.foto-moldura {
  width: 104px;
  height: 130px;
  flex: 0 0 auto;
  border: 1px solid var(--risco);
  border-bottom: 3px solid var(--realce);
  background: var(--papel-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.foto-moldura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-iniciais {
  font-family: 'Cinzel', serif;
  font-size: 1.9rem;
  color: var(--tinta-fraca);
  letter-spacing: 1px;
}

.retrato {
  width: 38px;
  height: 47px;
  flex: 0 0 auto;
  border: 1px solid var(--risco);
  background: var(--papel-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato.vazio {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  color: var(--tinta-fraca);
}

.campo input[type=file] {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: 8px;
  border: 1px dashed var(--risco);
  background: var(--papel);
  color: var(--tinta);
}

@media (max-width: 400px) {
  .foto-moldura { width: 88px; height: 110px; }
  .retrato { width: 32px; height: 40px; }
}

/* ── Selector de idioma ─────────────────────────────────── */
.selector-idioma {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  border: 1px solid var(--risco);
}
.barra-topo nav .selector-idioma a.opcao-idioma {
  padding: 4px 8px;
  font-size: .74rem;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--tinta-fraca);
  border: 0;
  border-bottom: 2px solid transparent;
  line-height: 1.4;
}
.barra-topo nav .selector-idioma a.opcao-idioma:hover {
  color: var(--realce);
  background: var(--papel-alt);
  border-bottom-color: transparent;
}
.barra-topo nav .selector-idioma a.opcao-idioma.escolhida {
  color: var(--papel);
  background: var(--realce);
}
.selector-idioma a + a { border-left: 1px solid var(--risco); }

.escolha-idioma { display: flex; gap: 8px; flex-wrap: wrap; }
.escolha-idioma label {
  flex: 1 1 130px;
  border: 1px solid var(--risco);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--tinta);
  background: var(--papel);
}
.escolha-idioma input { margin-right: 7px; }
.escolha-idioma label:has(input:checked) {
  border-color: var(--realce);
  background: var(--papel-alt);
  box-shadow: inset 0 -3px 0 var(--realce);
}
.escolha-idioma strong { font-family: 'Cinzel', serif; }
.escolha-idioma small { display: block; color: var(--tinta-fraca); font-size: .78rem; margin-top: 2px; }

@media (max-width: 400px) {
  .barra-topo nav .selector-idioma a.opcao-idioma { padding: 3px 6px; font-size: .68rem; }
}

/* ── Paginação da lista de jogadores ────────────────────── */
.busca-paginacao {
  border-top: 1px solid var(--risco) !important;
  padding: 10px 2px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.busca-pag-info {
  flex: 1;
  text-align: center;
  font-size: .78rem;
  color: var(--tinta-fraca);
}

/* ── Indicador de e-mail válido/inválido ────────────────── */
#aviso-email {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 600;
  min-height: 1.2em;
  transition: color .2s;
}

/* ── Partidas a decorrer ────────────────────────────────── */
.partida-curso .principal { flex: 1 1 220px; }

.pc-duelo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.pc-lado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 2px;
  border: 1px solid transparent;
}
.pc-lado.e-a-vez {
  border-color: var(--realce);
  background: var(--papel-alt);
}
.pc-lado .retrato { width: 28px; height: 35px; }
.pc-nome { font-weight: 700; font-size: .9rem; }
.pc-versus { color: var(--tinta-fraca); font-size: .8rem; }

.sinal.a-jogar { color: var(--dourado); font-weight: 700; }
.sinal.a-jogar .ponto { background: var(--dourado); }

@media (max-width: 400px) {
  .pc-lado .retrato { width: 24px; height: 30px; }
  .pc-nome { font-size: .84rem; }
}

/* ═══════════════════════════════════════════════════════════
   CLARO E ESCURO
   O tema (madeira, savana, noite) escolhe a paleta; esta camada
   escurece-a quando a pessoa prefere trabalhar com pouca luz.
   ═══════════════════════════════════════════════════════════ */

[data-luz="escuro"][data-tema="madeira"],
[data-luz="escuro"]:not([data-tema]) {
  --papel:      #17120c;
  --papel-alt:  #201810;
  --tinta:      #ece0cc;
  --tinta-fraca:#a2917a;
  --risco:      #3a2d20;
  --realce:     #d9a04a;
  --realce-alt: #b57c2a;
  --dourado:    #e0b25c;
  --verde:      #7fa25f;
  --vermelho:   #d4705f;
  --topo:       #1d160f;
}

[data-luz="escuro"][data-tema="savana"] {
  --papel:      #191710;
  --papel-alt:  #221f16;
  --tinta:      #efe4cd;
  --tinta-fraca:#a99b7e;
  --risco:      #3b3527;
  --realce:     #d59a4e;
  --realce-alt: #b3762c;
  --dourado:    #dcae51;
  --verde:      #86a065;
  --vermelho:   #d1745c;
  --topo:       #1f1c13;
}

/* O tema Noite já é escuro; ao passar a claro ganha a paleta de papel */
[data-luz="claro"][data-tema="noite"] {
  --papel:      #faf6ee;
  --papel-alt:  #f1e8d8;
  --tinta:      #2c2419;
  --tinta-fraca:#6e6151;
  --risco:      #dbd0bb;
  --realce:     #9a6a20;
  --realce-alt: #7a5214;
  --dourado:    #b5862c;
  --verde:      #55703c;
  --vermelho:   #a8402e;
  --topo:       #f5eee0;
}

[data-luz="escuro"] .foto-moldura img,
[data-luz="escuro"] .retrato img { filter: brightness(.94); }

/* ── Botão de alternância ───────────────────────────────── */
.barra-topo nav .botao-luz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  margin-left: 4px;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--risco);
  color: var(--tinta-fraca);
  cursor: pointer;
  border-radius: 0;
}
.barra-topo nav .botao-luz:hover {
  color: var(--realce);
  border-color: var(--realce);
  background: var(--papel-alt);
}

/* Mostra-se o símbolo do que se obtém ao carregar, não o do estado actual */
.luz-sol { display: none; }
.luz-lua { display: inline; }
[data-luz="escuro"] .luz-sol { display: inline; }
[data-luz="escuro"] .luz-lua { display: none; }

@media (max-width: 400px) {
  .barra-topo nav .botao-luz { width: 26px; height: 24px; font-size: .85rem; }
}

/* ── Contacto no rodapé ─────────────────────────────────── */
.rodape-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: .8rem;
}
.rodape-contacto span[aria-hidden] { color: var(--risco); }

@media (max-width: 400px) {
  .rodape-contacto { gap: 4px; font-size: .76rem; }
  .rodape-contacto span[aria-hidden] { display: none; }
  .rodape-contacto > span { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════
   DESAFIO RECEBIDO
   Um convite tem segundos contados, por isso tem de saltar à
   vista de quem está a olhar para outro canto do painel.
   ═══════════════════════════════════════════════════════════ */

.convite-destaque {
  border: 2px solid var(--realce);
  border-left-width: 8px;
  background: var(--papel-alt);
  padding: 16px 18px;
  margin: 0 0 20px;
  animation: convite-chamar 1.4s ease-in-out 3;
}

@keyframes convite-chamar {
  0%, 100% { border-color: var(--realce); }
  50%      { border-color: var(--vermelho); }
}

.cd-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cd-retrato {
  width: 52px;
  height: 65px;
  flex: 0 0 auto;
  border: 1px solid var(--risco);
  background: var(--papel);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--tinta-fraca);
}
.cd-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cd-texto { flex: 1 1 180px; min-width: 0; }

.cd-nome {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--realce);
  word-break: break-word;
}
.cd-frase {
  display: block;
  font-size: 1rem;
  margin-top: 2px;
}

.cd-conta {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--tinta-fraca);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.cd-botoes {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cd-botoes .botao { flex: 1 1 140px; font-size: 1.05rem; padding: 12px 18px; }
.cd-sim { font-weight: 700; }

@media (max-width: 400px) {
  .convite-destaque { padding: 13px 14px; border-left-width: 6px; }
  .cd-retrato { width: 44px; height: 55px; }
  .cd-nome { font-size: 1.25rem; }
  .cd-frase { font-size: .92rem; }
  .cd-conta { font-size: 1.1rem; }
  .cd-botoes .botao { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .convite-destaque { animation: none; }
}