/* Focus: interface nas bordas, centro livre para a Shion. */

:root {
  /* Paleta padrão "Algodão-doce" (2026-10-14): pastel, sem degradê azul→roxo. O jogador troca o perfil em
     Configurações (engine/paletas.js). A leitura da história (.manuscrito) mantém a paleta antiga, redefinida lá. */
  --base: #1c1826;
  --base-clara: color-mix(in srgb, var(--base), white 12%);
  --vidro: color-mix(in srgb, var(--base) 55%, transparent);
  --vidro-forte: color-mix(in srgb, var(--base) 88%, transparent);
  --borda: rgba(255, 255, 255, 0.22);
  --texto: #f2f0f7;
  --texto-suave: color-mix(in srgb, var(--texto) 70%, transparent);
  --destaque: #f4b6cf;
  --ciano: #b6d4f4;
  --magenta: #f4b6cf;
  --lavanda: #c9c1e8;
  --margem: clamp(14px, 2vw, 32px);
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--fonte-jogo);
  color: var(--texto);
}

button {
  font: inherit;
  color: inherit;
}

#palco {
  position: relative;
  width: 100%;
  height: 100%;
}

#fundo, #fundo video, #fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O fundo é uma pilha própria: vídeo, filtros de luz e cortina preta ficam sempre abaixo da interface. */
#fundo {
  z-index: 0;
}

/* ---------- Espaços ---------- */

.slot {
  position: absolute;
  display: flex;
  gap: 12px;
}

#slot-sup-esq { top: var(--margem); left: var(--margem); }
#slot-sup-dir { top: var(--margem); right: var(--margem); align-items: flex-start; }
/* Coluna de botões da direita: começa abaixo do timer (e da pílula Timer | Cronômetro, que desce além da borda
   dele) e termina no rodapé, com o eixo 50px à direita do
   centro do timer (#pomodoro, 210px). O grupo de cima fica no alto e o de baixo embaixo; se a janela for
   baixa, os dois se aproximam até o espaço mínimo, sem nunca se sobrepor. */
#coluna-dir {
  position: absolute;
  top: calc(var(--margem) + 272px * var(--ui));
  bottom: calc(var(--margem) + 48px * var(--ui));
  right: calc(var(--margem) + 29px * var(--ui));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(24px * var(--ui));
  pointer-events: none;
}
#coluna-dir > .slot { position: static; flex-direction: column; align-items: center; gap: calc(12px * var(--ui)); }
/* A área vazia da coluna não pode bloquear clique na cena; só os botões recebem clique. */
#slot-dir-topo, #slot-dir-base { pointer-events: none; }
body:not(.ui-oculta) #slot-dir-topo > *, body:not(.ui-oculta) #slot-dir-base > * { pointer-events: auto; }
#slot-rodape-esq { bottom: var(--margem); left: var(--margem); }
/* Rodapé: numa janela estreita, os botões e o player quebram em duas linhas em vez de sair da tela. */
#slot-rodape-centro {
  bottom: var(--margem);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: max-content;
  max-width: calc(100% - 2 * var(--margem));
}

/* ---------- Layout compacto (janela menor que a tela cheia) ----------
   --ui é a escala da interface fixa (relógio, nível, timer, botões e player). Diminui em degraus conforme a
   janela fica menor; painéis, caixa de fala e leitura mantêm o tamanho (o jogador ajusta em Aparência). */
:root {
  --ui: 1;
  /* Largura máxima da caixa de fala: centrada, sem entrar na coluna de botões da direita
     (margem + 29px até a borda dos botões + 52px de botão + 14px de folga, tudo na escala da interface). */
  --fala-max: calc(100% - 2 * (var(--margem) + 95px * var(--ui)));
}
.slot > * { zoom: var(--ui); }

@media (max-width: 1100px), (max-height: 820px) {
  :root { --ui: 0.85; }
}

@media (max-width: 760px), (max-height: 660px) {
  :root { --ui: 0.72; }
  /* O rodapé passa a encostar na coluna da direita: a coluna termina acima dele. */
  #coluna-dir { bottom: calc(var(--margem) + 80px * var(--ui)); }
}

@media (max-width: 480px) {
  :root { --ui: 0.65; }
}

/* Rodapé em duas linhas: coluna e caixa de fala sobem acima dele. */
@media (max-width: 580px) {
  #coluna-dir, #slot-rodape-esq { bottom: calc(var(--margem) + 140px * var(--ui)); }
  #caixa-fala { bottom: calc(var(--margem) + 150px * var(--ui)); }
}

/* Janela muito baixa: os dois grupos de botões lado a lado, o de baixo à esquerda do de cima. */
@media (max-height: 560px) {
  #coluna-dir { flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: calc(12px * var(--ui)); }
}

.ui-elemento {
  transition: opacity 0.5s ease;
}

body.ui-oculta .ui-elemento,
body.interface-entrando .ui-elemento,
body.interface-saindo .ui-elemento {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Botão redondo ---------- */

.botao-redondo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--vidro);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.botao-redondo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--base-clara) 70%, transparent);
  transform: scale(1.05);
}

.botao-redondo:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Conversas com a Shion: pílula no canto inferior esquerdo, borda em degradê e brilho suave. */
.botao-redondo.botao-conversas {
  width: auto;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    linear-gradient(135deg, var(--ciano), var(--magenta)) border-box;
  box-shadow: 0 0 18px color-mix(in srgb, var(--magenta) 30%, transparent);
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: box-shadow 0.25s, transform 0.2s;
}

.botao-conversas .icone {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ciano) 35%, transparent), color-mix(in srgb, var(--magenta) 45%, transparent));
}

.botao-redondo.botao-conversas:hover:not(:disabled) {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    linear-gradient(135deg, var(--ciano), var(--magenta)) border-box;
  box-shadow: 0 0 26px color-mix(in srgb, var(--magenta) 50%, transparent);
  transform: translateY(-2px);
}

/* Janela estreita: só o ícone, para não encostar no rodapé central. */
@media (max-width: 1000px) {
  .botao-redondo.botao-conversas { width: 52px; padding: 0; justify-content: center; }
  .botao-conversas span { display: none; }
}

.botao-redondo.perigo {
  background: rgba(200, 69, 90, 0.8);
}

.icone {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Anéis (timer e nível) ---------- */

.anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.anel circle {
  fill: none;
  stroke-width: 3;
}

.anel-trilho {
  stroke: rgba(255, 255, 255, 0.15);
}

.anel-progresso {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}

/* ---------- Relógio ---------- */

#relogio {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: opacity 1.2s ease;
}

/* Parado (esmaecerAposSegundos): saudação, data e hora ficam a meia opacidade (relogio.js). */
#relogio.esmaecido { opacity: 0.5; }

.relogio-data {
  font-size: 0.95rem;
  opacity: 0.85;
}

.relogio-hora {
  font-size: 2.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ---------- Perfil: saudação acima da data e painel (engine/componentes/perfil.js) ---------- */

#perfil-saudacao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px -2px;
  padding: 2px 10px 2px 2px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  text-shadow: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

#perfil-saudacao:hover, #perfil-saudacao:focus-visible {
  background: color-mix(in srgb, var(--base) 45%, transparent);
  border-color: var(--borda);
}

.perfil-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lavanda) 50%, transparent);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--magenta) 35%, transparent), color-mix(in srgb, var(--base) 80%, transparent));
}

.perfil-avatar .icone { width: 15px; height: 15px; }

.perfil-lapis {
  display: grid;
  opacity: 0;
  transition: opacity 0.2s;
}

.perfil-lapis .icone { width: 14px; height: 14px; }

#perfil-saudacao:hover .perfil-lapis, #perfil-saudacao:focus-visible .perfil-lapis { opacity: 0.8; }

#painel-perfil .painel-corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perfil-rotulo {
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.perfil-nome-linha {
  display: flex;
  gap: 8px;
}

.perfil-nome-linha input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

.perfil-nome-linha input:focus {
  outline: none;
  border-color: var(--destaque);
}

.perfil-nota {
  margin: 0;
  min-height: 1em;
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.perfil-avatares {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  justify-content: space-between;
  gap: 12px 0;
}

.perfil-avatar-opcao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), color-mix(in srgb, var(--base) 60%, transparent));
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.perfil-avatar-opcao .icone { width: 20px; height: 20px; }

.perfil-avatar-opcao:hover { border-color: rgba(255, 255, 255, 0.4); }

.perfil-avatar-opcao.ativo {
  border-color: #fff;
  box-shadow: -2px -1px 0 var(--ciano), 2px 1px 0 var(--magenta), 0 0 14px color-mix(in srgb, var(--magenta) 35%, transparent);
}

.perfil-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.perfil-resumo-bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}

.perfil-resumo-bloco strong { font-size: 1.15rem; }

.perfil-resumo-bloco span {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

/* ---------- Nível ---------- */

#nivel {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--vidro-forte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#nivel .anel-progresso { stroke: url(#nivel-degrade); }

.nivel-rotulo {
  font-size: 0.7rem;
  opacity: 0.75;
}

.nivel-numero {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

/* Subiu de nível: o anel cresce de leve com um brilho que respira e um halo que se abre e some. */
#nivel.subiu {
  animation: subiu 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#nivel.subiu::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ciano);
  pointer-events: none;
  animation: subiu-halo 1.6s ease-out forwards;
}

#nivel.subiu .nivel-numero {
  animation: subiu-numero 1.8s ease;
}

@keyframes subiu {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 color-mix(in srgb, var(--magenta) 0%, transparent); }
  35% { transform: scale(1.12); box-shadow: 0 0 34px color-mix(in srgb, var(--magenta) 75%, transparent), 0 0 12px color-mix(in srgb, var(--ciano) 60%, transparent); }
  70% { transform: scale(1.03); box-shadow: 0 0 18px color-mix(in srgb, var(--magenta) 35%, transparent); }
}

@keyframes subiu-halo {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes subiu-numero {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 8px #fff); }
}

/* "+10 XP" de cada minuto: menor, translúcido e devagar, para não tirar ninguém do foco. */
.nivel-ganho.nivel-xp {
  padding: 2px 8px;
  border-color: color-mix(in srgb, var(--ciano) 35%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  animation: ganho-suave 2.6s ease forwards;
}

@keyframes ganho-suave {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  25%, 70% { opacity: 0.7; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

.nivel-ganho {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--vidro-forte);
  border: 1px solid var(--ciano);
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: ganho 2.5s ease forwards;
}

@keyframes ganho {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  15%, 75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ---------- Timer em anel ---------- */

#pomodoro {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--vidro-forte);
  display: grid;
  place-items: center;
  text-align: center;
}

#pomodoro .anel-progresso { stroke: url(#pomodoro-degrade); }

.pomodoro-preparo, .pomodoro-andamento {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pomodoro-preparo[hidden], .pomodoro-andamento[hidden] {
  display: none;
}

.pomodoro-pontos {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.pomodoro-pontos span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--destaque);
}

.pomodoro-pontos span.cheio {
  background: var(--destaque);
}

.pomodoro-campos {
  display: flex;
  gap: 18px;
}

.pomodoro-campo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pomodoro-rotulo {
  font-size: 0.8rem;
  opacity: 0.8;
}

.pomodoro-valor {
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pomodoro-seta {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  line-height: 0;
}

.pomodoro-seta:hover { opacity: 1; }
.pomodoro-seta .icone { width: 18px; height: 18px; }

.pomodoro-play {
  margin-top: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--base);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pomodoro-status {
  font-size: 0.85rem;
  opacity: 0.85;
}

#pomodoro[data-fase="pausa"] .pomodoro-status { color: #9fd8c4; }
#pomodoro[data-fase="pausaLonga"] .pomodoro-status { color: #f0c98a; }

.pomodoro-tempo {
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 8px;
}

.pomodoro-controles {
  display: flex;
  gap: 14px;
}

.pomodoro-controles button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  line-height: 0;
}

.pomodoro-controles button:hover { opacity: 1; }

/* ---------- Player ---------- */

#player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--vidro);
  border: 1px solid var(--borda);
  backdrop-filter: blur(6px);
}

.player-info {
  min-width: 150px;
  max-width: 220px;
}

.player-titulo {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-artista {
  font-size: 0.75rem;
  opacity: 0.7;
}

#player.vazio .player-titulo {
  opacity: 0.6;
  font-style: italic;
}

.player-coluna {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-controles {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.player-botao {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  line-height: 0;
}

.player-botao .icone { width: 20px; height: 20px; }
.player-botao:hover:not(:disabled), .player-botao.ativo { opacity: 1; color: var(--ciano); }
.player-botao:disabled { opacity: 0.3; cursor: default; }
.player-principal .icone { width: 26px; height: 26px; }

#player-progresso {
  width: 260px;
}

/* ---------- Painéis ---------- */

#paineis {
  position: absolute;
  top: 50%;
  left: var(--margem);
  transform: translateY(-50%);
}

/* Painéis da coluna da direita: encostados nela (à esquerda dos botões), da altura da coluna: começam abaixo do
   timer e terminam no rodapé, como a #coluna-dir. Zoom 0,8 no painel: a altura da tela é dividida por 0,8. */
#paineis-dir {
  position: absolute;
  top: calc(var(--margem) + 272px * var(--ui));
  right: calc(var(--margem) + 29px * var(--ui) + 52px + 116px);
}
#paineis-dir .painel.painel-doce:not(.painel-espiar) {
  top: 0;
  height: min(950px, calc((100dvh - 2 * var(--margem) - 320px * var(--ui)) / 0.8));
}

.painel {
  width: 320px;
  max-height: min(60vh, 600px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--vidro-forte);
  border: 1px solid var(--borda);
  backdrop-filter: blur(10px);
}

.painel[hidden] {
  display: none;
}

.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px;
}

.painel-topo h2 {
  margin: 0;
  font-size: 1.05rem;
}

.painel-fechar {
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.7;
  line-height: 0;
}

.painel-fechar:hover { opacity: 1; }
.painel-fechar .icone { width: 20px; height: 20px; }

.painel-corpo {
  flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
}

.painel-corpo h3 {
  margin: 14px 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--destaque);
}

.painel-vazio, .config-aviso {
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--texto-suave);
}



.config-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-size: 0.9rem;
}

.config-linha input[type="number"] {
  padding: 6px;
  border-radius: 8px;
  font: inherit;
}

.config-linha input[type="number"] { width: 64px; }

/* Configurações: um bloco por setor, separados por linha horizontal. */
.config-secao {
  padding: 14px 0 10px;
  border-top: 1px solid var(--borda);
}

.config-secao:first-child { border-top: none; padding-top: 4px; }
.painel-corpo .config-secao h3 { margin: 0 0 10px; }
.config-secao .config-linha { margin: 0; padding: 7px 0; }
.config-secao .config-aviso { margin: -4px 0 4px; font-size: 0.78rem; text-align: right; }

.ambiente-periodos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ambiente-periodos button, .ambiente-som button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: none;
  cursor: pointer;
}

.ambiente-periodos button.ativo, .ambiente-som button.ativo {
  background: color-mix(in srgb, var(--magenta) 35%, transparent);
  border-color: var(--destaque);
}

.ambiente-periodos button:disabled, .ambiente-som button:disabled {
  opacity: 0.4;
  cursor: default;
}

.ambiente-periodos .icone, .ambiente-som .icone { width: 14px; height: 14px; }

.ambiente-som {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

/* Painel Ambiente: linha do Automático, cartões de período e linhas de som. */
#painel-ambiente { width: 380px; max-height: min(86vh, 680px); }

/* Respiro: mais margem nas bordas e entre as seções. */
#painel-ambiente .painel-corpo { padding: 0 22px 24px; }
#painel-ambiente .painel-corpo h3 { margin: 24px 0 12px; }
#painel-ambiente .painel-corpo h3:first-child { margin-top: 18px; }

/* Painel Ambiente no formato de grade de círculos (referência: Chill with You), com as cores do Focus:
   o ativo ganha o anel com o degradê ciano/magenta do timer. */

/* Faixas de título das seções, de ponta a ponta do painel. */
#painel-ambiente .painel-corpo h3.ambiente-faixa {
  margin: 22px -22px 16px;
  padding: 7px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--texto);
  background: linear-gradient(90deg, color-mix(in srgb, var(--magenta) 14%, transparent), transparent 85%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Círculo: base de todos os botões do painel. */
#painel-ambiente .ambiente-circulo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--base-clara) 95%, transparent);
  color: color-mix(in srgb, var(--texto) 75%, transparent);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
}

#painel-ambiente .ambiente-circulo:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

#painel-ambiente .ambiente-circulo .icone { width: 20px; height: 20px; }

/* Ativo: anel claro com o ciano e o magenta deslocados, como um brilho de neon. */
#painel-ambiente .ambiente-circulo.ativo {
  color: #fff;
  border-color: #fff;
  box-shadow:
    -2px -1px 0 0 var(--ciano),
    2px 1px 0 0 var(--magenta),
    0 0 14px color-mix(in srgb, var(--magenta) 35%, transparent);
}

#painel-ambiente .ambiente-circulo:disabled { cursor: default; }

#painel-ambiente .ambiente-circulo.grande { width: 44px; height: 44px; }
#painel-ambiente .ambiente-circulo.grande .icone { width: 20px; height: 20px; }

/* Linha de períodos: AUTO + um círculo por período, centralizada. */
#painel-ambiente .ambiente-periodos {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 4px;
}

#painel-ambiente .ambiente-auto {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* No Automático, o período da hora fica com anel discreto (quem manda é o AUTO). */
#painel-ambiente .ambiente-periodos:has(.ambiente-auto.ativo) .ambiente-periodo.ativo {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 30%, transparent);
}

/* Grade de itens: círculo grande, nome embaixo e, nos sons, o volume. */
.ambiente-grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 4px;
}

#painel-ambiente .ambiente-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
}

.ambiente-item-nome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  text-align: center;
  line-height: 1.2;
}

#painel-ambiente .ambiente-item input[type="range"] {
  width: 52px;
  height: 12px;
}

#painel-ambiente .ambiente-item input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, #fff var(--preenchido, 0%), rgba(255, 255, 255, 0.18) var(--preenchido, 0%));
}

#painel-ambiente .ambiente-item input[type="range"]::-moz-range-progress { height: 3px; background: #fff; }

#painel-ambiente .ambiente-item input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ciano) 50%, transparent);
}

/* Item bloqueado: o próprio ícone apagado, cadeado pequeno no canto e sem volume. */
#painel-ambiente .ambiente-circulo:disabled { opacity: 1; color: color-mix(in srgb, var(--texto) 30%, transparent); border-color: rgba(255, 255, 255, 0.07); }
#painel-ambiente .ambiente-item:has(.ambiente-circulo:disabled) .ambiente-item-nome { color: color-mix(in srgb, var(--texto) 38%, transparent); }
#painel-ambiente .ambiente-item:has(.ambiente-circulo:disabled) input[type="range"] { visibility: hidden; }

.ambiente-cadeado {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--base-clara);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: color-mix(in srgb, var(--texto) 80%, transparent);
}

#painel-ambiente .ambiente-cadeado .icone { width: 10px; height: 10px; }

/* Dica desenhada pelo jogo (no lugar da dica do sistema): aparece ao passar o mouse.
   Nas pontas da grade ela se alinha à borda para não sair do painel. */
#painel-ambiente [data-dica] { position: relative; }

#painel-ambiente [data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 5;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(10, 8, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--texto);
  font-size: 0.72rem;
  font-weight: normal;
  letter-spacing: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s, transform 0.15s;
}

#painel-ambiente [data-dica]:hover::after { opacity: 1; transform: translate(-50%, 0); }

#painel-ambiente .ambiente-grade > [data-dica]:nth-child(5n + 1)::after { left: 0; transform: translate(0, 4px); }
#painel-ambiente .ambiente-grade > [data-dica]:nth-child(5n + 1):hover::after { transform: translate(0, 0); }
#painel-ambiente .ambiente-grade > [data-dica]:nth-child(5n)::after { left: auto; right: 0; transform: translate(0, 4px); }
#painel-ambiente .ambiente-grade > [data-dica]:nth-child(5n):hover::after { transform: translate(0, 0); }

/* Na linha de períodos a dica fica embaixo do círculo. */
#painel-ambiente .ambiente-periodos [data-dica]::after { bottom: auto; top: calc(100% + 6px); }

/* ---------- Caixa de fala (só aparece enquanto ela fala) ---------- */

#caixa-fala {
  position: absolute;
  left: 50%;
  bottom: calc(var(--margem) + 90px);
  transform: translateX(-50%);
  width: min(760px, 80%);
  max-width: calc(var(--fala-max) - 46px); /* menos padding e borda (caixa content-box) */
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--vidro-forte);
  border: 1px solid var(--borda);
  backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
}

#caixa-fala[hidden] {
  display: none;
}

#nome-fala {
  font-weight: 700;
  color: var(--destaque);
  margin-bottom: 6px;
}

#texto-fala {
  font-size: 1.1rem;
  line-height: 1.5;
}

#dica-avancar {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.6;
  text-align: right;
}

/* Clique obrigatório: pisca três vezes, descansa, e volta a piscar até o jogador clicar. */
#dica-avancar.obrigatorio {
  opacity: 1;
  color: var(--destaque);
  animation: dica-pisca 4s ease-in-out 1.5s infinite;
}

@keyframes dica-pisca {
  0%, 30%, 100% { opacity: 1; }
  5%, 15%, 25% { opacity: 0.15; }
  10%, 20% { opacity: 1; }
}






/* ---------- Controles próprios do jogo (nada de controle nativo do sistema) ---------- */

/* Barra de rolagem fina, na cor do jogo.
   Chrome/Electron usam ::-webkit-scrollbar (sem setas); a regra padrão fica só para o Firefox,
   porque no Chrome ela desliga o estilo próprio e traz as setas do sistema de volta. */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--lavanda) 45%, transparent) transparent;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: color-mix(in srgb, var(--lavanda) 45%, transparent);
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--lavanda) 75%, transparent);
}

::-webkit-scrollbar-button {
  display: none;
}

/* Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--destaque);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lavanda) 45%, transparent);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lavanda) 45%, transparent);
}

input[type="range"]:disabled {
  cursor: default;
  opacity: 0.4;
}

/* Seletor */
select {
  -webkit-appearance: none;
  appearance: none;
  padding: 6px 30px 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2ecf8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

select option {
  background: var(--base);
  color: var(--texto);
}

/* Campo numérico, sem as setinhas do sistema */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  border: 1px solid var(--borda) !important;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  text-align: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Foco visível só pelo teclado, na cor do jogo */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
}

.config-linha input[type="range"] {
  width: 150px;
}

/* Barra das Configurações com o valor e o botão de voltar ao padrão (configuracoes.js). */
.config-deslizador {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-deslizador input[type="range"] { width: 120px; }

.config-valor {
  width: 34px;
  text-align: right;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.config-reset {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.config-reset .icone { width: 13px; height: 13px; }

.config-reset:hover:not(:disabled) { border-color: var(--destaque); }

.config-reset:disabled {
  opacity: 0.25;
  cursor: default;
}


/* ---------- PC da Shion: leitura ---------- */

.painel.painel-largo {
  width: min(560px, 42vw);
  height: min(74vh, 760px);
}

.painel-largo .painel-corpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.leitura-meta[hidden] {
  display: none;
}

.leitura-meta {
  padding: 0 24px 10px;
  font-size: 0.75rem;
  color: var(--texto-suave);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.leitura-area {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.leitura {
  flex: 1;
  overflow-y: auto;
  padding: 26px 32px 40px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.04rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--texto) 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
}

.leitura p {
  margin: 0 0 1.05em;
}

.leitura-cena {
  margin: 2.2em 0 1.2em;
  font-family: var(--fonte-jogo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--destaque);
  display: flex;
  align-items: center;
  gap: 12px;
}

.leitura-cena::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, color-mix(in srgb, var(--lavanda) 40%, transparent), transparent);
}

.leitura > .leitura-cena:first-child,
.leitura > .leitura-nota:first-child + .leitura-cena {
  margin-top: 0.6em;
}

.leitura-acao {
  color: color-mix(in srgb, var(--texto) 68%, transparent);
  font-style: italic;
}

.leitura-fala {
  margin: 0 0 1.15em;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--lavanda) 35%, transparent);
}

.leitura-fala p {
  margin: 0;
}

.leitura-quem {
  font-family: var(--fonte-jogo);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--destaque);
  margin-bottom: 2px;
}

.leitura-como {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto-suave);
  font-style: italic;
}

.leitura-nota {
  font-family: var(--fonte-jogo);
  font-size: 0.75rem;
  text-align: center;
  color: var(--texto-suave);
  opacity: 0.7;
}

.leitura .nova {
  animation: surgir 1.4s ease;
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.leitura-novas {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--lavanda) 50%, transparent);
  background: color-mix(in srgb, var(--base) 92%, transparent);
  color: var(--texto);
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.leitura-novas[hidden] {
  display: none;
}

.leitura-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.leitura-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leitura-status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.leitura-status.ativo::before {
  background: var(--ciano);
  animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes pulsar {
  50% { opacity: 0.3; }
}

.leitura-salvar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: transparent;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.leitura-salvar:hover {
  background: color-mix(in srgb, var(--magenta) 18%, transparent);
  border-color: var(--destaque);
}

.leitura-salvar .icone {
  width: 16px;
  height: 16px;
}

/* ---------- Escolhas na caixa de fala ---------- */

#caixa-fala.com-escolha {
  cursor: default;
}

#opcoes-fala {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

#opcoes-fala[hidden] {
  display: none;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--lavanda) 55%, transparent);
  background: color-mix(in srgb, var(--magenta) 14%, transparent);
  color: var(--texto);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.opcao::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--destaque);
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}

.opcao:hover {
  background: color-mix(in srgb, var(--magenta) 28%, transparent);
  border-color: var(--destaque);
  box-shadow: 0 0 22px color-mix(in srgb, var(--magenta) 35%, transparent);
  transform: translateX(4px);
}

.opcao:hover::before {
  opacity: 1;
  transform: scale(1.4);
}

/* ---------- Debug (só com "debug": true) ---------- */

#slot-sup-esq {
  flex-direction: column;
  align-items: flex-start;
}

.debug-reset {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 120, 140, 0.7);
  background: rgba(60, 10, 20, 0.6);
  color: #ffb3c0;
  font-size: 0.75rem;
  cursor: pointer;
}

.debug-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Olho no começo da linha de debug: esconde e mostra os outros botões (debug.js). */
.debug-ocultar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 120, 140, 0.7);
  background: rgba(60, 10, 20, 0.6);
  color: #ffb3c0;
  cursor: pointer;
}

.debug-ocultar .icone { width: 13px; height: 13px; }

.debug-linha.debug-oculta > :not(.debug-ocultar) { display: none; }

.debug-linha.debug-oculta .debug-ocultar { opacity: 0.45; }

/* Painéis de filtros e efeitos do vídeo (debug.js): nome, slider e valor numa linha. */
.filtro-linha {
  margin: 4px 0;
}

.filtro-linha span:first-child {
  flex: 1;
  font-size: 0.85rem;
}

.filtro-linha input[type="range"] {
  width: 130px;
}

.filtro-valor {
  width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  font-size: 0.8rem;
}

.filtros-botao {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.filtros-botao:hover {
  background: rgba(255, 255, 255, 0.14);
}

.filtros-largo {
  margin-top: 10px;
  width: 100%;
}

.filtros-salvar {
  display: flex;
  gap: 8px;
}

.filtros-salvar input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
}

.filtros-salvar input[type="text"]::placeholder {
  color: var(--texto-suave);
}

.filtros-aviso:empty {
  display: none;
}

.filtros-perfis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.filtros-perfil {
  display: flex;
  gap: 4px;
}

.filtros-perfil-nome {
  flex: 1;
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.filtros-perfil-nome:hover {
  background: color-mix(in srgb, var(--magenta) 25%, transparent);
}

.filtros-perfil-apagar {
  width: 30px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: none;
  color: var(--texto-suave);
  font: inherit;
  cursor: pointer;
}

.filtros-perfil-apagar.armado {
  background: rgba(200, 50, 80, 0.85);
  color: #fff;
}

.efeito-bloco {
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--borda);
}

.efeito-topo {
  cursor: pointer;
}

.efeito-params[hidden],
.config-presets[hidden] {
  display: none;
}

.config-presets {
  margin: 4px 0 8px;
}

.debug-reset.ativo {
  border-style: solid;
  background: rgba(120, 90, 20, 0.85);
  border-color: rgba(255, 210, 120, 0.85);
  color: #ffe3a8;
}

.debug-reset.armado {
  border-style: solid;
  background: rgba(200, 50, 80, 0.85);
  color: #fff;
}

/* ---------- Tutorial: brilho de destaque ---------- */

.destaque-tutorial {
  position: relative;
  animation: brilho-tutorial 1s ease-in-out infinite;
}

.destaque-tutorial::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--ciano);
  pointer-events: none;
  animation: anel-tutorial 1s ease-out infinite;
}

@keyframes brilho-tutorial {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ciano) 0%, transparent);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 18px 6px color-mix(in srgb, var(--ciano) 55%, transparent), 0 0 36px 10px color-mix(in srgb, var(--magenta) 35%, transparent);
  }
}

@keyframes anel-tutorial {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Capítulo, números e capítulo atual no PC da Shion */

.leitura-capitulo {
  margin: 2.4em 0 0.4em;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--texto);
  text-align: center;
}

.leitura > .leitura-capitulo:first-child,
.leitura > .leitura-nota:first-child + .leitura-capitulo {
  margin-top: 0.4em;
}

.leitura-capitulo + .leitura-cena {
  margin-top: 1.4em;
}

.leitura-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.leitura-numeros {
  font-size: 0.75rem;
  color: var(--texto-suave);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leitura-numeros::before {
  content: '·';
  margin-right: 10px;
}


/* ---------- Abertura da cena: conversa em destaque ---------- */

body.cena-introducao #slot-rodape-centro,
body.em-conversa #slot-rodape-centro,
body.cena-introducao #slot-rodape-esq,
body.em-conversa #slot-rodape-esq {
  opacity: 0;
  pointer-events: none;
}

body.cena-introducao #caixa-fala {
  bottom: calc(var(--margem) + 24px);
}

#caixa-fala.com-escolha {
  width: min(820px, 84%);
  max-width: calc(var(--fala-max) - 54px);
  padding: 22px 26px;
}

#caixa-fala.com-escolha #texto-fala {
  font-size: 1.3rem;
}

#caixa-fala.com-escolha #opcoes-fala {
  gap: 12px;
  margin-top: 18px;
}

/* ---------- Player: playlists ---------- */

.player-info {
  position: relative;
}

.player-playlist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  color: var(--destaque);
  cursor: pointer;
}

.player-playlist::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg) translate(-1px, -1px);
}

.player-playlist:hover {
  color: var(--texto);
}








/* ---------- Painel de playlists ---------- */

.painel.painel-playlist {
  width: min(460px, 36vw);
  height: min(74vh, 760px);
}

.painel-playlist .painel-corpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.pl-seletor-area {
  position: relative;
  padding: 0 18px;
}

.pl-seletor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.pl-seletor span {
  flex: 1;
}

.pl-seletor small {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.pl-seletor::after {
  content: '';
  width: 7px;
  height: 7px;
  margin: 0 2px 3px 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.pl-seletor:hover {
  border-color: var(--destaque);
}

.pl-opcoes {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  top: calc(100% + 6px);
  padding: 6px;
  border-radius: 12px;
  background: var(--base);
  border: 1px solid var(--borda);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.pl-opcoes[hidden] {
  display: none;
}

.pl-opcao {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 0.92rem;
  cursor: pointer;
}

.pl-opcao small {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.pl-opcao:hover {
  background: rgba(255, 255, 255, 0.07);
}

.pl-opcao.ativo {
  background: color-mix(in srgb, var(--magenta) 22%, transparent);
}

.pl-acoes {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pl-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 18px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pl-acao .icone {
  width: 16px;
  height: 16px;
}

.pl-acao:hover:not(:disabled) {
  border-color: var(--destaque);
  background: color-mix(in srgb, var(--magenta) 18%, transparent);
}

.pl-acao:disabled {
  opacity: 0.4;
  cursor: default;
}

.pl-acao-icone.ativo {
  color: var(--ciano);
  border-color: color-mix(in srgb, var(--ciano) 60%, transparent);
}

.pl-lista {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 10px 12px 16px;
  list-style: none;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 6px;
}

.pl-faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transition: background 0.2s, opacity 0.2s;
}

.pl-faixa:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pl-faixa.tocando {
  background: color-mix(in srgb, var(--magenta) 22%, transparent);
  border-color: color-mix(in srgb, var(--lavanda) 45%, transparent);
}

.pl-faixa.desligada .pl-nome,
.pl-faixa.desligada .pl-tocar {
  opacity: 0.4;
}

.pl-check {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--lavanda) 60%, transparent);
  background: none;
  cursor: pointer;
  position: relative;
}

.pl-check[aria-pressed="true"] {
  background: var(--destaque);
  border-color: var(--destaque);
}

.pl-check[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border-right: 2px solid var(--base);
  border-bottom: 2px solid var(--base);
  transform: rotate(45deg);
}

.pl-tocar, .pl-fav, .pl-remover {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.8;
}

.pl-tocar .icone { width: 16px; height: 16px; }
.pl-fav .icone { width: 18px; height: 18px; }

.pl-tocar:hover:not(:disabled), .pl-fav:hover, .pl-remover:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.pl-tocar:disabled {
  cursor: default;
}

.pl-fav[aria-pressed="true"] {
  color: #f0c98a;
  opacity: 1;
}

.pl-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pl-nome span {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-nome small {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

/* Minhas músicas: adicionar, aviso, lixeira e arrastar arquivos para o painel. */
.pl-acao[hidden] {
  display: none;
}

.pl-importar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--ciano) 45%, transparent);
  background: color-mix(in srgb, var(--ciano) 10%, transparent);
}

.pl-importar-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font-size: 0.85rem;
}

.pl-importar-rotulo .icone { width: 16px; height: 16px; color: var(--ciano); }

.pl-importar-botao {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.pl-importar-botao .icone { width: 15px; height: 15px; }

.pl-importar-botao:hover:not(:disabled) {
  border-color: var(--ciano);
  background: color-mix(in srgb, var(--ciano) 20%, transparent);
}

.pl-importar-botao:disabled {
  opacity: 0.4;
  cursor: default;
}

.pl-aviso {
  margin: 10px 18px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ciano) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ciano) 30%, transparent);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--texto-suave);
}

.pl-remover .icone { width: 16px; height: 16px; }

.pl-remover:hover {
  color: #f08a9a;
}

.painel-playlist.pl-soltando {
  outline: 2px dashed color-mix(in srgb, var(--ciano) 70%, transparent);
  outline-offset: -8px;
}

.pl-vazio {
  padding: 24px 12px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

/* ---------- Player: volume vertical ---------- */

.player-volume-area {
  position: relative;
  display: flex;
}

.player-volume {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  transform: translateX(-50%);
  width: 46px;
  height: 160px;
  padding: 10px 0 12px;
  border-radius: 23px;
  background: var(--vidro-forte);
  border: 1px solid var(--borda);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.player-volume[hidden] {
  display: none;
}

.player-volume-valor {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

/* Trilho vertical: o slider horizontal é girado dentro de uma caixa alta. */
.player-volume-trilho {
  position: relative;
  flex: 1;
  width: 100%;
}

.player-volume-trilho input[type="range"] {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.player-volume-trilho input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--destaque) var(--preenchido, 0%), rgba(255, 255, 255, 0.2) var(--preenchido, 0%));
}

/* ---------- Estatísticas ---------- */

.painel.painel-estatisticas {
  width: min(480px, 38vw);
  max-height: min(78vh, 800px);
}

.es-secao {
  padding: 4px 0 14px;
}

.es-secao + .es-secao {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 6px;
}

.es-historia-nome {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 2px 0 12px;
}

.es-capitulo {
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.es-progresso {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.es-progresso-barra {
  height: 100%;
  border-radius: 4px;
  background: var(--destaque);
}

.es-progresso-texto {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.es-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

/* Atributos: os cinco numa linha, compactos. */
.es-blocos.es-atributos {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.es-atributos .es-bloco {
  padding: 8px 4px;
  text-align: center;
}

.es-atributos .es-valor {
  font-size: 1.05rem;
}

.es-atributos .es-rotulo {
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-bloco {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.es-valor {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.es-valor small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--texto-suave);
}

.es-rotulo {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.es-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.es-linha span {
  color: var(--texto-suave);
}

.es-linha strong {
  font-weight: 500;
  text-align: right;
}

.es-escolhas {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Um capítulo: o nome à esquerda, as escolhas dele à direita. */
.es-grupo {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  align-items: start;
}

.es-grupo .es-cap {
  padding: 3px 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ciano) 16%, transparent);
  color: var(--ciano);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.es-grupo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.es-grupo li {
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--magenta) 8%, transparent);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-abas {
  margin: 0 0 6px;
}

.es-secao[hidden] { display: none; }

.es-subtitulo {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.es-completa {
  margin: 6px 0 4px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ciano) 50%, transparent);
  background: color-mix(in srgb, var(--ciano) 14%, transparent);
  color: var(--ciano);
  font-size: 0.82rem;
}


/* Gráfico de barras dos últimos 7 dias (uma série, cor validada no fundo escuro) */
.es-grafico {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  height: 120px;
  padding-top: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.es-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  cursor: default;
}

.es-coluna {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}

.es-dia:hover .es-coluna,
.es-dia:focus-visible .es-coluna {
  background: rgba(255, 255, 255, 0.05);
}

.es-barra {
  width: 60%;
  max-width: 26px;
  border-radius: 4px 4px 0 0;
  background: var(--lavanda);
}

.es-dia-nome {
  padding: 6px 0 4px;
  font-size: 0.7rem;
  color: var(--texto-suave);
}

.es-dia.hoje .es-dia-nome {
  color: var(--texto);
  font-weight: 600;
}

.es-dica {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--base);
  border: 1px solid var(--borda);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.es-dica[hidden] {
  display: none;
}

.es-secao:last-child {
  position: relative;
}


/* ---------- Conversas com a Shion ---------- */

.painel.painel-conversas {
  width: min(440px, 36vw);
  height: min(74vh, 760px);
}

.painel-conversas .painel-corpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.cv-abas {
  display: flex;
  gap: 6px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cv-aba {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-suave);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.cv-aba:hover {
  color: var(--texto);
}

.cv-aba.ativa {
  color: var(--texto);
  border-bottom-color: var(--destaque);
}

.cv-lista {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px 14px 18px;
  list-style: none;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
}

.cv-bloco {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.cv-bloco:hover:not(:disabled) {
  background: color-mix(in srgb, var(--magenta) 16%, transparent);
  border-color: color-mix(in srgb, var(--lavanda) 45%, transparent);
  transform: translateX(3px);
}

.cv-bloco:disabled {
  cursor: default;
  opacity: 0.45;
}

.cv-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lavanda) 12%, transparent);
  border: 1.5px solid var(--lavanda);
  color: var(--lavanda);
}

.cv-bloco:disabled .cv-icone {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.cv-icone .icone {
  width: 20px;
  height: 20px;
}

.cv-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cv-texto strong {
  font-size: 1rem;
  font-weight: 600;
}

.cv-texto small {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-marca:empty { display: none; }

.cv-marca {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--destaque) 15%, transparent);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--destaque);
}

.cv-vazio {
  padding: 28px 12px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

/* ---------- Timer: brilho ao dar play e luz na ponta do progresso ---------- */

#pomodoro .anel-varredura {
  fill: none;
  stroke: url(#pomodoro-degrade);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 50px 50px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ciano) 90%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--magenta) 70%, transparent));
}

#pomodoro .anel-ponta {
  fill: #fff;
  stroke: none;
  opacity: 0;
  transition: opacity 0.4s;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px var(--ciano));
}

#pomodoro.rodando .anel-ponta {
  opacity: 1;
  animation: ponta-respira 2.4s ease-in-out infinite;
}

#pomodoro.rodando .anel-progresso {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ciano) 60%, transparent));
}

#pomodoro.iniciou .anel-varredura {
  animation: varredura 1.4s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

#pomodoro.iniciou {
  animation: anel-pulso 1.4s ease-out;
}

#pomodoro.iniciou .pomodoro-andamento {
  animation: tempo-entra 0.7s ease-out;
}

@keyframes varredura {
  0% { opacity: 0; transform: rotate(0deg); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg); }
}

@keyframes anel-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ciano) 0%, transparent); }
  35% { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--ciano) 35%, transparent), 0 0 60px 14px color-mix(in srgb, var(--magenta) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ciano) 0%, transparent); }
}

@keyframes tempo-entra {
  from { opacity: 0; transform: scale(0.92); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes ponta-respira {
  50% { r: 3; }
}

/* ---------- Fundo em camadas e transição "morph" ---------- */

#fundo .camada {
  opacity: 0;
  z-index: 0;
  will-change: opacity, filter, transform;
}

#fundo .camada.visivel {
  opacity: 1;
}

/* A cena que sai desfoca, clareia e cresce de leve enquanto some. */
#fundo .camada.saindo {
  z-index: 1;
  animation: fundo-sai 1.8s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

/* A que entra nasce do desfoque e da luz e assenta no lugar. */
#fundo .camada.entrando {
  z-index: 2;
  animation: fundo-entra 1.8s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}


@keyframes fundo-sai {
  0% { opacity: 1; filter: blur(0) brightness(1) saturate(1); transform: scale(1); }
  45% { opacity: 1; filter: blur(10px) brightness(1.25) saturate(1.15); transform: scale(1.035); }
  100% { opacity: 0; filter: blur(22px) brightness(1.45) saturate(1.2); transform: scale(1.07); }
}

@keyframes fundo-entra {
  0% { opacity: 0; filter: blur(26px) brightness(1.5) saturate(1.2); transform: scale(1.08); }
  35% { opacity: 0; }
  70% { opacity: 1; filter: blur(8px) brightness(1.18) saturate(1.1); transform: scale(1.025); }
  100% { opacity: 1; filter: blur(0) brightness(1) saturate(1); transform: scale(1); }
}


/* Luz por cima da troca: uma lavagem suave no centro e círculos que florescem e se dissolvem. */
.brilho-transicao {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.brilho-lavagem {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 236, 255, 0.55), color-mix(in srgb, var(--lavanda) 25%, transparent) 35%, transparent 70%);
  opacity: 0;
  animation: lavagem 1.8s ease-in-out forwards;
}

.brilho-orbe {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle, rgba(var(--cor), 0.95) 0%, rgba(var(--cor), 0.45) 30%, rgba(var(--cor), 0) 70%);
  filter: blur(2px);
  opacity: 0;
  animation-name: orbe;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: forwards;
}

@keyframes lavagem {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes orbe {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--sobe))) scale(1.25); }
}

/* Sequência de vídeos: um visível por vez, troca seca no fim de cada um. */
#fundo div.camada {
  position: absolute;
  inset: 0;
}

#fundo .seq-video {
  opacity: 0;
}

#fundo .seq-video.seq-ativo {
  opacity: 1;
}

/* Boca em SVG por cima do vídeo de fala (ver engine/boca.js). */
#fundo .boca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#fundo .boca-contorno {
  fill: none;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#fundo .boca-dentro { fill: rgb(138, 58, 70); }
#fundo .boca-lingua { fill: rgb(214, 128, 138); }
#fundo .boca-dentes { fill: rgb(246, 236, 234); }

/* Teste do vídeo de intro (debug.js): sem o balão de fala do Foco total. */
body.teste-intro #balao-shion { display: none !important; }

/* ---------- Save / Load ---------- */

.save-abas {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.save-aba {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.save-aba.ativa {
  background: color-mix(in srgb, var(--magenta) 35%, transparent);
  color: inherit;
}

.save-explicacao {
  margin: 8px 2px 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--texto-suave);
}

.save-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.save-item {
  position: relative;
}

.save-linha {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px 36px 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  font: inherit;
  cursor: default;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.3s;
}

.save-linha.clicavel { cursor: pointer; }

.save-linha.clicavel:hover {
  background: color-mix(in srgb, var(--magenta) 18%, transparent);
  border-color: var(--destaque);
}

.save-linha.vazio {
  border-style: dashed;
  background: transparent;
}

.save-linha.ativo {
  border-color: color-mix(in srgb, var(--ciano) 50%, transparent);
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
}

.save-linha.armado {
  border-color: var(--destaque);
  background: color-mix(in srgb, var(--magenta) 30%, transparent);
}

.save-linha.acabou-de-salvar {
  border-color: var(--destaque);
  box-shadow: 0 0 16px color-mix(in srgb, var(--magenta) 45%, transparent);
}

.save-linha-topo, .save-linha-base {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.save-historia {
  flex: none;
  max-width: 70%;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-capitulo {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-linha-base {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.save-linha-base span + span::before {
  content: '·';
  margin-right: 8px;
}

.save-ativo { color: var(--ciano); }

.save-confirmar:empty { display: none; }

.save-confirmar {
  font-size: 0.75rem;
  color: var(--destaque);
}

.save-apagar {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--texto-suave);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}

.save-item:hover .save-apagar, .save-apagar:focus-visible, .save-apagar.armado { opacity: 1; }

.save-apagar:hover, .save-apagar.armado {
  background: rgba(240, 90, 110, 0.30);
  color: rgb(255, 150, 160);
}

.save-apagar .icone { width: 15px; height: 15px; }

.save-acao {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: transparent;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.save-acao:hover {
  background: color-mix(in srgb, var(--magenta) 18%, transparent);
  border-color: var(--destaque);
}

.save-acao.principal {
  background: color-mix(in srgb, var(--magenta) 30%, transparent);
  border-color: var(--destaque);
}

.save-acao.perigo:hover, .save-acao.perigo.armado {
  background: rgba(240, 90, 110, 0.30);
  border-color: rgb(240, 90, 110);
}

.save-acao.armado {
  background: color-mix(in srgb, var(--magenta) 45%, transparent);
  border-color: var(--destaque);
}

/* "+" ao lado do roteiro da Shion: só aparece com o mouse em cima */
.grupo-novo-roteiro {
  position: relative;
  display: flex;
}

.botao-mais {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--vidro);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateX(8px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}

/* Ponte invisível entre o botão do roteiro e o "+", para o mouse atravessar sem ele sumir */
.grupo-novo-roteiro::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 50px;
  height: 100%;
}

.grupo-novo-roteiro:hover .botao-mais, .botao-mais:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.botao-mais:hover {
  background: color-mix(in srgb, var(--magenta) 45%, transparent);
  border-color: var(--destaque);
}

.botao-mais .icone { width: 18px; height: 18px; }

/* Diálogo de confirmação */
.dialogo-fundo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(8, 4, 16, 0.55);
  backdrop-filter: blur(3px);
  animation: dialogo-entra 0.2s ease;
}

.dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  border-radius: 16px;
  border: 1px solid var(--borda);
  background: var(--vidro);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dialogo h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.dialogo p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.dialogo-nome input[type="text"] {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
}

.dialogo-nome input[type="text"]::placeholder {
  color: var(--texto-suave);
}

@keyframes dialogo-entra {
  from { opacity: 0; }
}

/* Em qual save estão as estatísticas */
.es-save {
  float: right;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-suave);
}

/* ---------- PC da Shion: espiar (só as últimas linhas) ---------- */

.painel.painel-espiar {
  height: auto;
}

.leitura.espiar {
  overflow: hidden;
  max-height: 360px;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
}

.espiar-fim {
  padding: 28px 8px;
  text-align: center;
  font-family: var(--fonte-jogo);
}

.espiar-fim b {
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: var(--destaque);
}

.espiar-fim p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.leitura-botoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.leitura-salvar.icone-so {
  padding: 6px 8px;
}

.leitura-ler {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--destaque);
  background: color-mix(in srgb, var(--magenta) 30%, transparent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.3s;
}

.leitura-ler:hover {
  background: color-mix(in srgb, var(--magenta) 48%, transparent);
}

.leitura-ler.tem-novo {
  box-shadow: 0 0 14px color-mix(in srgb, var(--magenta) 55%, transparent);
}

/* ---------- Manuscrito (tela cheia) ---------- */

.manuscrito.paleta-antiga {
  /* Paleta antiga, só na leitura (capítulo aberto e página do fim). O índice de capítulos segue o perfil de cor. */
  --base: #120c1c;
  --vidro: rgba(18, 12, 28, 0.55);
  --vidro-forte: rgba(18, 12, 28, 0.82);
  --texto: #f2ecf8;
  --texto-suave: rgba(242, 236, 248, 0.7);
  --destaque: #c9a6f0;
  --ciano: #4fd1e8;
  --magenta: #c46bf0;
  --lavanda: #c9a6f0;
}

.manuscrito {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(8, 4, 16, 0.6);
  backdrop-filter: blur(6px);
  animation: dialogo-entra 0.25s ease;
}

.manuscrito[hidden] { display: none; }

body.com-manuscrito #caixa-fala { z-index: 45; }

.ms-caixa {
  width: min(1180px, 100%);
  height: min(860px, 100%);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--borda);
  background: color-mix(in srgb, var(--base) 95%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ms-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ms-cabeca { min-width: 0; }

.ms-cabeca h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.35rem;
  font-weight: 600;
}

.ms-sub {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.ms-selo {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ciano) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ciano) 50%, transparent);
  color: var(--ciano);
  font-size: 0.72rem;
}

.ms-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ms-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ms-botao[hidden] { display: none; }

.ms-botao:hover {
  background: color-mix(in srgb, var(--magenta) 18%, transparent);
  border-color: var(--destaque);
}

.ms-botao.principal {
  border-color: var(--destaque);
  background: color-mix(in srgb, var(--magenta) 32%, transparent);
  font-weight: 600;
}

.ms-botao .icone { width: 16px; height: 16px; }

.ms-fechar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ms-fechar:hover { background: rgba(255, 255, 255, 0.1); }

.ms-fechar .icone { width: 20px; height: 20px; }

.ms-corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Índice */
.ms-corpo.indice {
  overflow-y: auto;
  padding: 22px 24px 28px;
  gap: 16px;
}

.ms-continuar {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--destaque);
  background: color-mix(in srgb, var(--magenta) 30%, transparent);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.2s;
}

.ms-continuar:hover {
  box-shadow: 0 0 22px color-mix(in srgb, var(--magenta) 45%, transparent);
  transform: translateY(-1px);
}

.ms-continuar .icone { width: 22px; height: 22px; fill: currentColor; }

.ms-continuar span { display: flex; flex-direction: column; }

.ms-continuar b { font-size: 0.95rem; }

.ms-continuar small { font-size: 0.78rem; color: var(--texto-suave); }

.ms-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.ms-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.3s;
}

.ms-cartao:hover:not(:disabled) {
  border-color: var(--destaque);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ms-cartao:disabled { cursor: default; opacity: 0.45; }

.ms-cartao-arte {
  height: 120px;
  display: grid;
  place-items: center;
  background:
    color-mix(in srgb, var(--magenta) 30%, var(--base));
}

.ms-cartao-arte span {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.ms-cartao.bloqueado .ms-cartao-arte { background: color-mix(in srgb, var(--base), white 4%); }

.ms-cartao-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}

.ms-cartao-titulo {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 0.98rem;
  line-height: 1.3;
}

.ms-cartao-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.74rem;
  color: var(--texto-suave);
}

.ms-cartao.andamento .ms-cartao-info span:first-child { color: var(--ciano); }

.ms-barra {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ms-barra span {
  display: block;
  height: 100%;
  background: var(--destaque);
}

.ms-etiqueta {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.7rem;
  color: var(--texto-suave);
}

.ms-etiqueta.novo {
  background: color-mix(in srgb, var(--magenta) 85%, transparent);
  color: #fff;
  font-weight: 600;
}

.ms-final-faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ciano) 50%, transparent);
  background: color-mix(in srgb, var(--magenta) 15%, transparent);
}

.ms-final-faixa div { display: flex; flex-direction: column; gap: 2px; }

.ms-final-faixa b {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.2rem;
  color: var(--ciano);
}

.ms-final-faixa span { font-size: 0.85rem; color: var(--texto-suave); }

/* Leitor: uma coluna, rolando para baixo */
.ms-corpo.leitor {
  padding: 28px clamp(24px, 5vw, 64px) 0;
}

.ms-janela {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  outline: none;
  position: relative;
}

.ms-texto {
  margin: 0 auto;
  padding: 0 0 48px;
  overflow: visible;
  mask-image: none;
  font-size: 1.08rem;
  line-height: 1.85;
}

.ms-texto.ilustrada { position: relative; }

.ms-ilustracao {
  position: absolute;
  margin: 0.4em 0 0;
}

.ms-ilustracao img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--borda);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.ms-mic {
  padding: 10px 16px 12px;
  border-left: none;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--lavanda) 22%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--magenta) 14%, transparent), color-mix(in srgb, var(--magenta) 4%, transparent));
  box-shadow: 0 0 22px color-mix(in srgb, var(--magenta) 14%, transparent);
}

.ms-mic-quem {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-mic-icone {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.ms-mic-ondas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 10px;
  margin-left: 2px;
}

.ms-mic-ondas i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: #f0a6e0;
  opacity: 0.75;
  animation: ms-mic-onda 1.1s ease-in-out infinite;
}

.ms-mic-ondas i:nth-child(2) { animation-delay: -0.3s; }
.ms-mic-ondas i:nth-child(3) { animation-delay: -0.6s; }
.ms-mic-ondas i:nth-child(4) { animation-delay: -0.15s; }

@keyframes ms-mic-onda {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.ms-chat {
  margin: 0 0 1.4em;
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--lavanda) 26%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--magenta) 12%, transparent), rgba(120, 90, 200, 0.05));
  font-family: var(--fonte-jogo);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ms-chat-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--destaque);
}

.ms-chat-vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0a6e0;
  box-shadow: 0 0 8px rgba(240, 166, 224, 0.8);
  animation: ms-chat-pulso 2.4s ease-in-out infinite;
}

@keyframes ms-chat-pulso {
  50% { opacity: 0.45; }
}

.ms-chat-msg {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.ms-chat-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), var(--cor) 60%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.ms-chat-avatar svg {
  width: 13px;
  height: 13px;
}

.ms-chat-reacao {
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: #f0b6e2;
}

.ms-chat-reacao svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.ms-chat-reacao.vazia {
  color: var(--texto-suave);
  opacity: 0.35;
}

.ms-chat-reacao.vazia svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ms-chat-hora {
  flex: none;
  padding-left: 10px;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  opacity: 0.6;
}

.ms-chat-nome {
  margin-right: 7px;
  font-weight: 600;
  color: var(--destaque);
}

.ms-chat-texto {
  color: color-mix(in srgb, var(--texto) 86%, transparent);
}

.ms-texto .leitura-capitulo {
  margin: 0 0 1.2em;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

.ms-texto .ms-nova {
  position: relative;
}

.ms-texto .ms-nova::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}

.ms-fim-capitulo {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--fonte-jogo);
}

.ms-resumo {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--lavanda) 30%, transparent);
  background: color-mix(in srgb, var(--magenta) 8%, transparent);
}

.ms-resumo h4 {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--destaque);
}

.ms-resumo p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.ms-andamento {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ciano);
}

/* Fim da história */
.ms-corpo.final {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.ms-final {
  max-width: 560px;
  text-align: center;
}

.ms-final-selo {
  font-size: 2rem;
  color: var(--ciano);
  text-shadow: 0 0 20px color-mix(in srgb, var(--ciano) 70%, transparent);
}

.ms-final h3 {
  margin: 6px 0 4px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 2.6rem;
  font-weight: 600;
}

.ms-final-nome {
  margin: 0 0 16px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  font-size: 1.2rem;
  color: var(--destaque);
}

.ms-final p {
  line-height: 1.6;
  color: var(--texto-suave);
}

.ms-final-dica { font-size: 0.85rem; }

.ms-final-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.manuscrito.paleta-antiga .ms-caixa { background: linear-gradient(160deg, rgba(30, 20, 46, 0.94), rgba(14, 9, 22, 0.96)); }

/* ---------- Escolha do jogador dentro do texto ---------- */

.manuscrito .leitura-escolha { background: linear-gradient(135deg, rgba(79, 209, 232, 0.10), rgba(196, 107, 240, 0.12)); }

.leitura-escolha {
  margin: 1.4em 0 1.6em;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ciano) 50%, transparent);
  background: color-mix(in srgb, var(--magenta) 11%, transparent);
  font-family: var(--fonte-jogo);
  font-style: normal;
  break-inside: avoid;
}

.leitura-escolha-titulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ciano);
}

.leitura-escolha-texto {
  margin-top: 4px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--texto);
}

.leitura-escolha-outra {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--texto-suave);
  opacity: 0.7;
}

/* Transição "cortina" (Cortina preta): película preta por cima do fundo, abaixo da interface. */
.fundo-veu {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

.fundo-veu.fechado { opacity: 1; }

/* Pergunta do roteiro: a tela fica só com a Shion e a caixa de fala. */
body.em-pergunta .ui-elemento {
  opacity: 0;
  pointer-events: none;
}

body .ui-elemento {
  transition: opacity 0.5s ease;
}

/* ---------- "Decida você" e interruptor ---------- */

.opcao.opcao-aleatoria {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.03);
  color: var(--texto-suave);
  font-size: 1.05rem;
}

.opcao.opcao-aleatoria:hover {
  color: var(--texto);
}

.opcao-lembrar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.opcao-lembrar span {
  cursor: pointer;
}

/* Interruptor (liga/desliga), no lugar da caixa de seleção do sistema. */
.interruptor {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--texto-suave);
  transition: transform 0.25s, background 0.25s;
}

.interruptor[aria-checked="true"] {
  background: color-mix(in srgb, var(--magenta) 55%, transparent);
  border-color: var(--destaque);
}

.interruptor[aria-checked="true"]::after {
  transform: translateX(16px);
  background: #fff;
}

/* Destaque em negrito dentro da fala (ex.: a opção que a Shion escolheu). */
#texto-fala strong {
  font-weight: 700;
  color: #fff;
}

/* Prazo da fala: uma linha fina que corre embaixo da caixa, do começo ao fim. */
.fala-prazo {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -12px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.fala-prazo span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--destaque);
  animation: prazo-corre linear forwards;
}

@keyframes prazo-corre {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Filtros de luz do Ambiente (por cima do vídeo, abaixo da interface) ---------- */

/* Degradês de luz dos períodos (ambiente.js): uma camada por filtro, sempre montada, com o fundo sempre
   definido; a ativa aparece e a anterior some em 2 s (com o fundo trocando junto, o sumiço era instantâneo). */
.fundo-filtro {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* acima das camadas de vídeo, abaixo da cortina preta (5) */
}

.fundo-filtro .ff,
.fundo-filtro .ff::before,
.fundo-filtro .ff::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fundo-filtro .ff {
  opacity: 0;
  transition: opacity 2s ease;
}

.fundo-filtro .ff.ativo {
  opacity: 1;
}

.fundo-filtro .ff::before,
.fundo-filtro .ff::after {
  content: "";
}

/* Sol da manhã: luz dourada e suave entrando pelo alto, com a cena um pouco mais quente e clara. */
.fundo-filtro .ff[data-nome="manha"]::before {
  background:
    radial-gradient(ellipse 60% 55% at 80% 0%, rgba(255, 214, 150, 0.38), rgba(255, 196, 130, 0.10) 45%, transparent 72%),
    linear-gradient(180deg, rgba(255, 190, 130, 0.10) 0%, transparent 60%);
  mix-blend-mode: screen;
}

.fundo-filtro .ff[data-nome="manha"]::after {
  background: linear-gradient(160deg, rgba(255, 170, 95, 0.32), rgba(255, 205, 160, 0.14) 55%, transparent);
  mix-blend-mode: soft-light;
}

/* Fim de tarde: céu laranja e rosado vindo da janela, cena mais quente e um pouco mais escura embaixo. */
.fundo-filtro .ff[data-nome="tarde"]::before {
  background:
    radial-gradient(ellipse 75% 55% at 55% 35%, rgba(255, 150, 90, 0.34), rgba(255, 110, 120, 0.12) 50%, transparent 78%),
    linear-gradient(180deg, rgba(255, 120, 150, 0.12) 0%, transparent 55%);
  mix-blend-mode: screen;
}

.fundo-filtro .ff[data-nome="tarde"]::after {
  background: linear-gradient(180deg, rgba(255, 140, 70, 0.30) 0%, rgba(230, 100, 120, 0.22) 55%, rgba(60, 20, 70, 0.30) 100%);
  mix-blend-mode: soft-light;
}

/* Noite: degradê do luar no alto da janela (azul claro e frio) até o chão quase escuro (azul profundo). */
.fundo-filtro .ff[data-nome="noite"]::before {
  background:
    radial-gradient(ellipse 55% 45% at 50% 5%, rgba(150, 185, 255, 0.30), rgba(110, 140, 230, 0.10) 50%, transparent 80%);
  mix-blend-mode: screen;
}

.fundo-filtro .ff[data-nome="noite"]::after {
  background:
    radial-gradient(ellipse 90% 85% at 50% 40%, transparent 45%, rgba(4, 6, 24, 0.55) 100%),
    linear-gradient(180deg, rgba(70, 100, 200, 0.20) 0%, rgba(30, 45, 130, 0.50) 45%, rgba(10, 14, 55, 0.80) 100%);
  mix-blend-mode: multiply;
}

/* Tela do filtro em WebGL (engine/gradeLuz.js), usada quando um período tiver preset lá. */
.grade-luz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}

.grade-luz.ligada {
  opacity: 1;
}

/* Filtros do vídeo (engine/filtroVideo.js, PixiJS): troca na hora, sem fade. */
.filtro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.filtro-video.ligada {
  opacity: 1;
}

/* Chuva caindo por cima da cena (engine/chuvaEfeito.js): acima do vídeo e dos filtros, abaixo da cortina. */
.chuva-efeito, .vagalumes-efeito {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.chuva-efeito.ligada, .vagalumes-efeito.ligada {
  opacity: 1;
}

/* Gotas no vidro da tela (engine/vidroChuva.js): acima do vídeo, abaixo dos filtros de luz (4). */
.vidro-chuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.vidro-chuva.ligado {
  opacity: 1;
}

/* ---------- Encerrar chamada (engine/componentes/encerrar.js) ---------- */

.save-acao.principal.perigo {
  background: rgba(240, 90, 110, 0.30);
  border-color: rgb(240, 90, 110);
}

#chamada-encerrada {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 45%, #1b1230 0%, #0c0816 45%, #040306 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

#chamada-encerrada.visivel {
  opacity: 1;
}

.chamada-encerrada-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  text-align: center;
}

.chamada-encerrada-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #f0607a, #b8304a);
  box-shadow: 0 0 36px rgba(240, 96, 122, 0.45);
  animation: encerrada-entra 0.6s ease-out both;
}
.chamada-encerrada-icone .icone { width: 30px; height: 30px; }
@keyframes encerrada-entra {
  from { scale: 0.7; opacity: 0; }
}
#chamada-ligar-de-novo[hidden] { display: none; }

.chamada-encerrada-caixa h2 {
  margin: 0;
  font-size: 1.4rem;
}

.chamada-encerrada-caixa p {
  margin: 0 0 10px;
  color: var(--texto-suave);
}

/* ---------- Primeira vez: estúdio, título, idioma, termos e nome (engine/primeiraVez.js) ---------- */

#primeira-vez {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
}

/* Quarto desfocado e escuro por trás de tudo; na revelação o desfoque e o escuro saem devagar. */
.pv-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(8, 5, 14, 0.72);
  backdrop-filter: blur(14px) saturate(0.85);
  transition: background 1.8s ease, backdrop-filter 1.8s ease;
}

#primeira-vez.revelando .pv-fundo {
  background: rgba(8, 5, 14, 0);
  backdrop-filter: blur(0) saturate(1);
}

.pv-chuva {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.pv-preto {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  transition: opacity 1s ease;
}

#primeira-vez.sem-preto .pv-preto {
  opacity: 0;
  pointer-events: none;
}

.pv-tela {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease, filter 0.9s ease, transform 0.9s ease;
}

.pv-tela.visivel {
  opacity: 1;
  pointer-events: auto;
}

.pv-tela.entra-desfoque { animation: pv-entra-desfoque 1.1s ease both; }

@keyframes pv-entra-desfoque {
  from { opacity: 0; filter: blur(14px); transform: scale(0.96); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.pv-tela.sai-desfoque {
  filter: blur(16px);
  transform: scale(1.06);
}

/* Estúdio: por cima do preto. */
#pv-estudio {
  z-index: 4;
  gap: 14px;
  text-align: center;
}

.pv-estudio-nome {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  padding-left: 0.38em;
}

.pv-estudio-apresenta {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  opacity: 0.65;
}

/* Título: a logo entra do desfoque e respira de leve. */
.pv-logo {
  width: min(560px, 72vw);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.55));
}

#pv-titulo.visivel .pv-logo { animation: pv-logo-entra 1.6s ease both, pv-logo-respira 5s ease-in-out 1.6s infinite; }

@keyframes pv-logo-entra {
  from { opacity: 0; filter: blur(8px) drop-shadow(0 10px 40px rgba(0, 0, 0, 0.55)); transform: scale(0.97); }
  to { opacity: 1; filter: blur(0) drop-shadow(0 10px 40px rgba(0, 0, 0, 0.55)); transform: none; }
}

@keyframes pv-logo-respira {
  50% { filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px color-mix(in srgb, var(--lavanda) 35%, transparent)); }
}

/* Cartões: idioma, termos e nome. */
.pv-cartao {
  inset: 0;
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px 22px;
  border-radius: 18px;
  border: 1px solid var(--borda);
  background: var(--vidro);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.pv-cartao h2 {
  margin: 0;
  font-size: 1.2rem;
}

.pv-cartao p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.pv-botao { align-self: flex-end; }

.pv-idiomas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pv-idioma {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pv-idioma small {
  font-size: 0.65rem;
  color: var(--texto-suave);
}

.pv-idioma small:empty { display: none; }

.pv-idioma:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.4); }

.pv-idioma.ativo {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: -2px -1px 0 var(--ciano), 2px 1px 0 var(--magenta), 0 0 14px color-mix(in srgb, var(--magenta) 35%, transparent);
}

.pv-idioma:disabled {
  opacity: 0.4;
  cursor: default;
}

.pv-termos-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 42vh;
  overflow-y: auto;
  padding-right: 6px;
}

.pv-aceito {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.pv-caixinha {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--lavanda) 70%, transparent);
}

.pv-aceito[aria-checked="true"] .pv-caixinha {
  background: var(--destaque);
  border-color: var(--destaque);
}

.pv-aceito[aria-checked="true"] .pv-caixinha::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border-right: 2px solid var(--base);
  border-bottom: 2px solid var(--base);
  transform: rotate(45deg);
}

#pv-nome input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

#pv-nome input:focus {
  outline: none;
  border-color: var(--destaque);
}

.pv-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pv-dica {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 5;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--texto) 45%, transparent);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}

#primeira-vez.com-dica .pv-dica { opacity: 1; }

/* ---------- Configurações: perfis de cor da interface (engine/paletas.js) ---------- */
.config-paletas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.config-paletas button {
  display: flex;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.config-paletas button.ativa { border-color: var(--texto); }
/* Altura explícita: no Chromium do app (Electron 33) o botão-flex não estica as listras e elas sumiam (altura 0). */
.config-paletas i { flex: 1; display: block; height: 100%; }

.config-paletas-nome {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--texto-suave);
}

/* ---------- Modo de jogo: escolha no começo do roteiro e etiqueta sempre à vista (engine/modo.js) ---------- */
.dialogo.dialogo-modo { width: min(560px, calc(100vw - 32px)); }

.modo-sub { margin-bottom: 16px !important; }

.modo-cartoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .modo-cartoes { grid-template-columns: 1fr; }
}

.modo-cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--texto) 5%, transparent);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.modo-cartao:hover {
  border-color: color-mix(in srgb, var(--ciano) 45%, transparent);
  transform: translateY(-2px);
}

.modo-cartao.ativo {
  border-color: var(--destaque);
  background: color-mix(in srgb, var(--destaque) 14%, transparent);
}

.modo-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--lavanda);
  color: var(--lavanda);
}

.modo-cartao.ativo .modo-icone { border-color: var(--destaque); color: var(--destaque); }
.modo-icone .icone { width: 18px; height: 18px; }

.modo-nome { font-size: 1rem; font-weight: 600; }

.modo-descricao {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

.modo-etiqueta {
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--destaque) 40%, transparent);
  background: color-mix(in srgb, var(--base) 55%, transparent);
  color: var(--destaque);
  font-size: 0.78rem;
  font-weight: 600;
  text-shadow: none;
}

.modo-etiqueta:hover {
  border-color: var(--destaque);
  background: color-mix(in srgb, var(--destaque) 16%, transparent);
}

.modo-etiqueta[hidden] { display: none; }
.modo-etiqueta .icone { width: 13px; height: 13px; }

.save-modo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--destaque) 15%, transparent);
  color: var(--destaque);
  font-size: 0.7rem;
  font-weight: 600;
}

.save-modo .icone { width: 11px; height: 11px; }

/* ---------- Balão do Foco total (componentes/modo.js): ela descansa; um clique, uma fala ---------- */
.balao-shion {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 20px 20px 20px 6px;
  border: 1px solid color-mix(in srgb, var(--destaque) 45%, transparent);
  background: color-mix(in srgb, var(--base) 78%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: balao-flutua 3.2s ease-in-out infinite;
  transition: border-color 0.2s, transform 0.2s;
}

.balao-shion[hidden] { display: none; }

.balao-shion:hover { border-color: var(--destaque); }

.balao-shion span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--destaque);
  opacity: 0.5;
  animation: balao-ponto 1.6s ease-in-out infinite;
}

.balao-shion span:nth-child(2) { animation-delay: 0.2s; }
.balao-shion span:nth-child(3) { animation-delay: 0.4s; }

@keyframes balao-flutua {
  50% { transform: translateY(-6px); }
}

@keyframes balao-ponto {
  50% { opacity: 1; transform: translateY(-2px); }
}

/* ---------- Autoplay do timer ---------- */
.pomodoro-autoplay {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  background: var(--vidro-forte);
  color: var(--texto-suave);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.pomodoro-autoplay .icone { width: 15px; height: 15px; }
.pomodoro-autoplay:hover { color: var(--texto); }

.pomodoro-autoplay.ativo {
  color: var(--base);
  background: var(--destaque);
  border-color: var(--destaque);
}

/* ==== Tarefas (componentes/tarefas.js) ====
   Primeira tela no estilo "Brilho doce" (regras na seção "Estilo da interface" do Focus/CLAUDE.md), tirado do
   botão "Conversas com a Shion": borda em degradê ciano→rosa, brilho suave em vez de sombra preta, ícone dentro
   de um círculo em degradê, pílulas, fonte arredondada e movimento com leve mola. Nada de borda cinza fina,
   linha cinza, barra de rolagem do sistema ou ícone solto sem tratamento. */
@font-face { font-family: 'Focus Arredondada'; font-weight: 500; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 700; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 800; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 500; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 700; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 800; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-latin-ext-800.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 500; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 700; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Focus Arredondada'; font-weight: 800; font-display: swap; src: url('../assets/fontes/mplus-rounded-1c-cyrillic-800.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --fonte-jogo: 'Focus Arredondada', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', 'Microsoft YaHei UI', system-ui, sans-serif;
  /* Degradê de assinatura (o do botão de chat) e versões suaves para bordas de repouso. */
  --doce: linear-gradient(135deg, var(--ciano), var(--magenta));
  --doce-suave: linear-gradient(135deg, color-mix(in srgb, var(--ciano) 45%, transparent), color-mix(in srgb, var(--magenta) 45%, transparent));
  --doce-fundo: linear-gradient(135deg, color-mix(in srgb, var(--ciano) 35%, transparent), color-mix(in srgb, var(--magenta) 45%, transparent));
  --brilho: 0 0 18px color-mix(in srgb, var(--magenta) 30%, transparent);
  --brilho-forte: 0 0 26px color-mix(in srgb, var(--magenta) 50%, transparent);
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tarefa ativa: à esquerda do botão de tarefas, com o centro na altura do centro dele. Várias linhas se empilham
   centralizadas no botão (a área cresce para cima e para baixo por igual). */
.botao-com-tarefas { position: relative; display: flex; }
.tarefas-ao-lado {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.tarefa-ativa {
  pointer-events: auto;
  max-width: 250px;
  text-align: right;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-suave);
  font-family: var(--fonte-jogo);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.tarefa-ativa:hover { color: var(--texto); background: var(--vidro); }
.tarefa-ativa[hidden] { display: none; }

/* ---- Moldura do painel (classe .painel-doce: todo painel ganha em engine.js > criarPainel) ----
   Altura fixa, mesmo com poucas tarefas, entre o relógio (termina em margem + 145px de --ui) e o rodapé (começa em
   margem + 52px de --ui), com 16px de folga; "top" desce o painel para o centro desse espaço. */
.painel:where(.painel-doce) {
  position: relative;
  top: calc(46px * var(--ui));
  width: 390px;
  height: min(760px, calc(100dvh - 2 * var(--margem) - 197px * var(--ui) - 32px));
  max-height: none;
  border-radius: 26px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  backdrop-filter: blur(14px);
  font-family: var(--fonte-jogo);
  font-weight: 500;
  /* 80% do tamanho desenhado, tudo junto (o André achou grande). tarefas.js converte as medidas por essa escala. */
  zoom: 0.8;
}
.painel-doce button, .painel-doce input { font-family: inherit; }

/* Cabeçalho: título arredondado e um fio de luz em degradê que some nas pontas (no lugar da linha cinza).
   É também a alça do painel (engine/painelMovel.js): arrastar pelo topo move o painel; a pega "⋮⋮⋮" no alto mostra isso. */
.painel-doce .painel-topo {
  position: relative;
  margin: 0 24px 20px;
  padding: 34px 0 18px;
}
.painel-topo-movel { cursor: grab; touch-action: none; user-select: none; }
.painel.movendo .painel-topo-movel { cursor: grabbing; }
.painel-doce.movendo { box-shadow: var(--brilho-forte); }
.painel-pega {
  position: absolute;
  top: 8px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 22px;
  border-radius: 999px;
  color: var(--texto-suave);
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
}
.painel-pega .icone { width: 26px; height: 26px; rotate: 90deg; stroke-width: 3; }
.painel-topo-movel:hover .painel-pega, .painel.movendo .painel-pega { opacity: 1; color: var(--magenta); background: var(--doce-fundo); }
.painel-doce .painel-topo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ciano) 18%, var(--magenta) 82%, transparent);
  opacity: 0.55;
}
.painel-doce .painel-topo h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.01em; }

/* Botão de fechar: ícone dentro do círculo em degradê, como o do botão de chat. Gira de leve no hover. */
.painel-doce .painel-fechar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--doce-fundo);
  color: var(--texto);
  opacity: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--magenta) 30%, transparent);
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.painel-doce .painel-fechar:hover { transform: rotate(90deg) scale(1.08); box-shadow: var(--brilho-forte); }
.painel-doce .painel-fechar:active { transform: rotate(90deg) scale(0.94); }
.painel-doce .painel-fechar .icone { width: 18px; height: 18px; stroke-width: 2.4; }

/* Rolagem: pílula fina em degradê, sem trilho. */
:where(.painel-doce) .painel-corpo {
  padding: 4px 22px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--magenta) 70%, transparent) transparent;
}
.painel-doce ::-webkit-scrollbar { width: 8px; }
.painel-doce ::-webkit-scrollbar-track { background: transparent; }
.painel-doce ::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--doce); border: 2px solid transparent; background-clip: padding-box; }
.painel-doce ::-webkit-scrollbar-thumb:hover { border-width: 1px; }

/* ---- Nome da lista com menu ---- */
.tarefas-listas { position: relative; margin-bottom: 20px; }
.tarefas-seletor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.tarefas-seletor:hover, .tarefas-seletor.aberto {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.tarefas-seletor:hover { transform: translateY(-2px); }
.tarefas-seletor-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* Seta do menu dentro do círculo em degradê; vira para cima quando o menu abre. */
.tarefas-seletor .icone {
  flex: none;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 9px;
  border-radius: 50%;
  background: var(--doce-fundo);
  stroke-width: 2.4;
  transition: transform 0.3s var(--mola);
}
.tarefas-seletor.aberto .icone { transform: rotate(180deg); }

.tarefas-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--magenta) 70%, transparent) transparent;
  animation: doce-abrir 0.22s var(--mola);
}
@keyframes doce-abrir { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.tarefas-menu-item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  transition: background 0.2s;
}
.tarefas-menu-item:hover { background: var(--doce-fundo); }
.tarefas-menu-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.tarefas-menu-nome .icone, .tarefas-menu-vazio { flex: none; width: 16px; height: 16px; color: var(--magenta); stroke-width: 2.8; }
.tarefas-menu-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefas-menu-contagem {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  color: var(--texto-suave);
  font-size: 0.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tarefas-menu-item.atual .tarefas-menu-texto { font-weight: 800; }
.tarefas-menu-item .tarefa-campo { margin: 4px; }
@media (hover: hover) {
  .tarefas-menu-item .tarefa-acao { visibility: hidden; }
  .tarefas-menu-item:hover .tarefa-acao, .tarefas-menu-item:focus-within .tarefa-acao, .tarefas-menu-item .tarefa-apagar.armado { visibility: visible; }
}
.tarefas-menu-nova {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.tarefas-menu-nova:hover:not(:disabled) { color: var(--texto); background: var(--doce-fundo); }
.tarefas-menu-nova:disabled { opacity: 0.4; cursor: default; }
.tarefas-menu-nova .icone { box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 50%; background: var(--doce-fundo); stroke-width: 2.6; }

/* ---- Contador e "+ Nova tarefa" (a pílula do botão de chat) ---- */
.tarefas-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.tarefas-contador {
  min-width: 2.6em;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--doce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tarefas-novo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.tarefas-novo .icone {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 50%;
  background: var(--doce-fundo);
  stroke-width: 2.6;
}
.tarefas-novo:hover:not(:disabled) { box-shadow: var(--brilho-forte); transform: translateY(-2px); }
.tarefas-novo:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.tarefas-novo:disabled { opacity: 0.4; cursor: default; }
.painel-tarefas .painel-vazio { font-size: 0.92rem; }
.tarefas-vazio { margin: 6px 4px 12px; }

/* ---- Cartões ---- */
.tarefas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Feitas: separadas por um fio de luz pontilhado. */
.tarefas-feitas {
  position: relative;
  margin-top: 24px;
  padding-top: 24px;
}
.tarefas-feitas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 70%, transparent) 1px, transparent 1.6px) 0 0 / 10px 2px repeat-x;
}

.tarefa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 10px 14px 10px 8px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola), background 0.25s;
}
.tarefa:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  transform: translateY(-2px);
}
/* Ativa: a borda inteira em degradê e o brilho, como o botão de chat. */
.tarefa.ativa {
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.tarefa.arrastando {
  z-index: 2;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  cursor: grabbing;
  transition: none;
}

.tarefa-alca {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-suave);
  cursor: grab;
  touch-action: none;
  opacity: 0.45;
  transition: opacity 0.2s, color 0.2s;
}
.tarefa:hover .tarefa-alca, .tarefa-alca:focus-visible { opacity: 1; color: var(--magenta); }
.tarefa-alca .icone { width: 18px; height: 18px; stroke-width: 2.8; }

/* Marcar: círculo com borda em degradê; feita, o círculo se enche do degradê e o visto "pula". */
.tarefa-marcar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce-suave) border-box;
  color: transparent;
  cursor: pointer;
  transition: transform 0.25s var(--mola), box-shadow 0.25s, color 0.2s;
}
.tarefa-marcar .icone { width: 18px; height: 18px; stroke-width: 3; }
.tarefa-marcar:hover { transform: scale(1.1); color: color-mix(in srgb, var(--magenta) 65%, transparent); box-shadow: var(--brilho); }
.tarefa.feita .tarefa-marcar {
  background: var(--doce) border-box;
  color: var(--base);
  animation: doce-pulo 0.4s var(--mola);
}
@keyframes doce-pulo { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }

.tarefa-nome {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.tarefa.feita .tarefa-nome {
  color: var(--texto-suave);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--magenta) 70%, transparent);
  text-decoration-thickness: 2px;
  cursor: default;
}
.tarefa-campo {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}
.tarefa-campo::placeholder { color: var(--texto-suave); font-weight: 500; }
.tarefa-campo:focus { outline: none; box-shadow: var(--brilho); }
.tarefa-nova { padding: 8px 10px; }

/* Prazo: data em pílula com o degradê de fundo; sem data, o calendário num círculo discreto. */
.tarefa-prazo {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--doce-fundo);
  color: var(--texto);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.tarefa-prazo:hover { transform: scale(1.06); box-shadow: var(--brilho); }
.tarefa-prazo.vazio { width: 30px; min-width: 30px; padding: 0; background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto-suave); }
.tarefa-prazo.vazio:hover { background: var(--doce-fundo); color: var(--texto); }
.tarefa-prazo .icone { width: 16px; height: 16px; stroke-width: 2.2; }
.tarefa.feita .tarefa-prazo { opacity: 0.55; }

/* Editar e apagar: círculos pequenos; no mouse, aparecem ao passar por cima do cartão; no toque, sempre. */
.tarefa-acoes { flex: none; display: flex; gap: 4px; }
.tarefa-acao {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto-suave);
  cursor: pointer;
  transition: transform 0.25s var(--mola), background 0.2s, color 0.2s;
}
.tarefa-acao:hover { color: var(--texto); background: var(--doce-fundo); transform: scale(1.08); }
.tarefa-acao .icone { width: 15px; height: 15px; stroke-width: 2.2; }
.tarefa-apagar.armado { color: var(--base); background: var(--magenta); box-shadow: var(--brilho); }
/* Diária: o botão de repetir ligado fica cheio do degradê; fora do hover, um ícone pequeno ao lado do nome avisa. */
.tarefa-diaria[aria-pressed="true"] { background: var(--doce); color: var(--base); }
.tarefa-repete {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--doce-fundo);
  color: var(--texto);
}
.tarefa-repete .icone { width: 13px; height: 13px; stroke-width: 2.4; }
@media (hover: hover) {
  .tarefa:hover .tarefa-repete, .tarefa:focus-within .tarefa-repete { display: none; }
}
@media (hover: hover) {
  .tarefa-acoes { display: none; }
  .tarefa:hover .tarefa-acoes, .tarefa:focus-within .tarefa-acoes { display: flex; }
  .tarefa.arrastando .tarefa-acoes { display: none; }
}

/* ---- Calendário do prazo ---- */
.calendario {
  position: absolute;
  z-index: 5;
  width: 272px;
  padding: 14px;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  font-family: var(--fonte-jogo);
  animation: doce-abrir 0.22s var(--mola);
}
.cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-mes { font-size: 0.95rem; font-weight: 800; }
.cal-seta {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--doce-fundo);
  color: var(--texto);
  cursor: pointer;
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.cal-seta:hover { transform: scale(1.1); box-shadow: var(--brilho); }
.cal-seta .icone { width: 15px; height: 15px; stroke-width: 2.6; }
.cal-semana, .cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}
.cal-semana span {
  padding: 4px 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--texto-suave);
}
.cal-dia {
  height: 32px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.2s var(--mola), background 0.2s;
}
.cal-dia:hover { background: var(--doce-fundo); transform: scale(1.1); }
.cal-dia.passado { color: var(--texto-suave); opacity: 0.5; font-weight: 500; }
.cal-dia.hoje { background: linear-gradient(var(--base), var(--base)) padding-box, var(--doce) border-box; }
.cal-dia.escolhido { background: var(--doce) border-box; color: var(--base); font-weight: 800; opacity: 1; box-shadow: var(--brilho); }
.cal-rodape {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

/* Botões pequenos de texto (Hoje, Sem data, Limpar feitas): pílula com borda em degradê suave. */
.cal-rodape button, .tarefas-rodape button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto-suave);
  font-family: var(--fonte-jogo);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.25s, transform 0.25s var(--mola);
}
.cal-rodape button:hover, .tarefas-rodape button:hover {
  color: var(--texto);
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: translateY(-1px);
}
.tarefas-rodape {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}


/* ==== Player de música no estilo "Brilho doce" (16/10; regras no Focus/CLAUDE.md) ====
   Segunda tela no estilo, depois da Lista de tarefas. Vem depois das regras antigas do player e as substitui:
   pílula com borda em degradê e brilho, controles dentro de círculos, o play maior cheio do degradê, barra de
   progresso com a parte tocada em degradê e a bolinha com anel de luz. O tamanho do player não mudou. */
#player {
  gap: 18px;
  padding: 10px 22px 10px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  backdrop-filter: blur(10px);
  font-family: var(--fonte-jogo);
  transition: box-shadow 0.3s;
}
#player:hover {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
}
#player button, #player input { font-family: inherit; }

.player-titulo { font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; }
#player.vazio .player-titulo { font-style: normal; font-weight: 500; }

/* Playlist atual: pílula pequena com a seta num círculo, como o seletor de listas das tarefas. */
.player-playlist {
  gap: 6px;
  margin-top: 4px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--doce-fundo);
  color: var(--texto);
  font-size: 0.75rem;
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.player-playlist::after {
  width: 5px;
  height: 5px;
  margin: 0 5px 0 2px;
  border-width: 0 2px 2px 0;
  border-right-style: solid;
  border-bottom-style: solid;
  border-color: currentColor;
  border-radius: 1px;
  transform: rotate(-135deg) translate(-1px, -1px);
}
.player-playlist:hover { color: var(--texto); box-shadow: var(--brilho); transform: translateY(-1px); }

/* Controles: cada um num círculo; ligado (aleatório, repetir) fica com o fundo em degradê. */
.player-controles { gap: 8px; }
.player-botao {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto);
  opacity: 0.85;
  transition: transform 0.25s var(--mola), background 0.2s, box-shadow 0.25s, opacity 0.2s, color 0.2s;
}
.player-botao .icone { width: 17px; height: 17px; stroke-width: 2.2; }
.player-botao:hover:not(:disabled) { opacity: 1; color: var(--texto); background: var(--doce-fundo); transform: scale(1.1); }
.player-botao:active:not(:disabled) { transform: scale(0.94); }
.player-botao.ativo { opacity: 1; color: var(--magenta); background: var(--doce-fundo); box-shadow: 0 0 0 1px color-mix(in srgb, var(--magenta) 35%, transparent); }
.player-botao:disabled { opacity: 0.3; }

/* Play/pausa: o maior, cheio do degradê, com brilho. */
.player-botao.player-principal {
  width: 44px;
  height: 44px;
  background: var(--doce);
  color: var(--base);
  opacity: 1;
  box-shadow: var(--brilho);
}
.player-principal .icone { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.6; }
.player-botao.player-principal:hover:not(:disabled) { background: var(--doce); color: var(--base); box-shadow: var(--brilho-forte); transform: scale(1.08); }

/* Barra de progresso: trilho arredondado, parte tocada em degradê, bolinha branca com anel de luz. */
#player-progresso { width: 270px; height: 18px; }
#player-progresso::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--ciano), var(--magenta)) 0 0 / var(--preenchido, 0%) 100% no-repeat,
    color-mix(in srgb, var(--texto) 14%, transparent);
}
#player-progresso::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 14%, transparent); }
#player-progresso::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--doce); }
#player-progresso::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -4px;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho);
  transition: transform 0.25s var(--mola);
}
#player-progresso::-moz-range-thumb { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho); }
#player-progresso:hover::-webkit-slider-thumb { transform: scale(1.25); }

/* Volume: a janelinha vertical na mesma moldura (borda em degradê e brilho, sem sombra preta). */
.player-volume {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  font-family: var(--fonte-jogo);
  animation: doce-abrir 0.22s var(--mola);
}
.player-volume[hidden] { display: none; }
.player-volume-valor { font-weight: 800; color: var(--texto); }
.player-volume-trilho input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--ciano), var(--magenta)) 0 0 / var(--preenchido, 0%) 100% no-repeat,
    color-mix(in srgb, var(--texto) 14%, transparent);
}
.player-volume-trilho input[type="range"]::-webkit-slider-thumb {
  margin-top: -4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho);
}

/* Botão das playlists (nota musical), parte do player: círculo com borda em degradê, como o ícone do chat. */
#botao-playlist {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
#botao-playlist:hover:not(:disabled) {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  transform: translateY(-2px);
}
#botao-playlist .icone {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 50%;
  background: var(--doce-fundo);
}


/* ==== Painel de playlists no estilo "Brilho doce" (16/10; regras no Focus/CLAUDE.md) ====
   Moldura, topo arrastável, X, rolagem, tamanho (80%) e altura: os da classe .painel-doce (bloco das Tarefas).
   Aqui só o miolo, que substitui as regras antigas do painel de playlists. Ordem do miolo: seletor da playlist,
   "Tocar playlist" com o aleatório ao lado, "Importar" numa linha própria, fio de luz e a lista de faixas. */
.painel.painel-playlist { width: 390px; }
.painel-playlist .painel-corpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Seletor da playlist: a mesma pílula do seletor de listas das tarefas. */
.pl-seletor-area { position: relative; padding: 4px 24px 0; }
.pl-seletor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-size: 1.02rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.pl-seletor::after { content: none; }
.pl-seletor span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-seletor small {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 700;
}
.pl-seletor .icone {
  flex: none;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 9px;
  border-radius: 50%;
  background: var(--doce-fundo);
  stroke-width: 2.4;
  transition: transform 0.3s var(--mola);
}
.pl-seletor:hover, .pl-seletor.aberto {
  border-color: transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.pl-seletor:hover { transform: translateY(-2px); }
.pl-seletor.aberto .icone { transform: rotate(180deg); }

.pl-opcoes {
  z-index: 6;
  left: 24px;
  right: 24px;
  top: calc(100% + 8px);
  padding: 8px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  animation: doce-abrir 0.22s var(--mola);
}
.pl-opcoes[hidden] { display: none; }
.pl-opcao {
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--texto);
  font-family: var(--fonte-jogo);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.2s;
}
.pl-opcao small {
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  font-size: 0.72rem;
}
.pl-opcao:hover { background: var(--doce-fundo); }
.pl-opcao.ativo { background: var(--doce-fundo); font-weight: 800; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 40%, transparent); }

/* Ações: "Tocar playlist" (a pílula principal, como "+ Nova tarefa") e o aleatório na primeira linha;
   "Importar" na segunda, ocupando a largura toda. Embaixo, um fio de luz no lugar da linha cinza. */
.pl-acoes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 22px;
  border-bottom: 0;
}
.pl-acoes::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ciano) 18%, var(--magenta) 82%, transparent);
  opacity: 0.55;
}
.pl-acao {
  height: 46px;
  gap: 10px;
  padding: 0 20px 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
#pl-tocar-playlist { flex: 1; justify-content: center; }
.pl-acao .icone {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 50%;
  background: var(--doce-fundo);
  stroke-width: 2.4;
}
#pl-tocar-playlist .icone { fill: currentColor; }
.pl-acao:hover:not(:disabled) {
  border-color: transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  transform: translateY(-2px);
}
.pl-acao:active:not(:disabled) { transform: scale(0.97); }
/* Aleatório: só o círculo; ligado, fica cheio do degradê. */
.pl-acao.pl-acao-icone {
  flex: none;
  width: 46px;
  padding: 0;
  justify-content: center;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: none;
}
.pl-acao.pl-acao-icone .icone { padding: 0; background: none; width: 19px; height: 19px; }
.pl-acao.pl-acao-icone.ativo {
  border-color: transparent;
  background: var(--doce) border-box;
  color: var(--base);
  box-shadow: var(--brilho);
}

.pl-importar {
  order: 3;
  flex: 1 0 100%;
  justify-content: space-between;
  gap: 6px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 6px 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
}
.pl-importar-rotulo { flex: 1; gap: 8px; margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--texto); }
.pl-importar-rotulo .icone { width: 17px; height: 17px; color: var(--magenta); stroke-width: 2.2; }
.pl-importar-botao {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--doce-fundo);
  color: var(--texto);
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.pl-importar-botao .icone { width: 16px; height: 16px; stroke-width: 2.2; }
.pl-importar-botao:hover:not(:disabled) { background: var(--doce-fundo); box-shadow: var(--brilho); transform: scale(1.1); }

.pl-aviso {
  margin: 14px 24px 0;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce-suave) border-box;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Lista de faixas: cartões como os das tarefas; a que está tocando ganha a borda inteira em degradê e o brilho. */
.pl-lista {
  gap: 12px;
  padding: 20px 22px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--magenta) 70%, transparent) transparent;
  /* As faixas somem suavemente nas bordas ao rolar, em vez de serem cortadas secas. */
  -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.pl-faixa {
  gap: 10px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola), opacity 0.2s;
}
.pl-faixa:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  transform: translateY(-2px);
}
.pl-faixa.tocando {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}

/* Incluir na reprodução: círculo com borda em degradê; ligado, cheio do degradê com o visto. */
.pl-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce-suave) border-box;
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.pl-check:hover { transform: scale(1.1); box-shadow: var(--brilho); }
.pl-check[aria-pressed="true"] { border-color: transparent; background: var(--doce) border-box; }
.pl-check[aria-pressed="true"]::after { left: 7px; top: 3px; width: 5px; height: 10px; border-right-width: 2.5px; border-bottom-width: 2.5px; }

.pl-tocar, .pl-fav, .pl-remover {
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto);
  opacity: 0.9;
  transition: transform 0.25s var(--mola), background 0.2s, box-shadow 0.25s, color 0.2s;
}
.pl-tocar .icone { width: 15px; height: 15px; fill: currentColor; stroke-width: 1.6; }
.pl-fav .icone, .pl-remover .icone { width: 16px; height: 16px; stroke-width: 2.2; }
.pl-tocar:hover:not(:disabled), .pl-fav:hover, .pl-remover:hover { opacity: 1; background: var(--doce-fundo); transform: scale(1.1); }
.pl-faixa.tocando .pl-tocar { background: var(--doce); color: var(--base); opacity: 1; box-shadow: var(--brilho); }
.pl-fav[aria-pressed="true"] { color: #f0c98a; background: color-mix(in srgb, #f0c98a 16%, transparent); }
.pl-fav[aria-pressed="true"] .icone { fill: currentColor; }
.pl-remover:hover { color: var(--magenta); }

/* Gostei e Não gostei: mesmos círculos da estrela; marcado, ciano (gostei) ou magenta (não gostei). */
.pl-gostei, .pl-naogostei {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto);
  opacity: 0.9;
  transition: transform 0.25s var(--mola), background 0.2s, box-shadow 0.25s, color 0.2s;
}
.pl-gostei .icone, .pl-naogostei .icone { width: 16px; height: 16px; stroke-width: 2.2; }
.pl-gostei:hover, .pl-naogostei:hover { opacity: 1; background: var(--doce-fundo); transform: scale(1.1); }
.pl-gostei[aria-pressed="true"] { color: var(--ciano); background: color-mix(in srgb, var(--ciano) 16%, transparent); }
.pl-naogostei[aria-pressed="true"] { color: var(--magenta); background: color-mix(in srgb, var(--magenta) 16%, transparent); }

.pl-nome span { font-size: 0.98rem; font-weight: 700; }
.pl-nome small { margin-top: 1px; font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pl-vazio { font-size: 0.92rem; font-weight: 500; }

.painel-playlist.pl-soltando {
  outline: 2px dashed color-mix(in srgb, var(--magenta) 70%, transparent);
  outline-offset: -10px;
}


/* ==== "Brilho doce" no resto do jogo (16/10; regras no Focus/CLAUDE.md) ====
   Vem por último e substitui o visual antigo de cada parte, sem mudar o que cada uma faz. Todo painel já ganha a
   moldura .painel-doce em engine.js (criarPainel); aqui ficam os controles comuns e o miolo de cada tela, na
   ordem da tela: controles comuns, botões redondos, relógio e perfil, nível e timer, caixa de fala e escolhas,
   balão, diálogos, painéis (Ambiente, Configurações e Aparência, Estatísticas, Conversas, Save / Load, PC da
   Shion), Manuscrito e abertura do jogo. A leitura da história mantém a fonte serifada e a paleta dela. */

html, body { font-family: var(--fonte-jogo); }
button, input, select, textarea { font-family: inherit; }

/* ---- Controles comuns ---- */

/* Rolagem: pílula fina em degradê, sem trilho. */
@supports (-moz-appearance: none) {
  * { scrollbar-color: color-mix(in srgb, var(--magenta) 70%, transparent) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--doce); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--doce); background-clip: padding-box; border-width: 1px; }

/* Deslizador: trilho arredondado, parte cheia em degradê (--preenchido, de controles.js), bolinha com anel de luz. */
input[type="range"] { height: 18px; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--ciano), var(--magenta)) 0 0 / var(--preenchido, 0%) 100% no-repeat,
    color-mix(in srgb, var(--texto) 14%, transparent);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 14%, transparent); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--doce); }
input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -4px;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho);
  transition: transform 0.25s var(--mola);
}
input[type="range"]::-moz-range-thumb { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho); }
input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb { transform: scale(1.2); }

/* Seletor: pílula com a seta dentro de um círculo em degradê. */
select {
  height: 38px;
  padding: 0 42px 0 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--magenta) 40%, transparent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f0f7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center / 14px,
    radial-gradient(circle at calc(100% - 18px) 50%, color-mix(in srgb, var(--magenta) 40%, transparent) 0 12px, transparent 12.5px),
    var(--vidro-forte);
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.25s;
}
select:hover { border-color: var(--magenta); box-shadow: var(--brilho); }

/* Campos de texto e número: pílula com borda rosada; com o foco, brilho. */
input[type="number"] {
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--magenta) 40%, transparent) !important;
  background: var(--vidro-forte);
  font-weight: 700;
}
.perfil-nome-linha input, .dialogo-nome input[type="text"], #pv-nome input {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--magenta) 40%, transparent);
  background: var(--vidro-forte);
  font-weight: 700;
}
.perfil-nome-linha input:focus, .dialogo-nome input[type="text"]:focus, #pv-nome input:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--magenta) !important;
  box-shadow: var(--brilho);
}

/* Foco pelo teclado: anel rosado com brilho. */
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* Interruptor: trilho em pílula; ligado, cheio do degradê e a bolinha branca com brilho. */
.interruptor {
  width: 42px;
  height: 24px;
  border: 1.5px solid color-mix(in srgb, var(--magenta) 35%, transparent);
  background: color-mix(in srgb, var(--texto) 10%, transparent);
}
.interruptor::after { top: 2.5px; left: 3px; transition: transform 0.3s var(--mola), background 0.25s; }
.interruptor[aria-checked="true"] { border-color: transparent; background: var(--doce); box-shadow: var(--brilho); }
.interruptor[aria-checked="true"]::after { transform: translateX(17px); background: #fff; }

/* Título de seção dentro dos painéis: sem maiúsculas espaçadas; um traço em degradê na frente.
   Não vale para o texto da história (as cenas do roteiro, dentro de .leitura, mantêm o formato delas). */
.painel-corpo h3:not(.leitura *) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texto);
}
.painel-corpo h3:not(.leitura *)::before {
  content: '';
  flex: none;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--doce);
}
.painel-vazio, .config-aviso { font-weight: 500; }

/* Abas (Save / Load, Estatísticas): trilho em pílula; a aba ativa ganha o degradê de fundo e o brilho. */
.save-abas {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
}
.save-aba {
  padding: 8px 0;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s, box-shadow 0.25s;
}
.save-aba:hover { color: var(--texto); }
.save-aba.ativa { background: var(--doce-fundo); color: var(--texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho); }

/* Botões de texto (diálogos, saves, abertura): pílula com borda em degradê suave; o principal, como "+ Nova tarefa". */
.save-acao {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-size: 0.88rem;
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.save-acao:hover:not(:disabled) {
  border-color: transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: translateY(-2px);
}
.save-acao:active:not(:disabled) { transform: scale(0.97); }
.save-acao.principal, .save-acao.armado {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.save-acao.perigo:hover, .save-acao.perigo.armado, .save-acao.principal.perigo {
  border-color: transparent;
  background:
    linear-gradient(rgba(240, 90, 110, 0.32), rgba(240, 90, 110, 0.32)) padding-box,
    linear-gradient(135deg, rgb(255, 150, 170), rgb(240, 90, 110)) border-box;
  box-shadow: 0 0 18px rgba(240, 90, 110, 0.35);
}

/* Opções lado a lado (Tela cheia / Janela, 12 / 24 horas, tamanho do texto, presets de vídeo): pílulas; a escolhida
   ganha o degradê de fundo, a borda inteira em degradê e o brilho. */
.config-linha .ambiente-periodos, .config-presets { gap: 6px; }
.config-linha .ambiente-periodos button, .config-presets button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.config-linha .ambiente-periodos button:hover:not(:disabled), .config-presets button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--brilho); }
.config-linha .ambiente-periodos button.ativo, .config-presets button.ativo {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 24%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 24%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}

/* ---- Botões redondos (coluna da direita, rodapé, encerrar) ----
   Como o botão das playlists: borda em degradê suave e o ícone dentro do círculo em degradê; sobem no hover. */
.botao-redondo {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.botao-redondo:hover:not(:disabled) {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  transform: translateY(-2px);
}
.botao-redondo:active:not(:disabled) { transform: scale(0.95); }
.botao-redondo .icone {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 50%;
  background: var(--doce-fundo);
}
.botao-redondo:disabled { box-shadow: none; }
.botao-redondo.perigo {
  background:
    linear-gradient(rgba(200, 69, 90, 0.85), rgba(200, 69, 90, 0.85)) padding-box,
    linear-gradient(135deg, rgb(255, 150, 170), rgb(240, 90, 110)) border-box;
  box-shadow: 0 0 18px rgba(240, 90, 110, 0.35);
}
.botao-redondo.perigo .icone { background: rgba(255, 255, 255, 0.16); }

/* "+" do roteiro novo: círculo pequeno com borda em degradê. */
.botao-mais {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.botao-mais:hover { background: var(--doce) border-box; color: var(--base); box-shadow: var(--brilho-forte); }
.botao-mais .icone { stroke-width: 2.6; }

/* ---- Relógio, saudação e etiqueta do modo ---- */
.relogio-hora { font-weight: 800; letter-spacing: 0.01em; }
.relogio-data { font-weight: 700; }

#perfil-saudacao { padding: 3px 12px 3px 3px; border-radius: 999px; font-weight: 700; transition: background 0.2s, border-color 0.2s, box-shadow 0.25s; }
#perfil-saudacao:hover, #perfil-saudacao:focus-visible {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base) 70%, transparent), color-mix(in srgb, var(--base) 70%, transparent)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
}
.perfil-avatar { border: 0; background: var(--doce-fundo); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--magenta) 45%, transparent); }

.modo-etiqueta {
  padding: 4px 12px 4px 4px;
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base) 70%, transparent), color-mix(in srgb, var(--base) 70%, transparent)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.modo-etiqueta .icone { box-sizing: content-box; padding: 4px; border-radius: 50%; background: var(--doce-fundo); }
.modo-etiqueta:hover {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base) 70%, transparent), color-mix(in srgb, var(--base) 70%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: translateY(-1px);
}

/* ---- Nível e timer ---- */
#nivel, #pomodoro {
  box-shadow: var(--brilho), inset 0 0 0 1px color-mix(in srgb, var(--magenta) 18%, transparent);
  font-family: var(--fonte-jogo);
}
.nivel-rotulo { font-weight: 700; }
.nivel-numero { font-weight: 800; }
.nivel-ganho {
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  font-weight: 800;
}
.nivel-ganho.nivel-xp { border-color: transparent; font-weight: 700; }

.pomodoro-rotulo, .pomodoro-status { font-weight: 700; }
.pomodoro-valor, .pomodoro-tempo { font-weight: 800; letter-spacing: 0.01em; }
.pomodoro-pontos span { width: 9px; height: 9px; border: 1.5px solid color-mix(in srgb, var(--magenta) 60%, transparent); }
.pomodoro-pontos span.cheio { border-color: transparent; background: var(--doce); box-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 50%, transparent); }
/* Setas do tempo: círculo pequeno que acende no hover. */
.pomodoro-seta {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 999px;
  color: var(--texto);
  transition: background 0.2s, transform 0.25s var(--mola), opacity 0.2s;
}
.pomodoro-seta:hover { background: var(--doce-fundo); transform: scale(1.1); }
.pomodoro-seta .icone { stroke-width: 2.6; }
/* Play: o círculo cheio do degradê, como o do player. */
.pomodoro-play {
  background: var(--doce);
  color: var(--base);
  box-shadow: var(--brilho);
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.pomodoro-play:hover { box-shadow: var(--brilho-forte); transform: scale(1.08); }
.pomodoro-play:active { transform: scale(0.94); }
.pomodoro-play .icone { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.6; }
/* Parar, pausar e pular: cada um num círculo. */
.pomodoro-controles { gap: 10px; }
.pomodoro-controles button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 9%, transparent);
  color: var(--texto);
  opacity: 0.9;
  transition: background 0.2s, transform 0.25s var(--mola), opacity 0.2s;
}
.pomodoro-controles button:hover { opacity: 1; background: var(--doce-fundo); transform: scale(1.1); }
.pomodoro-controles .icone { width: 17px; height: 17px; stroke-width: 2.2; }
/* Autoplay: círculo com borda em degradê; ligado, cheio do degradê. */
.pomodoro-autoplay {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  transition: color 0.2s, box-shadow 0.25s, transform 0.25s var(--mola);
}
.pomodoro-autoplay:hover { color: var(--texto); box-shadow: var(--brilho); transform: translateX(-50%) scale(1.1); }
.pomodoro-autoplay.ativo { border-color: transparent; background: var(--doce) border-box; color: var(--base); box-shadow: var(--brilho); }
.pomodoro-autoplay .icone { stroke-width: 2.4; }

/* ---- Caixa de fala e escolhas ---- */
#caixa-fala {
  border-radius: 24px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  backdrop-filter: blur(12px);
}
#nome-fala { font-weight: 800; letter-spacing: 0.01em; }
#texto-fala { font-weight: 500; }
#texto-fala strong { font-weight: 800; }
#dica-avancar { font-weight: 700; }

.opcao {
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 85%, transparent), color-mix(in srgb, var(--base-clara) 85%, transparent)) padding-box,
    var(--doce-suave) border-box;
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.opcao::before { width: 10px; height: 10px; background: var(--doce); opacity: 0.8; }
.opcao:hover {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 16%, var(--base-clara)), color-mix(in srgb, var(--magenta) 16%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  transform: translateY(-2px);
}
.opcao.opcao-aleatoria {
  border-style: solid;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 60%, transparent), color-mix(in srgb, var(--base-clara) 60%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 25%, transparent), color-mix(in srgb, var(--magenta) 25%, transparent)) border-box;
}
.opcao-lembrar { font-weight: 700; }
/* Prazo da fala: trilho arredondado com o degradê correndo. */
.fala-prazo { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 14%, transparent); }
.fala-prazo span { border-radius: 999px; background: var(--doce); box-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 50%, transparent); }

/* Balão do Foco total: borda em degradê e brilho no lugar da sombra preta; pontinhos em degradê. */
.balao-shion {
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base) 82%, transparent), color-mix(in srgb, var(--base) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
}
.balao-shion:hover {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base) 82%, transparent), color-mix(in srgb, var(--base) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
}
.balao-shion span { background: var(--doce); }

/* ---- Diálogos (confirmação, modo de jogo, nome) ---- */
.dialogo {
  border-radius: 26px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  animation: doce-abrir 0.25s var(--mola);
}
.dialogo h2 { font-weight: 800; }
.dialogo p { font-weight: 500; }
.dialogo-acoes { gap: 10px; }

.modo-cartao {
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.modo-cartao:hover { transform: translateY(-3px); box-shadow: var(--brilho); }
.modo-cartao.ativo {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 14%, var(--base-clara)), color-mix(in srgb, var(--magenta) 14%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.modo-icone { border: 0; background: var(--doce-fundo); color: var(--texto); }
.modo-cartao.ativo .modo-icone { background: var(--doce); color: var(--base); }
.modo-icone .icone { stroke-width: 2.2; }
.modo-nome { font-weight: 800; }
.save-modo { background: var(--doce-fundo); color: var(--texto); font-weight: 700; }

/* ---- Painel Ambiente ---- */
/* Faixas das seções: o título com o traço em degradê e um fio de luz embaixo (sem as linhas cinza). */
#painel-ambiente .painel-corpo h3.ambiente-faixa {
  position: relative;
  margin: 22px 0 16px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  font-size: 0.95rem;
  font-weight: 800;
}
#painel-ambiente .painel-corpo h3.ambiente-faixa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ciano), var(--magenta) 60%, transparent);
  opacity: 0.45;
}
/* Círculos: borda em degradê suave; ativo, a borda inteira em degradê e o brilho (no lugar do neon deslocado). */
#painel-ambiente .ambiente-circulo {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  transition: box-shadow 0.25s, transform 0.25s var(--mola), color 0.2s;
}
#painel-ambiente .ambiente-circulo:hover:not(:disabled) { color: var(--texto); border-color: transparent; transform: translateY(-2px) scale(1.05); box-shadow: var(--brilho); }
#painel-ambiente .ambiente-circulo.ativo {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--base-clara)), color-mix(in srgb, var(--magenta) 22%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
#painel-ambiente .ambiente-periodos:has(.ambiente-auto.ativo) .ambiente-periodo.ativo {
  border-color: transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce) border-box;
  box-shadow: none;
}
#painel-ambiente .ambiente-circulo:disabled {
  border-color: transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 12%, transparent), color-mix(in srgb, var(--magenta) 12%, transparent)) border-box;
}
#painel-ambiente .ambiente-auto { font-weight: 800; letter-spacing: 0.02em; }
.ambiente-item-nome { font-weight: 700; }
.ambiente-cadeado { border: 0; background: var(--doce); color: var(--base); }
#painel-ambiente .ambiente-item input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background:
    linear-gradient(90deg, var(--ciano), var(--magenta)) 0 0 / var(--preenchido, 0%) 100% no-repeat,
    color-mix(in srgb, var(--texto) 16%, transparent);
}
#painel-ambiente .ambiente-item input[type="range"]::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3px; }
/* Dica do jogo: pílula com borda em degradê. */
#painel-ambiente [data-dica]::after {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  font-weight: 700;
}

/* ---- Configurações e Aparência ---- */
/* Setores separados por um fio de luz, não por linha cinza. */
.config-secao { position: relative; border-top: 0; }
.config-secao + .config-secao::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ciano) 18%, var(--magenta) 82%, transparent);
  opacity: 0.35;
}
.config-linha { font-weight: 700; }
.config-valor { font-weight: 800; }
.config-reset {
  width: 28px;
  height: 28px;
  border: 0;
  background: var(--doce-fundo);
  transition: transform 0.25s var(--mola), box-shadow 0.25s, opacity 0.2s;
}
.config-reset:hover:not(:disabled) { transform: rotate(-45deg) scale(1.1); box-shadow: var(--brilho); }
.config-reset .icone { stroke-width: 2.4; }
.config-paletas button { height: 28px; width: 46px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--texto) 12%, transparent); transition: transform 0.25s var(--mola), box-shadow 0.25s; }
.config-paletas button:hover { transform: translateY(-2px); }
.config-paletas button.ativa { border-color: #fff; box-shadow: var(--brilho); }
.config-paletas-nome { font-weight: 700; }

/* ---- Perfil ---- */
.perfil-rotulo { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.01em; text-transform: none; color: var(--texto); }
.perfil-nota { font-weight: 500; }
.perfil-avatar-opcao {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--base-clara), var(--base-clara)) padding-box,
    var(--doce-suave) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.perfil-avatar-opcao:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--brilho); }
.perfil-avatar-opcao.ativo {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--base-clara)), color-mix(in srgb, var(--magenta) 22%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.perfil-resumo-bloco, .es-bloco {
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 18%, transparent), color-mix(in srgb, var(--magenta) 18%, transparent)) border-box;
}
.perfil-resumo-bloco strong { font-weight: 800; }
.perfil-resumo-bloco span { font-weight: 700; }

/* ---- Estatísticas ---- */
.es-secao + .es-secao { border-top: 0; }
.es-valor { font-weight: 800; }
.es-rotulo, .es-capitulo, .es-progresso-texto, .es-subtitulo { font-weight: 700; }
.es-progresso { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 12%, transparent); }
.es-progresso-barra { border-radius: 999px; background: var(--doce); box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 45%, transparent); }
.es-linha { border-bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--magenta) 30%, transparent), transparent) bottom / 100% 1px no-repeat; font-weight: 700; }
.es-linha strong { font-weight: 800; }
.es-grupo .es-cap { border-radius: 999px; background: var(--doce-fundo); color: var(--texto); font-weight: 800; }
.es-grupo li { border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, var(--magenta) 12%, transparent); font-weight: 700; }
.es-completa { border: 0; background: var(--doce); color: var(--base); font-weight: 800; box-shadow: var(--brilho); }
.es-grafico { border-bottom: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--magenta) 45%, transparent), transparent) bottom / 100% 2px no-repeat; }
.es-coluna { border-radius: 10px; }
.es-dia:hover .es-coluna, .es-dia:focus-visible .es-coluna { background: var(--doce-fundo); }
.es-barra { border-radius: 999px 999px 4px 4px; background: linear-gradient(0deg, var(--ciano), var(--magenta)); box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 35%, transparent); }
.es-dia-nome { font-weight: 700; }
.es-dia.hoje .es-dia-nome { font-weight: 800; }
.es-dica {
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--base), var(--base)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  font-weight: 700;
}
.es-save { font-weight: 700; }

/* ---- Conversas com a Shion ---- */
/* Abas em pílula, como as do Save / Load. */
.cv-abas {
  gap: 4px;
  margin: 0 24px;
  padding: 4px;
  border-bottom: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
}
.cv-aba { padding: 8px 12px; border-bottom: 0; border-radius: 999px; font-weight: 700; transition: background 0.2s, color 0.2s, box-shadow 0.25s; }
.cv-aba.ativa { background: var(--doce-fundo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 45%, transparent), var(--brilho); }
.cv-lista { gap: 12px; padding: 20px 22px 24px 24px; -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.cv-bloco {
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.cv-bloco:hover:not(:disabled) {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: translateY(-2px);
}
.cv-icone { border: 0; background: var(--doce-fundo); color: var(--texto); }
.cv-bloco:disabled .cv-icone { border: 0; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.cv-texto strong { font-weight: 800; }
.cv-texto small { font-weight: 500; }
.cv-marca { background: var(--doce); color: var(--base); font-weight: 800; letter-spacing: 0.01em; text-transform: none; }
.cv-vazio { font-weight: 500; }

/* ---- Save / Load ---- */
.save-explicacao { font-weight: 500; }
.save-lista { gap: 10px; }
.save-linha {
  padding: 10px 40px 10px 16px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 16%, transparent), color-mix(in srgb, var(--magenta) 16%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.save-linha.clicavel:hover {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  transform: translateY(-2px);
}
.save-linha.vazio {
  border-style: solid;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 40%, transparent), color-mix(in srgb, var(--base-clara) 40%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 10%, transparent), color-mix(in srgb, var(--magenta) 10%, transparent)) border-box;
}
.save-linha.ativo, .save-linha.armado, .save-linha.acabou-de-salvar {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.save-linha.armado { box-shadow: var(--brilho-forte); }
.save-historia { font-weight: 800; }
.save-capitulo, .save-linha-base { font-weight: 500; }
.save-ativo, .save-confirmar { font-weight: 800; }
.save-apagar { background: color-mix(in srgb, var(--texto) 8%, transparent); transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.25s var(--mola); }
.save-apagar:hover, .save-apagar.armado { transform: scale(1.1); }

/* ---- PC da Shion (espiar e leitura no painel) ---- */
/* O espiar mostra só as últimas linhas: a altura acompanha o conteúdo (exceção à altura fixa). */
.painel.painel-espiar { height: auto; }
.leitura-meta, .leitura-rodape { border: 0; position: relative; }
.leitura-meta { font-weight: 700; }
.leitura-rodape::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ciano) 18%, var(--magenta) 82%, transparent);
  opacity: 0.45;
}
.leitura-status { font-weight: 700; }
.leitura-status.ativo::before { background: var(--doce); box-shadow: 0 0 8px var(--magenta); }
.leitura-salvar, .leitura-ler, .leitura-novas {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.leitura-salvar .icone { box-sizing: content-box; padding: 4px; border-radius: 50%; background: var(--doce-fundo); }
.leitura-salvar.icone-so { width: 36px; padding: 0; justify-content: center; }
.leitura-ler, .leitura-novas {
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.leitura-salvar:hover, .leitura-ler:hover, .leitura-novas:hover {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  transform: translateY(-2px);
}
.leitura-novas:hover { transform: translateX(-50%) translateY(-2px); }
.leitura-ler.tem-novo { box-shadow: var(--brilho-forte); }
/* Rodapé: o status e os números em duas linhas, cada um com a largura toda (antes cortavam com reticências). */
.leitura-info { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; }
.leitura-status, .leitura-numeros { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.leitura-numeros { padding-left: 15px; }
.leitura-numeros::before { content: none; }
.espiar-fim b { font-weight: 800; }

/* ---- Manuscrito (tela cheia): a moldura e os botões no estilo; o texto segue serifado. ---- */
.ms-caixa {
  border-radius: 28px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho-forte);
}
.ms-sub, .ms-cartao-info { font-weight: 700; }
.ms-selo, .ms-etiqueta { border: 0; background: var(--doce-fundo); color: var(--texto); font-weight: 800; }
.ms-etiqueta.novo { background: var(--doce); color: var(--base); }
.ms-botao {
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  color: var(--texto);
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.ms-botao:hover, .ms-botao.principal {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.ms-botao:hover { transform: translateY(-2px); }
.ms-botao .icone { box-sizing: content-box; padding: 4px; border-radius: 50%; background: var(--doce-fundo); }
.ms-fechar {
  width: 40px;
  height: 40px;
  background: var(--doce-fundo);
  color: var(--texto);
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.ms-fechar:hover { background: var(--doce-fundo); transform: rotate(90deg) scale(1.08); box-shadow: var(--brilho-forte); }
.ms-fechar .icone { width: 18px; height: 18px; stroke-width: 2.4; }
.ms-continuar {
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 14%, var(--base-clara)), color-mix(in srgb, var(--magenta) 14%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.ms-continuar:hover { box-shadow: var(--brilho-forte); transform: translateY(-2px); }
.ms-continuar .icone { box-sizing: content-box; padding: 8px; border-radius: 50%; background: var(--doce); color: var(--base); }
.ms-continuar b { font-weight: 800; }
.ms-cartao {
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 16%, transparent), color-mix(in srgb, var(--magenta) 16%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.ms-cartao:hover:not(:disabled) {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: translateY(-3px);
}
.ms-barra { border-radius: 999px; }
.ms-barra span { border-radius: 999px; background: var(--doce); }
.ms-final-faixa {
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 12%, var(--base-clara)), color-mix(in srgb, var(--magenta) 12%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}

/* ---- Mapa de caminhos (Manuscrito > Caminhos): capítulos numa linha do tempo, escolhas e opções em pílulas ---- */
.ms-corpo.caminhos { gap: 22px; }
.mc-topo { display: flex; flex-direction: column; gap: 8px; max-width: 640px; font-family: var(--fonte-jogo); }
.mc-topo h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.mc-conta { margin: 0; font-weight: 700; color: var(--texto); }
.mc-topo .ms-barra { height: 6px; }
.mc-dica { margin: 2px 0 0; font-size: 0.85rem; font-weight: 500; color: var(--texto-suave); line-height: 1.5; }
.mc-linha {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-family: var(--fonte-jogo);
}
/* Fio de luz que liga os capítulos, sumindo nas pontas. */
.mc-linha::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--ciano) 8%, var(--magenta) 92%, transparent);
  opacity: 0.5;
}
.mc-cap { display: flex; flex-direction: column; gap: 12px; }
.mc-cap-titulo { position: relative; display: flex; align-items: center; gap: 12px; min-height: 28px; }
.mc-num {
  position: absolute;
  left: -34px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--doce);
  color: var(--base);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: var(--brilho);
}
.mc-cap-titulo b { font-size: 1.02rem; font-weight: 800; }
.mc-cap.velado .mc-num { background: var(--doce-fundo); color: var(--texto-suave); box-shadow: none; }
.mc-cap.velado .mc-cap-titulo b { color: var(--texto-suave); }
.mc-escolha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 22%, transparent), color-mix(in srgb, var(--magenta) 22%, transparent)) border-box;
}
.mc-pergunta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 700; }
.mc-escolha.velada .mc-pergunta { color: var(--texto-suave); }
.mc-opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-opcao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  font-weight: 500;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.mc-opcao:hover { transform: translateY(-2px); box-shadow: var(--brilho); }
.mc-opcao.atual {
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 22%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  font-weight: 700;
}
.mc-opcao.velada {
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  color: var(--texto-suave);
  letter-spacing: 0.12em;
}
.mc-opcao.velada:hover { transform: none; box-shadow: none; }
.mc-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--doce); }
.mc-opcao.velada .mc-ponto { background: var(--doce-fundo); }
.mc-texto { flex: 1 1 200px; min-width: 0; line-height: 1.4; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--doce-fundo);
  color: var(--texto);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.mc-tag.atual { background: var(--doce); color: var(--base); }
.mc-tag.espera { font-weight: 700; }

/* ---- Conquistas (Estatísticas > Conquistas): medalha redonda; liberada cheia do degradê, bloqueada de vidro apagada ---- */
.cq-resumo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.cq-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cq-cartao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 70%, transparent), color-mix(in srgb, var(--base-clara) 70%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.cq-cartao.liberada {
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 14%, var(--vidro-forte)), color-mix(in srgb, var(--magenta) 14%, var(--vidro-forte))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.cq-cartao:hover, .cq-cartao:focus-visible { transform: translateY(-2px); }
.cq-cartao.liberada:hover, .cq-cartao.liberada:focus-visible { box-shadow: var(--brilho-forte); }
.cq-medalha {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 7%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 12%, transparent);
  color: color-mix(in srgb, var(--texto) 34%, transparent);
}
.cq-medalha.liberada {
  background: var(--doce);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, white 45%, transparent), var(--brilho);
  color: var(--base);
}
.cq-icone { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cq-cadeado {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--base-clara);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--texto) 14%, transparent);
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cq-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cq-nome { font-weight: 800; }
.cq-cartao:not(.liberada) .cq-nome { color: var(--texto-suave); }
.cq-desc { font-size: 0.82rem; font-weight: 500; color: var(--texto-suave); line-height: 1.4; }
.cq-data { font-size: 0.74rem; font-weight: 700; color: var(--texto); opacity: 0.8; }

/* Estatísticas com 4 abas: o painel tem a mesma largura em toda tela e as 4 não cabem numa linha sem se espremer
   (em de, ru e fr cortavam): duas linhas de duas. */
.es-abas { display: grid; grid-template-columns: repeat(2, 1fr); }
.es-abas .save-aba { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
/* Janela menor (mesmos degraus do layout compacto): medalha e cartão mais compactos, o texto ganha largura. */
@media (max-width: 1100px), (max-height: 820px) {
  .cq-cartao { gap: 10px; padding: 8px 12px 8px 8px; }
  .cq-medalha { width: 42px; height: 42px; }
  .cq-icone { width: 23px; height: 23px; }
  .cq-cadeado { width: 17px; height: 17px; }
}

/* ---- Abertura do jogo: cartões de idioma, termos e nome; tela de chamada encerrada ---- */
.pv-cartao {
  border-radius: 28px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
}
.pv-cartao h2 { font-weight: 800; }
.pv-cartao p { font-weight: 500; }
.pv-idioma {
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  font-weight: 700;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.pv-idioma:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--brilho); }
.pv-idioma.ativo {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 20%, var(--base-clara)), color-mix(in srgb, var(--magenta) 20%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.pv-aceito { font-weight: 700; }
.pv-caixinha { width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--magenta) 55%, transparent); }
.pv-aceito[aria-checked="true"] .pv-caixinha { border-color: transparent; background: var(--doce); box-shadow: var(--brilho); }
.pv-aceito[aria-checked="true"] .pv-caixinha::after { left: 6.5px; top: 3px; }
.pv-dica { font-weight: 700; }
.chamada-encerrada-caixa h2 { font-weight: 800; }
.chamada-encerrada-icone { box-shadow: 0 0 22px rgba(240, 90, 110, 0.45); }

/* Altura fixa igual em todo painel (item 12 do estilo): vale por cima das alturas antigas de cada painel.
   Exceção: o espiar do PC da Shion, que acompanha as últimas linhas. */
.painel.painel-doce:not(.painel-espiar) {
  height: min(760px, calc(100dvh - 2 * var(--margem) - 197px * var(--ui) - 32px));
  max-height: none;
}

/* Atalhos de teclado nas Configurações (engine/atalhos.js): texto à esquerda, teclas em pílulas à direita. */
.config-atalhos { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; }
.config-atalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; }
.config-teclas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.config-teclas kbd {
  min-width: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  font-family: var(--fonte-jogo);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

/* Etiqueta dos botões da tela principal (engine/dicas.js), no lugar da dica do sistema: pílula com borda em
   degradê e brilho, nome do botão e a tecla de atalho; surge do lado do botão com um pequeno salto. */
#dica-botao {
  position: fixed;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  backdrop-filter: blur(10px);
  color: var(--texto);
  font-family: var(--fonte-jogo);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
#dica-botao[hidden] { display: none; }
#dica-botao:not(:has(kbd)) { padding-right: 14px; }
#dica-botao[data-lado="esquerda"] { transform: translateX(10px) scale(0.92); transform-origin: right center; }
#dica-botao[data-lado="direita"] { transform: translateX(-10px) scale(0.92); transform-origin: left center; }
#dica-botao[data-lado="cima"] { transform: translateY(8px) scale(0.92); transform-origin: center bottom; }
#dica-botao.visivel {
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.35s var(--mola);
}
#dica-botao kbd {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--doce);
  color: var(--base);
  font-family: var(--fonte-jogo);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

/* Cronômetro e "+5" no timer (pomodoro.js). Na borda de baixo do anel, uma pílula só junta o seletor
   "Timer | Cronômetro" e o autoplay: no preparo aparecem os dois; com o foco em andamento o seletor some e fica só
   o círculo do autoplay. "+5" no foco em andamento: mais um círculo nos controles, com o texto no lugar do ícone. */
.pomodoro-base {
  position: absolute;
  bottom: -24px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
}
.pomodoro-modo { display: flex; gap: 2px; }
/* No preparo, o miolo do timer sobe um pouco, para o play não encostar na pílula de baixo. */
.pomodoro-preparo { top: -6px; }
.pomodoro-modo[hidden] { display: none; }
.pomodoro-modo button {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-suave);
  font-family: var(--fonte-jogo);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.pomodoro-modo button:hover { color: var(--texto); }
.pomodoro-modo button[aria-pressed="true"] { background: var(--doce); color: var(--base); }
/* O autoplay entra na pílula: deixa de ser solto na borda e perde a moldura própria. */
.pomodoro-base .pomodoro-autoplay {
  position: static;
  transform: none;
  width: 26px;
  height: 26px;
  border: 0;
  background: color-mix(in srgb, var(--texto) 9%, transparent);
}
.pomodoro-base .pomodoro-autoplay:hover { transform: scale(1.1); box-shadow: none; background: var(--doce-fundo); }
.pomodoro-base .pomodoro-autoplay.ativo { background: var(--doce); color: var(--base); box-shadow: none; }
.pomodoro-base .pomodoro-autoplay .icone { width: 14px; height: 14px; }
.pomodoro-controles button[hidden] { display: none; }
.pomodoro-controles .pomodoro-mais5 { font-family: var(--fonte-jogo); font-size: 0.78rem; font-weight: 800; }

/* Meta diária e calendário do mês nas Estatísticas (estatisticas.js), no estilo "Brilho doce". */
.es-meta {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
}
.es-meta.cumprida {
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 12%, var(--base-clara)), color-mix(in srgb, var(--magenta) 12%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
}
.es-meta-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.es-meta-rotulo { font-size: 0.9rem; font-weight: 800; }
.es-meta-ajuste { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.es-meta-ajuste strong { min-width: 64px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.es-meta-botao {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--doce-fundo);
  color: var(--texto);
  font-family: var(--fonte-jogo);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.es-meta-botao:hover:not(:disabled) { transform: scale(1.1); box-shadow: var(--brilho); }
.es-meta-botao:disabled { opacity: 0.35; cursor: default; }
.es-meta-selo { font-weight: 800; color: var(--texto); }

.es-cal-topo { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 10px; }
.es-cal-mes { font-size: 1rem; font-weight: 800; }
.es-cal-seta {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--doce-fundo);
  color: var(--texto);
  cursor: pointer;
  transition: transform 0.25s var(--mola), box-shadow 0.25s;
}
.es-cal-seta:hover { transform: scale(1.1); box-shadow: var(--brilho); }
.es-cal-seta .icone { width: 16px; height: 16px; stroke-width: 2.6; }
.es-cal-semana, .es-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.es-cal-semana span { padding: 2px 0 4px; font-size: 0.72rem; font-weight: 800; color: var(--texto-suave); }
.es-cal-dia {
  position: relative;
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  outline: none;
  transition: transform 0.2s var(--mola), box-shadow 0.25s;
}
.es-cal-dia:hover, .es-cal-dia:focus-visible { transform: scale(1.08); box-shadow: var(--brilho); }
/* Força do dia: quanto mais foco, mais forte o degradê. */
.es-cal-dia.forca-1 { background: color-mix(in srgb, var(--magenta) 18%, transparent); color: var(--texto); }
.es-cal-dia.forca-2 { background: color-mix(in srgb, var(--magenta) 34%, transparent); color: var(--texto); }
.es-cal-dia.forca-3 { background: linear-gradient(135deg, color-mix(in srgb, var(--ciano) 50%, transparent), color-mix(in srgb, var(--magenta) 55%, transparent)); color: var(--texto); }
.es-cal-dia.forca-4 { background: var(--doce); color: var(--base); }
.es-cal-dia.futuro { opacity: 0.4; }
.es-cal-dia.hoje { border-color: var(--magenta); }
/* Meta cumprida: pontinho embaixo do número. */
.es-cal-dia.meta::after, .es-cal-ponto {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px var(--magenta);
}
.es-cal-dia.meta::after { position: absolute; bottom: 3px; left: 50%; translate: -50% 0; }
.es-cal-legenda { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 0.75rem; font-weight: 700; color: var(--texto-suave); }
.es-cal-ponto { display: inline-block; flex: none; }

/* Aviso de meta cumprida: pílula suave no alto da tela, que entra com um pequeno salto e some sozinha. */
.aviso-meta {
  position: fixed;
  z-index: 85;
  top: calc(var(--margem) + 8px);
  left: 50%;
  translate: -50% 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  backdrop-filter: blur(10px);
  color: var(--texto);
  font-family: var(--fonte-jogo);
  font-size: 0.92rem;
  font-weight: 800;
  pointer-events: none;
  animation: doce-abrir 0.4s var(--mola);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.aviso-meta.saindo { opacity: 0; transform: translateY(-8px); }

/* Aviso de conquista: pílula no alto da tela com a medalha, que entra com salto e brilha uma vez. */
.aviso-conquista {
  position: fixed;
  z-index: 86;
  top: calc(var(--margem) + 8px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho-forte);
  backdrop-filter: blur(10px);
  color: var(--texto);
  font-family: var(--fonte-jogo);
  text-align: left;
  cursor: pointer;
  animation: doce-abrir 0.45s var(--mola);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.aviso-conquista.saindo { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.aviso-conquista .cq-medalha { width: 44px; height: 44px; animation: conquista-brilho 1.2s ease-out 0.2s; }
.aviso-conquista .cq-icone { width: 24px; height: 24px; }
.aviso-conquista-texto { display: flex; flex-direction: column; gap: 1px; }
.aviso-conquista-texto small { font-size: 0.74rem; font-weight: 700; color: var(--texto-suave); }
.aviso-conquista-texto b { font-size: 0.95rem; font-weight: 800; }
@keyframes conquista-brilho {
  0% { scale: 0.6; box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 70%, transparent); }
  45% { scale: 1.12; box-shadow: 0 0 0 10px transparent, var(--brilho-forte); }
  100% { scale: 1; }
}

/* Ajustes da caixa de fala (engine/falaAjustes.js): a caixa toda cresce ou encolhe a partir da base (--fala-escala)
   e o fundo tem 4 níveis de opacidade (--fala-fundo). Os três botões ficam numa pílula vertical ao lado direito. */
#caixa-fala {
  scale: var(--fala-escala, 1);
  transform-origin: 50% 100%;
  background:
    linear-gradient(color-mix(in srgb, var(--base) var(--fala-fundo, 75%), transparent), color-mix(in srgb, var(--base) var(--fala-fundo, 75%), transparent)) padding-box,
    var(--doce-suave) border-box;
  transition: scale 0.3s var(--mola);
}
.fala-ajustes {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce-suave) border-box;
  box-shadow: var(--brilho);
  cursor: default;
}
.fala-ajustes button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto);
  cursor: pointer;
  transition: transform 0.25s var(--mola), background 0.2s;
}
.fala-ajustes button:hover:not(:disabled) { transform: scale(1.1); background: var(--doce-fundo); }
.fala-ajustes button:disabled { opacity: 0.35; cursor: default; }
.fala-ajustes .icone { width: 15px; height: 15px; stroke-width: 2.6; }
/* Bolinha da opacidade: o xadrez de transparência (como num PNG) por baixo e a cor do fundo da fala por cima,
   tão opaca quanto ele; quanto menos opaco o fundo, mais o xadrez aparece. */
.fala-bolinha {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--texto);
  background:
    linear-gradient(color-mix(in srgb, var(--base) var(--fala-fundo, 75%), transparent), color-mix(in srgb, var(--base) var(--fala-fundo, 75%), transparent)),
    repeating-conic-gradient(#ffffff 0 25%, #b9b4c7 0 50%) 0 0 / 7px 7px;
}

/* ---------- Celular e tablet (toque) ----------
   Área segura: o #palco (interface) fica dentro dela, longe do entalhe e dos cantos arredondados; o #fundo
   (vídeo) continua na tela inteira. Fora do celular, env() vale 0 e nada muda. O #palco preso às quatro bordas
   acompanha a altura útil quando as barras do navegador aparecem e somem. */
#palco {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  width: auto;
  height: auto;
}
#fundo { position: fixed; inset: 0; }
html, body { overscroll-behavior: none; }
button { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  html { touch-action: manipulation; }
  button { -webkit-touch-callout: none; user-select: none; }
}

/* Celular deitado: botões redondos com 44 px na tela (52px x 0,85), para o dedo. O topo (relógio, nível e
   timer) fica no tamanho de antes (--ui-topo), senão não sobra altura. A coluna da direita vira uma grade de 3
   por 3 abaixo do timer (os dois grupos juntos, o de baixo na última linha), o rodapé encosta à esquerda, logo
   depois de Conversas, e a caixa de fala fica entre os dois, com os ajustes dela antes da grade. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --ui: 0.85;
    --ui-topo: 0.72;
    --grade-dir: calc(222px * var(--ui)); /* do canto direito até a borda esquerda da grade, com folga */
  }
  #slot-sup-esq > *, #slot-sup-dir > * { zoom: var(--ui-topo); }
  #coluna-dir {
    top: calc(var(--margem) + 262px * var(--ui-topo));
    bottom: auto;
    right: calc(var(--margem) + 24px * var(--ui));
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: calc(6px * var(--ui)) calc(10px * var(--ui));
  }
  #coluna-dir > .slot { display: contents; }
  #slot-rodape-centro {
    left: calc(var(--margem) + 64px * var(--ui));
    transform: none;
    justify-content: flex-start;
    max-width: calc(100% - 2 * var(--margem) - 64px * var(--ui) - var(--grade-dir));
  }
  #caixa-fala, #caixa-fala.com-escolha {
    left: var(--margem);
    transform: none;
    max-width: calc(100% - 2 * var(--margem) - var(--grade-dir) - 60px - 54px);
  }
  #caixa-fala { bottom: calc(var(--margem) + 64px * var(--ui)); }
  body.cena-introducao #caixa-fala { bottom: var(--margem); }
  /* Pergunta com escolhas: mais compacta, para caber na altura do celular deitado. */
  #caixa-fala.com-escolha { padding: 14px 18px; }
  #caixa-fala.com-escolha #texto-fala { font-size: 1.05rem; }
  #caixa-fala.com-escolha #opcoes-fala { gap: 8px; margin-top: 10px; }
  #caixa-fala .opcao { padding: 10px 16px; font-size: 1rem; }
  /* Painéis com a altura toda (de margem a margem, sobre o relógio e o começo do rodapé): entre o relógio e o
     rodapé não sobra altura no celular. O painel tem zoom 0,8, por isso a altura é dividida por 0,8. */
  .painel.painel-doce:not(.painel-espiar) {
    top: 0;
    height: calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2 * var(--margem)) / 0.8);
  }
}

/* Playlists (21/10, pedido do André): mais larga e mais alta que os outros painéis, acompanhando a tela. Vai da
   margem de cima até logo acima do player do rodapé (cobre o relógio enquanto está aberto). Zoom 0,8: as medidas
   da tela são divididas por 0,8. */
.painel.painel-playlist.painel-doce:not(.painel-espiar) {
  top: 0;
  width: calc(min(600px, 44vw, 100vw - 2 * var(--margem)) / 0.8);
  height: calc((100dvh - 2 * var(--margem) - 76px * var(--ui)) / 0.8);
}
.pl-lista { overflow-x: hidden; }
/* Menu de playlists: com muitas playlists ele passava do fim do painel e as últimas ficavam cortadas, sem clique.
   Agora rola dentro do próprio menu. */
.painel-playlist .pl-opcoes {
  max-height: calc((100dvh - 2 * var(--margem) - 76px * var(--ui)) / 0.8 - 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Botões pequenos (setas e controles do timer, player, ajustes da fala): no toque, a área que recebe o dedo
   passa da borda do desenho, sem mudar o visual e sem invadir o vizinho. */
@media (pointer: coarse) {
  .pomodoro-seta, .pomodoro-controles button, .pomodoro-play, .pomodoro-modo button, .player-botao, .fala-ajustes button {
    position: relative;
  }
  .pomodoro-seta::before, .pomodoro-controles button::before, .pomodoro-play::before, .pomodoro-modo button::before,
  .pomodoro-autoplay::before, .player-botao::before, .fala-ajustes button::before {
    content: '';
    position: absolute;
  }
  .pomodoro-seta::before { inset: -12px -10px; }
  .pomodoro-controles button::before, .player-botao::before { inset: -9px -4px; }
  .pomodoro-play::before { inset: -8px; }
  .pomodoro-modo button::before { inset: -9px 0; }
  .pomodoro-autoplay::before { inset: -9px -4px; }
  .fala-ajustes button::before { inset: -2px -8px; }
}

/* Sem mouse: o que só aparecia com o mouse em cima fica sempre à mostra. */
@media (hover: none) {
  .save-apagar { opacity: 0.7; }
}

/* ---- Anúncios (Configurações, engine/componentes/anuncios.js) ----
   Cartões no molde das Tarefas: vidro claro, borda em degradê suave que acende no hover e fica cheia aberto. */
.anuncios { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 8px; }
.anuncios-aviso { text-align: left; }
.anuncio {
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ciano) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)) border-box;
  transition: box-shadow 0.25s, transform 0.25s var(--mola), background 0.25s;
}
.anuncio:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 82%, transparent), color-mix(in srgb, var(--base-clara) 82%, transparent)) padding-box,
    var(--doce-suave) border-box;
  transform: translateY(-2px);
}
.anuncio.aberto {
  background:
    linear-gradient(color-mix(in srgb, var(--base-clara) 88%, transparent), color-mix(in srgb, var(--base-clara) 88%, transparent)) padding-box,
    var(--doce) border-box;
  box-shadow: var(--brilho);
  transform: none;
}
.anuncio-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.anuncio-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.anuncio-data { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; color: var(--texto-suave); }
.anuncio-titulo { font-size: 0.95rem; font-weight: 800; line-height: 1.3; }
.anuncio-novo {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--doce);
  color: var(--base);
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 45%, transparent);
}
.anuncio-seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--doce-fundo);
  transition: transform 0.3s var(--mola);
}
.anuncio-seta .icone { width: 16px; height: 16px; stroke-width: 2.6; }
.anuncio.aberto .anuncio-seta { transform: rotate(180deg); }
.anuncio-miolo {
  position: relative;
  padding: 4px 18px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  animation: anuncio-abrir 0.3s var(--mola);
}
/* Fio de luz entre o topo e o texto. */
.anuncio-miolo::before {
  content: '';
  display: block;
  height: 2px;
  margin: 0 0 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ciano) 18%, var(--magenta) 82%, transparent);
  opacity: 0.35;
}
@keyframes anuncio-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.anuncio-miolo p, .anuncio-miolo h4, .anuncio-miolo ul { margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.anuncio-miolo h4 { font-size: 0.95rem; font-weight: 800; }
.anuncio-miolo ul { padding-left: 20px; }
.anuncio-miolo li::marker { color: var(--magenta); }
.anuncio-miolo .negrito { font-weight: 800; }
.anuncio-miolo .italico { font-style: italic; }
.anuncio-miolo a:not(.anuncio-link) { color: var(--ciano); }
/* A imagem nunca toma o painel todo: em janela baixa, ela encolhe e o texto do anúncio aparece logo abaixo. */
.anuncio-imagem { display: block; width: auto; max-width: 100%; max-height: 38vh; margin: 0 auto 14px; border-radius: 16px; box-shadow: var(--brilho); }
.anuncio-link {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box,
    var(--doce) border-box;
  color: var(--texto);
  font-weight: 800;
  text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s var(--mola);
}
.anuncio-link:hover { box-shadow: var(--brilho-forte); transform: translateY(-2px); }
.anuncio-link:active { transform: translateY(1px); }

/* Ponto rosa no botão de Configurações enquanto houver anúncio novo não lido. */
#botao-configuracoes { position: relative; }
#botao-configuracoes.tem-novidade::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--doce);
  box-shadow: 0 0 10px var(--magenta);
  animation: anuncio-ponto 2.4s ease-in-out infinite;
}
@keyframes anuncio-ponto {
  50% { box-shadow: 0 0 4px var(--magenta); }
}

/* Configurações com abas (Geral e Anúncios): painel com o dobro da largura dos outros (780 em vez de 390),
   sem passar da tela; as abas usam o trilho em pílula do Save / Load e ficam presas no alto ao rolar. */
#painel-configuracoes { width: min(780px, calc((100vw - 2 * var(--margem) - 90px) / 0.8)); }
.config-abas {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  margin: 0 0 14px;
  backdrop-filter: blur(10px);
}
.config-abas .save-aba { position: relative; flex: 1; border: 0; color: var(--texto-suave); cursor: pointer; font-family: inherit; }
.config-abas .save-aba.ativa { color: var(--texto); }
.config-abas .save-aba.tem-novidade::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--doce);
  box-shadow: 0 0 8px var(--magenta);
  animation: anuncio-ponto 2.4s ease-in-out infinite;
}


/* ---------- Saída da escolha ----------
   Depois do clique numa alternativa (quando a fala seguinte espera o vídeo, ver animarSaidaDaEscolha no
   engine.js). Duração em --saida (2 s). Tudo se move o tempo todo, sem pausa no meio: a escolhida dá um
   toque de mola e acende, as outras descem desfocando, o texto apaga, faíscas sobem da escolhida e a caixa
   sobe e se dissolve na luz. Usa translate/scale (não transform) para não brigar com o transform da caixa,
   que muda no celular. */
#caixa-fala.saindo-escolha {
  pointer-events: none;
  animation: saida-caixa var(--saida, 2s) cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
#caixa-fala.saindo-escolha #nome-fala,
#caixa-fala.saindo-escolha #texto-fala,
#caixa-fala.saindo-escolha #dica-avancar {
  animation: saida-texto calc(var(--saida, 2s) * 0.45) ease-out forwards;
}
#caixa-fala.saindo-escolha .opcao:not(.escolhida),
#caixa-fala.saindo-escolha .opcao-lembrar {
  animation: saida-outras calc(var(--saida, 2s) * 0.4) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#caixa-fala.saindo-escolha .opcao.escolhida {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--magenta) 22%, var(--base-clara)), color-mix(in srgb, var(--magenta) 22%, var(--base-clara))) padding-box,
    var(--doce) border-box;
  animation: saida-escolhida var(--saida, 2s) ease-in-out forwards;
}
#caixa-fala.saindo-escolha .opcao.escolhida::before {
  opacity: 1;
  animation: saida-ponto var(--saida, 2s) ease forwards;
}
.faisca-escolha {
  position: absolute;
  width: var(--tam, 5px);
  height: var(--tam, 5px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, var(--magenta) 55%, transparent 75%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 70%, transparent), 0 0 4px color-mix(in srgb, var(--ciano) 80%, transparent);
  opacity: 0;
  animation: saida-faisca calc(var(--saida, 2s) * 0.75) ease-out calc(var(--saida, 2s) * var(--atraso, 0) * 0.5) forwards;
}
.faisca-escolha:nth-child(odd) {
  background: radial-gradient(circle, #fff 0%, var(--ciano) 55%, transparent 75%);
}

@keyframes saida-caixa {
  0% { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; box-shadow: var(--brilho); }
  30% { opacity: 1; filter: blur(0); translate: 0 -4px; scale: 1; box-shadow: var(--brilho-forte); }
  100% { opacity: 0; filter: blur(8px) brightness(1.4); translate: 0 -26px; scale: 0.96; box-shadow: 0 0 40px transparent; }
}
@keyframes saida-texto {
  0% { opacity: 1; filter: blur(0); translate: 0 0; }
  100% { opacity: 0; filter: blur(3px); translate: 0 -6px; }
}
@keyframes saida-outras {
  0% { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
  100% { opacity: 0; filter: blur(4px); translate: 0 12px; scale: 0.95; }
}
@keyframes saida-escolhida {
  0% { translate: 0 0; scale: 1; box-shadow: var(--brilho); }
  8% { translate: 0 1px; scale: 0.97; }
  22% { translate: 0 -3px; scale: 1.04; box-shadow: 0 0 36px color-mix(in srgb, var(--magenta) 65%, transparent); }
  100% { translate: 0 -10px; scale: 1.02; box-shadow: 0 0 50px color-mix(in srgb, var(--magenta) 45%, transparent); }
}
@keyframes saida-ponto {
  0% { scale: 1; }
  22% { scale: 2; }
  100% { scale: 1.4; }
}
@keyframes saida-faisca {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.15)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  #caixa-fala.saindo-escolha,
  #caixa-fala.saindo-escolha .opcao,
  .faisca-escolha { animation-name: saida-texto; }
}

/* ---------- Entrada na call (componentes/entradaCall.js): tela escura antes da cena ---------- */
.entrada-call {
  --chamada: #36d6b0;
  --convite-a: #7c6cf2;
  --convite-b: #e85d9f;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1b1230 0%, #0c0816 45%, #040306 100%);
  transition: opacity var(--saida, 1200ms) ease, filter var(--saida, 1200ms) ease;
}
.entrada-call.saindo { opacity: 0; filter: blur(6px); pointer-events: none; }

/* Brilhos roxos que flutuam devagar no fundo. */
.entrada-call-brilho span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 60%, transparent), transparent 70%);
  animation: entrada-flutua 14s ease-in-out infinite alternate;
}
.entrada-call-brilho span:first-child { left: -10vmax; top: -12vmax; }
.entrada-call-brilho span:last-child {
  right: -12vmax;
  bottom: -14vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--ciano) 55%, transparent), transparent 70%);
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}
@keyframes entrada-flutua {
  to { transform: translate(8vmax, 6vmax) scale(1.15); }
}

.entrada-call-pedir {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.entrada-call-pedir:disabled { cursor: default; }
.entrada-call-botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
}
.entrada-call-icone {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--convite-a), var(--convite-b));
  box-shadow: 0 0 30px color-mix(in srgb, var(--convite-b) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: entrada-respira 2.4s ease-in-out infinite;
  transition: background 0.5s, box-shadow 0.5s, transform 0.25s;
}
.entrada-call-icone .icone { width: 40px; height: 40px; }
.entrada-call-pedir:hover .entrada-call-icone { transform: scale(1.08); box-shadow: 0 0 46px color-mix(in srgb, var(--convite-b) 75%, transparent); }
@keyframes entrada-respira {
  0%, 100% { scale: 1; }
  50% { scale: 1.05; }
}

/* Anéis que saem do botão: devagar enquanto convida; rápidos e na cor da chamada enquanto chama. */
.entrada-call-anel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--convite-b) 70%, transparent);
  opacity: 0;
  animation: entrada-anel 3s ease-out infinite;
}
.entrada-call-anel:nth-child(2) { animation-delay: 1s; }
.entrada-call-anel:nth-child(3) { animation-delay: 2s; }
@keyframes entrada-anel {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}

.entrada-call-texto {
  max-width: 80vw;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  animation: entrada-texto 2.4s ease-in-out infinite;
}
@keyframes entrada-texto {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Chamando: verde-água, pulso rápido e o ícone balançando como um telefone tocando. */
.entrada-call.chamando .entrada-call-icone {
  background: linear-gradient(135deg, var(--chamada), #1fa58a);
  box-shadow: 0 0 40px color-mix(in srgb, var(--chamada) 70%, transparent);
  animation: entrada-pulsa 0.7s ease-in-out infinite;
}
.entrada-call.chamando .entrada-call-icone .icone { animation: entrada-toca 1.4s ease-in-out infinite; }
.entrada-call.chamando .entrada-call-anel {
  border-color: color-mix(in srgb, var(--chamada) 80%, transparent);
  animation-duration: 1.4s;
}
.entrada-call.chamando .entrada-call-anel:nth-child(2) { animation-delay: 0.47s; }
.entrada-call.chamando .entrada-call-anel:nth-child(3) { animation-delay: 0.93s; }
.entrada-call.chamando .entrada-call-texto { font-weight: 500; color: var(--texto-suave); animation: none; }
@keyframes entrada-pulsa {
  0%, 100% { scale: 1; }
  50% { scale: 1.09; }
}
@keyframes entrada-toca {
  0%, 40%, 100% { rotate: 0deg; }
  8%, 24% { rotate: -14deg; }
  16%, 32% { rotate: 14deg; }
}

/* Aceito: o botão para de pulsar e brilha; os anéis somem. */
.entrada-call.aceito .entrada-call-icone { animation: none; scale: 1.12; box-shadow: 0 0 64px color-mix(in srgb, var(--chamada) 85%, transparent); }
.entrada-call.aceito .entrada-call-icone .icone { animation: none; }
.entrada-call.aceito .entrada-call-anel { animation: none; opacity: 0; }
.entrada-call.aceito .entrada-call-texto { color: var(--texto); font-weight: 600; }