/* style.css
   375×812（スマホ縦持ち）を基準に、横向きや広い画面でも崩れないレイアウト。
   文字は大きく・高コントラストに（本文18px以上、数字やボタンは28px以上）。 */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  background: linear-gradient(180deg, #14152b 0%, #1b2748 55%, #142238 100%);
  color: #f3f3fb;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Meiryo", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
}

#app {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
  display: flex;
  flex-direction: column;
}

/* ── 画面切り替え ───────────────────── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px 0;
  position: relative; /* 各画面の背景演出キャンバスをここを基準に敷くため */
}

.screen.active {
  display: flex;
}

/* 画面の<section>につけるクラス。screen-title は「タイトル画面」自体を指し、
   見出し<h2>につける screen-heading とは別物（同名だと衝突するため分けている）。 */
.screen-title,
.screen-select,
.screen-trivia {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

/* タイトル画面：漂うミトコンドリア */
#title-fx-canvas {
  position: absolute;
  top: 0;
  left: -16px;
  right: auto;
  z-index: -1;
  /* canvasは画像と同じ扱いの要素なので width:auto にすると元のピクセル幅が採用されてしまい、
     サイズ調整処理と食い合って無限に太る。必ず明示的な幅を指定する。 */
  width: calc(100% + 32px);
  height: 100%;
  display: block;
  pointer-events: none;
}

.screen-title .title-char-img {
  width: 62%;
  max-width: 260px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: titleFloat 4.2s ease-in-out infinite;
}

.title-heading {
  font-size: 30px;
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: titleGlow 3.2s ease-in-out infinite;
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 80, 0.25); }
  50% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 215, 80, 0.65); }
}

.screen-heading {
  font-size: 24px;
  margin: 0 0 12px;
  /* 背景でキャラが動く画面でも見出しが埋もれないように影を敷く */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* ── ボタン共通 ───────────────────── */
.btn-primary, .btn-secondary {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 6px auto 0;
  padding: 12px 20px;
  font-size: 28px;
  font-weight: bold;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  min-height: 60px;
}

.btn-primary {
  background: linear-gradient(180deg, #6bd88a 0%, #2fa25a 100%);
  color: #0c2113;
  box-shadow: 0 8px 18px rgba(47, 162, 90, 0.4);
}

.btn-primary:active {
  transform: translateY(2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #f3f3fb;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.btn-secondary:active {
  transform: translateY(2px);
}

/* ── 曲えらび画面 ───────────────────── */
/* 曲えらび画面の背景で9体のミトコンドリアが漂うキャンバス。
   #app の左右16pxの余白ぶんも食い破って画面の端まで届かせる。 */
#select-fx-canvas {
  position: absolute;
  top: 0;
  left: -16px;
  right: auto;
  z-index: -1;
  /* canvasは画像と同じ扱いの要素なので width:auto にすると元のピクセル幅が採用され、
     サイズ調整処理と食い合って無限に太る。必ず明示的な幅を指定する。 */
  width: calc(100% + 32px);
  height: 100%;
  display: block;
  pointer-events: none;
}

.song-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* 背景でキャラが動くので、カードやボタンの地は「透けすぎない」濃さにする。
   薄いままだと文字とキャラが重なって読みにくくなる。 */
.song-card {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  background: rgba(16, 22, 44, 0.72);
  color: #f3f3fb;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.song-card.selected {
  border-color: #6bd88a;
  background: rgba(24, 74, 52, 0.85);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(107, 216, 138, 0.35);
}

.song-card-title {
  font-size: 20px;
  font-weight: bold;
}

.song-card-duration {
  margin-top: 4px;
  font-size: 16px;
  opacity: 0.8;
}

.difficulty-picker {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.diff-btn {
  flex: 1;
  padding: 12px 6px;
  font-size: 28px;
  font-weight: bold;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  background: rgba(16, 22, 44, 0.72);
  color: #f3f3fb;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.diff-btn.active {
  background: linear-gradient(180deg, #ffd76b 0%, #f2b705 100%);
  color: #3a2600;
  border-color: #f2b705;
}

/* 「音のズレ調整」のスライダーはここにあったが、遊ぶ前に音を聞けないため
   利用者に判断させられない、という理由で外した。
   ズレを直すときは js/ui.js の AUDIO_OFFSET_MS の数字を変える。 */

/* ── 豆知識カード ───────────────────── */
.trivia-card {
  width: 100%;
  padding: 28px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 28px;
}

.trivia-card h3 {
  font-size: 22px;
  margin: 0 0 12px;
  color: #ffd76b;
}

.trivia-card p {
  font-size: 18px;
  margin: 0;
  line-height: 1.7;
}

.trivia-card.small {
  padding: 12px 14px;
  margin-bottom: 10px;
}

.trivia-card.small h3 {
  font-size: 19px;
}

.trivia-card.small p {
  font-size: 18px;
}

/* ── プレイ画面 ───────────────────── */
.screen-play {
  padding: 16px 0 16px;
  position: relative;
  flex: 1;
  transition: background-color 0.4s;
}

.screen-play.resonance {
  background-color: rgba(90, 209, 107, 0.12);
}

/* 生きている背景（元気度で色が変わる／光の玉が漂う／拍で明滅／オーロラ） */
/* 背景演出は #app の左右16pxの余白ぶんも食い破って、画面の端まで届かせる。
   端に地の色の帯が残ると、そこだけ演出が途切れて安っぽく見えるため。 */
#bg-canvas {
  position: absolute;
  top: 0;
  left: -16px;
  right: auto;
  z-index: -1;
  /* canvasは画像と同じ扱いの要素なので width:auto にすると元のピクセル幅が採用されてしまい、
     サイズ調整処理と食い合って無限に太る。必ず明示的な幅を指定する。 */
  width: calc(100% + 32px);
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 大音符・段階アップの瞬間だけ画面をやわらかく1回フェード（安全のため点滅させない） */
#stage-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 80, 0.4), transparent 70%);
  opacity: 0;
}

#stage-flash.fire {
  animation: stageFlashFade 0.9s ease-out;
}

@keyframes stageFlashFade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* 大音符を叩いた時だけの小さな画面シェイク（3px以内・150ms以内） */
.screen-play.shake {
  animation: playShake 0.15s linear;
}

@keyframes playShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.play-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hud-item {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.hud-label {
  display: block;
  font-size: 14px;
  opacity: 0.85;
}

.hud-value {
  display: block;
  font-size: 28px;
  font-weight: bold;
  color: #6bd88a;
}

.genki-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.genki-label {
  font-size: 14px;
  white-space: nowrap;
}

.genki-bar {
  position: relative; /* 段階マーカー・光の粒の基準位置 */
  flex: 1;
  height: 22px;       /* 見せ場のひとつなので、細い線に見えない太さにする */
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* 段階の境目（次の変身まであとどれくらいか）を示す目印 */
.genki-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(15, 18, 28, 0.55);
  z-index: 2;
}

/* 増えた瞬間、増えた分をひかりで一瞬示す「残像」バー。genki-fillの下に敷く。
   幅はJSが即座に新しい値へ飛ばし（transitionなし）、明るさだけキーフレームで減衰させる。 */
.genki-fill-echo {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
}

.genki-fill-echo.flash {
  animation: genkiEchoFade 0.6s ease-out;
}

@keyframes genkiEchoFade {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

.genki-fill {
  position: relative;
  height: 100%;
  width: 0%;
  overflow: hidden;
  background: linear-gradient(90deg, #5ad16b, #8fe06b, #f2b705);
  background-size: 220% 100%;
  animation: genkiGradientPan 4s linear infinite;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 行き過ぎて戻るオーバーシュート */
}

/* バーの表面を定期的に走る光（シャイン） */
.genki-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: genkiShine 2.6s linear infinite;
}

/* 段階の境目を越えた瞬間、バー全体が発光 */
.genki-bar.pulse {
  animation: genkiThresholdGlow 0.7s ease-out;
}

/* 段階の境目を越えた瞬間、バーに沿って走る光の粒 */
.genki-spark {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff6cf;
  box-shadow: 0 0 8px 3px rgba(255, 246, 207, 0.9);
  z-index: 3;
  animation: genkiSparkRun 0.7s ease-out forwards;
}

@keyframes genkiGradientPan {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

@keyframes genkiShine {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(320%); }
}

@keyframes genkiThresholdGlow {
  0% { box-shadow: 0 0 0 rgba(255, 215, 80, 0); }
  30% { box-shadow: 0 0 14px 4px rgba(255, 215, 80, 0.85); }
  100% { box-shadow: 0 0 0 rgba(255, 215, 80, 0); }
}

@keyframes genkiSparkRun {
  0% { left: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

#game-canvas {
  width: 100%;
  height: 140px;
  display: block;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.play-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 320px;
  margin-top: 8px;
}

.char-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* キャラの背後に敷く演出キャンバス（サンバースト・公転ミトコンドリア・紙吹雪） */
#char-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.char-img {
  position: relative; /* #char-canvasより手前に出すため */
  z-index: 1;
  max-height: 240px;
  max-width: 70%;
  object-fit: contain;
  will-change: transform;
}

/* 4枚とも本物の画像になったので、明るさ偽装フィルターは廃止。
   演出としての色味づけだけ残す（stage1=ほんのり寒色 / stage4=金色に発光）。 */
.char-img.stage1 { filter: saturate(0.85) drop-shadow(0 0 10px rgba(120, 150, 255, 0.3)); }
.char-img.stage2 { filter: none; }
.char-img.stage3 { filter: none; }
.char-img.stage4 {
  filter: drop-shadow(0 0 16px rgba(255, 215, 80, 0.85)) drop-shadow(0 0 32px rgba(255, 215, 80, 0.45));
}

/* 絶好調のきらめきは、以前は ✨ の絵文字を文字として置いていたが、
   背景色によって汚れのように見えてしまうため canvas 描画（js/fx.js の drawGlints）に移した。 */

.tap-hint {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

.tap-hint-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: radial-gradient(circle, rgba(107, 216, 138, 0.35) 0%, rgba(107, 216, 138, 0.08) 70%, transparent 100%);
  border: 3px dashed rgba(255, 255, 255, 0.5);
  animation: tapPulse 1.6s ease-in-out infinite;
}

.tap-hint.flash .tap-hint-circle {
  background: radial-gradient(circle, rgba(107, 216, 138, 0.7) 0%, rgba(107, 216, 138, 0.2) 70%, transparent 100%);
}

@keyframes tapPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.judge-text {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* ピッタリ＝金／いいね＝緑／ミス＝灰色 */
.judge-text.perfect { color: #ffd76b; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 215, 80, 0.9); }
.judge-text.good    { color: #6bd88a; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 14px rgba(107, 216, 138, 0.8); }
.judge-text.miss    { color: #b9bec9; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }

.judge-text.pop {
  animation: judgePop 0.55s ease-out;
}

@keyframes judgePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  65% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1); }
}

/* 共鳴カウンタ：叩くたびにポンと拡大 */
.hud-value.pop {
  animation: hudPop 0.3s ease-out;
}

@keyframes hudPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* 共鳴の節目（10/20/30/50）で短く出る表示 */
#combo-milestone {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 26px;
  font-weight: bold;
  color: #ffd76b;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 80, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

#combo-milestone.pop {
  animation: milestonePop 0.9s ease-out;
}

@keyframes milestonePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

.stage-msg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
  width: min(90%, 420px);
  padding: 22px 20px;
  border-radius: 20px;
  background: rgba(10, 16, 30, 0.92);
  border: 2px solid #ffd76b;
  color: #ffd76b;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(255, 215, 80, 0);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  z-index: 20;
}

.stage-msg.visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 30px 6px rgba(255, 215, 80, 0.45);
}

/* ── 結果画面 ───────────────────── */
/* スクショ1枚に収まるのが理想だが、必須の文字サイズ（本文18px/数字28px以上）を
   優先した結果、環境によっては少しはみ出す。その場合は縦スクロールで見る想定。
   （このセクションの余白は、その前提でぎりぎりまで詰めてある） */
.screen-result {
  padding-top: 12px;
}

/* 結果画面の背景：ミトコンドリアがゆっくり昇っていく */
#result-bg-canvas {
  position: absolute;
  top: 0;
  left: -16px;
  right: auto;
  z-index: -1;
  /* canvasは画像と同じ扱いの要素なので width:auto にすると元のピクセル幅が採用されてしまい、
     サイズ調整処理と食い合って無限に太る。必ず明示的な幅を指定する。 */
  width: calc(100% + 32px);
  height: 100%;
  display: block;
  pointer-events: none;
}

.result-heading {
  font-size: 20px;
  text-align: center;
  margin: 0 0 4px;
}

/* 元気度をドーナツ状のゲージで表示。中央に今までの%数字を重ねる */
.result-gauge-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 2px;
}

#result-gauge-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.result-gauge-wrap .result-percent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.result-percent {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  color: #6bd88a;
  margin: 0 0 4px;
}

/* 到達した段階のキャラ */
/* 到達した段階のキャラ。結果画面はスクショして共有される想定なので、
   小さすぎると誰の絵か分からない。ドーナツゲージと同じくらいの存在感にする。 */
.result-char-img {
  display: block;
  max-height: 132px;
  max-width: 150px;
  object-fit: contain;
  margin: -4px auto 2px;
  filter: drop-shadow(0 0 14px rgba(255, 215, 80, 0.45));
}

.result-rank {
  text-align: center;
  margin-bottom: 10px;
}

.result-rank-title {
  font-size: 20px;
  font-weight: bold;
  color: #ffd76b;
  margin-bottom: 4px;
}

/* ランクの文字が光をともなってスタンプのように出る */
.result-rank-title.stamp {
  animation: rankStamp 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes rankStamp {
  0% { opacity: 0; transform: scale(1.7) rotate(-6deg); text-shadow: 0 0 0 rgba(255, 215, 80, 0); }
  60% { opacity: 1; transform: scale(0.95) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); text-shadow: 0 0 16px rgba(255, 215, 80, 0.7); }
}

.result-rank-body {
  font-size: 18px;
  margin: 0;
  opacity: 0.9;
}

/* 5個を1段に並べる。3列だと2段になって縦に80pxほど伸び、
   その分だけ下の「もう1回」ボタンが画面の外に押し出されてしまう。 */
.result-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.stat {
  text-align: center;
  padding: 6px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* 5列に詰めたので、見出しは折り返して2行に入る大きさにする */
.stat-label {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  opacity: 0.85;
}

.stat-value {
  display: block;
  font-size: 26px;
  font-weight: bold;
  color: #6bd88a;
}

/* 数字が上から順に少しずつ遅れてポンと現れる */
.stat.pop-in {
  animation: statPopIn 0.5s ease-out;
}

@keyframes statPopIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.85); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.omikuji-frame {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 3px solid #ff7a59;
  background: rgba(255, 122, 89, 0.1);
  text-align: center;
  margin-bottom: 12px;
}

.omikuji-label {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.omikuji-act {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

/* おみくじの理由は本文にあたるので、いちばん小さい字にしない */
.omikuji-why {
  font-size: 16px;
  opacity: 0.9;
}

.result-disclaimer {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
  text-align: center;
  margin: 0 0 10px;
}

/* 結果画面は全部で1画面に収まりきらないので、操作ボタンだけは
   画面の下に貼り付けて常に見えるようにする。
   これが無いと、曲を終えた直後に「もう1回」が画面の外にあって押せない。 */
.result-buttons {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 8px;
  margin-bottom: 4px;
  background: linear-gradient(180deg, rgba(16, 22, 44, 0) 0%, rgba(16, 22, 44, 0.92) 30%, rgba(16, 22, 44, 0.97) 100%);
}

.share-note {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
  margin: 0 0 12px;
}

/* プレイ中の「やめる」。
   画面の上は数字とメーターで埋まっているので、下の左隅に小さく置く。
   中央の「タップ！」の輪から離した位置にして、叩くときに誤って押さないようにしている。
   プレイ画面全体がタップ判定なので、このボタンだけは伝播を止めている（js/ui.js 側）。 */
.btn-quit {
  position: absolute;
  bottom: 12px;
  left: 0;
  z-index: 6;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(16, 22, 44, 0.72);
  color: #f3f3fb;
  cursor: pointer;
}

/* ── 縦に狭い画面（横持ち・小さめのスマホ）で、下のボタンが画面の外に
      押し出されないようにする保険 ── */

/* iPhone SE / 8 くらい（667px）でも、プレイ画面が1画面に収まるように詰める */
@media (max-height: 700px) {
  .screen { padding: 16px 0; }
  /* キャラ画像は縦長（418×800）なので、高さの上限を決めないと
     縦の狭い画面で画像だけが伸びて「はじめる」ボタンを押し出してしまう */
  .screen-title .title-char-img { max-height: 34vh; width: auto; }
  .play-stage { min-height: 250px; }
  .char-img { max-height: 190px; }
  .tap-hint { padding: 10px 0 4px; }
  .tap-hint-circle { width: 116px; height: 116px; }
}

@media (max-height: 560px) {
  .screen { padding: 12px 0; }
  .title-heading { font-size: 24px; }
  .screen-title .title-char-img { max-height: 30vh; }
  .play-stage { min-height: 200px; }
  .char-img { max-height: 150px; }
  .tap-hint-circle { width: 100px; height: 100px; font-size: 18px; }
}

/* ── OSの「視差効果を減らす」設定への対応 ──
   画面シェイクと全画面の明滅（ソフトフェード）だけを止める。JS側でも発火自体を止めている。 */
@media (prefers-reduced-motion: reduce) {
  .screen-play.shake { animation: none !important; }
  #stage-flash.fire { animation: none !important; }
}