/* ============================================================
   Digital Alligator — hacker concept — base.css
   Shared across index.html and blog.html.
   ============================================================ */

:root{
  --bg:#020403;
  --term-bg:rgba(3,10,6,.88);
  --green:#39ff6a;
  --green-dim:#1e9c48;
  --green-faint:#0f4d26;
  --amber:#d4af37;
  --white:#e8fff0;
  --red:#ff4d4d;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--green);
  font-family:'JetBrains Mono',monospace;
  overflow-x:hidden;
  animation:flicker 6s infinite;
}
a{ color:inherit; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--green-faint); }

@keyframes flicker{
  0%,96%,100%{ filter:brightness(1); }
  97%{ filter:brightness(.92); }
  98%{ filter:brightness(1.04); }
}
@keyframes blink{ 50%{opacity:.15;} }

/* ---------- background layers ---------- */
canvas#matrix{ position:fixed; inset:0; z-index:0; opacity:.5; }
.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.25) 3px, rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}

/* ---------- top bar ---------- */
header{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; font-size:12px; color:var(--green-dim);
  border-bottom:1px solid var(--green-faint);
  background:rgba(2,4,3,.7);
}
header .brand{ color:var(--green); letter-spacing:1px; display:flex; align-items:center; gap:9px; text-decoration:none; }
header .brand img{ width:20px; height:20px; object-fit:contain; filter:grayscale(1) brightness(2) sepia(1) hue-rotate(70deg) saturate(4); }
header nav a{ color:var(--green-dim); text-decoration:none; margin-left:20px; font-size:12px; transition:color .2s; }
header nav a:hover, header nav a.active{ color:var(--green); }
header .status{ display:flex; align-items:center; gap:6px; }
header .status .led{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:blink 1.2s step-end infinite; }

/* ---------- shared terminal chrome ---------- */
main{ position:relative; z-index:3; display:flex; justify-content:center; padding:40px 16px 60px; min-height:calc(100vh - 58px); }
.terminal{
  width:100%; max-width:900px;
  background:var(--term-bg);
  border:1px solid var(--green-faint);
  box-shadow:0 0 40px rgba(57,255,106,.08), inset 0 0 60px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.term-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--green-faint);
  font-size:11.5px; color:var(--green-dim);
}
.term-bar .dots{ display:flex; gap:6px; }
.term-bar .dots span{ width:10px; height:10px; border-radius:50%; background:var(--green-faint); }
.term-bar .title{ flex:1; text-align:center; }

.line{ white-space:pre-wrap; word-break:break-word; margin-bottom:2px; }
.line.dim, .dim{ color:var(--green-dim); }
.line.amber, .amber{ color:var(--amber); }
.line.err{ color:var(--red); }
.line.heading{ color:var(--green); font-weight:700; margin-top:10px; }
pre.ascii{ color:var(--green); font-size:10px; line-height:1.15; margin-bottom:6px; overflow-x:auto; }

/* ---------- footer ---------- */
footer{
  position:relative; z-index:3; text-align:center; padding:18px;
  font-size:11px; color:var(--green-faint);
}
footer span{ color:var(--green-dim); }

@media(max-width:700px){
  header nav a{ margin-left:12px; font-size:11px; }
  pre.ascii{ font-size:7.5px; }
}