/* ===== コンボで変わる背景のテーマ (fx_combo_theme.js、2026-10-09) =====
   ・.ct-back: 宇宙背景の直上・コックピット枠の下(z-index:0)。.ct-front: コックピット枠の上・問題の下(z-index:1)。
   ・段階は .ct-s1〜.ct-s4(コンボ5/10/20/30)。正解のたびに .ct-hit、ミスで .ct-drop(静かに戻る)。
   ・速い明滅は入れない(動きは1秒以上の周期。正解の一押しも 0.5 秒の弱い光)。transform/opacity 中心。
   ・color-mix・cqw は使わない(iOS 15)。 */
.ct-back, .ct-front { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ct-back { z-index: 0; }
.ct-front { z-index: 1; }
.ct-back *, .ct-front * { pointer-events: none; }
.ct-back > div, .ct-front > div { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease, transform 1s ease; }
.ct-drop > div { transition-duration: .35s; }

/* 問題と選択肢のまわりを暗く落とす(段階2から) */
.ct-scrim { background: radial-gradient(ellipse 85% 48% at 50% 44%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15) 70%, transparent 100%); }
.ct-front.ct-s2 .ct-scrim { opacity: 1; }
.ct-front.ct-dimension.ct-s2 .ct-scrim { background: radial-gradient(ellipse 85% 48% at 50% 44%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .25) 70%, transparent 100%); }

/* 正解のたびの一押し(弱い光が0.5秒で消える。色はテーマごと) */
.ct-back.ct-s1.ct-hit::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, var(--ct-hit, rgba(255, 255, 255, .25)), transparent 60%); animation: ctHit .5s ease-out both; }
@keyframes ctHit { from { opacity: 1; } to { opacity: 0; } }

/* テーマ名の帯(最後の段階に届いたとき、ヘッダー直下に約1.6秒) */
.ct-banner { position: fixed; left: 0; right: 0; height: 40px; z-index: 515; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(6, 10, 30, .94) 12%, rgba(6, 10, 30, .94) 88%, transparent); border-block: 2px solid var(--ct-c, #8fd8ff); animation: ctBanner 1.6s ease both; }
.ct-banner span { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: .2em; color: #fff; text-shadow: 0 0 8px var(--ct-c, #8fd8ff), 0 0 20px var(--ct-c, #8fd8ff); }
.ct-banner.ct-hyperdrive { --ct-c: #6fd6ff; }
.ct-banner.ct-blackhole { --ct-c: #ff9a3c; }
.ct-banner.ct-supernova { --ct-c: #ffc23f; }
.ct-banner.ct-dimension { --ct-c: #ff5ad6; border-image: linear-gradient(90deg, #ff2bd6, #00e5ff, #b6ff00, #ff8a00) 1; }
@keyframes ctBanner { 0% { opacity: 0; transform: scaleX(0); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* ===== ハイパードライブ: 星が流れ → 光のリングのトンネル → 青く速く → 白いトンネルと仲間の機体 ===== */
.ct-back.ct-hyperdrive { --ct-hit: rgba(140, 210, 255, .35); }
.ct-hyperdrive .ct-tint { background: radial-gradient(circle at 50% 40%, rgba(40, 90, 255, 0), rgba(30, 80, 255, .38)); }
.ct-hyperdrive.ct-s3 .ct-tint { opacity: 1; }
.ct-streak { position: absolute; left: 50%; top: 40%; width: 3px; height: var(--len); border-radius: 2px; background: linear-gradient(transparent, #e8f6ff); box-shadow: 0 0 6px rgba(120, 200, 255, .9); transform-origin: 50% 0;
  animation: ctStreak 1.4s linear infinite; animation-delay: var(--dl); }
@keyframes ctStreak {
  from { transform: rotate(var(--a)) translateY(30px) scaleY(.3); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: rotate(var(--a)) translateY(560px) scaleY(1.6); opacity: 0; }
}
.ct-hyperdrive.ct-s1 .ct-streaks { opacity: .85; }
.ct-hyperdrive.ct-s2 .ct-streaks { opacity: 1; }
.ct-hyperdrive.ct-s2 .ct-streak { animation-duration: 1s; }
.ct-hyperdrive.ct-s3 .ct-streaks { opacity: 1; animation: ctJitter 1.2s ease-in-out infinite; }
.ct-hyperdrive.ct-s3 .ct-streak { animation-duration: .7s; width: 4px; }
.ct-hyperdrive.ct-s4 .ct-streak { animation-duration: .5s; }
@keyframes ctJitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); } 50% { transform: translate(-1px, 1.5px); } 75% { transform: translate(1px, 1px); } }
.ct-rings i { position: absolute; left: 50%; top: 40%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%;
  border: 2px solid rgba(130, 205, 255, .75); box-shadow: 0 0 18px rgba(80, 170, 255, .6), inset 0 0 18px rgba(80, 170, 255, .4); opacity: 0; animation: ctRing 1.6s ease-in infinite; }
.ct-rings i:nth-child(2) { animation-delay: -.4s; }
.ct-rings i:nth-child(3) { animation-delay: -.8s; }
.ct-rings i:nth-child(4) { animation-delay: -1.2s; }
@keyframes ctRing { from { transform: scale(.08); opacity: 0; } 30% { opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.ct-hyperdrive.ct-s2 .ct-rings { opacity: 1; }
.ct-hyperdrive.ct-s4 .ct-rings i { animation-duration: 1.1s; border-color: rgba(235, 248, 255, .9); }
.ct-hyperdrive .ct-core { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .9), rgba(150, 215, 255, .55) 12%, rgba(60, 120, 255, .15) 32%, transparent 48%); }
.ct-hyperdrive.ct-s4 .ct-core { opacity: 1; animation: ctCore 1.6s ease-in-out infinite alternate; }
@keyframes ctCore { from { transform: scale(.92); } to { transform: scale(1.08); } }
.ct-front .ct-wing { width: 58px; height: auto; top: 19%; bottom: auto; inset-inline: auto; opacity: 0; }
.ct-wing img { width: 100%; display: block; filter: drop-shadow(0 0 6px #7fd2ff); }
.ct-front .ct-wing-l { left: -80px; right: auto; }
.ct-front .ct-wing-r { right: -80px; left: auto; transform: scaleX(-1); }
.ct-hyperdrive.ct-s4 .ct-wing-l { left: 3%; opacity: .9; animation: ctBob 1.8s ease-in-out infinite alternate; }
.ct-hyperdrive.ct-s4 .ct-wing-r { right: 3%; opacity: .9; animation: ctBobR 1.8s ease-in-out infinite alternate; }
.ct-front .ct-wing { transition: left 1s cubic-bezier(.2, .8, .2, 1), right 1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
@keyframes ctBob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes ctBobR { from { transform: scaleX(-1) translateY(-4px); } to { transform: scaleX(-1) translateY(4px); } }

/* ===== ブラックホール突入: 遠くの黒い点 → 光が曲がり引き伸ばされる → 光る降着円盤と渦 → 光の輪をくぐり白い光の向こうへ =====
   穴は画面上部(50% 18%)。大きな要素は回転だけ(CSS)。白い光は10秒周期でゆっくり満ち引きし、問題の文字が読める明るさに抑える */
.ct-back.ct-blackhole { --ct-hit: rgba(255, 170, 90, .28); }
.ct-blackhole .ct-hole, .ct-blackhole .ct-ripple, .ct-blackhole .ct-lens { inset: auto; left: 50%; top: 18%; width: 0; height: 0; }
.ct-blackhole .ct-hole *, .ct-blackhole .ct-ripple *, .ct-blackhole .ct-lens * { position: absolute; display: block; opacity: 0; transition: opacity .8s ease, transform 1s ease; }
.ct-drop .ct-hole *, .ct-drop .ct-lens * { transition-duration: .35s; }
.ct-blackhole .ct-tint { background: radial-gradient(ellipse 90% 40% at 50% 18%, rgba(70, 30, 140, .38), transparent 75%); }
.ct-blackhole.ct-s2 .ct-tint { opacity: 1; }
.ct-blackhole.ct-s1 .ct-hole, .ct-blackhole.ct-s1 .ct-ripple { opacity: 1; }
.ct-blackhole.ct-s2 .ct-lens { opacity: 1; }
/* 事象の地平線(黒い穴) */
.ct-eh { left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #000; box-shadow: 0 0 10px 3px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 180, 100, .35); transform: scale(.5); }
.ct-blackhole.ct-s1 .ct-eh { opacity: 1; }
.ct-blackhole.ct-s2 .ct-eh { transform: scale(.8); }
.ct-blackhole.ct-s3 .ct-eh { transform: scale(1); }
.ct-blackhole.ct-s4 .ct-eh { transform: scale(1.25); }
/* 穴のまわりのかすかな揺らぎ */
.ct-halo { left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, transparent 32%, rgba(130, 160, 255, .28) 48%, transparent 70%); }
.ct-blackhole.ct-s1 .ct-halo { opacity: .9; animation: ctBhHalo 4s ease-in-out infinite alternate; }
@keyframes ctBhHalo { from { transform: scale(.9); } to { transform: scale(1.12); } }
.ct-ripple i { left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(190, 215, 255, .5); opacity: 0; animation: ctBhRipple 4s ease-out infinite; }
.ct-ripple i:nth-child(2) { animation-delay: -2s; }
@keyframes ctBhRipple { from { transform: scale(.3); opacity: 0; } 25% { opacity: .55; } to { transform: scale(2.2); opacity: 0; } }
/* 重力レンズ: 星の光が穴へ向かう筋と、穴を回りこむ光の弧 */
.ct-blackhole .ct-pull, .ct-blackhole .ct-swirl { inset: auto; left: 50%; top: 18%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; }
.ct-pull { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(215, 232, 255, .6) 0 .5deg, transparent .5deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 55px, #000 130px, transparent 520px); mask-image: radial-gradient(circle at 50% 50%, transparent 0 55px, #000 130px, transparent 520px); }
.ct-blackhole.ct-s2 .ct-pull { opacity: .75; animation: ctSpin 120s linear infinite; }
.ct-blackhole.ct-s3 .ct-pull { opacity: .9; animation-duration: 60s; }
.ct-blackhole.ct-s4 .ct-pull { opacity: 1; animation-duration: 30s; }
.ct-lens i { border-radius: 50%; border: 2px solid transparent; }
.ct-lens i:nth-child(1) { left: -52px; top: -52px; width: 104px; height: 104px; border-top-color: rgba(200, 225, 255, .85); border-left-color: rgba(200, 225, 255, .25); box-shadow: 0 -2px 8px rgba(150, 190, 255, .5); animation: ctSpin 16s linear infinite; }
.ct-lens i:nth-child(2) { left: -84px; top: -84px; width: 168px; height: 168px; border-bottom-color: rgba(190, 210, 255, .6); border-right-color: rgba(190, 210, 255, .2); animation: ctSpinR 24s linear infinite; }
.ct-blackhole.ct-s2 .ct-lens i { opacity: 1; }
/* 降着円盤(オレンジ〜白の輪。外側のラッパーで傾け、内側だけ回す)と渦 */
.ct-diskwrap { left: -115px; top: -115px; width: 230px; height: 230px; transform: rotate(-14deg) scaleY(.28); }
.ct-disk { inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe2b0, #ff7a1c 60deg, rgba(255, 70, 10, .55) 140deg, #fff3d6 200deg, #ff9a3c 270deg, #ffe2b0 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 27%, #000 35%, #000 58%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, transparent 0 27%, #000 35%, #000 58%, transparent 70%);
  animation: ctSpin 6s linear infinite; }
.ct-blackhole.ct-s3 .ct-diskwrap { opacity: .95; }
.ct-blackhole.ct-s4 .ct-diskwrap { opacity: .8; }
.ct-blackhole.ct-s3 .ct-disk, .ct-blackhole.ct-s4 .ct-disk { opacity: 1; }
.ct-blackhole.ct-s4 .ct-disk { animation-duration: 3.5s; }
.ct-swirl { background: conic-gradient(from 0deg at 50% 50%, rgba(150, 70, 255, .34), transparent 50deg, rgba(255, 130, 40, .26) 120deg, transparent 170deg, rgba(150, 70, 255, .34) 200deg, transparent 250deg, rgba(255, 130, 40, .26) 300deg, transparent 350deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 50px, #000 150px, transparent 540px); mask-image: radial-gradient(circle at 50% 50%, transparent 0 50px, #000 150px, transparent 540px); }
.ct-blackhole.ct-s3 .ct-swirl { opacity: 1; animation: ctSpinR 20s linear infinite; }
.ct-blackhole.ct-s4 .ct-swirl { opacity: 1; animation: ctSpinR 11s linear infinite; }
/* フォトンリング(光の輪)。段階4で穴が近づき、輪が大きくなる */
.ct-photon { left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 238, 205, .95);
  box-shadow: 0 0 10px #ffb060, 0 0 24px rgba(255, 140, 40, .7), inset 0 0 8px rgba(255, 200, 120, .6); transform: scale(.8); }
.ct-blackhole.ct-s3 .ct-photon { opacity: .7; transform: scale(1); }
.ct-blackhole.ct-s4 .ct-photon { opacity: .95; transform: scale(1.5); animation: ctBhPhoton 3s ease-in-out infinite alternate; }
@keyframes ctBhPhoton { from { transform: scale(1.5); } to { transform: scale(1.75); } }
.ct-blackhole.ct-s4 .ct-hole { transform: scale(2.6); transition: opacity .8s ease, transform 4s cubic-bezier(.45, 0, .7, .5); }
/* 向こう側の白い光(10秒周期でゆっくり満ちて引く。最大でも中央上が明るいだけ) */
.ct-light { background: radial-gradient(circle 300px at 50% 18%, rgba(255, 248, 230, .85), rgba(255, 205, 140, .3) 40%, transparent 100%); }
.ct-blackhole.ct-s4 .ct-light { animation: ctBhLight 10s ease-in-out infinite; }
@keyframes ctBhLight { 0% { opacity: 0; } 50% { opacity: .55; } 100% { opacity: 0; } }
/* 正解のたびの反応: 円盤がふっと明るくなり、穴のまわりがふくらむ */
.ct-blackhole.ct-hit .ct-diskwrap { animation: ctBhHit .7s ease-out both; }
@keyframes ctBhHit { from { filter: brightness(2); } to { filter: brightness(1); } }
.ct-blackhole.ct-s2.ct-hit .ct-halo { animation: ctBhHaloHit .7s ease-out both; }
@keyframes ctBhHaloHit { from { transform: scale(1.4); } to { transform: scale(1); } }

/* ===== スーパーノヴァ: 遠くの星が明るく → ふくらみ光の筋 → コロナとコックピットが金色 → 爆発の輪 ===== */
.ct-back.ct-supernova { --ct-hit: rgba(255, 210, 120, .35); }
.ct-supernova .ct-star { inset: auto; left: 50%; top: 14%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 16%, #ffe48a 30%, rgba(255, 170, 40, .65) 48%, transparent 70%); transform: scale(.15); }
.ct-supernova.ct-s1 .ct-star { opacity: 1; animation: ctStar 1.8s ease-in-out infinite alternate; }
.ct-supernova.ct-s2 .ct-star { transform: scale(.45); }
.ct-supernova.ct-s3 .ct-star { transform: scale(.85); }
.ct-supernova.ct-s4 .ct-star { transform: scale(1.3); }
@keyframes ctStar { from { filter: brightness(.9); } to { filter: brightness(1.25); } }
.ct-supernova .ct-rays { background: repeating-conic-gradient(from 0deg at 50% 14%, rgba(255, 215, 120, .26) 0 4deg, transparent 4deg 13deg); transform-origin: 50% 14%;
  -webkit-mask-image: radial-gradient(circle at 50% 14%, #000 15%, transparent 75%); mask-image: radial-gradient(circle at 50% 14%, #000 15%, transparent 75%); }
.ct-supernova.ct-s2 .ct-rays { opacity: .6; animation: ctSpin 40s linear infinite; }
.ct-supernova.ct-s3 .ct-rays { opacity: .9; animation-duration: 22s; }
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct-supernova .ct-tint { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 160, 40, .4), transparent 75%); }
.ct-supernova.ct-s3 .ct-tint { opacity: 1; }
.ct-gild { background: linear-gradient(0deg, rgba(255, 175, 50, .22), rgba(255, 175, 50, 0) 55%); }
.ct-supernova.ct-s3 .ct-gild { opacity: 1; }
.ct-burst i { position: absolute; left: 50%; top: 14%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%;
  border: 3px solid #ffd23f; box-shadow: 0 0 22px #ffb000; opacity: 0; animation: ctBurst 2.4s ease-out infinite; }
.ct-burst i:nth-child(2) { border-color: #ff7ad9; box-shadow: 0 0 22px #ff3fb5; animation-delay: -.8s; }
.ct-burst i:nth-child(3) { border-color: #6ff0ff; box-shadow: 0 0 22px #00c8ff; animation-delay: -1.6s; }
@keyframes ctBurst { from { transform: scale(.2); opacity: 0; } 15% { opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.ct-supernova.ct-s4 .ct-burst { opacity: 1; }

/* ===== ディメンション: 万華鏡の模様 → 色が混ざる → 空間がゆがむ → 全体がねじれて回る ===== */
.ct-back.ct-dimension { --ct-hit: rgba(255, 120, 230, .3); }
.ct-kal { inset: -40% !important; border-radius: 50%; }
.ct-kal-a { background:
  repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(0, 0, 0, .35) 22px 27px),
  repeating-conic-gradient(from 0deg at 50% 50%, #ff2bd6 0 15deg, #00e5ff 15deg 30deg, #b6ff00 30deg 45deg, #ff8a00 45deg 60deg);
  animation: ctSpin 46s linear infinite; }
.ct-kal-b { background:
  repeating-conic-gradient(from 7deg at 50% 50%, rgba(120, 60, 255, .9) 0 10deg, transparent 10deg 20deg, rgba(255, 230, 0, .8) 20deg 30deg, transparent 30deg 40deg);
  animation: ctSpinR 60s linear infinite; }
.ct-kal-c { background:
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .0) 0 30%, rgba(0, 255, 200, .5) 34%, transparent 40%, rgba(255, 60, 140, .5) 50%, transparent 58%),
  repeating-conic-gradient(from 0deg at 50% 50%, #00ffa8 0 7.5deg, #ff3b8d 7.5deg 15deg, #3b7bff 15deg 22.5deg);
  animation: ctSpin 30s linear infinite; }
@keyframes ctSpinR { to { transform: rotate(-360deg); } }
.ct-dimension.ct-s1 .ct-kal-a { opacity: .22; }
.ct-dimension.ct-s2 .ct-kal-a { opacity: .32; }
.ct-dimension.ct-s2 .ct-kal-b { opacity: .26; }
.ct-dimension.ct-s3 .ct-kal-c { opacity: .24; }
.ct-back.ct-dimension.ct-s3 { animation: ctWobble 5s ease-in-out infinite alternate; }
@keyframes ctWobble { from { transform: skew(3deg, -2deg) scale(1.05); } to { transform: skew(-3deg, 2deg) scale(1.08); } }
.ct-dimension.ct-s4 .ct-kal-a { opacity: .42; }
.ct-dimension.ct-s4 .ct-kal-b { opacity: .38; }
.ct-dimension.ct-s4 .ct-kal-c { opacity: .34; }
.ct-back.ct-dimension.ct-s4 { animation: ctWobble 3.2s ease-in-out infinite alternate; }
.ct-warp { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 40, 200, .28) 80%, rgba(0, 220, 255, .3) 100%); }
.ct-dimension.ct-s4 .ct-warp { opacity: 1; animation: ctWarp 3s ease-in-out infinite alternate; }
@keyframes ctWarp { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.06) rotate(4deg); } }

/* 控えめ(節目の文字の動きOFF)・視差効果を減らす: 動かない静かな版 */
body.learning-fx-reduced .ct-back, body.learning-fx-reduced .ct-back *, body.learning-fx-reduced .ct-front * { animation: none !important; }
body.learning-fx-reduced .ct-streaks, body.learning-fx-reduced .ct-rings, body.learning-fx-reduced .ct-burst, body.learning-fx-reduced .ct-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ct-back, .ct-back *, .ct-front * { animation: none !important; }
  .ct-streaks, .ct-rings, .ct-burst, .ct-ripple { display: none; }
}