@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap');

:root {
  --bg:        #0a0a0f;
  --bg2:       #11111a;
  --panel:     #1a1a2e;
  --border:    #2a2a4a;
  --green:     #00ff88;
  --cyan:      #00e5ff;
  --yellow:    #ffe600;
  --red:       #ff3c5a;
  --white:     #e8e8f0;
  --muted:     #6a6a9a;
  --pixel:     2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.6;
  min-height: 100vh;
  image-rendering: pixelated;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='0' width='8' height='8' fill='%2300ff88'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%2300ff88'/%3E%3C/svg%3E") 4 4, auto;
}

/* ── SCANLINES overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── PIXEL NOISE grain ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  opacity: 0.5;
}

/* ── NAVBAR ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg2);
  border-bottom: 4px solid var(--green);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  box-shadow: 0 4px 0 #00ff8844;
}

.nav-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--green);
}

.nav-logo span { color: var(--yellow); }

.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 0.4rem 1rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--muted);
  text-decoration: none;
  border: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  image-rendering: pixelated;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0,255,136,0.07);
}

/* ── PIXEL BOX utility ── */
.pixel-box {
  border: 4px solid var(--border);
  background: var(--panel);
  position: relative;
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,0.5),
    inset 4px 4px 0 rgba(255,255,255,0.04),
    4px 4px 0 rgba(0,0,0,0.6);
}

.pixel-box::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 4px solid transparent;
  pointer-events: none;
}

/* ── PIXEL BUTTON ── */
.btn {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  image-rendering: pixelated;
  transition: transform 0.05s;
}

.btn-green {
  background: var(--green);
  color: #000;
  box-shadow: 4px 4px 0 #007a40, -2px -2px 0 #80ffbb inset;
}
.btn-green:hover { background: #33ffaa; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #007a40; }
.btn-green:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #007a40; }

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 3px solid var(--cyan);
  box-shadow: 3px 3px 0 #006677;
}
.btn-outline:hover { background: rgba(0,229,255,0.1); transform: translate(-1px,-1px); }
.btn-outline:active { transform: translate(2px,2px); }

/* ── SECTION generic ── */
.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.4rem;
  text-shadow: 2px 2px 0 #664400;
}

.section-title::before { content: '> '; color: var(--green); }

.section-sub {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  border-left: 4px solid var(--green);
  padding-left: 1rem;
}

/* ── BADGE / TAG ── */
.tag {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 2px solid;
  margin: 0.25rem;
}
.tag-green  { border-color: var(--green);  color: var(--green); }
.tag-cyan   { border-color: var(--cyan);   color: var(--cyan);  }
.tag-yellow { border-color: var(--yellow); color: var(--yellow);}
.tag-red    { border-color: var(--red);    color: var(--red);   }

/* ── FOOTER ── */
footer {
  border-top: 4px solid var(--border);
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

footer span { color: var(--red); }
footer a { color: var(--green); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── BLINKING cursor ── */
.blink {
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── TYPEWRITER ── */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid var(--green);
  animation: typing 2.5s steps(30,end) forwards, blink-caret 0.75s step-end infinite;
}
@keyframes typing       { from { width: 0 } to { width: 100% } }
@keyframes blink-caret  { 50% { border-color: transparent } }

/* ── GLITCH ── */
.glitch {
  position: relative;
  animation: glitch-anim 4s infinite;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
}
.glitch::before {
  color: var(--red);
  clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%);
  animation: glitch-before 4s infinite;
}
.glitch::after {
  color: var(--cyan);
  clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%);
  animation: glitch-after 4s infinite;
}
@keyframes glitch-anim   { 0%,95%,100%{transform:none} 96%{transform:skewX(-2deg)} 97%{transform:skewX(2deg)} }
@keyframes glitch-before { 0%,95%,100%{transform:none} 96%{transform:translate(-2px,1px)} 97%{transform:translate(2px,-1px)} }
@keyframes glitch-after  { 0%,95%,100%{transform:none} 96%{transform:translate(2px,-1px)} 97%{transform:translate(-2px,1px)} }

/* ── PIXEL ART AVATAR placeholder ── */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(16,1fr);
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  border: 4px solid var(--green);
  box-shadow: 0 0 20px rgba(0,255,136,0.3), 4px 4px 0 #007a40;
}
.avatar-grid div { width: 100%; height: 100%; }

/* ── RESPONSIVE ── */
@media(max-width:600px){
  nav { padding: 0 1rem; }
  .nav-logo { font-size: 0.5rem; }
  .nav-links a { font-size: 0.4rem; padding: 0.4rem 0.5rem; }
  .section { padding: 2.5rem 1rem; }
}