/* ===== メルトダウン(fx_meltdown.js。世界が壊れていくクイズ) =====
   ・.md-back: #screen-quiz の宇宙背景の直上(z-index:0)。色の変化・回る虹・溶ける滴。
   ・.md-front: コックピット枠の上・問題と選択肢(z-index:2)の下(z-index:1)。ひび・破片・粒子・縁の光・
     問題文の裏の暗い膜・単語の残像・仲間の顔・ミスの暗転。
   ・どちらも pointer-events:none(タップは必ず選択肢へ届く)。問題文・選択肢そのものには何も掛けない。
   ・動きは transform/opacity だけ。揺れは JS が translate プロパティで(transform の常時アニメと重ねない)。
   ・#screen-quiz.md-reduced(控えめ・視差効果を減らす)は動きを止めた静かな版。 */
.md-back, .md-front { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.md-back { z-index: 0; }
.md-front { z-index: 1; }
.md-back *, .md-front * { pointer-events: none; }

/* ── 色の変化(段階2〜) ── */
.md-tint {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease;
  background:
    radial-gradient(ellipse 90% 45% at 50% 108%, rgba(255,60,130,0.42), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% -8%, rgba(90,50,255,0.38), transparent 70%);
}
#screen-quiz.md-s2 .md-tint { opacity: 0.6; }
#screen-quiz.md-s3 .md-tint { opacity: 0.85; }
/* ── 回る虹(段階4。回転だけで色が巡って見える) ── */
/* 回しても角が見えない最小の正方形(画面の対角線より少し大きい)。大きすぎる層は低スペック端末で重い */
.md-swirl {
  position: absolute; left: 50%; top: 50%; width: 112vmax; height: 112vmax; margin: -56vmax 0 0 -56vmax;
  opacity: 0; transition: opacity 0.6s ease;
  background: conic-gradient(from 0deg at 50% 50%, #ff3b6b, #ffb13b, #f5ff3b, #3bff8a, #3be8ff, #6b5aff, #e03bff, #ff3b6b);
}
#screen-quiz.md-s4 .md-swirl { opacity: 0.32; animation: mdSpin 7s linear infinite; will-change: transform; }
#screen-quiz.md-s4.fever-mode .md-swirl { opacity: 0.16; }
@keyframes mdSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ── 溶ける滴(段階4) ── */
.md-melt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
#screen-quiz.md-s4 .md-melt { opacity: 1; }
.md-drip {
  position: absolute; top: -2%; left: var(--x); width: var(--w); height: 52%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(to bottom, hsla(var(--h), 95%, 62%, 0.55), hsla(var(--h), 95%, 55%, 0.22) 65%, hsla(var(--h), 95%, 55%, 0));
  transform-origin: 50% 0; transform: scaleY(0.15);
}
#screen-quiz.md-s4 .md-drip { animation: mdDrip var(--dur) ease-in var(--dl) infinite; }
@keyframes mdDrip {
  0%   { transform: scaleY(0.12); opacity: 0.9; }
  75%  { transform: scaleY(1); opacity: 0.85; }
  100% { transform: scaleY(1.12); opacity: 0; }
}

/* ── 宇宙背景の傾き・揺れ(段階2〜)とコックピット枠の曲がり(段階4) ── */
#screen-quiz.md-s2:not(.md-reduced) > .game-space-bg { animation: mdWobble 7s ease-in-out infinite; }
#screen-quiz.md-s3:not(.md-reduced) > .game-space-bg { animation: mdWobble2 3.6s ease-in-out infinite; }
#screen-quiz.md-s4:not(.md-reduced) > .game-space-bg { animation: mdMeltBg 2.8s ease-in-out infinite; }
#screen-quiz.md-s4:not(.md-reduced) > .cockpit-frame { animation: mdBend 3.4s ease-in-out infinite; will-change: transform; }
@keyframes mdWobble {
  0%, 100% { transform: rotate(-0.8deg) scale(1.07); }
  50%      { transform: rotate(0.8deg) scale(1.08); }
}
@keyframes mdWobble2 {
  0%, 100% { transform: rotate(-1.8deg) scale(1.12); }
  50%      { transform: rotate(1.8deg) scale(1.14); }
}
@keyframes mdMeltBg {
  0%, 100% { transform: skewY(-3deg) scale(1.16, 1.2); }
  50%      { transform: skewY(3deg) scale(1.2, 1.3); }
}
@keyframes mdBend {
  0%, 100% { transform: perspective(700px) rotateY(0deg) skewX(0deg) scale(1); }
  30%      { transform: perspective(700px) rotateY(5deg) skewX(-3deg) scale(1.03, 0.98); }
  65%      { transform: perspective(700px) rotateY(-5deg) skewX(3deg) scale(1.04, 1.01); }
}

/* ── ひび(段階1: 四隅、段階2: 広がる、段階3: 横切る太いひび) ── */
/* 問題文のまわりだけひびを薄く抜く(位置は JS が --qx/--qy/--qrx/--qry に入れる。未設定ならマスクなし) */
.md-crack-host {
  position: absolute; inset: 0; will-change: transform; /* 動かない層として1回だけ描く(色ずれ・マスクを毎フレーム計算しない) */
  -webkit-mask-image: radial-gradient(ellipse var(--qrx) var(--qry) at var(--qx) var(--qy), rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.25) 60%, #000 100%);
          mask-image: radial-gradient(ellipse var(--qrx) var(--qry) at var(--qx) var(--qy), rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.25) 60%, #000 100%);
}
.md-cracks {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(160,220,255,0.75));
}
.md-cracks path {
  fill: none; stroke: rgba(235,245,255,0.88); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0;
}
#screen-quiz.md-s1 .md-crk-c,
#screen-quiz.md-s2 .md-crk-s,
#screen-quiz.md-s3 .md-crk-x { opacity: 1; animation: mdCrack 0.5s ease-out var(--d, 0s) both; }
@keyframes mdCrack { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* 段階3: 背景のひびだけに色ずれ(赤と水色)。動かない層なので描き直しは段階が変わるときだけ */
#screen-quiz.md-s3 .md-cracks {
  filter: drop-shadow(2px 0 0 rgba(255,0,90,0.75)) drop-shadow(-2px 0 0 rgba(0,240,255,0.75));
}
#screen-quiz.md-s3 .md-cracks path { stroke: rgba(255,255,255,0.95); }

/* ── 割れた背景の破片(段階3〜) ── */
.md-shards { position: absolute; inset: 0; }
.md-shard { position: absolute; opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
.md-sh { position: absolute; inset: 0; }
.md-sh-r { background: rgba(255,0,90,0.55); transform: translateX(-3px); }
.md-sh-c { background: rgba(0,230,255,0.55); transform: translateX(3px); }
.md-sh-m { background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(120,90,255,0.45) 35%, rgba(12,10,40,0.88) 75%); }
#screen-quiz.md-s4 .md-sh-m { background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,80,200,0.5) 35%, rgba(30,0,60,0.88) 75%); }
#screen-quiz.md-s3 .md-shard {
  opacity: 0.95;
  animation: mdShardIn 0.5s cubic-bezier(.2,.8,.2,1) var(--dl, 0s) both, mdShardFloat var(--dur, 3s) ease-in-out 0.5s infinite alternate;
}
@keyframes mdShardIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(0deg); }
  to   { opacity: 0.95; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); }
}
@keyframes mdShardFloat {
  from { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); }
  to   { transform: translate(calc(-50% + var(--dx) + 10px), calc(-50% + var(--dy) - 16px)) rotate(calc(var(--r) + 14deg)); }
}

/* ── 落ちる破片(canvas) ── */
.md-debris { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── 問題文の裏の暗い膜(段階2〜。背景が騒がしくても問題文のコントラストを保つ) ── */
.md-scrim {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(4,4,14,0.82) 0%, rgba(4,4,14,0.6) 55%, rgba(4,4,14,0) 100%);
}
#screen-quiz.md-s2 .md-scrim { opacity: 1; }

/* ── 縁の光(段階1〜。段階ごとに色と速さが上がる)と、正解ごとの縁の脈 ── */
.md-edge, .md-hit { position: absolute; inset: 0; opacity: 0; }
.md-edge { box-shadow: inset 0 0 34px 8px var(--md-c, #ff9a3c); }
.md-hit { box-shadow: inset 0 0 60px 16px var(--md-c, #ff9a3c); }
#screen-quiz.md-s1 .md-edge { animation: mdEdge 1.8s ease-in-out infinite; }
#screen-quiz.md-s2 .md-edge { animation-duration: 1.2s; }
#screen-quiz.md-s3 .md-edge { animation-duration: 0.8s; }
#screen-quiz.md-s4 .md-edge { animation-duration: 0.6s; }
@keyframes mdEdge { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }

/* ── 単語の残像・仲間の顔(段階4) ── */
.md-fly { position: absolute; inset: 0; }
.md-echo {
  position: absolute; white-space: nowrap; transform: translate(-50%,-50%);
  font-family: 'Poppins', 'Noto Sans JP', sans-serif; font-size: 2.6rem; font-weight: 900; color: rgba(255,255,255,0.9);
  text-shadow: -3px 0 rgba(255,0,90,0.85), 3px 0 rgba(0,240,255,0.85);
}
.md-face {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; opacity: 0;
  border: 2px solid rgba(0,240,255,0.85); box-shadow: 0 0 14px rgba(0,240,255,0.7); background: #0b0b22;
}
.md-face-l { left: 4px; }
.md-face-r { right: 4px; }

/* ── ミスの暗転 ── */
.md-dark { position: absolute; inset: 0; background: #000; opacity: 0; }

/* ── 「MELTDOWN」の帯(ヘッダー直下の空き帯。atari.js のミニ版の文字と同じ場所) ── */
.md-banner {
  position: absolute; left: 50px; right: 12px; z-index: 3; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  animation: mdBanner 1.5s ease-out both;
}
.md-banner * { pointer-events: none; }
.md-banner-main {
  font-family: 'Poppins', sans-serif; font-weight: 900; letter-spacing: 0.14em; line-height: 1;
  font-size: min(1.9rem, calc(var(--md-bh, 48px) * 0.5));
  background: linear-gradient(90deg, #ff3b8b, #ffb13b, #3bff9a, #3be8ff, #b13bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.md-banner-sub { font-size: 0.66rem; font-weight: 800; color: #fff; opacity: 0.9; line-height: 1.1; white-space: nowrap; }
@keyframes mdBanner {
  0%   { opacity: 0; transform: scale(1.8); }
  15%  { opacity: 1; transform: scale(0.95); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}
.md-banner.is-reduced { animation: mdFadeInOut 1.5s linear both; }
@keyframes mdFadeInOut { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── 控えめ(節目の文字の動きOFF・視差効果を減らす): 動きを止めた静かな版 ── */
#screen-quiz.md-reduced .md-swirl,
#screen-quiz.md-reduced .md-drip,
#screen-quiz.md-reduced .md-edge { animation: none; }
#screen-quiz.md-reduced .md-edge { opacity: 0.45; }
#screen-quiz.md-reduced .md-drip { transform: scaleY(0.6); }
#screen-quiz.md-reduced .md-cracks path { animation: none; stroke-dashoffset: 0; }
#screen-quiz.md-reduced .md-shard { animation: none; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); }
#screen-quiz.md-reduced .md-debris { display: none; }

/* ===== けっか発表: メルトダウン到達の振り返り(全画面・タップで閉じる) ===== */
.md-replay {
  position: fixed; inset: 0; z-index: 9350; overflow: hidden; cursor: pointer; touch-action: manipulation;
  background: #05030f; display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; animation: mdRpIn 0.35s ease-out both;
}
@keyframes mdRpIn { from { opacity: 0; } to { opacity: 1; } }
.md-rp-swirl {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; opacity: 0.42;
  background: conic-gradient(from 0deg at 50% 50%, #ff3b6b, #ffb13b, #f5ff3b, #3bff8a, #3be8ff, #6b5aff, #e03bff, #ff3b6b);
  animation: mdSpin 4s linear infinite;
}
.md-rp-swirl::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(5,3,15,0.92) 0%, rgba(5,3,15,0.55) 22%, rgba(5,3,15,0) 45%);
}
.md-rp-words, .md-rp-shards { position: absolute; inset: 0; pointer-events: none; }
.md-rp-word {
  position: absolute; left: 50%; top: 50%; white-space: nowrap; opacity: 0;
  font-family: 'Poppins', 'Noto Sans JP', sans-serif; font-size: 1.6rem; font-weight: 900;
  color: hsl(var(--hue, 200), 95%, 72%); text-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.md-rp-shard {
  position: absolute; left: 50%; top: 50%; width: var(--sz); height: var(--sz); opacity: 0;
  -webkit-clip-path: polygon(50% 0%, 100% 70%, 18% 100%); clip-path: polygon(50% 0%, 100% 70%, 18% 100%);
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(150,110,255,0.6) 40%, rgba(20,10,50,0.9));
  animation: mdRpShard 1.4s cubic-bezier(.15,.8,.3,1) 0.1s both;
}
@keyframes mdRpShard {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(0.2); }
  15%  { opacity: 1; }
  100% { opacity: 0.85; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--dist))) rotate(var(--r)) scale(1); }
}
.md-rp-center { position: relative; z-index: 2; text-align: center; padding: 0 16px; pointer-events: none; }
.md-rp-title {
  font-family: 'Poppins', sans-serif; font-weight: 900; font-size: min(3.4rem, 15vw); letter-spacing: 0.08em; line-height: 1.05;
  background: linear-gradient(90deg, #ff3b8b, #ffb13b, #3bff9a, #3be8ff, #b13bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: mdRpSlam 0.6s cubic-bezier(.2,.7,.2,1) 0.15s both;
}
@keyframes mdRpSlam {
  0%   { opacity: 0; transform: scale(3); }
  60%  { opacity: 1; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.md-rp-sub { margin-top: 6px; font-size: 1.25rem; font-weight: 900; color: #fff; text-shadow: 0 0 14px rgba(0,240,255,0.8); animation: mdRpUp 0.4s ease-out 0.6s both; }
.md-rp-combo { margin-top: 4px; font-size: 0.95rem; font-weight: 800; color: #dfe8ff; animation: mdRpUp 0.4s ease-out 0.8s both; }
.md-rp-combo b { font-size: 1.6rem; color: #ffd84a; }
@keyframes mdRpUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.md-rp-share {
  margin-top: 14px; padding: 10px 26px; border-radius: 99px; border: 2px solid rgba(255,255,255,0.85);
  background: linear-gradient(90deg, #ff3b8b, #b13bff); color: #fff; font-size: 0.95rem; font-weight: 900;
  pointer-events: auto; cursor: pointer; animation: mdRpUp 0.4s ease-out 1.1s both;
}
.md-rp-skip {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 5px 14px; border-radius: 99px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35);
  color: #e8e8ff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0.85;
}
.md-replay.is-reduced .md-rp-swirl { animation: none; }
.md-replay.is-reduced .md-rp-shards { display: none; }
.md-replay.is-reduced .md-rp-title { animation: mdRpUp 0.3s ease-out both; }