/* Caso do Dia - protótipo do teste B. Cores e medidas do esboço aprovado (rodada 5). */
:root {
  --tinta: #141414;
  --papel: #F4F1EA;
  --branco: #FFFFFF;
  --vermelho: #C8102E;
  --vermelho-texto: #B00D27;
  --rosa: #FF6B7F;
  --rosa-claro: #FF8A9A;
  --quadro: #2A2622;
  --cinza-escuro: #4A4540;
  --cinza-claro: #D9D4C7;
  --cinza-texto: #4A4A4A;
  --cinza-borda: #BDB7AA;
  --radio: #D2606B;
  --verde: #57C47A;
  --fundo-pc: #171412;
  --fonte-titulo: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --fonte-texto: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo-pc);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
img { display: block; }
/* Negrito automático no texto dos casos: nomes, dias da semana e horários.
   Semi-negrito (600): destaca sem pesar tanto quanto o negrito cheio (700). */
.destaque { font-weight: 600; }
/* Dentro de um texto que já é negrito (legenda das citações), segue o peso dele: senão o dia ou a hora fica mais fraco que o resto. */
.citacao figcaption .destaque { font-weight: inherit; }

/* No PC, o jogo fica numa coluna do tamanho de um celular. */
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; box-shadow: 0 0 40px rgba(0,0,0,.5); }
.tela { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.tela-clara { background: var(--papel); }
.tela-quadro { background: var(--quadro); }
.carregando { color: var(--papel); padding: 40px 20px; font-size: 18px; }

/* ---------- Barra de cima ---------- */
.barra {
  background: var(--tinta); color: var(--papel);
  padding: 8px 20px; min-height: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
.barra-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.barra-sub { font-family: var(--fonte-titulo); font-weight: 500; font-size: 14px; color: var(--rosa); text-align: right; }
.barra-dir { display: flex; align-items: center; gap: 12px; }
.btn-idioma {
  min-width: 44px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  border: 1.5px solid var(--cinza-claro); background: transparent; color: var(--papel);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px; letter-spacing: .06em;
}
.voltar {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 0;
  border: 0; background: transparent; color: var(--papel); font-weight: 600; font-size: 16px;
}
.barra-hora { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; }

/* ---------- Botões grandes ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 8px 14px; border-radius: 10px; border: 0;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; text-align: center;
}
.btn-vermelho { background: var(--vermelho); color: var(--branco); }
.btn-preto { background: var(--tinta); color: var(--branco); }
.btn-contorno { background: transparent; border: 1.5px solid var(--tinta); color: var(--tinta); }
.btn-travado { background: var(--cinza-escuro); color: var(--cinza-claro); flex-direction: column; gap: 2px; min-height: 60px; cursor: not-allowed; }
.btn-travado .btn-linha { display: flex; align-items: center; gap: 10px; }
.btn-travado .btn-nota { font-family: var(--fonte-texto); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; }
.btn:disabled.btn-cinza { background: var(--cinza-borda); color: #3A3A3A; cursor: not-allowed; }
.btn-medio { min-height: 52px; font-size: 18px; }

.rodape { position: sticky; bottom: 0; z-index: 4; padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); }
.tela-clara .rodape { background: var(--papel); box-shadow: 0 -8px 12px -8px rgba(0,0,0,.18); }
.tela-quadro .rodape { background: var(--quadro); box-shadow: 0 -8px 12px -8px rgba(0,0,0,.5); padding-left: 16px; padding-right: 16px; }
.rodape-nota { display: block; margin-top: 6px; font-size: 13px; text-align: center; color: var(--cinza-texto); }

/* ---------- Início ---------- */
.conteudo { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.capa { background: var(--branco); border-radius: 12px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.capa-moldura { border: 2px solid var(--tinta); border-radius: 6px; height: 170px; display: flex; align-items: center; justify-content: center; }
.capa-moldura img { width: 150px; height: 90px; }
.titulo-caso { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 38px; line-height: 1.05; text-transform: uppercase; }
.gancho { margin: 0; font-size: 18px; line-height: 1.4; }
.como { border-top: 2px solid var(--tinta); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rotulo { font-family: var(--fonte-titulo); font-weight: 500; font-size: 13px; letter-spacing: .08em; color: var(--vermelho-texto); text-transform: uppercase; }
.como .rotulo { font-size: 15px; letter-spacing: .06em; }
.passo { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.passo-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 13px; background: var(--tinta); color: var(--papel);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Ficha ---------- */
.ficha { padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.secao { display: flex; flex-direction: column; gap: 2px; }
.secao p { margin: 0; font-size: 16px; line-height: 1.45; }
.pessoas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pessoa { background: var(--branco); border: 1.5px solid var(--tinta); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.pessoa b { font-size: 15px; }
.pessoa span { font-size: 13px; color: var(--cinza-texto); }
.caixa-perguntas { background: var(--tinta); color: var(--papel); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.caixa-perguntas .rotulo { color: var(--rosa-claro); }
.caixa-perguntas p { margin: 0; font-size: 16px; line-height: 1.35; }

/* ---------- Quadro ---------- */
.relogio { background: var(--tinta); color: var(--papel); padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 5; }
.relogio-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.relogio-hora { font-family: var(--fonte-titulo); font-weight: 700; font-size: 26px; }
.relogio-exp { font-size: 14px; color: var(--cinza-claro); text-align: right; }
.barra-tempo { height: 10px; border-radius: 5px; background: var(--cinza-escuro); overflow: hidden; }
.barra-cheia { height: 10px; border-radius: 5px; transition: width .4s ease; }
.relogio-legenda { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }

.ultima { margin: 12px 16px 0; background: var(--papel); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.35; }
/* Antes da 1ª ação: a dica fica sem caixa, em vermelho claro (contraste 5,5:1 no fundo do quadro). */
.ultima-dica { background: transparent; padding: 0; color: var(--rosa); text-align: center; }
.link-carta { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; color: var(--vermelho-texto); font-size: 13px; }

.grade { padding: 16px 16px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; align-content: start; flex-grow: 1; }
.cq { position: relative; background: var(--branco); border-radius: 10px; }
.cq-abrir {
  display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-height: 92px;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--tinta);
}
.cq-tipo { font-family: var(--fonte-titulo); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--vermelho-texto); padding-right: 26px; }
.cq-nome { font-weight: 700; font-size: 16px; line-height: 1.2; }
.cq-status { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--cinza-texto); }
.cq-ficha { background: var(--tinta); }
.cq-ficha .cq-tipo { color: var(--rosa-claro); }
.cq-ficha .cq-nome { color: var(--papel); }
.cq-ficha .cq-status { color: var(--cinza-claro); }
.cq-nova { outline: 3px solid var(--vermelho); }
.selo-nova {
  position: absolute; top: -10px; right: 8px; pointer-events: none;
  background: var(--vermelho); color: var(--branco); font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px;
}
.estrela { position: absolute; top: 0; right: 0; width: 44px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.cq-nova .estrela { top: 6px; }
.estrela svg { width: 18px; height: 18px; opacity: .35; }
.estrela[aria-pressed="true"] svg { opacity: 1; }

/* Aviso antes do relatório */
.fundo-aviso { position: fixed; inset: 0; z-index: 20; background: rgba(23,20,18,.88); display: flex; align-items: center; justify-content: center; padding: 20px; }
.aviso { width: 100%; max-width: 390px; background: var(--papel); border-radius: 14px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.aviso h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 26px; line-height: 1.1; }
.aviso p { margin: 0; font-size: 16px; line-height: 1.4; }
.aviso-botoes { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.aviso-botoes .btn { font-size: 19px; }

/* ---------- Carta aberta ---------- */
.flash { margin: 12px 20px 0; background: var(--vermelho); color: var(--branco); border-radius: 8px; padding: 6px 12px; font-family: var(--fonte-titulo); font-weight: 500; font-size: 13px; letter-spacing: .06em; }
.carta-area { padding: 16px 20px 0; }
.carta-grande { background: var(--branco); border-radius: 14px; padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.carta-moldura { border: 2px solid var(--tinta); border-radius: 8px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.carta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.carta-topo h1 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 26px; line-height: 1.1; }
.carta-topo .rotulo { font-size: 12px; flex-shrink: 0; }
.carta-desenho { height: 120px; display: flex; align-items: center; justify-content: center; }
.carta-desenho img { width: 110px; height: 110px; }
.carta-texto { margin: 0; font-size: 16px; line-height: 1.45; }
.fala { display: flex; flex-direction: column; gap: 4px; }
.fala-pergunta { margin: 0; font-size: 14px; font-style: italic; color: var(--cinza-texto); }
.fala-resposta { margin: 0; background: var(--papel); border-radius: 6px; padding: 8px 10px; font-size: 16px; line-height: 1.45; font-style: italic; color: var(--vermelho-texto); }
.citacao { margin: 0; background: var(--papel); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.citacao figcaption { font-size: 13px; font-weight: 700; color: var(--cinza-texto); }
.citacao blockquote { margin: 0; font-size: 16px; line-height: 1.45; }
.lista { margin: 0; padding: 0 0 0 18px; font-size: 16px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.veio-de { margin: 0; padding-top: 4px; border-top: 1px solid var(--cinza-claro); font-size: 13px; color: var(--cinza-texto); }

.acoes { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.acoes .rotulo { color: var(--rosa); font-size: 14px; }
.acao {
  display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%;
  padding: 8px 14px; border-radius: 10px; border: 0; background: var(--papel); color: var(--tinta); text-align: left;
}
.acao-texto { flex-grow: 1; display: flex; flex-direction: column; }
.acao-nome { font-weight: 700; font-size: 16px; }
.acao-detalhe { font-size: 13px; color: var(--cinza-texto); }
.acao-custo { flex-shrink: 0; background: var(--tinta); color: var(--papel); border-radius: 6px; padding: 4px 10px; font-weight: 700; font-size: 14px; }
.acao-feita { background: var(--cinza-escuro); color: var(--cinza-claro); }
.acao-feita .acao-nome { font-weight: 600; }
.acao-feita .acao-detalhe { color: var(--cinza-claro); }
.acao-feita .acao-custo { background: transparent; color: var(--cinza-claro); font-weight: 400; padding: 0; }
.acao:disabled { opacity: .55; cursor: not-allowed; }
.acoes-fim { justify-content: flex-end; }
.btn-contorno-claro { background: transparent; border: 1.5px solid var(--cinza-claro); color: var(--papel); }

/* ---------- Relatório ---------- */
.relatorio { padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.relatorio-nota { margin: 0; font-size: 14px; line-height: 1.35; color: var(--cinza-texto); }
.relatorio-nota b { color: var(--tinta); }
.pergunta { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pergunta legend { padding: 0 0 6px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: var(--vermelho-texto); }
.opcoes { display: flex; flex-direction: column; gap: 6px; }
.opcoes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcao {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid var(--tinta); background: var(--branco); font-size: 16px; line-height: 1.3; cursor: pointer;
}
.opcoes-grade .opcao { font-weight: 600; }
.opcao input { accent-color: var(--radio); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.opcao.escolhida { background: var(--tinta); color: var(--branco); }

/* ---------- Resultado ---------- */
.resultado-topo { background: var(--tinta); color: var(--papel); padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; }
.resultado-topo h1 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 24px; letter-spacing: .03em; }
.resultado-topo span { font-size: 14px; color: var(--cinza-claro); }
.resultado { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.linha-resp { display: flex; align-items: flex-start; gap: 12px; background: var(--tinta); color: var(--branco); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.35; }
.linha-resp svg { flex-shrink: 0; }
.resp-icone { flex-shrink: 0; padding-top: 1px; }
.resp-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.resp-pergunta { font-weight: 700; }
.resp-rotulo { color: var(--cinza-claro); }
.linha-resp.errada { outline: 2px solid var(--vermelho); }
.btn-revelacao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px;
  border-radius: 8px; border: 1.5px solid #8A847A; background: transparent; color: var(--cinza-texto);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-align: left;
}
.btn-revelacao svg { flex-shrink: 0; transition: transform .2s; }
.btn-revelacao[aria-expanded="true"] svg { transform: rotate(180deg); }
.revelacao { margin: 0; padding: 12px 14px; background: var(--branco); border-radius: 8px; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.revelacao .rev-titulo { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.teste { margin: 14px 20px 0; padding: 12px 14px; background: var(--branco); border: 1.5px solid var(--tinta); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.teste-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.nota { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.nota-linha { display: flex; justify-content: space-between; gap: 10px; }
.nota-linha b { min-width: 1.5em; text-align: right; }
.nota input[type="range"] { width: 100%; height: 32px; accent-color: var(--vermelho); margin: 0; }
.nota input.intocado { opacity: .5; }
.nota textarea { border-radius: 6px; border: 1.5px solid var(--cinza-borda); padding: 8px; font-size: 16px; resize: vertical; min-height: 64px; background: var(--branco); }
.teste-nota { margin: 0; font-size: 13px; line-height: 1.35; color: var(--cinza-texto); }
.codigo { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--cinza-claro); }
.codigo p { margin: 0; font-size: 14px; }
.codigo textarea { width: 100%; border-radius: 6px; border: 1.5px solid var(--tinta); padding: 8px; font-family: Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.3; resize: none; background: var(--papel); word-break: break-all; }
.apagar { margin: 18px 20px calc(28px + env(safe-area-inset-bottom)); background: none; border: 0; padding: 8px 0; font-size: 13px; color: var(--cinza-texto); text-decoration: underline; text-align: center; }

/* Mensagem rápida (ex.: "Copiado") */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 32px); background: var(--tinta); color: var(--papel); border-radius: 8px;
  padding: 10px 16px; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* Próximo caso do teste (etapa C): mesma caixa da seção do teste */
.proximo p { margin: 0; font-size: 15px; line-height: 1.4; }