:root{
  --green: #00ff00;
  --green-dim: #9fe89f;
  --bg: #050505;
}
*,*::before,*::after{
  box-sizing:border-box;
  margin:0; padding:0;
  cursor:none !important;
}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--green);
  font-family:"Courier New", monospace;
  overflow:hidden;
  position:relative;
}

/* =========================
   MATRIX CANVAS
========================= */
#matrix{
  position:fixed;
  inset:0;
  z-index:1;
  opacity:0.55;
}

/* =========================
   BOOT OVERLAY
========================= */
#boot-overlay{
  position:fixed;
  inset:0;
  background:#000;
  z-index:20000;
  padding:40px;
  font-size:13px;
  line-height:1.7;
  color:var(--green);
  white-space:pre-wrap;
  overflow:hidden;
  transition:opacity 0.6s ease;
}
#boot-overlay.hidden{
  opacity:0;
  pointer-events:none;
}
#boot-skip{
  position:absolute;
  bottom:24px;
  left:40px;
  font-size:10px;
  letter-spacing:2px;
  color:var(--green-dim);
  opacity:0.5;
  animation:blink 1.2s steps(1) infinite;
}

/* =========================
   STATS PANEL
========================= */
#stats-panel{
  position:fixed;
  top:18px;
  right:18px;
  z-index:50;
  border:1px solid var(--green);
  background:rgba(0,255,0,0.03);
  padding:10px 14px;
  font-size:11px;
  letter-spacing:1px;
  color:var(--green-dim);
  box-shadow:0 0 8px rgba(0,255,0,0.2);
  line-height:1.8;
}
#stats-panel span{ color:var(--green); }

/* =========================
   MAIN CONTENT
========================= */
#main-content{
  position:relative;
  z-index:10;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wrap{
  text-align:center;
  padding:20px;
}
.tag{
  font-size:11px;
  letter-spacing:4px;
  color:var(--green-dim);
  opacity:0.6;
  margin-bottom:18px;
}
h1{
  position:relative;
  font-size:clamp(38px, 9vw, 84px);
  letter-spacing:10px;
  text-shadow:0 0 20px rgba(0,255,0,0.4);
  margin-bottom:14px;
}
h1.glitching::before,
h1.glitching::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0; width:100%;
  overflow:hidden;
}
h1.glitching::before{
  color:#ff2b6b;
  clip-path:inset(0 0 60% 0);
  transform:translate(-3px,-2px);
  mix-blend-mode:screen;
}
h1.glitching::after{
  color:#2bd8ff;
  clip-path:inset(60% 0 0 0);
  transform:translate(3px,2px);
  mix-blend-mode:screen;
}

.cursor-blink{
  display:inline-block;
  width:12px;
  background:var(--green);
  margin-left:4px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.sub{
  font-size:14px;
  letter-spacing:2px;
  color:var(--green-dim);
  opacity:0.8;
  margin-bottom:36px;
}

.bar-wrap{
  width:min(420px, 80vw);
  margin:0 auto 26px;
  border:1px solid var(--green);
  padding:3px;
  box-shadow:0 0 8px rgba(0,255,0,0.2);
}
.bar{
  height:8px;
  background:var(--green);
  width:0%;
  box-shadow:0 0 10px var(--green);
  animation:load 3.5s ease-in-out infinite;
}
@keyframes load{
  0%{ width:4%; }
  50%{ width:78%; }
  100%{ width:4%; }
}

.status{
  font-size:11px;
  letter-spacing:2px;
  color:var(--green-dim);
  opacity:0.55;
}

/* =========================
   TICKER
========================= */
#ticker-wrap{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:50;
  border-top:1px solid var(--green);
  background:rgba(0,0,0,0.7);
  overflow:hidden;
  padding:8px 0;
}
#ticker-track{
  display:inline-flex;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--green-dim);
  animation:ticker 30s linear infinite;
}
#ticker-track span{
  margin-right:60px;
  opacity:0.75;
}
@keyframes ticker{
  from{ transform:translateX(0%); }
  to{ transform:translateX(-50%); }
}

/* =========================
   GLITCH SHAKE (click burst)
========================= */
body.glitch-shake{
  animation:shake 0.25s linear;
}
@keyframes shake{
  0%{ transform:translate(0,0); filter:hue-rotate(0deg); }
  20%{ transform:translate(-4px,2px); filter:hue-rotate(30deg); }
  40%{ transform:translate(4px,-2px); filter:hue-rotate(-30deg); }
  60%{ transform:translate(-3px,-3px); filter:hue-rotate(15deg); }
  80%{ transform:translate(3px,3px); filter:hue-rotate(-15deg); }
  100%{ transform:translate(0,0); filter:hue-rotate(0deg); }
}

/* =========================
   CURSOR + TRAIL
========================= */
.custom-cursor{
  position:fixed;
  width:16px; height:16px;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--green);
  filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 8px var(--green));
}
.custom-cursor::before,.custom-cursor::after{
  content:"";
  position:absolute;
  background:var(--green);
}
.custom-cursor::before{ left:50%; top:-5px; width:1px; height:5px; transform:translateX(-50%); }
.custom-cursor::after{ left:50%; bottom:-5px; width:1px; height:5px; transform:translateX(-50%); }

.trail-dot{
  position:fixed;
  width:4px; height:4px;
  background:var(--green);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  box-shadow:0 0 6px var(--green);
  animation:trailfade 0.5s ease forwards;
}
@keyframes trailfade{
  to{ opacity:0; transform:scale(0.2); }
}

/* =========================
   SCANLINES (front, visible)
========================= */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,0,0.16),
    rgba(0,255,0,0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index:99999;
}