:root {
  --bg: #f2f6fc;
  --card: #ffffff;
  --ink: #1d2a4a;
  --sub: #5b6785;
  --line: #dde4f0;
  --accent: #ff6b57;
  --accent-ink: #ffffff;
  --mint: #12957f;
  --mint-soft: #e2f5f0;
  --warn: #c2412f;
  --warn-soft: #fdeceb;
  --sky: #3d6fd8;
  --sky-soft: #e8efff;
  --yomi: #7f93ad;
  --yomi-belly: #c9d4e2;
  --shadow: 0 2px 10px rgba(29, 42, 74, 0.07);
  --radius: 16px;
  --yomi-crest: #6c809b; --yomi-brow: #4d5d76; --bill: #e6d29b; --bill-line: #a88f55;
  --c-dev: #3d6fd8; --c-exp: #12957f; --c-tie: #d9607e; --c-genki: #e8962c; --c-money: #b8941f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111827; --card: #1b2438; --ink: #e8edf7; --sub: #a3aec6; --line: #2d3953;
    --accent: #ff7d6b; --accent-ink: #1a1010; --mint: #45cdb3; --mint-soft: #173832;
    --warn: #ff8f80; --warn-soft: #3a1f1d; --sky: #86a8ff; --sky-soft: #1f2c4a;
    --yomi: #8fa3be; --yomi-belly: #3e4d66; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    --yomi-crest: #7b8fab; --yomi-brow: #2b3850;
    --c-dev: #86a8ff; --c-exp: #45cdb3; --c-tie: #f08aa3; --c-genki: #f4b25a; --c-money: #e0c050;
  }
}
:root[data-theme="dark"] {
  --bg: #111827; --card: #1b2438; --ink: #e8edf7; --sub: #a3aec6; --line: #2d3953;
  --accent: #ff7d6b; --accent-ink: #1a1010; --mint: #45cdb3; --mint-soft: #173832;
  --warn: #ff8f80; --warn-soft: #3a1f1d; --sky: #86a8ff; --sky-soft: #1f2c4a;
  --yomi: #8fa3be; --yomi-belly: #3e4d66; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --yomi-crest: #7b8fab; --yomi-brow: #2b3850;
  --c-dev: #86a8ff; --c-exp: #45cdb3; --c-tie: #f08aa3; --c-genki: #f4b25a; --c-money: #e0c050;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px; line-height: 1.75; overflow-x: hidden;
}
a { color: var(--sky); }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }

/* ヘッダー */
.top-bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-bar .in { max-width: 720px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px; }
.logo { white-space: nowrap; font-weight: 900; letter-spacing: 0.06em; font-size: 18px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.logo small { font-size: 11px; color: var(--sub); font-weight: 500; letter-spacing: 0; }
.top-bar .sp { flex: 1; }
.chip-btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: 14px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.chip-btn.matta { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* カード */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 14px; }
.card h2 { font-size: 18px; margin: 0 0 8px; }
.card h3 { font-size: 15px; margin: 14px 0 6px; color: var(--sub); }
.muted { color: var(--sub); font-size: 14px; }
.tiny { font-size: 12px; color: var(--sub); }

/* トップ */
.hero { text-align: center; padding: 28px 0 8px; }
.hero h1 { font-size: 44px; margin: 8px 0 0; letter-spacing: 0.08em; line-height: 1.2; }
.hero .kana { font-size: 15px; color: var(--sub); letter-spacing: 0.3em; }
.hero p.lead { font-size: 17px; margin: 14px auto 0; max-width: 30em; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.feature { background: var(--bg); border-radius: 12px; padding: 12px; }
.feature b { display: block; margin-bottom: 2px; }
.feature span { font-size: 14px; color: var(--sub); }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 16px; background: var(--accent); color: var(--accent-ink); min-height: 48px; text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 2px solid var(--line); color: var(--ink); }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 140px; }

/* 選択肢 */
.choices { display: grid; gap: 8px; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choice { text-align: left; border: 2px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-height: 52px; }
.choice[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); }
.choice:disabled { opacity: 0.55; cursor: not-allowed; }
.choice .main { flex: 1; min-width: 0; }
.choice .main b { display: block; }
.choice .main small { display: block; color: var(--sub); font-size: 13px; line-height: 1.5; }
.chance { flex: none; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.chance.c大 { background: var(--mint-soft); color: var(--mint); }
.chance.c中 { background: var(--sky-soft); color: var(--sky); }
.chance.c小 { background: var(--warn-soft); color: var(--warn); }
.share-bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.share-bar i { display: block; height: 100%; background: var(--sky); }

/* ステータス */
.status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.stat { background: var(--card); border-radius: 12px; padding: 6px 8px; box-shadow: var(--shadow); min-width: 0; }
.stat .k { font-size: 11px; color: var(--sub); display: block; }
.stat .v { font-weight: 900; font-size: 17px; white-space: nowrap; }
.stat .bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 2px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--mint); }
.stat .bar i.low { background: var(--warn); }
.age-line { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.age-line .age { font-size: 30px; font-weight: 900; }
.age-line .stage { color: var(--sub); }

/* ヨミ */
.yomi { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.yomi svg { flex: none; }
.bubble { background: var(--card); border-radius: 4px 16px 16px 16px; padding: 10px 14px; box-shadow: var(--shadow); flex: 1; }
.bubble .name { font-size: 12px; color: var(--yomi); font-weight: 700; display: block; }

/* 結果・できごと */
.banner { border-radius: 12px; padding: 10px 14px; margin-top: 14px; font-weight: 700; }
.banner.ok { background: var(--mint-soft); color: var(--mint); }
.banner.ng { background: var(--warn-soft); color: var(--warn); }
.event { border-left: 4px solid var(--sky); padding: 6px 12px; margin-top: 12px; background: var(--card); border-radius: 0 12px 12px 0; }
.event small { color: var(--sub); display: block; font-size: 12px; }

/* 配分 */
.alloc-head { display: flex; justify-content: space-between; align-items: baseline; }
.dots { display: flex; gap: 4px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); display: inline-block; }
.dots i.used { background: var(--line); }
.alloc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.alloc-row:first-of-type { border-top: 0; }
.alloc-row .lab { flex: 1; min-width: 0; }
.alloc-row .lab small { display: block; color: var(--sub); font-size: 12px; }
.step-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); font-size: 20px; font-weight: 700; line-height: 1; }
.step-btn:disabled { opacity: 0.35; }
.alloc-row .num { width: 22px; text-align: center; font-weight: 900; font-size: 18px; }

/* 同級生 */
.mates { display: grid; gap: 6px; }
.mate { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.mate .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; flex: none; font-size: 13px; }

/* 地図 */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; }
.sheet .wrap { padding-top: 8px; }
.map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); margin-top: 10px; }
.map-scroll svg { display: block; }
.map-node { cursor: pointer; }
.map-node text { font-size: 11px; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.map-edge { stroke: var(--line); stroke-width: 2; fill: none; }
.map-edge.on { stroke: var(--sky); stroke-width: 3; }
.lives { display: grid; gap: 8px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.cmp th, .cmp td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; word-break: break-all; }
.cmp th { color: var(--sub); font-weight: 500; width: 28%; }

/* エンディング */
.ending-card { background: linear-gradient(160deg, var(--sky-soft), var(--card)); }
.ending-card .big { font-size: 26px; font-weight: 900; line-height: 1.4; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fact { background: var(--card); border-radius: 12px; padding: 8px 10px; }
.fact .k { font-size: 12px; color: var(--sub); display: block; }
.fact .v { font-weight: 700; }
.letter { white-space: pre-wrap; }
.share-img { width: 100%; border-radius: 12px; margin-top: 10px; box-shadow: var(--shadow); }

.foot { text-align: center; font-size: 13px; color: var(--sub); margin-top: 32px; }
.foot a { color: var(--sub); }
.sos li { margin-bottom: 8px; }
.sos b { display: block; }
table.src { width: 100%; border-collapse: collapse; font-size: 14px; }
table.src th, table.src td { border-bottom: 1px solid var(--line); padding: 8px 4px; text-align: left; vertical-align: top; }

@media (max-width: 420px) {
  .hero h1 { font-size: 36px; }
  .status { grid-template-columns: repeat(2, 1fr); }
  .choices.two { grid-template-columns: 1fr; }
  .logo small { display: none; }
}

/* ---- パラメータ ---- */
.status-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-top: 8px; }
.srow { display: grid; grid-template-columns: 4.2em 1fr 4.6em 4.4em; align-items: center; gap: 8px; height: 30px; }
.srow .k { font-size: 13px; color: var(--sub); white-space: nowrap; }
.srow .v { font-weight: 900; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbar { position: relative; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.sbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sbar .fill.low { animation: lowpulse 1.2s ease-in-out infinite; }
.sbar .ghost { position: absolute; top: 0; bottom: 0; opacity: 0.35; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 3px, transparent 3px 6px); transition: left 0.25s, width 0.25s; }
.sbar .ghost.neg { background: var(--warn) !important; opacity: 0.45; }
.dz { display: flex; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pop { animation: popup 1.6s ease-out both; }
.pop.up, .pv.up { color: var(--mint); }
.pop.down, .pv.down { color: var(--warn); }
.pv { opacity: 0.85; }
.pv-note { margin: 4px 0 0; }
@keyframes popup { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 35% { transform: scale(1); } 100% { opacity: 1; } }
@keyframes lowpulse { 50% { opacity: 0.55; } }

/* チャンスの目盛り */
.chance-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.meter { width: 76px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; animation: grow 0.6s ease-out both; transform-origin: left; }
.meter.c大 i { background: var(--mint); } .meter.c中 i { background: var(--sky); } .meter.c小 i { background: var(--warn); }
@keyframes grow { from { transform: scaleX(0); } }

/* 結果とできごとの出方 */
.banner { animation: bannerin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.event { animation: slidein 0.5s 0.15s ease-out both; }
@keyframes bannerin { from { opacity: 0; transform: scale(0.92); } }
@keyframes slidein { from { opacity: 0; transform: translateX(-12px); } }

/* ヨミの動き：ゆっくり上下・ときどきまばたき・首をかしげる */
.yomi-svg { overflow: visible; animation: bob 3.2s ease-in-out infinite; }
.yomi-head { transform-box: view-box; transform-origin: 22px 40px; animation: tilt 7s ease-in-out infinite; }
.yomi-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.yomi-svg.walk { animation: hop 0.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes hop { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 78%, 88% { transform: rotate(-7deg); } }

/* 時間が過ぎていく */
.pass { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; }
.pass[hidden] { display: none; }
.pass-in { text-align: center; padding: 16px; width: min(420px, 100%); }
.pass-age { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-weight: 900; margin-top: 6px; }
.pass-age span { font-size: 40px; color: var(--sub); }
.pass-age .to { font-size: 56px; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity 0.4s 0.9s, transform 0.4s 0.9s; }
.pass.run .pass-age .to { opacity: 1; transform: none; }
.pass-age b { color: var(--accent); }
.pass-bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.pass-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), var(--accent)); transition: width 1.3s linear; }
.pass.run .pass-bar i { width: 100%; }
.pass-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); }

/* レーダー */
.radar-wrap { text-align: center; margin-top: 10px; }
.radar { max-width: 100%; height: auto; }
.r-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.r-label { font-size: 12px; fill: var(--sub); }
.r-shape { fill-opacity: 0.25; stroke-width: 2.5; stroke-linejoin: round; transform-origin: center; transform-box: view-box; animation: radarin 0.9s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes radarin { from { transform: scale(0); opacity: 0; } }

@media (max-width: 420px) {
  .srow { grid-template-columns: 3.8em 1fr 4.2em 3.6em; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.pv-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin: 4px 0 6px; min-height: 22px; }
.pv-line .pv { font-weight: 700; }

/* ===== 動き ===== */
/* 背景：ゆっくり流れる色 */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40vmax 40vmax at 15% 20%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 70%),
              radial-gradient(35vmax 35vmax at 85% 70%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
              radial-gradient(30vmax 30vmax at 60% 10%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 70%);
  background-size: 140% 140%; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { 0% { background-position: 0% 0%, 100% 100%, 50% 0%; } 100% { background-position: 30% 20%, 70% 80%, 20% 30%; } }

/* 画面に入るとき：上から順にふわっと */
.enter > * { animation: fadeup 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.enter > *:nth-child(2) { animation-delay: 0.05s; } .enter > *:nth-child(3) { animation-delay: 0.1s; }
.enter > *:nth-child(4) { animation-delay: 0.15s; } .enter > *:nth-child(5) { animation-delay: 0.2s; }
.enter > *:nth-child(6) { animation-delay: 0.25s; } .enter > *:nth-child(n+7) { animation-delay: 0.3s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }

/* 押したときの手ごたえ */
.btn, .choice, .step-btn, .chip-btn { transition: transform 0.12s ease, box-shadow 0.2s, border-color 0.2s, background-color 0.2s; }
.btn:not(:disabled):active, .choice:not(:disabled):active, .step-btn:not(:disabled):active, .chip-btn:active { transform: scale(0.95); }
@media (hover: hover) { .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
  .choice:not(:disabled):hover { border-color: color-mix(in srgb, var(--sky) 50%, var(--line)); transform: translateY(-1px); } }
.choice[aria-pressed="true"] { animation: picked 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes picked { 40% { transform: scale(1.03); } }
.btn.wide:not(:disabled)[data-act="go"] { animation: ready 1.8s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent); } }
.dots i:not(.used) { animation: dotpulse 1.4s ease-in-out infinite; }
.dots i:not(.used):nth-child(2) { animation-delay: 0.1s; } .dots i:not(.used):nth-child(3) { animation-delay: 0.2s; }
.dots i:not(.used):nth-child(4) { animation-delay: 0.3s; } .dots i:not(.used):nth-child(5) { animation-delay: 0.4s; }
@keyframes dotpulse { 50% { transform: scale(1.25); } }
.step-btn:not(:disabled):active { background: var(--sky-soft); }

/* 結果：合格はヨミが跳ねる、不合格はゆれてしょんぼり */
.banner.shake { animation: shake 0.5s 0.1s both; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.yomi-svg.happy { animation: jump 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 3; }
@keyframes jump { 40% { transform: translateY(-12px) rotate(-6deg); } }
.yomi-svg.sad .yomi-head { animation: droop 2.2s ease-in-out both; }
@keyframes droop { 20%, 75% { transform: rotate(14deg) translateY(2px); } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }

/* トップ：分かれ道 */
.hero-svg { max-width: 100%; height: auto; overflow: visible; }
.hp { fill: none; stroke: color-mix(in srgb, var(--sky) 55%, var(--line)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hend { opacity: 0; animation: popin 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; transform-box: fill-box; transform-origin: center; }
.hend circle { fill: var(--accent); }
.hjob { font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; transition: opacity 0.35s, transform 0.35s; }
.hjob.out { opacity: 0; }
.spark { fill: var(--accent); opacity: 0.9; filter: drop-shadow(0 0 3px var(--accent)); }
@keyframes popin { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
.title-drop span { display: inline-block; animation: drop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) rotate(-8deg); } }

/* 時間経過：道とヨミ、季節の色 */
.pass.one { background: linear-gradient(120deg, #fde7ee, #e3f6e8, #fdf0dc, #e4ecfb) 0 0 / 400% 100%; }
.pass.many { background: linear-gradient(120deg, #e8efff, #fff1ea, #e7f7f1, #efe9ff) 0 0 / 400% 100%; }
.pass.run { animation: season 1.4s linear forwards; }
@keyframes season { to { background-position: 100% 0; } }
.road { position: relative; height: 64px; margin: 8px 0 2px; }
.road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 10px; border-radius: 5px; background: var(--line); }
.road-fill { position: absolute; left: 0; bottom: 6px; height: 10px; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--sky), var(--accent)); transition: width 1.3s linear; }
.walker { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); transition: left 1.3s linear; }
.pass.run .road-fill { width: 100%; }
.pass.run .walker { left: calc(100% - 24px); }
.pass-ticks span { transition: color 0.2s, transform 0.2s; display: inline-block; }
.pass.run .pass-ticks span { color: var(--accent); font-weight: 700; transform: translateY(-2px); }
.pass-age .to { opacity: 1; transform: none; transition: none; color: var(--accent); }
.pass-in > p:first-of-type { animation: fadeup 0.4s both; }

/* エンディング：カードが順に出る */
.ending-card .big { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes reveal { from { opacity: 0; transform: scale(0.9); letter-spacing: 0.2em; } }
.ending-card .fact { animation: fadeup 0.45s both; }
.ending-card .fact:nth-child(1) { animation-delay: 0.4s; } .ending-card .fact:nth-child(2) { animation-delay: 0.5s; }
.ending-card .fact:nth-child(3) { animation-delay: 0.6s; } .ending-card .fact:nth-child(4) { animation-delay: 0.7s; }
.ending-card .fact:nth-child(5) { animation-delay: 0.8s; } .ending-card .fact:nth-child(6) { animation-delay: 0.9s; }
.ending-card .radar .r-shape { animation-delay: 1s; }

/* 地図：線が伸びる・丸が出る */
.map-edge { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.5s ease-out forwards; }
.map-node { animation: popin 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; transform-box: fill-box; transform-origin: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pass.one { background-image: linear-gradient(120deg, #3a2430, #1f3a2a, #3d3020, #1e2a45); }
  :root:not([data-theme="light"]) .pass.many { background-image: linear-gradient(120deg, #1e2a45, #3a2a24, #1f3632, #2c2645); }
}
:root[data-theme="dark"] .pass.one { background-image: linear-gradient(120deg, #3a2430, #1f3a2a, #3d3020, #1e2a45); }
:root[data-theme="dark"] .pass.many { background-image: linear-gradient(120deg, #1e2a45, #3a2a24, #1f3632, #2c2645); }