/* The first egg (D118): the World's visual-novel scenes — the little shrine and the Wards' House. The backdrop fills the
   scene, the people stand in it, the dialogue box sits at the bottom in the way in's gold (join.css), the choices as
   cards. Without vn.js every line is listed in the box; with it (.is-live) one at a time. No inline styles (CSP). */
.vn2 { position: absolute; inset: 0; overflow: hidden; background: #0c0a18; color: #f6f2ff; font: 16px/1.5 var(--nx-font-body); }
.vn2-stage { position: absolute; inset: 0; }
.vn2-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vn2-bg-wards { background: #120b2a url(/static/img/join/wards.webp) center / cover no-repeat; animation: vn2Drift 46s ease-in-out infinite alternate; }
@keyframes vn2Drift { from { transform: scale(1.02); } to { transform: scale(1.07) translate(-1%, -.8%); } }
.vn2-stage::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(6, 4, 22, .8)); pointer-events: none; }
.vn2-cast { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vn2-fig { position: absolute; bottom: 0; margin: 0; height: 74%; transform-origin: 50% 100%; transition: filter .3s, transform .3s; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) brightness(.86); animation: vn2In .8s cubic-bezier(.2, .8, .2, 1) both; }
.vn2-fig img { display: block; height: 100%; width: auto; }
.vn2-fig .vn2-svg, .vn2-fig .vn2-svg svg { display: block; height: 100%; width: auto; aspect-ratio: 100 / 160; }
.vn2-fig.speaking { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) brightness(1.05); transform: translateY(-6px); }
.vn2-child { right: 16%; height: 56%; }
.vn2-oriel { left: 5%; height: 80%; animation-delay: .1s; }
.vn2[data-story^="shrine"] .vn2-child { right: auto; left: 50%; translate: -50% 0; height: 58%; }
@keyframes vn2In { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.vn2-egg { position: absolute; z-index: 2; bottom: 17%; right: calc(16% + 4.5%); width: min(9vw, 92px); filter: drop-shadow(0 0 18px rgba(255, 214, 140, .8)); animation: vn2Egg 2.6s ease-in-out infinite; }
.vn2[data-story^="shrine"] .vn2-egg { right: auto; left: calc(50% - min(4.5vw, 46px)); bottom: 15%; }
.vn2-egg .vn2-egg-in { animation: vn2Turn 3.4s ease-in-out infinite; transform-origin: 40px 58px; }
@keyframes vn2Egg { 50% { transform: translateY(-5px); filter: drop-shadow(0 0 28px rgba(255, 214, 140, 1)); } }
@keyframes vn2Turn { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-24deg) translateX(-4px); } 90% { transform: rotate(18deg) translateX(3px); } }

.vn2-box { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(1040px, calc(100% - 24px)); max-height: 52%; overflow: auto; padding: 18px 22px 14px 128px; background: linear-gradient(180deg, rgba(26, 14, 52, .94), rgba(12, 6, 30, .96)); border: 2px solid rgba(255, 214, 140, .55); border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .55), inset 0 0 30px rgba(255, 214, 140, .06); cursor: pointer; }
.vn2-head { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100px; }
.vn2-face { width: 96px; height: 96px; object-fit: cover; object-position: 50% 12%; border-radius: 18px; border: 2px solid rgba(255, 214, 140, .65); background: #2a1a40; }
.vn2-who { padding: 2px 12px; border-radius: 999px; background: linear-gradient(90deg, #ffd27a, #ff9a6a); color: #2a1030; font: 16px var(--nx-font-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.vn2-out { min-height: 3.2em; margin: 0 0 8px; font: 19px/1.5 var(--nx-font-body); color: #fbf8ff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.vn2-out.narr { font-style: italic; color: #e6dcff; }
.vn2-script { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; }
.vn2-script .vn2-n { font-style: italic; color: #e6dcff; }
.vn2:not(.is-live) .vn2-out, .vn2:not(.is-live) .vn2-head { display: none; } .vn2:not(.is-live) .vn2-box { padding-left: 22px; cursor: default; }
.vn2.is-live .vn2-script { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vn2-more { position: absolute; right: 16px; bottom: 10px; border: 0; background: none; color: #ffd27a; font-size: 18px; cursor: pointer; animation: vn2Bob 1s ease-in-out infinite; }
@keyframes vn2Bob { 50% { transform: translateY(3px); } }
.vn2-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px; }
.vn2-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 10px; border: 1px solid rgba(255, 214, 140, .6); border-radius: 14px; background: rgba(255, 214, 140, .1); color: #fff7e0; font: 600 16px var(--nx-font-body); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.vn2-choice i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(90deg, #ffd27a, #ff9a6a); color: #2a1030; font: 700 12px var(--nx-font-console); font-style: normal; }
.vn2-choice:hover, .vn2-choice:focus-visible { background: rgba(255, 214, 140, .22); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255, 180, 90, .25); outline: none; }
.vn2-choice.vn2-soft { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); font-weight: 500; }
.vn2-note { margin: 8px 0 0; font-size: 13px; color: #cbbfe8; }

/* the Home while the child is missing */
.vn2-missing { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); padding: 22px 26px; background: rgba(12, 8, 30, .92); border: 2px solid rgba(255, 214, 140, .55); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); text-align: center; color: #f6f2ff; }
.vn2-missing-h { margin: 0 0 8px; font: 28px/1.1 var(--nx-font-display); letter-spacing: .03em; text-transform: uppercase; color: #ffd27a; }
.vn2-missing p { margin: 0 0 12px; } .vn2-missing .nx-btn { margin: 4px; }

@media (max-width: 760px) {
  .vn2-box { padding: 12px 14px 12px 78px; max-height: 58%; bottom: 8px; }
  .vn2-head { width: 60px; left: 10px; top: 12px; } .vn2-face { width: 56px; height: 56px; border-radius: 12px; } .vn2-who { font-size: 12px; padding: 1px 8px; }
  .vn2-out { font-size: 16px; } .vn2-choice { font-size: 15px; min-height: 40px; }
  .vn2-oriel { left: -6%; height: 64%; } .vn2-child { right: 4%; height: 46%; } .vn2-egg { right: 14%; width: 56px; bottom: 34%; }
  .vn2[data-story^="shrine"] .vn2-egg { left: calc(50% - 28px); bottom: 36%; } .vn2[data-story^="shrine"] .vn2-child { height: 48%; bottom: 22%; }
}