/* ===== 保留の敵機・予告の色・あと1問の勝負・ステップアップ (hold_fx.js、2026-10-09) =====
   問題と選択肢(z-index:2)は隠さない。縁の光は内容の奥(z-index:1)、帯はヘッダー直下の空き。
   color-mix・cqw は使わない(iOS 15)。 */

/* 選択肢の上の1行(以前の「識別コード確認」の行)。左に保留の敵機、右にステップのランプ。 */
.hold-row { display: flex; align-items: center; justify-content: center; gap: 14px; height: 30px; margin: 0 16px 6px; position: relative; z-index: 2; }
.hold-row.no-step .step-lamps { display: none; }
.hold-icons { display: flex; align-items: center; gap: 8px; }
.hold-icons::before { content: 'NEXT'; font-family: 'Orbitron', sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .12em; color: rgba(200, 220, 255, .55); margin-right: 2px; }
.hold-icon {
  width: 28px; height: 28px; display: block; flex: none;
  background-image: var(--hold-img-base, var(--foe-svg-fallback));
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transition: transform .2s ease;
}
/* 色ごとの絵(resources/ships/hold_<色>.webp)。無い色は敵機の正面の絵に色を付けて代わりにする */
.hold-icon.c-none    { background-image: var(--hold-img-none, var(--hold-img-base, var(--foe-svg-fallback))); }
.hold-icon.c-blue    { background-image: var(--hold-img-blue, var(--hold-img-base, var(--foe-svg-fallback))); }
.hold-icon.c-green   { background-image: var(--hold-img-green, var(--hold-img-base, var(--foe-svg-fallback))); }
.hold-icon.c-red     { background-image: var(--hold-img-red, var(--hold-img-base, var(--foe-svg-fallback))); }
.hold-icon.c-gold    { background-image: var(--hold-img-gold, var(--hold-img-base, var(--foe-svg-fallback))); }
.hold-icon.c-rainbow { background-image: var(--hold-img-rainbow, var(--hold-img-base, var(--foe-svg-fallback))); }
:root:not(.hold-art-none) .hold-icon.c-none { filter: grayscale(.5); opacity: .9; }
:root:not(.hold-art-blue) .hold-icon.c-blue { filter: hue-rotate(-55deg) saturate(1.4) drop-shadow(0 0 4px #4aa8ff); }
:root:not(.hold-art-green) .hold-icon.c-green { filter: hue-rotate(-150deg) saturate(1.5) drop-shadow(0 0 4px #4dff8a); }
:root:not(.hold-art-red) .hold-icon.c-red { filter: hue-rotate(80deg) saturate(1.8) drop-shadow(0 0 5px #ff3355); }
:root:not(.hold-art-gold) .hold-icon.c-gold { filter: sepia(1) saturate(3.2) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 6px #ffd23f); }
:root:not(.hold-art-rainbow) .hold-icon.c-rainbow { animation: holdRainbow 1.2s linear infinite; }
.hold-icon.c-gold, .hold-icon.c-rainbow { transform: scale(1.12); }
@keyframes holdRainbow {
  from { filter: hue-rotate(0deg) saturate(2) drop-shadow(0 0 6px #fff); }
  to   { filter: hue-rotate(360deg) saturate(2) drop-shadow(0 0 6px #fff); }
}
/* 新しく保留に入った1機は右から入る。色が上がった保留はポンと跳ねる */
.hold-icon.enter { animation: holdEnter .3s ease-out both; }
.hold-icon.pop   { animation: holdPop .45s cubic-bezier(.2, .9, .3, 1.5) both; }
.hold-icon.c-rainbow.enter, .hold-icon.c-rainbow.pop { animation: holdPop .45s cubic-bezier(.2, .9, .3, 1.5) both, holdRainbow 1.2s linear infinite; }
@keyframes holdEnter { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes holdPop { 0% { transform: scale(1); } 45% { transform: scale(1.6); } 100% { transform: scale(1.12); } }

/* 出題中の問題の色: 選択肢の枠がその色に光る(.bonus-foe の金色と同じ考え方) */
.choices-grid.hold-c-blue .choice-btn    { border-color: rgba(74, 168, 255, .75); box-shadow: 0 0 12px rgba(74, 168, 255, .45); }
.choices-grid.hold-c-green .choice-btn   { border-color: rgba(77, 255, 138, .75); box-shadow: 0 0 12px rgba(77, 255, 138, .45); }
.choices-grid.hold-c-red .choice-btn     { border-color: rgba(255, 51, 85, .85); box-shadow: 0 0 14px rgba(255, 51, 85, .55); }
.choices-grid.hold-c-gold .choice-btn    { border-color: rgba(255, 210, 63, .95); box-shadow: 0 0 16px rgba(255, 210, 63, .6); }
.choices-grid.hold-c-rainbow .choice-btn { border-color: #fff; animation: holdRainbowBtn 1.2s linear infinite; }
@keyframes holdRainbowBtn {
  0%   { box-shadow: 0 0 16px #ff6bd5; } 25% { box-shadow: 0 0 16px #ffd23f; }
  50%  { box-shadow: 0 0 16px #4dff8a; } 75% { box-shadow: 0 0 16px #4aa8ff; } 100% { box-shadow: 0 0 16px #ff6bd5; }
}

/* ステップのランプ(5つ)。そろった次の1問(ボーナス)は全部が点滅 */
.step-lamps { display: flex; gap: 4px; }
.step-lamps i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); transition: background .2s ease, box-shadow .2s ease; }
.step-lamps i.lit { background: #ffd23f; border-color: #fff3b0; box-shadow: 0 0 6px #ffd23f; }
.step-lamps.bonus i.lit { animation: stepBlink .5s steps(2, end) infinite; }
@keyframes stepBlink { 50% { background: #fff; box-shadow: 0 0 10px #fff; } }

/* あと1問の勝負: 縁の鼓動(内容の奥)と、ヘッダー直下の帯 */
.reach-edge { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; box-shadow: inset 0 0 70px 10px rgba(255, 60, 90, .75); }
.reach-band { position: fixed; left: 0; right: 0; height: 36px; z-index: 500; display: none; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40, 6, 18, .92) 14%, rgba(40, 6, 18, .92) 86%, transparent); border-block: 2px solid #ff3c5a; }
.reach-band span { font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 1.05rem; color: #fff; letter-spacing: .04em; text-shadow: 0 0 8px #ff3c5a, 0 0 18px #ff3c5a; }
.reach-band b { font-size: 1.3rem; color: #ffd23f; }
#screen-quiz.reach-on .reach-edge { animation: reachBeat .9s ease-in-out infinite; }
#screen-quiz.reach-on .reach-band { display: flex; animation: reachBandIn .25s ease-out both; }
@keyframes reachBeat { 0% { opacity: .15; } 12% { opacity: 1; } 24% { opacity: .35; } 36% { opacity: .9; } 70%, 100% { opacity: .15; } }
@keyframes reachBandIn { from { transform: scaleX(0); } to { transform: none; } }
body.learning-fx-reduced #screen-quiz.reach-on .reach-edge { animation: none; opacity: .5; }
body.learning-fx-reduced #screen-quiz.reach-on .reach-band { animation: none; }

/* ステップがそろったときの仲間の機体のカットイン(ヘッダー直下の帯を横切る) */
.step-cutin { position: fixed; left: 0; right: 0; height: 40px; top: 40%; z-index: 510; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 20, 44, .94) 12%, rgba(8, 20, 44, .94) 88%, transparent); border-block: 2px solid #ffd23f; animation: stepCutBand 1.5s ease both; }
.step-cutin img { height: 34px; width: auto; filter: drop-shadow(0 0 6px #ffd23f); animation: stepCutShip 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.step-cutin span { font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 1rem; color: #fff; text-shadow: 0 0 8px #ffd23f, 0 0 16px #ffd23f; }
@keyframes stepCutBand { 0% { opacity: 0; transform: scaleX(0); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stepCutShip { 0% { transform: translateX(-160px); } 30% { transform: none; } 100% { transform: translateX(20px); } }
body.learning-fx-reduced .step-cutin, body.learning-fx-reduced .step-cutin img { animation: none; }

/* ===== ビジョン・オブ・ヴォックス / ファイナルフェイス・オブ・ヴォックス (hold_fx.js) =====
   問題と選択肢の奥(z-index:1。背景とコックピットの上、内容 z-index:2 の下)。白い明滅は使わない。
   問題文と選択肢が読めるよう、中央を暗く落とす(::after)。 */
.vox-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.vox-fx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.vox-fx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 50% 48%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .2) 72%, transparent 100%); }
.vox-face img { animation: voxFace 1.1s cubic-bezier(.15, .85, .25, 1) both; }
.vox-face::after { animation: voxFade 1.1s ease both; }
@keyframes voxFace {
  0%   { opacity: 0; transform: scale(1.7); }
  13%  { opacity: .95; transform: scale(1); }
  42%  { opacity: .9; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.1); }
}
.vox-vision { background: rgba(0, 0, 0, .45); animation: voxFade 1.4s ease both; }
.vox-vision img { inset: auto; top: 14%; left: 0; width: 100%; height: auto; object-fit: fill; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); animation: voxVision 1.4s ease both; }
.vox-vision::after { background: radial-gradient(ellipse 85% 30% at 50% 55%, rgba(0, 0, 0, .45), transparent 80%); animation: voxFade 1.4s ease both; }
@keyframes voxVision {
  0%   { opacity: 0; transform: scale(1.06); filter: brightness(.6); }
  30%  { opacity: .9; filter: brightness(1.25); }
  45%  { filter: brightness(.9); }
  60%  { opacity: .9; filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(1); filter: brightness(.8); }
}
@keyframes voxFade { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } }
.vox-band { position: fixed; left: 0; right: 0; height: 40px; z-index: 520; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40, 8, 0, .92) 12%, rgba(40, 8, 0, .92) 88%, transparent); border-block: 2px solid #ffc23f; animation: voxBand 1.3s ease both; }
.vox-band span { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: .18em; color: #fff4c8; text-shadow: 0 0 6px #ffb020, 0 0 16px #ff5a00, 0 0 28px #ff2a00; }
.vox-band em { font-style: normal; font-weight: 900; font-size: .95rem; color: #ffd23f; margin-left: 12px; text-shadow: 0 0 8px #ff8a00; }
/* フェイスの帯の文字は顔の色に合わせる(金・虹は上の金色のまま) */
.vox-band.lf-band-blue span  { color: #e6faff; text-shadow: 0 0 6px #31c8ff, 0 0 16px #1a7fd6, 0 0 28px #0a4fd6; }
.vox-band.lf-band-green span { color: #e9ffef; text-shadow: 0 0 6px #3dff86, 0 0 16px #1c9a52, 0 0 28px #0a7a3a; }
.vox-band.lf-band-red span   { color: #ffe9ec; text-shadow: 0 0 6px #ff2a4f, 0 0 16px #ff1f45, 0 0 28px #b0001f; }
.vox-band.lf-band-white span { color: #ffffff; text-shadow: 0 0 6px #fff, 0 0 16px #cfe8ff, 0 0 28px #9fc8ff; }
@keyframes voxBand { 0% { opacity: 0; transform: scaleX(0); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
body.learning-fx-reduced .vox-fx img, body.learning-fx-reduced .vox-band { animation: voxFade 1.3s ease both; transform: none; }

/* 警報/CHANCE の帯(hold_fx.js chanceBand。ヘッダー直下、約0.9秒) */
.chance-band { position: fixed; left: 0; right: 0; height: 36px; z-index: 505; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: chanceBand .95s ease both; }
.chance-band span { font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: .14em; color: #fff; }
.chance-band.warn { background: repeating-linear-gradient(135deg, rgba(120, 0, 20, .92) 0 14px, rgba(60, 0, 10, .92) 14px 28px); border-block: 2px solid #ff3355; }
.chance-band.warn span { text-shadow: 0 0 8px #ff3355, 0 0 16px #ff3355; }
.chance-band.chance { background: linear-gradient(90deg, transparent, rgba(50, 36, 0, .94) 12%, rgba(50, 36, 0, .94) 88%, transparent); border-block: 2px solid #ffd23f; }
.chance-band.chance span { color: #fff6cc; text-shadow: 0 0 8px #ffd23f, 0 0 18px #ffb000; }
.chance-band.rainbow { border-image: linear-gradient(90deg, #ff6bd5, #ffd23f, #4dff8a, #4aa8ff, #b98bff) 1; }
@keyframes chanceBand { 0% { opacity: 0; transform: scaleY(0); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
body.learning-fx-reduced .chance-band { animation: none; }

/* 出題中の問題の色で、選択肢の敵機の透かしも光る(赤・金・虹) */
.choices-grid.hold-c-red .choice-btn::after { opacity: .55; filter: drop-shadow(0 0 6px #ff3355) drop-shadow(0 0 2px #ff3355); }
.choices-grid.hold-c-gold .choice-btn::after { opacity: .6; filter: drop-shadow(0 0 7px #ffd23f) drop-shadow(0 0 2px #ffd23f); }
.choices-grid.hold-c-rainbow .choice-btn::after { opacity: .6; filter: drop-shadow(0 0 7px #ffffff) drop-shadow(0 0 3px #ff6bd5); }

/* ===== フェイス演出(hold_fx.js questionFace / answerFace、2026-10-09 オーナー指摘「ファイナルフェイスみたいな演出を増やしたい」) =====
   黄金の虎の顔の線画(resources/fx/vox_face_lines.webp、白い線＋透明)を mask にして、地の色で色を付ける。
   問題と選択肢の奥(.vox-fx と同じ z-index:1)。ブルー・ミドリは走査線入りのホログラム、ホワイトは下から描かれていく。 */
.vox-fx.vox-lines { background: transparent; }
.vox-lines .lf { position: absolute; left: 50%; top: 42%; width: 118vmin; height: 88.5vmin; max-width: 760px; max-height: 570px; transform: translate(-50%, -50%);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: var(--lf, #fff); animation: lfIn 1.1s cubic-bezier(.15, .85, .25, 1) both; }
.vox-lines.lf-blue  { --lf: repeating-linear-gradient(0deg, #6fe4ff 0 3px, #1a7fd6 3px 6px); --lfg: #31c8ff; }
.vox-lines.lf-green { --lf: repeating-linear-gradient(0deg, #8dffb0 0 3px, #1c9a52 3px 6px); --lfg: #3dff86; }
.vox-lines.lf-red   { --lf: linear-gradient(180deg, #ff8a8a, #ff1f45); --lfg: #ff2a4f; }
.vox-lines.lf-gold  { --lf: linear-gradient(180deg, #fff3b0, #ffc21f 55%, #ff9a00); --lfg: #ffbf2a; }
.vox-lines.lf-white { --lf: #ffffff; --lfg: #ffffff; }
.vox-lines .lf { filter: drop-shadow(0 0 6px var(--lfg, #fff)) drop-shadow(0 0 18px var(--lfg, #fff)); }
@keyframes lfIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 15% { opacity: .95; transform: translate(-50%, -50%) scale(1); } 60% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } }
/* ホワイト: 白い線が下から描かれていく */
.vox-lines.lf-white .lf { animation: lfWhite 1.3s ease-out both; }
@keyframes lfWhite { 0% { opacity: 1; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); } 45% { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } 75% { opacity: .95; } 100% { opacity: 0; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
/* ホログラムのちらつき(ブルー・ミドリ。明滅ではなく弱い揺らぎ) */
.vox-lines.lf-blue .lf, .vox-lines.lf-green .lf { animation: lfIn 1.1s cubic-bezier(.15, .85, .25, 1) both, lfHolo .18s steps(2, end) 3; }
@keyframes lfHolo { 50% { transform: translate(calc(-50% + 2px), -50%); } }
body.learning-fx-reduced .vox-lines .lf { animation: voxFade 1.1s ease both; }