:root{
  --grn:#39ff6a; --grn-dim:#1d8f3f; --grn-dark:#0a2e15;
  --amber:#ffb347; --bg:#020403; --panel:rgba(4,18,9,.82);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--grn);
  font-family:'Share Tech Mono',monospace; overflow-x:hidden;
  cursor:none;
}
::selection{background:var(--grn); color:#000}
a{color:var(--grn); text-decoration:none}
a:hover{color:var(--amber)}

/* ---------- WEBGL CANVAS ---------- */
#gl{position:fixed; inset:0; z-index:0; display:block}
#gl-fallback{display:none}

/* ---------- CRT LAYERS ---------- */
#scanlines{
  position:fixed; inset:0; z-index:50; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
#vignette{
  position:fixed; inset:0; z-index:49; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}
#flicker{
  position:fixed; inset:0; z-index:48; pointer-events:none; background:rgba(57,255,106,.02);
  animation:flick 4s steps(60) infinite;
}
@keyframes flick{
  0%,100%{opacity:.5} 10%{opacity:.2} 11%{opacity:.6} 40%{opacity:.4}
  41%{opacity:.1} 42%{opacity:.5} 80%{opacity:.3} 81%{opacity:.55}
}

/* ---------- CUSTOM CURSOR ---------- */
#cursor{
  position:fixed; z-index:100; width:22px; height:22px; pointer-events:none;
  left:0; top:0; transform:translate(-50%,-50%);
  transition:width .15s,height .15s;
}
#cursor::before,#cursor::after{content:''; position:absolute; background:var(--grn)}
#cursor::before{left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px)}
#cursor::after{top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px)}
#cursor .ring{
  position:absolute; inset:2px; border:1px solid var(--grn-dim); border-radius:50%;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
body.hovering #cursor{width:38px;height:38px}
@media (hover:none){ body{cursor:auto} #cursor{display:none} }

/* ---------- BOOT SCREEN ---------- */
#boot{
  position:fixed; inset:0; z-index:90; background:#000; color:var(--grn);
  font-family:'VT323',monospace; font-size:clamp(15px,2vw,22px);
  padding:8vh 8vw; white-space:pre-wrap; line-height:1.5;
}
#boot .skip{
  position:absolute; bottom:5vh; right:8vw; font-size:14px; letter-spacing:2px;
  border:1px solid var(--grn-dim); padding:6px 14px; cursor:none;
}
#boot .skip:hover{background:var(--grn); color:#000}

/* ---------- HUD ---------- */
#hud{
  position:fixed; z-index:60; top:0; left:0; right:0; display:flex;
  justify-content:space-between; align-items:center; padding:14px 22px;
  font-family:'VT323',monospace; font-size:18px; letter-spacing:1px;
  background:linear-gradient(180deg, rgba(0,0,0,.75), transparent);
  pointer-events:none;
}
#hud a{pointer-events:auto}
#hud .fps{color:var(--grn-dim)}
#progress{position:fixed; z-index:61; top:0; left:0; height:2px; width:0%;
  background:var(--grn); box-shadow:0 0 8px var(--grn)}

/* ---------- CONTENT ---------- */
main{position:relative; z-index:10}
section{min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:12vh 7vw; position:relative}
.panel{
  background:var(--panel); border:1px solid rgba(57,255,106,.25);
  box-shadow:0 0 30px rgba(57,255,106,.08), inset 0 0 60px rgba(57,255,106,.03);
  backdrop-filter:blur(4px); padding:clamp(20px,3.5vw,48px);
  position:relative;
}
.panel::before{
  content:''; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:2px solid var(--grn); border-left:2px solid var(--grn);
}
.panel::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:14px; height:14px;
  border-bottom:2px solid var(--grn); border-right:2px solid var(--grn);
}
.reveal{opacity:0; transform:translateY(60px) scale(.98);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1; transform:none}

/* hero */
#hero{align-items:center; text-align:center}
.hero-kicker{font-family:'VT323',monospace; font-size:clamp(16px,2vw,24px);
  color:var(--amber); letter-spacing:6px; margin-bottom:12px}
h1.name{
  font-family:'Silkscreen',monospace; font-weight:700;
  font-size:clamp(38px,8.5vw,110px); line-height:.95; letter-spacing:2px;
  text-shadow:0 0 12px rgba(57,255,106,.8), 0 0 60px rgba(57,255,106,.35);
}
h1.name .dim{color:var(--grn-dim); text-shadow:none}
.hero-sub{font-family:'VT323',monospace; font-size:clamp(18px,2.4vw,28px);
  margin-top:18px; letter-spacing:2px}
.hero-sub .blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero-tags{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:30px}
.tag{border:1px solid var(--grn-dim); padding:6px 14px; font-size:14px; letter-spacing:1px;
  background:rgba(57,255,106,.05); transition:.25s}
.tag:hover{background:var(--grn); color:#000; transform:translateY(-3px);
  box-shadow:0 0 20px rgba(57,255,106,.5)}
.scroll-cue{position:absolute; bottom:4vh; left:50%; transform:translateX(-50%);
  font-family:'VT323',monospace; font-size:18px; letter-spacing:4px; color:var(--grn-dim);
  animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)}}

/* section headers */
h2.sec-title{
  font-family:'Silkscreen',monospace; font-size:clamp(24px,4vw,44px);
  margin-bottom:8px; text-shadow:0 0 10px rgba(57,255,106,.6);
}
.sec-sub{font-family:'VT323',monospace; font-size:20px; color:var(--grn-dim);
  letter-spacing:3px; margin-bottom:34px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.stat{border:1px solid rgba(57,255,106,.25); padding:18px 20px; background:rgba(0,0,0,.45)}
.stat .k{font-family:'VT323',monospace; font-size:17px; color:var(--grn-dim); letter-spacing:2px}
.stat .v{font-family:'Silkscreen',monospace; font-size:26px; margin:6px 0 10px}
.bar{height:8px; background:rgba(57,255,106,.12); position:relative; overflow:hidden}
.bar i{position:absolute; inset:0; width:0; background:var(--grn);
  box-shadow:0 0 10px var(--grn); transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.visible .bar i{width:var(--w)}

/* quests */
.quest{border-left:3px solid var(--grn-dim); padding:4px 0 4px 26px; margin-bottom:44px; position:relative}
.quest::before{content:'▸'; position:absolute; left:-13px; top:0; color:var(--grn);
  background:var(--bg); font-size:18px; line-height:1.4}
.quest h3{font-family:'Silkscreen',monospace; font-size:clamp(17px,2.2vw,23px)}
.quest .guild{font-family:'VT323',monospace; font-size:19px; color:var(--amber); letter-spacing:2px; margin:4px 0 10px}
.quest .dates{float:right; font-family:'VT323',monospace; font-size:17px; color:var(--grn-dim)}
.quest ul{list-style:none; margin-top:8px}
.quest li{padding:4px 0 4px 22px; position:relative; font-size:15px; line-height:1.55; color:#b8ffc9}
.quest li::before{content:'>'; position:absolute; left:0; color:var(--grn-dim)}
.badge-edi,.badge-aml{display:inline-block; font-size:11px; letter-spacing:2px; border:1px solid var(--amber);
  color:var(--amber); padding:2px 8px; margin-left:10px; vertical-align:middle}

/* abilities */
.skills{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.skill-cat{border:1px solid rgba(57,255,106,.25); background:rgba(0,0,0,.45); padding:18px;
  transition:.3s; position:relative; overflow:hidden}
.skill-cat:hover{transform:translateY(-6px); box-shadow:0 10px 40px rgba(57,255,106,.15);
  border-color:var(--grn)}
.skill-cat h4{font-family:'Silkscreen',monospace; font-size:14px; color:var(--amber);
  letter-spacing:1px; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:12.5px; border:1px solid var(--grn-dim); padding:4px 10px;
  background:rgba(57,255,106,.06); transition:.2s}
.chip:hover{background:var(--grn); color:#000}
.skill-cat .lv{position:absolute; top:12px; right:14px; font-family:'VT323',monospace;
  font-size:15px; color:var(--grn-dim)}

/* forbidden arts (low level) */
#lowlevel .panel{border-color:rgba(255,179,71,.4)}
#lowlevel h2.sec-title{color:var(--amber); text-shadow:0 0 12px rgba(255,179,71,.5)}
.mem-dump{font-size:13.5px; color:#7fdc96; line-height:1.7; white-space:pre;
  overflow-x:auto; border:1px dashed rgba(57,255,106,.3); padding:16px; background:rgba(0,0,0,.5)}
.mem-dump .hl{color:var(--amber)}

/* projects */
.proj{border:1px solid rgba(57,255,106,.25); background:rgba(0,0,0,.5); padding:26px; margin-bottom:34px}
.proj h3{font-family:'Silkscreen',monospace; font-size:clamp(17px,2.4vw,24px)}
.proj .meta{font-family:'VT323',monospace; font-size:18px; color:var(--amber);
  letter-spacing:2px; margin:6px 0 12px}
.proj p{font-size:15px; line-height:1.6; color:#b8ffc9; max-width:900px}
.btn{display:inline-block; margin-top:16px; margin-right:12px; border:1px solid var(--grn);
  padding:9px 20px; font-family:'VT323',monospace; font-size:18px; letter-spacing:2px;
  background:rgba(57,255,106,.08); transition:.2s; cursor:none}
.btn:hover{background:var(--grn); color:#000; box-shadow:0 0 24px rgba(57,255,106,.5)}
.btn.warn{border-color:var(--amber); color:var(--amber); background:rgba(255,179,71,.06)}
.btn.warn:hover{background:var(--amber); color:#000; box-shadow:0 0 24px rgba(255,179,71,.5)}
#ttyd-frame-wrap{margin-top:20px; display:none; border:1px solid var(--grn-dim);
  box-shadow:0 0 40px rgba(57,255,106,.15)}
#ttyd-frame-wrap.open{display:block}
#ttyd-frame-wrap .ttyd-bar{display:flex; justify-content:space-between; align-items:center;
  background:#04140a; padding:6px 12px; font-family:'VT323',monospace; font-size:16px;
  border-bottom:1px solid var(--grn-dim)}
#ttyd-frame{width:100%; height:480px; background:#000; border:0; display:block}

/* contact */
#contact{text-align:center; align-items:center}
.contact-links{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:26px}
.big-mail{font-family:'VT323',monospace; font-size:clamp(20px,3.4vw,34px); letter-spacing:2px;
  color:var(--amber); text-shadow:0 0 14px rgba(255,179,71,.4)}
footer{padding:26px 7vw; font-family:'VT323',monospace; font-size:15px; color:var(--grn-dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(57,255,106,.15); position:relative; z-index:10;
  background:rgba(0,0,0,.6)}

@media (max-width:640px){
  section{padding:10vh 5vw}
  .quest .dates{float:none; display:block; margin-top:4px}
}