/* O Leitor de Mentes · modo celular (palco retrato de 540 px de largura).
   O motor liga body.retrato em telas em pé ou estreitas; aqui cada tela vira uma coluna. */

body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Celular deitado: pede para virar. */
body.retrato.deitado #moldura::after { content: 'Vire o celular na vertical'; position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 16, 0.96); color: var(--osso); font: 600 22px var(--sans); }

/* ---------- base ---------- */
body.retrato #palco { font-size: 18px; }
body.retrato .botao { font-size: 20px; padding: 13px 24px; gap: 10px; }
body.retrato .botao .icone { width: 22px; height: 22px; }
body.retrato .botao.compacto { font-size: 17px; padding: 9px 16px; }
body.retrato .botao.compacto .icone { width: 18px; height: 18px; }
body.retrato .botao.grande { font-size: 21px; padding: 14px 28px; }
body.retrato .botao.flutuante { right: 16px; bottom: 16px; }
body.retrato .botao.flutuante-esq { left: 16px; bottom: 16px; }
body.retrato .selo { font-size: 15px; padding: 6px 11px; gap: 6px; }
body.retrato .selo .icone { width: 17px; height: 17px; }
body.retrato .selo.pequeno { font-size: 14px; padding: 4px 10px; }
body.retrato .cartao { padding: 16px 18px; border-radius: 18px; }
body.retrato .sobretitulo { font-size: 13px; letter-spacing: 0.18em; }
body.retrato .suave { font-size: 16px; }
body.retrato .suave.pequeno { font-size: 14px; }

/* barra do topo em duas linhas: voltar + título, depois os selos */
body.retrato .barra-topo { height: auto; min-height: 0; padding: 12px 14px 10px; flex-wrap: wrap; gap: 8px; }
body.retrato .barra-topo .esq { gap: 10px; width: 100%; }
body.retrato .barra-topo .dir { width: 100%; gap: 6px; flex-wrap: wrap; }
body.retrato .titulo-barra { margin-left: 2px; min-width: 0; }
body.retrato .titulo-barra .sobre { font-size: 12px; letter-spacing: 0.16em; }
body.retrato .titulo-barra .nome { font-size: 22px; }

/* painéis */
body.retrato .painel { width: 500px; max-height: 92%; padding: 26px 22px; border-radius: 22px; }
body.retrato .painel h2 { font-size: 28px; margin-bottom: 10px; }
body.retrato .painel p { font-size: 19px; margin-bottom: 10px; }
body.retrato .painel-acoes { gap: 10px; margin-top: 18px; }
body.retrato .painel-fundo.lateral .painel { width: 540px; padding-top: 30px; max-height: none; }
body.retrato .painel-evidencia .ev-cabecalho { gap: 14px; margin-bottom: 14px; }
body.retrato .painel-evidencia .ev-cabecalho h2 { font-size: 26px; }
body.retrato .painel-evidencia .ev-relato { font-size: 20px; min-height: 0; margin-bottom: 16px; }
body.retrato .ev-icone { width: 56px; height: 56px; border-radius: 14px; }
body.retrato .ev-icone .icone { width: 34px; height: 34px; }
body.retrato .ev-icone.grande { width: 68px; height: 68px; }
body.retrato .ev-icone.grande .icone { width: 42px; height: 42px; }
body.retrato .cartao-evidencia { gap: 12px; padding: 12px 14px; }
body.retrato .cartao-evidencia .ev-nome { font-size: 19px; }
body.retrato .cartao-evidencia .ev-desc { font-size: 16px; }
body.retrato .cartao-evidencia .ev-quem { font-size: 14px; }
body.retrato .pericia-feita p { font-size: 17px; }
body.retrato .dica-item { padding: 12px 14px; }
body.retrato .painel.veredito { max-height: 94%; }
body.retrato .veredito .veredito-caixa .retrato.medio { width: 150px; height: 172px; }
body.retrato .veredito h2 { font-size: 30px; }
body.retrato .veredito .consequencia { font-size: 18px; }
body.retrato .painel[data-painel="pistas-relojoeiro"] { width: 500px; max-height: 92%; padding: 24px 20px; }
body.retrato .pistas-lista .pista-relojoeiro .nome { font-size: 18px; }
body.retrato .pistas-lista .pista-relojoeiro p { font-size: 16px; }
body.retrato .pista-relojoeiro .icone { width: 26px; height: 26px; }

/* ---------- título e menu ---------- */
body.retrato .titulo-bloco { top: 70px; padding: 0 24px; }
body.retrato .titulo-nome { font-size: 64px; margin: 10px 0 16px; }
body.retrato .titulo-sub { font-size: 19px; max-width: 460px; }
body.retrato .titulo-acao { bottom: 70px; }
body.retrato .tela-menu .fundo-cena.lado-direito { left: 0; }
body.retrato .tela-menu .fundo-cena.lado-direito img { object-position: 55% 50%; }
body.retrato .veu-menu { background: linear-gradient(180deg, var(--fundo) 0%, rgba(11, 19, 32, 0.92) 45%, rgba(11, 19, 32, 0.55) 100%); }
body.retrato .menu-coluna { left: 36px; right: 36px; top: 60px; bottom: 50px; width: auto; gap: 24px; justify-content: flex-start; }
body.retrato .menu-marca h1 { font-size: 50px; }
body.retrato .menu-lista { width: 100%; gap: 12px; }
body.retrato .menu-rodape { font-size: 16px; max-width: none; margin-top: auto; }

/* ---------- introdução ---------- */
body.retrato .intro-figura { bottom: 36%; }
body.retrato .veu-intro { background: linear-gradient(180deg, rgba(5, 9, 16, 0.1) 0%, rgba(5, 9, 16, 0) 45%, rgba(5, 9, 16, 0.92) 64%, rgba(5, 9, 16, 1) 100%); }
body.retrato .intro-legenda { left: 24px; right: 24px; bottom: 30px; }
body.retrato .intro-legenda .texto { font-size: 24px; min-height: 130px; }
body.retrato .intro-acoes { flex-wrap: wrap; gap: 10px; }
body.retrato .dialogo-pontos { margin: 14px 0 12px; gap: 8px; }
body.retrato .ponto { width: 10px; height: 10px; }

/* ---------- papéis ---------- */
body.retrato .papeis { padding: 50px 24px 24px; gap: 18px; justify-content: flex-start; overflow: auto; }
body.retrato .titulo-tela { font-size: 34px; margin-bottom: 10px; }
body.retrato .papeis-cartoes { flex-direction: column; gap: 16px; }
body.retrato .papel { gap: 14px; }
body.retrato .papel .retrato.medio { width: 110px; height: 126px; border-radius: 16px; }
body.retrato .papel h2 { font-size: 24px; margin: 4px 0 8px; }
body.retrato .papel p { font-size: 16px; margin-top: 10px; }

/* ---------- casos ---------- */
body.retrato .casos-grade { top: 84px; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
body.retrato .caso-cartao { flex: none; gap: 6px; padding: 16px 18px; }
body.retrato .caso-cartao h2 { font-size: 24px; }
body.retrato .caso-cartao .caso-num { font-size: 13px; }
body.retrato .caso-cartao .caso-sub { font-size: 16px; }
body.retrato .caso-rodape .estrelas .estrela { width: 24px; height: 24px; }

/* ---------- diálogos (briefing, revelação, interlúdio, confronto, epílogo) ---------- */
body.retrato .briefing-cabecalho { top: 24px; left: 22px; right: 22px; }
body.retrato .briefing-cabecalho h1 { font-size: 32px; }
body.retrato .briefing-cabecalho .local { font-size: 17px; }
body.retrato .dialogo { left: 14px; right: 14px; bottom: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
body.retrato .dialogo .retrato.grande { width: 96px; height: 96px; border-radius: 16px; }
body.retrato .balao { width: 100%; padding: 16px 18px 14px; min-height: 150px; border-radius: 18px; }
body.retrato .balao .nome { font-size: 13px; min-height: 0; margin-bottom: 6px; }
body.retrato .balao .texto { font-size: 21px; min-height: 60px; }
body.retrato .dialogo.narracao .texto { font-size: 22px; }
body.retrato .dialogo.bilhete .texto { font-size: 22px; }
body.retrato .dialogo-acoes { gap: 10px; margin-top: 12px; flex-wrap: wrap; }
body.retrato .dialogo .dialogo-pontos { right: 18px; top: 16px; }
body.retrato .interludio-marca { width: 300px; height: 300px; top: 36%; }
body.retrato .pista-nova { width: 500px; padding: 26px 20px; gap: 10px; }
body.retrato .pista-nova > .icone { width: 56px; height: 56px; }
body.retrato .pista-nova h2 { font-size: 28px; }
body.retrato .pista-nova p { font-size: 18px; }

/* ---------- hub ---------- */
body.retrato .hub-corpo { top: 150px; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding-bottom: 70px; }
body.retrato .hub-ficha { flex: none; gap: 8px; }
body.retrato .hub-ficha h2 { font-size: 24px; }
body.retrato .hub-sub { font-size: 16px; }
body.retrato .hub-vitima { gap: 12px; padding: 10px; margin-top: 6px; }
body.retrato .hub-vitima .retrato.pequeno { width: 72px; height: 84px; border-radius: 12px; }
body.retrato .hub-vitima .nome { font-size: 19px; }
body.retrato .hub-vitima .papel { font-size: 15px; }
body.retrato .hub-desc { font-size: 16px; }
body.retrato .hub-acoes { grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
body.retrato .hub-acao { min-height: 0; padding: 14px 14px 16px; gap: 8px; }
body.retrato .hub-acao > .icone { width: 34px; height: 34px; }
body.retrato .hub-acao .nome { font-size: 20px; }
body.retrato .hub-acao .desc { font-size: 14px; margin-top: 2px; }

/* ---------- cena do crime: imagem com o dobro da largura, deslizando para os lados ---------- */
body.retrato .cena-area { top: 150px; bottom: auto; height: 610px; display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body.retrato .cena-area::-webkit-scrollbar { display: none; }
body.retrato .cena-quadro { height: auto; width: 1080px; max-width: none; border-radius: 0; box-shadow: none; }
body.retrato .cena-rodape { top: 770px; bottom: 0; height: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 20px 16px; overflow: auto; }
body.retrato .cena-rodape .cena-texto { font-size: 16px; -webkit-line-clamp: 4; flex: none; }
body.retrato .cena-rodape .cena-dica-movel { color: var(--ambar-claro); }
body.retrato .hotspot { box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.4); }
body.retrato .hotspot.visto { box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.5); }

/* ---------- perícia ---------- */
body.retrato .pericia-corpo { top: 150px; left: 18px; right: 18px; bottom: 16px; }
body.retrato .pericia-intro { font-size: 16px; margin-bottom: 12px; }
body.retrato .pericia-lista { grid-template-columns: 1fr; gap: 10px; }
body.retrato .pericia-cartao { padding: 14px 16px; gap: 14px; }
body.retrato .pericia-icone { width: 44px; height: 44px; border-radius: 12px; }
body.retrato .pericia-icone .icone { width: 26px; height: 26px; }
body.retrato .pericia-texto { gap: 5px; }
body.retrato .pericia-texto .nome { font-size: 19px; }
body.retrato .pericia-texto .desc { font-size: 15px; }

/* ---------- suspeitos ---------- */
body.retrato .suspeitos-grade { top: 150px; left: 18px; right: 18px; bottom: 16px; grid-template-columns: 1fr 1fr; gap: 12px; overflow: auto; }
body.retrato .retrato.cartao { height: 220px; }
body.retrato .pessoa-info { padding: 10px 12px 14px; gap: 4px; }
body.retrato .pessoa-info .nome { font-size: 19px; }
body.retrato .pessoa-info .papel { font-size: 14px; min-height: 36px; }

/* ---------- interrogatório ---------- */
body.retrato .inter-corpo { top: 150px; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
body.retrato .inter-lado { flex: none; display: grid; grid-template-columns: 130px 1fr; gap: 10px; overflow: visible; }
body.retrato .retrato.inter { width: 130px; height: 150px; border-radius: 16px; }
body.retrato .inter-ficha { padding: 12px 14px; }
body.retrato .inter-ficha:last-child { grid-column: 1 / -1; }
body.retrato .inter-ficha .nome { font-size: 19px; }
body.retrato .inter-ficha .papel { font-size: 14px; margin-bottom: 4px; }
body.retrato .inter-ficha p { font-size: 15px; }
body.retrato .inter-centro { flex: none; gap: 10px; }
body.retrato .balao.resposta { min-height: 0; padding: 14px 16px 12px; }
body.retrato .balao.resposta .texto { font-size: 20px; }
body.retrato .balao .nota { font-size: 15px; margin-top: 8px; }
body.retrato .linha-leitura { gap: 10px; flex-wrap: wrap; }
body.retrato .leitura-info { font-size: 14px; }
body.retrato .leitura-box { padding: 12px 14px; border-radius: 16px; }
body.retrato .leitura-cabecalho { gap: 10px; margin-bottom: 6px; }
body.retrato .leitura-cabecalho .retrato.mini { width: 44px; height: 44px; border-radius: 10px; }
body.retrato .leitura-cabecalho .nome { font-size: 13px; }
body.retrato .leitura-box .texto { font-size: 18px; }
body.retrato .perguntas, body.retrato .perguntas.duas-colunas { display: flex; flex-direction: column; gap: 8px; overflow: visible; padding-right: 0; flex: none; }
body.retrato .pergunta, body.retrato .perguntas.duas-colunas .pergunta { font-size: 18px; padding: 11px 14px; gap: 10px; }
body.retrato .pergunta .marca { width: 22px; height: 22px; }

/* ---------- quadro ---------- */
body.retrato .quadro-rolagem { position: absolute; left: 0; top: 0; width: 540px; bottom: 132px; overflow: auto; }
body.retrato .quadro-area { position: relative; width: 540px; }
body.retrato .quadro-lado { left: 0; top: auto; bottom: 0; width: 540px; height: 132px; padding: 12px 14px; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; align-content: center; }
body.retrato .quadro-lado .sobretitulo, body.retrato .quadro-lado h2, body.retrato .quadro-lado > p.suave, body.retrato .quadro-resumo, body.retrato .relojoeiro-bloco .sobretitulo, body.retrato .relojoeiro-bloco p.suave { display: none; }
body.retrato .relojoeiro-bloco { flex: none; overflow: visible; display: contents; }
body.retrato .quadro-lado > .botao:last-child { margin-top: 0; }
body.retrato .quadro-lado .botao { font-size: 16px; padding: 9px 14px; }

/* ---------- acusação ---------- */
body.retrato .acusacao-colunas { top: 150px; left: 16px; right: 16px; bottom: 118px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
body.retrato .acusacao-coluna { flex: none; gap: 8px; }
body.retrato .acusacao-coluna h2 { font-size: 22px; margin-bottom: 2px; }
body.retrato .acusacao-lista, body.retrato .acusacao-coluna.provas .acusacao-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; padding-right: 0; }
body.retrato .acusacao-coluna:nth-child(2) .acusacao-lista { grid-template-columns: 1fr; }
body.retrato .acusacao-item, body.retrato .acusacao-coluna.provas .acusacao-item { padding: 8px 10px; gap: 8px; border-radius: 14px; }
body.retrato .acusacao-item .retrato.mini { width: 44px; height: 44px; border-radius: 10px; }
body.retrato .acusacao-item .ev-icone, body.retrato .acusacao-coluna.provas .acusacao-item .ev-icone { width: 38px; height: 38px; border-radius: 10px; }
body.retrato .acusacao-item .ev-icone .icone, body.retrato .acusacao-coluna.provas .acusacao-item .ev-icone .icone { width: 22px; height: 22px; }
body.retrato .acusacao-item .nome, body.retrato .acusacao-coluna.provas .acusacao-item .nome { font-size: 15px; }
body.retrato .acusacao-rodape { left: 0; right: 0; bottom: 0; padding: 12px 16px 16px; flex-direction: column; align-items: stretch; gap: 8px; background: linear-gradient(180deg, rgba(11, 19, 32, 0), rgba(11, 19, 32, 0.95) 30%); }
body.retrato .acusacao-rodape .suave { font-size: 14px; text-align: center; }

/* ---------- resultado ---------- */
body.retrato .resultado-caixa { width: 500px; padding: 26px 20px; gap: 12px; }
body.retrato .resultado-caixa h1 { font-size: 30px; }
body.retrato .estrelas .estrela { width: 64px; height: 64px; }
body.retrato .resultado-pontos { font-size: 18px; }
body.retrato .resultado-pontos .num { font-size: 48px; }
body.retrato .resultado-resumo { gap: 6px; }
body.retrato .resultado-frase { font-size: 17px; }

/* ---------- créditos e configurações ---------- */
body.retrato .creditos-rolo { top: 100%; gap: 26px; }
body.retrato .credito .nome { font-size: 26px; }
body.retrato .credito:first-child .nome { font-size: 44px; }
body.retrato .creditos-acao { right: 16px; bottom: 16px; }
body.retrato .config-caixa { top: 90px; width: 500px; padding: 22px 18px; gap: 12px; }
body.retrato .config-linha { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
body.retrato .config-linha .nome { font-size: 19px; }
body.retrato .config-linha .suave { font-size: 14px; }
body.retrato input[type='range'] { width: 100%; }
body.retrato select { font-size: 18px; min-width: 0; padding: 10px 14px; }
body.retrato .erro-carga { width: 480px; }

/* ---------- ajustes da conferência no celular ---------- */
body.retrato .suspeitos-grade { grid-auto-rows: max-content; }
body.retrato .balao .nome { min-height: 16px; }
body.retrato.modo-teste .creditos-rolo { top: 90px; }
body.retrato .caso-cartao { padding: 14px 16px; }
body.retrato .casos-grade { gap: 10px; }

/* ---------- ilustrações no celular: nada de personagem cortado ---------- */
/* capa, confronto e epílogo: o recorte mira nos personagens */
body.retrato .tela-titulo .fundo-cena img { object-position: 30% 50%; }
body.retrato .tela-confronto .fundo-cena img { object-position: 56% 50%; }
body.retrato .tela-epilogo .fundo-cena img { object-position: 32% 50%; }
/* introdução: a ilustração inteira numa faixa 16:9, com o texto logo abaixo, tudo centralizado */
body.retrato .tela-intro { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 30px 0; }
body.retrato .intro-figura { position: relative; inset: auto; width: 540px; height: 304px; flex: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
body.retrato .veu-intro { display: none; }
body.retrato .intro-legenda { position: relative; inset: auto; padding: 0 24px; flex: none; }
body.retrato .intro-legenda .texto { min-height: 0; }
/* menu: o fundo mostra o farol e a cidade, sem personagem cortado na borda */
body.retrato .tela-menu .fundo-cena.lado-direito img { object-position: 76% 50%; }