/* ============================
   GLOBAL
============================ */

body {
  margin: 0;
  background: #000;
  color: #d1d1d1;
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
}

/* 紫ノイズ背景（静的） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(120, 0, 255, 0.15),
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ============================
   BOOT SCREEN
============================ */

.boot-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.boot-lines {
  font-size: 14px;
  color: #39ff14;
}

.line {
  opacity: 0;
  margin: 4px 0;
  animation: showLine 0.6s forwards;
}

.line:nth-child(1) { animation-delay: 0.2s; }
.line:nth-child(2) { animation-delay: 0.8s; }
.line:nth-child(3) { animation-delay: 1.4s; }
.line:nth-child(4) { animation-delay: 2.0s; }
.line:nth-child(5) { animation-delay: 2.6s; }
.line:nth-child(6) { animation-delay: 3.2s; }

@keyframes showLine {
  to { opacity: 1; }
}

/* グリッチ（紫＋緑のズレ） */
.glitch {
  color: #9d4edd;
  text-shadow: 2px 0 #39ff14, -2px 0 #00eaff;
}

/* カーソル */
.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #39ff14;
  animation: blink 0.7s infinite steps(1);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ============================
   MENU SCREEN
============================ */

.menu-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  transition: 0.6s ease;
}

.menu-screen.show {
  opacity: 1;
}

.logo {
  color: #9d4edd;
  font-size: 28px;
  letter-spacing: 0.2em;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmd {
  color: #39ff14;
  text-decoration: none;
  font-size: 18px;
  transition: 0.2s;
}

.cmd:hover {
  color: #9d4edd;
  text-shadow: 0 0 8px #9d4edd;
}

/* ============================
   ノイズ（緑＋紫）
============================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url(noise.gif), url(p-noise.gif);
  background-size: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: noiseMove 0.6s steps(2) infinite;
}

@keyframes noiseMove {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ============================
   強制グリッチ（トップ専用）
============================ */

.glitch-attack {
  animation: glitchAttack 0.25s steps(2) forwards;
}

@keyframes glitchAttack {
  0% {
    transform: translate(0, 0);
    filter: hue-rotate(0deg);
  }
  20% {
    transform: translate(-8px, 4px) skewX(10deg);
    filter: hue-rotate(40deg);
  }
  40% {
    transform: translate(6px, -6px) skewX(-8deg);
    filter: hue-rotate(-40deg);
  }
  60% {
    transform: translate(-4px, 2px) skewX(6deg);
    filter: hue-rotate(20deg);
  }
  80% {
    transform: translate(3px, -3px) skewX(-4deg);
    filter: hue-rotate(-20deg);
  }
  100% {
    transform: translate(0, 0);
    filter: hue-rotate(0deg);
  }
}

.code-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.1) 0px,
    rgba(0, 255, 0, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: rainMove 12s linear infinite;
  opacity: 0.15;
}

@keyframes rainMove {
  from { background-position-y: 0; }
  to { background-position-y: 1000px; }
}
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9998;
}
.noise-bar {
  position: fixed;
  top: -20%;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(255,255,255,0.1);
  filter: blur(8px);
  animation: noiseBarMove 6s infinite;
  pointer-events: none;
}

@keyframes noiseBarMove {
  0% { top: -20%; opacity: 0; }
  10% { top: 10%; opacity: 0.4; }
  20% { top: 40%; opacity: 0.2; }
  30% { top: 70%; opacity: 0.4; }
  40% { top: 100%; opacity: 0; }
  100% { top: -20%; opacity: 0; }
}
.error {
  color: #ff0033;
  text-shadow: 0 0 6px #ff0033;
}
.menu-screen.show .cmd {
  opacity: 0;
  animation: typeIn 0.4s forwards;
}

.menu-screen.show .cmd:nth-child(1) { animation-delay: 0.2s; }
.menu-screen.show .cmd:nth-child(2) { animation-delay: 0.4s; }
.menu-screen.show .cmd:nth-child(3) { animation-delay: 0.6s; }
.menu-screen.show .cmd:nth-child(4) { animation-delay: 0.8s; }

@keyframes typeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.rgb-pop {
  animation: rgbPop 0.4s forwards;
}

@keyframes rgbPop {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(90deg) saturate(200%); }
  100% { filter: hue-rotate(0deg); }
}

.text-glitch {
  position: relative;
  display: inline-block;
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
  pointer-events: none;
}

.text-glitch::before {
  color: #ff00ff;
  transform: translate(2px, -1px);
}

.text-glitch::after {
  color: #39ff14;
  transform: translate(-2px, 1px);
}
.char-fall {
  display: inline-block;
  animation: charFall 0.4s forwards;
}

@keyframes charFall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(20px) rotate(20deg); opacity: 0; }
}