/* ===== DOS palette (CGA/EGA 16) ===== */
:root {
  --c-black:   #000000;
  --c-blue:    #0000aa;
  --c-green:   #00aa00;
  --c-cyan:    #00aaaa;
  --c-red:     #aa0000;
  --c-magenta: #aa00aa;
  --c-brown:   #aa5500;
  --c-lgray:   #aaaaaa;
  --c-dgray:   #555555;
  --c-lblue:   #5555ff;
  --c-lgreen:  #55ff55;
  --c-lcyan:   #55ffff;
  --c-lred:    #ff5555;
  --c-lmag:    #ff55ff;
  --c-yellow:  #ffff55;
  --c-white:   #ffffff;
  --font-dos: 'VT323', 'Perfect DOS VGA 437', 'Px437 IBM VGA8', monospace;
  --font-nes: 'Press Start 2P', monospace;
  --fs: 22px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--c-black);
  color: var(--c-lgray);
  font-family: var(--font-dos);
  font-size: var(--fs);
  line-height: 1.1;
  overflow: hidden;
}
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.dim { color: var(--c-dgray); }
.small { font-size: 0.85em; }
.right { margin-left: auto; }

/* ===== NES title ===== */
.nes {
  background: var(--c-black);
  align-items: center;
  justify-content: center;
  font-family: var(--font-nes);
  color: #fcfcfc;
  text-align: center;
  cursor: pointer;
}
.nes-wrap { padding: 16px; max-width: 100%; }
#title-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 28px;
}
.nes-title {
  font-size: clamp(16px, 4vw, 34px);
  margin: 0 0 18px;
  color: #f8b800;
  text-shadow: 4px 4px 0 #7c0800;
  line-height: 1.4;
}
.nes-sub { font-size: clamp(8px, 1.6vw, 12px); color: #a4a4a4; margin: 0 0 48px; line-height: 1.8; }
.nes-press { font-size: clamp(10px, 2vw, 16px); color: #fcfcfc; margin: 0 0 40px; }
.nes-copy { font-size: 8px; color: #7c7c7c; margin: 0; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scanlines {
  pointer-events: none;
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.25) 2px 4px);
}

/* ===== DOS chrome ===== */
.dos { background: var(--c-blue); color: var(--c-lgray); }

.menubar, .statusbar {
  background: var(--c-lgray);
  color: var(--c-black);
  padding: 0 8px;
  height: 1.2em;
  display: flex;
  gap: 1.5em;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  flex: 0 0 auto;
}
.statusbar { background: var(--c-cyan); color: var(--c-black); gap: 1.2em; }
.hot { color: var(--c-red); }
.statusbar .hot { color: var(--c-red); }
.menu-item { cursor: pointer; padding: 0 4px; }
.menu-item:hover { background: var(--c-green); color: var(--c-white); }
.menu-item:hover .hot { color: var(--c-white); }

.desktop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 .55em, rgba(170,170,170,.35) .55em .6em) 0 0 / 100% 1.2em,
    repeating-linear-gradient(90deg, transparent 0 .55em, rgba(170,170,170,.35) .55em .6em) 0 0 / .6em 100%;
  background-color: var(--c-blue);
  padding: 16px;
}

/* ===== Windows (double-line box) ===== */
.window {
  background: var(--c-blue);
  border: 3px double var(--c-white);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.win-title {
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  padding: 0 .4em;
  color: var(--c-white);
  white-space: nowrap;
  max-width: calc(100% - 2em);
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-close { color: var(--c-lgreen); }
.win-num { color: var(--c-lgreen); }
.win-body { padding: .8em .9em .4em; overflow-y: auto; flex: 1; min-height: 0; }
.win-foot { color: var(--c-lcyan); font-size: .85em; padding: 0 .6em .1em; text-align: right; height: 1em; }

/* scrollbars, Borland style */
.win-body::-webkit-scrollbar { width: 14px; }
.win-body::-webkit-scrollbar-track { background: var(--c-cyan); }
.win-body::-webkit-scrollbar-thumb { background: var(--c-lgray); border: 2px solid var(--c-cyan); }

.dialog {
  background: var(--c-lgray);
  color: var(--c-black);
  border: 3px double var(--c-black);
  box-shadow: 8px 8px 0 rgba(0,0,0,.6);
  min-width: min(560px, 92vw);
  position: relative;
}
.dialog-title {
  position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%);
  background: var(--c-lgray); padding: 0 .4em; color: var(--c-black);
}
.dialog-body { padding: 1.2em 1.2em .8em; }
.dialog p { margin: 0 0 .6em; }
.listbox {
  list-style: none; margin: 0 0 .8em; padding: .2em 0;
  background: var(--c-blue); color: var(--c-lgray);
  border: 3px double var(--c-white);
  min-height: 4em;
}
.listbox li { padding: 0 .6em; cursor: pointer; display: flex; gap: 1em; }
.listbox li .tag { margin-left: auto; color: var(--c-yellow); }
.listbox li.sel { background: var(--c-green); color: var(--c-white); }
.listbox li.sel .tag { color: var(--c-white); }
.listbox li .tl { color: var(--c-dgray); }
.listbox li.sel .tl { color: var(--c-lgray); }

/* ===== IDE layout ===== */
.ide {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 28%);
  gap: 12px;
  padding: 14px 12px 6px;
  min-height: 0;
}
.sidebar { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.window.side { flex: 1; }
.side-head { color: var(--c-yellow); margin: .2em 0 .1em; }
.side-list { list-style: none; margin: 0 0 .4em; padding: 0; }
.side-list li { cursor: pointer; padding-left: .3em; }
.side-list li:hover { background: var(--c-cyan); color: var(--c-black); }
.side-list li.none { color: var(--c-dgray); cursor: default; }
.side-list li.none:hover { background: none; color: var(--c-dgray); }

/* ===== Transcript ===== */
#transcript { white-space: pre-wrap; word-wrap: break-word; }
#transcript .ln { min-height: 1.1em; }
#transcript .t-title  { color: var(--c-yellow); margin-top: .2em; }
#transcript .t-text   { color: var(--c-lgray); }
#transcript .t-dim    { color: var(--c-lblue); }
#transcript .t-sys    { color: var(--c-lcyan); }
#transcript .t-err    { color: var(--c-lred); }
#transcript .t-person { color: var(--c-lgreen); }
#transcript .t-item   { color: var(--c-white); }
#transcript .t-reveal { color: var(--c-yellow); }
#transcript .t-quote  { color: var(--c-white); font-style: italic; }
#transcript .t-mono   { color: var(--c-lgray); }
#transcript .t-win    { color: var(--c-lgreen); }
#transcript .t-lose   { color: var(--c-lred); }
#transcript .t-echo   { color: var(--c-white); margin-top: .5em; }
#transcript .t-echo::before { content: '> '; color: var(--c-lgreen); }
#transcript .t-speech { color: var(--c-lgray); padding-left: 1.2em; }
#transcript .t-speech .who { color: var(--c-lmag); margin-left: -1.2em; }

/* ===== Command line ===== */
.cmdline {
  display: flex; align-items: center; gap: .4em;
  background: var(--c-black); color: var(--c-lgray);
  padding: 0 .8em; height: 1.4em; margin: 0 12px 6px;
  border: 3px double var(--c-lgray);
}
.cmdline .prompt { color: var(--c-lgreen); }
#cmd {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--c-white); font: inherit; caret-color: var(--c-lgray);
}
#cmd::placeholder { color: var(--c-dgray); }
.cmdline .cursor { display: none; }
.cmdline.busy { opacity: .5; }

/* ===== Mobile ===== */
@media (max-width: 760px) {
  :root { --fs: 18px; }
  .ide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; padding: 10px 8px 4px; }
  .sidebar { flex-direction: row; gap: 10px; max-height: 32vh; }
  .window.side .win-body { font-size: .9em; }
  .menubar .menu-item.right { display: none; }
  .statusbar span:nth-child(n+3):not(.right) { display: none; }
  .cmdline { margin: 0 8px 4px; }
}