/* Correção de contraste/acessibilidade - SENAI. Escopo intencionalmente amplo. */
:root { color-scheme: light; }
body { color: #142a4d; }
/* Painéis sempre claros, inclusive as instruções (antes herdavam texto azul escuro sobre azul marinho). */
.panel, .panel.instructions, #instructions, .qmodal .panel, #teacher .panel,
#waiting .panel, #end .panel, #game .panel {
  background: #ffffff !important;
  color: #142a4d !important;
  border-color: #bed0e8 !important;
}
.panel h1, .panel h2, .panel h3, #instructions h2, #instructions h3,
#teacher .panel h2, .qmodal .panel h2 { color:#003c89 !important; }
.panel p, .panel li, .panel span, .panel label, .panel strong, .panel small,
#instructions li, #instructions p, #instructions ol,
#questionText, #waitCount, #waitText, .tip-copy {
 color:#1d3453 !important;
}
/* Painel de instruções: contraste AA/AAA e espaçamento confortável */
#instructions { padding:clamp(22px,3.4vw,40px) !important; margin-block:22px; box-shadow:0 14px 36px #0c32621a !important; }
#instructions h2 { font-size:clamp(23px,2.5vw,32px); line-height:1.25; margin:0 0 18px; }
#instructions ol { margin:0 0 20px; padding-left:32px; }
#instructions li { font-size:16px; font-weight:550; line-height:1.75; padding-left:8px; margin:9px 0; }
#instructions li::marker { color:#0050a4; font-weight:900; }
#instructions p { font-size:15px; line-height:1.65; padding:14px 18px; border-left:4px solid #ff6900; border-radius:9px; background:#fff3e9; }
/* Estado escuro explícito: mensagens, cronômetro e blocos claros */
.panel .tiny, .panel .muted, .panel .status { color:#304e72 !important; }
.panel .status.error { color:#8b1a26 !important; background:#fff0ef !important; }
.panel .field label, .panel .stat small { color:#315276 !important; }
.panel .stat b { color:#003c89 !important; }
.panel input { background:#fff !important; color:#152e57 !important; border:1px solid #8fa9ca !important; }
.panel input::placeholder { color:#566b85 !important; opacity:1; }
.panel .roomcard, .panel .stat, .panel .topics span { background:#f0f5ff !important; color:#163861 !important; }
.panel .answer { background:#f0f5ff !important; border:1px solid #98b7dc !important; color:#15365f !important; }
.panel .answer:hover, .panel .answer:focus-visible { background:#dceaff !important; }
/* A regra genérica acima nunca deve ocultar texto de botões coloridos */
.btn, .btn span, .panel .btn, .panel .btn span { color:#fff !important; }
.btn.secondary, .btn.secondary span, .panel .btn.secondary, .panel .btn.secondary span { color:#00459d !important; }
.btn.warn, .btn.warn span { color:#54300a !important; }
.btn.danger, .btn.danger span { color:#fff !important; }
.panel button.avatar { color:#172e58 !important; }
.panel .progress-sample span { color:#00459d !important; }
/* Títulos e mensagens sobre heróis escuros precisam continuar legíveis */
.hero:not(.senai-hero) { color:#fff; }
.hero:not(.senai-hero) h1 { color:#ffffff !important; }
.hero:not(.senai-hero) h1 span { color:#ffb16c !important; }
.hero:not(.senai-hero) p { color:#e0edff !important; }
.hero:not(.senai-hero) .eyebrow { color:#ffb16c !important; }
/* Destaque de foco para navegação por teclado */
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #ff7400 !important; outline-offset:3px; }
@media(max-width:700px) { #instructions li {font-size:15px} #instructions {padding:20px !important} }