@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #0a0e0c;
  --bg-panel: #0d1310;
  --green: #39ff88;
  --cyan: #4ff0ff;
  --magenta: #ff4fd8;
  --yellow: #ffd84f;
  --red: #ff4f5e;
  --white: #eafff1;
  --dim: #4a5a52;
  --border: #1c2b23;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ---------- Boot screen ---------- */
#boot-screen {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0d1a12 0%, #05070a 100%);
}
#ascii-logo {
  color: var(--green);
  text-shadow: 0 0 12px var(--green);
  font-size: 12px;
  line-height: 1.1;
  animation: flicker 2.5s infinite;
}
#boot-lines { color: var(--dim); font-size: 13px; margin-top: 10px; text-align: left; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
}

/* ---------- Login ---------- */
#login-screen {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(5,10,8,0.9), rgba(5,10,8,0.9)),
    repeating-linear-gradient(0deg, rgba(57,255,136,0.04) 0px, transparent 2px, transparent 4px);
}
.login-box {
  border: 1px solid var(--green);
  box-shadow: 0 0 25px rgba(57,255,136,0.25);
  background: var(--bg-panel);
  padding: 30px 36px;
  width: 340px;
  border-radius: 4px;
}
.mini-logo { color: var(--cyan); text-align: center; margin-bottom: 20px; font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; letter-spacing: 1px; }
.field input {
  width: 100%; background: #04100a; border: 1px solid var(--border);
  color: var(--green); padding: 8px 10px; font-family: inherit; font-size: 14px;
  border-radius: 2px; outline: none;
}
.field input:focus { border-color: var(--green); box-shadow: 0 0 6px rgba(57,255,136,0.4); }
#login-btn {
  width: 100%; padding: 10px; background: var(--green); color: #04100a;
  border: none; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  border-radius: 2px; font-family: inherit;
}
#login-btn:hover { background: #58ffa0; }
.error { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 14px; }

/* ---------- Terminal ---------- */
#terminal-screen { height: 100vh; display: flex; flex-direction: column; }
#terminal-header {
  background: #101a14; padding: 8px 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); font-size: 12px; color: var(--dim);
}
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.red { background: var(--red); } .dot.yellow { background: var(--yellow); } .dot.green { background: var(--green); }
#terminal-title { margin-left: 10px; }
#whoami-tag { color: var(--cyan); }

#terminal-output {
  overflow-y: auto; padding: 16px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
#terminal-output .line { margin-bottom: 4px; }

#terminal-input-line {
  display: flex; align-items: center; padding: 10px 16px;
  background: #0b120e;
}
#prompt { color: var(--green); margin-right: 8px; white-space: nowrap; font-weight: 700; }
#terminal-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); font-family: inherit; font-size: 14px; caret-color: var(--green);
}

/* color tags rendered by terminal.js */
.tag-g { color: var(--green); }
.tag-r { color: var(--red); }
.tag-y { color: var(--yellow); }
.tag-c { color: var(--cyan); }
.tag-m { color: var(--magenta); }
.tag-w { color: var(--white); font-weight: 700; }

#terminal-output::-webkit-scrollbar { width: 8px; }
#terminal-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---------- Shell upgrade ---------- */
body { background: #060908; }
#login-screen { background: radial-gradient(circle at 20% 15%, #123326 0, transparent 32%), #060908; }
.login-shell { width: min(760px, calc(100vw - 32px)); min-height: 300px; padding: 24px; border-radius:12px; background: rgba(7, 16, 12, .94); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 36px rgba(57,255,136,.1); animation: shell-in .55s ease both; }
#login-output { min-height: 20px; white-space: pre-wrap; line-height: 1.7; }
#login-prompt-line { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
#login-prompt { color: var(--green); font-weight: 700; white-space: nowrap; }
#login-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--white); font: inherit; caret-color: var(--green); }
.error { color: var(--red); }
@keyframes shell-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

#terminal-screen { background: linear-gradient(120deg, #060908, #0a110d 60%, #09151b); }
#terminal-header { min-height: 42px; padding: 9px 14px; background: rgba(13, 24, 18, .94); backdrop-filter: blur(12px); }
.dot { border: 0; padding: 0; cursor: pointer; transition: transform .2s, filter .2s; }
.dot:hover { transform: scale(1.25); filter: brightness(1.35); }
.header-spacer { flex: 1; }
.header-status { color: var(--green); font-size: 10px; letter-spacing: 1px; }
.chrome-btn { background: transparent; color: var(--dim); border: 1px solid var(--border); padding: 4px 8px; font: inherit; font-size: 10px; cursor: pointer; }
.chrome-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.terminal-layout { min-height: 0; flex: 1; display: flex; }
#terminal-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
#terminal-output { padding: 22px 24px 8px; }
#terminal-input-line { margin: 0 24px 20px; padding: 11px 0;  background: transparent; }
#terminal-input { font-size: 15px; }
#ops-rail { width: 240px; padding: 16px;  overflow-y: auto; transition: width .25s, opacity .25s, transform .25s; }
.rail-heading { display: flex; justify-content: space-between; color: var(--cyan); font-size: 10px; letter-spacing: 1.5px; margin-bottom: 14px; }
.widget {border-radius:12px; padding: 13px; margin-bottom: 12px; background: rgba(15, 28, 21, .7); animation: widget-in .5s ease both; }
.widget:nth-child(3) { animation-delay: .1s; } .widget:nth-child(4) { animation-delay: .2s; }
.widget-label { display: block; color: var(--dim); font-size: 9px; letter-spacing: 1.2px; margin-bottom: 8px; }
.widget strong { display: block; color: var(--green); font-size: 15px; }
.widget small { color: var(--dim); font-size: 10px; }
.quick-cmd { color: var(--white); background: #102319; border: 1px solid #214933; padding: 6px 7px; margin: 2px; font: inherit; font-size: 11px; cursor: pointer; }
.quick-cmd:hover { border-color: var(--green); color: var(--green); }
.signal { color: #a2c8ae; font-size: 10px; line-height: 1.8; }.signal i { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 7px var(--green); margin-right: 6px; }
.profile-stats { display: flex; gap: 14px; margin: 12px 0 8px; color: var(--yellow); font-size: 14px; }
.profile-stats small { color: var(--dim); font-size: 10px; }.coin-line { color: var(--yellow); }.coin-plus { border: 1px solid var(--yellow); background: transparent; color: var(--yellow); width: 20px; height: 20px; line-height: 14px; margin-left: 6px; cursor: pointer; font: inherit; }.coin-plus:hover { background: var(--yellow); color: #08100b; }
.challenge-widget { max-height: 280px; overflow: auto; }.challenge-card { border-top: 1px solid var(--border); padding: 9px 0; cursor: pointer; }.challenge-card:first-child { border-top: 0; }.challenge-card strong { color: var(--white); font-size: 11px; }.challenge-meta { display: flex; justify-content: space-between; color: var(--dim); font-size: 9px; margin-top: 4px; }.join-challenge { width: 100%; margin-top: 6px; border: 1px solid var(--cyan); color: var(--cyan); background: transparent; padding: 5px; font: inherit; font-size: 10px; cursor: pointer; }.join-challenge:hover { background: var(--cyan); color: #06100d; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }.modal-card { width: min(420px, calc(100vw - 32px)); position: relative; padding: 26px; border: 1px solid var(--cyan); background: #0a1510; box-shadow: 0 20px 80px #000, 0 0 32px rgba(79,240,255,.16); animation: shell-in .25s ease both; }.modal-card h2 { color: var(--white); margin: 5px 0; font-size: 22px; }.modal-copy { color: var(--dim); font-size: 11px; }.modal-card label { display: block; color: var(--dim); font-size: 10px; margin-top: 14px; }.modal-card input { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid var(--border); color: var(--white); background: #06100a; font: inherit; outline: none; }.modal-card input:focus { border-color: var(--cyan); }.modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--dim); font-size: 24px; cursor: pointer; }.primary-action { width: 100%; margin-top: 20px; padding: 11px; border: 0; background: var(--cyan); color: #06100a; font: inherit; font-weight: 700; cursor: pointer; }.primary-action.compact { margin-top: 0; width: auto; padding: 8px 14px; }
.modal-status { min-height: 18px; margin-top: 12px; color: var(--yellow); font-size: 11px; }
.live-chat-bubble-wrap { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0; }
.live-chat-bubble-wrap.self { justify-content: flex-end; }
.live-chat-bubble-wrap.other { justify-content: flex-start; }
.live-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0f2d24, #204b3b); color: var(--green); font-size: 11px; font-weight: 700; border: 1px solid rgba(57,255,136,0.35); flex-shrink: 0; }
.live-chat-bubble { max-width: 72%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(17,28,23,0.9); box-shadow: inset 0 0 0 1px rgba(79,240,255,0.04); }
.live-chat-bubble.self { background: linear-gradient(135deg, rgba(57,255,136,0.18), rgba(28,56,46,0.9)); border-color: rgba(57,255,136,0.3); }
.live-chat-bubble.other { background: linear-gradient(135deg, rgba(79,240,255,0.12), rgba(16,28,35,0.9)); border-color: rgba(79,240,255,0.25); }
.live-chat-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; color: var(--dim); margin-bottom: 6px; }
.live-chat-meta strong { color: var(--cyan); font-size: 10px; }
.live-chat-message { color: var(--white); font-size: 11px; white-space: pre-wrap; line-height: 1.5; }
.live-chat-badge { display: inline-block; margin-left: 6px; padding: 2px 6px; background: rgba(255,216,79,0.18); color: var(--yellow); border: 1px solid rgba(255,216,79,0.25); font-size: 8px; letter-spacing: 1px; border-radius: 999px; }
.live-chat-typing { color: var(--yellow); font-size: 10px; margin: 6px 0 10px; font-style: italic; }
@keyframes widget-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.window-minimized #terminal-body, .window-minimized #ops-rail { display: none; }
.window-maximized #ops-rail { display: none; }
.rail-hidden #ops-rail { display: none; }
@media (max-width: 760px) {
  #ops-rail { position: absolute; right: 0; top: 42px; bottom: 0; z-index: 4; box-shadow: -16px 0 40px rgba(0,0,0,.4); }
  #terminal-output { padding: 16px 14px 8px; }
  #terminal-input-line { margin: 0 14px 12px; }
  .header-status { display: none; }
}