:root {
  --bg: #060706;
  --fg: #8a938a;
  --dim: #4a524a;
  --lit: #7ee08a;      /* dim phosphor green */
  --err: #c66;
  --border: #1d211d;
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
textarea { user-select: text; }

html, body { background: var(--bg); }
body {
  color: var(--fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}

/* faint scanlines, nothing more */
.crt {
  pointer-events: none; position: fixed; inset: 0; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}

main { max-width: 780px; margin: 0 auto; padding: 40px 20px 80px; }

header {
  display: flex; justify-content: space-between;
  color: var(--dim); font-size: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px; margin-bottom: 40px;
}
.logo { color: var(--lit); }
.lives { color: var(--lit); }

.screen { display: none; }
.screen.active { display: block; }

.banner {
  font-family: 'VT323', monospace; font-size: 52px;
  color: var(--lit); margin-bottom: 24px;
  text-shadow: 0 0 8px rgba(126,224,138,.25);
}
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.dim { color: var(--dim); margin-bottom: 14px; }
.small { font-size: 14px; }
.lit { color: var(--lit); }

/* commands, not buttons */
.cmd {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--lit);
  padding: 2px 0; margin-right: 28px;
}
.cmd:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmd.dim { color: var(--dim); }
button#btn-start { font-size: 18px; margin-top: 20px; }

/* level chain: . . x . ☠ */
.today-line {
  color: var(--dim); font-size: 15px; margin-bottom: 10px;
}
.today-line .lit { color: var(--lit); }
.today-line .boss-day { color: var(--err); }

#level-map {
  color: var(--dim); font-size: 15px; letter-spacing: 6px;
  margin-bottom: 18px;
}
.lnode { display: inline; cursor: pointer; }
.lnode::after { content: '·'; }
.lnode.cur::after { content: '▌'; color: var(--lit); animation: blink 1.1s steps(1) infinite; }
.lnode.done::after { content: 'x'; color: var(--lit); }
.lnode.boss::after { content: '☠'; }
.lnode.boss.done::after { content: 'x'; color: var(--lit); }

#promptCanvas {
  width: 100%;
  border: 1px solid var(--border);
  margin-bottom: 26px;
}

.label { color: var(--dim); font-size: 13px; margin-bottom: 6px; }

#editor {
  width: 100%; height: 240px; resize: vertical;
  background: transparent; color: var(--fg);
  font-family: 'JetBrains Mono', monospace; font-size: 16px; line-height: 1.7;
  border: 1px solid var(--border); padding: 14px;
  caret-color: var(--lit); outline: none; tab-size: 4;
}
#editor:focus { border-color: #2c332c; }

.btnrow { margin: 14px 0 26px; display: flex; align-items: baseline; flex-wrap: wrap; }
.kbdnote { margin-left: auto; }

#output {
  min-height: 120px; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); padding: 12px 14px;
  font-size: 15px; white-space: pre-wrap; word-break: break-word;
  color: var(--fg);
}
#output .ok { color: var(--lit); }
#output .err { color: var(--err); }
#output .dim { color: var(--dim); }
#output .hint { color: var(--fg); font-style: italic; }
#output .win { color: var(--lit); }

.cmd.hdr { font-size: 14px; margin: 0; color: var(--dim); }
.cmd.hdr:hover { color: var(--lit); }

.profile-body {
  color: var(--fg); font-size: 15px; line-height: 2;
  border: 1px solid var(--border); padding: 16px 20px;
  margin-bottom: 24px; overflow-x: auto;
}

.name-row { display: flex; align-items: center; gap: 16px; }
#name-input {
  background: transparent; color: var(--lit);
  font: inherit; font-size: 15px;
  border: 1px solid var(--border); padding: 8px 12px;
  outline: none; caret-color: var(--lit); width: 240px;
}
#name-input:focus { border-color: #2c332c; }
#name-input::placeholder { color: var(--border); }

.probe-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -10px 0 26px; }
#probe-input {
  background: transparent; color: var(--lit);
  font: inherit; font-size: 15px;
  border: 1px solid var(--border); padding: 7px 11px;
  outline: none; caret-color: var(--lit); width: 240px;
}
#probe-input:focus { border-color: #2c332c; }
#probe-input::placeholder { color: var(--border); }
#output .probe { color: #c2cfc2; }

#admin-input {
  background: transparent; color: var(--lit);
  font: inherit; font-size: 15px;
  border: 1px solid var(--border); padding: 8px 12px;
  outline: none; caret-color: var(--lit); width: 240px;
}
#admin-input:focus { border-color: #2c332c; }
#admin-input::placeholder { color: var(--border); }
.admin-banner { color: var(--err); font-size: 14px; margin-bottom: 14px; }
.board-line { display: block; }
.cmd.del { color: var(--err); margin: 0 0 0 14px; font-size: 14px; }
.cmd.del.armed { text-decoration: underline; text-underline-offset: 3px; }

.toolbox-label {
  margin-top: 26px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--dim);
  display: block; text-align: left; padding: 0;
}
.toolbox-label:hover { color: var(--lit); }
.toolbox {
  color: var(--dim); font-size: 14px; line-height: 2;
  border: 1px dashed var(--border); padding: 10px 14px;
  overflow-x: auto;
}

body.flash::after {
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: rgba(126,224,138,.06);
  animation: flashout .5s forwards;
}
@keyframes flashout { to { opacity: 0; } }

/* intro: the buddy explains itself */
.intro {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  display: grid; place-items: center;
  cursor: pointer;
  animation: fadein .4s ease;
}
.intro[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.intro-inner { text-align: center; padding: 24px; width: min(600px, 92vw); }
.intro-bubble {
  position: relative;
  border: 1px solid var(--border);
  color: var(--fg); font-size: 17px; line-height: 1.7;
  padding: 20px 24px; margin: 0 auto 34px;
  min-height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.intro-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: var(--bg);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.intro-face {
  font-family: 'VT323', monospace; font-size: 68px;
  color: var(--lit); text-shadow: 0 0 18px rgba(126,224,138,.35);
  animation: floaty 3.2s ease-in-out infinite;
}
.intro-skip { color: var(--border); font-size: 13px; margin-top: 40px; }

.intro.alarmed .intro-bubble { border-color: var(--err); color: var(--err); }
.intro.alarmed .intro-bubble::after { border-right-color: var(--err); border-bottom-color: var(--err); }
.intro.alarmed .intro-face { color: var(--err); text-shadow: 0 0 18px rgba(204,102,102,.45); animation: shake .4s ease-in-out 2; }

body.intro-on .mascot { display: none; }

/* floating buddy */
.mascot {
  position: fixed; right: 28px; bottom: 28px; z-index: 40;
  text-align: center; pointer-events: none;
  animation: floaty 3.2s ease-in-out infinite;
}
.buddy {
  font-family: 'VT323', monospace; font-size: 28px;
  color: var(--lit); text-shadow: 0 0 10px rgba(126,224,138,.3);
}
.bubble {
  position: relative;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--dim); font-size: 12px; line-height: 1.5;
  padding: 7px 12px; margin-bottom: 10px; max-width: 190px;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: var(--bg);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@keyframes floaty { 50% { transform: translateY(-9px); } }

/* caught you */
.mascot.alarmed { animation: shake .4s ease-in-out 2; }
.mascot.alarmed .bubble { border-color: var(--err); color: var(--err); }
.mascot.alarmed .bubble::after { border-right-color: var(--err); border-bottom-color: var(--err); }
.mascot.alarmed .buddy { color: var(--err); text-shadow: 0 0 10px rgba(204,102,102,.4); }
@keyframes shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (max-width: 640px) { .mascot { display: none; } }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-track { background: transparent; }