/* ═══════════════════════════════════════════════════════════════════════════
   VEIL ACADEMY — style.css
   Dark terminal aesthetic. Teal/cyan accent. Sharp geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

/* No webfont @import here on purpose.
   Pulling fonts from fonts.googleapis.com sends every visitor's IP address,
   user agent and referring page to Google on every page load. On a site whose
   whole subject is network privacy, that is not defensible — and the CSP in
   index.html / lesson.html blocks it anyway.

   The stacks below use the original fonts when the visitor happens to have them
   installed locally, and fall back to good system faces otherwise. To restore
   the exact original typography, self-host the woff2 files in a fonts/ folder
   and add @font-face rules here — no third-party request needed. */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bg:         #0d0f12;
  --bg2:        #131519;
  --bg3:        #1a1d23;
  --bg4:        #21252e;
  --border:     #2a2f3a;
  --border2:    #363d4a;

  --text:       #d4d8e0;
  --text2:      #8a90a0;
  --text3:      #555c6e;

  --accent:     #00d4c8;
  --accent2:    #00a89f;
  --accent-dim: rgba(0, 212, 200, 0.12);
  --accent-glow:rgba(0, 212, 200, 0.06);

  --done:       #22c55e;
  --done-dim:   rgba(34, 197, 94, 0.12);
  --warn:       #f59e0b;
  --danger:     #ef4444;

  --font-mono:  'Share Tech Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
                'Roboto Mono', Menlo, Consolas, 'Courier New', monospace;
  --font-sans:  'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;

  --radius:     6px;
  --radius-lg:  10px;

  --transition: 0.18s ease;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Subtle grid texture */
  background-image:
    linear-gradient(rgba(0,212,200,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: #fff; }

img { display: block; max-width: 100%; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,15,18,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--text);
}
.brand:hover { color: var(--accent); }

.brand-logo {
  height: 28px;
  width: auto;
}

.brand-text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

.nav-home {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-home:hover, .nav-home.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.nav-lessons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-lessons::-webkit-scrollbar { display: none; }

.nav-lesson {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
}
a.nav-lesson:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.nav-lesson.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.nav-lesson.done {
  border-color: var(--done);
  color: var(--done);
  background: var(--done-dim);
}
.nav-lesson.locked {
  color: var(--text3);
  border-color: var(--border);
  cursor: not-allowed;
  background: transparent;
}
.nav-lesson.locked .lock-icon { font-size: 9px; }

.nav-ext {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-ext:hover { color: var(--accent); }

/* XP strip */
.xp-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.xp-label { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.xp-val   { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.xp-total { font-size: 11px; color: var(--text3); }

.xp-track {
  flex: 1;
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--accent);
}

.xp-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* ── Home page ────────────────────────────────────────────────────────────── */
.home-main { flex: 1; }

.hero {
  text-align: center;
  padding: 80px 24px 60px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,212,200,0.08), transparent);
  pointer-events: none;
}

.hero-logo {
  height: 72px;
  width: auto;
  margin: 0 auto 16px;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.05); }
}

.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(28px, 6vw, 52px);
  letter-spacing: 0.08em;
  font-weight: 400;
  color: #fff;
  margin-bottom: 16px;
}
.hero-title .accent { color: var(--accent); }

.hero-sub {
  font-size: 18px;
  color: var(--text2);
  font-weight: 300;
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat span {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.stat label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
}

/* Lesson grid */
.grid-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.lesson-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.lesson-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border2);
  transition: background var(--transition);
}
.lesson-card:hover:not(.card-locked) {
  border-color: var(--accent);
  background: var(--bg3);
  transform: translateY(-2px);
}
.lesson-card:hover:not(.card-locked)::before {
  background: var(--accent);
}
.lesson-card.card-done::before { background: var(--done); }
.lesson-card.card-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.card-num {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--text3);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 28px;
}
.lesson-card:hover:not(.card-locked) .card-num { color: var(--accent); }
.lesson-card.card-done .card-num { color: var(--done); }

.card-body { flex: 1; min-width: 0; }
.card-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
}
.card-summary {
  font-size: 13px;
  color: var(--text2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.card-xp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  background: var(--bg4);
  padding: 2px 7px;
  border-radius: 3px;
}
.card-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 500;
}
.card-badge.done   { background: var(--done-dim); color: var(--done); }
.card-badge.locked { background: var(--bg4);      color: var(--text3); }

/* ── Lesson page ──────────────────────────────────────────────────────────── */
.lesson-main { flex: 1; padding: 40px 24px 80px; }

.lesson-container {
  max-width: 800px;
  margin: 0 auto;
}

.breadcrumb {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 28px;
  font-family: var(--font-mono);
}
.breadcrumb a { color: var(--text3); }
.breadcrumb a:hover { color: var(--accent); }
.crumb-sep { margin: 0 6px; }

.lesson-hdr {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.lesson-num-badge {
  font-family: var(--font-mono);
  font-size: 36px;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 4px;
}

.lesson-hdr h1 {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 6px;
}

.lesson-summary {
  font-size: 15px;
  color: var(--text2);
  font-style: italic;
}

.lesson-xp-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(0,212,200,0.3);
  padding: 6px 14px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* Lesson body content */
.lesson-body { line-height: 1.8; }
.lesson-body p  { margin-bottom: 18px; color: var(--text); }
.lesson-body h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 0 12px;
  font-family: var(--font-mono);
}
.lesson-body ul {
  margin: 0 0 18px 0;
  padding-left: 0;
  list-style: none;
}
.lesson-body ul li {
  padding: 8px 12px 8px 28px;
  position: relative;
  border-left: 1px solid var(--border);
  margin-bottom: 4px;
  color: var(--text);
  font-size: 15px;
}
.lesson-body ul li::before {
  content: "›";
  position: absolute;
  left: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Quiz section */
.quiz-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0 32px;
  color: var(--text3);
}
.quiz-divider::before, .quiz-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.quiz-divider span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--text3);
}

.quiz-form {}

.quiz-question {
  margin-bottom: 28px;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition);
}
.quiz-question.correct   { border-color: var(--done); background: var(--done-dim); }
.quiz-question.incorrect { border-color: var(--danger); }
.quiz-question.unanswered{ border-color: var(--warn); }

.q-prompt {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 14px;
}

.q-options { display: flex; flex-direction: column; gap: 8px; }

.q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-size: 14px;
  color: var(--text);
}
.q-option:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.q-option input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.q-option.reveal-correct {
  border-color: var(--done);
  background: var(--done-dim);
  color: var(--done);
}

.quiz-address {
  margin: 28px 0;
}
.quiz-address label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.label-note { color: var(--text3); font-size: 11px; }

.quiz-address input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}
.quiz-address input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.quiz-address input[type="text"]::placeholder { color: var(--text3); }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.btn-submit:hover { background: #00f0e8; transform: translateY(-1px); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.quiz-result { margin-top: 20px; }
.quiz-result.hidden { display: none; }

.result-pass {
  padding: 16px 20px;
  background: var(--done-dim);
  border: 1px solid var(--done);
  border-radius: var(--radius);
  color: var(--done);
  font-size: 15px;
  line-height: 1.6;
}
.result-fail {
  padding: 16px 20px;
  background: rgba(239,68,68,0.1);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: #fca5a5;
  font-size: 15px;
}

.txid {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--done);
  opacity: 0.7;
}
.txid a { color: inherit; }

.btn-next, .quiz-next-row .btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  margin-top: 20px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: background var(--transition), color var(--transition);
}
.btn-next:hover {
  background: var(--accent);
  color: #000;
}

.quiz-done {
  padding: 32px;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--done);
  border-radius: var(--radius-lg);
}
.quiz-done-icon {
  font-size: 40px;
  color: var(--done);
  margin-bottom: 12px;
}

/* Locked overlay */
.locked-overlay {
  padding: 48px;
  text-align: center;
}
.locked-msg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 48px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
}
.locked-icon { font-size: 32px; }
.locked-msg p { color: var(--text2); font-size: 15px; }

/* XP Flash */
.xp-flash {
  position: fixed;
  top: 90px;
  right: 24px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius);
  z-index: 999;
  animation: xpFly 2s ease forwards;
  pointer-events: none;
}
@keyframes xpFly {
  0%   { opacity: 0; transform: translateY(10px); }
  20%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 20px 24px;
  margin-top: auto;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
}
.footer-inner a {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text3);
}
.footer-inner a:hover { color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .header-inner  { padding: 0 14px; }
  .nav-ext       { display: none; }
  .hero          { padding: 50px 16px 40px; }
  .grid-section  { padding: 0 14px 60px; }
  .lesson-grid   { grid-template-columns: 1fr; }
  .lesson-hdr    { flex-wrap: wrap; gap: 12px; }
  .lesson-xp-badge { margin-left: 0; }
  .lesson-main   { padding: 24px 14px 60px; }
}

@media (max-width: 480px) {
  .hero-stats { gap: 20px; }
  .hero-stats .stat span { font-size: 22px; }
  .lesson-num-badge { font-size: 24px; }
}

/* ── Scanline overlay (subtle) ────────────────────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Lesson callouts, code blocks and sources ─────────────────────────────── */

.lesson-note {
  margin: 22px 0;
  padding: 16px 20px;
  background: var(--accent-glow);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}

.lesson-code {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.lesson-code code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  white-space: pre;
}

.lesson-sources {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.lesson-sources h4 {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}
.lesson-sources ul { list-style: none; padding: 0; margin: 0; }
.lesson-sources ul li { margin-bottom: 8px; padding-left: 0; }
.lesson-sources ul li::before { content: none; }
.lesson-sources a {
  color: var(--text2);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dotted var(--border2);
  transition: color var(--transition);
}
.lesson-sources a:hover { color: var(--accent); }

/* ── Quiz: pending state, address help, payout notes ──────────────────────── */

.result-pending {
  padding: 16px 20px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 15px;
}

.addr-help {
  margin-top: 8px;
  color: var(--text3);
  font-size: 12.5px;
  line-height: 1.6;
}

.payout-note {
  display: block;
  margin-top: 8px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
}

/* Server-marked questions */
.quiz-question.correct   { border-left: 3px solid var(--done); }
.quiz-question.incorrect { border-left: 3px solid var(--danger); }
.quiz-question.unanswered{ border-left: 3px solid var(--warn); }

.study-mode-note {
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── Fund the faucet ──────────────────────────────────────────────────────── */
.fund-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.fund-title {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 12px;
}
.fund-blurb {
  color: var(--text2);
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}
.fund-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.fund-qr {
  width: 200px;
  height: 200px;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.fund-addr-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 340px;
  text-align: left;
}
.fund-addr-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
.fund-addr {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.fund-copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.fund-copy:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }