/* ADV（背景・立ち絵・テキスト窓・選択肢・カットイン・演出）。.adv の下だけを選ぶ。 */

.adv { position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff; cursor: pointer; }
.adv--overlay { background: transparent; }
.adv-layer { position: absolute; inset: 0; animation: fade-in .2s ease; }
.adv-layer.is-out { opacity: 0; transition: opacity .2s; }
.adv-hit { position: absolute; inset: 0; z-index: 4; }

.adv-stage { position: absolute; inset: 0; overflow: hidden; }
.adv-bg { position: absolute; inset: -2%; opacity: 0; background: #000; will-change: opacity; }
.adv-chars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.adv-chibi { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.adv-still { position: absolute; inset: 0; z-index: 5; opacity: 0; transition: opacity .45s ease; background: #000; pointer-events: none; }
.adv-still.is-on { opacity: 1; }
.adv-still-img, .adv-still .ph { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* 3:2 のスチルを 16:9〜21:9 に出すとき、左右の黒帯の代わりに同じ絵をぼかして敷く */
.adv-still-blur { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(22px) brightness(.55) saturate(1.2); }
.adv-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.adv-tone { position: absolute; inset: 0; z-index: 7; pointer-events: none; transition: background .6s, backdrop-filter .6s; }
.adv-stage[data-tone="sepia"] .adv-tone { backdrop-filter: sepia(.85) contrast(.95) brightness(.95); background: radial-gradient(ellipse at center, transparent 50%, rgba(60, 35, 10, .45)); }
.adv-stage[data-tone="night"] .adv-tone { background: rgba(10, 20, 70, .38); backdrop-filter: saturate(.7) brightness(.85); }
.adv-stage[data-tone="dark"] .adv-tone { background: rgba(0, 0, 0, .55); }
.adv-stage[data-tone="white"] .adv-tone { background: rgba(255, 255, 255, .55); }

/* 立ち絵 */
.adv-char { position: absolute; bottom: 0; height: calc(96% * var(--sc, 1)); transform: translateX(-50%); transition: left .45s cubic-bezier(.3, .8, .3, 1), filter .25s, opacity .25s;
  display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.adv-char-inner { height: 100%; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.adv-char-img { height: 100%; width: auto; max-width: 46vw; object-fit: contain; object-position: bottom; }
.adv-char .ph-portrait { width: calc(var(--sc, 1) * min(19vw, 40vh)); height: 88%; }
.adv-char.is-flip .adv-char-inner { transform: scaleX(-1); }
.adv-char.is-dim { filter: brightness(.55) saturate(.8) drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.adv-char.is-talk .adv-char-inner { animation: char-talk .28s ease-out; }
.adv-char.is-bump .adv-char-inner { animation: char-talk .22s ease-out; }
@keyframes char-talk { 0% { transform: translateY(0); } 40% { transform: translateY(-1.6%); } 100% { transform: translateY(0); } }
.adv-char.is-flip.is-talk .adv-char-inner, .adv-char.is-flip.is-bump .adv-char-inner { animation-name: char-talk-flip; }
@keyframes char-talk-flip { 0% { transform: scaleX(-1); } 40% { transform: scaleX(-1) translateY(-1.6%); } 100% { transform: scaleX(-1); } }
.adv-char.enter-fade { animation: char-fade .3s ease-out; }
.adv-char.enter-slide[data-side="L"], .adv-char.enter-slide[data-side="C"] { animation: char-slide-l .35s cubic-bezier(.2, .9, .3, 1); }
.adv-char.enter-slide[data-side="R"] { animation: char-slide-r .35s cubic-bezier(.2, .9, .3, 1); }
.adv-char.enter-jump { animation: char-jump .45s cubic-bezier(.2, 1.6, .4, 1); }
.adv-char.exit-fade { opacity: 0; transition: opacity .3s; }
.adv-char.exit-slide[data-side="L"], .adv-char.exit-slide[data-side="C"] { animation: char-slide-l .3s reverse forwards ease-in; }
.adv-char.exit-slide[data-side="R"] { animation: char-slide-r .3s reverse forwards ease-in; }
@keyframes char-fade { from { opacity: 0; } }
@keyframes char-slide-l { from { opacity: 0; transform: translateX(-90%); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes char-slide-r { from { opacity: 0; transform: translateX(-10%); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes char-jump { 0% { opacity: 0; transform: translate(-50%, 30%); } 60% { opacity: 1; transform: translate(-50%, -6%); } 100% { transform: translate(-50%, 0); } }
.adv-char-fx { position: absolute; left: 0; right: 0; top: 4%; height: 30%; pointer-events: none; }

/* SD */
.adv-chibi-one { position: absolute; bottom: 27%; height: 26%; transform: translateX(-50%); }
.adv-chibi-one.is-hop { animation: chibi-hop .5s cubic-bezier(.2, 1.6, .4, 1); }
.adv-chibi-one[data-pose="cheer"] { animation: chibi-cheer .6s ease-in-out infinite alternate; }
.adv-chibi-img { height: 100%; width: auto; }
.adv-chibi-one .ph-sd { width: 9vh; height: 100%; border-radius: 50% 50% 30% 30%; }
@keyframes chibi-hop { 0% { transform: translate(-50%, 30%) scale(.6); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes chibi-cheer { from { transform: translate(-50%, 0) rotate(-4deg); } to { transform: translate(-50%, -8%) rotate(4deg); } }

/* テキスト窓 */
.adv-window {
  position: absolute; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + clamp(6px, 1.6vh, 22px));
  width: min(94vw, 1340px);
  padding: clamp(14px, 2.6vh, 34px) clamp(16px, 2.6vw, 48px) clamp(10px, 2vh, 26px);
  border-radius: clamp(10px, 1.2vw, 22px);
  background: linear-gradient(180deg, rgba(20, 28, 74, .9) 0%, rgba(12, 16, 46, .94) 100%);
  border: var(--bw) solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 var(--bw) rgba(18, 24, 64, .9), 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(127, 216, 255, .25);
  transition: opacity .2s, transform .2s;
}
.adv-window::before { content: ''; position: absolute; left: 3%; right: 3%; top: 4px; height: 7px; background: var(--ruler-ticks); filter: invert(1); opacity: .25; pointer-events: none; }
.adv-window.is-empty, .adv-window.is-forcehide, .adv-window.is-forcehide-soft, .adv.is-winhide .adv-window { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
.adv.is-winhide .adv-ctrl { opacity: 0; pointer-events: none; }
.adv-window.is-mono { background: linear-gradient(180deg, rgba(40, 46, 96, .86), rgba(26, 30, 70, .9)); }
.adv-window.is-mono .adv-text { color: #cfe3ff; }
.adv-window[data-via="phone"] { border-style: dashed; }
.adv-text-wrap { container-type: inline-size; }
.adv-text {
  font: 700 clamp(14px, calc(100cqw / 33), 46px) / 1.58 var(--font-adv);
  min-height: calc(3 * 1.58em);
  color: #fff; letter-spacing: .02em; line-break: strict; word-break: normal; overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.adv-text .ch { opacity: 0; }
.adv-text .ch.on { opacity: 1; transition: opacity .08s; }
.adv-text ruby rt { font-size: .45em; color: #bfe6ff; }
.adv-name {
  position: absolute; left: clamp(14px, 2.4vw, 44px); top: 0; transform: translateY(-62%) skewX(-12deg);
  padding: .14em 1.2em .18em; border-radius: 8px; opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nc, #ff6a2b) 75%, #fff), var(--nc, #ff6a2b));
  border: var(--bw) solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  font: 400 clamp(13px, 1.25vw + .4vh, 30px)/1.2 var(--font-title); color: #fff; letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 6px rgba(0, 0, 0, .3);
  transition: opacity .15s;
}
.adv-name > span { display: inline-block; transform: skewX(12deg); }
.adv-name.is-on { opacity: 1; }
.adv-via { font-style: normal; margin-left: .4em; font-size: .8em; }
.adv-next { position: absolute; right: clamp(14px, 1.8vw, 34px); bottom: clamp(8px, 1.4vh, 18px); width: clamp(14px, 1.4vw, 26px); aspect-ratio: 1;
  opacity: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--c-accent-hi); }
.adv-window.is-waiting .adv-next { opacity: 1; animation: next-bob .7s ease-in-out infinite; }
@keyframes next-bob { 50% { transform: translateY(5px); } }

.r-b { color: var(--c-accent-hi); font-weight: 900; }
.r-big { font-size: 1.4em; line-height: 1; }
.r-small { font-size: .8em; }
.r-shake { display: inline-block; }
.r-shake .ch, .r-shake { animation: r-shake .12s steps(2) infinite; display: inline-block; }
@keyframes r-shake { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(-1px, 1px); } }

/* 操作ボタン */
.adv-ctrl { position: absolute; z-index: 25; top: calc(var(--safe-t) + 8px); right: calc(var(--safe-r) + 10px); display: flex; gap: 6px; transition: opacity .2s; }
.adv-cbtn { min-height: 34px; padding: .3em .8em; font-size: var(--fs-xs); --b-bg: rgba(16, 22, 58, .72); --b-fg: #fff; --b-edge: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .8); box-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.adv-cbtn.is-on { --b-bg: linear-gradient(180deg, #ffb347, #ff6a2b); }
.adv.is-skip::after, .adv.is-fast::after { content: '≫ SKIP'; position: absolute; z-index: 26; left: calc(var(--safe-l) + 12px); top: calc(var(--safe-t) + 10px);
  font: 400 var(--fs-s) var(--font-title); color: var(--c-accent-hi); animation: blink .6s steps(2) infinite; text-shadow: 0 2px 0 #000; }
.adv.is-fast:not(.is-skip)::after { content: '≫'; }
@keyframes blink { 50% { opacity: .3; } }

/* 選択肢 */
.adv-choices { position: absolute; z-index: 30; inset: 0; padding-bottom: 30vh; display: none; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.8vh, 20px); background: rgba(5, 8, 25, .35); }
.adv-choices.is-on { display: flex; }
.adv-choice { position: relative; width: min(70vw, 820px); padding: clamp(10px, 1.8vh, 20px) 2.4em; border: var(--bw) solid #fff; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(228,236,255,.96)); color: var(--c-text); cursor: pointer;
  font: 800 var(--fs-l)/1.3 var(--font-ui); box-shadow: 0 5px 0 var(--c-accent-2), 0 10px 20px rgba(0,0,0,.35);
  transform: skewX(-6deg); animation: choice-in .35s cubic-bezier(.2, 1.4, .4, 1) backwards; transition: transform .1s, background .15s; }
.adv-choice > * { display: inline-block; transform: skewX(6deg); }
.adv-choice:hover { background: linear-gradient(180deg, #fff3d0, #ffd27a); transform: skewX(-6deg) translateY(-3px) scale(1.02); }
.adv-choice:active { transform: skewX(-6deg) translateY(3px); }
.adv-choice-no { position: absolute; left: .7em; top: 50%; transform: translateY(-50%) skewX(6deg); width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accent); color: #fff; font: 400 .75em var(--font-title); }
@keyframes choice-in { from { opacity: 0; transform: skewX(-6deg) translateX(-40px); } }

/* ログ */
.adv-log { position: absolute; z-index: 50; inset: 0; background: rgba(6, 9, 30, .9); display: flex; flex-direction: column; padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 16px) 10px calc(var(--safe-l) + 16px); cursor: default; animation: fade-in .15s; }
.adv-log-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.adv-log-list { flex: 1; overflow-y: auto; padding: 0 4% 20px; scrollbar-width: thin; user-select: text; }
.adv-log-row { padding: .5em 0; border-bottom: 1px dashed rgba(255,255,255,.18); font-family: var(--font-adv); font-size: var(--fs-m); line-height: 1.6; }
.adv-log-name { font-weight: 900; font-size: .85em; }
.adv-log-row.nar .adv-log-text, .adv-log-row.telop .adv-log-text { color: #c8d0f0; }
.adv-log-row.choice .adv-log-text { color: var(--c-accent-hi); font-weight: 800; }
.adv-log-row.mono .adv-log-text { color: #a8cfff; }

/* テロップ */
.adv-telop { position: absolute; z-index: 18; left: 0; top: calc(var(--safe-t) + clamp(10px, 4vh, 50px)); pointer-events: none; }
.telop { display: inline-block; padding: .4em 2.2em .4em calc(var(--safe-l) + 1.4em); background: linear-gradient(90deg, rgba(16, 22, 58, .95) 70%, rgba(16, 22, 58, 0));
  color: #fff; font: 400 var(--fs-l)/1.2 var(--font-title); letter-spacing: .12em; border-left: 8px solid var(--c-accent); animation: telop-in .5s cubic-bezier(.2, .9, .3, 1); }
.telop--time { border-left-color: var(--c-ice); font-size: var(--fs-m); }
.telop--big { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: .5em 1.6em; border: 0; background: none; font-size: var(--fs-xl);
  text-shadow: 0 4px 0 var(--c-accent-2), 0 0 20px rgba(0, 0, 0, .6); animation: pop-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.telop.is-out { opacity: 0; transition: opacity .5s; }
@keyframes telop-in { from { opacity: 0; transform: translateX(-60px); } }

/* MCハカリの実況 */
.adv-mc { position: absolute; z-index: 22; left: 0; right: 0; top: 26%; pointer-events: none; display: flex; justify-content: center; }
.mc-band { position: relative; display: flex; align-items: center; gap: 1em; width: min(96vw, 1400px); padding: .5em 2em .5em 1em; transform: skewY(-3deg);
  background: repeating-linear-gradient(-45deg, #ffd83a 0 22px, #ffcc12 22px 44px); border-top: 5px solid var(--c-line); border-bottom: 5px solid var(--c-line);
  color: var(--c-line); box-shadow: 0 8px 0 rgba(0,0,0,.35); animation: mc-in .35s cubic-bezier(.2, 1.3, .4, 1), mc-wobble 1.4s ease-in-out .35s infinite; }
.mc-band--L { font-size: 1.25em; }
.mc-band.is-out { animation: mc-out .25s ease-in forwards; }
.mc-face-wrap { flex: none; width: clamp(48px, 9vh, 110px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--c-line); background: #fff; }
.mc-face-wrap img, .mc-face-wrap .ph { width: 100%; height: 100%; object-fit: cover; }
.mc-text { font: 400 clamp(16px, 1.6vw + 1vh, 44px)/1.3 var(--font-title); letter-spacing: .02em; text-shadow: 2px 2px 0 #fff; }
.mc-tag { position: absolute; right: 1em; top: -1.1em; padding: .1em .8em; background: var(--c-danger); color: #fff; font: 400 var(--fs-s) var(--font-title); border: 3px solid var(--c-line); border-radius: 6px; }
@keyframes mc-in { from { transform: skewY(-3deg) translateX(-110%); } }
@keyframes mc-out { to { transform: skewY(-3deg) translateX(110%); } }
@keyframes mc-wobble { 50% { transform: skewY(-3deg) rotate(.6deg) scale(1.01); } }

/* カットイン */
.adv-cutin { position: absolute; z-index: 35; inset: 0; pointer-events: none; display: grid; align-items: center; }
.cutin-band { position: relative; height: clamp(110px, 34vh, 380px); overflow: hidden; transform: skewY(-6deg) scaleY(0); transform-origin: center;
  background: linear-gradient(90deg, var(--c2), var(--c1) 45%, var(--c2)); border-top: 6px solid #fff; border-bottom: 6px solid #fff; box-shadow: 0 0 0 4px var(--c-line), 0 14px 40px rgba(0,0,0,.5); }
.adv-cutin.is-on .cutin-band { animation: cutin-open .25s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.adv-cutin.is-off .cutin-band { transform: skewY(-6deg) scaleY(1); animation: cutin-close .2s ease-in forwards; }
.cutin-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 40px); animation: cutin-speed .25s linear infinite; }
.cutin-art { position: absolute; left: 4%; top: -10%; height: 130%; width: auto; transform: skewY(6deg); animation: cutin-art 1.6s cubic-bezier(.1, .9, .2, 1); filter: drop-shadow(6px 6px 0 rgba(0,0,0,.35)); }
.cutin-art--ph { width: 30%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.6) 0 18%, transparent 19%), linear-gradient(180deg, var(--ph-c), transparent); }
.cutin-text { position: absolute; right: 5%; left: 36%; top: 50%; transform: translateY(-60%) skewY(6deg); text-align: right;
  font: 400 clamp(22px, 3.4vw + 1vh, 92px)/1.1 var(--font-title); color: #fff; -webkit-text-stroke: 2px var(--c-line); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--c-line); animation: cutin-text .5s cubic-bezier(.2, 1.4, .4, 1) .08s backwards; }
.cutin-sub { position: absolute; right: 5%; bottom: 10%; transform: skewY(6deg); font: 800 var(--fs-m) var(--font-ui); color: #fff; background: var(--c-line); padding: .1em .8em; border-radius: 4px; }
@keyframes cutin-open { to { transform: skewY(-6deg) scaleY(1); } }
@keyframes cutin-close { to { transform: skewY(-6deg) scaleY(0); } }
@keyframes cutin-speed { to { background-position: -40px 0; } }
@keyframes cutin-art { from { transform: skewY(6deg) translateX(-40%); opacity: 0; } 30% { opacity: 1; } }
@keyframes cutin-text { from { transform: translateY(-60%) skewY(6deg) scale(2); opacity: 0; } }

.adv-flash { position: absolute; inset: 0; z-index: 60; opacity: 0; pointer-events: none; background: #fff; }

/* 画面揺れ */
.adv.shake-S .adv-stage { animation: shake-s .08s linear 4; }
.adv.shake-M { animation: shake-m .07s linear 6; }
.adv.shake-L { animation: shake-l .06s linear 10; }
@keyframes shake-s { 50% { transform: translate(2px, -1px); } }
@keyframes shake-m { 25% { transform: translate(-6px, 3px); } 75% { transform: translate(6px, -3px); } }
@keyframes shake-l { 25% { transform: translate(-14px, 6px) rotate(-.4deg); } 75% { transform: translate(14px, -6px) rotate(.4deg); } }

/* 演出（漫符・画面効果） */
.fx-mark { position: absolute; left: 62%; top: 0; font: 400 clamp(24px, 4vw, 80px)/1 var(--font-title); animation: fx-pop .5s cubic-bezier(.2, 1.8, .4, 1); text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.fx-mark--sweat { color: #6fc8ff; animation: fx-pop .4s, fx-drip 1.2s .4s ease-in infinite; }
.fx-mark--anger { color: #ff3b3b; animation: fx-pop .4s, fx-throb .5s .4s ease-in-out infinite; }
.fx-mark--heart { color: #ff5c9a; animation: fx-pop .4s, fx-throb .6s .4s ease-in-out infinite; left: 50%; }
.fx-mark--sparkle { color: #fff3a0; left: 20%; text-shadow: 0 0 12px #fff; animation: fx-pop .4s, fx-twinkle .8s .4s ease-in-out infinite; }
.fx-mark--question, .fx-mark--exclaim { color: #fff; -webkit-text-stroke: 3px var(--c-line); paint-order: stroke fill; left: 66%; }
.fx-mark--blush { left: 30%; top: 60%; width: 40%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 110, 150, .55), transparent 70%); }
.fx-mark--cold { color: #bfeaff; left: 40%; text-shadow: 0 0 14px #9fe0ff; }
@keyframes fx-pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
@keyframes fx-drip { 50% { transform: translateY(14px); opacity: .6; } }
@keyframes fx-throb { 50% { transform: scale(1.25); } }
@keyframes fx-twinkle { 50% { opacity: .4; transform: scale(.8) rotate(20deg); } }
.adv-fx .fx-mark { left: 50%; top: 30%; }
.adv-fx.fx-lines { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.7) 0 .6deg, transparent .6deg 6deg); -webkit-mask: radial-gradient(circle, transparent 28%, #000 62%); mask: radial-gradient(circle, transparent 28%, #000 62%); animation: lines-spin .5s steps(3) infinite; }
@keyframes lines-spin { to { transform: rotate(4deg) scale(1.02); } }
.adv-fx.fx-gloom { background: repeating-linear-gradient(90deg, rgba(20, 0, 50, .5) 0 3px, transparent 3px 26px); -webkit-mask: linear-gradient(180deg, #000 0%, transparent 60%); mask: linear-gradient(180deg, #000 0%, transparent 60%); }
.adv-fx.fx-cold { background: radial-gradient(ellipse at center, transparent 40%, rgba(150, 220, 255, .55)); box-shadow: inset 0 0 120px rgba(200, 240, 255, .8); }
.adv-fx .p { position: absolute; top: -10%; display: block; animation: p-fall linear infinite; transform: scale(var(--s)); }
.p-rain { width: 2px; height: 60px; background: linear-gradient(180deg, transparent, rgba(200, 220, 255, .8)); }
.p-snow { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.p-sakura { width: 14px; height: 10px; border-radius: 80% 0 80% 0; background: #ffc0d6; }
.p-stars { width: 6px; height: 6px; background: #fff7c0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); box-shadow: 0 0 8px #fff; animation-name: p-twinkle !important; top: auto; }
@keyframes p-fall { to { transform: translate(var(--dx), 120vh) rotate(540deg) scale(var(--s)); } }
@keyframes p-twinkle { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
.adv-fx .p-stars { top: calc(var(--s) * 60%); }

/* 章タイトル・章クリア・メジャーウォッチ・なかよしアップ（中央に出すカード） */
.adv-extra { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; }
.chapter-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 18px);
  background: radial-gradient(ellipse at center, rgba(29, 42, 107, .96), rgba(5, 8, 25, .98)); animation: fade-in .5s; }
.chapter-card.is-out { opacity: 0; transition: opacity .4s; }
.chapter-card-part { font: 800 var(--fs-m) var(--font-ui); color: var(--c-ice); letter-spacing: .3em; animation: telop-in .6s .2s backwards; }
.chapter-card-no { display: flex; align-items: baseline; gap: .1em; font: 400 var(--fs-xl) var(--font-title); color: #fff; animation: pop-in .6s .3s backwards cubic-bezier(.2, 1.5, .4, 1); }
.chapter-card-no b { font-size: 2.2em; color: var(--c-accent); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; line-height: 1; }
.chapter-card-title { font: 400 clamp(20px, 2.8vw + 1vh, 66px)/1.3 var(--font-title); color: #fff; text-align: center; padding: 0 5vw; text-shadow: 0 4px 0 var(--c-accent-2), 0 0 24px rgba(127, 216, 255, .6); animation: telop-in .7s .5s backwards; }
.chapter-card-ruler { width: min(70vw, 900px); height: clamp(18px, 3vh, 34px); border: 3px solid #fff; border-radius: 4px; background: var(--ruler-ticks), linear-gradient(90deg, rgba(127,216,255,.4), rgba(255,255,255,.15)); filter: invert(0); background-size: 100% 55%, 100% 100%; background-repeat: repeat-x; transform-origin: left; animation: ruler-grow .8s .6s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes ruler-grow { from { transform: scaleX(0); } }
.chapter-card--clear .chapter-card-clear { font: 400 clamp(30px, 5vw + 1vh, 120px)/1 var(--font-title); color: var(--c-gold); -webkit-text-stroke: 3px var(--c-line); paint-order: stroke fill; text-shadow: 0 8px 0 var(--c-accent); animation: pop-in .6s .4s backwards cubic-bezier(.2, 1.6, .4, 1); }

.watch { position: relative; width: clamp(200px, 36vw, 560px); aspect-ratio: 1.8; animation: pop-in .4s cubic-bezier(.2, 1.5, .4, 1); }
.watch.is-out { opacity: 0; transform: scale(.8); transition: .25s; }
.watch-face { position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse at 30% 20%, #4a5aa0, #0e1430); border: 6px solid #cfd8ff; box-shadow: 0 0 0 5px var(--c-line), 0 0 40px rgba(127, 216, 255, .6), inset 0 0 30px rgba(127, 216, 255, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.watch-label { color: var(--c-ice); font: 800 var(--fs-m) var(--font-ui); letter-spacing: .3em; }
.watch-num { color: #fff; font-size: var(--fs-num); text-shadow: 0 0 16px var(--c-ice); white-space: nowrap; }
.watch-ticks { position: absolute; left: 8%; right: 8%; bottom: 10%; height: 10px; background: var(--ruler-ticks); filter: invert(1); opacity: .5; }
.watch.is-crack .watch-face { animation: watch-crack .3s steps(2) 4; border-color: #ff6a6a; }
.watch.is-crack .watch-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 48%, #fff 49%, transparent 51%), linear-gradient(60deg, transparent 58%, #fff 59%, transparent 60%); opacity: .8; }
@keyframes watch-crack { 50% { transform: translate(6px, -4px); filter: hue-rotate(90deg); } }

.heart-up { display: flex; align-items: center; gap: 1.2em; padding: 1em 2em; border-radius: 22px; background: linear-gradient(180deg, #fff, #ffe6f0); border: var(--bw) solid var(--c-line); box-shadow: var(--shadow); color: var(--c-text); animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.heart-up-face { width: clamp(56px, 11vh, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--c-heart); }
.heart-up-face img, .heart-up-face .ph { width: 100%; height: 100%; object-fit: cover; }
.heart-up-title { font: 900 var(--fs-l) var(--font-ui); }
.heart-up-hearts i { font-style: normal; font-size: var(--fs-xl); color: #e6d6dc; margin-right: .1em; }
.heart-up-hearts i.on { color: var(--c-heart); animation: pop-up .4s backwards; }
.heart-up-dist { font-weight: 800; }
.heart-up-dist b { font-size: 1.6em; color: var(--c-heart); }

/* 小さい画面（スマホ横持ち） */
@media (max-height: 500px) {
  .adv-window { width: min(96vw, 1340px); padding: 12px 18px 8px; bottom: calc(var(--safe-b) + 4px); }
  .adv-text { line-height: 1.48; min-height: calc(3 * 1.48em); }
  .adv-ctrl { top: calc(var(--safe-t) + 4px); gap: 4px; }
  .adv-cbtn { min-height: 30px; padding: .2em .6em; }
  .adv-choices { padding-bottom: 34vh; }
  .adv-choice { padding: 8px 2.4em; font-size: var(--fs-m); }
}

/* バトルの上に重ねる ADV：右上のボタンはバトルの「視点・早送り・ポーズ」と重ならないよう、その下に置く */
.adv--overlay .adv-ctrl { top: calc(var(--safe-t) + clamp(54px, 9.5vh, 80px)); }
.adv--overlay { background: linear-gradient(180deg, rgba(8, 10, 30, .12), rgba(8, 10, 30, .32)); }