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

:root {
  --g:    #00ff41;
  --g2:   #00cc33;
  --g3:   #007a1f;
  --g4:   #003d10;
  --bg:   #040804;
  --red:  #ff3b3b;
  --glow-sm: 0 0 6px #00ff41, 0 0 12px rgba(0,255,65,.45);
  --glow-lg: 0 0 8px #00ff41, 0 0 18px #00ff41, 0 0 36px rgba(0,255,65,.55), 0 0 70px rgba(0,255,65,.25);
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--g);
  font-family: 'Courier New', Courier, monospace;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── CRT scanlines ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px
  );
  pointer-events: none; z-index: 200;
}

/* ── CRT vignette + slow flicker ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.8) 100%);
  pointer-events: none; z-index: 199;
  animation: crtFlicker 9s infinite;
}

@keyframes crtFlicker {
  0%,100%  { opacity: 1   }
  93%      { opacity: 1   }
  93.4%    { opacity: .65 }
  93.8%    { opacity: 1   }
  96.5%    { opacity: .82 }
  96.9%    { opacity: 1   }
}

/* ── CRT power-on ── */
.wrap {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 1.1rem; padding: 2rem;
  animation: powerOn 1.3s cubic-bezier(.15,0,.85,1) both;
}

@keyframes powerOn {
  0%   { transform: scaleY(.003) scaleX(1);    filter: brightness(9); opacity: .2; }
  10%  { transform: scaleY(.003) scaleX(1.1);  filter: brightness(9); }
  40%  { transform: scaleY(1)    scaleX(1.04); filter: brightness(1.8); }
  100% { transform: scaleY(1)    scaleX(1);    filter: brightness(1); opacity: 1; }
}

/* ── Nedry scene ── */
.scene {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
}

.face {
  font-size: clamp(.48rem, 1.15vw, .78rem);
  line-height: 1.22;
  white-space: pre;
  color: var(--g);
  text-shadow: var(--glow-sm);
  animation: faceGlow 2.8s ease-in-out infinite alternate;
}

@keyframes faceGlow {
  from { text-shadow: var(--glow-sm); }
  to   { text-shadow: var(--glow-lg); }
}

.face.headshake {
  animation: headShake .6s ease-in-out, faceGlow 2.8s ease-in-out infinite alternate;
}
@keyframes headShake {
  0%,100% { transform: translateX(0) rotate(0deg) }
  12%  { transform: translateX(-8px) rotate(-3deg) }
  25%  { transform: translateX(8px)  rotate(3deg) }
  37%  { transform: translateX(-8px) rotate(-3deg) }
  50%  { transform: translateX(8px)  rotate(3deg) }
  62%  { transform: translateX(-5px) rotate(-1.5deg) }
  75%  { transform: translateX(5px)  rotate(1.5deg) }
  87%  { transform: translateX(-2px) }
}

.finger {
  font-size: clamp(.48rem, 1.15vw, .78rem);
  line-height: 1.22;
  white-space: pre;
  color: var(--g);
  text-shadow: var(--glow-sm);
  transform-origin: 50% 100%;
  animation: wagFinger .85s ease-in-out infinite;
  align-self: flex-start;
  margin-top: .8rem;
}
@keyframes wagFinger {
  0%,100% { transform: rotate(-22deg) translate(-3px, 2px); }
  50%     { transform: rotate(12deg)  translate(3px, -2px); }
}

/* ── AH AH AH ── */
.ah {
  font-size: clamp(1.8rem, 6.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: .4em;
  color: var(--g);
  text-shadow: var(--glow-lg);
  animation: ahFlicker 5s infinite;
}
@keyframes ahFlicker {
  0%,100%  { opacity: 1    }
  16%      { opacity: 1    }
  16.4%    { opacity: .55  }
  16.8%    { opacity: 1    }
  50%      { opacity: 1    }
  50.3%    { opacity: .75  }
  50.6%    { opacity: 1    }
  78%      { opacity: 1    }
  78.2%    { opacity: .45  }
  78.6%    { opacity: 1    }
}

/* ── Magic word line ── */
.magic {
  font-size: clamp(.8rem, 2.4vw, 1.25rem);
  color: var(--g2);
  text-shadow: 0 0 5px var(--g2), 0 0 10px rgba(0,204,51,.35);
  letter-spacing: .1em;
}

.cursor {
  display: inline-block;
  width: .55em; height: 1.15em;
  background: var(--g);
  vertical-align: middle;
  margin-left: 3px;
  box-shadow: 0 0 6px var(--g), 0 0 14px rgba(0,255,65,.5);
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── PLEASE button ── */
.btn {
  padding: .6em 3em;
  background: transparent;
  border: 2px solid var(--g3);
  color: var(--g);
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(.8rem, 1.9vw, 1rem);
  letter-spacing: .5em;
  cursor: pointer;
  text-shadow: 0 0 5px var(--g);
  box-shadow: 0 0 8px rgba(0,255,65,.18), inset 0 0 8px rgba(0,255,65,.04);
  transition: border-color .12s, box-shadow .12s, background .12s;
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,65,.14), transparent);
  transition: left .32s;
}
.btn:hover {
  border-color: var(--g);
  background: rgba(0,255,65,.06);
  box-shadow: 0 0 20px rgba(0,255,65,.55), 0 0 40px rgba(0,255,65,.22), inset 0 0 15px rgba(0,255,65,.07);
}
.btn:hover::after { left: 100%; }
.btn:active { transform: scale(.96); }

.btn.shake {
  animation: btnShake .6s ease-in-out;
}
@keyframes btnShake {
  0%,100% { transform: translateX(0) rotate(0deg) }
  10%  { transform: translateX(-10px) rotate(-2.5deg) }
  20%  { transform: translateX(10px)  rotate(2.5deg) }
  30%  { transform: translateX(-10px) rotate(-2.5deg) }
  40%  { transform: translateX(10px)  rotate(2.5deg) }
  55%  { transform: translateX(-6px)  rotate(-1deg) }
  70%  { transform: translateX(6px)   rotate(1deg) }
  85%  { transform: translateX(-2px) }
}

/* ── Nope ── */
.nope {
  height: 1.5em;
  font-size: clamp(.7rem, 1.7vw, .9rem);
  color: var(--red);
  text-shadow: 0 0 6px var(--red), 0 0 14px rgba(255,59,59,.4);
  letter-spacing: .3em;
  opacity: 0;
  transition: opacity .15s;
}
.nope.show { opacity: 1; }

/* ── Status bar ── */
.status {
  font-size: .58rem;
  color: var(--g4);
  letter-spacing: .2em;
  opacity: .8;
  text-shadow: 0 0 4px rgba(0,61,16,.8);
}