@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;800&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root{color-scheme:dark;--paper:#eee8dd;--gold:#dcb780;--muted:#848b99;--line:#ffffff16;font-family:'Noto Sans KR',sans-serif;background:#10131a;color:var(--paper)}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit;cursor:pointer}button{background:none;border:1px solid var(--line);border-radius:6px;padding:10px 16px}button:hover{background:#ffffff0c;border-color:#dcb78080}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.masthead{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);gap:20px}.brand{color:var(--paper);text-decoration:none;font-size:36px;font-family:Georgia,serif;font-style:italic;letter-spacing:-2px;display:flex;align-items:center;gap:18px}.brand span{font:9px/1.5 sans-serif;letter-spacing:2px;color:var(--muted);max-width:80px}.masthead nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px}.masthead nav button{border:0;font-size:12px;color:var(--muted);padding:9px 20px}.masthead nav button.active{background:#dcb78018;color:var(--gold)}.pilot{font-size:10px;letter-spacing:2px;color:var(--muted)}
#film-view{max-width:1480px;margin:auto;padding:0 5vw;display:flex;flex-direction:column;height:calc(100dvh - 82px);min-height:500px}.episode-line{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:1px;color:#c4c6ce;padding:23px 0 17px}.episode-line i,footer i{font-style:normal;color:#4b525f;padding:0 8px}#chapter-label{color:var(--gold)}#screen{position:relative;flex:1;min-height:0;overflow:hidden;background:#090d13;border:1px solid #ffffff20;border-radius:8px;isolation:isolate}.scene-layer{position:absolute;inset:0;opacity:0;transition:opacity 650ms;overflow:hidden}.scene-layer.current{opacity:1}.backdrop{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;animation:camera 16s ease-in-out both;filter:brightness(.8) saturate(.83)}.scene-layer.pan .backdrop{animation:camera-pan 16s linear both}.actor{position:absolute;bottom:-4%;width:52%;height:91%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 15px 18px #0008);animation:breath 4.8s ease-in-out infinite;transform-origin:50% 85%}.actor.right{right:0}.actor.left{left:0}.actor.center{left:12%;width:76%;height:84%;bottom:5%}.vignette{position:absolute;inset:0;background:linear-gradient(0deg,#070b14ed,transparent 45%,#07111c44),linear-gradient(90deg,#070b1466,transparent 65%);pointer-events:none}.grain{position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}.scene-number{position:absolute;right:25px;top:22px;letter-spacing:2px;font-size:9px;color:#ffffff8c}.frame-corner{position:absolute;left:24px;top:23px;width:36px;height:36px;border-left:1px solid #fff5;border-top:1px solid #fff5}.drift{position:absolute;inset:0;pointer-events:none;overflow:hidden}.drift b{position:absolute;bottom:-10px;left:20%;width:3px;height:3px;background:#efce90;border-radius:50%;box-shadow:0 0 10px #f3ca87;animation:drift 13s linear infinite}.drift b:nth-child(2){left:42%;animation-delay:-5s}.drift b:nth-child(3){left:72%;animation-delay:-2s}.drift b:nth-child(4){left:14%;animation-delay:-8s}.drift b:nth-child(5){left:83%;animation-delay:-11s}.drift b:nth-child(6){left:59%;animation-delay:-4s}#flash{position:absolute;inset:0;pointer-events:none}#screen.impact #flash{animation:flash .6s both}#screen.impact .scene-layer.current{animation:shake .55s both}#screen.pulse .actor{animation:awakening 2s ease-out both,breath 5s 2s infinite}
#opening{position:absolute;left:9%;top:12%;width:70%;max-width:650px}#opening>p:first-child{font-size:10px;letter-spacing:4px;color:var(--gold)}h1,h2{font-family:'Noto Serif KR',serif;font-weight:600}#opening h1{font-size:clamp(42px,5.4vw,80px);line-height:1.25;letter-spacing:-3px;margin:20px 0}#opening h1 em{font-style:normal;color:#e4c89b}.opening-rule{width:42px;height:1px;background:var(--gold);margin:23px 0}.opening-note{font-family:'Noto Serif KR',serif;font-size:14px;line-height:1.9;color:#d3d1ca}#start{display:block;background:var(--gold);border:none;color:#1c1a17;padding:13px 23px;margin-top:25px;font-size:12px;font-weight:700;box-shadow:0 5px 25px #0003}#start span{margin-left:25px}#opening small{display:block;font-size:10px;color:#b7b8b7;margin-top:12px}#caption{position:absolute;bottom:7%;left:8%;right:8%;max-width:960px}#speaker{display:block;color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:12px}#line{font-family:'Noto Serif KR',serif;font-size:clamp(17px,1.8vw,25px);line-height:1.8;margin:0;text-shadow:0 2px 12px #000;word-break:keep-all;animation:line-in .6s both}#ending{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#080c14cb;text-align:center;padding:20px}#ending p{font-size:10px;letter-spacing:4px;color:var(--gold)}#ending h2{font-size:clamp(24px,4vw,48px)}#ending button{font-size:12px}
.player{padding-top:18px}.player #timeline{display:block;width:100%;height:3px;margin:0;accent-color:var(--gold);cursor:pointer}.control-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:15px}.transport,.audio-controls{display:flex;align-items:center;gap:9px}.transport button{width:40px;height:36px;padding:0}.transport #play{background:#e6c79b;color:#1a1c20;border:0}.transport #counter{font-size:11px;color:var(--gold);margin-left:13px;letter-spacing:2px}.transport #counter i{font-style:normal;color:var(--muted)}.audio-controls button,.audio-controls select{font-size:11px;padding:8px 10px;background:#151a23;border:1px solid var(--line);border-radius:5px}.audio-controls #volume{width:68px;accent-color:var(--gold)}footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;letter-spacing:1px;padding:18px 0 22px}
#read-view{max-width:760px;margin:auto;padding:70px 24px}.read-heading{text-align:center;padding-bottom:75px}.read-heading p{color:var(--gold);font-size:11px;letter-spacing:3px}.read-heading h1{font-size:40px;margin:25px 0}.read-heading span{font-size:12px;color:var(--muted)}.comic-panel{margin-bottom:70px}.comic-art{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:#090d13}.comic-art .backdrop{animation:none}.comic-art .actor{animation:none;height:96%}.comic-copy{padding:24px 22px;background:#181e28;border-left:2px solid #dcb78070}.comic-copy span{font-size:11px;color:var(--gold)}.comic-copy p{font-family:'Noto Serif KR',serif;line-height:1.9;font-size:16px;word-break:keep-all}.comic-chapter{padding:40px 0 30px;font-family:'Noto Serif KR',serif;font-size:24px;color:var(--gold)}.read-end{text-align:center;padding:60px 0;font-family:'Noto Serif KR',serif;line-height:2}.read-end small{color:var(--muted)}.read-end button{display:block;margin:30px auto 0;font-size:12px}
@keyframes camera{from{transform:scale(1.02)}to{transform:scale(1.10)}}@keyframes camera-pan{from{transform:scale(1.08) translateX(-2%)}to{transform:scale(1.12) translateX(2%)}}@keyframes breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes drift{from{transform:translate(0,0);opacity:0}20%,80%{opacity:.6}to{transform:translate(90px,-600px);opacity:0}}@keyframes line-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes flash{0%{background:#c1deff80}100%{background:transparent}}@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-7px,3px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}}@keyframes awakening{0%{filter:brightness(1) drop-shadow(0 0 0 #c28bff)}45%{filter:brightness(1.65) drop-shadow(0 0 30px #c28bff)}100%{filter:brightness(1) drop-shadow(0 15px 18px #0008)}}
@media(max-width:700px){.masthead{height:66px;padding:0 18px;gap:12px}.brand{font-size:30px}.brand span,.pilot{display:none}.masthead nav button{font-size:11px;padding:8px 12px}#film-view{height:calc(100dvh - 66px);padding:0 16px;min-height:530px}.episode-line{padding:17px 0 13px;font-size:9px;letter-spacing:0}.scene-number{top:17px;right:15px;font-size:8px}.frame-corner{top:18px;left:17px;width:22px;height:22px}#opening{left:9%;top:14%;width:83%}#opening h1{font-size:48px}.opening-note{font-size:13px}.actor{width:90%;height:72%;bottom:9%}.actor.right{right:-16%}.actor.left{left:-16%}.actor.center{left:0;width:100%;height:72%;bottom:15%}#caption{left:8%;right:8%;bottom:6%}#line{font-size:18px;line-height:1.8}#speaker{font-size:11px;margin-bottom:9px}.control-row{gap:10px;flex-wrap:wrap;padding-top:13px}.transport{gap:6px}.transport button{width:35px;height:35px}.transport #counter{font-size:9px;margin-left:5px}.audio-controls{gap:5px}.audio-controls #volume{display:none}.audio-controls button,.audio-controls select{font-size:10px;padding:7px}footer{font-size:9px;padding:15px 0 max(16px,env(safe-area-inset-bottom))}footer span:last-child{display:none}.read-heading h1{font-size:32px}.comic-copy{padding:18px}.comic-copy p{font-size:15px}}
@media(max-height:560px) and (min-width:701px){.masthead{height:50px}#film-view{height:calc(100dvh - 50px);min-height:0}.episode-line{padding:9px 0;font-size:9px}.player{padding-top:9px}.control-row{padding-top:8px}footer{padding:8px 0;font-size:9px}#opening{top:10%;left:8%}#opening h1{font-size:34px;margin:10px 0}#opening .opening-rule,#opening .opening-note,#opening small{display:none}#start{margin-top:10px;padding:8px 17px}#line{font-size:16px;line-height:1.6}#speaker{margin-bottom:5px}.scene-number{top:12px}.frame-corner{top:12px}}
/* Independent looping planes: camera, speaking figure, listening figure, light and dust. */
.scene-layer{transition:opacity 550ms ease;isolation:isolate;pointer-events:none}
#opening,#caption,#ending{z-index:3}
#caption{z-index:10;background:linear-gradient(110deg,#080c15ed,#080c15ce);padding:18px 22px;border-left:2px solid #dcb780a0;border-radius:0 6px 6px 0;text-shadow:0 2px 4px #000;pointer-events:none}
#line{color:#fff8ed;margin-bottom:0}
@media(max-width:700px){#caption{left:5%;right:5%;bottom:4%;padding:14px 16px}#line{font-size:17px;line-height:1.7}}
@media(max-height:560px) and (min-width:701px){#caption{bottom:5%;padding:8px 14px}#line{font-size:15px;line-height:1.5}}
.scene-layer.current .backdrop{animation:living-camera 28s ease-in-out infinite alternate;transform-origin:50% 50%}
.scene-layer .actor{z-index:1;width:48%;height:86%;opacity:1;animation:quiet-breath 6s ease-in-out infinite;transition:filter 850ms ease;filter:drop-shadow(0 15px 18px #0008)}
.scene-layer .actor[data-person=mira]{object-fit:cover;object-position:50% 0}
.scene-layer .actor.left{animation-delay:-2.7s}
.scene-layer.current .actor.speaking{filter:brightness(1) drop-shadow(0 15px 18px #0008)}
.scene-layer.current .actor.companion{filter:brightness(.86) drop-shadow(0 15px 18px #0008)}
.scene-layer.current .actor.center{left:12%;width:76%;height:84%;bottom:5%}
.atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.3}
.atmosphere i{position:absolute;inset:-40%;background:radial-gradient(ellipse at 70% 10%,#ffd99b45,transparent 45%);animation:light-drift 7s ease-in-out infinite alternate}
.atmosphere i:nth-child(2){background:radial-gradient(ellipse at 25% 75%,#b8d3d929,transparent 35%);animation-duration:11s;animation-direction:alternate-reverse}
.atmosphere i:nth-child(3){background:repeating-linear-gradient(115deg,transparent 0 19%,#ffdfab12 22%,transparent 25% 40%);animation-duration:13s}
.eyelids{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000 0 45%,transparent 45% 55%,#000 55%);opacity:0}
#screen:has(.current.waking) .eyelids{animation:eyes-open 1.8s both}
.paused #screen .backdrop,.paused #screen .actor,.paused #screen .atmosphere i,.paused #screen .drift b{animation-play-state:paused!important}
.paused #screen .actor.speaking{opacity:1}
@keyframes living-camera{from{transform:scale(1.035) translate(-.5%,0)}to{transform:scale(1.065) translate(.5%,-.3%)}}
@keyframes quiet-breath{0%,100%{transform:translateY(0) rotate(-.12deg)}50%{transform:translateY(-3px) rotate(.12deg)}}
@keyframes actor-enter{from{opacity:0;translate:35px 12px}to{opacity:1;translate:0 0}}
@keyframes gesture-loop{0%,100%{transform:translateY(0) rotate(-.5deg) scale(1)}35%{transform:translateY(-12px) rotate(1deg) scale(1.025)}70%{transform:translateY(-4px) rotate(-.8deg) scale(1.01)}}
@keyframes listener-loop{0%,100%{transform:translateY(0) rotate(.5deg)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes light-drift{from{transform:translate(-4%,-2%) rotate(-3deg);opacity:.5}to{transform:translate(5%,3%) rotate(4deg);opacity:1}}
@keyframes eyes-open{0%{opacity:1;transform:scaleY(12)}30%{opacity:1;transform:scaleY(2)}45%{opacity:1;transform:scaleY(6)}80%,100%{opacity:0;transform:scaleY(1)}}
@media(max-width:700px){.scene-layer .actor{width:72%;height:68%}.actor.right{right:-10%}.actor.left{left:-10%}.scene-layer.current .actor.center{left:0;width:100%;height:72%;bottom:15%}}
#line{animation:dialogue-fade 180ms ease both}
@keyframes dialogue-fade{from{opacity:.35}to{opacity:1}}
.comic-art .actor.speaking,.comic-art .actor.companion{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.library-link{color:var(--gold);text-decoration:none;font-size:12px}.library-heading{padding:68px 0 45px}.library-heading>p{font-size:10px;letter-spacing:3px;color:var(--gold)}.library-heading h1{font-size:clamp(30px,4vw,48px);margin:20px 0}.library-heading>span{font-size:14px;color:var(--muted)}#library-view{max-width:1260px;margin:auto;padding:0 5vw 70px}.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,380px));gap:28px}.work-card{display:block;text-decoration:none;color:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#171c25;transition:translate .25s,border-color .25s}.work-card:hover{translate:0 -4px;border-color:#dcb78080}.work-cover{position:relative;height:260px;overflow:hidden;background:#151a21}.work-cover>img:first-child{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}.work-cover .cover-character{position:absolute;right:-4%;bottom:-18%;height:108%;width:75%;object-fit:contain}.work-copy{padding:24px}.work-copy>span{color:var(--gold);font-size:10px;letter-spacing:1px}.work-copy h2{font-size:27px;margin:12px 0 6px}.work-copy h3{font-size:13px;font-weight:400;color:#d4c8b3;margin:0 0 18px}.work-copy p{font-size:13px;line-height:1.8;color:#b5bac4}.work-copy small{display:block;color:var(--muted);font-size:11px}.work-copy b{display:block;margin-top:22px;color:var(--gold);font-size:12px}.library-note{font-size:12px;color:var(--muted);margin-top:45px}#ending>a{display:block;color:var(--gold);margin-top:18px;font-size:12px}.audio-controls #chapter-jump{max-width:180px}#opening h1{font-size:clamp(38px,5vw,68px)}
.combat-canvas{position:absolute;height:88%;width:auto;aspect-ratio:1;max-width:68%;right:0;bottom:3%;object-fit:contain;pointer-events:none;z-index:1}.battle .actor.companion{visibility:hidden}.battle .actor.left{width:42%;height:78%;left:-4%}#combat-fx{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}#combat-fx b,#combat-fx i{position:absolute;opacity:0}#combat-fx b{width:70%;height:5px;left:15%;top:45%;background:#fff9d9;box-shadow:0 0 18px 5px #cdeaff;rotate:-32deg;border-radius:50%}#combat-fx i{inset:0;background:radial-gradient(ellipse at 65% 40%,#f2ba6680,transparent 55%)}#screen[data-combat=slash] #combat-fx b{animation:sword-trace .9s ease-out both}#screen[data-combat=roar] #combat-fx i{animation:roar-light 1.2s ease-out both}#screen[data-combat=guard] #combat-fx b{rotate:30deg;animation:sword-trace .65s ease-out both}#screen[data-combat=slash] .battle .actor.left{animation:hero-strike .8s ease-out both,quiet-breath 6s .8s infinite}#screen[data-combat=guard] .battle .actor.left{animation:hero-guard .8s ease-out both,quiet-breath 6s .8s infinite}.paused #combat-fx *{animation-play-state:paused!important}
@keyframes sword-trace{0%{opacity:0;scale:0 1;translate:-15% 20px}30%{opacity:1;scale:1 1}100%{opacity:0;translate:15% -20px}}@keyframes roar-light{0%,100%{opacity:0}25%{opacity:.7}}@keyframes hero-strike{0%,100%{transform:translateX(0)}35%{transform:translateX(55px) rotate(2deg)}}@keyframes hero-guard{0%,100%{transform:translateX(0)}45%{transform:translateX(-18px) rotate(-2deg)}}
@media(max-width:700px){.masthead{height:66px}.masthead .pilot{display:none}.library-heading{padding-top:40px}.work-grid{grid-template-columns:1fr}.audio-controls{flex-wrap:wrap;justify-content:flex-end}.control-row{align-items:flex-start}.audio-controls #chapter-jump{max-width:132px}.combat-canvas{height:auto;width:85%;max-width:none;right:-8%;bottom:17%}.battle .actor.left{width:65%;height:65%;left:-19%}#chapter-label{max-width:45%;text-align:right}.episode-line{letter-spacing:0}.transport #counter{font-size:9px;margin-left:3px}.transport{flex-shrink:0}.control-row{flex-wrap:wrap}.audio-controls{margin-left:auto}#film-view{min-height:530px}}
@media(max-height:560px) and (min-width:701px){.audio-controls #chapter-jump{max-width:145px}}
/* Keep spatial positions and animation clocks stable during dialogue. */
.scene-layer .actor{left:48%;right:auto;transition:left 750ms ease,width 750ms ease,height 750ms ease,filter 850ms ease;animation-delay:0s}
.scene-layer .actor.left{left:0;right:auto;animation-delay:0s}.scene-layer .actor.right{left:48%;right:auto}.scene-layer .actor[data-person=mira]{animation-delay:-2.7s}.scene-layer .actor[data-person=gauder]{animation-delay:-1.2s}
.scene-layer .actor.middle,.scene-layer .actor.ally{left:28%;width:29%;height:63%;bottom:5%;z-index:0;object-position:top}.scene-layer .actor[data-person=mira].ally{object-fit:contain}
.battle .actor.left{left:-4%;width:48%;height:86%}.battle .actor.companion:not(.ally){visibility:hidden}.battle .actor.ally{visibility:visible}
.travel .actor{animation:quiet-breath 6s ease-in-out infinite,travel-step 4s ease-in-out both}
@keyframes travel-step{from{translate:-25px 0}to{translate:25px 0}}
#screen[data-mood=night] .backdrop{filter:brightness(.42) saturate(.72) hue-rotate(8deg)}#screen[data-mood=evening] .backdrop{filter:brightness(.63) sepia(.18)}#screen[data-mood=dawn] .backdrop{filter:brightness(.65) saturate(.78)}.backdrop{transition:filter 1.2s ease}
#scene-props{position:absolute;inset:0;pointer-events:none;z-index:2;display:none}#screen[data-props]:not([data-props=""]) #scene-props{display:block}.table{position:absolute;left:6%;right:6%;bottom:7%;height:23%;background:linear-gradient(175deg,#754a30,#39251e 70%);border-radius:50% 50% 4px 4px;border-top:2px solid #b5835070;box-shadow:0 -8px 20px #0004;transform:perspective(600px) rotateX(25deg)}.bowl{position:absolute;top:15%;width:20%;height:33%;background:radial-gradient(ellipse,#e7b15b 0 34%,#8a5635 36% 52%,#ded1b4 54% 66%,#847768 70%);border-radius:50%;box-shadow:0 8px 4px #0005}.bowl.first{left:15%}.bowl.second{right:15%}.cup{position:absolute;top:8%;width:7%;height:36%;background:linear-gradient(90deg,#796454,#d1b38a,#765b46);border-radius:10% 10% 30% 30%;box-shadow:0 5px 5px #0004}.cup.first{left:7%}.cup.second{right:7%}#screen[data-props=meal-alone] .bowl.second,#screen[data-props=meal-alone] .cup.second{display:none}#screen[data-props=drink] .bowl{display:none}#screen[data-props=drink] .cup{width:10%;height:45%;top:12%}#screen[data-props=coins] .table{height:12%;bottom:16%}#screen[data-props=coins] .cup{display:none}#screen[data-props=coins] .bowl{width:9%;height:36%;background:repeating-radial-gradient(ellipse,#e4bd63 0 5px,#b38536 6px 9px);top:30%}#screen[data-props=camp] .table{background:linear-gradient(150deg,#453d30,#272f29);border-top:0;height:17%}
#skill-fx{position:absolute;inset:0;pointer-events:none;z-index:3;--spell-color:#9cdaff}#skill-fx:not(.active){display:none}.spell-orb,.spell-ring{position:absolute;opacity:0}.spell-orb{left:var(--spell-from,25%);top:45%;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,var(--spell-color) 30%,transparent 72%);box-shadow:0 0 24px 8px var(--spell-color)}.spell-ring{left:var(--spell-from,25%);top:32%;width:150px;height:150px;border:2px solid var(--spell-color);border-radius:50%;box-shadow:0 0 20px var(--spell-color),inset 0 0 20px var(--spell-color);translate:-50% 0}.spell-ring.second{width:100px;height:100px;top:38%}#skill-name{position:absolute;left:var(--spell-from,25%);top:25%;translate:-50% 0;color:#eaf6ff;font-size:11px;letter-spacing:2px;text-shadow:0 1px 5px #000;opacity:0}.active #skill-name{animation:skill-label 1.6s both}.active .spell-ring{animation:spell-aura 1.5s ease-out both}.active .spell-ring.second{animation-delay:.2s}.active .spell-orb{animation:spell-projectile 1.25s ease-in-out both}#skill-fx[data-skill=fireball]{--spell-color:#ffa14d}#skill-fx[data-skill=heal]{--spell-color:#9be9ba}#skill-fx[data-skill=explosion]{--spell-color:#ffc674}#skill-fx[data-skill=limit_breaker]{--spell-color:#ffdca0}#skill-fx[data-skill=stealth]{--spell-color:#bdc9ff}#skill-fx[data-skill=drain]{--spell-color:#d398ff}#skill-fx[data-skill=weaken]{--spell-color:#ad89df}#skill-fx[data-skill=execute]{--spell-color:#d6c0ff}#skill-fx[data-skill=seal]{--spell-color:#d7e9ff}
#skill-fx[data-skill=heal] .spell-orb,#skill-fx[data-skill=limit_breaker] .spell-orb,#skill-fx[data-skill=stealth] .spell-orb,#skill-fx[data-skill=release] .spell-orb,#skill-fx[data-skill=seal] .spell-orb{animation:spell-aura 1.8s ease both}#skill-fx[data-skill=explosion] .spell-ring,#skill-fx[data-skill=execute] .spell-ring,#skill-fx[data-skill=weaken] .spell-ring{left:var(--spell-to,75%);animation:spell-burst 1.4s ease-out both}#skill-fx[data-skill=drain] .spell-orb{animation:spell-return 1.5s ease-in-out both}#skill-fx[data-skill=seal] .spell-ring{animation:seal-ring 5s ease-in-out both;width:250px;height:250px;top:18%}
@keyframes spell-projectile{0%{opacity:0;scale:.3}20%{opacity:1;scale:1}70%{opacity:1;left:var(--spell-to,75%);scale:1.3}100%{opacity:0;left:var(--spell-to,75%);scale:2}}
@keyframes spell-return{0%{opacity:0;left:var(--spell-to,75%)}20%{opacity:1}85%{opacity:1;left:var(--spell-from,25%)}100%{opacity:0;left:var(--spell-from,25%)}}
@keyframes spell-aura{0%{opacity:0;scale:.6}35%{opacity:.8;scale:1}100%{opacity:0;scale:1.15}}
@keyframes spell-burst{0%{opacity:0;scale:.1}35%{opacity:1;scale:1.2}100%{opacity:0;scale:2.4}}
@keyframes skill-label{0%,100%{opacity:0}20%,65%{opacity:1}}
@keyframes seal-ring{0%{opacity:0;scale:.4;rotate:0deg}40%{opacity:.8;scale:1}100%{opacity:.3;scale:1;rotate:90deg}}
#bind-fx{position:absolute;left:6%;top:33%;width:36%;height:32%;z-index:3;pointer-events:none;opacity:0;background:repeating-linear-gradient(25deg,transparent 0 14%,#b595e0b0 15% 17%,transparent 18% 28%),repeating-linear-gradient(-25deg,transparent 0 16%,#9e80dba0 17% 19%,transparent 20% 31%);border-radius:20%;transition:opacity 500ms}#screen[data-combat=bind] #bind-fx{opacity:1}#screen[data-combat=bind] .actor[data-person=hero]{animation-play-state:paused!important}#screen[data-state=sealed] .actor[data-person=hero]{opacity:.25;animation:none!important;filter:brightness(1.8) drop-shadow(0 0 25px #dce9ff)}.paused #skill-fx *{animation-play-state:paused!important}
@media(max-width:700px){.scene-layer .actor.left{left:-10%}.scene-layer .actor.right{left:38%;right:auto}.battle .actor.left{left:-18%;width:72%;height:68%}.scene-layer .actor.middle,.scene-layer .actor.ally{left:17%;width:48%;height:54%;bottom:13%}.spell-ring{width:95px;height:95px}.spell-ring.second{width:65px;height:65px}.spell-orb{width:30px;height:30px}.table{left:2%;right:2%;bottom:9%;height:20%}.bowl{height:24%;width:26%}.bowl.first{left:12%}.bowl.second{right:12%}.cup{width:8%;height:27%}.active #skill-name{font-size:10px}#bind-fx{left:0;width:47%;top:40%;height:25%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}