/* Story task page: warm cloud paper, a reusable character, and three clear actions. */
#missionPanel{position:absolute;inset:0;z-index:21;overflow:hidden;background:radial-gradient(ellipse at 23% 80%,#ffe2a5aa,transparent 55%),linear-gradient(145deg,#fff3d7,#ffe6bd 58%,#fff5df);color:#694324}
.mission-cloud{position:absolute;width:690px;height:280px;border:4px solid #fff9e7a8;border-radius:50%;pointer-events:none;opacity:.7}
.mission-cloud.one{left:-285px;top:220px;transform:rotate(-15deg)}.mission-cloud.two{right:-210px;bottom:80px;transform:rotate(-15deg)}
.mission-heading{position:absolute;left:130px;right:130px;top:80px;text-align:center}
.mission-heading h1{font:76px/1.25 LessonRound;margin:0;color:#6a4024;letter-spacing:3px}
.mission-heading p{font:39px/1.5 LessonKai;color:#a16c39;margin:20px 0 0}
.mission-hero{position:absolute;left:145px;top:310px;width:570px;height:700px;object-fit:contain;filter:drop-shadow(0 16px 10px #946e3922)}
.mission-speech{position:absolute;left:145px;top:275px;width:570px;text-align:center;font:30px/1.45 LessonKai;background:#fff9e9;border:2px solid #edcb8e;border-radius:25px;padding:16px 25px;z-index:2}
.mission-speech:after{content:'';position:absolute;left:72%;bottom:-13px;width:23px;height:23px;background:#fff9e9;border-right:2px solid #edcb8e;border-bottom:2px solid #edcb8e;transform:rotate(45deg)}
.mission-tasks{position:absolute;left:810px;right:150px;top:320px;display:grid;gap:25px}
.mission-task{display:flex;align-items:center;gap:23px;width:100%;height:156px;text-align:left;color:#714a29;background:#fffaf0e6;border:2px solid #ebce97;box-shadow:0 8px 0 #e8c17b40;border-radius:32px;padding:15px 30px;position:relative;transition:background .25s,border-color .25s,box-shadow .25s}
.mission-task[aria-pressed="true"]{border-color:#d4a343;background:#fff5cd;box-shadow:0 8px 0 #ddb86550}
.mission-stone{position:relative;width:146px;height:120px;flex-shrink:0;display:grid;place-content:center;font:41px LessonRound;color:#865c24}
.mission-stone img{position:absolute;inset:-10px -8px;width:162px;height:140px;object-fit:contain;filter:sepia(.35) saturate(1.1);z-index:0}.mission-stone span{position:relative;z-index:1}
.mission-task strong{font:62px/1.3 LessonRound}.mission-task small{display:block;font:29px/1.4 LessonKai;color:#9c7745;margin-top:8px}
.mission-task:not([aria-pressed="true"]) small{display:none}
.mission-bottom{position:absolute;left:810px;right:150px;bottom:70px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.mission-bottom p{font:28px/1.5 LessonKai;margin:0;color:#927149;max-width:410px}
.mission-bottom .primary{background:#cf8240;box-shadow:0 6px 0 #a15f2d;font-size:32px;min-width:365px}
.mission-back{position:absolute;left:75px;bottom:55px;background:transparent;color:#967343;font:26px LessonKai;padding:16px}
.mission-star{position:absolute;font:45px LessonRound;color:#e4b04f;pointer-events:none;opacity:.7}.mission-star.a{left:80px;top:160px}.mission-star.b{right:72px;top:255px}.mission-star.c{left:698px;bottom:115px;font-size:31px}
#stage:is([data-phase="mission"],[data-phase="arrival"])>.topbar{visibility:hidden}
#stage[data-phase="mission"] .mission-hero{animation:mission-hero-in .8s cubic-bezier(.2,.7,.25,1) both}
#stage[data-phase="mission"] .mission-task{animation:mission-task-in .65s cubic-bezier(.2,.8,.2,1) both}
#stage[data-phase="mission"] .mission-task:nth-child(2){animation-delay:.16s}#stage[data-phase="mission"] .mission-task:nth-child(3){animation-delay:.32s}
#stage[data-phase="mission"] .mission-heading{animation:mission-heading-in .65s ease-out both}
@keyframes mission-hero-in{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes mission-task-in{from{opacity:0;transform:translateX(100px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mission-heading-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#missionPanel *{animation:none!important;transition:none!important}}

/* V17: physical cloud setting; the generated moving version will use this same frame. */
#missionPanel{background:#fff1dd url('assets/images/v17/mission-cloud-master.png') center / cover no-repeat}
#missionPanel .mission-hero,#missionPanel .mission-cloud,#missionPanel .mission-star{display:none}
#missionPanel .mission-heading{left:820px;right:150px;top:90px;text-align:left}
#missionPanel .mission-heading h1{font-size:68px;letter-spacing:1px;white-space:nowrap}
#missionPanel .mission-heading p{font-size:37px;margin-top:14px}
#missionPanel .mission-speech{left:100px;top:118px;width:590px;background:#fffaf0ed;box-shadow:0 10px 28px #b87e3020}
#missionPanel .mission-tasks{top:322px}
#missionPanel .mission-bottom{bottom:76px;background:#fff9eced;padding:18px 22px;border-radius:25px;gap:15px}
#missionPanel .mission-bottom p{font-size:25px;max-width:365px}
#missionPanel .mission-bottom .primary{min-width:350px;font-size:31px}
#missionPanel .mission-back{background:#fff9e7e8;border-radius:20px;left:90px;bottom:50px;padding:13px 22px}
#missionPanel .mission-task[aria-pressed="true"] .mission-stone{filter:drop-shadow(0 0 12px #ffcc58a0);animation:mission-selected-pulse .65s ease-out}
@keyframes mission-selected-pulse{0%{transform:translateY(0)}35%{transform:translateY(-8px)}100%{transform:translateY(0)}}

#missionPanel .mission-task:not([aria-pressed="true"]){background:#fffaf0f7}