/* ================================================================
   clearfx.css – クリアの演出（帯・紙ふぶき）と、音のスイッチ
   ================================================================
   clearfx.js が出す部品の見た目。ナンプレとハノイの塔が読み込む。
   色は、各ゲームの --primary などを使う（無ければ青）。
   盤面を光らせる動きは、ゲームごとの CSS に書く。 */

/* 画面ぜんたいを覆う透明な層。盤面は見えたまま、タップで先へ進める */
.fx-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 12vh;
  overflow: hidden;
  cursor: pointer;
}

/* 帯は画面の下のほう（盤面をかくさない位置）に出す */
.fx-banner {
  padding: 12px 30px 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(47, 51, 66, 0.28);
  text-align: center;
  animation: fx-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.fx-en { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.2; color: var(--primary, #3b78d8); }
.fx-ja { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--muted, #7c8294); }

@keyframes fx-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* 紙ふぶき */
.fx-confetti { position: absolute; inset: 0; pointer-events: none; }
.fx-piece {
  position: absolute; top: -40px;
  line-height: 1;
  animation: fx-fall 2s linear both;
}
@keyframes fx-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(calc(100vh + 60px)) rotate(360deg); opacity: 0.9; }
}

/* 音のスイッチ（タイトル画面） */
.fx-sound-row { margin-top: 14px; display: flex; justify-content: center; }
.fx-sound {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 0; border-radius: 12px;
  background: #e4e9f3;
  color: var(--text, #2f3342);
  font: inherit; font-size: 13px; font-weight: 900;
  cursor: pointer;
}
.fx-sound:focus-visible { outline: 3px solid #f08a24; outline-offset: 2px; }
.fx-sound[aria-pressed="false"] { opacity: 0.7; }
.fx-sound-icon { font-size: 18px; line-height: 1; }
.fx-sound-ja { font-size: 11px; font-weight: 700; color: var(--muted, #7c8294); }

/* 動きを減らす設定：紙ふぶきと、帯の動きは止める。帯と音は残す */
@media (prefers-reduced-motion: reduce) {
  .fx-confetti { display: none; }
  .fx-banner { animation: none; }
}