/* RETROLAB — chassi escuro, tela de fósforo que muda por máquina */
:root {
  --chassi: #1b1d21;
  --painel: #24262c;
  --linha: #383b43;
  --osso: #d6d3cc;
  --osso-dim: #8e8c86;
  --led-off: #3a3d44;
  --led-on: #ff4b3e;
  --ok: #4fdc7b;
  --vh: 100dvh;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--chassi);
  color: var(--osso);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  overscroll-behavior: none;
}
button {
  font: inherit; color: inherit; background: none; border: none;
  cursor: pointer; touch-action: manipulation;
}

/* ---------- app ---------- */
#app {
  height: var(--vh);
  display: flex; flex-direction: column;
  max-width: 900px; margin: 0 auto;
}

/* faixa da máquina */
#faixa {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--painel);
  border-bottom: 1px solid var(--linha);
  user-select: none;
}
#faixa .nome { font-weight: 600; letter-spacing: .04em; }
#faixa .ano { color: var(--osso-dim); font-size: 12px; }
#pwr { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#pwr i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--led-on); box-shadow: 0 0 6px 1px var(--led-on);
}
#pwr span { font-size: 9px; color: var(--osso-dim); letter-spacing: .08em; }

/* ---------- monitor ---------- */
#monitor {
  flex: 1; min-height: 0;
  margin: 8px 8px 0;
  display: flex; flex-direction: column;
  border-radius: 12px 12px 6px 6px;
  padding: 12px 12px 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 8px rgba(0,0,0,.45),
              0 6px 14px rgba(0,0,0,.5);
}
#crt {
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  border-radius: 14px / 18px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.9), inset 0 0 26px 8px rgba(0,0,0,.65);
}
#crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 130% 110% at 50% 45%, transparent 62%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
}
#queixo {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 26px; padding: 0 6px;
}
#marcaMonitor {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  opacity: .8; user-select: none;
}
#tela {
  flex: 1; overflow-y: auto;
  padding: 10px 12px 4px;
  font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-all;
}
/* fósforo */
.fos-amber #crt { background: radial-gradient(ellipse at 50% 40%, #1d150c 0%, #120d07 75%); }
.fos-amber #tela, .fos-amber #linhaAtiva { color: #ffb100; text-shadow: 0 0 4px rgba(255,177,0,.35); }
.fos-green #crt { background: radial-gradient(ellipse at 50% 40%, #0a1a0c 0%, #050e06 75%); }
.fos-green #tela, .fos-green #linhaAtiva { color: #33ff77; text-shadow: 0 0 4px rgba(51,255,119,.3); }
#tela .meta { opacity: .7; font-style: italic; }
#tela .ok { color: var(--ok); text-shadow: 0 0 4px rgba(79,220,123,.4); font-weight: 600; }
#tela .fase { color: #fff; }
.fos-amber #tela .fase { color: #ffd76e; }
.fos-green #tela .fase { color: #a8ffc9; }

/* linha de entrada dentro do CRT */
#linhaAtiva {
  display: flex; align-items: center;
  padding: 2px 12px 8px;
  font-size: 16px; /* evita zoom do iOS */
}
#prompt { white-space: pre; }
#cmd {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: inherit; font: inherit; text-shadow: inherit;
  caret-color: currentColor;
}

/* barra de teclas */
#teclas {
  display: flex; gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--painel);
  border-top: 1px solid var(--linha);
}
#teclas button {
  flex: 1; min-height: 44px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--chassi);
  font-size: 14px; letter-spacing: .03em;
  color: var(--osso);
}
#teclas button:active { background: var(--linha); }
#teclas .enviar { flex: 1.4; background: var(--linha); font-weight: 600; }

/* ---------- gabinete ---------- */
#gabinete {
  margin: 0 8px;
  display: flex; align-items: stretch; gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.07), inset 0 -2px 5px rgba(0,0,0,.4),
              0 4px 10px rgba(0,0,0,.45);
}
#painelFrontal { flex: 1; border-radius: 3px; }
#baias { display: flex; gap: 8px; align-items: center; }
.baia {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  border-radius: 3px;
  background: #101115;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
}
.baia i {   /* fenda do disquete */
  display: block; width: 44px; height: 4px; border-radius: 2px;
  background: #000; box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,.06);
}
.baia.hd i { width: 18px; }
.baia b {   /* LED de atividade */
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-off); transition: background .1s, box-shadow .1s;
}
.baia.flash b { background: var(--led-on); box-shadow: 0 0 7px 2px var(--led-on); }
.baia span { font-size: 9px; letter-spacing: .1em; color: #7d7a72; user-select: none; }

/* ---------- skins por máquina ---------- */
/* IMSAI 8080: chassi azul, painel de chaves vermelhas */
.maq-cpm #monitor { background: linear-gradient(#20232a, #16181d); }
.maq-cpm #marcaMonitor { color: #9aa3b0; }
.maq-cpm #gabinete { background: linear-gradient(#1c2f4d, #152540); }
.maq-cpm #painelFrontal {
  background:
    repeating-linear-gradient(90deg,
      #c8352b 0 5px, #8c1f18 5px 8px, transparent 8px 22px);
  background-size: 22px 14px;
  background-position: 4px center;
  background-repeat: repeat-x;
  align-self: center; height: 14px; margin: 0 4px;
}
.maq-cpm .baia i { width: 56px; } /* drives de 8" */

/* IBM PC / XT: plástico bege */
.maq-dos1 #monitor, .maq-dos2 #monitor {
  background: linear-gradient(#d9d2c0, #c4bca6);
}
.maq-dos1 #marcaMonitor, .maq-dos2 #marcaMonitor { color: #4c76b8; }
.maq-dos1 #gabinete, .maq-dos2 #gabinete {
  background: linear-gradient(#d3ccba, #bdb49d);
}
.maq-dos1 #painelFrontal, .maq-dos2 #painelFrontal {
  background: repeating-linear-gradient(0deg,
    transparent 0 3px, rgba(0,0,0,.06) 3px 4px);
}
.maq-dos1 .baia span, .maq-dos2 .baia span { color: #5d5748; }
.maq-dos1 .baia, .maq-dos2 .baia { background: #23211c; }

/* teclas com cara de teclado da época */
.maq-dos1 #teclas button, .maq-dos2 #teclas button {
  background: #d9d2c0; color: #33302a; border-color: #a49b84;
  box-shadow: 0 2px 0 #a49b84;
}
.maq-dos1 #teclas button:active, .maq-dos2 #teclas button:active {
  transform: translateY(1px); box-shadow: 0 1px 0 #a49b84;
}
.maq-dos1 #teclas, .maq-dos2 #teclas { background: #b5ac95; border-top-color: #a49b84; }
.maq-dos1 #teclas .enviar, .maq-dos2 #teclas .enviar { background: #c9c1ab; font-weight: 700; }
.maq-cpm #teclas button {
  background: #23252b; color: var(--osso); border-color: #101114;
  box-shadow: 0 2px 0 #101114;
}
.maq-cpm #teclas button:active { transform: translateY(1px); box-shadow: 0 1px 0 #101114; }

/* faixa do exercício atual */
#exFaixa {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 8px 0;
  padding: 8px 10px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 13px;
  min-height: 44px;
  text-align: left; width: calc(100% - 16px);
}
#exFaixa .num { color: var(--osso-dim); white-space: nowrap; }
#exFaixa .tit { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#exFaixa .seta { color: var(--osso-dim); }
#exFaixa.upgrade { border-color: var(--ok); color: var(--ok); font-weight: 600; }

/* ---------- folha (sheet) ---------- */
#veu {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 9;
}
#folha {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 82%; overflow-y: auto;
  background: var(--painel);
  border-top: 1px solid var(--linha);
  border-radius: 14px 14px 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .22s ease;
  z-index: 10;
  max-width: 900px; margin: 0 auto;
}
body.folha-aberta #veu { opacity: 1; pointer-events: auto; }
body.folha-aberta #folha { transform: translateY(0); }
#folha h2 {
  font-size: 11px; letter-spacing: .18em; color: var(--osso-dim);
  margin: 18px 0 8px; font-weight: 600;
}
#folha h2:first-child { margin-top: 0; }
#folha .puxador {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--linha); margin: 0 auto 12px;
}

/* ficha técnica */
.ficha { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.ficha .cab {
  padding: 10px 12px; background: var(--chassi);
  border-bottom: 1px solid var(--linha);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ficha .cab b { letter-spacing: .04em; }
.ficha .cab span { color: var(--osso-dim); font-size: 12px; }
.ficha table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ficha td { padding: 7px 12px; border-top: 1px solid var(--linha); vertical-align: top; }
.ficha td:first-child { color: var(--osso-dim); white-space: nowrap; width: 1%; padding-right: 16px; }
.ficha .contexto { padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--osso); border-top: 1px solid var(--linha); }

/* lista de exercícios */
.exlista { list-style: none; }
.exlista li {
  padding: 9px 10px; border: 1px solid var(--linha);
  border-radius: 8px; margin-bottom: 6px; font-size: 13px;
}
.exlista li.feito { color: var(--osso-dim); }
.exlista li.feito::before { content: '✓ '; color: var(--ok); }
.exlista li.trancado { color: var(--osso-dim); opacity: .5; }
.exlista li.atual { border-color: var(--osso-dim); }
.exlista li.atual .instrucao { margin-top: 6px; line-height: 1.5; color: var(--osso); }
.exlista li.atual .dica {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--chassi); border: 1px dashed var(--linha);
  line-height: 1.5; display: none;
}
.exlista li.atual.mostraDica .dica { display: block; }
.btn-dica {
  margin-top: 8px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 6px; font-size: 12px;
  color: var(--osso);
}

/* conta */
.contaBtns { display: flex; flex-direction: column; gap: 8px; }
.contaBtns button {
  min-height: 44px; border: 1px solid var(--linha); border-radius: 8px;
  font-size: 14px; color: var(--osso); background: var(--chassi);
}
.contaBtns .perigo { color: var(--led-on); border-color: rgba(255,75,62,.4); }
#salvoInfo { font-size: 12px; color: var(--osso-dim); margin-top: 10px; text-align: center; }

/* ---------- login ---------- */
#entrar {
  height: var(--vh); display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#entrar .caixa {
  width: 100%; max-width: 360px;
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 12px; padding: 26px 22px;
}
#entrar .marca {
  text-align: center; margin-bottom: 4px;
  font-weight: 700; letter-spacing: .26em; font-size: 20px;
}
#entrar .marca b { color: #ffb100; }
#entrar .sub {
  text-align: center; color: var(--osso-dim); font-size: 12px;
  margin-bottom: 22px; letter-spacing: .06em;
}
#entrar label { display: block; font-size: 11px; letter-spacing: .14em; color: var(--osso-dim); margin: 14px 0 6px; }
#entrar input {
  width: 100%; min-height: 46px; padding: 0 12px;
  background: var(--chassi); border: 1px solid var(--linha); border-radius: 8px;
  color: var(--osso); font: inherit; font-size: 16px; outline: none;
}
#entrar input:focus { border-color: var(--osso-dim); }
#entrar .acoes { display: flex; gap: 8px; margin-top: 22px; }
#entrar .acoes button {
  flex: 1; min-height: 48px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--linha); color: var(--osso);
}
#entrar .acoes .principal { background: #ffb100; color: #16100a; font-weight: 700; border: none; }
#erroLogin { color: var(--led-on); font-size: 13px; margin-top: 12px; min-height: 1em; text-align: center; }

.escondido { display: none !important; }

/* foco visível para teclado físico */
button:focus-visible, input:focus-visible { outline: 2px solid var(--osso-dim); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #folha, #veu, .led i { transition: none; }
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  #app { max-width: 1200px; flex-direction: row; flex-wrap: wrap; align-content: stretch; padding: 12px; gap: 12px; }
  #faixa { width: 100%; border: 1px solid var(--linha); border-radius: 8px; }
  #principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  #lateral {
    width: 340px; overflow-y: auto;
    background: var(--painel); border: 1px solid var(--linha); border-radius: 8px;
    padding: 14px;
  }
  #folha, #veu { display: none; }
}
@media (max-width: 899px) { #lateral { display: none; } }