/* 画面全体をうっすら覆う CAUTION オーバーレイ */
#caution-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 140, 0.85); /* うっすら暗くするだけ */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997; /* WARNING(9998)・DANGER(9999) より下 */

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

/* 表示中 */
#caution-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 中央の注意カード */
.caution-content {
  min-width: min(80vw, 420px);
  padding: 30px 8px;
  border-radius: 14px;
  background: #000;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(155, 0, 0, 0.5);
  text-align: center;
  color: #444;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  animation:
    caution-pop 0.18s ease-out,
    caution-pulse 1s ease-in-out infinite;
}

/* CAUTION 文字 */
.caution-label {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #dd0000;/* 前は#b36b00 */
  margin: 0 0 6px 0;
}

/* サブタイトル */
.caution-sub {
  font-size: clamp(13px, 3vw, 18px);
  color: #b36b00;
  margin: 0;
}

/* ふわっと出てくる感じ */
@keyframes caution-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ゆっくり鼓動するような警告 */
@keyframes caution-pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 0, 155, 0.7);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(0, 0, 155, 1);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 0, 155, 0.7);
  }
}


/* 画面全体をうっすら覆う CAUTION オーバーレイ漸化式ガチャ用 */
#caution-overlay-z {
  position: fixed;
  inset: 0;
  background: rgba(140, 20, 20, 0.85); /* うっすら暗くするだけ */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997; /* WARNING(9998)・DANGER(9999) より下 */

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

/* 表示中 */
#caution-overlay-z.active {
  opacity: 1;
  pointer-events: auto;
}

/* 中央の注意カード */
.caution-content-z {
  min-width: min(80vw, 420px);
  padding: 30px 8px;
  border-radius: 14px;
  background: #000;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(155, 0, 0, 0.5);
  text-align: center;
  color: #444;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  animation:
    caution-pop-z 0.18s ease-out,
    caution-pulse-z 1s ease-in-out infinite;
}

/* CAUTION 文字 */
.caution-label-z {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #dd0000;/* 前は#b36b00 */
  margin: 0 0 6px 0;
}

/* サブタイトル */
.caution-sub-z {
  font-size: clamp(13px, 3vw, 18px);
  color: #b36b00;
  margin: 0;
}

/* ふわっと出てくる感じ */
@keyframes caution-pop-z {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ゆっくり鼓動するような警告 */
@keyframes caution-pulse-z {
  0% {
    transform: scale(1);
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(155, 0, 0, 0.7);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(155, 0, 0, 1);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(155, 0, 0, 0.7);
  }
}


/* 画面全体を覆う WARNING オーバーレイ */
#warning-overlay {
  position: fixed;
  inset: 0;
  /* オレンジ系のグラデーション背景 */
  background: radial-gradient(circle at center, #ffd666 0%, #ff8800 40%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998; /* DANGER(9999)より一段低く */

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* 表示中 */
#warning-overlay.active {
  opacity: 0.90;
  pointer-events: auto;
}

/* 中央テキスト */
.warning-content {
  position: relative;
  text-align: center;
  color: #ffffff;
  font-family: "Impact", "Arial Black", system-ui, sans-serif;
  text-shadow: 0 0 8px #ffffff, 0 0 20px #ff8800;

  animation:
    warning-flash 0.18s infinite alternate,
    warning-shake 0.22s infinite;
}

/* WARNING 文字 */
.warning-label {
  font-size: clamp(32px, 10vw, 90px);
  letter-spacing: 0.18em;
  margin: 0 0 8px 0;
}

/* サブタイトル */
.warning-sub {
  font-size: clamp(14px, 2.5vw, 26px);
  margin: 0;
}

/* 点滅（DANGER より少しゆっくり） */
@keyframes warning-flash {
  0% {
    opacity: 0.5;
    text-shadow: 0 0 4px #fff5cc, 0 0 10px #ffbb33;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 12px #ffffff, 0 0 30px #ff8800;
  }
}

/* 揺れは少し控えめ */
@keyframes warning-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -2px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(2px, 2px); }
}

/* 斜めストライプが横に流れるアニメーション */
#warning-overlay::before {
  content: "";
  position: absolute;
  top: -200%;   /* 大きくしておく（動かしても画面が露出しない） */
  left: -200%;
  width: 400%;  /* 画面より大きくしておく */
  height: 400%;
  pointer-events: none;

  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.45) 0px,
    rgba(0, 0, 0, 0.45) 10px,
    transparent 10px,
    transparent 20px
  );

  mix-blend-mode: multiply;

  /* オーバーレイ全体を動かす。背景を動かさない！ */
  animation: warning-stripe-move 1.2s linear infinite;
}

@keyframes warning-stripe-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    /* ストライプ角度と同じ方向へ動かす */
    transform: translate(40px, 40px); 
  }
}


/* 画面全体を覆うDANGERオーバーレイ */
#danger-overlay {
    position: fixed;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 と同じ */
    background: radial-gradient(circle at center, #ff4444 0%, #990000 40%, #000000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

/* 表示中 */
#danger-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 中央のテキスト */
.danger-content {
    text-align: center;
    color: #000;
    font-family: "Impact", "Arial Black", system-ui, sans-serif;
    text-shadow: 0 0 10px #000, 0 0 30px #ff0000;

    animation:
        danger-flash 0.12s infinite alternate,
        danger-shake 0.15s infinite;
}

/* DANGER 文字 */
.danger-label {
    font-size: clamp(40px, 12vw, 120px);
    letter-spacing: 0.2em;
    margin: 0 0 10px 0;
}

/* サブタイトル */
.danger-sub {
    font-size: clamp(16px, 3vw, 32px);
    margin: 0;
}

/* 点滅 + 明滅 */
@keyframes danger-flash {
    0% {
        opacity: 0.4;
        text-shadow: 0 0 5px #ffaaaa, 0 0 10px #cc0000;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 15px #660000, 0 0 40px #cc0000;
    }
}

/* 画面が揺れてる感じ */
@keyframes danger-shake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-2px, 2px) rotate(-1deg);
    }

    50% {
        transform: translate(2px, -2px) rotate(1deg);
    }

    75% {
        transform: translate(-2px, -1px) rotate(0deg);
    }

    100% {
        transform: translate(2px, 2px) rotate(-1deg);
    }
}

/* 画面全体に走るスキャンライン風の演出（お好み） */
#danger-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2) 0px,
            rgba(0, 0, 0, 0.2) 2px,
            transparent 2px,
            transparent 4px);
    mix-blend-mode: multiply;
    pointer-events: none;
    animation: scan-move 0.2s linear infinite;
}

@keyframes scan-move {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}