/* 40億年ぶんの道 — 見た目
 * 縦持ちスマホを基準に1列。768px 以上で2列、1100px 以上で3列。
 */
:root {
  --bg: #0a0f14;
  --bg2: #0d141b;
  --panel: #111a23;
  --panel2: #15212c;
  --line: #22313f;
  --line2: #2c3f50;
  --text: #e6edf3;
  --muted: #8ea3b5;
  --faint: #5f7385;
  --accent: #ff8a3d;
  --accent-d: #c45f1c;
  --sea: #39c5bb;
  --good: #63d391;
  --bad: #ff7272;
  --mass: #ff4d6d;
  --era: #9db4ff;
  --decision: #ffd166;
  --stage: #c79bff;
  --radius: 14px;
  --font: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --mono: ui-monospace, "SFMono-Regular", "Consolas", "Menlo", monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ctl-h: 64px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body { min-height: 100vh; min-height: 100dvh; }
button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; font-weight: normal; }

/* ------------------------------------------------------------ 画面切り替え */
.screen { display: none; }
.screen.active { display: block; }

/* ------------------------------------------------------------ ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--panel2);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(180deg, #ff9a52, var(--accent-d));
  border-color: #ffb07a;
  color: #1a0d04;
  box-shadow: 0 6px 24px rgba(255, 138, 61, 0.25);
}
.btn.ghost { background: transparent; }
.btn.small { min-height: 40px; padding: 6px 16px; font-size: 14px; }

/* ------------------------------------------------------------ タイトル
   背景の canvas（title.js）に、星空と約40億年前の地球と、地球から題名へ伸びる一本の光の道。
   縦持ちでは地球が上（画面の高さの 24% のあたり）、文字は下に寄せる。PC（900px 以上）では地球が右、文字が左 */
#scr-title { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
#title-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(44vh + var(--safe-t)) 24px calc(16px + var(--safe-b));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.eyebrow { font-family: var(--mono); font-size: 11px; color: var(--sea); letter-spacing: 0.08em; margin: 0; }
.title {
  font-family: var(--serif);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.06em;
  color: #fff3e2;
  text-shadow: 0 0 18px rgba(255, 214, 150, 0.35), 0 4px 40px rgba(255, 138, 61, 0.3);
}
/* 「40億年」を大きく、「ぶんの道」を少し小さく、同じ行の下ぞろえで並べる */
.title .title-num { font-size: clamp(54px, 15.5vw, 96px); }
.title .title-rest { font-size: clamp(34px, 9.6vw, 60px); margin-left: 0.06em; }
.tagline { font-family: var(--serif); font-size: 18px; line-height: 1.6; margin: 12px 0 12px; color: #ffd9bd; }
.lead { color: #c5d3df; font-size: 14px; margin: 0 0 8px; }
.odds { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.title-buttons { display: flex; flex-direction: column; gap: 10px; }
.title-buttons .row { display: flex; gap: 10px; }
.title-buttons .row .btn { flex: 1; }
.title-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 16px; }
.title-stats { font-size: 12px; color: var(--muted); }
.title-stats:empty { display: none; }

@media (max-height: 640px) {
  .title-inner { padding-top: calc(38vh + var(--safe-t)); }
  .lead { display: none; }
}
@media (min-width: 900px) {
  .title-inner { margin: 0 0 0 8vw; padding-top: calc(48px + var(--safe-t)); justify-content: center; }
  .lead { font-size: 15px; }
}

/* ------------------------------------------------------------ 誕生 */
#scr-origin { min-height: 100vh; min-height: 100dvh; }
.origin-seq {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  cursor: pointer;
}
/* 当時の地球の絵（描くのは origin.js）。字幕の場面も、場所が決まる場面（回る地球）も、この1枚に描く。
   画面の高さが足りないときは小さくする（文字のぶんを残す） */
.seq-canvas { display: block; width: min(92vw, 420px, 52vh); height: min(92vw, 420px, 52vh); margin: 0 auto; }
/* 字幕は絵の下に、絵を引き立てるだけの大きさで */
.seq-text { min-height: 9.5em; }
.seq-small { font-family: var(--mono); color: var(--sea); font-size: 12px; letter-spacing: 0.06em; margin: 8px 0 0; min-height: 1.5em; }
.seq-big { font-family: var(--serif); font-size: clamp(26px, 7vw, 40px); margin: 4px 0 6px; line-height: 1.25; min-height: 1.25em; color: #f3ebe0; }
.seq-sub { color: var(--muted); max-width: 26em; margin: 0 auto; min-height: 3em; font-size: 14px; line-height: 1.6; }
.seq-skip { position: fixed; bottom: calc(16px + var(--safe-b)); left: 0; right: 0; text-align: center; color: var(--faint); font-size: 12px; }
/* 決まった場所の名前は、にじむように浮かび上がる。長い名前は、言葉の切れ目で、行の長さをそろえて折り返す */
.seq-big.reveal { animation: seqreveal 1.1s ease-out both; color: #ffd27a; text-shadow: 0 0 24px rgba(255, 210, 122, 0.28); word-break: auto-phrase; text-wrap: balance; }
@keyframes seqreveal { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .seq-big.reveal { animation: none; } }
/* 決まったあと: 地球のどの辺りか（例「地球の南半球の中緯度、火山島の沖」）を明るく、その下に確率を小さく */
.seq-sub.landed { color: #d5e8ec; }
.seq-odds { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.fade-in { animation: fadein 0.6s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.origin-card {
  max-width: 620px;
  margin: 0 auto;
  padding: calc(16px + var(--safe-t)) 14px calc(24px + var(--safe-b));
}
.doc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(90deg, #3a1c0c, #1b2a33);
  border-bottom: 1px solid var(--line2);
  font-family: var(--serif);
  font-size: 16px;
}
.doc-head .no { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.doc-body { padding: 16px; }
.doc-name { font-family: var(--serif); font-size: 28px; margin: 0; line-height: 1.3; }
.doc-la { font-family: var(--mono); color: var(--muted); font-size: 13px; margin: 2px 0 10px; font-style: italic; }
/* 誕生記録の似顔絵と種類の名前（種類は生まれた場所・種・系統の番号で決まる。色は生まれた場所の色） */
.origin-fig { float: right; width: 84px; margin: 2px 0 8px 12px; text-align: center; }
.origin-pt { display: block; width: 84px; height: 84px; border-radius: 14px; border: 1px solid var(--line2); background: #0c1218; }
.origin-kind { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: #cfe0ec; }
.doc-lead { margin: 0 0 12px; }
/* 誕生記録の「地球のどこ」: 当時の地球の絵（生まれた所に印。描くのは origin.js）と、緯度の帯・まわりのようす。一言は下に横いっぱいに */
.geo-box {
  clear: both;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 6px 12px 10px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
}
.geo-globe { display: block; width: 112px; height: 104px; }
.geo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geo-h { font-size: 11.5px; color: var(--muted); }
.geo-zone { font-size: 17px; line-height: 1.35; color: #ffd9a8; }
.geo-desc { font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.geo-cap { grid-column: 1 / -1; padding-left: 8px; font-size: 11px; line-height: 1.5; color: var(--faint); text-wrap: pretty; }
.doc h3 { font-size: 14px; color: var(--muted); margin: 18px 0 8px; font-weight: 600; }
.doc .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.doc .actions .btn { flex: 1 1 auto; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); white-space: nowrap; }
.kv dd { margin: 0; }
.grid-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.grid-kv div { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.grid-kv span { display: block; font-size: 11px; color: var(--muted); }
.grid-kv b { display: block; font-size: 16px; }
.grid-kv small { display: block; font-size: 11px; color: var(--faint); }

.note {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--sea);
  background: rgba(57, 197, 187, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: #b9d6d3;
}
.note::before { content: "資料　"; color: var(--sea); font-weight: 700; }
/* 誕生記録: この地球のくせの説明は場所の説明のすぐ下に続け、資料は枠をひとつにして2つめの段落にする */
.doc p.world-desc { margin-top: -6px; }
.note .note-2 { display: block; margin-top: 4px; }
.odds-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 138, 61, 0.08);
  border: 1px solid rgba(255, 138, 61, 0.25);
  font-size: 13px;
}
/* 誕生記録で、時間が流れはじめる前に速さを選ぶ */
.speed-pick { display: flex; gap: 6px; }
.spd-opt {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}
.spd-opt.cur { background: #233648; border-color: var(--sea); color: #dffaf7; box-shadow: 0 0 0 1px var(--sea) inset; }
.speed-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); min-height: 2.6em; }

/* ------------------------------------------------------------ プレイ画面 */
#scr-play { padding-bottom: calc(var(--ctl-h) + var(--safe-b) + 12px); }
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 15, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: calc(6px + var(--safe-t)) 14px 6px;
}
.hud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; max-width: 1280px; margin: 0 auto; }
.hud-time { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hud-big { font-family: var(--serif); font-size: 26px; line-height: 1.2; white-space: nowrap; }
.hud-period { font-size: 13px; color: var(--sea); white-space: nowrap; }
.hud-meta { font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.35; min-width: 0; }
.hud-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-bar { height: 4px; background: var(--line); border-radius: 2px; margin: 6px auto 0; max-width: 1280px; overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--sea)); }

/* 操作バー: スマホでは画面下に固定 */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  padding: 8px 10px calc(8px + var(--safe-b));
  background: rgba(13, 20, 27, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ctl {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 4px 6px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--panel2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.ctl[aria-pressed="true"], .ctl.on { background: #2a3f2f; border-color: var(--good); color: #d9ffe7; }
.ctl.pause.on { background: #3a2a16; border-color: var(--accent); color: #ffe2cc; }
.speeds { display: none; gap: 4px; }
.ctl.spd { flex: 0 0 auto; min-width: 46px; }
.ctl.spd.cur { background: #233648; border-color: var(--sea); color: #dffaf7; }
.ctl.cycle { flex: 0.8 1 0; }

.board { display: flex; flex-direction: column; gap: 12px; padding: 12px; max-width: 1280px; margin: 0 auto; }
.col { display: contents; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 15px; }

/* スマホでの並び順 */
.c-scene { order: 1; padding: 0; overflow: hidden; }
.c-stats { order: 2; }
.c-focus { order: 3; }
.c-log { order: 4; }
.c-lineage { order: 5; }
.c-env { order: 6; }
.c-rivals { order: 7; }
.c-timeline { order: 8; }

/* 情景 */
.scene-wrap { position: relative; }
#scene { display: block; width: 100%; height: 200px; background: #06141c; }
.scene-cap { padding: 8px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
/* 情景の下の字幕: いちばん新しいできごと（スマホだけ。768px 以上は「できごと」の欄が見えているので出さない） */
.scene-sub { position: relative; min-height: 3.6em; padding: 8px 14px 9px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.scene-sub:empty { display: none; }
.scene-sub.guide .what { color: #d6e6f2; }
.scene-sub.good .what { color: #b9f0cf; }
.scene-sub.bad .what { color: #ffc2c2; }
.scene-sub.mass .what { color: #ff9fb2; font-weight: 700; }
.scene-sub.era .what { color: #cfdbff; }
.scene-sub.decision .what { color: var(--decision); }
.scene-sub.stage .what { color: #e3ccff; font-weight: 700; }
.scene-sub.death .what { color: var(--bad); font-weight: 700; }
.scene-sub.rival .what { color: #a9b8c6; }
.scene-sub.rival .what::before { content: "ほかの系統　"; color: var(--faint); font-size: 11.5px; }
.scene-sub .sub-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #b9d6d3; }
.scene-sub .sub-note::before { content: "資料　"; color: var(--sea); font-weight: 700; }
.scene-sub .sub-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sea); opacity: 0.8; animation: readbar 3s linear forwards; }
.scene-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  color: #fff;
}

/* 系統 */
.lin-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.lin-portrait { width: 72px; height: 72px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); flex: 0 0 auto; display: grid; place-items: center; font-size: 34px; overflow: hidden; }
.lin-portrait canvas { width: 72px; height: 72px; }
/* いまの姿の種類（例「とげ丸型」）。姿の名前のあとに小さく出す */
.lin-kind { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(199, 155, 255, 0.45); background: rgba(199, 155, 255, 0.1); font-size: 12px; line-height: 1.6; color: #e4d6ff; vertical-align: 1px; }
.lin-ja { font-family: var(--serif); font-size: 20px; line-height: 1.3; }
.lin-la { font-family: var(--mono); font-size: 12px; color: var(--muted); font-style: italic; }
.lin-geo { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); color: #cfe0ec; background: var(--bg2); }

/* 状態 */
.stat { display: grid; grid-template-columns: 4.6em 1fr 2.4em; align-items: center; gap: 8px; margin: 6px 0; }
.st-name { font-size: 13.5px; }
.st-bar { height: 10px; background: var(--bg2); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.st-bar i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 0.25s linear; }
.st-val { text-align: right; font-family: var(--mono); font-size: 13px; }
.st-note { grid-column: 2 / 4; font-size: 11.5px; color: var(--muted); margin-top: -4px; }
#st-A .st-bar i { background: #63d391; }
#st-D .st-bar i { background: #e8c35a; }
#st-F .st-bar i { background: #39c5bb; }
#st-P .st-bar i { background: #c79bff; }
.stat.danger .st-name, .stat.danger .st-val { color: var(--bad); }
.stat.danger .st-bar { border-color: var(--bad); }
details.help { margin-top: 8px; font-size: 13px; color: #c5d3df; }
details.help summary { color: var(--muted); cursor: pointer; padding: 6px 0; }
details.help p { margin: 4px 0; }
details.help b { color: var(--text); }

/* 進化の方向 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: 1 1 calc(50% - 8px);
  min-height: 52px;
  text-align: left;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--bg2);
}
.chip b { display: block; font-size: 14.5px; }
.chip small { display: block; font-size: 11.5px; color: var(--muted); }
.chip.cur { background: #173a37; border-color: var(--sea); }
.chip.cur small { color: #b9e9e4; }
.next-info { margin-top: 10px; font-size: 13px; color: #c5d3df; }
.next-info .ready { color: var(--good); font-weight: 600; }
.next-info .wait { color: var(--muted); }
.auto-note { margin-top: 8px; font-size: 12px; color: var(--good); }

/* できごと */
.log { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
.log li { display: grid; grid-template-columns: 6.6em 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.log li:last-child { border-bottom: 0; }
.log .when { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.log .note { grid-column: 2; margin-top: 2px; }
.log li.good .what { color: #b9f0cf; }
.log li.bad .what { color: #ffc2c2; }
.log li.mass .what { color: #ff9fb2; font-weight: 700; }
.log li.era .what { color: #cfdbff; }
.log li.decision .what { color: var(--decision); }
.log li.stage .what { color: #e3ccff; font-weight: 700; }
.log li.death .what { color: var(--bad); font-weight: 700; }
/* 同じ時代に生まれた系統の知らせ（控えめに。読む間では止めない） */
.log li.rival .what { color: #a9b8c6; font-size: 12.5px; }
.log li.rival .what::before { content: "ほかの系統　"; color: var(--faint); font-size: 11px; }
.log li.new { animation: fadein 0.5s ease both; }
/* はじまりの説明（時間が流れはじめる前に1行ずつ出す） */
.log li.guide .what { color: #d6e6f2; }
.log li.guide .when { color: var(--sea); }
/* できごとで変わった数（個体数 −12 など） */
.fx { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.fx.down { background: rgba(255, 114, 114, 0.14); color: #ffb3b3; }
.fx.up { background: rgba(99, 211, 145, 0.14); color: #a9eec6; }
/* 読む間（時間が止まっている残り）を、その行の下の細い線で見せる */
.log li { position: relative; }
.log li.reading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--sea);
  opacity: 0.8;
  animation: readbar var(--read, 3s) linear forwards;
}
@keyframes readbar { from { width: 100%; } to { width: 0; } }

/* 地球 */
.env-temp-cold { color: #9ad0ff; }
.env-temp-hot { color: #ffb38a; }
.meter { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 3px; background: var(--bg2); border: 1px solid var(--line); margin-left: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }

/* ライバル */
.rivals { list-style: none; margin: 0; padding: 0; }
.rivals li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rivals li:last-child { border-bottom: 0; }
.rivals .rv-name { min-width: 0; }
.rivals .rv-name b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rivals .rv-name small { color: var(--muted); font-size: 11.5px; }
/* 生まれた場所の色の印（系統の見た目の色） */
.rivals .rv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.rivals .rv-st { text-align: right; font-size: 12.5px; white-space: nowrap; }
.rivals .dead { color: var(--faint); }
.rivals .alive { color: var(--good); }

/* 年表 */
.tl { position: relative; height: 34px; margin: 8px 0 6px; }
.tl-bands { position: absolute; inset: 8px 0; display: flex; border-radius: 4px; overflow: hidden; }
.tl-bands div { height: 100%; position: relative; }
.tl-bands div span { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); font-size: 10px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; pointer-events: none; }
.tl-mark { position: absolute; top: 2px; width: 2px; height: 30px; transform: translateX(-1px); }
.tl-mark.mass { background: var(--mass); opacity: 0.85; }
.tl-mark.stage { top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--stage); border: 1px solid #fff; transform: translateX(-4.5px); }
.tl-mark.born { top: 10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--accent); background: none; transform: translateX(-6px); }
.tl-span { position: absolute; top: 6px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 4px; pointer-events: none; }
.tl-now { position: absolute; top: 0; width: 2px; height: 34px; background: #fff; box-shadow: 0 0 8px #fff; transform: translateX(-1px); }
.tl-legend { font-size: 11.5px; color: var(--muted); }
.tl-legend i { display: inline-block; vertical-align: middle; margin: 0 4px 0 10px; }
.tl-legend i:first-child { margin-left: 0; }
.lg-stage { width: 8px; height: 8px; border-radius: 50%; background: var(--stage); }
.lg-mass { width: 2px; height: 12px; background: var(--mass); }
.lg-now { width: 2px; height: 12px; background: #fff; }

/* ------------------------------------------------------------ 決断の札（スマホでは下から出る） */
.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 6, 9, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + var(--safe-b));
  animation: sheetup 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 10px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.kicker { color: var(--decision); font-weight: 700; letter-spacing: 0.06em; }
.kicker.era { color: var(--era); }
.sheet-when { font-family: var(--mono); color: var(--muted); }
.sheet-title { font-family: var(--serif); font-size: 24px; margin: 6px 0 6px; line-height: 1.35; }
.sheet-text { margin: 0; color: #d3dee8; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--bg2);
}
.opt:hover { border-color: var(--decision); }
.opt.pick { border-color: var(--decision); background: #2b2412; }
.opt-n { font-family: var(--mono); color: var(--muted); font-size: 13px; padding-top: 2px; }
.opt b { display: block; font-size: 15.5px; }
.opt small { display: block; color: var(--muted); font-size: 12.5px; }
.opt em { display: inline-block; margin-top: 3px; font-style: normal; font-size: 11.5px; padding: 0 8px; border-radius: 999px; background: rgba(255, 209, 102, 0.12); color: var(--decision); }
.sheet-auto { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.autobar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.autobar i { display: block; height: 100%; width: 0; background: var(--decision); }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.sheet-foot label { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ 重ねて開く画面（遊び方・記録・メニュー） */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 6, 9, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.overlay-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--panel);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(16px + var(--safe-t)) 18px calc(24px + var(--safe-b));
}
.overlay-close {
  position: sticky;
  top: 0;
  float: right;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: var(--panel2);
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}
.overlay h2 { font-family: var(--serif); margin: 4px 0 12px; font-size: 24px; }
.overlay h3 { margin: 18px 0 6px; font-size: 15px; color: var(--sea); }
.overlay p, .overlay li { color: #d3dee8; font-size: 14px; }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; clear: both; }
.menu-list .btn { width: 100%; }
.rec-list { list-style: none; padding: 0; margin: 0; clear: both; }
.rec-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rec-list b { font-family: var(--serif); font-size: 16px; }
.rec-list small { display: block; color: var(--muted); font-size: 12px; }
.rec-list .badge { display: inline-block; font-size: 11px; padding: 0 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.badge.ok { background: #1e3a2a; color: var(--good); }
.badge.ng { background: #3a1e22; color: var(--bad); }
textarea.share-text { width: 100%; min-height: 160px; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 10px; font: inherit; font-size: 13px; }

/* ------------------------------------------------------------ 終わり */
#scr-end { padding: calc(14px + var(--safe-t)) 14px calc(24px + var(--safe-b)); }
.end-wrap { max-width: 640px; margin: 0 auto; }
.doc-head.extinct { background: linear-gradient(90deg, #3a1218, #1b2228); }
.doc-head.reached { background: linear-gradient(90deg, #12392a, #1b2a33); }
.end-path { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.end-path span { padding: 1px 8px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); }
.end-path i { color: var(--faint); font-style: normal; }
.end-events { margin: 0; padding-left: 1.2em; font-size: 13.5px; }
.end-events li { margin: 3px 0; }
/* 絶滅の物語（結果の画面） */
.story { margin: 0 0 12px; }
.story p { margin: 0 0 10px; line-height: 1.85; }
.story p:first-child { font-family: var(--serif); font-size: 15.5px; }
.story p:last-child { margin-bottom: 0; }
/* 絶滅した瞬間の札（最後の数行） */
.kicker.end { color: var(--bad); }
.end-last-h { margin: 14px 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.end-last { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.end-last li { display: grid; grid-template-columns: 6.6em 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.end-last li:last-child { border-bottom: 0; }
.end-last .when { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.end-last .what { color: #e3c9c9; }

/* ------------------------------------------------------------ 通知 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ctl-h) + var(--safe-b) + 18px);
  transform: translateX(-50%) translateY(20px);
  z-index: 70;
  max-width: calc(100% - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  background: #22313f;
  border: 1px solid var(--line2);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 絶滅の瞬間のゆれ */
.shake { animation: shake 0.45s ease; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}

/* ------------------------------------------------------------ 768px 以上（タブレット・PC） */
@media (min-width: 768px) {
  #scene { height: 260px; }
  .scene-sub { display: none; }
  .controls {
    position: sticky;
    top: 58px;
    bottom: auto;
    z-index: 19;
    max-width: 1280px;
    margin: 0 auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 15, 20, 0.92);
    padding: 8px 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .ctl { flex: 0 0 auto; min-height: 40px; padding: 4px 14px; }
  .speeds { display: flex; }
  .ctl.cycle { display: none; }
  #scr-play { padding-bottom: 24px; }
  .toast { bottom: 24px; }
  .board { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .col-c { grid-column: 1; grid-row: 1 / span 2; }
  .col-l { grid-column: 2; grid-row: 1; }
  .col-r { grid-column: 2; grid-row: 2; }
  .card { order: 0 !important; }
  .chip { flex: 1 1 calc(33% - 8px); }
  .log { max-height: 460px; }
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 18px; border-bottom: 1px solid var(--line2); max-height: 86vh; padding-bottom: 16px; }
  .sheet-grip { display: none; }
  .overlay { align-items: center; padding: 24px; }
  .overlay-panel { border-radius: 18px; max-height: 90vh; border: 1px solid var(--line2); }
  .grid-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ 1100px 以上（3列） */
@media (min-width: 1100px) {
  .board { grid-template-columns: 290px minmax(0, 1fr) 310px; }
  .col-l { grid-column: 1; grid-row: 1; }
  .col-c { grid-column: 2; grid-row: 1; }
  .col-r { grid-column: 3; grid-row: 1; }
  #scene { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ 演出（進化・時代の節目・現在への到達） */
/* 進化は紫、節目（めったに届かない姿・時代の節目・現在）は金色。触れると閉じる */
.fanfare {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(4, 7, 11, 0.94);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  --ff: 199, 155, 255;
  animation: ffin 0.25s ease both;
}
.fanfare.gold, .fanfare.era, .fanfare.present { --ff: 255, 209, 102; }
.fanfare.out { animation: ffout 0.28s ease both; pointer-events: none; }
@keyframes ffin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ffout { from { opacity: 1; } to { opacity: 0; } }
.ff-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 36%, rgba(var(--ff), 0.45) 0, rgba(var(--ff), 0.12) 34%, rgba(var(--ff), 0) 64%);
  animation: ffglow 2.2s ease-in-out infinite alternate;
}
@keyframes ffglow { from { opacity: 0.6; } to { opacity: 1; } }
.ff-rays {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 140vmin;
  height: 140vmin;
  margin: -70vmin 0 0 -70vmin;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(var(--ff), 0.22) 0deg 4deg, rgba(var(--ff), 0) 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 26%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 26%, transparent 62%);
  animation: ffspin 32s linear infinite;
}
.fanfare.evolve .ff-rays { opacity: 0.6; }
@keyframes ffspin { to { transform: rotate(360deg); } }
.ff-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ff-body {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 100%;
  overflow-x: hidden; /* 広がる光で横に揺れないように */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(18px + var(--safe-t)) 18px calc(18px + var(--safe-b));
  text-align: center;
}
.ff-inner { display: flex; flex-direction: column; align-items: center; }
.ff-kicker { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.35em; color: rgb(var(--ff)); animation: ffup 0.4s ease both; }
.ff-badge {
  display: inline-block;
  padding: 3px 12px 3px 17px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ff), 0.85);
  background: rgba(var(--ff), 0.16);
  color: #ffe6a8;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  box-shadow: 0 0 18px rgba(var(--ff), 0.45);
}
.ff-title {
  margin: 2px 0 6px;
  font-family: var(--serif);
  font-size: clamp(34px, 11vw, 56px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 22px rgba(var(--ff), 0.95), 0 0 3px rgba(255, 255, 255, 0.9);
  animation: ffpop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.15s both;
}
@keyframes ffpop { from { opacity: 0; transform: scale(0.55); letter-spacing: 0.3em; } to { opacity: 1; transform: none; } }
.ff-when { margin: 0 0 8px; font-family: var(--mono); font-size: 13px; color: #d6e4ef; animation: ffup 0.5s ease 0.3s both; }
.ff-line, .ff-text { margin: 0; max-width: 26em; font-size: 15px; color: #e9f0f6; animation: ffup 0.5s ease 0.45s both; }
.ff-hint { margin: 16px 0 0; font-size: 12px; color: var(--muted); animation: ffup 0.5s ease 1.5s both; }
.ff-autobar { width: 150px; height: 3px; margin: 8px auto 0; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.ff-autobar i { display: block; width: 0; height: 100%; background: rgb(var(--ff)); }
@keyframes ffup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ff-rare {
  margin: 14px 0 0;
  padding: 9px 18px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--ff), 0.55);
  background: rgba(var(--ff), 0.1);
  font-size: 13px;
  color: #ffe9bd;
  animation: ffup 0.5s ease 0.6s both;
}
.ff-rare span { display: block; }
.ff-rare b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.3; color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, 0.5); }
.ff-rare small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

/* 進化: 前の姿が光って、新しい姿に変わる */
.ff-morph { position: relative; width: 128px; height: 128px; margin: 6px 0 12px; }
.ff-pt { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--ff), 0.75), 0 0 34px rgba(var(--ff), 0.6); }
.ff-pt.from { animation: fffrom 1.3s ease-in both; }
.ff-pt.to { animation: ffto 1.3s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.ff-arrow { display: none; }
.ff-burst {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0.9) 20%, rgba(var(--ff), 0.55) 42%, rgba(var(--ff), 0) 70%);
  animation: ffburst 1.3s ease-out both;
}
@keyframes fffrom {
  0% { opacity: 1; transform: none; }
  30% { transform: scale(0.97) rotate(-4deg); }
  42% { transform: scale(1.03) rotate(4deg); }
  54% { transform: scale(0.98) rotate(-3deg); filter: brightness(1.7); }
  66% { opacity: 1; transform: scale(1.08); filter: brightness(2.6); }
  76%, 100% { opacity: 0; transform: scale(1.5); filter: brightness(3); }
}
@keyframes ffto { 0%, 64% { opacity: 0; transform: scale(0.3); } 82% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes ffburst { 0%, 58% { opacity: 0; transform: scale(0.3); } 68% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.ff-from { margin: 0; font-size: 13px; color: var(--muted); animation: ffup 0.4s ease 0.1s both; }
/* 新しい姿の種類（例「とげ丸型」） */
.ff-kind { margin: 0 0 6px; font-size: 15px; color: #e4d6ff; animation: ffup 0.5s ease 0.95s both; }
.ff-evolve .ff-title { animation-delay: 0.85s; }
.ff-evolve .ff-when { animation-delay: 1.05s; }
.ff-evolve .ff-line { animation-delay: 1.2s; }
.ff-evolve .ff-rare { animation-delay: 1.45s; }

/* 時代の節目 */
.ff-era .ff-title { font-size: clamp(40px, 13vw, 64px); }
.ff-ribbon { position: relative; width: 100%; max-width: 360px; margin: 4px 0 12px; animation: ffup 0.5s ease 0.35s both; }
.ff-ribbon .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.ff-ribbon .bar i { height: 100%; opacity: 0.28; }
.ff-ribbon .bar i.past { opacity: 0.75; }
.ff-ribbon .bar i.now { opacity: 1; }
.ff-ribbon .mk { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px rgb(var(--ff)); }
.ff-ribbon .ends { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10.5px; color: var(--faint); }
.ff-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 380px; margin: 10px 0 0; animation: ffup 0.5s ease 0.7s both; }
.ff-stats div { padding: 7px 6px; border-radius: 10px; border: 1px solid rgba(var(--ff), 0.3); background: rgba(255, 255, 255, 0.04); }
.ff-stats span { display: block; font-size: 11px; line-height: 1.35; color: var(--muted); }
.ff-stats b { display: block; font-size: 16px; line-height: 1.4; color: #fff; }
.ff-sub-h { margin: 12px 0 6px; font-size: 12px; color: var(--muted); animation: ffup 0.5s ease 0.8s both; }
.ff-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; animation: ffup 0.5s ease 0.85s both; }
.ff-chip { padding: 1px 10px; border-radius: 999px; border: 1px solid rgba(255, 77, 109, 0.45); background: rgba(255, 77, 109, 0.14); font-size: 12px; color: #ffd0da; }
.ff-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 14px; animation: ffup 0.5s ease 0.9s both; }
.ff-actions .btn { min-width: 220px; }
.ff-actions .ff-hint { margin-top: 0; }
.ff-off { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* 現在への到達（いちばん豪華に） */
.ff-present .ff-title { font-size: clamp(38px, 12vw, 66px); animation: none; }
.ff-title .ch { display: inline-block; animation: ffch 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
@keyframes ffch { from { opacity: 0; transform: translateY(26px) scale(0.4); } to { opacity: 1; transform: none; } }
.ff-present .ff-when { animation-delay: 0.85s; }
.ff-name { margin: 4px 0 0; font-family: var(--serif); font-size: 19px; color: #ffe9bd; animation: ffup 0.5s ease 0.95s both; }
.ff-la { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; font-style: italic; color: var(--muted); animation: ffup 0.5s ease 1s both; }
.ff-path { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 3px; max-width: 440px; margin: 6px 0 8px; }
.ff-path canvas { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--ff), 0.65); animation: ffdot 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
.ff-path canvas.last { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgb(var(--ff)), 0 0 18px rgba(var(--ff), 0.7); }
.ff-path i { font-style: normal; font-size: 12px; color: rgba(var(--ff), 0.75); animation: ffdot 0.45s ease both; }
@keyframes ffdot { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.ff-present .ff-text { animation-delay: 1.4s; }
.ff-present .ff-rare { animation-delay: 1.6s; }
.ff-present .ff-sub-h { animation-delay: 1.8s; }
.ff-present .ff-chips { animation-delay: 1.85s; }
.ff-present .ff-actions { animation-delay: 2s; }

/* 情景の上に短く出す時代の節目（時間は止めない） */
.scene-banner {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 12px 8px;
  border-radius: 10px;
  border: 1px solid rgba(157, 180, 255, 0.55);
  background: rgba(6, 11, 18, 0.84);
  font-size: 12.5px;
  line-height: 1.5;
  color: #dfe7f1;
  pointer-events: none;
  animation: sbanner 4.2s ease both;
}
.scene-banner b { display: block; font-family: var(--serif); font-size: 17px; color: var(--era); }
@keyframes sbanner { 0% { opacity: 0; transform: translateY(10px); } 10%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 控えめな悪い知らせ（進化の失敗など） */
.toast.fail { border-color: rgba(255, 114, 114, 0.55); background: #2a1d22; color: #ffd6d6; }

@media (max-height: 640px) {
  .ff-morph { width: 104px; height: 104px; }
  .ff-title { font-size: clamp(30px, 10vw, 46px); }
  .ff-rare b { font-size: 22px; }
}
@media (min-width: 768px) {
  .ff-morph { width: 150px; height: 150px; }
  .ff-path canvas { width: 40px; height: 40px; }
  .ff-path canvas.last { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  /* 動きを止め、前の姿と新しい姿を並べて見せる */
  .ff-glow, .ff-rays, .scene-banner { animation: none; }
  .ff-morph { display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: auto; }
  .ff-pt.from, .ff-pt.to { position: static; width: 96px; height: 96px; animation: none; }
  .ff-pt.from { opacity: 0.55; }
  .ff-arrow { display: block; font-size: 22px; color: rgb(var(--ff)); }
  .ff-burst { display: none; }
}