/* v0.8.0 "Conquistas e Fliperama": painel do nome no recorde (telas/fliperama.js), coluna Nome e abas da tela de
   Recordes (telas/recordes.js) e a linha do save nas Configurações (telas/config.js). Desenho: docs/v080/FLIPERAMA.md §1.7 */

/* ---------- painel do nome (por cima da tela do fim) ---------- */
.painel-nome {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1.6vh;
  width: max-content; max-width: min(1100px, 94vw); padding: 3.2vh 3.2vw;   /* v1.0.0 (FLIP-1080): era 920 px; as 10 casas (64 px) passavam do recuo em 1080p */
  background: var(--escuro-2); border: 4px solid var(--roxo-escuro); box-shadow: 0 10px 0 #120d16, 0 0 0 9999px rgba(10, 6, 14, 0.55);
}
.painel-nome:focus { outline: none; }
.caixa-fim[inert] { filter: saturate(0.6); }
.painel-nome-titulo {
  margin: 0; max-width: 30em; text-align: center; font-size: clamp(20px, 3.4vh, 40px); line-height: 1.2;
  color: var(--laranja); text-shadow: 3px 3px 0 var(--laranja-escuro);   /* sombra dura de pixel, sem desfoque */
}
.painel-nome-posicao { margin: 0; text-align: center; font-size: clamp(16px, 2.4vh, 28px); color: var(--quimono); }

.nome-roda { position: relative; padding: 0.9em 0 0.7em; }
.nome-casas { display: flex; gap: 0.18em; font-size: clamp(30px, 6vh, 64px); }
.nome-casa {
  position: relative; display: block; width: 1.25em; height: 1.3em; line-height: 1.3em; text-align: center;
  color: var(--texto); border-bottom: 4px solid var(--roxo); cursor: text;
}
.nome-casa.atual { border-bottom-color: var(--laranja); animation: piscar-casa 0.5s steps(1) infinite; }
@keyframes piscar-casa { 50% { border-bottom-color: transparent; } }   /* pisca seco de fliperama, sem fade */
/* setas ▲ ▼ da roda: só no modo fliperama, em cima e embaixo da casa atual (a Cordelina não tem esses sinais) */
.painel-nome.modo-fliperama .nome-casa.atual::before,
.painel-nome.modo-fliperama .nome-casa.atual::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 0.22em solid transparent; border-right: 0.22em solid transparent;
}
.painel-nome.modo-fliperama .nome-casa.atual::before { top: -0.5em; border-bottom: 0.28em solid var(--laranja); }
.painel-nome.modo-fliperama .nome-casa.atual::after { bottom: -0.62em; border-top: 0.28em solid var(--laranja); }
.nome-casa.mudou { transform: translateY(-2px); }
.nome-casa.treme { animation: treme-casa 0.15s steps(3) 1; }
@keyframes treme-casa { 0% { left: -4px; } 33% { left: 4px; } 66% { left: -2px; } 100% { left: 0; } }
/* o <input> de verdade fica escondido atrás das casas: é ele que resolve a tecla morta, o Ñ e o colar */
.nome-digitar {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; pointer-events: none; user-select: text;
}

.painel-nome-dica {
  margin: 0; max-width: 40em; text-align: center; font-size: clamp(14px, 2vh, 22px); line-height: 1.35; color: var(--quimono);
}
.modo-selo { display: inline-block; padding: 0.05em 0.5em; margin-right: 0.3em; font-weight: 700; color: var(--escuro); background: var(--roxo); }
.painel-nome.modo-teclado .modo-selo { background: var(--laranja); }
.painel-nome-aviso { margin: 0; min-height: 1.3em; max-width: 40em; text-align: center; font-size: clamp(14px, 2vh, 22px); color: #ffb3a0; }

@media (prefers-reduced-motion: reduce) {
  .nome-casa.atual { animation: none; border-bottom-width: 7px; }
  .nome-casa.mudou { transform: none; }
  .nome-casa.treme { animation: none; }
}

/* ---------- Recordes: coluna Nome, linha nova, abas e o Exportar ---------- */
.tabela-recordes .rec-nome { font-weight: 700; color: var(--texto); white-space: nowrap; text-align: left; }
.tabela-recordes .rec-nome-vazio { font-weight: 400; color: rgba(206, 203, 211, 0.7); cursor: help; }   /* cor com alfa (opacity apagaria o fundo da linha nova) */
.tabela-recordes tr.novo td { animation: piscar-linha 0.5s steps(1) 6; }
@keyframes piscar-linha { 0% { background: rgba(227, 142, 38, 0.45); } 50% { background: transparent; } }
.tabela-recordes tr.novo .rec-pos { color: var(--laranja); }
@media (prefers-reduced-motion: reduce) {
  .tabela-recordes tr.novo td { animation: none; background: rgba(227, 142, 38, 0.25); }
}

/* classes próprias (rec-aba): .aba e .aba-painel já são das abas do Saiba Mais */
.abas-recordes { display: flex; gap: 0.8vw; align-self: center; }
.rec-aba {
  font-family: var(--fonte); font-size: clamp(16px, 2.3vh, 27px); color: var(--texto); cursor: pointer;
  padding: 0.3em 1em; background: var(--escuro); border: 3px solid #5c4a70; border-radius: 0; box-shadow: 0 4px 0 #120d16;
}
.rec-aba.escolhida { background: var(--roxo-escuro); border-color: var(--laranja); color: #ffffff; }
.rec-aba:focus { outline: none; border-color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 0 #120d16, 0 0 0 4px var(--quimono); }
.aba-extra:not(:empty) { margin-left: 0.5em; font-size: 0.8em; color: var(--laranja); }
/* v1.0.0 (auditoria INT-14): flex none: o painel não encolhe abaixo da tabela (com 10 recordes, os botões Voltar e
   Exportar subiam por cima da 10ª linha). No celular a caixa é grade (css/toque.css) e o painel rola sozinho. */
.rec-aba-painel { display: flex; flex-direction: column; align-items: center; gap: 2vh; min-height: 0; max-width: 100%; flex: none; }
/* ...e as linhas ficam um pouco mais baixas, pra caber tudo sem a caixa rolar (o celular tem o próprio padding) */
.caixa-recordes .tabela-recordes td { padding-top: 0.2em; padding-bottom: 0.2em; }
.caixa-recordes { overflow: auto; }
.recordes-exportado { max-width: 40em; text-align: center; }

/* ---------- Configurações: linha do save ---------- */
.config-save-status { color: #ffe7b8; opacity: 1; }

/* ---------- Início: o nome no top 3 ("1. MARIO 12:34 Venceu!") ---------- */
.top-linha { grid-template-columns: 1.6em 1.4em auto auto 1fr; }
.top-nome { font-weight: 700; color: var(--texto); white-space: nowrap; }
.top-nome-vazio { font-weight: 400; color: rgba(206, 203, 211, 0.7); }