/* =========================
   BASE
========================= */

body{
  margin:0;
  background:#000;
  color:#00ff55;
  font-family:'Orbitron', sans-serif;
  overflow:hidden;
}

/* =========================
   LOADING
========================= */

#loading{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  z-index:9999;
}

.load-box{
  text-align:center;
}

.bar{
  width:300px;
  height:10px;
  border:1px solid #00ff55;
  margin-top:10px;
}

#bar{
  width:0%;
  height:100%;
  background:#00ff55;
}

#percent{
  margin-top:10px;
  font-size:14px;
}

/* ローディング文字アニメ */
.load-box p{
  color:#00ff55;
  letter-spacing:3px;
  animation: loadingBlink 1.2s infinite;
}

@keyframes loadingBlink{
  0%{opacity:0.3; text-shadow:0 0 2px #00ff55;}
  25%{opacity:1; text-shadow:0 0 8px #00ff55;}
  50%{opacity:0.4;}
  75%{opacity:1;}
  100%{opacity:0.3;}
}

/* =========================
   TOP LAYOUT
========================= */

.top{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:30px;
}

.hidden{
  display:none;
}

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

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

.menu a{
  color:#00ff55;
  text-decoration:none;
  font-size:18px;
}

/* =========================
   PAGES
========================= */

.page{
  display:none;
  position:fixed;
  inset:0;
  background:#000;
  padding:40px;
}

/* =========================
   WINDOW UI（PROFILE用）
========================= */

.window{
  border:1px solid #00ff55;
  width:min(600px,90%);
  margin:0 auto;
  box-shadow:0 0 15px rgba(0,255,85,0.2);
}

.titlebar{
  padding:8px 12px;
  border-bottom:1px solid #00ff55;
  font-size:14px;
  opacity:0.8;
}

.content{
  padding:20px;
  font-size:14px;
  line-height:1.6;
}

.content p{
  margin-bottom:8px;
}

/* =========================
   LOGO（完全整理版）
========================= */

.logo{
  position:relative;
  font-size:80px;
  font-weight:900;
  letter-spacing:6px;
  color:#00ff55;
  text-shadow:0 0 10px #00ff55;

  opacity:0;
  transform:translateY(20px) scale(0.9);

  animation: logoBoot 1.2s ease forwards;
}

/* 起動アニメ（1回だけ） */
@keyframes logoBoot{
  0%{
    opacity:0;
    transform:translateY(20px) scale(0.9);
    filter:blur(6px);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.02);
    filter:blur(1px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* グリッチレイヤー */
.logo::before,
.logo::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.logo::before{
  color:#ff00ff;
  transform:translateX(-2px);
  opacity:0.35;
  mix-blend-mode:screen;
  animation: glitchA 3s infinite;
}

.logo::after{
  color:#00ffff;
  transform:translateX(2px);
  opacity:0.35;
  mix-blend-mode:screen;
  animation: glitchB 2.5s infinite;
}

/* グリッチ動作 */
@keyframes glitchA{
  0%,90%,100%{transform:translateX(-2px);}
  91%{transform:translateX(-4px);}
  92%{transform:translateX(1px);}
}

@keyframes glitchB{
  0%,90%,100%{transform:translateX(2px);}
  91%{transform:translateX(4px);}
  92%{transform:translateX(-1px);}
}

/* =========================
   CRT EFFECT（ノイズ＋走査線）
========================= */

/* ノイズ */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:0.06;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  animation: noiseMove 0.2s infinite;
}

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

/* 走査線 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );

  opacity:0.3;
  animation: scanMove 6s linear infinite;
}

@keyframes scanMove{
  0%{transform:translateY(0);}
  100%{transform:translateY(6px);}
}

body{
  margin:0;
  background:#000;
  color:#00ff55;
  font-family:'Orbitron', sans-serif;

  overflow:auto; /* ←ここだけ重要 */
}

.page{
  display:none;
  position:fixed;
  inset:0;

  padding:40px;
  overflow-y:auto;
  box-sizing:border-box;
}