/* ============================================================
   THEME TOKENS
   ============================================================ */
:root {
  --bg: #121116;
  --bg-elevated: #1a191e;
  --panel: #1b1a21;
  --border: #2a2933;
  --border-soft: #221f27;

  --text: #f2f1f5;
  --muted: #9c9aa6;
  --dim: #5c5a66;

  --accent: #8b5cf6;   /* swappable via the accent-color dots */
  --pink: #ec4899;
  --orange: #f59e0b;
  --red: #f43f5e;
  --teal: #22d3ee;
  --green: #4ade80;

  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body.uprising { --accent: #f43f5e; }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.section { padding: 80px 28px; scroll-margin-top: 70px; }
.section-head { margin-bottom: 34px; }
.section-head .tag {
  font-family: var(--font-mono); color: var(--dim); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.section-head h2 { font-size: 2rem; margin-top: 6px; }
em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   NEURAL BACKGROUND CANVAS (site-wide, behind everything)
   ============================================================ */
#neural-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(18, 17, 22, .75); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: 1080px; margin: 0 auto; padding: 0 28px;
}
.brand { font-family: var(--font-mono); color: var(--dim); }
.brand b { color: var(--text); font-weight: 400; }
.brand i { color: var(--accent); font-style: normal; }
nav ul { list-style: none; display: flex; gap: 24px; }
nav a {
  font-weight: 500; font-size: .9rem; color: var(--muted);
  padding: 4px 0; border-bottom: 2px solid transparent; transition: .2s;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); border-color: var(--accent); }
.right-controls { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  height: 34px; padding: 0 12px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  background: none; cursor: pointer; font-family: var(--font-mono); font-size: .78rem;
  transition: .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.accent-dots { display: flex; gap: 6px; margin-right: 4px; }
.accent-dots button {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bg); outline: 1px solid var(--border); cursor: pointer;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 100px 28px 60px;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.robot-wrap { position: relative; margin-bottom: 14px; cursor: pointer; }
#robot { width: 110px; display: block; transition: transform .2s; }
#robot:hover { transform: rotate(-4deg) scale(1.05); }
.antenna { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.blink .eye, .blink .pupil {
  transform-box: fill-box; transform-origin: center; animation: blink-eye .22s;
}
@keyframes blink-eye { 50% { transform: scaleY(.08); } }
body.uprising .pupil { fill: var(--red); }
.speech-bubble {
  position: absolute; left: 50%; bottom: 104%; transform: translateX(-50%) scale(.8);
  opacity: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 14px; font-family: var(--font-mono); font-size: .76rem;
  width: max-content; max-width: 250px; transition: .25s; pointer-events: none;
}
.speech-bubble.on { opacity: 1; transform: translateX(-50%) scale(1); }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.badge {
  font-family: var(--font-mono); font-size: .78rem; border: 1px solid var(--border);
  padding: 5px 16px; border-radius: 20px; color: var(--muted); background: rgba(18, 17, 22, .6);
}
.hero-name { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 14px; }
.hero-dash {
  width: 70px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--red)); margin-bottom: 20px;
}
.hero-role { font-size: 1.25rem; min-height: 1.9rem; }
#typing-role::after { content: '▍'; color: var(--accent); animation: pulse 1s infinite; }
.hero-tagline { color: var(--muted); max-width: 52ch; margin: 8px 0 30px; font-size: .95rem; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn {
  font-weight: 600; font-size: .9rem; padding: 12px 22px; border-radius: 6px;
  border: 1px solid transparent; transition: .2s; cursor: pointer; font-family: var(--font-body);
  display: inline-block;
}
.btn.small { padding: 6px 14px; font-size: .78rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .85; transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); color: var(--text); background: none; }
.btn-ghost:hover { border-color: var(--muted); }
.hint { margin-top: 30px; font-family: var(--font-mono); font-size: .72rem; color: var(--dim); }

/* ============================================================
   TIMELINE (Experience)
   ============================================================ */
.timeline { position: relative; max-width: 940px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--pink), var(--orange), var(--teal), var(--green));
  opacity: .45; transform: translateX(-1px);
}
.timeline-item {
  position: relative; width: 50%; padding: 0 38px 44px 0;
  opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s;
}
.timeline-item:nth-child(even) { margin-left: 50%; padding: 0 0 44px 38px; }
.timeline-item.in-view { opacity: 1; transform: none; }
.timeline-item::before {
  content: ''; position: absolute; top: 26px; right: -8px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color); box-shadow: 0 0 0 4px var(--bg), 0 0 16px var(--color);
  z-index: 1;
}
.timeline-item:nth-child(even)::before { right: auto; left: -8px; }
.timeline-item::after {
  content: ''; position: absolute; top: 33px; right: 0; width: 38px; height: 2px;
  background: var(--color); opacity: .5;
}
.timeline-item:nth-child(even)::after { right: auto; left: 0; }
.timeline-card {
  border: 1.5px solid var(--color); border-radius: 10px; padding: 26px 28px;
  background: var(--panel); box-shadow: 0 25px 50px -35px var(--color); transition: .2s;
}
.timeline-card:hover { box-shadow: 0 25px 60px -25px var(--color); }
.timeline-year { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--color); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.duration-pill {
  font-family: var(--font-mono); font-size: .68rem; color: var(--dim);
  border: 1px solid var(--border); padding: 2px 9px; border-radius: 10px;
}
.timeline-org { font-size: 1.1rem; font-weight: 600; margin-top: 8px; }
.timeline-loc {
  font-family: var(--font-mono); font-size: .78rem; color: var(--dim);
  margin: 4px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.role-block { margin-top: 22px; }
.role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.current-badge {
  font-family: var(--font-mono); font-size: .62rem; background: rgba(139, 92, 246, .15);
  color: var(--accent); padding: 2px 8px; border-radius: 10px;
}
.role-dates { font-family: var(--font-mono); font-size: .78rem; color: var(--dim); margin-bottom: 10px; }
.role-block p { color: var(--muted); max-width: 62ch; margin-bottom: 10px; font-size: .92rem; }
.role-bullets { list-style: none; margin-bottom: 12px; }
.role-bullets li { color: var(--muted); font-size: .88rem; margin-bottom: 6px; padding-left: 18px; position: relative; }
.role-bullets li::before { content: '→'; position: absolute; left: 0; color: var(--dim); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row span { font-family: var(--font-mono); font-size: .7rem; border: 1px solid var(--border); padding: 3px 9px; border-radius: 3px; color: var(--muted); }
@media (max-width: 899px) {
  .timeline::before { left: 7px; }
  .timeline-item, .timeline-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 34px 38px; }
  .timeline-item::before, .timeline-item:nth-child(even)::before { left: 0; right: auto; }
  .timeline-item::after, .timeline-item:nth-child(even)::after { left: 8px; right: auto; width: 30px; }
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; margin-bottom: 34px; }
.skills-grid h4, .cert-heading {
  font-family: var(--font-mono); font-size: .74rem; color: var(--dim); font-weight: 400;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.skills-grid .tag-row span { font-size: .74rem; padding: 4px 10px; transition: .2s; }
.skills-grid .tag-row span:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.certs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 30px; list-style: none; margin-bottom: 24px; }
.certs-list li { color: var(--muted); font-size: .88rem; padding-left: 18px; position: relative; }
.certs-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); }
@media (max-width: 820px) { .skills-grid, .certs-list { grid-template-columns: 1fr; } }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.project-card {
  position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
  display: block; background: var(--panel); min-height: 170px; transition: .2s;
}
.project-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.project-badge {
  position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: .64rem;
  background: rgba(18, 17, 22, .8); padding: 3px 10px; border-radius: 12px;
}
.project-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(0deg, rgba(8, 8, 10, .92), transparent); }
.project-meta { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.project-info h3 { font-size: 1.1rem; margin-top: 3px; }
.pattern-pulse { background-image: repeating-linear-gradient(100deg, rgba(139, 92, 246, .18) 0 2px, transparent 2px 30px), radial-gradient(circle at 70% 30%, rgba(236, 72, 153, .2), transparent 55%); }
.pattern-boot { background-image: repeating-radial-gradient(circle at 30% 50%, rgba(245, 158, 11, .22) 0 2px, transparent 3px 22px); }
.pattern-ledger { background-image: repeating-linear-gradient(0deg, rgba(74, 222, 128, .16) 0 2px, transparent 2px 26px), linear-gradient(135deg, rgba(34, 211, 238, .14), transparent 60%); }
.pattern-grid { background-image: radial-gradient(circle, rgba(139, 92, 246, .3) 1.5px, transparent 1.5px); background-size: 16px 16px; }
.see-more { margin-top: 24px; text-align: center; }

.filter-input {
  width: 100%; max-width: 420px; margin-bottom: 22px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; color: var(--text);
  font-family: var(--font-body); font-size: .9rem;
}
.filter-input:focus { outline: none; border-color: var(--accent); }
.project-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start;
  padding: 18px 4px; border-bottom: 1px solid var(--border-soft); transition: .2s;
}
.project-row:hover { background: var(--panel); padding-left: 14px; }
.project-row h3 { font-size: 1.1rem; }
.project-row p { color: var(--muted); font-size: .88rem; margin: 2px 0 8px; }
.project-row .row-num { font-family: var(--font-mono); color: var(--dim); font-size: .8rem; padding-top: 4px; }
.project-row .go { font-family: var(--font-mono); color: var(--accent); }

.back-link { font-family: var(--font-mono); color: var(--muted); font-size: .85rem; display: inline-block; margin: 40px 0 18px; }
.back-link:hover { color: var(--accent); }
.detail-hero { height: 190px; border-radius: 8px; border: 1px solid var(--border-soft); margin-bottom: 22px; }
.detail-title { font-size: 2.2rem; }
.detail-outcome { color: var(--muted); font-size: 1.05rem; max-width: 56ch; margin: 10px 0; }
.detail-meta { font-family: var(--font-mono); color: var(--dim); font-size: .8rem; margin-bottom: 6px; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin: 30px 0; }
.case-grid h4 { font-family: var(--font-mono); font-size: .76rem; color: var(--dim); font-weight: 400; margin-bottom: 6px; }
.case-grid p { color: var(--muted); max-width: 48ch; }
.detail-links a { font-family: var(--font-mono); font-size: .85rem; border-bottom: 1px solid var(--dim); margin-right: 20px; }
.detail-links a:hover { color: var(--accent); border-color: var(--accent); }
.detail-nav {
  display: flex; justify-content: space-between; margin-top: 50px; padding-top: 22px;
  border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: .82rem;
}
.detail-nav a:hover { color: var(--accent); }
@media (max-width: 820px) { .case-grid { grid-template-columns: 1fr; } .detail-nav { flex-direction: column; gap: 14px; align-items: flex-start; } }

/* ============================================================
   PLAYGROUND / GAMES
   ============================================================ */
.game-tabs { display: flex; justify-self: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-btn, .diff-btn {
  font-family: var(--font-mono); font-size: .78rem; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; transition: .2s;
}
.tab-btn.active, .diff-btn.active { border-color: var(--accent); color: var(--text); background: rgba(139, 92, 246, .12); }
.difficulty-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.game-panel { max-width: 700px; justify-self: center; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 26px; text-align: center; }
.game-note { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.move-buttons { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.move-buttons button {
  font-size: 2rem; width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; transition: .15s;
}
.move-buttons button:hover { border-color: var(--accent); transform: translateY(-3px) rotate(-3deg); }
.game-result { min-height: 2.6rem; font-size: .95rem; color: var(--muted); }
.game-score { display: flex; justify-content: center; gap: 24px; font-family: var(--font-mono); font-size: .78rem; color: var(--dim); margin: 12px 0; }
.game-score b { color: var(--text); }
.learn-meter { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .72rem; color: var(--dim); }
.bar { flex: 1; height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--pink)); transition: width .4s; }
.ttt-board { display: grid; grid-template-columns: repeat(3, 84px); gap: 8px; justify-content: center; margin-bottom: 14px; }
.ttt-cell {
  width: 84px; height: 84px; font-size: 2rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; color: var(--text); transition: .15s;
}
.ttt-cell:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.04); }
.ttt-cell:disabled { cursor: default; }
.maze-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; margin: 0 auto 14px; user-select: none; touch-action: none; }
.maze-cell {
  aspect-ratio: 1; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; transition: background .2s;
}
.maze-cell.wall { background: var(--dim); }
.maze-cell.visited { background: rgba(139, 92, 246, .35); }
.maze-cell.path { background: var(--orange); }
.maze-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }


.drone-grid {
  display: grid;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin: 0 auto;
  gap: 5px;
  padding: 7px;
  background: #080d18;
  border: 1px solid #263248;
  border-radius: 18px;
}

.drone-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #121b2c;
  border: 1px solid #1d2a40;
  color: #7f8ba3;
  font-size: clamp(16px, 4vw, 28px);
  transition:
    background 0.15s ease,
    transform 0.12s ease;
}

.drone-cell.player {
  background: #123247;
  border-color: #55d6ff;
  box-shadow:
    inset 0 0 18px rgba(85, 214, 255, 0.18);
  z-index: 2;
}

.drone-cell.player span {
  filter:
    drop-shadow(0 0 8px rgba(85, 214, 255, 0.8));
}

.drone-cell.target {
  background: #173328;
  border-color: #48e0a2;
  color: #48e0a2;
  box-shadow:
    inset 0 0 18px rgba(72, 224, 162, 0.15);
}

.drone-cell.target span {
  animation: targetPulse 1.2s infinite;
}

.drone-cell.wall {
  background: #252d3c;
  color: #566277;
  border-color: #343f54;
}

.drone-cell.drone {
  background: #321d2b;
  border-color: #ff5f7e;
  color: #ff5f7e;
  box-shadow:
    inset 0 0 14px rgba(255, 95, 126, 0.16);
}

.drone-cell.drone span {
  animation: dronePulse 0.8s infinite alternate;
}

.drone-topbar,
.drone-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: min(100%, 560px);
  margin: 0 auto 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #111827;
  border: 1px solid #263248;
  color: #9ca8bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#drone-confidence {
  color: #ff6688;
}

#drone-score {
  color: #59d9ff;
}

.game-result.active {
  color: #59d9ff;
}

.game-result.success {
  color: #48e0a2;
}

.game-result.hack {
  color: #c69cff;
}

.game-result.danger {
  color: #ff6688;
}

.drone-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

@keyframes targetPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes dronePulse {
  from {
    transform: scale(0.85);
  }

  to {
    transform: scale(1.1);
  }
}

@media (max-width: 600px) {
  .drone-grid {
    gap: 3px;
    padding: 5px;
  }

  .drone-hud {
    font-size: 9px;
    padding: 9px;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-split { display: grid; grid-template-columns: 1fr; gap: 36px; }
.contact-heading { font-size: clamp(1.9rem, 4.2vw, 2.7rem); max-width: 16ch; margin-bottom: 14px; }
.contact-sub { color: var(--muted); max-width: 48ch; margin-bottom: 18px; }
.email-link { display: block; margin-bottom: 16px; color: var(--muted); font-size: .85rem; font-family: var(--font-mono); }
.contact-icons { display: flex; gap: 10px; margin-bottom: 20px; }
.contact-right form { max-width: none; display: flex; flex-direction: column; gap: 14px; }
.form-note { font-family: var(--font-mono); font-size: .76rem; color: var(--dim); }
.contact-right input, .contact-right textarea {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px;
  color: var(--text); font-family: var(--font-body); font-size: .9rem; resize: vertical;
}
.contact-right input:focus, .contact-right textarea:focus { outline: none; border-color: var(--accent); }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

footer { border-top: 1px solid var(--border-soft); padding: 24px; text-align: center; font-family: var(--font-mono); font-size: .74rem; color: var(--dim); }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.palette-overlay {
  position: fixed; inset: 0; background: rgba(8, 8, 10, .75); backdrop-filter: blur(3px);
  z-index: 100; display: flex; justify-content: center; padding-top: 14vh;
}
.palette-box { width: min(520px, 90vw); height: fit-content; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.palette-box input { width: 100%; border: none; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); padding: 16px 18px; font-family: var(--font-mono); font-size: .95rem; }
.palette-box input:focus { outline: none; }
.palette-item { padding: 11px 18px; font-family: var(--font-mono); font-size: .84rem; color: var(--muted); cursor: pointer; }
.palette-item:hover, .palette-item.selected { background: var(--bg); color: var(--text); }

#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 30px); opacity: 0;
  background: var(--panel); border: 1px solid var(--accent); padding: 10px 18px; border-radius: 8px;
  font-family: var(--font-mono); font-size: .8rem; z-index: 120; transition: .3s; pointer-events: none;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}