/* Tela 1: monitor vintage com tubo CRT âmbar. */

#term { opacity: 1; background: radial-gradient(circle at 50% 40%, #3a2716, #120b06); }

/* ---------- gabinete ---------- */
.monitor {
  margin: auto; width: min(900px, 100%); height: min(660px, calc(100vh - 32px));
  background: linear-gradient(#dcc79e, #b4955f); border-radius: 28px; padding: 22px 22px 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 -6px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35);
  display: flex; flex-direction: column;
}
.monitor-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px;
  font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: .18em; color: var(--brown); font-weight: 700;
}
.led { width: 9px; height: 9px; border-radius: 50%; background: #7fbf4a; box-shadow: 0 0 8px #7fbf4a; display: inline-block; margin-right: 8px; }

/* ---------- tubo CRT ---------- */
.crt {
  flex: 1; min-height: 0; background: #160f09; border-radius: 20px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 70px rgba(0,0,0,.95), inset 0 0 10px rgba(224,176,64,.25), 0 0 0 4px #8a6d43;
}
.tube { position: absolute; inset: 0; animation: flicker 5s infinite; }
.scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px 4px); }
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 15%, rgba(255,240,200,.07), transparent 45%), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6));
}
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: .985; } 50% { opacity: .94; } 52% { opacity: .99; } }

/* TV desligando (demande.sh) */
.crt.off .tube { animation: tvoff .85s forwards; }
@keyframes tvoff {
  0%   { transform: scale(1, 1);     filter: brightness(1); }
  55%  { transform: scale(1, .006);  filter: brightness(3); }
  100% { transform: scale(0, .006);  filter: brightness(6); }
}

/* ---------- saída de texto ---------- */
.out {
  position: absolute; inset: 0; padding: 20px 22px; overflow-y: auto; font-size: 22px; line-height: 1.18;
  text-shadow: 0 0 6px rgba(224,176,64,.55); white-space: pre-wrap; word-break: break-word; scrollbar-width: none;
}
.out::-webkit-scrollbar { display: none; }

.line.dim  { color: var(--tan); opacity: .8; }
.line.hi   { color: #f6e3b0; }
.line.ok   { color: #a9c97a; text-shadow: 0 0 6px rgba(169,201,122,.5); }
.line.err  { color: #e08a5a; text-shadow: 0 0 6px rgba(224,138,90,.5); }
.line.bl   { color: #9cc0db; text-shadow: 0 0 6px rgba(156,192,219,.5); }
.line.meme { color: #f3d36b; font-style: italic; }

/* ---------- linha de comando ---------- */
.inputline { display: flex; gap: 10px; }
.prompt { color: #a9c97a; flex: none; }
#cmd { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: var(--amber); }

/* ---------- atalhos (celular) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.chip {
  font-family: 'Courier Prime', monospace; font-size: 13px; background: var(--brown); color: var(--cream); border: none;
  border-radius: 999px; padding: 7px 13px; cursor: pointer; box-shadow: 0 2px 0 #3a2414;
}
.chip:active { transform: translateY(2px); box-shadow: none; }
.chip:disabled { opacity: .45; cursor: default; }

@media (max-width: 600px) {
  .monitor { padding: 12px 12px 10px; border-radius: 20px; }
  .out { font-size: 19px; padding: 14px; }
  .monitor-foot span:last-child { display: none; }
}