/* =========================================================
   NEOCITIES CYBER-2000s PERSONAL SITE — STRIKING RED EDITION
   - sharper corners, harder contrast
   - more red + amber accents
   - bigger text + bigger buttons
   - subtle "space / console / LCARS-ish" vibes
   ========================================================= */

:root{
  --bg0:#040208;
  --bg1:#080213;
  --panel:#09060f;
  --panel2:#05040a;

  --text:#fff2f2;
  --muted:#ffb5b5;

  --red:#ff2a2a;
  --red2:#b40000;
  --amber:#ffb000;
  --cyan:#00ffd5;

  --border:#3a0c0c;
  --border2:#7a1515;

  --shadow: rgba(0,0,0,.75);
  --w: 980px;

  /* Sharper: lower radius */
  --radius: 6px;

  /* pixel-ish stack */
  --pixel: "MS Gothic","MS PGothic","Pixelated MS Sans Serif","Lucida Console","Courier New",monospace;
}

/* reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: var(--pixel);
  font-size: 15px; /* bigger base text */
  line-height: 1.65;
  background:
    radial-gradient(900px 700px at 18% 10%, rgba(255,42,42,.16), transparent 55%),
    radial-gradient(900px 700px at 85% 18%, rgba(255,176,0,.10), transparent 55%),
    radial-gradient(1100px 900px at 45% 95%, rgba(0,255,213,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  image-rendering: pixelated;
  overflow-x:hidden;
}

/* harder animated grid */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,42,42,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,176,0,.05) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  opacity:.9;
  pointer-events:none;
  animation: drift 12s linear infinite;
  mix-blend-mode: screen;
}
@keyframes drift{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(22px,22px); }
}

/* stronger CRT scanlines */
body:after{
  content:"";
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.16;
  pointer-events:none;
}

/* centered layout */
.wrap{
  width:min(var(--w), calc(100% - 18px));
  margin: 20px auto 28px auto;
  position:relative;
}

/* topbar: sharp, “console plate” */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background:
    linear-gradient(180deg, rgba(255,42,42,.18), rgba(0,0,0,0)),
    rgba(8,2,19,.80);
  border:2px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px var(--shadow);
  position:relative;
  overflow:hidden;
}
.topbar:before{
  /* “alert stripe” */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:10px;
  background: linear-gradient(180deg, var(--red), var(--amber));
  box-shadow: 0 0 18px rgba(255,42,42,.35);
}
.topbar:after{
  /* diagonal hazard texture */
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,42,42,.07) 0 8px,
    rgba(0,0,0,0) 8px 16px
  );
  opacity:.35;
  pointer-events:none;
}

/* brand */
.brand{ display:flex; align-items:center; gap:12px; padding-left:6px; }
.brand img{
  width:44px; height:44px;
  border-radius: 4px; /* less round */
  border:2px solid rgba(255,42,42,.55);
  box-shadow: 0 0 20px rgba(255,42,42,.22);
}
.brand-title{ line-height:1.1; }
.brand-title .site{
  font-size: 16px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255,42,42,.22);
}
.brand-title .tag{
  font-size: 12px;
  color: var(--muted);
}

/* status pills: bigger, chunkier */
.pills{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius: 4px;
  border:2px solid rgba(255,42,42,.35);
  background: rgba(0,0,0,.35);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing:.6px;
}
.pill.neon{ border-color: rgba(0,255,213,.38); }
.pill.warn{ border-color: rgba(255,176,0,.55); }

/* nav: bigger buttons, sharper */
.nav{
  margin-top: 12px;
  background: rgba(9,6,15,.82);
  border:2px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 10px;
  box-shadow: 0 14px 36px var(--shadow);
}
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  gap:10px;
}
.nav a{
  display:inline-block;
  padding:10px 12px; /* bigger buttons */
  color: var(--text);
  text-decoration:none;
  border:2px solid rgba(255,42,42,.30);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,42,42,.20), rgba(0,0,0,0)),
    rgba(0,0,0,.28);
  text-shadow: 0 0 10px rgba(255,42,42,.18);
}
.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,176,0,.75);
  box-shadow: 0 0 22px rgba(255,176,0,.14);
}
.nav a.active{
  border-color: rgba(0,255,213,.65);
  box-shadow: 0 0 24px rgba(0,255,213,.14);
}

/* LCARS-ish corner “elbow” bar under nav */
.marquee{
  margin-top: 12px;
  overflow:hidden;
  border:2px solid rgba(255,42,42,.35);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255,176,0,.14), rgba(255,42,42,.10), rgba(0,255,213,.08)),
    rgba(0,0,0,.35);
  position:relative;
}
.marquee:before{
  content:"LCARS // STATUS // ";
  position:absolute;
  left:10px; top:50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(255,176,0,.95);
  letter-spacing: .8px;
  text-shadow: 0 0 10px rgba(255,176,0,.12);
  pointer-events:none;
}
.marquee .track{
  display:flex; gap:55px;
  white-space:nowrap;
  animation: marquee 12s linear infinite;
  padding:8px 10px 8px 160px; /* make room for label */
  font-size: 12px;
}
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* main layout */
.main{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.55fr .95fr;
  gap:12px;
}
@media (max-width: 900px){
  .main{ grid-template-columns: 1fr; }
}

/* panels: harder edges, stronger border, less “soft glow” */
.panel{
  background: rgba(9,6,15,.86);
  border:2px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px var(--shadow);
  padding: 16px 16px;
  position:relative;
  overflow:hidden;
}
.panel:before{
  /* subtle red “energy” highlight */
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(255,42,42,.14), rgba(255,176,0,.10), rgba(255,42,42,.14));
  opacity:.55;
  filter: blur(18px);
  z-index:0;
}
.panel > *{ position:relative; z-index:1; }

/* headings bigger */
h1,h2,h3{ margin: 10px 0 10px 0; }
h1{
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h2{
  font-size: 16px;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .8px;
}
h3{
  font-size: 14px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .6px;
}

p,li{ font-size: 14px; color: var(--text); }
small{ color: var(--muted); }

/* sharper hr */
.hr{
  height:2px;
  background: linear-gradient(90deg, rgba(255,42,42,.75), rgba(255,176,0,.50), rgba(0,255,213,.55));
  opacity:.55;
  margin: 12px 0;
  border-radius: 999px;
}

/* kbd chunkier */
.kbd{
  display:inline-block;
  padding:3px 8px;
  border:2px solid rgba(255,42,42,.28);
  border-bottom-color: rgba(0,0,0,.70);
  border-radius: 4px;
  background: rgba(0,0,0,.35);
  font-size: 12px;
}

/* badges */
.badges{
  display:flex; flex-wrap:wrap; gap:10px;
}
.badges img{
  width: 88px; height: 31px;
  border-radius: 4px;
  border:2px solid rgba(255,42,42,.18);
  image-rendering: pixelated;
}

/* lists */
.ul-compact{ padding-left: 20px; margin: 10px 0; }
.ul-compact li{ margin: 6px 0; }

/* blink effect */
.blink{
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:.12 } }

/* blog cards: sharper */
.card{
  border:2px solid rgba(255,42,42,.18);
  background:
    linear-gradient(180deg, rgba(255,42,42,.09), rgba(0,0,0,0)),
    rgba(0,0,0,.28);
  border-radius: 6px;
  padding: 12px 12px;
  margin: 12px 0;
}
.card a{
  color: var(--cyan);
  text-decoration:none;
}
.card a:hover{ text-decoration:underline; }

/* meta larger */
.meta{
  display:flex; flex-wrap:wrap; gap:12px;
  color: rgba(255,181,181,.95);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* codebox: looks like a “console” */
.codebox{
  border:2px dashed rgba(0,255,213,.35);
  border-radius: 6px;
  background: rgba(0,0,0,.45);
  padding:12px;
  font-size: 13px;
  overflow:auto;
}

/* frame: “panel within panel” */
.frame{
  border:2px solid rgba(255,176,0,.22);
  border-radius: 6px;
  padding: 12px;
  background: rgba(0,0,0,.30);
}

/* tables: sharper + higher contrast */
table{
  width:100%;
  border-collapse:separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 6px;
  border:2px solid rgba(255,42,42,.18);
}
th,td{
  padding:10px 10px;
  font-size: 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
th{
  text-align:left;
  background: rgba(255,42,42,.16);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .7px;
}
tr:hover td{ background: rgba(255,176,0,.06); }

/* footer */
.footer{
  margin-top: 12px;
  text-align:center;
  color: rgba(255,181,181,.95);
  font-size: 12px;
}
.footer a{ color: rgba(255,181,181,.95); }

/* LINKS globally (more readable) */
a{ color: var(--cyan); }
a:hover{ color: var(--amber); }

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  body:before, .marquee .track, .blink{ animation:none !important; }
}