/* WOLHA_EYE_MOTION_V1: bounded golden fallback; the real result owns completion. */
[data-wolha-writing][hidden]{display:none!important}
.f-wolha-writing{position:relative;isolation:isolate;width:100%;max-width:400px;margin:14px auto 18px;border:1px solid #ae8d526b;border-radius:14px;overflow:hidden;background:#090b08;box-shadow:0 12px 30px #0003;contain:layout paint}
.f-wolha-writing__scene{position:relative;width:min(100%,210px);aspect-ratio:9/16;margin:0 auto;overflow:hidden;background:#080907}
.f-wolha-writing__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.f-wolha-writing__fallback{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#3b2f13,#090b08 70%);opacity:1;transition:opacity .35s ease}
.f-wolha-writing__fallback::after{content:'';position:absolute;z-index:1;left:27.8%;top:17.1%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff0b480 0,#edc35966 18%,#e8b34c29 45%,transparent 72%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.f-wolha-writing__fallback.has-portrait::after{opacity:.7;animation:f-wolha-eye-light 5s ease-in-out infinite alternate}
.f-wolha-writing[data-mode=canvas] .f-wolha-writing__canvas{opacity:1}
.f-wolha-writing[data-mode=canvas] .f-wolha-writing__fallback{opacity:0;visibility:hidden}
.f-wolha-writing__portrait{position:absolute;inset:0 0 auto;display:block;width:100%;height:58%;object-fit:cover;object-position:28% 28%;opacity:.52;mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent);transform-origin:28% 29%;animation:f-wolha-breath 8s ease-in-out infinite alternate}
.f-wolha-writing__paper{position:absolute;z-index:2;left:26.4%;top:37.6%;width:47.2%;height:52.5%;border-radius:1px;background:repeating-linear-gradient(4deg,#c6984a08 0 1px,transparent 1px 5px),repeating-linear-gradient(86deg,#fff1c807 0 1px,transparent 1px 4px),linear-gradient(120deg,#edcf68,#f2d46a 58%,#d5b445);box-shadow:0 4px 12px #0004,inset 0 0 12px #9c672829}
.f-wolha-writing__touch{position:absolute;left:var(--touch-x);top:var(--touch-y);width:var(--touch-w);height:var(--touch-h);background:#b92518;transform:translate(-50%,-50%) rotate(var(--touch-angle));mask-image:url('/static/fate-v1/ritual-v3/assets/brush-atlas.png');-webkit-mask-image:url('/static/fate-v1/ritual-v3/assets/brush-atlas.png');mask-size:400% 400%;-webkit-mask-size:400% 400%;mask-position:var(--atlas-x) var(--atlas-y);-webkit-mask-position:var(--atlas-x) var(--atlas-y);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;opacity:0;animation:f-wolha-touch .45s ease-out both;animation-delay:var(--touch-delay)}
.f-wolha-writing__brush{position:absolute;z-index:3;left:47%;top:31%;width:12%;height:33%;transform-origin:50% 9%;transform:translate(0,0) rotate(26deg);animation:f-wolha-brush 7.2s ease-in-out both;pointer-events:none}
.f-wolha-writing__brush svg{display:block;width:100%;height:100%;overflow:visible}
.f-wolha-writing__caption{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 12px;color:#edd7ab;background:#10170e;font-size:14px;font-weight:500;line-height:1.5;text-align:center;overflow-wrap:anywhere;border-top:1px solid #b28e4833}
.f-wolha-writing__dot{flex:0 0 5px;width:5px;height:5px;background:#d3ac68;border-radius:50%;box-shadow:0 0 9px #d3ac6855;animation:f-wolha-candle 2.5s ease-in-out infinite alternate}
.f-wolha-writing:not(.is-active) *,.f-wolha-writing.is-page-hidden *{animation-play-state:paused!important}
.f-wolha-writing:not(.is-active) .f-wolha-writing__fallback::after,.f-wolha-writing.is-page-hidden .f-wolha-writing__fallback::after{animation-play-state:paused!important}
.f-wolha-writing.is-complete .f-wolha-writing__touch{animation:none;opacity:1}
.f-wolha-writing.is-complete .f-wolha-writing__brush{opacity:0;animation:none}
@keyframes f-wolha-breath{from{transform:scale(1.015)}to{transform:scale(1.04)}}
@keyframes f-wolha-candle{from{opacity:.42}to{opacity:.8}}
@keyframes f-wolha-eye-light{from{opacity:.42;transform:translate(-50%,-50%) scale(.96)}to{opacity:.78;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes f-wolha-touch{from{opacity:0}to{opacity:1}}
@keyframes f-wolha-brush{0%,6%{transform:translate(-8px,-8px) rotate(28deg);opacity:1}18%{transform:translate(5px,3px) rotate(13deg)}31%{transform:translate(-7px,16px) rotate(24deg)}47%{transform:translate(5px,29px) rotate(11deg)}63%{transform:translate(-3px,43px) rotate(22deg)}83%{transform:translate(5px,58px) rotate(13deg);opacity:1}100%{transform:translate(4px,49px) rotate(28deg);opacity:0}}
@media(max-width:560px){.f-wolha-writing{max-width:340px;margin:12px auto 16px;border-radius:12px}.f-wolha-writing__scene{width:min(100%,250px)}.f-wolha-writing__caption{font-size:13px;min-height:44px;padding:10px 9px}}
@media(prefers-reduced-motion:reduce){.f-wolha-writing__canvas,.f-wolha-writing__fallback{transition:none}.f-wolha-writing__portrait,.f-wolha-writing__dot,.f-wolha-writing__fallback.has-portrait::after{animation:none}.f-wolha-writing__touch{animation:none;opacity:1}.f-wolha-writing__brush{animation:none;opacity:0}}
/* Preserve the portrait scene inside the native dialog's older height rules. */
#my-story-card dialog .f-wolha-writing__scene{height:auto;min-height:0;max-height:none;aspect-ratio:9/16}

/* V4: an apparition in the page, without a framed video card. */
.f-wolha-writing{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.f-wolha-writing__scene{background:transparent}
.f-wolha-writing__canvas{background:transparent;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.f-wolha-writing__caption{border:0;background:transparent;color:#e9cf94}
.f-wolha-writing__fallback{background:radial-gradient(ellipse at 50% 55%,#4c382524,transparent 72%)}
.f-wolha-writing__portrait{inset:0 0 auto;width:100%;height:auto;object-fit:contain;object-position:center;opacity:.68;transform-origin:52.5% 48.3%;mask-image:radial-gradient(ellipse at 52.5% 48.3%,#000 14%,#000b 35%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 52.5% 48.3%,#000 14%,#000b 35%,transparent 70%);animation:f-wolha-breath 8s ease-in-out infinite alternate}
.f-wolha-writing__portrait-closed{opacity:0;animation:none}
.f-wolha-writing__fallback.has-closed-eye .f-wolha-writing__portrait-closed{animation:f-wolha-closed-eye 9.2s linear infinite,f-wolha-breath 8s ease-in-out infinite alternate}
.f-wolha-writing__fallback.has-closed-eye>.f-wolha-writing__portrait:not(.f-wolha-writing__portrait-closed){animation:f-wolha-open-eye 9.2s linear infinite,f-wolha-breath 8s ease-in-out infinite alternate}
.f-wolha-writing__fallback::after{left:52.5%;top:18.1%;width:14%;background:radial-gradient(circle,transparent 0 15%,#ffdf8d88 25%,#edb44b44 42%,transparent 70%)}
.f-wolha-writing__fallback.has-portrait::after{animation:f-wolha-eye-light 5s ease-in-out infinite alternate}
.f-wolha-writing__fallback.has-closed-eye.has-portrait::after{animation:f-wolha-fallback-light 9.2s linear infinite}
@keyframes f-wolha-open-eye{0%,76.5%,85%,100%{opacity:.68}80.5%,82.5%{opacity:0}}
@keyframes f-wolha-closed-eye{0%,76.5%,85%,100%{opacity:0}80.5%,82.5%{opacity:.68}}
@keyframes f-wolha-fallback-light{0%,18%,48%,70%,92%,100%{opacity:.6}32%,62%{opacity:.85}76.5%,85%{opacity:.5}80.5%,82.5%{opacity:0}}
@media(max-width:560px){.f-wolha-writing{border-radius:0}}
@media(prefers-reduced-motion:reduce){.f-wolha-writing__portrait,.f-wolha-writing__fallback.has-closed-eye .f-wolha-writing__portrait,.f-wolha-writing__fallback.has-closed-eye.has-portrait::after{animation:none!important}.f-wolha-writing__portrait-closed{opacity:0!important}.f-wolha-writing__portrait:not(.f-wolha-writing__portrait-closed){opacity:.68!important}}

/* V5: only an active talisman scene uses the immersive presentation. */
html:has(#my-story-card dialog[open] [data-view="talisman"][data-talisman-visual-active="true"]),body:has(#my-story-card dialog[open] [data-view="talisman"][data-talisman-visual-active="true"]){overflow:hidden;overscroll-behavior:none}
.f-wolha-writing{max-width:600px}
.f-wolha-writing__scene{width:min(100%,420px)}
#my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]){width:min(1120px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:0;overflow:hidden}
#my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]) .f-dialog-head{position:absolute;inset:0 0 auto;z-index:8;min-height:64px;padding:10px 18px;border:0;background:linear-gradient(#0b152cde,#0b152c80,transparent);pointer-events:none}
#my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]) .f-dialog-head .f-close{pointer-events:auto;background:#101c2b80;border-color:#cdb57a66;min-width:54px;min-height:44px}
#my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]) .f-dialog-body{position:relative;flex:1 1 auto;min-height:0;width:100%;height:100%;padding:0;overflow:hidden}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]{position:absolute;inset:0;min-height:100%;padding:0;overflow:hidden}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-talisman-visual-top{position:absolute;inset:0;margin:0;padding:0;pointer-events:none}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] [data-wolha-writing="talisman"]{position:absolute;inset:0;width:100%;height:100%}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;contain:layout paint}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-talisman-visual-top .f-wolha-writing__scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;margin:0;background:transparent}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__canvas{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;mask-image:none;-webkit-mask-image:none}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__fallback{inset:0 auto auto 50%;width:auto;height:100%;aspect-ratio:9/16;transform:translateX(-50%)}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__caption{position:absolute;left:12px;right:12px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:3;min-height:0;padding:3px 0;font-size:12px;line-height:1.6;pointer-events:none;text-shadow:0 1px 5px #000;background:transparent}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-talisman-elapsed{position:absolute;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:4;margin:0;font-size:11px;line-height:1.6;text-shadow:0 1px 5px #000;pointer-events:none}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>[data-talisman-status]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] [data-talisman-stage="appraising"]>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"] [data-action="talisman-appraisal-resume"]:not([hidden]){position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));z-index:9;transform:translateX(-50%);width:min(260px,calc(100% - 24px));min-height:44px}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>[data-talisman-error]:not([hidden]){position:absolute;left:12px;right:12px;bottom:calc(115px + env(safe-area-inset-bottom));z-index:9;max-height:35%;overflow:auto;margin:0;padding:10px 12px;border-radius:8px;background:#172030ed;color:#ffccbc;font-size:13px;line-height:1.7}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>.f-form-actions{position:absolute;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:7;gap:8px;justify-content:center;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>.f-form-actions>[data-action="cancel"],#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>.f-form-actions>[data-action="talisman-resume"]:disabled{display:none}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]>.f-form-actions>.f-button{flex:0 1 260px;min-height:44px;padding:8px 14px;box-shadow:0 5px 20px #0005}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]:has(>.f-form-actions>.f-button:not([hidden]):not(:disabled)) .f-wolha-writing__caption{bottom:calc(91px + env(safe-area-inset-bottom))}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]:has(>.f-form-actions>.f-button:not([hidden]):not(:disabled)) .f-talisman-elapsed{bottom:calc(68px + env(safe-area-inset-bottom))}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]:has([data-action="talisman-appraisal-resume"]:not([hidden])) .f-wolha-writing__caption{bottom:calc(91px + env(safe-area-inset-bottom))}
#my-story-card [data-view="talisman"][data-talisman-visual-active="true"]:has([data-action="talisman-appraisal-resume"]:not([hidden])) .f-talisman-elapsed{bottom:calc(68px + env(safe-area-inset-bottom))}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
 #my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]){inset:0;transform:none;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
 #my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]) .f-dialog-head{min-height:60px;padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}
 #my-story-card dialog:has([data-view="talisman"][data-talisman-visual-active="true"]) .f-dialog-head h2{font-size:16px;font-weight:500}
 #my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__canvas{object-fit:cover;object-position:50% 38%}
 #my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__fallback{width:max(100vw,calc(100dvh * .5625));height:auto;aspect-ratio:9/16}
}
@media(orientation:landscape) and (max-height:500px){
 #my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__canvas{object-fit:contain;object-position:50% 50%}
 #my-story-card [data-view="talisman"][data-talisman-visual-active="true"] .f-wolha-writing__fallback{width:auto;height:100%;aspect-ratio:9/16}
}