/* ===== loader.css — ピクセルローダー・読み込みアニメーション ===== */

.pixel-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}

.pixel-loader.done {
  opacity: 0;
}

.pixel-loader-bar {
  display: flex;
  gap: 2px;
}

.pixel-loader-bar span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ddd;
  image-rendering: pixelated;
}

@keyframes pixelSquareOn {
  from { background: #ddd; }
  to   { background: #000; }
}

.pixel-loader-bar span:nth-child(1) { animation: pixelSquareOn 0.05s steps(1)    0ms both; }
.pixel-loader-bar span:nth-child(2) { animation: pixelSquareOn 0.05s steps(1)  250ms both; }
.pixel-loader-bar span:nth-child(3) { animation: pixelSquareOn 0.05s steps(1)  500ms both; }
.pixel-loader-bar span:nth-child(4) { animation: pixelSquareOn 0.05s steps(1)  750ms both; }
.pixel-loader-bar span:nth-child(5) { animation: pixelSquareOn 0.05s steps(1) 1000ms both; }

@keyframes pixelBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.pixel-loader-label {
  font-family: monospace;
  font-size: 0.62rem;
  color: #888;
  letter-spacing: 0.15em;
  animation: pixelBlink 0.5s steps(1) infinite;
}

/* ランダム・共有・更新モーダル用 */
.random-modal-loader {
  position: relative;
  height: 80px;
}

.random-modal-loader .pixel-loader {
  position: absolute;
}

.random-modal-loader .pixel-loader-bar span:nth-child(1) { animation-delay:   0ms; animation-duration: 0.03s; }
.random-modal-loader .pixel-loader-bar span:nth-child(2) { animation-delay:  78ms; animation-duration: 0.03s; }
.random-modal-loader .pixel-loader-bar span:nth-child(3) { animation-delay: 157ms; animation-duration: 0.03s; }
.random-modal-loader .pixel-loader-bar span:nth-child(4) { animation-delay: 236ms; animation-duration: 0.03s; }
.random-modal-loader .pixel-loader-bar span:nth-child(5) { animation-delay: 315ms; animation-duration: 0.03s; }

/* ランダム投稿専用：抽選中っぽいスペシャルアニメーション */
#randomLoaderWrap {
  height: 88px;
}

#randomLoaderWrap .random-special-loader {
  gap: 8px;
}

#randomLoaderWrap .pixel-loader-bar {
  gap: 4px;
}

#randomLoaderWrap .pixel-loader-bar span {
  width: 7px;
  height: 7px;
  animation: pixelShuffleSpecial 0.9s steps(1) infinite;
  background: #ddd;
}

#randomLoaderWrap .pixel-loader-bar span:nth-child(1) { animation-delay: -0.48s; }
#randomLoaderWrap .pixel-loader-bar span:nth-child(2) { animation-delay: -0.36s; }
#randomLoaderWrap .pixel-loader-bar span:nth-child(3) { animation-delay: -0.24s; }
#randomLoaderWrap .pixel-loader-bar span:nth-child(4) { animation-delay: -0.12s; }
#randomLoaderWrap .pixel-loader-bar span:nth-child(5) { animation-delay: -0.00s; }

#randomLoaderWrap .pixel-loader-label {
  color: #555;
  letter-spacing: 0.22em;
}

@keyframes pixelShuffleSpecial {
  0%, 100% {
    background: #ddd;
    transform: translateY(0);
  }
  35% {
    background: #000;
    transform: translateY(-2px);
  }
  50% {
    background: #000;
    transform: translateY(0);
  }
  65% {
    background: #ddd;
    transform: translateY(2px);
  }
}