/* ============================================================
     怪異演出（怪異乱入「あり」かつ怪異演出フラグ付きの問題でのみ発生）
     段階1：予兆 .kaii-omen
     段階2：継続 .kaii-bg + .kaii-ambient + .kaii-timer（#app.kaii-active の間）
     段階3：罰   .kaii-punish（data-variant で eye / face / onmyoji を切替）
     ※光過敏性への配慮として、明滅・コマ飛びはいずれも1秒に3回以下に抑えている
     ※このファイルは css/ フォルダにあるため、素材の参照は ../assets/ から始める
     ============================================================ */
  :root{
    --kaii-washi:#efe6d2;
    --kaii-ink:#2a1c14;
    --kaii-shu:#b3261e;
  }

  /* 実写の砂嵐（assets/kaii/static.mp4）。黒い部分を透かして重ねる */
  .kaii-static{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    mix-blend-mode:screen; opacity:.35;
    pointer-events:none;
  }

  /* ---------- 段階2：継続演出 ---------- */
  .kaii-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 55% at 50% 45%, rgba(150,10,24,0.55), transparent 70%),
      linear-gradient(180deg, #3a0309, #16010a 60%, #0a0004);
    opacity:0; transition:opacity 1s ease;
  }
  .kaii-ambient{
    position:fixed; inset:0; z-index:10; pointer-events:none;
    opacity:0; transition:opacity 1s ease;
  }
  .kaii-ambient > div{ position:absolute; inset:0; animation-play-state:paused; }
  #app.kaii-active .kaii-bg,
  #app.kaii-active .kaii-ambient{ opacity:1; }
  /* 罰演出のあと、結果シートを閉じるまで残る余韻 */
  #app.kaii-residue .kaii-bg{ opacity:.55; }
  #app.kaii-residue .kaii-ambient{ opacity:.4; }
  #app.kaii-active .kaii-ambient > div,
  #app.kaii-residue .kaii-ambient > div{ animation-play-state:running; }

  .ka-scan{ background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px); overflow:hidden; }
  .ka-scan::after{
    content:""; position:absolute; left:0; right:0; top:-22%; height:22%;
    background:linear-gradient(180deg, transparent, rgba(255,60,70,.09), transparent);
    animation:kaiiRoll 3.8s linear infinite; animation-play-state:inherit;
  }
  @keyframes kaiiRoll{ to{ transform:translateY(560%); } }
  .kaii-ambient > .ka-tear{
    top:38%; bottom:auto; height:14px;
    background:linear-gradient(90deg, transparent, rgba(255,40,60,.35) 20%, rgba(220,230,255,.25) 50%, rgba(255,40,60,.35) 80%, transparent);
    mix-blend-mode:screen; opacity:0;
    animation:kaiiTear 2.7s steps(1,end) infinite;
  }
  @keyframes kaiiTear{
    0%,100%{ opacity:0; transform:translate(0,0); }
    62%{ opacity:1; transform:translate(-18px,0); }
    66%{ opacity:0; }
    84%{ opacity:.8; transform:translate(24px,190px); }
    87%{ opacity:0; }
  }
  .ka-vignette{
    box-shadow:inset 0 0 120px 40px rgba(110,0,10,.85);
    animation:kaiiVignette 1.8s ease-in-out infinite;
  }
  @keyframes kaiiVignette{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }

  /* 制限時間（残り秒数は旧字体の漢数字） */
  .kaii-timer{ display:none; align-items:center; gap:12px; }
  #app.kaii-active .kaii-timer{ display:flex; }
  .kaii-timer-num{
    font-family:'Yuji Syuku',serif;
    font-size:34px; line-height:1; width:1.2em; text-align:center;
    color:var(--bone);
    text-shadow:0 0 12px rgba(201,42,61,.8);
  }
  .kaii-timer-track{
    flex:1; height:6px; border-radius:3px; overflow:hidden;
    background:rgba(0,0,0,.55);
    box-shadow:0 0 0 1px rgba(139,26,43,.5);
  }
  .kaii-timer-fill{
    height:100%; width:100%;
    background:linear-gradient(90deg, #5a0a14, var(--blood-bright));
    box-shadow:0 0 10px rgba(201,42,61,.9);
  }
  .kaii-timer.danger .kaii-timer-num{ color:#ff3a4a; animation:kaiiDanger 1s ease-in-out infinite; }
  @keyframes kaiiDanger{
    0%,100%{ transform:scale(1); text-shadow:0 0 10px rgba(255,40,60,.6); }
    50%{ transform:scale(1.18); text-shadow:0 0 22px rgba(255,40,60,1); }
  }

  #app.kaii-active .kanji-stage{
    background:radial-gradient(ellipse 90% 80% at 50% 40%, rgba(120,8,20,.55), rgba(20,2,6,.9));
    border-color:var(--blood);
  }
  #app.kaii-active .kanji-main{
    color:#f3e3dc;
    animation:kaiiKanjiGlitch 3.1s steps(1,end) infinite;
  }
  @keyframes kaiiKanjiGlitch{
    0%,100%{ transform:none; text-shadow:0 0 30px rgba(201,42,61,.6); clip-path:none; }
    30%{ transform:translate(-3px,1px) skewX(-6deg); text-shadow:-4px 0 rgba(255,30,50,.9), 4px 0 rgba(60,200,255,.7); }
    33%{ transform:none; text-shadow:0 0 30px rgba(201,42,61,.6); }
    78%{ transform:translate(4px,-2px); text-shadow:5px 0 rgba(255,30,50,.9), -5px 0 rgba(60,200,255,.7); clip-path:inset(20% 0 35% 0); }
    81%{ transform:none; text-shadow:0 0 30px rgba(201,42,61,.6); clip-path:none; }
  }
  #app.kaii-active .choice-btn,
  #app.kaii-active .free-input{ background:rgba(18,4,8,.85); border-color:rgba(139,26,43,.6); }
  #app.kaii-active .progress-label,
  #app.kaii-active .kanji-index{ color:#d9a3a8; }

  /* 時間内に正解した時：上から下へ光が流れ、赤い闇が晴れていく */
  .kaii-purify{
    position:fixed; inset:0; z-index:11; pointer-events:none; opacity:0;
    background:linear-gradient(180deg, transparent 0%, rgba(255,246,220,0) 35%, rgba(255,246,220,.55) 50%, rgba(255,246,220,0) 65%, transparent 100%);
    background-size:100% 300%; background-position:0 100%;
  }
  .kaii-purify.run{ animation:kaiiPurify 1.1s ease-out forwards; }
  @keyframes kaiiPurify{
    0%{ opacity:1; background-position:0 100%; }
    80%{ opacity:1; }
    100%{ opacity:0; background-position:0 0%; }
  }

  /* ---------- 段階1：予兆 ---------- */
  .kaii-omen{
    position:fixed; inset:0; z-index:40;
    display:none; overflow:hidden;
    background:#050203;
    animation:kaiiOmenIn .15s ease-out;
  }
  .kaii-omen.show{ display:block; }
  .kaii-omen.fade-out{ opacity:0; transition:opacity .3s ease; }
  @keyframes kaiiOmenIn{ from{ opacity:0; } to{ opacity:1; } }
  .kaii-omen > div{ position:absolute; inset:0; }
  .ko-red{
    background:radial-gradient(ellipse 80% 70% at 50% 50%, #b3121f, #5a0209 70%, #200005);
    opacity:0;
    animation:kaiiOmenRed 2.2s ease-in forwards;
  }
  @keyframes kaiiOmenRed{ 0%,14%{ opacity:0; } 70%,100%{ opacity:1; } }
  .kaii-omen > .kaii-static{ opacity:.55; }
  .ko-slices span{
    position:absolute; left:-10%; right:-10%;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,220,220,.28), rgba(255,40,60,.35), rgba(255,255,255,0));
    mix-blend-mode:screen;
    animation:kaiiSlice .7s steps(1,end) infinite;
  }
  .ko-slices span:nth-child(1){ top:8%;  height:3%;  animation-delay:-.1s; }
  .ko-slices span:nth-child(2){ top:21%; height:1.5%; animation-delay:-.45s; }
  .ko-slices span:nth-child(3){ top:37%; height:5%;  animation-delay:-.25s; }
  .ko-slices span:nth-child(4){ top:55%; height:2%;  animation-delay:-.6s; }
  .ko-slices span:nth-child(5){ top:71%; height:4%;  animation-delay:-.05s; }
  .ko-slices span:nth-child(6){ top:88%; height:2.5%; animation-delay:-.35s; }
  @keyframes kaiiSlice{
    0%{ transform:translateX(-12%); opacity:.9; }
    33%{ transform:translateX(9%); opacity:.4; }
    66%{ transform:translateX(-4%); opacity:0; }
    100%{ transform:translateX(-12%); opacity:.9; }
  }
  .ko-text{
    display:flex; align-items:center; justify-content:center;
    font-family:'Yuji Syuku',serif;
    font-size:clamp(34px, 11vw, 56px); letter-spacing:.2em;
    color:#120003;
    text-shadow:-2px 0 rgba(255,60,80,.6), 2px 0 rgba(80,200,255,.35), 0 0 24px rgba(0,0,0,.6);
    opacity:0;
    animation:kaiiOmenText 2.2s ease forwards;
  }
  @keyframes kaiiOmenText{
    0%,42%{ opacity:0; filter:blur(10px); transform:scale(1.15); }
    70%{ opacity:1; filter:blur(0); transform:scale(1); }
    90%{ opacity:1; filter:blur(0); transform:scale(1); }
    100%{ opacity:0; filter:blur(4px); transform:scale(.96); }
  }

  /* ---------- 段階3：罰（共通） ---------- */
  .kaii-punish{
    position:fixed; inset:0; z-index:50;
    display:none; overflow:hidden;
    background:#000;
  }
  .kaii-punish.show{ display:block; }
  .kaii-punish.fade-out{ opacity:0; transition:opacity .35s ease; }
  .kp-scene{
    position:absolute; inset:0;
    display:none; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .kaii-punish[data-variant="eye"] .kp-eye,
  .kaii-punish[data-variant="face"] .kp-face,
  .kaii-punish[data-variant="onmyoji"] .kp-onmyoji{ display:flex; }

  /* ---------- 罰1：一つ目（Runwayで生成した動画を画面いっぱいに流す） ----------
     白い女と同じく横長の動画を画面いっぱいに広げる。怪物も目も中央にある。
     data-phase：video（動画）→ black（動画を隠して黒画面） */
  .kp-video{ display:block; }
  .kp-eye{ background:#000; }
  .kp-eye-video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
  }
  .kp-eye[data-phase="black"] .kp-eye-video{ visibility:hidden; }

  /* ---------- 罰2：白い女（Runwayで生成した動画を画面いっぱいに流す） ----------
     横長の動画を画面いっぱいに広げる。スマホの縦画面では左右が切れるが、女のシルエットも顔も中央にある */
  .kp-face{ background:#000; }
  .kp-face-video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
  }

  /* ---------- 罰3：陰陽師の霊（Runwayで生成した動画を画面いっぱいに流す） ----------
     白い女と同じく横長の動画を画面いっぱいに広げる。陰陽師は中央に立っている。
     data-phase：video（動画）→ black（動画を隠して黒画面） */
  .kp-onmyoji{ background:#000; }
  .kp-onmyoji-video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
  }
  .kp-onmyoji[data-phase="black"] .kp-onmyoji-video{ visibility:hidden; }

  /* ---------- 怪異乱入時の結果シート ---------- */
  .feedback-sheet{ position:relative; }
  .fb-seal, .fb-drips, .fb-kaii-note{ display:none; }
  .feedback-overlay.kaii-purified .fb-kaii-note,
  .feedback-overlay.kaii-cursed .fb-kaii-note{ display:block; }

  /* 時間内に正解：白い和紙のお札風 */
  .feedback-overlay.kaii-purified{ background:rgba(20,16,10,.45); }
  .feedback-overlay.kaii-purified .feedback-sheet{
    background:radial-gradient(ellipse 120% 80% at 50% 0%, #f6efe0, #e6dbc3 70%, #d8caac);
    color:var(--kaii-ink);
    border-top:3px solid var(--kaii-shu);
    box-shadow:0 -10px 40px rgba(255,240,200,.18);
  }
  .kaii-purified .fb-result{ color:#7a1414; font-size:26px; letter-spacing:.12em; margin-bottom:4px; }
  .kaii-purified .fb-kaii-note{ font-size:12.5px; color:#6a4a3a; margin-bottom:14px; letter-spacing:.06em; }
  .kaii-purified .fb-reading{ color:#5a4636; }
  .kaii-purified .fb-reading b{ color:#1a0f0a; }
  .kaii-purified .fb-trivia-label{ color:#7a4f8a; }
  .kaii-purified .fb-trivia{ background:rgba(90,60,30,.07); border-left-color:var(--kaii-shu); color:var(--kaii-ink); }  .kaii-purified .fb-seal{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:35px; right:50px;
    width:56px; height:56px;
    border:2px solid var(--kaii-shu); border-radius:4px;
    color:var(--kaii-shu);
    font-family:'Yuji Syuku',serif; font-size:40px;
    transform:rotate(-8deg); opacity:.85;
    animation:kaiiSealStamp .4s cubic-bezier(.5,0,.8,.4) .25s both;
  }
  @keyframes kaiiSealStamp{
    from{ opacity:0; transform:rotate(-8deg) scale(1.8); }
    to{ opacity:.85; transform:rotate(-8deg) scale(1); }
  }

  /* 不正解・時間切れ：黒と赤、上端から血が垂れる */
  .feedback-overlay.kaii-cursed{ background:rgba(30,0,4,.6); }
  .feedback-overlay.kaii-cursed .feedback-sheet{
    background:linear-gradient(180deg, #22040a, #0d0205 60%);
    border-top:1px solid var(--blood-bright);
    box-shadow:0 -10px 50px rgba(201,42,61,.25);
  }
  .feedback-overlay.kaii-cursed.show .feedback-sheet{ animation:kaiiSheetShudder .45s ease-out .1s; }
  @keyframes kaiiSheetShudder{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-6px,0); }
    40%{ transform:translate(5px,0); }
    60%{ transform:translate(-3px,0); }
    80%{ transform:translate(2px,0); }
  }
  .kaii-cursed .fb-result{
    color:#ff3a4a; font-size:26px; letter-spacing:.1em; margin-bottom:4px;
    text-shadow:-2px 0 rgba(255,30,50,.5), 2px 0 rgba(60,200,255,.3), 0 0 18px rgba(255,40,60,.6);
  }
  .kaii-cursed .fb-kaii-note{ font-size:12.5px; color:#c98a90; margin-bottom:14px; letter-spacing:.06em; }
  .kaii-cursed .fb-trivia{ background:rgba(0,0,0,.35); border-left-color:var(--blood-bright); }  .kaii-cursed .fb-drips{ display:block; position:absolute; top:0; left:0; right:0; height:0; pointer-events:none; }
  .kaii-cursed .fb-drips::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:#8b1a2b; }
  .fb-drips span{
    position:absolute; top:0; left:var(--x);
    width:var(--w); height:0;
    border-radius:0 0 999px 999px;
    background:linear-gradient(180deg, #8b1a2b, #5a0a14);
    box-shadow:0 0 6px rgba(139,26,43,.6);
  }
  .kaii-cursed.show .fb-drips span{ animation:kaiiDrip 1.6s ease-in var(--d) forwards; }
  @keyframes kaiiDrip{ to{ height:var(--h); } }

  /* ---------- 視差効果を減らす設定：揺れ・歪み・コマ飛びを止め、フェード中心にする ---------- */
  @media (prefers-reduced-motion: reduce){
    .ka-scan::after, .ka-vignette{ animation:none !important; }
    .kaii-ambient > .ka-tear, .ko-slices{ display:none; }
    #app.kaii-active .kanji-main{ animation:none; text-shadow:-2px 0 rgba(255,30,50,.7), 2px 0 rgba(60,200,255,.5); }
    .kaii-timer.danger .kaii-timer-num{ animation:none; }
    .ko-text{ animation:kaiiFadeInRM 2.2s ease forwards; }
    .kaii-purify.run{ animation:none; }
    .kaii-purified .fb-seal{ animation:none; }
    .feedback-overlay.kaii-cursed.show .feedback-sheet{ animation:none; }
    .kaii-cursed.show .fb-drips span{ animation:none; height:var(--h); }
  }
  @keyframes kaiiFadeInRM{ 0%,10%{ opacity:0; } 45%,100%{ opacity:1; } }