/* The encounter stays open when inspecting its ink, outcome and other solutions. */
/* Forward film steps travel through the open paper; the mounting never folds. */
.scroll-rise-window{position:absolute;inset:0;clip-path:inset(150px 65px 85px 65px);pointer-events:none}
.scroll-rise-window>.scroll-interior{will-change:transform}
.scroll-slide-window{position:absolute;inset:0;clip-path:inset(150px 65px 85px 65px);pointer-events:none}
.scroll-slide-window>.scroll-interior{will-change:transform}
#app[data-scroll-state=sliding-replace] .scroll-interior{visibility:hidden}
#app[data-scroll-state=rising-replace] .scroll-interior{transform:translateY(1080px)}
/* Vermilion opens from left to right; the menu keeps one quiet, equal rhythm. */
.home-screen .home-copy{width:665px}
.home-screen .home-invitation{width:370px;margin-top:23px;gap:8px;display:flex;flex-direction:column;align-items:stretch}
.home-invitation .home-menu-item{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;min-height:74px;padding:13px 18px;gap:8px;text-align:left;background:transparent;color:var(--ink);border:0;box-shadow:none;letter-spacing:3px;transition:color .25s ease}
.home-invitation .home-menu-item::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(95deg,#8d402d,#a14e36);box-shadow:inset 0 0 0 3px #9b4b35,inset 0 0 0 4px #e4b68652;clip-path:inset(0 100% 0 0);transition:clip-path .72s cubic-bezier(.22,.65,.3,1)}
.home-invitation .home-menu-item span{color:inherit;border:0;margin:0;padding:0;font:inherit}
.home-invitation .home-menu-item .home-menu-label{flex:0 0 134px;font-size:29px;line-height:1.5;white-space:nowrap;letter-spacing:4px}
.home-invitation .home-menu-item .home-menu-detail{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.55;letter-spacing:0;white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .45s ease;pointer-events:none}
.home-invitation .home-menu-detail::before{content:'';width:1px;height:20px;background:currentColor;opacity:.38;margin-right:1px;flex:none}
.home-invitation .home-menu-item .home-ordeal-number{font-size:18px;letter-spacing:2px}
.home-invitation .home-menu-item:is(:hover,:focus-visible){color:#fff0d7}
.home-invitation .home-menu-item:is(:hover,:focus-visible)::before{clip-path:inset(0 0 0 0)}
.home-invitation .home-menu-item:is(:hover,:focus-visible) .home-menu-detail{opacity:1;transform:translateX(0);transition-delay:.15s}
@media(hover:none){.home-invitation .home-menu-item .home-menu-detail{opacity:1;transform:none;color:#86755e}.home-invitation .home-menu-item:is(:active,:focus-visible) .home-menu-detail{color:inherit}.home-invitation .home-menu-item:active::before{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.home-invitation .home-menu-item,.home-invitation .home-menu-item::before,.home-invitation .home-menu-item .home-menu-detail{transition:none!important}}
.art-actions{position:absolute;left:245px;top:908px;width:1090px;display:flex;justify-content:flex-end;align-items:center;gap:16px;height:46px;z-index:8}
.art-icon{position:relative;display:grid;place-items:center;width:50px;height:46px;color:#7a8169;border:1px solid transparent;border-radius:50%}
.art-icon svg{width:28px;height:28px}
.art-icon:hover,.art-icon:focus-visible{border-color:#a99d7e77;background:#eee4ce77}
.art-icon span{position:absolute;bottom:51px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:18px;letter-spacing:2px;padding:4px 12px;background:#f2ebda;border:1px solid #bbae9255;color:#6f765f;opacity:0;pointer-events:none}
.art-icon:hover span,.art-icon:focus-visible span{opacity:1}
.final-inscription .ending-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.final-inscription .ending-actions .primary{grid-column:1/-1}
.final-inscription .ending-actions.is-unresolved .primary{grid-column:auto}
.final-inscription .ending-actions .secondary{padding-inline:8px}
.reason-actions{display:flex;gap:15px;align-items:center;margin-top:30px}
.reason-actions .primary{margin-top:0}
.reason-actions button{flex:1;min-width:0;white-space:nowrap;font-size:20px;letter-spacing:2px;padding:12px 10px;gap:10px;min-height:54px}
.play-screen .art-actions{top:898px}
.final-inscription .ending-actions button{min-height:58px;font-size:23px}
.final-inscription .ending-actions .secondary{min-height:48px;transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.final-inscription .ending-actions .secondary:is(:hover,:focus-visible):not(:disabled){background-color:#9845301f;border-color:#984530bf;color:var(--red)}
.ending-screen .painting-view{overflow:hidden}

/* A single signature, with its seal preview exactly where it will land in the film. */
.signature-view{top:320px;left:220px;right:200px;grid-template-columns:950px 430px;gap:90px;align-items:center}
.signature-preview{position:relative;height:534.375px}
.signature-preview img{object-fit:contain}
.signature-preview canvas{position:absolute;right:35px;bottom:28px;width:145px;height:145px}
.signature-view form{align-self:center;min-width:0}
.signature-view h1{font-size:48px;letter-spacing:8px;margin:20px 0 42px}
.signature-view label{font-size:19px;letter-spacing:4px;margin:0 0 14px;color:#999077}
.signature-view #player-name{
 --signature-ink:#586149;
 display:block;width:100%;border:0;border-bottom:1px solid #a79a7d;border-radius:0;
 appearance:none;-webkit-appearance:none;background:transparent;box-shadow:none;outline:none;
 padding:12px 5px 18px;font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;
 font-size:38px;font-weight:300;line-height:1.5;letter-spacing:6px;
 color:var(--signature-ink);-webkit-text-fill-color:var(--signature-ink);caret-color:var(--red);
 /* Clip native autofill paint to the letters, leaving the scroll's paper visible. */
 -webkit-background-clip:text;background-clip:text;
 transition:border-color .2s ease;
}
.signature-view #player-name:focus{border-bottom-color:var(--red)}
.signature-view #player-name::placeholder{font-size:23px;font-weight:300;letter-spacing:2px;color:#a39880;-webkit-text-fill-color:#a39880;opacity:1}
.signature-view .signature-next{margin:16px 0 0;font-size:19px;line-height:1.6;letter-spacing:3px;color:#91836b}
.signature-back-links{display:flex;align-items:center;justify-content:space-between;gap:24px}
.signature-view .signature-actions .signature-back-links button[type=button]{font-size:20px;margin:0;line-height:1.6}
.signature-actions{margin-top:35px;display:flex;flex-direction:column;gap:14px}
.signature-actions .secondary{width:100%;font-size:22px;min-height:54px}
.signature-actions .primary{font-size:24px;width:100%;margin:0;letter-spacing:2px}
.signature-view .signature-actions button[type=button]{font-size:22px;margin-top:6px}

/* Three equal cards. Hover previews a choice; selecting it requires a separate confirmation. */
.choices-screen .book-view{left:220px;right:220px;top:250px;bottom:118px}
.choices-screen .book-heading{height:82px}
.choices-screen .book-heading h1{font-size:38px;letter-spacing:5px}
.choices-screen .book-heading>.eyebrow{font-size:18px}
.choices-grid{margin-top:14px;gap:26px;align-items:stretch}
#new-ordeal-slot{min-width:0}
.relay-choice{display:grid;grid-template-rows:24px 208px 40px minmax(66px,1fr)44px;gap:8px;height:526px;width:100%;padding:14px 18px;text-align:center;min-width:0;border:2px solid #ab977768;background:#eee6d91f;transition:background .18s,border-color .18s,box-shadow .18s}
.relay-choice .choice-type{font-size:18px;line-height:24px;letter-spacing:4px;color:#8e7c60}
.relay-choice .thumb,.relay-choice .new-ordeal-art{height:208px;min-width:0;width:100%;margin:0}
.relay-choice .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.relay-choice h3{font-size:32px;line-height:40px;letter-spacing:3px;margin:0;color:#47573e}
.relay-choice>p{font-size:21px;line-height:1.5;color:#817961;margin:0;min-height:0;white-space:normal}
.relay-choice .choice-check,.relay-choice .choice-retry{font-size:20px;letter-spacing:3px;line-height:28px;color:#9a8d72;text-align:center;margin:0;justify-self:center;align-self:center;width:fit-content;padding:3px 14px}
.relay-choice:not([aria-busy]):hover,.relay-choice:focus-visible{background:#f6e9d399;border-color:#a33f2a;box-shadow:inset 0 0 0 3px #f7eedb,inset 0 0 0 4px #a33f2a91,0 3px 12px #6b3c2510}
.relay-choice[aria-pressed=true],.relay-choice[aria-pressed=true]:is(:hover,:focus-visible){border-color:#a22f21;background:#f7e9d2b3;box-shadow:inset 0 0 0 3px #f7eedb,inset 0 0 0 5px #a22f21ba,0 4px 14px #6b3c2517}
.relay-choice[aria-pressed=true] .choice-type{color:#9a3425}
.relay-choice[aria-pressed=true] .choice-check{color:#fff0da;background:#9a3425;letter-spacing:2px}
.relay-choice .new-ordeal-art img{object-fit:contain}
.relay-choice .new-ordeal-art:after{content:none;animation:none}
.new-ordeal-ink{position:absolute;width:190px;height:114px;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;color:#57644e;filter:drop-shadow(0 1px 2px #f2ecde99)}
.realm-ridge,.realm-river,.realm-ripple{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.realm-ridge{stroke-width:3.2px}.realm-ridge-far{stroke-width:2px;opacity:.65}.realm-river{stroke-width:2px}.realm-ripple{stroke-width:1px;opacity:.16;transform-origin:101px 85px}
.realm-brush-handle{fill:none;stroke:#906e40;stroke-width:5px;stroke-linecap:round}.realm-brush-tip{fill:#46533e}
.new-ordeal-wait[aria-busy=true] .realm-ridge,.new-ordeal-wait[aria-busy=true] .realm-river{stroke-dasharray:1;animation:realm-draw 3.6s ease-in-out infinite}
.new-ordeal-wait[aria-busy=true] .realm-ridge-near{animation-delay:.3s}.new-ordeal-wait[aria-busy=true] .realm-river{animation-delay:.65s}
.new-ordeal-wait[aria-busy=true] .realm-brush{animation:realm-brush 3.6s ease-in-out infinite;transform-origin:138px 30px}
.new-ordeal-wait[aria-busy=true] .realm-ripple{animation:realm-ripple 3.6s ease-out infinite}
.new-ordeal-wait[aria-busy=false] .realm-brush{display:none}
.new-ordeal-wait[aria-busy=true] .choice-retry:disabled{opacity:.6}
@keyframes realm-draw{0%{stroke-dashoffset:1;opacity:.12}48%,76%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:.12}}
@keyframes realm-brush{0%,100%{transform:translate(-23px,9px) rotate(-8deg);opacity:.35}35%{transform:translate(-6px,-5px) rotate(7deg);opacity:.95}70%{transform:translate(20px,17px) rotate(-5deg);opacity:.85}}
@keyframes realm-ripple{0%{transform:scale(.55);opacity:.05}45%{opacity:.22}100%{transform:scale(1.17);opacity:0}}
.choice-confirm-row{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid var(--line);padding-top:13px;height:70px}
.choice-confirm-row .primary{font-size:22px;min-height:56px;padding:10px 24px;letter-spacing:2px}

/* Other solutions are a read-only view; they never replace the visitor's active drawing. */
.solutions-heading{position:absolute;left:245px;right:185px;top:237px;display:flex;align-items:center;justify-content:space-between}
.solutions-heading h1{font-size:38px;letter-spacing:6px;line-height:1.4}
.solutions-heading>button{font-size:21px;color:#8a7d62}
.solution-filters{position:absolute;left:1370px;top:332px;gap:18px}
.solution-filters button{font-size:18px;letter-spacing:1px;white-space:nowrap}
.solution-art-tabs{position:absolute;left:245px;top:313px;gap:28px}
.solution-art-tabs button{font-size:20px}
.solution-art{position:absolute;left:245px;top:360px;width:1030px;height:579.375px;overflow:hidden}
.solution-art>img{display:block;width:100%;height:100%;object-fit:contain}
.solution-inscription{position:absolute;left:1360px;top:405px;width:400px;height:514px;display:flex;flex-direction:column}
.solution-inscription h2{font-size:30px;line-height:1.5;letter-spacing:2px;margin:14px 0 20px}
.solution-inscription>p{font-size:21px;line-height:1.6;color:#66725b}
.solution-poem{font-size:23px;line-height:1.6;letter-spacing:2px;margin-top:23px;color:#897051}
.solution-inscription small{font-size:16px;color:#998b72;margin-top:auto;padding-top:15px}
.solution-pager{position:absolute;top:935px;left:245px;width:1030px;display:flex;align-items:center;justify-content:space-between;font-size:21px;color:#8a7d63}
.solutions-screen .book-view .solution-filters{position:static;margin-top:22px}
@media(prefers-reduced-motion:reduce){.relay-choice{transition:none}.new-ordeal-ink *{animation:none!important;stroke-dashoffset:0;transform:none}.new-ordeal-ink .realm-ridge,.new-ordeal-ink .realm-river{opacity:.8}}
