/* extras.css — タイトル・図鑑・設定・月の巡り・章・大星灯・エンディング・おかえり（接頭辞 .ex-）。
   共通の変数・部品は style.css（docs/engine_api.md §8）。 */

/* ================================================================== タイトル */
.ex-title {
  position: absolute; inset: 0; overflow: hidden; background: var(--ink);
  opacity: 0; transition: opacity 1s ease, filter .6s ease;
}
.ex-title.show { opacity: 1; }
.ex-title.leaving { opacity: 0; filter: brightness(1.6) blur(2px); transition: opacity .6s ease, filter .6s ease; pointer-events: none; }
.ex-title-bg {
  position: absolute; inset: -4%;
  background: var(--ink) center 62% / cover no-repeat;
  image-rendering: pixelated;
  will-change: transform;
}
.ex-title-fx {
  position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px);
  pointer-events: none; image-rendering: pixelated; will-change: transform;
}
.ex-title-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 9, 30, .78) 0%, rgba(7, 9, 30, .42) 30%, rgba(7, 9, 30, 0) 58%),
    linear-gradient(0deg, rgba(7, 9, 30, .7) 0%, rgba(7, 9, 30, 0) 34%),
    radial-gradient(ellipse 120% 100% at 60% 45%, transparent 55%, rgba(4, 5, 18, .6) 100%);
}
.ex-title-main {
  position: absolute; top: 0; bottom: 0; left: calc(var(--safe-left) + max(28px, 5.5vw));
  width: min(640px, 56vw);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--safe-top) + max(28px, 8vh)) 0 calc(var(--safe-bottom) + max(30px, 8vh));
  will-change: transform;
}

/* ---- ロゴ ---- */
.ex-logo-wrap { position: relative; animation: exLogoIn 1.6s cubic-bezier(.2, .8, .2, 1) both .2s; }
@keyframes exLogoIn { from { opacity: 0; transform: translateY(-14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ex-logo { position: relative; margin: 0; font-family: var(--font-dot); font-weight: normal; line-height: 1.16; letter-spacing: .03em; }
.ex-logo-layer { display: flex; flex-direction: column; align-items: flex-start; }
.ex-logo-front { position: absolute; inset: 0; }
.ex-logo-line { display: block; white-space: nowrap; }
.ex-logo-ch {
  display: inline-block;
  animation: exWave 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.21s);
}
@keyframes exWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.07em); } }
.ex-logo-back .ex-logo-ch {
  color: #3a1d5c;
  text-shadow:
    .06em 0 0 #1a0b38, -.06em 0 0 #1a0b38, 0 .06em 0 #1a0b38, 0 -.06em 0 #1a0b38,
    .06em .06em 0 #1a0b38, -.06em .06em 0 #1a0b38, .06em -.06em 0 #1a0b38, -.06em -.06em 0 #1a0b38,
    0 .14em 0 #0b0620, .06em .14em 0 #0b0620, -.06em .14em 0 #0b0620;
}
.ex-logo-back { filter: drop-shadow(0 0 .18em rgba(255, 191, 94, .55)) drop-shadow(0 0 .5em rgba(255, 140, 70, .3)); animation: exGlow 3.8s ease-in-out infinite; }
@keyframes exGlow {
  0%, 100% { filter: drop-shadow(0 0 .16em rgba(255, 191, 94, .5)) drop-shadow(0 0 .45em rgba(255, 140, 70, .25)); }
  35% { filter: drop-shadow(0 0 .24em rgba(255, 210, 120, .75)) drop-shadow(0 0 .7em rgba(255, 150, 80, .45)); }
  60% { filter: drop-shadow(0 0 .14em rgba(255, 191, 94, .45)) drop-shadow(0 0 .4em rgba(255, 140, 70, .22)); }
  75% { filter: drop-shadow(0 0 .22em rgba(255, 220, 140, .7)) drop-shadow(0 0 .62em rgba(255, 160, 90, .4)); }
}
.ex-logo-front .ex-logo-ch {
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%),
    linear-gradient(180deg, #fffdf2 0%, #fff0c0 34%, #ffd27a 62%, #f6a24e 86%, #e5813a 100%);
  background-size: 400% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: exWave 4.6s ease-in-out infinite, exShine 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.21s), calc(var(--i) * .07s + 1.4s);
}
@keyframes exShine { 0%, 62% { background-position: 120% 0, 0 0; } 82%, 100% { background-position: -20% 0, 0 0; } }
.ex-logo-sparkles { position: absolute; inset: 0 0 30% 0; pointer-events: none; }
.ex-sparkle {
  position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px;
  opacity: 0; animation: exSparkle 3.2s ease-in-out infinite; animation-delay: var(--d);
}
.ex-sparkle::before, .ex-sparkle::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff6d8; box-shadow: 0 0 6px #ffd98a; }
.ex-sparkle::before { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.ex-sparkle::after { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
@keyframes exSparkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(-90deg); } 84% { opacity: 1; transform: scale(1) rotate(0deg); } }
.ex-logo-sub {
  margin-top: 14px; font-family: var(--font-dot); font-size: 16px; letter-spacing: .18em; color: var(--lavender);
  text-shadow: 0 2px 0 #10072a, 0 0 10px rgba(183, 162, 255, .6);
  opacity: 0; animation: exFadeUp 1.2s ease both 1.1s;
}
@keyframes exFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- メニュー ---- */
.ex-title-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; animation: exFadeUp 1s ease both 1.4s; }
.ex-title-btn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: min(340px, 100%); padding: 12px 22px 12px 40px;
  font-family: var(--font-dot); font-size: 22px; line-height: 1.2; color: var(--cream); text-align: left;
  background: linear-gradient(90deg, rgba(14, 18, 52, .9), rgba(14, 18, 52, .55));
  border: 2px solid rgba(255, 217, 138, .38); border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(16, 7, 42, .85), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .4);
  cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.ex-title-btn::before {
  content: '✦'; position: absolute; left: 14px; top: 13px; font-size: 16px; color: var(--honey);
  opacity: .35; transition: opacity .2s, transform .2s; text-shadow: 0 0 8px var(--amber);
}
.ex-title-btn:hover, .ex-title-btn:focus-visible { transform: translateX(6px); border-color: var(--honey); outline: none;
  box-shadow: 0 0 0 2px rgba(16, 7, 42, .85), 0 0 18px rgba(255, 191, 94, .45), 0 8px 22px rgba(0, 0, 0, .4); }
.ex-title-btn:hover::before, .ex-title-btn:focus-visible::before { opacity: 1; transform: rotate(45deg) scale(1.15); }
.ex-title-btn.primary { border-color: rgba(255, 217, 138, .85); background: linear-gradient(90deg, rgba(70, 44, 24, .9), rgba(28, 22, 60, .7)); }
.ex-title-btn.primary .ex-btn-label { color: var(--honey); text-shadow: 0 0 12px rgba(255, 191, 94, .6), 0 2px 0 #10072a; }
.ex-title-btn.primary::before { opacity: 1; animation: exBlink 1.6s ease-in-out infinite; }
@keyframes exBlink { 50% { opacity: .35; } }
.ex-title-btn.chosen { animation: exChosen .6s ease-out; }
@keyframes exChosen { 0% { filter: brightness(1); } 30% { filter: brightness(2.2); transform: translateX(10px) scale(1.03); } 100% { filter: brightness(1.2); } }
.ex-save-info { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); }
.ex-save-moon canvas { width: 28px; height: 28px; display: block; }
.ex-save-text { display: flex; flex-direction: column; line-height: 1.3; }
.ex-save-ch { font-family: var(--font-dot); font-size: 14px; color: var(--lavender); }
.ex-save-sub { font-size: 12px; color: var(--muted); }
.ex-title-hint {
  position: absolute; left: calc(var(--safe-left) + max(28px, 5.5vw)); bottom: calc(var(--safe-bottom) + 12px);
  font-family: var(--font-dot); font-size: 12px; color: var(--muted); letter-spacing: .1em; opacity: .8;
  transition: opacity .6s; pointer-events: none;
}
.ex-title-hint.gone { opacity: 0; }
.ex-title-foot {
  position: absolute; right: calc(var(--safe-right) + 16px); bottom: calc(var(--safe-bottom) + 10px);
  display: flex; gap: 12px; font-size: 11px; color: rgba(216, 204, 255, .55); pointer-events: none;
  text-shadow: 0 1px 0 #000;
}

/* ================================================================== 共通オーバーレイ */
.ex-ov {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: rgba(6, 8, 24, .72);
  opacity: 0; transition: opacity .35s ease;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.ex-ov.show { opacity: 1; }
.ex-ov.hide { opacity: 0; pointer-events: none !important; }
.ex-ov-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.ex-ov-close { position: absolute; top: 6px; right: 6px; z-index: 2; background: transparent; border: 0; padding: 4px; cursor: pointer; border-radius: 6px; line-height: 0; }
.ex-ov-close:hover { background: rgba(255, 255, 255, .08); }
.ex-ov-close img { width: 26px; height: 26px; }
.ex-fly {
  position: fixed; width: 6px; height: 6px; margin: -3px; z-index: 5;
  pointer-events: none !important; image-rendering: pixelated;
}
#layer-extras > .ex-fly { pointer-events: none !important; }

/* ================================================================== 月へのおくりもの */
.ex-prestige {
  background:
    radial-gradient(ellipse 60% 70% at 30% 45%, rgba(120, 160, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(8, 12, 40, .9), rgba(4, 6, 22, .94));
}
.ex-pr-layout { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; width: min(940px, 100%); margin: auto; }
.ex-pr-spirit { position: relative; flex: none; display: flex; justify-content: center; transition: transform 1.6s cubic-bezier(.3, 0, .2, 1), filter 1.6s; }
.ex-pr-spirit-img {
  position: relative; z-index: 1; height: min(66vh, 480px); width: auto;
  animation: exFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(168, 208, 255, .55));
}
@keyframes exFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ex-pr-halo {
  position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 225, 255, .38) 0%, rgba(150, 180, 255, .14) 40%, transparent 68%);
  animation: exBreath 4.2s ease-in-out infinite;
}
@keyframes exBreath { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.ex-pr-mist { position: absolute; left: -10%; right: -10%; bottom: -4%; height: 26%; z-index: 2; background: radial-gradient(ellipse at 50% 100%, rgba(190, 215, 255, .35), transparent 70%); filter: blur(6px); }
.ex-pr-card { position: relative; z-index: 2; width: min(470px, 100%); padding: 18px 22px 16px; transition: opacity .8s, transform .8s; }
.has-frame .ex-pr-card { padding: 12px 14px 10px; }
.ex-pr-name { font-family: var(--font-dot); font-size: 15px; letter-spacing: .1em; margin-bottom: 4px; text-shadow: 0 0 8px rgba(168, 208, 255, .6); }
.ex-pr-bubble {
  position: relative; padding: 10px 14px; margin-bottom: 12px; min-height: 4.4em;
  background: rgba(200, 220, 255, .08); border: 1px solid rgba(168, 208, 255, .35); border-radius: 10px;
}
.ex-pr-line { margin: 0; font-size: 15px; line-height: 1.75; color: #e8f0ff; white-space: pre-line; }
.ex-pr-gain { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 10px; }
.ex-pr-gain-label { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.ex-pr-gain-row { display: flex; align-items: center; gap: 8px; }
.ex-pr-gain-row img { width: 36px; height: 36px; filter: drop-shadow(0 0 8px rgba(168, 208, 255, .8)); }
.ex-pr-gain-num { font-size: 40px; line-height: 1; color: #dfeeff; text-shadow: 0 0 14px rgba(168, 208, 255, .9), 0 3px 0 #10072a; }
.ex-pr-next {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 217, 138, .25); border-radius: 8px;
}
.ex-pr-next canvas { width: 40px; height: 40px; flex: none; }
.ex-pr-next .ex-pr-mnext { filter: drop-shadow(0 0 6px rgba(255, 230, 160, .8)); animation: exBreath2 2.4s ease-in-out infinite; }
@keyframes exBreath2 { 50% { filter: drop-shadow(0 0 12px rgba(255, 230, 160, 1)); } }
.ex-pr-arrow { font-family: var(--font-dot); color: var(--honey); letter-spacing: -.1em; animation: exBlink 1.4s ease-in-out infinite; }
.ex-pr-next-text { display: flex; flex-direction: column; line-height: 1.35; margin-left: 4px; min-width: 0; }
.ex-pr-next-text b { font-family: var(--font-dot); font-weight: normal; color: var(--honey); font-size: 15px; }
.ex-pr-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ex-pr-list { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(183, 162, 255, .2); }
.ex-pr-list h4 { margin: 0 0 4px; font-family: var(--font-dot); font-weight: normal; font-size: 13px; }
.ex-pr-list.reset h4 { color: #ffb8c4; }
.ex-pr-list.keep h4 { color: var(--good); }
.ex-pr-list ul { margin: 0; padding: 0 0 0 1.1em; font-size: 12px; line-height: 1.6; color: var(--text); }
.ex-pr-list.reset li::marker { color: #ffb8c4; content: '↺ '; }
.ex-pr-list.keep li::marker { color: var(--good); content: '✓ '; }
.ex-pr-bonus { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.ex-pr-bonus b { color: var(--honey); font-weight: normal; }
.ex-pr-bonus img { width: 20px; height: 20px; flex: none; }
.ex-pr-btns { display: flex; justify-content: center; gap: 10px; }
.ex-pr-btns .btn { min-width: 120px; }
.ex-pr-go img { width: 20px; height: 20px; }
.ex-pr-wait { margin-bottom: 12px; }
.ex-pr-wait-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.ex-pr-bar { height: 10px; background: #0a0b1e; border: 1px solid rgba(183, 162, 255, .35); border-radius: 3px; overflow: hidden; }
.ex-pr-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--lilac) 0 6px, #9c86f0 6px 8px); box-shadow: 0 0 8px rgba(183, 162, 255, .7); }
.ex-prestige.rising .ex-pr-card { opacity: 0; transform: translateY(30px); pointer-events: none; }
.ex-prestige.rising .ex-pr-spirit { transform: translateY(-4vh) scale(1.08); filter: brightness(1.5); }
.ex-moonlight { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.ex-moonlight::before {
  content: ''; position: absolute; left: 50%; top: 45%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax;
  border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #eef4ff 30%, rgba(210, 228, 255, .6) 52%, rgba(200, 220, 255, 0) 70%);
  transform: scale(.05); opacity: 0; transition: transform 2s cubic-bezier(.6, 0, .4, 1), opacity .6s;
}
.ex-moonlight::after { content: ''; position: absolute; inset: 0; background: #f4f8ff; opacity: 0; transition: opacity .7s ease-in 1.4s; }
.ex-moonlight.on::before { transform: scale(4); opacity: 1; }
.ex-moonlight.on::after { opacity: 1; }
.ex-moonlight.soft::before { display: none; }
.ex-moonlight.soft::after { background: #dfe8ff; transition: opacity .5s ease 0s; }

/* ================================================================== 章の移り変わり */
.ex-chapter {
  background: radial-gradient(ellipse 80% 70% at 50% 38%, #24306e 0%, #121845 45%, #070818 100%);
  overflow: hidden; cursor: default;
}
.ex-chapter.can-close { cursor: pointer; }
.ex-ch-white { position: absolute; inset: 0; z-index: 5; background: #f4f8ff; pointer-events: none; animation: exWhiteOut 2.2s ease-out forwards; }
@keyframes exWhiteOut { 0% { opacity: 1; } 30% { opacity: .9; } 100% { opacity: 0; } }
.ex-ch-rays {
  position: absolute; left: 50%; top: 36%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 238, 200, .085) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 22%, transparent 46%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 22%, transparent 46%);
  animation: exSpin 80s linear infinite;
}
@keyframes exSpin { to { transform: rotate(360deg); } }
.ex-ch-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.ex-ch-moon { position: relative; width: 192px; height: 192px; margin-bottom: 14px; animation: exFloat 6s ease-in-out infinite; }
.ex-ch-glow {
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 200, .5) 0%, rgba(255, 210, 140, .16) 38%, transparent 64%);
  animation: exBreath3 3.6s ease-in-out infinite;
}
@keyframes exBreath3 { 0%, 100% { opacity: .7; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
.ex-ch-m { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-ch-m.prev { animation: exFadeOut 1.8s ease-in-out forwards .9s; }
.ex-ch-m.next { opacity: 0; animation: exFadeIn 1.8s ease-in-out forwards .9s; filter: drop-shadow(0 0 10px rgba(255, 236, 180, .7)); }
.ex-ch-m.next.solo { animation-delay: .2s; }
@keyframes exFadeOut { to { opacity: 0; filter: brightness(1.8); } }
@keyframes exFadeIn { 0% { opacity: 0; filter: brightness(2.2) drop-shadow(0 0 20px #fff); } 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 236, 180, .7)); } }
.ex-ch-num, .ex-ch-title, .ex-ch-moonname, .ex-ch-lead, .ex-ch-gain { opacity: 0; animation: exFadeUp 1.2s ease forwards; }
.ex-ch-num { font-family: var(--font-dot); font-size: 18px; letter-spacing: .5em; color: var(--lavender); animation-delay: 1.4s; text-shadow: 0 2px 0 #10072a; padding-left: .5em; }
.ex-ch-title {
  margin: 6px 0 2px; font-family: var(--font-dot); font-size: clamp(26px, 5vw, 42px); line-height: 1.25; color: var(--cream);
  text-shadow: 0 3px 0 #10072a, 0 0 18px rgba(255, 191, 94, .7), 0 0 40px rgba(255, 150, 80, .35);
  animation-delay: 1.8s;
}
.ex-ch-moonname { font-family: var(--font-dot); font-size: 14px; color: var(--honey); letter-spacing: .3em; animation-delay: 2.1s; }
.ex-ch-lead { max-width: 26em; margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: #dcd6ff; animation-delay: 2.5s; }
.ex-ch-gain {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 16px; font-size: 16px; color: #dfeeff;
  background: rgba(168, 208, 255, .1); border: 1px solid rgba(168, 208, 255, .45); border-radius: 20px; animation-delay: 2.9s;
}
.ex-ch-gain img { width: 24px; height: 24px; }
.ex-ch-tap {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 7vh); z-index: 2; text-align: center;
  font-family: var(--font-dot); font-size: 13px; color: var(--muted); letter-spacing: .2em; opacity: 0; transition: opacity .6s;
}
.ex-chapter.can-close .ex-ch-tap { opacity: 1; animation: exBlink 1.8s ease-in-out infinite; }

/* ================================================================== 大星灯 */
.ex-lantern {
  background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255, 170, 80, .16), transparent 70%), rgba(6, 8, 24, .8);
}
.ex-ln-card { position: relative; z-index: 1; width: min(440px, 100%); padding: 16px 20px 14px; margin: auto; text-align: center; }
.has-frame .ex-ln-card { padding: 10px 12px 8px; }
.ex-ln-title { margin: 0 0 4px; font-family: var(--font-dot); font-weight: normal; font-size: 22px; color: var(--honey); text-shadow: 0 0 12px rgba(255, 191, 94, .6), 0 2px 0 #10072a; }
.ex-ln-visual { position: relative; display: flex; flex-direction: column; align-items: center; margin: 4px 0 6px; }
.ex-ln-lamp { --p: 0; position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.ex-ln-halo {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 130, .9) 0%, rgba(255, 170, 70, .35) 30%, transparent 62%);
  opacity: calc(.12 + var(--p) * .88); transform: scale(calc(.6 + var(--p) * .5));
  animation: exBreath3 3s ease-in-out infinite; transition: opacity .8s, transform .8s;
}
.ex-ln-rays {
  position: absolute; inset: -60%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 220, 150, .16) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 55%); mask-image: radial-gradient(circle, #000 10%, transparent 55%);
  opacity: calc(var(--p) * var(--p)); animation: exSpin 40s linear infinite;
}
.ex-ln-icon { position: relative; z-index: 1; width: 128px; height: 128px; filter: brightness(calc(.45 + var(--p) * .75)) drop-shadow(0 0 calc(var(--p) * 14px) rgba(255, 191, 94, .9)); transition: filter .8s; }
.ex-ln-flame {
  position: absolute; z-index: 2; left: 50%; top: 52%; width: 22px; height: 22px; margin: -11px;
  border-radius: 50%; background: radial-gradient(circle, #fff6d8 0%, rgba(255, 200, 100, .8) 40%, transparent 70%);
  opacity: calc(var(--p) * 1.2); animation: exFlicker 1.3s steps(4) infinite;
}
@keyframes exFlicker { 0% { transform: scale(1); } 25% { transform: scale(1.15); } 50% { transform: scale(.92); } 75% { transform: scale(1.08); } }
.ex-ln-lamp.gulp { animation: exGulp .5s ease-out; }
@keyframes exGulp { 30% { transform: scale(1.1); filter: brightness(1.5); } 100% { transform: none; } }
.ex-ln-pct { margin-top: -6px; font-size: 30px; color: var(--honey); text-shadow: 0 0 12px rgba(255, 191, 94, .7), 0 3px 0 #10072a; }
.ex-ln-text { margin: 0 0 12px; font-size: 13px; line-height: 1.75; color: #ddd4ff; text-align: left; }
.ex-ln-gauge { margin-bottom: 8px; text-align: left; }
.ex-ln-grow { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 3px; }
.ex-ln-grow img { width: 20px; height: 20px; }
.ex-ln-glabel { flex: 1; }
.ex-ln-gtxt { font-size: 13px; color: var(--cream); }
.ex-ln-gbar { height: 10px; background: #0a0b1e; border: 1px solid rgba(255, 217, 138, .35); border-radius: 3px; overflow: hidden; }
.ex-ln-gfill { height: 100%; width: 0; transition: width .8s cubic-bezier(.2, .8, .2, 1); background: repeating-linear-gradient(90deg, var(--amber) 0 6px, #f0a040 6px 8px); box-shadow: 0 0 8px rgba(255, 191, 94, .8); }
.ex-ln-gauge.wishes .ex-ln-gfill { background: repeating-linear-gradient(90deg, #ffe98f 0 6px, #f5cf5a 6px 8px); }
.ex-ln-pourrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; }
.ex-ln-frac { display: flex; gap: 4px; }
.ex-ln-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ex-ln-btns .btn { flex: 1 1 150px; }
.ex-ln-pour img { width: 20px; height: 20px; }
.ex-ln-pour { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.ex-ln-have { margin-top: 8px; font-family: var(--font-dot); }
.ex-ln-lit { margin: 6px 0; font-size: 14px; color: var(--honey); }
.ex-ln-card.lit .ex-ln-pct { color: #fff3c4; }

/* 灯った瞬間 */
.ex-litbloom { background: #070818; overflow: hidden; }
.ex-lit-bloom {
  position: absolute; left: 50%; top: 42%; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%;
  background: radial-gradient(circle, #fff8e0 0%, #ffd98a 22%, rgba(255, 170, 70, .55) 42%, rgba(255, 140, 60, 0) 70%);
  animation: exBloom 3.4s cubic-bezier(.3, 0, .2, 1) forwards;
}
@keyframes exBloom { 0% { transform: scale(.02); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(2.4); opacity: .55; } }
.ex-litbloom.soft .ex-lit-bloom { animation: exFadeIn2 1s ease forwards; transform: scale(1.6); }
@keyframes exFadeIn2 { from { opacity: 0; } to { opacity: .6; } }
.ex-lit-msg { position: relative; z-index: 2; text-align: center; padding: 0 16px; }
.ex-lit-big { font-family: var(--font-dot); font-size: clamp(24px, 4.6vw, 40px); color: #3a1d06; text-shadow: 0 0 16px #fff, 0 0 30px #ffe7a8; opacity: 0; animation: exFadeUp 1.4s ease forwards 1.4s; }
.ex-lit-sub { margin-top: 10px; font-size: 15px; color: #5a3410; text-shadow: 0 0 10px #fff3c4; opacity: 0; animation: exFadeUp 1.4s ease forwards 2.2s; }

/* ================================================================== エンディング */
.ex-ending { background: #070818; padding: 0; overflow: hidden; }
.ex-end-bg { position: absolute; inset: 0; background: center / cover no-repeat; image-rendering: pixelated; opacity: .32; filter: saturate(.9); }
.ex-end-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 8, 24, .85) 0%, rgba(7, 8, 24, .25) 30%, rgba(7, 8, 24, .25) 70%, rgba(7, 8, 24, .9) 100%); }
.ex-end-viewport {
  position: absolute; inset: 0; overflow: hidden; transition: opacity 1.2s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.ex-end-viewport.done { opacity: 0; pointer-events: none; }
.ex-end-roll { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; will-change: transform; }
.ex-ending.static .ex-end-viewport { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.ex-ending.static .ex-end-roll { position: static; padding: 40px 24px; }
.ex-end-logo { font-family: var(--font-dot); font-size: clamp(28px, 5vw, 46px); color: var(--cream); text-shadow: 0 3px 0 #10072a, 0 0 18px rgba(255, 191, 94, .75), 0 0 40px rgba(255, 140, 70, .35); }
.ex-end-spacer { height: 26vh; flex: none; }
.ex-end-spacer.small { height: 20vh; }
.ex-end-line { margin: .35em 0; font-size: 17px; line-height: 2; color: #efe8ff; text-shadow: 0 2px 6px #000; max-width: 30em; }
.ex-end-h { margin: 0 0 22px; font-family: var(--font-dot); font-weight: normal; font-size: 18px; letter-spacing: .3em; color: var(--honey); text-shadow: 0 0 10px rgba(255, 191, 94, .5); }
.ex-end-cast { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 22px 26px; max-width: 760px; }
.ex-end-person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ex-end-full { height: 132px; width: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.ex-end-pname { font-family: var(--font-dot); font-size: 14px; color: var(--lavender); text-shadow: 0 2px 0 #10072a; }
.ex-end-staff { display: grid; grid-template-columns: auto auto; gap: 10px 18px; margin: 0; font-size: 15px; }
.ex-end-staff dt { text-align: right; color: var(--muted); }
.ex-end-staff dd { margin: 0; text-align: left; color: var(--cream); font-family: var(--font-dot); }
.ex-end-fin {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; transition: opacity 1.4s ease;
}
.ex-end-fin.show { opacity: 1; }
.ex-end-owari { font-family: var(--font-dot); font-size: clamp(36px, 7vw, 60px); color: var(--cream); text-shadow: 0 4px 0 #10072a, 0 0 22px rgba(255, 191, 94, .8), 0 0 50px rgba(255, 140, 70, .4); }
.ex-end-fin .btn { margin-top: 18px; min-width: 180px; }
.ex-end-skip { position: absolute; z-index: 4; right: calc(var(--safe-right) + 14px); bottom: calc(var(--safe-bottom) + 14px); }

/* ================================================================== おかえり */
.ex-welcome { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255, 191, 94, .1), transparent 70%), rgba(6, 8, 24, .66); }
.ex-wb-card { width: min(420px, 100%); padding: 16px 20px 16px; text-align: center; margin: auto; transform: translateY(10px) scale(.97); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.ex-welcome.show .ex-wb-card { transform: none; }
.has-frame .ex-wb-card { padding: 10px 12px 10px; }
.ex-wb-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ex-wb-moon canvas { width: 36px; height: 36px; display: block; filter: drop-shadow(0 0 6px rgba(255, 236, 180, .6)); }
.ex-wb-title { margin: 0; font-family: var(--font-dot); font-weight: normal; font-size: 24px; color: var(--honey); text-shadow: 0 0 12px rgba(255, 191, 94, .6), 0 2px 0 #10072a; }
.ex-wb-time { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.ex-wb-time img { width: 20px; height: 20px; }
.ex-wb-time b { color: var(--cream); font-weight: normal; }
.ex-wb-gain {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; margin-bottom: 12px;
  background: rgba(255, 217, 138, .06); border: 1px solid rgba(255, 217, 138, .3); border-radius: 10px;
}
.ex-wb-glabel { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.ex-wb-grow { display: flex; align-items: center; gap: 6px; }
.ex-wb-grow img { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(255, 191, 94, .8)); }
.ex-wb-amount { font-size: 34px; line-height: 1.1; color: var(--cream); text-shadow: 0 0 14px rgba(255, 191, 94, .8), 0 3px 0 #10072a; }
.ex-wb-talk { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; text-align: left; }
.ex-wb-face {
  flex: none; width: 88px; height: 88px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #34468c, #151a3d); border: 2px solid rgba(255, 217, 138, .5);
  box-shadow: 0 0 0 2px #10072a;
}
.ex-wb-faceimg { width: 88px; height: 88px; display: block; }
.ex-wb-bubble { position: relative; flex: 1; padding: 8px 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(183, 162, 255, .35); border-radius: 10px; }
.ex-wb-bubble::before { content: ''; position: absolute; left: -7px; bottom: 16px; width: 10px; height: 10px; background: #1b2150; border-left: 1px solid rgba(183, 162, 255, .35); border-bottom: 1px solid rgba(183, 162, 255, .35); transform: rotate(45deg); }
.ex-wb-who { font-family: var(--font-dot); font-size: 13px; color: var(--lavender); }
.ex-wb-text { margin: 2px 0 0; font-size: 14px; line-height: 1.7; white-space: pre-line; }
.ex-wb-ok { width: 100%; }

/* ================================================================== HUD 下の呼びかけボタン */
.ex-call {
  position: fixed; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 3px 14px 3px 6px;
  font-family: var(--font-dot); font-size: 13px; color: #e8f0ff;
  background: linear-gradient(180deg, rgba(60, 70, 150, .92), rgba(24, 28, 80, .92));
  border: 2px solid rgba(168, 208, 255, .75); border-radius: 18px;
  box-shadow: 0 0 0 2px rgba(16, 7, 42, .85), 0 0 14px rgba(168, 208, 255, .55);
  cursor: pointer; animation: exCall 2s ease-in-out infinite;
}
.ex-call[data-mode="lantern"] { color: #2a1606; background: linear-gradient(180deg, #ffe7a8, var(--amber)); border-color: #fff3c4; box-shadow: 0 0 0 2px #3a1d06, 0 0 14px rgba(255, 191, 94, .6); }
.ex-call img { width: 24px; height: 24px; }
.ex-call:hover { filter: brightness(1.15); }
@keyframes exCall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ================================================================== 図鑑パネル */
.ex-cx-head { margin: 2px 0 8px; }
.ex-cx-rate { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ex-cx-rate-label { font-size: 12px; color: var(--muted); flex: 1; }
.ex-cx-rate-num { font-size: 16px; color: var(--cream); }
.ex-cx-rate-pct { font-size: 14px; color: var(--honey); }
.ex-cx-bar { height: 8px; background: #0a0b1e; border: 1px solid rgba(255, 217, 138, .35); border-radius: 2px; overflow: hidden; }
.ex-cx-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--honey) 0 6px, #f0b850 6px 8px); box-shadow: 0 0 8px rgba(255, 191, 94, .7); }
.ex-cx-tabs .tab { display: flex; flex-direction: column; align-items: center; line-height: 1.2; gap: 1px; padding: 5px 4px; }
.ex-cx-tabcount { font-size: 11px; opacity: .75; }
.ex-cx-dot { position: absolute; top: 4px; right: 10%; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.ex-cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.ex-cx-grid.people { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ex-cx-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  height: 110px; padding: 16px 4px 7px; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(183, 162, 255, .22); border-radius: 8px; cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
  animation: exTileIn .35s ease both; animation-delay: calc(var(--i) * 18ms);
}
@keyframes exTileIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ex-cx-grid.people .ex-cx-tile { height: 158px; }
.ex-cx-tile:hover { transform: translateY(-2px); border-color: rgba(255, 217, 138, .6); background: rgba(255, 217, 138, .07); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.ex-cx-tile.found { border-color: rgba(255, 217, 138, .32); }
.ex-cx-tile.is-new { border-color: var(--amber); box-shadow: 0 0 10px rgba(255, 191, 94, .35); }
.ex-cx-no { position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--muted); opacity: .7; }
.ex-cx-new { position: absolute; top: 3px; right: 4px; padding: 0 4px; font-family: var(--font-dot); font-size: 9px; line-height: 14px; color: #2a1606; background: var(--amber); border-radius: 3px; animation: exBlink 1.4s ease-in-out infinite; }
.ex-cx-pic { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.ex-cx-pic img.icon, .ex-cx-pic .ex-cx-star, .ex-cx-pic .ex-cx-item { width: 48px; height: 48px; }
.ex-cx-tile.found .ex-cx-pic img, .ex-cx-tile.found .ex-cx-pic canvas { filter: drop-shadow(0 0 6px rgba(255, 217, 138, .35)); }
.ex-cx-pic .ex-cx-full { height: 100%; max-height: 112px; width: auto; max-width: 100%; object-fit: contain; }
.ex-cx-pic .ex-cx-const { width: 80px; height: 60px; }
.ex-cx-tile.unknown .ex-cx-pic img { filter: brightness(0) drop-shadow(0 0 1px rgba(183, 162, 255, .8)); opacity: .5; }
.ex-cx-name { max-width: 100%; font-size: 12px; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-cx-tile.unknown .ex-cx-name { color: var(--muted); font-family: var(--font-dot); letter-spacing: .1em; }
.ex-cx-hint { margin: 12px 0 0; }
.ex-cx-empty { grid-column: 1 / -1; }
.ex-cx-modal .modal-title { margin-bottom: 10px; }
.ex-cx-big {
  display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 10px;
  background: radial-gradient(ellipse at 50% 55%, rgba(120, 140, 255, .22), rgba(10, 12, 40, .4) 70%);
  border: 1px solid rgba(183, 162, 255, .25); border-radius: 10px;
}
.ex-cx-big img.icon, .ex-cx-big .ex-cx-star, .ex-cx-big .ex-cx-item { width: 96px; height: 96px; filter: drop-shadow(0 0 10px rgba(255, 217, 138, .5)); }
.ex-cx-big .ex-cx-const { width: 192px; height: 144px; }
.ex-cx-modal.people .ex-cx-big { height: 260px; }
.ex-cx-big .ex-cx-full { height: 240px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.ex-cx-big.unknown img { filter: brightness(0) drop-shadow(0 0 1px rgba(183, 162, 255, .8)); opacity: .5; }
.ex-cx-sub { text-align: center; font-family: var(--font-dot); font-size: 13px; color: var(--honey); margin-bottom: 6px; }
.ex-cx-text { margin: 0 0 10px; font-size: 14px; line-height: 1.85; white-space: pre-line; }
.ex-cx-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 8px 10px; font-size: 12px; background: rgba(255, 255, 255, .04); border-radius: 8px; }
.ex-cx-meta dt { color: var(--muted); }
.ex-cx-meta dd { margin: 0; color: var(--cream); white-space: pre-line; }

/* ================================================================== 設定パネル */
.ex-st-sec { padding: 4px 0 10px; }
.ex-st-sec + .ex-st-sec { border-top: 1px solid rgba(183, 162, 255, .16); padding-top: 10px; }
.ex-st-h { margin: 0 0 6px; font-family: var(--font-dot); font-weight: normal; font-size: 14px; color: var(--honey); letter-spacing: .1em; }
.ex-st-h:empty { display: none; }
.ex-st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 2px 0; }
.ex-st-label { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; min-width: 0; }
.ex-st-note { font-size: 11px; color: var(--muted); }
.ex-st-ctrl { flex: none; }
.ex-st-slider { display: flex; align-items: center; gap: 8px; }
.ex-st-slider img { width: 20px; height: 20px; opacity: .85; }
.ex-st-val { width: 2.2em; text-align: right; font-size: 14px; color: var(--cream); }
.ex-st-range {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 150px; height: 18px; background: transparent; cursor: pointer; margin: 0;
}
.ex-st-range::-webkit-slider-runnable-track { height: 8px; border-radius: 2px; border: 1px solid rgba(255, 217, 138, .4); background: linear-gradient(90deg, var(--amber) 0 var(--p), #0a0b1e var(--p) 100%); }
.ex-st-range::-moz-range-track { height: 8px; border-radius: 2px; border: 1px solid rgba(255, 217, 138, .4); background: linear-gradient(90deg, var(--amber) 0 var(--p), #0a0b1e var(--p) 100%); }
.ex-st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; background: var(--cream); border: 2px solid #3a1d06; border-radius: 3px; box-shadow: 0 0 8px rgba(255, 191, 94, .8); transform: rotate(45deg); }
.ex-st-range::-moz-range-thumb { width: 12px; height: 12px; background: var(--cream); border: 2px solid #3a1d06; border-radius: 3px; box-shadow: 0 0 8px rgba(255, 191, 94, .8); transform: rotate(45deg); }
.ex-st-seg { display: flex; gap: 3px; padding: 2px; background: rgba(10, 11, 30, .7); border: 1px solid rgba(183, 162, 255, .3); border-radius: 7px; }
.ex-st-segbtn {
  min-width: 44px; padding: 4px 8px; font-family: var(--font-dot); font-size: 12px; color: var(--muted);
  background: transparent; border: 0; border-radius: 5px; cursor: pointer; transition: background .15s, color .15s;
}
.ex-st-segbtn:hover { color: var(--text); }
.ex-st-segbtn.on { color: #2a1606; background: linear-gradient(180deg, #ffe7a8, var(--amber)); box-shadow: 0 0 8px rgba(255, 191, 94, .45); }
.ex-ln-frac .ex-st-segbtn { border: 1px solid rgba(183, 162, 255, .3); }
.ex-st-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; width: 84px; height: 30px; padding: 0 8px 0 36px;
  font-family: var(--font-dot); font-size: 12px; color: var(--muted);
  background: rgba(10, 11, 30, .8); border: 1px solid rgba(183, 162, 255, .35); border-radius: 15px; cursor: pointer; transition: background .2s, border-color .2s;
}
.ex-st-knob { position: absolute; left: 4px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #6b6699; transition: left .2s, background .2s; }
.ex-st-toggle.on { color: #2a1606; background: linear-gradient(180deg, #ffe7a8, var(--amber)); border-color: #fff3c4; padding: 0 36px 0 12px; }
.ex-st-toggle.on .ex-st-knob { left: 56px; background: #fff8e0; box-shadow: 0 0 6px #fff; }
.ex-st-save { display: flex; flex-direction: column; gap: 8px; }
.ex-st-saveinfo { display: flex; align-items: baseline; gap: 8px; }
.ex-st-playtime { font-size: 15px; color: var(--cream); }
.ex-st-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-st-btns .btn { flex: 1 1 auto; }
.ex-st-p { margin: 0; line-height: 1.6; }
.ex-st-reset { width: 100%; margin-top: 4px; }
.ex-st-ver { margin: 10px 0 0; opacity: .7; }
.ex-st-ta {
  width: 100%; resize: vertical; min-height: 90px; padding: 8px; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.4; word-break: break-all;
  color: var(--cream); background: #0a0b1e; border: 1px solid rgba(255, 217, 138, .35); border-radius: 6px;
}
.ex-st-file { margin-top: 8px; }

/* ================================================================== スマホ縦 */
@media (max-width: 600px), (orientation: portrait) and (max-width: 820px) {
  .ex-title-bg { background-position: 80% 60%; }
  .ex-title-vignette {
    background:
      linear-gradient(180deg, rgba(7, 9, 30, .82) 0%, rgba(7, 9, 30, .35) 24%, rgba(7, 9, 30, 0) 40%),
      linear-gradient(0deg, rgba(7, 9, 30, .92) 0%, rgba(7, 9, 30, .55) 26%, rgba(7, 9, 30, 0) 44%);
  }
  .ex-title-main { left: 0; right: 0; width: auto; align-items: center; padding: calc(var(--safe-top) + 7vh) 18px calc(var(--safe-bottom) + 6vh); }
  .ex-logo-wrap { text-align: center; }
  .ex-logo-layer { align-items: center; }
  .ex-logo-sub { font-size: 13px; letter-spacing: .12em; }
  .ex-title-menu { align-items: stretch; width: min(340px, 100%); }
  .ex-title-btn { width: 100%; font-size: 20px; }
  .ex-title-btn:hover, .ex-title-btn:focus-visible { transform: none; }
  .ex-title-hint { left: 0; right: 0; text-align: center; top: auto; bottom: calc(var(--safe-bottom) + 30px); }
  .ex-title-foot { left: 0; right: 0; justify-content: center; bottom: calc(var(--safe-bottom) + 8px); }

  .ex-ov { align-items: flex-start; padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 10px); }
  .ex-pr-layout { flex-direction: column; gap: 0; }
  .ex-pr-spirit-img { height: 30vh; }
  .ex-pr-spirit { margin-bottom: -5vh; }
  .ex-pr-card { padding: 14px 14px 12px; }
  .ex-pr-gain-num { font-size: 34px; }
  .ex-pr-lists { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ex-pr-list { padding: 6px 8px; }
  .ex-pr-list ul { font-size: 11px; }
  .ex-chapter, .ex-litbloom, .ex-ending { align-items: center; }
  .ex-ch-moon { width: 144px; height: 144px; }
  .ex-ch-lead { font-size: 14px; }
  .ex-ln-lamp { width: 120px; height: 120px; }
  .ex-ln-icon { width: 104px; height: 104px; }
  .ex-ln-btns .btn { flex: 1 1 120px; font-size: 13px; gap: 4px; }
  .ex-end-full { height: 100px; }
  .ex-end-cast { gap: 16px 18px; }
  .ex-end-line { font-size: 15px; }
  .ex-cx-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .ex-cx-grid.people { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ex-cx-tile { height: 100px; }
  .ex-cx-modal.people .ex-cx-big { height: 220px; }
  .ex-cx-big .ex-cx-full { height: 200px; }
  .ex-st-range { width: 120px; }
  .ex-call { height: 30px; font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ex-pr-spirit-img { height: 70vh; }
  .ex-ch-moon { width: 120px; height: 120px; }
}

/* 動きを減らす（style.css の .reduce-motion に加えて、常時回るものを止める） */
.reduce-motion .ex-ov *, .reduce-motion .ex-title * { animation-delay: 0s !important; }
.reduce-motion .ex-logo-ch, .reduce-motion .ex-ch-rays, .reduce-motion .ex-ln-rays, .reduce-motion .ex-call { animation: none !important; }

/* ================================================================== 図鑑「思い出」（見たイベントCG） */
.ex-cx-grid.memories { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ex-cx-grid.memories .ex-cx-tile { height: auto; aspect-ratio: auto; padding: 6px 6px 7px; gap: 6px; justify-content: flex-start; }
.ex-cx-grid.memories .ex-cx-pic { flex: none; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #0a0b20; }
.ex-cx-grid.memories .ex-cx-no { z-index: 1; top: 8px; left: 10px; color: #fff; text-shadow: 0 1px 2px #000; opacity: .9; }
.ex-cx-grid.memories .ex-cx-new { top: 8px; right: 8px; z-index: 1; }
.ex-cx-mem { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .4s ease; }
.ex-cx-tile.found .ex-cx-pic .ex-cx-mem { filter: none; }
.ex-cx-tile:hover .ex-cx-mem { transform: scale(1.05); }
.ex-cx-mem-unknown {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(200, 210, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(200, 210, 255, .4), transparent 60%),
    radial-gradient(1px 1px at 45% 80%, rgba(200, 210, 255, .35), transparent 60%),
    linear-gradient(160deg, #141638, #0a0b20);
  font-family: var(--font-dot); font-size: 26px; color: rgba(183, 162, 255, .45);
}
.ex-cx-grid.memories .ex-cx-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }

.layer > .ex-mem-ov {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40, 50, 120, .35), transparent 70%), rgba(4, 5, 18, .9);
  opacity: 0; transition: opacity .4s ease;
}
.ex-mem-ov.show { opacity: 1; }
.ex-mem-frame {
  width: min(100%, calc((100vh - 200px) * 16 / 9), 1280px); aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  border: 3px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 3px #0a0c26, 0 0 40px rgba(255, 191, 94, .25), 0 18px 40px rgba(0, 0, 0, .6);
  transform: scale(.96); transition: transform .5s cubic-bezier(.2, .8, .2, 1); cursor: zoom-out;
}
.ex-mem-ov.show .ex-mem-frame { transform: none; }
.ex-mem-img { position: absolute; inset: 0; background: center / cover no-repeat; image-rendering: pixelated; animation: storyCgKen 30s ease-in-out infinite alternate; }
.reduce-motion .ex-mem-img { animation: none; }
.ex-mem-cap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ex-mem-title { font-family: var(--font-dot); font-size: 20px; color: var(--cream); text-shadow: 0 0 10px rgba(255, 191, 94, .5), 0 2px 0 #10072a; }
.ex-mem-sub { font-size: 12px; color: var(--muted); }
.ex-mem-btns { display: flex; gap: 10px; margin-top: 8px; }
@keyframes storyCgKen { 0% { transform: scale(1.03) translate(0, 0); } 100% { transform: scale(1.1) translate(-1.6%, -1.2%); } }

/* ================================================================== スタッフロール（夜空の上） */
.ex-ending .ex-end-bg { opacity: .7; filter: saturate(1.05); background-position: center bottom; }
.ex-end-town { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: center bottom / cover no-repeat; image-rendering: pixelated; opacity: .85; pointer-events: none; }
.ex-end-sublogo { margin-top: 10px; font-size: 14px; color: #d8ccff; letter-spacing: .08em; text-shadow: 0 2px 4px #000; }
.ex-end-town-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: 640px; }
.ex-end-townperson { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 7em; }
.ex-end-tname { font-family: var(--font-dot); font-size: 15px; color: #f1e6cf; text-shadow: 0 2px 0 #10072a; }
.ex-end-ttitle { font-size: 11px; color: var(--muted); }
@media (max-width: 600px), (orientation: portrait) and (max-width: 820px) {
  .ex-cx-grid.memories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ex-mem-frame { width: 100%; }
  .ex-end-town { height: 22vh; }
  .ex-end-town-list { gap: 8px 16px; }
}
.ex-end-logo, .ex-end-sublogo, .ex-end-line { text-wrap: balance; }

/* ================================================================== 修正（QA） */
/* タイトル：副題の折り返しをそろえる（「め。」だけが次の行に落ちないように）・お知らせ */
.ex-logo-sub { text-wrap: balance; }
.ex-title-notice {
  display: flex; align-items: center; gap: 10px; width: min(340px, 100%); padding: 8px 10px 8px 12px;
  font-size: 12px; line-height: 1.5; color: var(--text);
  background: rgba(14, 18, 52, .82); border: 1px solid rgba(183, 162, 255, .35); border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(16, 7, 42, .7);
}
.ex-title-notice.warn { border-color: rgba(255, 184, 196, .6); }
.ex-title-notice .btn { flex: none; }

/* スタッフロール：町の帯の上の端を夜空に溶かす（はっきりした境目を出さない）・帯の上の文字を読みやすく */
.ex-end-town {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 22%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 22%, #000 48%);
}
.ex-ending .ex-end-shade {
  background: linear-gradient(180deg, rgba(7, 8, 24, .85) 0%, rgba(7, 8, 24, .25) 30%, rgba(7, 8, 24, .28) 58%, rgba(7, 8, 24, .58) 80%, rgba(7, 8, 24, .9) 100%);
}

/* 月へのおくりもの：小さいスマホでも「まだ／月へ おくる」が最初の画面に入るように */
@media (orientation: portrait) and (max-width: 820px) and (max-height: 780px) {
  .ex-pr-spirit-img { height: 20vh; }
  .ex-pr-spirit { margin-bottom: -6vh; }
  .ex-pr-line { font-size: 13px; line-height: 1.55; }
  .ex-pr-gain { margin: 2px 0 6px; }
  .ex-pr-gain-num { font-size: 28px; }
  .ex-pr-gain-row img { width: 28px; height: 28px; }
  .ex-pr-lists { margin-bottom: 6px; }
  .ex-pr-bonus { margin-bottom: 8px; }
}
@media (max-width: 600px), (orientation: portrait) and (max-width: 820px) {
  /* それでも長いときは、決めるボタンを画面の下にとめておく */
  .ex-pr-btns {
    position: sticky; bottom: calc(-12px - var(--safe-bottom)); z-index: 3;
    margin: 0 -14px -12px; padding: 10px 14px calc(12px + var(--safe-bottom));
    background: linear-gradient(180deg, rgba(14, 18, 52, 0), rgba(14, 18, 52, .96) 30%);
  }
}

/* 図鑑：名前は2行まで（「ひかりのマフラー」などが … で切れないように） */
.ex-cx-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.2; line-break: strict; overflow-wrap: anywhere;
}
@media (max-width: 600px), (orientation: portrait) and (max-width: 820px) {
  .ex-cx-tile { height: 108px; }
  .ex-cx-pic img.icon, .ex-cx-pic .ex-cx-star, .ex-cx-pic .ex-cx-item { width: 44px; height: 44px; }
}

/* 図鑑「思い出」の全画面：うしろの一覧の文字が透けて二重に見えないように */
.layer > .ex-mem-ov {
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40, 50, 120, .35), transparent 70%), rgba(4, 5, 18, .97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* 大きな画面（1920×1080 など）：タイトルのメニュー・副題も大きく */
@media (min-width: 1700px) and (min-height: 950px) {
  .ex-title-menu, .ex-logo-sub, .ex-title-hint, .ex-title-foot { zoom: 1.3; }
}