:root{
  --neon-cyan:#00f0ff;
  --neon-magenta:#ff00aa;
  --neon-green:#00ff88;
  --neon-amber:#ffb000;
  --bg-dark:#05060a;
  --glass:rgba(10,15,25,0.72);
  --glass-border:rgba(0,240,255,0.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Share Tech Mono',monospace;
  background:var(--bg-dark);
  color:#cde8ff;
  overflow-x:hidden;
  min-height:100vh;
}
#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
.scanline{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,240,255,0.035) 0px,
    rgba(0,240,255,0.035) 2px,
    transparent 2px,
    transparent 4px);
  animation:scan 6s linear infinite;
}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 40px}}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%);
}

/* ===== topbar ===== */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border);
}
.logo{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.5rem;
  letter-spacing:2px;color:var(--neon-cyan);
  text-shadow:0 0 12px rgba(0,240,255,0.55);
}
.logo span{color:var(--neon-magenta);text-shadow:0 0 12px rgba(255,0,170,0.55)}
.timer{
  font-family:'Orbitron',sans-serif;font-size:1.9rem;font-weight:700;
  color:var(--neon-magenta);text-shadow:0 0 12px rgba(255,0,170,0.6);
  min-width:90px;text-align:center;
}
.timer.warning{color:#ff3344;text-shadow:0 0 14px rgba(255,51,68,0.85);animation:timerPulse 1s infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.55}}
.progress-wrap{flex:1;max-width:320px;margin:0 20px}
.progress-bar{
  height:7px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;
  border:1px solid var(--glass-border);
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 12px rgba(0,240,255,0.5);
}
.progress-text{font-size:.75rem;margin-top:5px;color:#88aacc;text-align:center;letter-spacing:1px}

/* ===== terminal ===== */
.terminal{position:relative;z-index:2;max-width:940px;margin:34px auto;padding:0 20px;min-height:60vh}

.level-card{
  background:var(--glass);backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:16px;
  padding:30px 32px;margin-bottom:24px;
  box-shadow:0 10px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,240,255,0.04);
  animation:cardIn .55s cubic-bezier(.4,0,.2,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.level-tag{
  display:inline-block;font-family:'Orbitron',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--bg-dark);background:var(--neon-cyan);
  padding:4px 13px;border-radius:20px;margin-bottom:15px;letter-spacing:1.5px;
  box-shadow:0 0 14px rgba(0,240,255,0.45);
}
.level-title{
  font-family:'Orbitron',sans-serif;font-size:1.45rem;color:#fff;margin-bottom:14px;
  text-shadow:0 0 10px rgba(0,240,255,0.3);
}
.level-desc{font-size:.95rem;line-height:1.75;color:#aaccdd;margin-bottom:20px}
.evidence{
  background:rgba(0,0,0,0.45);border-left:3px solid var(--neon-magenta);
  padding:16px 20px;margin-bottom:18px;border-radius:0 10px 10px 0;
  font-family:'Share Tech Mono',monospace;font-size:.9rem;line-height:1.65;color:#cde8ff;
  white-space:pre-wrap;word-break:break-word;
}
.input-row{display:flex;gap:12px;margin-top:6px}
.answer-input{
  flex:1;background:rgba(0,0,0,0.55);border:1px solid var(--glass-border);
  border-radius:9px;padding:14px 18px;color:var(--neon-cyan);
  font-family:'Share Tech Mono',monospace;font-size:1rem;outline:none;transition:.3s;
}
.answer-input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 2px rgba(0,240,255,0.16)}
.submit-btn{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));
  color:var(--bg-dark);border:none;border-radius:9px;padding:14px 28px;
  font-family:'Orbitron',sans-serif;font-weight:700;cursor:pointer;letter-spacing:1px;transition:.3s;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,240,255,0.4)}
.feedback{margin-top:16px;font-size:.92rem;min-height:24px}
.feedback.ok{color:var(--neon-green)}
.feedback.err{color:#ff5555}

/* ===== bottombar ===== */
.bottombar{
  position:fixed;bottom:0;left:0;width:100%;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 26px;background:var(--glass);backdrop-filter:blur(14px);
  border-top:1px solid var(--glass-border);
}
.hint-btn,.notebook-btn{
  cursor:pointer;color:var(--neon-cyan);font-size:.9rem;padding:8px 16px;
  border:1px solid var(--glass-border);border-radius:8px;transition:.3s;background:transparent;font-family:inherit;
}
.hint-btn:hover,.notebook-btn:hover{background:rgba(0,240,255,0.1)}
.hint-btn:disabled{opacity:.4;cursor:not-allowed}
.status{font-size:.85rem;color:#6699bb;display:flex;align-items:center;gap:6px}
.caret{display:inline-block;width:8px;height:15px;background:var(--neon-cyan);animation:blink 1s steps(1) infinite;box-shadow:0 0 8px var(--neon-cyan)}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ===== modal ===== */
.modal{display:none;position:fixed;inset:0;z-index:10;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:30px;max-width:640px;width:90%;max-height:80vh;overflow-y:auto}
.modal-box h3{color:var(--neon-cyan);margin-bottom:16px;font-family:'Orbitron';letter-spacing:1px}
.modal-box button{margin-top:16px;background:var(--neon-cyan);color:var(--bg-dark);border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-family:'Orbitron';font-weight:700}
#notebookContent{font-size:.9rem;line-height:1.8}
#notebookContent .nb-item{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.08);color:#aaccdd}
#notebookContent .nb-item b{color:var(--neon-magenta)}

/* ===== boot screen ===== */
.boot{position:fixed;inset:0;z-index:100;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;transition:opacity .8s}
.boot.hide{opacity:0;pointer-events:none}
.boot-frame{width:min(720px,92%);border:1px solid var(--glass-border);border-radius:12px;padding:26px 28px;background:rgba(0,20,30,0.6);box-shadow:0 0 40px rgba(0,240,255,0.12)}
.boot-title{font-family:'Orbitron';font-size:.85rem;color:var(--neon-cyan);letter-spacing:2px;margin-bottom:16px;border-bottom:1px solid rgba(0,240,255,0.2);padding-bottom:10px}
.boot-text{font-family:'Share Tech Mono',monospace;color:var(--neon-cyan);font-size:.95rem;min-height:260px;line-height:1.85;white-space:pre-wrap}
.boot-text .ok{color:var(--neon-green)}
.boot-text .warn{color:var(--neon-amber)}
.boot-bar{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;margin-top:16px;border:1px solid var(--glass-border)}
.boot-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));transition:width .3s;box-shadow:0 0 10px rgba(0,240,255,0.5)}
.boot-status{font-family:'Orbitron';font-size:.75rem;color:#88aacc;margin-top:8px;text-align:right;letter-spacing:1px}

/* glitch */
.glitch{animation:glitch .3s}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(-3px,-2px)}60%{transform:translate(3px,2px)}80%{transform:translate(3px,-2px)}100%{transform:translate(0)}}

/* hint chip */
.hint-chip{margin-top:12px;padding:10px 14px;background:rgba(255,0,170,0.08);border-left:3px solid var(--neon-magenta);border-radius:0 8px 8px 0;color:#ff99dd;font-size:.85rem}

/* end card */
.end-card{text-align:center;padding:44px 30px}
.end-card .level-title{font-size:2rem}

@media(max-width:768px){
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .progress-wrap{max-width:100%;order:3;margin:0}
  .terminal{margin:20px auto}
  .level-card{padding:20px}
  .input-row{flex-direction:column}
  .submit-btn{width:100%}
  .bottombar{padding:10px 14px;gap:8px}
  .hint-btn,.notebook-btn{font-size:.8rem;padding:7px 11px}
}