/* PhantomYerra CTF — cyberpunk theme */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

*{box-sizing:border-box}
:root{
  --bg:#050a05; --bg2:#0a120a; --line:#1a2e1a; --neon:#00ff41; --neon-dim:#00cc33;
  --text:#c8e6c9; --muted:#6a9a6a; --amber:#fbbf24; --violet:#a78bfa; --red:#ef4444;
}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#00ff4180;border-radius:3px}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;overflow-x:hidden}
h1,h2,h3,.orb{font-family:'Orbitron',monospace}
[x-cloak]{display:none!important}

.neon{color:var(--neon);text-shadow:0 0 8px var(--neon),0 0 20px #00ff4180}
.neon-dim{color:var(--neon-dim)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;transition:all .2s}
.card:hover{border-color:#00ff4160;box-shadow:0 0 15px #00ff4118;transform:translateY(-1px)}
.card-active{border-color:var(--neon)!important;box-shadow:0 0 18px #00ff4140!important}

.btn{background:var(--neon);color:#000;font-family:'Orbitron',monospace;font-weight:700;
  padding:9px 22px;border-radius:6px;border:none;cursor:pointer;transition:all .15s;
  text-transform:uppercase;font-size:12px;letter-spacing:.5px}
.btn:hover{background:var(--neon-dim);box-shadow:0 0 16px var(--neon)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;color:var(--neon);border:1px solid var(--neon);padding:8px 18px;
  border-radius:6px;cursor:pointer;font-family:'Orbitron',monospace;font-size:11px;transition:all .15s}
.btn-ghost:hover{background:#00ff4118}
.btn-sm{padding:5px 13px;font-size:11px}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:#ef444418}

.inp{background:#050a05;border:1px solid var(--line);color:var(--text);padding:9px 13px;border-radius:6px;
  font-family:'Share Tech Mono',monospace;width:100%;font-size:13px;outline:none;transition:border-color .2s}
.inp:focus{border-color:#00ff4188;box-shadow:0 0 8px #00ff4120}
.inp::placeholder{color:#3a5a3a}
select.inp{cursor:pointer}

.badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px}
.badge-easy{background:#00ff4120;color:var(--neon);border:1px solid #00ff4140}
.badge-medium{background:#fbbf2420;color:var(--amber);border:1px solid #fbbf2440}
.badge-hard{background:#fb923c20;color:#fb923c;border:1px solid #fb923c40}
.badge-expert{background:#ef444420;color:var(--red);border:1px solid #ef444440}
.badge-done{background:#00ff4130;color:var(--neon);border:1px solid var(--neon)}
.badge-admin{background:#a78bfa20;color:var(--violet);border:1px solid #a78bfa50}
.sev-critical{background:#ef444420;color:#ef4444;border:1px solid #ef444450}
.sev-high{background:#fb923c20;color:#fb923c;border:1px solid #fb923c50}
.sev-medium{background:#eab30820;color:#eab308;border:1px solid #eab30850}
.sev-low{background:#22c55e20;color:#22c55e;border:1px solid #22c55e50}
.sev-informational,.sev-none{background:#64748b20;color:#94a3b8;border:1px solid #64748b50}

.xp-bar{background:var(--line);border-radius:5px;overflow:hidden}
.xp-fill{background:linear-gradient(90deg,#00ff41,#00cc33);height:100%;transition:width .5s ease}

.flag-box{background:#00ff4110;border:1px dashed var(--neon);border-radius:8px;padding:12px 16px;
  font-family:'Orbitron',monospace;font-size:14px;color:var(--neon);word-break:break-all;text-align:center}
.pwned{background:linear-gradient(135deg,#00ff4118,#00cc3308);border:2px solid var(--neon);
  border-radius:10px;padding:18px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 10px #00ff4140}50%{box-shadow:0 0 28px var(--neon)}}

.terminal{background:#040804;border:1px solid var(--line);border-radius:8px;font-family:'Share Tech Mono',monospace;
  font-size:12.5px;padding:12px;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto;color:#9be79b}

.side-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;cursor:pointer;
  transition:all .15s;color:var(--muted);font-size:13px}
.side-item:hover{background:#0f1f0f;color:var(--text)}
.side-item.active{background:#00ff4115;color:var(--neon);border-left:2px solid var(--neon)}
.sep{border-top:1px solid var(--line);margin:8px 12px}

.lvl-pill{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--line);transition:all .15s}
.lvl-pill.done{background:#00ff4125;border-color:var(--neon);color:var(--neon)}
.lvl-pill.current{border-color:var(--neon);color:var(--neon);box-shadow:0 0 10px #00ff4140}
.lvl-pill.locked{opacity:.35;cursor:not-allowed}
.lvl-pill.sel{background:var(--neon);color:#000}

body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease}

.tab{padding:7px 16px;border-radius:6px;cursor:pointer;font-size:12px;border:1px solid transparent;transition:all .2s;color:var(--muted)}
.tab.active{border-color:var(--neon);color:var(--neon);background:#00ff4110}
.tab:hover{color:var(--text)}

.toast{position:fixed;top:70px;right:18px;z-index:100;max-width:340px;padding:14px 18px;border-radius:10px;
  border:1px solid;font-size:13px;animation:fadeIn .25s ease}
.toast.ok{background:#04140a;border-color:var(--neon);color:var(--neon)}
.toast.err{background:#160606;border-color:var(--red);color:#fca5a5}

.cert-card{background:linear-gradient(135deg,#0c160e,#080d0a);border:2px solid;border-radius:12px;padding:18px}

/* Full-screen centering for the login gate.
   NOTE: this MUST be a class, not an inline style — Alpine x-show overwrites
   the element's inline `display`, which would wipe an inline `display:flex`. */
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}

/* AI status chip (top nav) */
.ai-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:14px;font-size:11px;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer}
.ai-chip.on{background:#00ff4118;color:var(--neon);border:1px solid #00ff4160}
.ai-chip.off{background:#3a2a0a;color:var(--amber);border:1px solid #fbbf2440}
.ai-dot{width:7px;height:7px;border-radius:50%}
.ai-dot.on{background:var(--neon);box-shadow:0 0 8px var(--neon);animation:pulse 1.8s ease-in-out infinite}
.ai-dot.off{background:var(--amber)}

/* ── Attack-demo player ── */
.modal-bg{position:fixed;inset:0;z-index:60;background:#000000cc;display:flex;align-items:center;justify-content:center;padding:16px}
.demo-card{background:#070d09;border:1px solid #1a2e1a;border-radius:12px;width:760px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 0 40px #00ff4122}
.demo-term{background:#020602;border:1px solid var(--line);border-radius:8px;font-family:'Share Tech Mono',monospace;
  font-size:13px;line-height:1.55;padding:14px;flex:1;overflow:auto;min-height:200px}
.dl{margin:3px 0;white-space:pre-wrap;word-break:break-word}
.dl-target{color:#7aa37a}
.dl-cmd{color:var(--neon)}
.dl-cmd::before{content:"attacker@kali:~$ ";color:#3a7a3a}
.dl-resp{color:#9fe7ff;background:#03141c;border-left:2px solid #38bdf8;padding:6px 9px;border-radius:0 4px 4px 0}
.dl-resp::before{content:"⟵ server  ";color:#3a6a7a;font-size:11px}
.dl-observe{color:var(--amber)}
.dl-observe::before{content:"🔍 observe  "}
.dl-verdict{color:#031a06;background:var(--neon);font-weight:700;padding:7px 12px;border-radius:5px;text-align:center;letter-spacing:1px;box-shadow:0 0 16px #00ff4180}
.cursor{display:inline-block;width:8px;background:var(--neon);animation:blink 1s steps(1) infinite;color:transparent}
@keyframes blink{50%{opacity:0}}
.demo-panel{background:#0a140a;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
/* stepped demo lines */
.dstep{margin:11px 0}
.ds-label{font-size:10px;letter-spacing:2px;color:#5a8a5a;text-transform:uppercase;margin-bottom:4px;font-weight:700}
.ds-text{font-size:13px;line-height:1.55;color:#bfeccf}
.ds-target{color:#7aa37a}
.ds-field{color:#9fe7ff}
.ds-observe{color:var(--amber)}
.ds-server{color:#9fe7ff;background:#03141c;border-left:2px solid #38bdf8;padding:8px 11px;border-radius:0 6px 6px 0}
.ds-payload{font-family:'Share Tech Mono',monospace;font-size:16px;color:#fff;background:#08160a;border:1px dashed var(--neon);
  border-radius:9px;padding:13px 15px;letter-spacing:.5px;box-shadow:0 0 18px #00ff4130;word-break:break-all}
.ds-field-name{font-size:11px;color:#7aa37a;margin-bottom:5px}
.ds-inputbox{background:#020602;border:1px solid var(--neon);border-radius:6px;padding:10px 13px;
  font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--neon);word-break:break-all;box-shadow:inset 0 0 10px #00ff4118}
.ds-submit{color:#3a7a3a;font-size:12px}

/* ── Admin cheatsheet ── */
.cheat-flag{font-family:'Orbitron',monospace;color:var(--neon);font-size:12px}
.cheat-payload{background:#020602;border:1px solid var(--line);border-radius:5px;padding:6px 9px;color:#9fe7ff;
  font-family:'Share Tech Mono',monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;cursor:copy}
.cheat-payload:hover{border-color:#38bdf880}

/* ── Academy learning path ── */
.academy-path{position:relative;display:flex;flex-direction:column;gap:14px}
.academy-path::before{content:'';position:absolute;left:31px;top:18px;bottom:18px;width:2px;background:#13251a;z-index:0}
.acad-mod{position:relative;z-index:1}
.acad-num{width:26px;height:26px;border-radius:50%;background:#0a120a;border:2px solid var(--neon);color:var(--neon);
  display:flex;align-items:center;justify-content:center;font-family:'Orbitron',monospace;font-weight:700;font-size:12px;flex-shrink:0}
.acad-lesson{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:7px;cursor:pointer;
  background:#0a120a;border:1px solid var(--line);transition:all .15s}
.acad-lesson:hover{border-color:#00ff4160;background:#0f1f0f}

/* ── Mobile navigation (slide-in sidebar) ── */
@media (min-width:769px){ .mobnav{display:flex!important;transform:none!important} }
@media (max-width:768px){
  .mobnav{display:flex;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px #000a}
  .mobnav.open{transform:translateX(0)}
  .music-wrap{right:8px;top:50px;transform:scale(.92);transform-origin:top right}
  .buddy-wrap{right:10px;bottom:10px}
  .buddy-stage{width:64px;height:64px}
  .demo-card{width:96vw}
}

/* ── Quiz options ── */
.quiz-opt{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;font-size:13px;color:var(--text);transition:all .15s;background:#0a120a}
.quiz-opt:hover{border-color:#00ff4160;background:#0f1f0f}
.quiz-opt.sel{border-color:var(--neon);background:#00ff4112;box-shadow:0 0 10px #00ff4120}
.quiz-radio{width:15px;height:15px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0}
.quiz-radio.on{border-color:var(--neon);background:radial-gradient(circle,var(--neon) 40%,transparent 45%)}

/* ── Badges ── */
.badge-chip{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:#0a120a;border:1px solid var(--line);filter:grayscale(1) opacity(.35);transition:all .2s}
.badge-chip.got{filter:none;border-color:var(--neon);box-shadow:0 0 10px #00ff4130}
.badge-chip.got:hover{transform:translateY(-2px) scale(1.08)}

/* ── Confetti (flag capture) ── */
.confetti-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confetti-bit{position:absolute;top:-14px;width:8px;height:14px;border-radius:2px;opacity:.95;animation:confFall linear forwards}
@keyframes confFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(106vh) rotate(620deg);opacity:.6}}

/* ── Hacker radio player (floating bottom-left) ── */
/* docked top-right, just below the status bar — dropdown opens DOWNWARD
   (won't clip on fullscreen, clear of the bottom-right buddy) */
.music-wrap{position:fixed;right:14px;top:52px;z-index:57;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.music-card{display:flex;align-items:center;gap:10px;background:#0a140a;border:1px solid var(--neon);
  border-radius:30px;padding:7px 13px;box-shadow:0 0 16px #00ff4126}
.music-eq{display:flex;align-items:flex-end;gap:2px;height:18px;width:18px}
.music-eq span{width:3px;height:4px;background:var(--neon);border-radius:1px;opacity:.6}
.music-eq.on span{animation:eq .85s ease-in-out infinite}
.music-eq.on span:nth-child(2){animation-delay:.2s}
.music-eq.on span:nth-child(3){animation-delay:.45s}
.music-eq.on span:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px;opacity:.5}50%{height:16px;opacity:1}}
.music-info{min-width:104px;line-height:1.2}
.music-name{font-family:'Orbitron',monospace;font-size:11px;font-weight:700;color:var(--neon)}
.music-tag{font-size:9px;color:var(--muted)}
.music-ctrls{display:flex;gap:5px}
.music-ctrls button{background:none;border:none;color:var(--neon);cursor:pointer;font-size:14px;opacity:.85;line-height:1}
.music-ctrls button:hover{opacity:1;text-shadow:0 0 6px var(--neon)}
.music-list{background:#0a140af2;border:1px solid var(--line);border-radius:12px;padding:8px;width:230px;max-height:46vh;overflow-y:auto;box-shadow:0 0 16px #00000060}
.music-item{font-size:11px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--text)}
.music-item:hover{background:#0f1f0f}
.music-item.sel{color:var(--neon);background:#00ff410f}

/* ── Buddy mascot (animated, graphical) — colour comes from --c on .buddy-wrap ── */
.buddy-wrap{position:fixed;right:20px;bottom:20px;z-index:58;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;--c:#00ff41}
.buddy-wrap>*{pointer-events:auto}

.buddy-bubble{max-width:272px;color:var(--text);padding:11px 14px;border-radius:14px 14px 4px 14px;font-size:13px;line-height:1.5;
  position:relative;background:linear-gradient(135deg,#0c1a0e,#070f08);border:1px solid var(--c);
  box-shadow:0 0 22px color-mix(in srgb, var(--c) 38%, transparent), inset 0 0 18px #00000060;
  animation:budPop .28s cubic-bezier(.2,1.5,.4,1)}
.buddy-bubble::after{content:'';position:absolute;right:30px;bottom:-7px;width:13px;height:13px;background:#070f08;
  border-right:1px solid var(--c);border-bottom:1px solid var(--c);transform:rotate(45deg)}
.buddy-mute{position:absolute;top:5px;right:7px;font-size:11px;cursor:pointer;background:none;border:none;opacity:.65}
.buddy-mute:hover{opacity:1}
@keyframes budPop{0%{opacity:0;transform:translateY(8px) scale(.9)}60%{transform:translateY(-2px) scale(1.03)}100%{opacity:1;transform:none}}

.buddy-dock{display:flex;flex-direction:column;align-items:center}
.buddy-stage{position:relative;width:90px;height:90px;cursor:pointer;transition:transform .15s}
.buddy-stage:hover{transform:scale(1.06)}
.buddy-ring{position:absolute;inset:-4px;border-radius:50%;opacity:.6;filter:blur(2px);
  background:conic-gradient(from 0deg, var(--c), transparent 35%, var(--c) 70%, transparent);
  animation:budSpin 5s linear infinite}
.buddy-ring2{position:absolute;inset:3px;border-radius:50%;border:2px solid var(--c);
  box-shadow:0 0 16px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 45%, transparent)}
.buddy-orb{position:absolute;inset:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:38px;user-select:none;background:radial-gradient(circle at 50% 30%, #15291a, #04080500);
  animation:budBreathe 2.6s ease-in-out infinite}
.buddy-stage.speaking .buddy-orb{animation:budTalk .26s ease-in-out infinite}
.buddy-stage.speaking .buddy-ring2{animation:budWave 1s ease-out infinite}
.buddy-badge{position:absolute;right:0;bottom:8px;font-size:21px;filter:drop-shadow(0 0 5px #000);animation:budPop .3s ease}
.buddy-particle{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:var(--c);box-shadow:0 0 7px var(--c)}
.buddy-particle.p1{animation:budOrbit 3.2s linear infinite}
.buddy-particle.p2{animation:budOrbit 4.2s linear infinite reverse;animation-delay:-1s;opacity:.7}
.buddy-particle.p3{animation:budOrbit 2.6s linear infinite;animation-delay:-1.7s;opacity:.5}
.buddy-name{font-size:9px;letter-spacing:2px;text-transform:uppercase;margin-top:4px;color:var(--c);opacity:.85}
.buddy-clap{font-size:26px;letter-spacing:2px;animation:clapUp 1.6s ease-out forwards;filter:drop-shadow(0 0 8px var(--c))}

@keyframes budSpin{to{transform:rotate(360deg)}}
@keyframes budBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
@keyframes budTalk{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.13)}}
@keyframes budWave{0%{box-shadow:0 0 0 0 var(--c)}100%{box-shadow:0 0 0 15px transparent}}
@keyframes budOrbit{from{transform:rotate(0deg) translateX(47px) rotate(0deg)}to{transform:rotate(360deg) translateX(47px) rotate(-360deg)}}
@keyframes clapUp{0%{opacity:0;transform:translateY(10px) scale(.7)}25%{opacity:1;transform:translateY(-4px) scale(1.2)}100%{opacity:0;transform:translateY(-42px) scale(1)}}

/* ── Buddy emotions ── (colour already flows via --c from buddy.color) */
.buddy-stage.emo-hype .buddy-orb{animation:budExcite .42s ease-in-out infinite}
.buddy-stage.emo-love .buddy-orb{animation:budHeart 1.5s ease-in-out infinite}
.buddy-stage.emo-admire .buddy-orb{animation:budExcite .9s ease-in-out infinite}
.buddy-stage.emo-sleepy .buddy-orb{animation:budBreathe 4s ease-in-out infinite;opacity:.8}
.buddy-stage.shake{animation:budShake .13s linear infinite}
.buddy-stage.emo-angry .buddy-ring2,.buddy-stage.emo-frustrated .buddy-ring2{animation:budFlash .4s ease-in-out infinite}
@keyframes budExcite{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.13)}}
@keyframes budHeart{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
@keyframes budShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-5deg)}75%{transform:translateX(4px) rotate(5deg)}}
@keyframes budFlash{0%,100%{box-shadow:0 0 16px var(--c)}50%{box-shadow:0 0 28px var(--c), inset 0 0 16px var(--c)}}

/* ════════════ PER-LOGIN SPLASH ════════════ */
.splash-wrap{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at center,#061206 0%,#020602 70%,#000 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;animation:splashIn .35s ease}
@keyframes splashIn{from{opacity:0}to{opacity:1}}
.splash-matrix{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.splash-scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#00000033 2px 4px);mix-blend-mode:overlay;animation:scanMove 8s linear infinite}
@keyframes scanMove{from{background-position-y:0}to{background-position-y:100px}}
.splash-inner{position:relative;z-index:2;text-align:center;padding:2rem;max-width:640px;
  animation:splashRise .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes splashRise{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.splash-badge{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.28em;color:var(--sc);opacity:.8;margin-bottom:.6rem}
.splash-avatar{font-size:4.5rem;line-height:1;filter:drop-shadow(0 0 20px var(--sc));animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.splash-glitch{font-size:clamp(2rem,7vw,3.6rem);font-weight:900;color:#fff;letter-spacing:.04em;margin:.4rem 0 0;position:relative;text-shadow:0 0 24px var(--sc)}
.splash-glitch::before,.splash-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.splash-glitch::before{color:#ff00c1;animation:glitch1 2.4s infinite linear alternate-reverse;clip-path:inset(0 0 55% 0)}
.splash-glitch::after{color:var(--sc);animation:glitch2 1.8s infinite linear alternate-reverse;clip-path:inset(55% 0 0 0)}
@keyframes glitch1{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes glitch2{0%{transform:translateX(0)}25%{transform:translateX(3px)}55%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.splash-name{font-size:1.1rem;color:var(--text);margin-top:.5rem;text-transform:capitalize}
.splash-rank{font-family:'Share Tech Mono',monospace;font-size:.85rem;color:var(--sc);margin-top:.3rem;letter-spacing:.12em}
.splash-rank b{color:#fff}
.splash-stats{display:flex;gap:1.5rem;justify-content:center;margin:1.3rem 0}
.splash-stat{min-width:74px;border:1px solid var(--sc);border-radius:10px;padding:.6rem .4rem;background:#00000050;box-shadow:0 0 16px -6px var(--sc)}
.splash-stat .ss-n{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.5rem;color:#fff}
.splash-stat .ss-l{font-size:.62rem;letter-spacing:.2em;color:var(--sc);margin-top:.1rem}
.splash-fact{font-size:.82rem;color:var(--text);opacity:.92;max-width:520px;margin:.3rem auto 0;line-height:1.5}
.splash-hype{font-size:1rem;color:#fff;margin-top:.9rem;font-style:italic;opacity:.95}
.splash-enter{margin-top:1.5rem;font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.1em;
  background:var(--sc);color:#021002;border:0;border-radius:10px;padding:.85rem 2.4rem;cursor:pointer;font-size:1rem;
  box-shadow:0 0 30px -4px var(--sc);transition:transform .12s,box-shadow .2s;animation:pulseGlow 2s ease-in-out infinite}
.splash-enter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 44px 0 var(--sc)}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 26px -6px var(--sc)}50%{box-shadow:0 0 40px 2px var(--sc)}}
.splash-mini{margin-top:1rem;font-size:.74rem;color:var(--muted);display:flex;gap:.5rem;justify-content:center;align-items:center}
.splash-mini button{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline}
.splash-mini button:hover{color:var(--text)}

/* ════════════ GAMIFICATION HUD ════════════ */
.xp-float-layer{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);z-index:150;pointer-events:none;display:flex;flex-direction:column-reverse;align-items:center;gap:2px}
.xp-float{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.5rem;color:var(--neon);text-shadow:0 0 14px var(--neon);animation:xpRise 1.7s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
@keyframes xpRise{0%{transform:translateY(20px) scale(.6);opacity:0}15%{transform:translateY(0) scale(1.15);opacity:1}30%{transform:scale(1)}100%{transform:translateY(-90px) scale(1);opacity:0}}
.combo-hud{position:fixed;top:64px;right:14px;z-index:140;text-align:center;border:2px solid var(--neon);border-radius:12px;
  padding:.4rem .9rem;background:#020602e8;box-shadow:0 0 20px -4px var(--neon);transition:all .2s}
.combo-hud .combo-x{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.6rem;color:#fff;line-height:1}
.combo-hud .combo-l{font-size:.6rem;letter-spacing:.18em;color:var(--neon);margin-top:1px}
.combo-hud.c-warm{border-color:#f59e0b;box-shadow:0 0 22px -4px #f59e0b}.combo-hud.c-warm .combo-l{color:#f59e0b}
.combo-hud.c-hot{border-color:#fb7185;box-shadow:0 0 26px -2px #fb7185;animation:comboPulse .6s infinite}.combo-hud.c-hot .combo-l{color:#fb7185}
.combo-hud.c-max{border-color:#fde047;box-shadow:0 0 34px 0 #fde047;animation:comboPulse .4s infinite}.combo-hud.c-max .combo-l{color:#fde047}
@keyframes comboPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.levelup-wrap{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(3px);animation:splashIn .3s ease;cursor:pointer}
.levelup-card{text-align:center;padding:2.5rem 3rem;border:2px solid var(--lc);border-radius:18px;background:radial-gradient(ellipse at center,#0a140a,#020602);
  box-shadow:0 0 60px -10px var(--lc);animation:luPop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes luPop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.levelup-zap{font-size:3.5rem;animation:floaty 2s ease-in-out infinite}
.levelup-title{font-size:1.1rem;letter-spacing:.4em;color:var(--lc);margin-top:.3rem}
.levelup-lvl{font-size:2.8rem;font-weight:900;color:#fff;text-shadow:0 0 24px var(--lc);margin:.2rem 0}
.levelup-rank{font-size:1.1rem;color:var(--text)}.levelup-rank b{color:var(--lc)}
.levelup-hint{font-size:.72rem;color:var(--muted);margin-top:1rem;letter-spacing:.1em}
/* dashboard rank banner */
.rank-banner{display:flex;align-items:center;gap:1rem;border:1px solid var(--rc,#00ff41);border-radius:14px;padding:1rem 1.2rem;
  background:linear-gradient(100deg,color-mix(in srgb,var(--rc,#00ff41) 12%,transparent),transparent 70%);box-shadow:0 0 24px -12px var(--rc,#00ff41)}
.rank-ic{font-size:2.6rem;filter:drop-shadow(0 0 12px var(--rc,#00ff41))}
.rank-xpbar{height:10px;border-radius:6px;background:#0c1a0c;overflow:hidden;border:1px solid var(--line)}
.rank-xpfill{height:100%;background:linear-gradient(90deg,var(--rc,#00ff41),#fff6);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* ════════════ MENTOR "AI typing" effects ════════════ */
.mentor-caret{display:inline-block;color:var(--neon);font-weight:700;animation:caretBlink .9s steps(1) infinite;margin-left:1px}
@keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.mentor-think{display:inline-block;animation:thinkPulse 1.1s ease-in-out infinite}
@keyframes thinkPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}
.mentor-dots::after{content:'';animation:thinkDots 1.2s steps(4,end) infinite}
@keyframes thinkDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}

/* ════════════ DASHBOARD widgets ════════════ */
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.dash-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:#0a120a;transition:all .15s;position:relative}
.dash-tile:hover{border-color:var(--tc);box-shadow:0 0 14px -4px var(--tc);transform:translateY(-2px)}
.dash-tile-ic{font-size:1.5rem;filter:drop-shadow(0 0 6px var(--tc))}
.dash-tile-lb{font-size:11px;color:var(--text)}
.dash-tile-pct{font-size:10px;font-family:'Orbitron',sans-serif;font-weight:700;color:var(--tc)}
/* activity heatmap (GitHub-style: columns = weeks, 7 rows = days) */
.heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}
.heat-cell{width:12px;height:12px;border-radius:2px;background:#0e1c0e;display:inline-block}
.heat-cell.h0{background:#0e1c0e}
.heat-cell.h1{background:#0d4a1f}
.heat-cell.h2{background:#15803d}
.heat-cell.h3{background:#22c55e}
.heat-cell.h4{background:#4ade80;box-shadow:0 0 5px #4ade8088}

/* ── Challenge-Mastery trophy popup ── */
@keyframes trophyPop { 0%{transform:scale(.6);opacity:0} 55%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.trophy-pop { animation: trophyPop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes trophySpin { 0%{transform:rotate(-12deg) scale(1)} 25%{transform:rotate(12deg) scale(1.12)} 50%{transform:rotate(-8deg) scale(1)} 75%{transform:rotate(8deg) scale(1.08)} 100%{transform:rotate(0) scale(1)} }
.trophy-spin { display:inline-block; animation: trophySpin 1.6s ease-in-out .2s both; filter: drop-shadow(0 0 18px #34d39988); }

/* ── Linux Lab terminal ── */
.term-shell { border:1px solid #1b3a26; border-radius:10px; overflow:hidden; background:#05080a; box-shadow:0 0 30px #0a1f1255; }
.term-bar { display:flex; align-items:center; gap:7px; padding:8px 12px; background:#0b1410; border-bottom:1px solid #14271b; }
.term-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.term-title { margin-left:10px; font-size:11px; color:#5a7a5a; letter-spacing:1px; }
.term-body { padding:12px 14px; height:54vh; min-height:320px; overflow-y:auto; font-family:'JetBrains Mono','Share Tech Mono',monospace; font-size:13px; line-height:1.5; cursor:text; }
.term-line { white-space:pre-wrap; word-break:break-word; }
.term-cmd { color:#e8f5e9; }
.term-cmd::first-line { color:#34d399; }
.term-out { color:#9fc8a8; }
.term-sys { color:#5fb0e8; padding:2px 0 8px; }
.term-inputline { display:flex; align-items:center; gap:8px; margin-top:2px; }
.term-ps { color:#34d399; white-space:nowrap; }
.term-input { flex:1; background:transparent; border:none; outline:none; color:#e8f5e9; font-family:inherit; font-size:13px; caret-color:#34d399; }
.cmd-chip { border:1px solid #14271b; border-radius:7px; padding:7px 10px; margin-bottom:5px; cursor:pointer; transition:border-color .15s, background .15s; }
.cmd-chip:hover { border-color:#34d39955; background:#0a140d; }

/* ── Injection Lab SQL result table ── */
.sql-table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono','Share Tech Mono',monospace; font-size:12px; }
.sql-table th { text-align:left; padding:5px 9px; color:#34d399; border-bottom:1px solid #1b3a26; background:#0a140d; position:sticky; top:0; }
.sql-table td { padding:4px 9px; color:#cfe8d4; border-bottom:1px solid #0f1f0f; white-space:nowrap; }
.sql-table tr:hover td { background:#0a140d; }