/* グリッチは世界の異常が起きた台詞に適用する。 */
body.glitching #game-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #d9e3ff15 4px, transparent 5px 8px);
  opacity: 0.3;
  animation: feed-noise 0.7s steps(2) infinite;
}
body.glitching .character-sprite {
  filter: drop-shadow(3px 0 #f04a9b88) drop-shadow(-3px 0 #62d5e888);
}
@keyframes feed-noise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
/* 短い画面の揺れ。台詞と操作ボタンは動かさない。 */
body.shaking .bg-layer,
body.shaking .characters-stage,
body.shaking .event-cg-layer.story-cg { animation: feed-shake 0.38s ease-out 1; }
@keyframes feed-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, 0); }
}
/* アラートのHTMLはindex.htmlに配置する。 */
.system-alert {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #03030799;
}
.system-alert.hidden { display: none; }
.system-alert-window { width: min(440px, 100%); }
@media (prefers-reduced-motion: reduce) {
  body.glitching #game-container::after,
  body.glitching .bg-layer,
  body.shaking .bg-layer,
  body.shaking .characters-stage,
  body.shaking .event-cg-layer.story-cg { animation: none; }
}