<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Arcade</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg: #050008; --bg2: #0c0018; --bg3: #140022; --border: rgba(168, 85, 247, 0.4); --purple: #a855f7; --pink: #ec4899; --cyan: #22d3ee; --text: #f0e6ff; --mono: 'VT323', monospace; --display: 'Press Start 2P', system-ui; }
html { scroll-behavior: smooth; background: var(--bg); touch-action: pan-y; -webkit-text-size-adjust: 100%; }
body { color: var(--text); font-family: var(--display); overflow-x: hidden; cursor: none; user-select: none; -webkit-user-select: none; line-height: 1.4; overscroll-behavior: contain; }
a, button { cursor: none; user-select: none; }
@media (pointer: coarse) { body, a, button, input { cursor: auto !important; } .cursor, .cursor-trail { display: none !important; } }
/* CUSTOM CURSOR */
.cursor { position: fixed; top: 0; left: 0; z-index: 10000; width: 12px; height: 12px; background: var(--pink); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 0 20px var(--pink); transition: transform 0.1s ease, background 0.2s; }
.cursor-trail { position: fixed; top: 0; left: 0; z-index: 9999; width: 32px; height: 32px; border: 2px solid var(--purple); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; }

/* OVERLAYS */
.scanlines { position: fixed; inset: 0; z-index: 9998; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.32) 3px, rgba(0,0,0,0.32) 6px); pointer-events: none; animation: scanShift 8s linear infinite; }
@keyframes scanShift { 0%{background-position:0 0} 100%{background-position:0 6px} }
.grid-overlay { position: fixed; inset: 0; z-index: 9997; background: linear-gradient(rgba(168,85,247,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }

/* LAYOUT */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* NAVBAR */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; background: rgba(10,0,22,0.97); backdrop-filter: blur(16px); border-bottom: 4px solid var(--border); font-family: var(--mono); }
.nav-logo { font-size: 1.45rem; letter-spacing: 3px; }
.logo-accent { color: var(--pink); }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-link { color: #c4b3e6; font-size: 1rem; text-decoration: none; transition: 0.2s; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--pink); transform: scaleX(0); transition: transform 0.2s; }
.nav-link:hover { color: var(--pink); text-shadow: 0 0 12px var(--pink); }
.nav-link:hover::after { transform: scaleX(1); }

/* HERO - No border */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; image-rendering: pixelated; }
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 860px; padding: 40px 30px; }
.hero-eyebrow { font-family: var(--mono); color: var(--cyan); letter-spacing: 6px; font-size: 1.1rem; margin-bottom: 16px; }
.hero-title { font-size: clamp(2.4rem, 9vw, 6rem); font-weight: 900; line-height: 0.9; margin-bottom: 20px; cursor: default; }
.wave-text .wc { display: inline-block; transition: transform 0.3s, color 0.3s; }
.wave-text .wc:hover { transform: translateY(-10px) scale(1.15); color: var(--pink); }
.accent { color: var(--purple); text-shadow: 0 0 30px var(--purple); }
.hero-sub { font-family: var(--mono); font-size: 1.45rem; color: var(--pink); min-height: 2.2em; margin: 24px 0; }
.hero-cta-group { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 32px 0; }

/* BUTTONS */
.btn-primary { background: var(--purple); color: #fff; padding: 18px 36px; border: 4px solid #fff; font-family: var(--mono); font-size: 1.05rem; text-decoration: none; display: inline-block; box-shadow: 8px 8px 0 #000; transition: all 0.1s; }
.btn-primary:hover { background: var(--pink); transform: translate(-2px,-2px); box-shadow: 10px 10px 0 #000; }
.btn-primary:active { transform: translate(4px,4px); box-shadow: 4px 4px 0 #000; }
.btn-secondary { background: transparent; color: var(--text); padding: 18px 36px; border: 4px solid var(--border); font-family: var(--mono); font-size: 1.05rem; text-decoration: none; display: inline-block; transition: all 0.2s; }
.btn-secondary:hover { border-color: var(--pink); color: var(--pink); background: rgba(236,72,153,0.08); }

/* TICKER */
.status-bar { background: var(--bg2); border-bottom: 4px solid var(--border); padding: 12px 0; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 0.95rem; }
.status-inner { display: inline-block; padding-left: 100%; animation: ticker 36s linear infinite; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* SECTIONS */
.section { padding: 100px 0; }
.section-header { margin-bottom: 50px; border-left: 8px solid var(--pink); padding-left: 24px; }
.section-header h2 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 900; letter-spacing: 2px; }
.section-tag { font-family: var(--mono); color: var(--cyan); font-size: 1rem; display: block; margin-bottom: 10px; }

/* NEXUS / ABOUT */
.about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: center; }
.avatar-frame { padding: 20px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
#interactiveAvatar { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 20px var(--purple)); }
.avatar-hint { font-family: var(--mono); font-size: 0.85rem; color: #9988bb; margin-top: 14px; text-align: center; }
.about-bio p { font-family: var(--mono); font-size: 1.1rem; line-height: 1.8; margin-bottom: 24px; }
.soundboard-title { font-family: var(--mono); color: var(--cyan); letter-spacing: 4px; font-size: 0.9rem; margin-bottom: 16px; }
.soundboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.sb-pad { background: #1c0033; border: 4px solid var(--purple); color: #fff; padding: 22px 12px; font-family: var(--mono); font-size: 1.1rem; text-align: center; border-radius: 6px; transition: all 0.1s; cursor: pointer; position: relative; overflow: hidden; }
.sb-pad::after { content: ''; position: absolute; inset: 0; background: var(--pink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.1s; z-index: 0; }
.sb-pad span { position: relative; z-index: 1; }
.sb-pad:active::after { transform: scaleY(1); }
.sb-pad:active { border-color: #fff; transform: scale(0.92); }

/* UTILITY SANDBOX - Clean lightweight cards to prevent overlap */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; }
.tool-module { padding: 24px; }
.tool-module h3 { font-family: var(--mono); font-size: 1.2rem; color: var(--cyan); letter-spacing: 3px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }

/* CLOCK */
.clock-wrap { display: flex; justify-content: center; align-items: center; margin-top: 8px; }
#analogClock { display: block; }

/* CIPHER MATRIX */
.tool-input { width: 100%; padding: 12px 14px; background: #0d0020; border: 3px solid var(--purple); color: #fff; font-family: var(--mono); font-size: 1.1rem; outline: none; transition: border-color 0.2s; border-radius: 4px; }
.tool-input:focus { border-color: var(--pink); box-shadow: 0 0 12px rgba(236,72,153,0.3); }
.cipher-modes { display: flex; gap: 8px; margin: 12px 0; }
.cipher-btn { flex: 1; padding: 8px 4px; background: #1c0033; border: 3px solid var(--border); color: #c4b3e6; font-family: var(--mono); font-size: 0.85rem; cursor: pointer; transition: all 0.15s; border-radius: 4px; }
.cipher-btn.active, .cipher-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.1); }
.tool-out { background: #000; padding: 14px; border-left: 5px solid var(--pink); min-height: 60px; word-break: break-all; color: var(--cyan); font-family: var(--mono); font-size: 1rem; line-height: 1.5; border-radius: 0 4px 4px 0; margin-top: 4px; }

/* VOID PALETTE */
.palette-row { display: flex; gap: 8px; height: 52px; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.palette-swatch { flex: 1; transition: transform 0.2s, filter 0.2s; cursor: pointer; position: relative; }
.palette-swatch:hover { transform: scaleY(1.08); filter: brightness(1.3); }
.palette-hex-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.palette-hex { font-family: var(--mono); font-size: 0.78rem; color: #9988bb; background: #0d0020; padding: 4px 8px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); transition: color 0.2s, border-color 0.2s; }
.palette-hex:hover { color: var(--cyan); border-color: var(--cyan); }

/* ARCADE ZONE - Full width games, no boxes */
.arcade-live-label { font-family: var(--mono); color: var(--pink); letter-spacing: 6px; font-size: 1rem; margin-bottom: 32px; text-align: center; text-shadow: 0 0 12px var(--pink); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.arcade-split { display: flex; flex-direction: column; gap: 48px; }

.arcade-game-block {  }
.arcade-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px 0; margin-bottom: 8px; }
.game-title-row { display: flex; align-items: center; gap: 12px; }
.game-badge { font-family: var(--mono); font-size: 0.7rem; padding: 3px 10px; border-radius: 3px; letter-spacing: 2px; }
.game-badge.live { background: #1a2e00; color: #4ade80; border: 2px solid #4ade80; animation: pulse 1.5s infinite; }
.game-name { font-family: var(--mono); font-size: 1.15rem; color: var(--cyan); letter-spacing: 3px; }

.expand-btn { background: transparent; border: 3px solid var(--cyan); color: var(--cyan); padding: 8px 20px; font-family: var(--mono); font-size: 0.95rem; cursor: pointer; border-radius: 4px; transition: all 0.2s; letter-spacing: 1px; }
.expand-btn:hover { background: var(--cyan); color: #000; }
.expand-btn.active { background: var(--pink); border-color: var(--pink); color: #fff; }

.game-frame { width: 100%; height: 560px; border: none; background: var(--bg2); display: block; image-rendering: pixelated; transition: height 0.4s cubic-bezier(0.4,0,0.2,1); }
.arcade-game-block.expanded .game-frame { height: 780px; }

/* COMING SOON - Clean grid */
.arcade-coming-label { font-family: var(--mono); color: var(--cyan); letter-spacing: 3px; font-size: 1rem; margin: 50px 0 24px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.arcade-coming-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.cc-item {  }
.cc-icon { font-size: 2.2rem; margin-bottom: 10px; }
.cc-name { font-family: var(--mono); color: var(--cyan); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 6px; }
.cc-sub { font-family: var(--mono); color: #7766aa; font-size: 0.78rem; margin-bottom: 12px; line-height: 1.5; }
.cc-tags { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.cc-tag { font-family: var(--mono); font-size: 0.7rem; padding: 2px 8px; border: 2px solid var(--border); border-radius: 3px; color: #9988bb; }
.cc-bar { height: 5px; background: #1a003a; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.cc-progress { height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: 3px; transition: width 1s ease; }
.cc-status { font-family: var(--mono); font-size: 0.72rem; color: #7766aa; letter-spacing: 1px; }

/* FOOTER */
.footer { background: var(--bg2); padding: 50px 20px; text-align: center; border-top: 4px solid var(--border); font-family: var(--mono); font-size: 0.95rem; color: #8877aa; }
.footer a { color: var(--purple); text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--pink); }

/* TOAST */
.toast { position: fixed; bottom: 30px; right: 30px; background: var(--bg3); border: 4px solid var(--pink); color: #fff; padding: 14px 28px; font-family: var(--mono); font-size: 1rem; z-index: 99999; opacity: 0; transform: translateY(30px); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); border-radius: 4px; pointer-events: none; }
.toast.visible { opacity: 1; transform: translateY(0); }

/* GLITCH TEXT ANIMATION */
@keyframes glitch1 { 0%,100%{clip-path:inset(0 0 90% 0);transform:translate(-3px,0)} 20%{clip-path:inset(40% 0 50% 0);transform:translate(3px,0)} 40%{clip-path:inset(70% 0 20% 0);transform:translate(-2px,0)} 60%{clip-path:inset(20% 0 70% 0);transform:translate(2px,0)} 80%{clip-path:inset(60% 0 30% 0);transform:translate(-1px,0)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(80% 0 5% 0);transform:translate(3px,0)} 20%{clip-path:inset(30% 0 60% 0);transform:translate(-3px,0)} 40%{clip-path:inset(10% 0 80% 0);transform:translate(2px,0)} 60%{clip-path:inset(50% 0 40% 0);transform:translate(-2px,0)} 80%{clip-path:inset(75% 0 15% 0);transform:translate(1px,0)} }
.hero-title-wrap { position: relative; display: inline-block; }
.hero-title-wrap::before, .hero-title-wrap::after { content: attr(data-text); position: absolute; inset: 0; font-size: inherit; font-weight: inherit; line-height: inherit; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: steps(1); }
.hero-title-wrap::before { color: var(--cyan); animation-name: glitch1; animation-delay: 4s; }
.hero-title-wrap::after { color: var(--pink); animation-name: glitch2; animation-delay: 4.1s; }

/* RESPONSIVE */
@media(max-width: 900px) { 
  .hero-content { padding: 25px 18px; } 
  .arcade-split { gap: 32px; }
  .about-grid { grid-template-columns: 1fr; }
}
@media(max-width: 600px) { 
  .nav-links { gap: 16px; } 
  .nav-link { font-size: 0.9rem; } 
  .hero-title { font-size: clamp(2rem, 12vw, 3.5rem); } 
  .game-frame { height: 420px; } 
  .arcade-game-block.expanded .game-frame { height: 600px; }
  .project-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>

<div class="scanlines"></div>
<div class="grid-overlay"></div>
<div class="cursor"></div>
<div class="cursor-trail"></div>

<nav class="navbar">
  <div class="nav-logo">NEX<span class="logo-accent">US</span></div>
  <ul class="nav-links">
    <li><a href="#home" class="nav-link">HOME</a></li>
    <li><a href="#nexus" class="nav-link">NEXUS</a></li>
    <li><a href="#sandbox" class="nav-link">SANDBOX</a></li>
    <li><a href="#arcade" class="nav-link">ARCADE</a></li>
  </ul>
</nav>

<main>
  <section id="home" class="hero">
    <canvas id="heroCanvas"></canvas>
    <div class="hero-content">
      <p class="hero-eyebrow">> SYSTEM ONLINE_</p>
      <h1 class="hero-title">
        <span class="hero-title-wrap" data-text="NEXUS ARCADE">
          <span class="wave-text">
            <span class="wc">N</span><span class="wc">E</span><span class="wc">X</span><span class="wc">U</span><span class="wc">S</span>
            <span class="wc" style="margin-left:20px;">A</span><span class="wc">R</span><span class="wc">C</span><span class="wc">A</span><span class="wc">D</span><span class="wc">E</span>
          </span>
        </span>
      </h1>
      <div class="hero-sub" id="heroTypewriter"></div>
      <div class="hero-cta-group">
        <a href="#arcade" class="btn-primary">ENTER ARCADE</a>
        <a href="#sandbox" class="btn-secondary">EXPLORE TOOLS</a>
      </div>
    </div>
  </section>

  <div class="status-bar">
    <div class="status-inner">
      ⬤ SYSTEM ACTIVE &nbsp;│&nbsp; NODES ONLINE: 24 &nbsp;│&nbsp; LATENCY: 12ms &nbsp;│&nbsp; UPLINK STABLE &nbsp;│&nbsp; ⬤ SYSTEM ACTIVE &nbsp;│&nbsp; NODES ONLINE: 24 &nbsp;│&nbsp; LATENCY: 12ms &nbsp;│&nbsp; UPLINK STABLE &nbsp;│&nbsp;
    </div>
  </div>

  <section id="nexus" class="section">
    <div class="container">
      <div class="section-header">
        <span class="section-tag">// NEXUS PROTOCOL</span>
        <h2>ABOUT THE<span class="accent"> OPERATOR</span></h2>
      </div>
      <div class="about-grid">
        <div class="avatar-frame">
          <canvas id="interactiveAvatar" width="260" height="260"></canvas>
          <div class="avatar-hint">[ CLICK TO INTERACT ]</div>
        </div>
        <div class="about-bio">
          <p>// Welcome to the Nexus. I build experimental digital spaces where retro aesthetics collide with modern web tech. This is my playground for arcade games, creative tools, and pixel-perfect experiments.</p>
          <p>// Every project here is hand-crafted with vanilla code. No frameworks, just pure creative engineering. The arcade runs live games. The sandbox holds weird utilities. Everything is interactive.</p>
          <p class="soundboard-title">▶ SOUNDBOARD</p>
          <div class="soundboard-grid">
            <button class="sb-pad" data-sound="beep"><span>BEEP</span></button>
            <button class="sb-pad" data-sound="glitch"><span>GLITCH</span></button>
            <button class="sb-pad" data-sound="power"><span>POWER</span></button>
            <button class="sb-pad" data-sound="zap"><span>ZAP</span></button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="sandbox" class="section">
    <div class="container">
      <div class="section-header">
        <span class="section-tag">// UTILITY SANDBOX</span>
        <h2>TOOLS &amp;<span class="accent"> EXPERIMENTS</span></h2>
      </div>

      <div class="project-grid">
        <!-- Analog Clock -->
        <div class="tool-module">
          <h3>◈ ANALOG CLOCK</h3>
          <div class="clock-wrap">
            <canvas id="analogClock" width="280" height="280"></canvas>
          </div>
        </div>

        <!-- Cipher Matrix -->
        <div class="tool-module">
          <h3>◈ CIPHER MATRIX</h3>
          <input type="text" class="tool-input" id="cipherInput" placeholder="ENTER TEXT..." maxlength="200">
          <div class="cipher-modes">
            <button class="cipher-btn active" data-mode="atbash">ATBASH</button>
            <button class="cipher-btn" data-mode="rot13">ROT13</button>
            <button class="cipher-btn" data-mode="xor">XOR</button>
            <button class="cipher-btn" data-mode="binary">BINARY</button>
          </div>
          <div class="tool-out" id="cipherOutput">OUTPUT_</div>
        </div>

        <!-- Void Palette -->
        <div class="tool-module">
          <h3>◈ VOID PALETTE</h3>
          <div class="palette-row" id="paletteRow"></div>
          <div class="palette-hex-row" id="paletteHexRow"></div>
        </div>

        <!-- Glitch Engine - Back and visible -->
        <div class="tool-module">
          <h3>◈ GLITCH ENGINE</h3>
          <div style="font-family:var(--mono);color:#9988bb;font-size:0.95rem;line-height:1.7;">
            <p>Drag an image here to corrupt it in real-time.</p>
            <div style="margin-top:16px;padding:32px;border:2px dashed var(--border);text-align:center;border-radius:6px;min-height:120px;display:flex;align-items:center;justify-content:center;">
              <span style="color:#7766aa;">DROP IMAGE HERE</span>
            </div>
            <div style="margin-top:12px;display:flex;gap:8px;">
              <button class="cipher-btn" style="flex:1;">CORRUPT</button>
              <button class="cipher-btn" style="flex:1;">RESET</button>
              <button class="cipher-btn" style="flex:1;">SAVE</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="arcade" class="section">
    <div class="container-wide">
      <div class="section-header">
        <span class="section-tag">// ARCADE ZONE</span>
        <h2>PLAYABLE<span class="accent"> GAMES</span></h2>
      </div>

      <p class="arcade-live-label">⬤ LIVE GAMES — CLICK TO PLAY</p>

      <div class="arcade-split">
        <!-- Game 1 -->
        <div class="arcade-game-block">
          <div class="arcade-panel-header">
            <div class="game-title-row">
              <span class="game-badge live">LIVE</span>
              <span class="game-name">◈ PIXEL RUNNER</span>
            </div>
            <button class="expand-btn" onclick="toggleExpand(this)">⛶</button>
          </div>
          <iframe class="game-frame" src="about:blank" id="game1" loading="lazy"></iframe>
        </div>

        <!-- Game 2 -->
        <div class="arcade-game-block">
          <div class="arcade-panel-header">
            <div class="game-title-row">
              <span class="game-badge live">LIVE</span>
              <span class="game-name">◈ VOID BREAKER</span>
            </div>
            <button class="expand-btn" onclick="toggleExpand(this)">⛶</button>
          </div>
          <iframe class="game-frame" src="about:blank" id="game2" loading="lazy"></iframe>
        </div>
      </div>

      <div class="arcade-coming-label">◈ COMING SOON</div>
      <div class="arcade-coming-grid">
        <div class="cc-item">
          <div class="cc-icon">🚀</div>
          <div class="cc-name">STAR DRIFT</div>
          <div class="cc-sub">Procedural space exploration roguelike</div>
          <div class="cc-tags">
            <span class="cc-tag">WEBGL</span>
            <span class="cc-tag">PROCGEN</span>
          </div>
          <div class="cc-bar"><div class="cc-progress" style="width:70%"></div></div>
          <div class="cc-status">70% COMPLETE</div>
        </div>
        <div class="cc-item">
          <div class="cc-icon">💀</div>
          <div class="cc-name">CRYPT CRAWLER</div>
          <div class="cc-sub">Turn-based dungeon delver</div>
          <div class="cc-tags">
            <span class="cc-tag">TURN-BASED</span>
            <span class="cc-tag">ASCII</span>
          </div>
          <div class="cc-bar"><div class="cc-progress" style="width:45%"></div></div>
          <div class="cc-status">45% COMPLETE</div>
        </div>
        <div class="cc-item">
          <div class="cc-icon">🎵</div>
          <div class="cc-name">BEAT VOID</div>
          <div class="cc-sub">Rhythm-based arcade shooter</div>
          <div class="cc-tags">
            <span class="cc-tag">AUDIO</span>
            <span class="cc-tag">ARCADE</span>
          </div>
          <div class="cc-bar"><div class="cc-progress" style="width:25%"></div></div>
          <div class="cc-status">25% COMPLETE</div>
        </div>
        <div class="cc-item">
          <div class="cc-icon">🧩</div>
          <div class="cc-name">GLITCH TILES</div>
          <div class="cc-sub">Puzzle game with reality-bending mechanics</div>
          <div class="cc-tags">
            <span class="cc-tag">PUZZLE</span>
            <span class="cc-tag">GLITCH</span>
          </div>
          <div class="cc-bar"><div class="cc-progress" style="width:15%"></div></div>
          <div class="cc-status">15% COMPLETE</div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="footer">
  <div class="container">
    <p>NEXUS ARCADE © 2024 &nbsp;│&nbsp; <a href="#">UPLINK</a> &nbsp;│&nbsp; <a href="#">SOURCE</a> &nbsp;│&nbsp; <a href="#">CONTACT</a></p>
    <p style="margin-top:8px;font-size:0.8rem;">BUILT WITH VANILLA CODE. NO FRAMEWORKS. PURE PIXELS.</p>
  </div>
</footer>

<div class="toast" id="toast"></div>

<script>
// Custom cursor
const cursor = document.querySelector('.cursor');
const cursorTrail = document.querySelector('.cursor-trail');
let mouseX = 0, mouseY = 0;
let trailX = 0, trailY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
  cursor.style.left = mouseX + 'px';
  cursor.style.top = mouseY + 'px';
});

function animateTrail() {
  trailX += (mouseX - trailX) * 0.15;
  trailY += (mouseY - trailY) * 0.15;
  cursorTrail.style.left = trailX + 'px';
  cursorTrail.style.top = trailY + 'px';
  requestAnimationFrame(animateTrail);
}
animateTrail();

// Hero Canvas
const heroCanvas = document.getElementById('heroCanvas');
if (heroCanvas) {
  const ctx = heroCanvas.getContext('2d');
  function resizeHero() {
    heroCanvas.width = window.innerWidth;
    heroCanvas.height = window.innerHeight;
  }
  resizeHero();
  window.addEventListener('resize', resizeHero);
  
  const stars = [];
  for (let i = 0; i < 200; i++) {
    stars.push({
      x: Math.random() * heroCanvas.width,
      y: Math.random() * heroCanvas.height,
      r: Math.random() * 1.5 + 0.3,
      speed: Math.random() * 0.4 + 0.05,
      twinkle: Math.random() * Math.PI * 2
    });
  }
  
  function drawStars() {
    ctx.clearRect(0, 0, heroCanvas.width, heroCanvas.height);
    stars.forEach(s => {
      s.twinkle += 0.02;
      const alpha = 0.4 + Math.sin(s.twinkle) * 0.4;
      ctx.fillStyle = `rgba(168,85,247,${alpha})`;
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
      ctx.fill();
      s.y += s.speed;
      if (s.y > heroCanvas.height) { s.y = 0; s.x = Math.random() * heroCanvas.width; }
    });
    requestAnimationFrame(drawStars);
  }
  drawStars();
}

// Typewriter
const phrases = [
  "PLAY. BUILD. EXPERIMENT._",
  "RETRO MEETS FUTURE._",
  "YOUR DIGITAL PLAYGROUND._",
  "PRESS START TO BEGIN._"
];
let phraseIdx = 0, charIdx = 0, isDeleting = false;
const typewriterEl = document.getElementById('heroTypewriter');

function typeLoop() {
  if (!typewriterEl) return;
  const current = phrases[phraseIdx];
  if (!isDeleting) {
    typewriterEl.textContent = current.substring(0, charIdx + 1);
    charIdx++;
    if (charIdx === current.length) {
      setTimeout(() => { isDeleting = true; }, 2000);
    }
  } else {
    typewriterEl.textContent = current.substring(0, charIdx - 1);
    charIdx--;
    if (charIdx === 0) {
      isDeleting = false;
      phraseIdx = (phraseIdx + 1) % phrases.length;
    }
  }
  setTimeout(typeLoop, isDeleting ? 40 : 80);
}
typeLoop();

// Interactive Avatar
const avatarCanvas = document.getElementById('interactiveAvatar');
if (avatarCanvas) {
  const actx = avatarCanvas.getContext('2d');
  let avatarClicks = 0;
  
  function drawAvatar() {
    actx.clearRect(0, 0, 260, 260);
    actx.fillStyle = '#1a0033';
    actx.beginPath();
    actx.arc(130, 130, 100, 0, Math.PI * 2);
    actx.fill();
    actx.strokeStyle = '#a855f7';
    actx.lineWidth = 4;
    actx.stroke();
    
    const eyeGlow = Math.sin(Date.now() / 1000 + avatarClicks) * 0.3 + 0.7;
    actx.fillStyle = `rgba(34,211,238,${eyeGlow})`;
    actx.beginPath();
    actx.arc(100, 110, 16 + avatarClicks * 2, 0, Math.PI * 2);
    actx.fill();
    actx.beginPath();
    actx.arc(160, 110, 16 + avatarClicks * 2, 0, Math.PI * 2);
    actx.fill();
    
    actx.fillStyle = '#050008';
    actx.beginPath();
    actx.arc(100, 110, 6, 0, Math.PI * 2);
    actx.fill();
    actx.beginPath();
    actx.arc(160, 110, 6, 0, Math.PI * 2);
    actx.fill();
    
    actx.strokeStyle = '#ec4899';
    actx.lineWidth = 3;
    actx.beginPath();
    actx.arc(130, 150, 30 + avatarClicks * 4, 0.1, Math.PI - 0.1);
    actx.stroke();
    
    actx.strokeStyle = 'rgba(236,72,153,0.3)';
    actx.lineWidth = 1;
    for (let i = 0; i < 5; i++) {
      const y = 60 + i * 35;
      actx.beginPath();
      actx.moveTo(50, y);
      actx.lineTo(210, y + (Math.sin(Date.now()/500 + i) * 8));
      actx.stroke();
    }
    
    requestAnimationFrame(drawAvatar);
  }
  
  avatarCanvas.addEventListener('click', () => {
    avatarClicks = (avatarClicks + 1) % 4;
    showToast('AVATAR SHIFTED');
  });
  
  drawAvatar();
}

// Analog Clock
const clockCanvas = document.getElementById('analogClock');
if (clockCanvas) {
  const cctx = clockCanvas.getContext('2d');
  function drawClock() {
    cctx.clearRect(0, 0, 280, 280);
    const now = new Date();
    const cx = 140, cy = 140, r = 120;
    
    cctx.fillStyle = '#0d0020';
    cctx.beginPath();
    cctx.arc(cx, cy, r, 0, Math.PI * 2);
    cctx.fill();
    cctx.strokeStyle = '#a855f7';
    cctx.lineWidth = 5;
    cctx.stroke();
    
    for (let i = 0; i < 12; i++) {
      const angle = (i * 30 - 90) * Math.PI / 180;
      cctx.fillStyle = '#c4b3e6';
      cctx.font = '14px "VT323", monospace';
      cctx.fillText(i === 0 ? '12' : i, cx + Math.cos(angle) * 95 - 6, cy + Math.sin(angle) * 95 + 5);
    }
    
    const h = now.getHours() % 12, m = now.getMinutes(), s = now.getSeconds();
    const hAngle = ((h + m/60) * 30 - 90) * Math.PI / 180;
    const mAngle = ((m + s/60) * 6 - 90) * Math.PI / 180;
    const sAngle = (s * 6 - 90) * Math.PI / 180;
    
    cctx.strokeStyle = '#ec4899';
    cctx.lineWidth = 5;
    cctx.beginPath(); cctx.moveTo(cx, cy); cctx.lineTo(cx + Math.cos(hAngle) * 55, cy + Math.sin(hAngle) * 55); cctx.stroke();
    
    cctx.strokeStyle = '#a855f7';
    cctx.lineWidth = 3;
    cctx.beginPath(); cctx.moveTo(cx, cy); cctx.lineTo(cx + Math.cos(mAngle) * 80, cy + Math.sin(mAngle) * 80); cctx.stroke();
    
    cctx.strokeStyle = '#22d3ee';
    cctx.lineWidth = 1.5;
    cctx.beginPath(); cctx.moveTo(cx, cy); cctx.lineTo(cx + Math.cos(sAngle) * 90, cy + Math.sin(sAngle) * 90); cctx.stroke();
    
    cctx.fillStyle = '#fff';
    cctx.beginPath();
    cctx.arc(cx, cy, 6, 0, Math.PI * 2);
    cctx.fill();
    
    requestAnimationFrame(drawClock);
  }
  drawClock();
}

// Cipher Matrix
const cipherInput = document.getElementById('cipherInput');
const cipherOutput = document.getElementById('cipherOutput');
const cipherBtns = document.querySelectorAll('.cipher-btn');
let cipherMode = 'atbash';

cipherBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    cipherBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    cipherMode = btn.dataset.mode;
    processCipher();
  });
});

cipherInput.addEventListener('input', processCipher);

function processCipher() {
  const text = cipherInput.value;
  if (!text) { cipherOutput.textContent = 'OUTPUT_'; return; }
  
  let result = '';
  switch(cipherMode) {
    case 'atbash':
      result = text.split('').map(c => {
        if (c >= 'a' && c <= 'z') return String.fromCharCode(219 - c.charCodeAt(0));
        if (c >= 'A' && c <= 'Z') return String.fromCharCode(155 - c.charCodeAt(0));
        return c;
      }).join('');
      break;
    case 'rot13':
      result = text.split('').map(c => {
        if (c >= 'a' && c <= 'z') return String.fromCharCode(((c.charCodeAt(0) - 97 + 13) % 26) + 97);
        if (c >= 'A' && c <= 'Z') return String.fromCharCode(((c.charCodeAt(0) - 65 + 13) % 26) + 65);
        return c;
      }).join('');
      break;
    case 'xor':
      result = text.split('').map(c => String.fromCharCode(c.charCodeAt(0) ^ 42)).join('');
      break;
    case 'binary':
      result = text.split('').map(c => c.charCodeAt(0).toString(2).padStart(8, '0')).join(' ');
      break;
  }
  cipherOutput.textContent = result;
}

// Void Palette
const paletteRow = document.getElementById('paletteRow');
const paletteHexRow = document.getElementById('paletteHexRow');
const paletteColors = ['#a855f7', '#ec4899', '#22d3ee', '#4ade80', '#facc15', '#050008', '#0c0018', '#ffffff'];

paletteColors.forEach(color => {
  const swatch = document.createElement('div');
  swatch.className = 'palette-swatch';
  swatch.style.backgroundColor = color;
  swatch.addEventListener('click', () => {
    navigator.clipboard.writeText(color).then(() => showToast(`COPIED ${color}`));
  });
  paletteRow.appendChild(swatch);
  
  const hex = document.createElement('span');
  hex.className = 'palette-hex';
  hex.textContent = color;
  hex.addEventListener('click', () => {
    navigator.clipboard.writeText(color).then(() => showToast(`COPIED ${color}`));
  });
  paletteHexRow.appendChild(hex);
});

// Soundboard
document.querySelectorAll('.sb-pad').forEach(pad => {
  pad.addEventListener('click', () => {
    showToast(`${pad.dataset.sound.toUpperCase()} ACTIVATED`);
  });
});

// Expand button
function toggleExpand(btn) {
  const block = btn.closest('.arcade-game-block');
  block.classList.toggle('expanded');
  btn.classList.toggle('active');
}

// Toast
function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('visible');
  clearTimeout(toast._timeout);
  toast._timeout = setTimeout(() => toast.classList.remove('visible'), 2000);
}
</script>
</body>
</html>