/* SHADOWGATE — sg.css */
:root{
  --teal:#12B5A8; --teal-d:#0E8E84; --teal-l:#7BE0D6; --gold:#F4C544;
  --coral:#EF8E6E; --ink:#05070D; --panel:#0C1220; --panel2:#111A2B;
  --cream:#E9F2F0; --mut:#7C8AA0; --mut-l:#9FB0C6; --line:rgba(123,224,214,.14);
  --mono:'JetBrains Mono','Menlo',monospace; --disp:'Space Grotesk','Zen Kaku Gothic New',sans-serif; --jp:'Zen Kaku Gothic New',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--jp);background:var(--ink);color:var(--cream);-webkit-font-smoothing:antialiased}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:var(--teal-l)}
.hidden{display:none!important}
.loading{padding:30px;font-family:var(--mono);color:var(--mut-l)}

/* boot */
#boot{position:fixed;inset:0;z-index:9999;background:#04060B;padding:clamp(16px,5vw,56px);cursor:pointer;transition:opacity .4s}
#boot.boot-out{opacity:0;pointer-events:none}
#boot-lines{font-family:var(--mono);font-size:clamp(11px,2.3vw,14px);line-height:1.75;color:var(--teal-l);text-shadow:0 0 12px rgba(123,224,214,.35);white-space:pre-wrap}
#boot-skip{position:absolute;right:22px;bottom:18px;font-family:var(--mono);font-size:12px;color:var(--mut)}

/* login */
#login{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1000px 600px at 50% 30%,rgba(18,181,168,.12),transparent 60%),var(--ink)}
#login::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(123,224,214,.06) 1px,transparent 1px);background-size:26px 26px}
.login-box{position:relative;width:min(92vw,360px);background:rgba(12,18,32,.9);border:1px solid var(--line);
  border-radius:16px;padding:28px 26px;box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}
.login-logo{font-family:var(--mono);font-weight:800;font-size:24px;color:var(--teal-l);letter-spacing:.08em;text-shadow:0 0 16px rgba(18,181,168,.5)}
.login-sub{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:4px}
.login-tabs{display:flex;gap:6px;margin:18px 0 14px}
.ltab{flex:1;padding:8px;font-family:var(--mono);font-size:12px;color:var(--mut-l);border:1px solid var(--line);border-radius:8px}
.ltab.on{background:var(--teal);color:var(--ink);font-weight:800;border-color:var(--teal)}
#login-form{display:flex;flex-direction:column;gap:10px}
#login-form input{background:#080D18;border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  font-family:var(--mono);font-size:13px;color:var(--cream);outline:none}
#login-form input:focus{border-color:var(--teal)}
#login-submit{background:var(--teal);color:var(--ink);font-family:var(--mono);font-weight:800;font-size:13px;
  padding:11px;border-radius:8px;margin-top:4px;letter-spacing:.05em}
#login-submit:hover{background:var(--teal-l)}
#login-err{color:var(--coral);font-family:var(--mono);font-size:11.5px;min-height:16px;line-height:1.4}
.login-guest{margin-top:14px;font-family:var(--jp);font-size:12px;color:var(--mut-l)}
.login-guest button{color:var(--gold);font-weight:700;text-decoration:underline}
.login-foot{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--mut)}

/* menubar */
#menubar{position:fixed;top:0;left:0;right:0;height:34px;z-index:500;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:rgba(4,6,11,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--cream)}
#mb-logo{color:var(--cream);font-weight:800;letter-spacing:.06em;font-family:var(--mono);font-size:12.5px}
.mb-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);margin-right:2px}
#mb-right{display:flex;align-items:center;gap:12px}
#mb-user{color:var(--teal-l)}
#mb-clock{color:var(--mut-l)}

/* desktop */
#desktop{position:fixed;top:34px;left:0;right:0;bottom:78px;overflow:hidden;
  background:radial-gradient(1100px 640px at 72% 15%,rgba(18,181,168,.09),transparent 60%),
  radial-gradient(800px 560px at 15% 88%,rgba(244,197,68,.05),transparent 55%),
  radial-gradient(circle at 50% 50%,#0A1120 0%,#06090F 100%)}
#desktop::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(123,224,214,.06) 1px,transparent 1px);background-size:26px 26px}

/* dock */
#dock{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:600;display:flex;gap:6px;align-items:flex-end;
  background:rgba(12,18,32,.82);border:1px solid var(--line);border-radius:18px;padding:8px 12px;backdrop-filter:blur(12px)}
.dock-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;border-radius:12px;transition:transform .12s}
.dock-item:hover{transform:translateY(-6px) scale(1.08);background:rgba(123,224,214,.1)}
.dock-ico{font-size:25px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.dock-label{font-family:var(--mono);font-size:10px;color:var(--mut-l);white-space:nowrap}
.dock-dot{width:4px;height:4px;border-radius:50%;background:transparent}
.dock-item.running .dock-dot{background:var(--teal-l);box-shadow:0 0 6px var(--teal-l)}

/* windows */
.window{position:absolute;background:var(--panel);border-radius:12px;border:1px solid rgba(123,224,214,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;min-width:320px;min-height:180px}
.window.focused{box-shadow:0 24px 70px rgba(0,0,0,.75),0 0 0 1px rgba(18,181,168,.4)}
.win-title{height:36px;flex:0 0 36px;display:flex;align-items:center;gap:10px;background:#0A101C;color:var(--cream);
  padding:0 12px;font-family:var(--mono);font-size:12.5px;user-select:none;touch-action:none;cursor:grab;border-bottom:1px solid var(--line)}
.tl-btns{display:flex;gap:7px}
.tl{width:13px;height:13px;border-radius:50%;padding:0}
.tl-close{background:var(--coral)}.tl-min{background:var(--gold)}.tl-max{background:var(--teal)}
.tl:hover{filter:brightness(1.2)}
.win-name{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{flex:1;overflow:auto;padding:16px 18px;font-size:13.5px;line-height:1.7;position:relative}
.win-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,rgba(123,224,214,.3) 50%);border-bottom-right-radius:12px}
.win-dark .win-body{background:#0A0F1A}

/* toast */
.toast{position:fixed;left:50%;bottom:98px;transform:translateX(-50%) translateY(10px);z-index:1200;background:#0A101C;color:var(--cream);
  font-family:var(--mono);font-size:13px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);opacity:0;transition:all .35s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-ok{border-color:rgba(18,181,168,.6);color:var(--teal-l)}
.confetti{position:fixed;inset:0;z-index:1400;pointer-events:none}

/* section header helper */
.sec-h{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--teal-l);margin:14px 0 8px;border-bottom:1px dashed var(--line);padding-bottom:4px}

/* ---- challenges ---- */
.chapp{display:flex;height:100%;margin:-16px -18px}
.ch-side{flex:0 0 170px;padding:14px 10px;overflow:auto;background:rgba(4,6,11,.35);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.ch-progress{font-family:var(--mono);font-size:11px;color:var(--mut-l);padding:4px 8px 10px}
.ch-progress b{color:var(--gold)}
.chf{text-align:left;font-size:12.5px;padding:7px 10px;border-radius:8px;color:var(--mut-l);white-space:nowrap;font-family:var(--jp)}
.chf:hover{background:rgba(18,181,168,.1)}
.chf.on{background:var(--teal);color:var(--ink);font-weight:700}
.chf-n{font-family:var(--mono);font-size:10px;opacity:.8;float:right}
.ch-main{flex:1;overflow:auto;padding:14px 16px;position:relative}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ch-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:rgba(17,26,43,.6);cursor:pointer;transition:.12s}
.ch-card:hover{border-color:rgba(18,181,168,.5);transform:translateY(-2px);box-shadow:0 6px 18px rgba(18,181,168,.12)}
.ch-card.solved{border-color:rgba(18,181,168,.45);background:rgba(18,181,168,.07)}
.ch-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ch-cat{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:rgba(123,224,214,.12);color:var(--teal-l)}
.ch-cat-crypto{background:rgba(244,197,68,.14);color:var(--gold)}
.ch-cat-web{background:rgba(123,224,214,.14);color:var(--teal-l)}
.ch-cat-forensics{background:rgba(239,142,110,.14);color:var(--coral)}
.ch-cat-rev{background:rgba(159,176,198,.14);color:var(--mut-l)}
.ch-cat-osint{background:rgba(18,181,168,.14);color:var(--teal)}
.ch-cat-misc{background:rgba(244,197,68,.1);color:var(--gold)}
.ch-pts{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--gold)}
.ch-title{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:8px;line-height:1.3}
.ch-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mut)}
.ch-diff{color:var(--gold);letter-spacing:1px}
/* detail overlay */
.ch-detail-overlay{position:absolute;inset:0;background:var(--panel);overflow:auto;padding:16px 18px}
.ch-back{font-family:var(--mono);font-size:12px;color:var(--teal-l);margin-bottom:10px}
.ch-dtitle{font-family:var(--disp);font-size:20px;margin:8px 0 6px}
.ch-author{color:var(--mut)}
.ch-desc{font-family:var(--jp);font-size:13px;line-height:1.8;white-space:pre-wrap;background:rgba(4,6,11,.4);border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0}
.ch-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ch-file{font-family:var(--mono);font-size:12px;text-decoration:none;border:1px solid rgba(244,197,68,.4);border-radius:8px;padding:6px 12px;color:var(--gold);background:rgba(244,197,68,.06)}
.ch-file:hover{background:rgba(244,197,68,.15)}
.ch-hint{font-family:var(--jp);font-size:12.5px;margin-bottom:14px;border:1px dashed var(--line);border-radius:8px;padding:8px 12px}
.ch-hint summary{cursor:pointer;color:var(--gold)}
.ch-hint div{margin-top:8px;color:var(--mut-l);line-height:1.7}
.ch-submit{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ch-flag{flex:1;min-width:200px;background:#080D18;border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-family:var(--mono);font-size:13px;color:var(--cream);outline:none}
.ch-flag:focus{border-color:var(--teal)}
.ch-submit button{background:var(--teal);color:var(--ink);font-family:var(--mono);font-weight:800;padding:11px 20px;border-radius:8px}
.ch-submit button:hover{background:var(--teal-l)}
.ch-result{flex-basis:100%;font-family:var(--mono);font-size:13px;min-height:18px}
.ch-result.ok{color:var(--teal-l)}.ch-result.ng{color:var(--coral)}
.ch-solved-badge{font-family:var(--mono);color:var(--teal-l);background:rgba(18,181,168,.1);border:1px solid rgba(18,181,168,.4);border-radius:8px;padding:12px;text-align:center}

/* ---- terminal ---- */
.term{display:flex;flex-direction:column;height:100%;font-family:var(--mono);font-size:12.5px}
.term-out{flex:1;overflow:auto}
.tl-line{line-height:1.7;white-space:pre-wrap;word-break:break-word}
.tl-pre{line-height:1.5;font-size:11.5px;margin:3px 0;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--cream)}
.tl-prompt{color:var(--teal-l);font-weight:600;margin-right:7px}
.tl-cmd{color:var(--cream)}.tl-dim{color:var(--mut-l)}.tl-err{color:var(--coral)}.tl-teal{color:var(--teal-l)}.tl-gold{color:var(--gold);font-weight:700}
.term-inline{display:flex;align-items:center;margin-top:6px;flex:0 0 auto}
.term-input{flex:1;background:none;border:0;outline:0;font-family:var(--mono);font-size:12.5px;color:var(--cream);caret-color:var(--gold)}

/* ---- toolkit ---- */
.tk{display:flex;flex-direction:column;gap:12px}
.tk-row{display:flex;flex-direction:column;gap:5px}
.tk-row label{font-family:var(--mono);font-size:11px;color:var(--mut-l);letter-spacing:.08em}
#tk-in{background:#080D18;border:1px solid var(--line);border-radius:8px;padding:10px;font-family:var(--mono);font-size:12.5px;color:var(--cream);resize:vertical;outline:none}
#tk-in:focus{border-color:var(--teal)}
.tk-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tk-btns button{font-family:var(--mono);font-size:11px;padding:8px 4px;border:1px solid var(--line);border-radius:7px;color:var(--teal-l)}
.tk-btns button:hover{background:rgba(18,181,168,.12)}
#tk-out{background:#04060B;border:1px solid var(--line);border-radius:8px;padding:12px;font-family:var(--mono);font-size:12px;color:var(--gold);min-height:90px;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:200px}

/* ---- scoreboard ---- */
.sb{font-family:var(--mono)}
.sb-head,.sb-row{display:grid;grid-template-columns:44px 1fr 60px 64px;align-items:center;gap:6px;padding:9px 10px}
.sb-head{font-size:10.5px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;border-bottom:1px solid var(--line)}
.sb-row{border-bottom:1px solid rgba(123,224,214,.06);font-size:13px}
.sb-row.me{background:rgba(18,181,168,.1);border-radius:8px}
.sb-rank{font-weight:800;color:var(--mut-l)}
.sb-rank.top1,.sb-rank.top2,.sb-rank.top3{font-size:16px}
.sb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-you{font-size:9px;background:var(--teal);color:var(--ink);border-radius:4px;padding:1px 5px;font-weight:800}
.sb-solved{color:var(--mut-l);text-align:right;font-size:12px}
.sb-score{color:var(--gold);font-weight:800;text-align:right}
.sb-refresh{margin:12px auto 0;display:block;font-family:var(--mono);font-size:12px;color:var(--teal-l);border:1px solid var(--line);border-radius:8px;padding:7px 16px}
.sb-empty{padding:30px;text-align:center;color:var(--mut-l);font-family:var(--jp)}

/* ---- profile ---- */
.pf{text-align:center}
.pf-avatar{width:64px;height:64px;border-radius:18px;margin:6px auto 10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));color:var(--ink);font-family:var(--disp);font-weight:700;font-size:34px;box-shadow:0 4px 16px rgba(18,181,168,.4)}
.pf-name{font-family:var(--disp);font-weight:700;font-size:18px}
.pf-stats{display:flex;justify-content:center;gap:26px;margin:16px 0}
.pf-stat b{display:block;font-family:var(--mono);font-size:26px;color:var(--gold)}
.pf-stat span{font-family:var(--mono);font-size:11px;color:var(--mut-l)}
.pf-bar{height:8px;background:rgba(123,224,214,.1);border-radius:5px;overflow:hidden;margin:6px 20px}
.pf-bar-in{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-l));border-radius:5px;transition:width .5s}
.pf-global{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:12px}
.pf-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.pf-links a{font-family:var(--mono);font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--teal-l)}
.pf-links a:hover{background:rgba(18,181,168,.12)}
.pf-logout{font-family:var(--mono);font-size:12px;color:var(--coral);border:1px solid rgba(239,142,110,.4);border-radius:8px;padding:8px 20px;margin-top:6px}
.pf-logout:hover{background:rgba(239,142,110,.12)}

/* mobile */
@media (max-width:768px){
  #desktop{bottom:84px}
  .window{inset:0!important;width:100%!important;height:100%!important;left:0!important;top:0!important;border-radius:0;border:0}
  .win-resize{display:none}
  .chapp{flex-direction:column}
  .ch-side{flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .ch-progress{display:none}
  .chf{flex:0 0 auto}
  #dock{bottom:8px;max-width:calc(100% - 12px);overflow-x:auto;padding:6px 8px}
  .dock-label{font-size:9px}.dock-ico{font-size:22px}
  .tk-btns{grid-template-columns:repeat(3,1fr)}
}