/* ==========================================================================
   shell.css - interface da Academia (alto contraste, retro sci-fi vetorial)
   ========================================================================== */

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ---------- 1. sequencia de boot ---------- */

#boot {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--preto);
  color: var(--verde);
  padding: clamp(16px, 5vw, 60px);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#boot pre {
  margin: 0;
  font-size: clamp(11px, 1.4vw, 14px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
#boot .cursor { background: var(--verde); animation: pisca 900ms steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
#boot-pular {
  position: absolute; top: 14px; right: 14px;
  font-size: 12px;
}

/* varredura CRT: leve, so na casca, desligavel */
body[data-crt="1"] #app::before {
  content: "";
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ---------- 2. barra de treino (topo) ---------- */

#barra-treino {
  flex: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linha);
  padding: 4px 10px;
  font-size: 13px;
}
#barra-treino .btn { padding: 3px 9px; font-size: 12px; }
#barra-treino .marca {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.14em; color: var(--destaque);
  margin-right: auto;
}
#barra-treino .marca svg { width: 22px; height: 22px; }
.campo { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tinta-fraca); }
.campo select, .campo input[type="number"] {
  background: var(--fundo); color: var(--frente);
  border: 1px solid var(--linha); padding: 3px 6px;
}
.leitura {
  border: 1px solid var(--linha); padding: 3px 10px;
  font-size: 13px; letter-spacing: 0.06em; white-space: nowrap;
}
.leitura b { color: var(--destaque); font-weight: normal; }
.leitura[data-urgente="1"] b { color: var(--erro); }

/* ---------- 3. faixa do GabuTRON ---------- */

#faixa-ia {
  flex: none;
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 8px;
  padding: 6px 10px 0;
  min-height: 0;
}
#faixa-ia .painel__corpo { padding: 6px 8px; }
#faixa-ia .painel__topo { padding: 2px 8px; font-size: 11px; }
body[data-foco="1"] #faixa-ia { display: none; }
#rosto-ia pre {
  margin: 0;
  font-size: 8.6px;
  line-height: 1.05;
  color: var(--destaque);
  text-align: center;
  white-space: pre;
}
#rosto-ia[data-humor="alerta"] pre { color: var(--alerta); }
#rosto-ia[data-humor="erro"] pre { color: var(--erro); }
#rosto-ia[data-humor="falando"] pre { animation: respira 1.1s ease-in-out infinite; }
@keyframes respira { 50% { opacity: 0.62; } }

#fala { display: flex; flex-direction: column; gap: 6px; }
#fala-texto { flex: 1; min-height: 52px; max-height: 108px; overflow: auto; font-size: 13.5px; }
#fala-texto .missao-nome { color: var(--destaque); }
#fala-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
#fala-acoes .btn { font-size: 12px; padding: 4px 10px; }

/* checklist de passos, agora numa coluna propria ao lado do computador */
#painel-passos { flex: 0 0 252px; min-width: 0; }
#painel-passos .painel__corpo { padding: 8px 10px; }
#missao-titulo { margin: 0 0 8px; font-size: 12.5px; color: var(--destaque); }
#passos { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
#passos li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 2px 0; color: var(--tinta-fraca);
}
#passos li::before { content: "[ ]"; flex: none; color: var(--tinta-fraca); }
#passos li[data-feito="1"] { color: var(--destaque); text-decoration: line-through; }
#passos li[data-feito="1"]::before { content: "[x]"; color: var(--destaque); }
#passos li[data-atual="1"] { color: var(--frente); }
#passos li[data-atual="1"]::before { content: "[>]"; color: var(--destaque); }
#passos li[data-falhou="1"] { color: var(--erro); }
#passos li[data-falhou="1"]::before { content: "[!]"; color: var(--erro); }

/* ---------- 4. area do computador simulado ---------- */

#palco {
  flex: 1;
  min-height: 0;
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
/* A tela do Pinguim 95x tem proporcao 4:3 e usa toda a altura disponivel.
   A largura sai da altura, entao ganhar altura na casca aumenta a tela toda. */
#moldura {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  margin: 0 auto;
  border: 2px solid var(--destaque);
  position: relative;
  display: flex;
}
#moldura::before {
  content: "TERMINAL DE CAMPO / PINGUIM 95x";
  position: absolute; top: -1px; left: 12px;
  transform: translateY(-50%);
  background: var(--fundo); color: var(--destaque);
  font-size: 10px; letter-spacing: 0.18em; padding: 0 6px;
  z-index: 5; pointer-events: none;
}

/* ---------- 5. ajustes ---------- */

#ajustes .linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha);
  font-size: 13px;
}
#ajustes .linha:last-child { border-bottom: 0; }
.interruptor {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.interruptor input { accent-color: var(--destaque); width: 15px; height: 15px; }

/* ---------- 5b. aviso de missao cumprida ---------- */

#parabens-titulo { color: var(--destaque); margin: 0 0 12px; }
#parabens-lista { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; }
#parabens-lista li { display: flex; gap: 8px; padding: 2px 0; }
#parabens-lista li::before { content: "[x]"; color: var(--destaque); flex: none; }
#parabens-pontos { font-size: 13px; color: var(--tinta-fraca); }
#parabens-pontos b { color: var(--destaque); font-weight: normal; }

/* ---------- 6. placar ---------- */

#placar-lista { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#placar-lista li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; border-bottom: 1px dotted var(--linha);
}
#placar-lista li b { color: var(--destaque); font-weight: normal; }
#placar-vazio { color: var(--tinta-fraca); font-size: 13px; }

/* ---------- 7. bloqueio em telas sem mouse ---------- */

#bloqueio {
  position: fixed; inset: 0; z-index: 1100;
  display: none;
  background: var(--preto); color: var(--frente);
  padding: 24px; text-align: center;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
#bloqueio h1 { color: var(--destaque); font-size: 18px; letter-spacing: 0.1em; margin: 0; }
#bloqueio p { max-width: 44ch; font-size: 14px; margin: 0; }
#bloqueio svg { width: 84px; height: 84px; }

/* dispositivo sem ponteiro fino: bloqueia */
@media (pointer: coarse) and (hover: none) {
  #bloqueio { display: flex; }
  #app, #boot { display: none !important; }
}
/* tela muito estreita mesmo com mouse */
@media (max-width: 800px) {
  #bloqueio { display: flex; }
  #app, #boot { display: none !important; }
}

/* ---------- 8. adaptacoes de altura ---------- */

@media (max-height: 780px) {
  #faixa-ia { grid-template-columns: 150px 1fr; }
  #rosto-ia pre { font-size: 7.4px; }
  #fala-texto { min-height: 44px; max-height: 84px; font-size: 12.5px; }
  #barra-treino { font-size: 12px; }
}
@media (max-width: 1200px) {
  #painel-passos { flex-basis: 210px; }
}
@media (max-width: 1080px) {
  #barra-treino .marca span { display: none; }
}