/* 全站共用背景與基本樣式設定 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url('./Gbg.png') no-repeat center center fixed;
  background-position: center -220px;
  background-size: cover;
  font-family: 'Press Start 2P', monospace, sans-serif;
  color: #00ccff;
  overflow: hidden;
}

/* 背景特效容器（固定鋪滿） */
#electric-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 粒子層（Canvas） */
#particle-layer {
  position: absolute;
  inset: 0;
}

/* 閃電線條層（SVG） */
#lightning-layer {
  position: absolute;
  inset: 0;
}

/* 掃描線/微閃爍覆蓋層（可關閉註解） */
#scanline-overlay {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: .12;
  animation: flicker 3.2s infinite;
}

/* --- 通用動畫 --- */
@keyframes flicker {
  0%, 100% { opacity: .12; }
  10% { opacity: .18; }
  20% { opacity: .1; }
  30% { opacity: .14; }
  40% { opacity: .12; }
  50% { opacity: .2; }
  60% { opacity: .1; }
  70% { opacity: .16; }
  80% { opacity: .12; }
  90% { opacity: .15; }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 6px #00ffee; }
  50% { box-shadow: 0 0 18px #00ffee; }
  100% { box-shadow: 0 0 6px #00ffee; }
}

/* 共用可用的「發光邊框」工具類 */
.glow-border {
  border: 2px solid #00ccff;
  box-shadow: 0 0 12px #00ffff55;
  animation: glowPulse 2.6s ease-in-out infinite;
}

/* 閃電線條造型（會給 JS 動態套用 stroke-dashoffset） */
.lightning-line {
  fill: none;
  stroke: #9ffaff;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px #9ffaff);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0; /* 平時為 0，閃電時拉高 */
  transition: opacity .15s ease;
}