.game.story-game{--accent:#936131;display:flex;flex-direction:column;gap:8px;height:100dvh;min-height:0;padding:8px;background:radial-gradient(ellipse at center,#583919,#1e271c);overflow:hidden;color:#fff2d0}
.story-game .story-top{flex:none;width:100%}.story-game .topbar{color:#302a23}.story-game .story-world{position:relative;flex:none;width:min(100%,calc((100dvh - 82px)*1.777));aspect-ratio:1672/941;margin:auto;container-type:inline-size;border-radius:20px;overflow:hidden;background-position:center;background-size:100% 100%;box-shadow:0 8px 30px #0004}
.painter-game .story-world{background-image:url('assets/story-v196/atelier-babette-v236.webp')}.book-game .story-world{background-image:url('assets/story-v196/library.webp')}
.story-content{position:absolute;inset:0}.story-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.story-game h2{font-size:clamp(20px,2.2cqw,34px);line-height:1.15;margin:0;text-align:center;text-shadow:0 2px 2px #452719;color:#fff0c8}
.story-game button{font-family:inherit;touch-action:manipulation;cursor:pointer}.story-game button:disabled{cursor:default;opacity:.65}.story-game button:focus-visible,.color-sail:focus-visible{outline:4px solid #8be8f5;outline-offset:3px}
.story-game .story-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 22px;border:2px solid #c69452;border-radius:12px;background:linear-gradient(175deg,#ffdf9c,#e6b778 48%,#cf9352);color:#452a19;font-weight:800;font-size:clamp(15px,1.55cqw,24px);box-shadow:inset 0 2px 0 #fff1c0,inset 0 -3px 0 #a16b3a,0 4px 0 #52311b,0 7px 14px #0004;text-shadow:0 1px #ffe8b4;transition:filter .2s,transform .2s}
.story-game .story-button:hover{filter:brightness(1.1)}.story-game .story-button:active{transform:translateY(2px)}.story-button svg{width:27px;height:27px;fill:none;stroke:#167fa0;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.story-actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.story-panel{position:absolute;left:32%;right:9%;top:21%;bottom:29%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:3%;border-radius:22px}
.story-kicker{font-size:clamp(13px,1.3cqw,20px);letter-spacing:.09em;color:#ffda8b}.story-panel p{font-size:clamp(17px,1.7cqw,27px);line-height:1.45;max-width:32em;margin:0}.book-game .story-panel,.book-game .story-panel h2{color:#58391f;text-shadow:none}.book-game .story-kicker{color:#986323}
.painter-play{position:absolute;left:29%;right:6%;top:15%;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:2cqw}.painter-play>h2{flex:none}.painter-cards{width:100%;display:grid;grid-template-columns:repeat(var(--cards),minmax(0,1fr));gap:1cqw;align-items:center;margin:auto 0}.painter-card{position:relative;aspect-ratio:4/4.5;min-width:0;border:5px solid #d2a25e;border-radius:10px;background:#fffdf7;box-shadow:inset 0 0 0 2px #ffedc6,0 5px 0 #754520,0 8px 15px #27120577;padding:5px;display:grid;place-items:center;transition:box-shadow .2s,border-color .2s}
.story-game .story-word-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;padding:0;transform:none;filter:none;border-radius:4px}
.painter-card.is-speaking{border-color:#ffe991;box-shadow:0 0 20px #fff0a5}.painter-card.is-missing{background:radial-gradient(#b97939,#775027);border-style:dashed;color:#ffe5a0}.is-missing>span{font-size:5cqw}.painter-answers{width:85%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4cqw}.painter-answers .painter-card{aspect-ratio:4/3;max-height:18cqw}.painter-play:has(.painter-answers){gap:1cqw}.painter-play:has(.painter-answers) .painter-cards{margin:0}.painter-play:has(.painter-answers)>h2{margin-bottom:.5cqw}.painter-play:has(.painter-answers)>.story-button{min-height:38px;padding:6px 20px;font-size:clamp(13px,1.1cqw,18px);margin-top:auto}.painter-card.is-right{border-color:#84d787;box-shadow:0 0 20px #9cfcb6}.painter-card.is-wrong{border-color:#cf8656;animation:story-nudge .4s}
.paint-swipe{position:absolute;inset:19% 4% 24% 27%;background:linear-gradient(100deg,#d9af7199,#ffe5aaa8,#aa693533);backdrop-filter:blur(35px);border-radius:30px;animation:brush-pass .9s ease-in-out both;z-index:3}
.painter-feedback{gap:12px}.feedback-picture{height:65%;aspect-ratio:4/3;background:#fff;padding:8px;border:5px solid #ce9d5e;border-radius:12px}.painter-feedback p{font-weight:800}
.painting-reward{position:absolute;left:28%;right:5%;top:12%;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:1cqw}.painting-frame{height:73%;aspect-ratio:4/3;max-width:90%;position:relative;border:clamp(6px,1cqw,18px) ridge #be8f49;border-radius:4px;background:#f7edd4;box-shadow:0 6px 20px #26130488;flex-shrink:1;min-height:0}.painting-art{display:block;width:100%;height:100%}.painting-frame.new-paint{animation:new-paint 1.4s ease-out}.painting-caption{display:flex;align-items:center;gap:15px;font-size:clamp(16px,1.4cqw,22px);font-weight:800;height:8cqw}.painting-caption .story-word-image{width:9cqw;background:#fff;aspect-ratio:4/3;padding:4px;border:3px solid #d5aa65}.painting-reward:has(.painting-caption) .painting-frame{height:64%}
.paint-tools{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;width:100%;flex:1;min-height:75px}.paint-pots{display:flex;justify-content:center;gap:1.3cqw}.paint-pot{width:5.8cqw;min-width:44px;height:5cqw;min-height:48px;position:relative;border:3px solid #8e5b2a;border-radius:12px 12px 18px 18px;background:linear-gradient(90deg,#c3a06a,#fff1c4 45%,#c29a63);box-shadow:0 4px 6px #27130188;padding:0 4px;color:#55341b}.paint-pot:before{content:'';position:absolute;left:4%;right:4%;height:27%;top:-9%;border:3px solid #edcf98;border-radius:50%;background:var(--paint);box-shadow:inset 0 2px 4px #0003}.paint-pot>span{display:block;height:42%;margin:15% auto 0;width:68%;background:var(--paint);border-radius:35% 48% 34% 40%}.paint-pot small{font-size:clamp(11px,.9cqw,15px);font-weight:800}.paint-pot[aria-pressed="true"]{outline:3px solid #fff0aa;outline-offset:4px;filter:drop-shadow(0 0 8px #ffd65c)}.paint-help{font-weight:700;font-size:clamp(13px,1.25cqw,20px);margin:0;text-align:center}.color-sail{cursor:pointer;transition:fill 1.6s;mix-blend-mode:multiply}.color-sail:not(.sail-painted){animation:sail-cue 2.2s infinite}.sail-painted{cursor:default}.child-signature{stroke-dasharray:450;stroke-dashoffset:450}.beaver-signature{opacity:0}.is-signed .child-signature{animation:sign-draw 2s linear forwards}.is-signed .beaver-signature{animation:stamp .6s 1.7s forwards}
.ink-pot{width:80px;height:75px;position:relative;border:0;background:none;margin-top:22px}.ink-bottle{position:absolute;inset:35% 16% 0;background:linear-gradient(95deg,#0b1725,#426788 40%,#172a3f 75%);border:3px solid #bb9a5b;border-radius:8px 8px 14px 14px;box-shadow:0 4px 8px #0007}.ink-bottle:before{content:'';position:absolute;left:20%;right:20%;height:20%;top:-18%;border-radius:50%;background:#080c13;border:3px solid #bd9e68}.quill{position:absolute;width:65px;height:110px;bottom:30px;left:20px;transform-origin:10% 100%;z-index:5;filter:drop-shadow(0 0 4px #ffda76)}.quill svg{width:100%;height:100%}.ink-pot:not(:disabled){animation:tool-glow 2s infinite}
.reading-page{position:absolute;left:34%;right:9%;top:10%;bottom:38%;display:flex;align-items:center;flex-direction:column;gap:1cqw;color:#4e321e}.reading-image{flex:1;min-height:0;width:91%;display:flex;align-items:center;justify-content:center}.reading-image .story-word-image{width:auto;max-width:100%;height:100%;background:#fff;border-radius:10px;padding:1%;box-shadow:0 3px 12px #704d2920}.story-game .reading-word{font-size:clamp(21px,2.6cqw,43px);color:#54371e;text-shadow:none;max-width:95%;overflow-wrap:anywhere;flex:none}.page-number{position:absolute;right:0;top:0;font-size:clamp(11px,1cqw,16px);color:#826744}.book-controls{position:absolute;left:34%;right:8%;top:73%;bottom:14%;display:flex;align-items:center;justify-content:center;gap:2cqw}.book-controls .story-button{max-width:48%;min-height:54px}.book-finale{position:absolute;left:32%;right:7%;top:8%;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:1cqw}.finished-book{position:relative;flex:1;min-height:0;width:70%;display:flex;flex-direction:column;gap:1cqw;align-items:center;padding:2cqw 2.6cqw;border:5px ridge #d5b366;border-left:15px ridge #b9914c;border-radius:6px 18px 18px 6px;background:radial-gradient(ellipse at top,#345460,#112f3e);box-shadow:8px 5px 0 #eadac1,12px 7px 0 #785623,0 10px 26px #25120277}.finished-book h2{font-family:Georgia,serif;color:#ffe3a0;font-size:2.5cqw}.finished-book>p{color:#f4d598;font-size:1.2cqw;margin:0;text-align:center}.book-star{position:absolute;left:calc(50% - 20px);top:-38px;font-size:52px;color:#ffe192;text-shadow:0 0 20px #ffe892;animation:tool-glow 2.3s infinite}.book-medallions{display:grid;grid-template-columns:repeat(var(--book-cols),minmax(0,1fr));gap:1cqw;min-height:0;flex:1;width:100%;align-content:center}.book-medallions button{aspect-ratio:4/3;min-height:0;min-width:0;border:3px ridge #dbc17e;border-radius:12%;background:white;padding:3px;overflow:hidden}.book-thanks{margin:0;color:#553a26;font-weight:800;font-size:clamp(15px,1.5cqw,23px);background:#fff0d3dd;border-radius:12px;padding:6px 12px;text-align:center}
@keyframes brush-pass{0%{clip-path:inset(0 100% 0 0)}40%,70%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}@keyframes story-nudge{30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}@keyframes new-paint{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}@keyframes sail-cue{50%{filter:drop-shadow(0 0 7px #ffd057)}}@keyframes sign-draw{to{stroke-dashoffset:0}}@keyframes stamp{to{opacity:1}}@keyframes tool-glow{50%{filter:drop-shadow(0 0 10px #ffe094)}}
@media(max-aspect-ratio:1/1){.game.story-game .story-world{width:100%;aspect-ratio:auto;flex:1;background-size:auto 100%;background-position:22% center}.story-world:before{content:'';position:absolute;inset:0;background:#25160765}.story-panel{left:5%;right:5%;top:14%;bottom:18%;background:#59371eef;border:4px ridge #d4a86b}.book-game .story-panel{background:#ffefd6f2}.painter-play{left:4%;right:4%;top:7%;bottom:5%;gap:20px}.painter-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;flex:1;align-content:center}.painter-card{aspect-ratio:4/3}.painter-answers{width:100%}.painter-answers .painter-card{max-height:none}.painter-play:has(.painter-answers) .painter-cards{margin:auto 0;flex:1}.painter-play:has(.painter-answers)>h2{margin-bottom:15px}.story-game h2{font-size:26px}.painting-reward{left:5%;right:5%;top:7%;bottom:5%;gap:18px}.painting-frame,.painting-reward:has(.painting-caption) .painting-frame{height:auto;width:100%;max-height:65%;aspect-ratio:4/3}.painting-caption{height:90px}.painting-caption .story-word-image{width:110px}.painting-reward .paint-tools{flex:0}.paint-help{width:100%}.paint-pots{gap:12px}.paint-pot{height:55px;width:50px}.reading-page{left:6%;right:6%;top:12%;bottom:27%;background:#fff3df;border:8px ridge #d4b382;border-radius:16px;padding:25px 12px}.reading-word{font-size:27px!important}.page-number{right:12px;top:5px}.book-controls{left:4%;right:4%;top:auto;bottom:10%}.book-controls .story-button{font-size:16px}.book-finale{left:5%;right:5%;top:9%;bottom:6%;gap:18px}.finished-book{width:92%;padding:25px 20px}.finished-book h2{font-size:28px}.finished-book>p{font-size:17px}.book-medallions{gap:12px;align-content:center}.book-thanks{font-size:17px}.story-game .topbar-progress-stars{max-width:125px;flex-wrap:wrap}.story-game .score{font-size:12px;gap:4px}.story-game .topbar-actions{gap:3px}}
@media(prefers-reduced-motion:reduce){.story-game *,.story-game *:before{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Cards keep identical coordinates before and after hiding. */
.painter-play,.painter-play:has(.painter-answers){gap:1cqw}
.painter-play .painter-cards,.painter-play:has(.painter-answers) .painter-cards{margin:0}
.painter-play:has(.painter-answers)>h2{margin-bottom:0}
.painter-play>.story-actions{margin-top:auto}
.fresh-stroke{stroke-dasharray:3000;stroke-dashoffset:3000;animation:paint-stroke 2s ease-in-out forwards}
.painting-frame.new-paint{animation:none}
.finished-book{animation:book-arrive 1.2s ease-out}
@keyframes paint-stroke{to{stroke-dashoffset:0}}
@keyframes book-arrive{from{transform:perspective(1000px) rotateY(-35deg) scale(.8);opacity:.4}to{transform:perspective(1000px) rotateY(0) scale(1);opacity:1}}
@media(max-aspect-ratio:1/1){.painter-play,.painter-play:has(.painter-answers){gap:12px}.painter-play .painter-cards,.painter-play:has(.painter-answers) .painter-cards{position:absolute;top:10%;height:47%;margin:0;align-content:start}.painter-play .painter-answers{position:absolute;bottom:13%;height:22%;align-items:center}.painter-play>.story-button,.painter-play>.story-actions{position:absolute;bottom:0;left:0;right:0;margin:0 auto}.painter-play>.story-button{max-width:200px}}
@media(prefers-reduced-motion:reduce){.fresh-stroke,.finished-book{animation-duration:.01ms!important}}

.painter-cards>.painter-card{width:100%;max-width:19cqw;max-height:22cqw;justify-self:center}
.color-sail[aria-disabled="true"]{outline:none;cursor:default}
@media(max-aspect-ratio:1/1){.painter-cards>.painter-card{max-width:none;max-height:none}}

/* Five or six pictures use two rows so horizontal concepts remain readable. */
.painter-play.many-cards .painter-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:23cqw;flex:none}
.painter-play.many-cards .painter-cards>.painter-card{height:100%;max-height:none;max-width:none;aspect-ratio:auto}
.painter-play.many-cards .painter-answers{height:10cqw;flex:none}
.painter-play.many-cards .painter-answers>.painter-card{height:100%;max-height:100%;aspect-ratio:auto}
.painter-card>.story-word-image{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain}
@media(max-aspect-ratio:1/1){.painter-play.many-cards .painter-cards{height:47%}.painter-play.many-cards .painter-answers{height:22%}}

/* v200: bare canvas, fifteen painted subjects and a final textured sail. */
.painting-art .subject-brush{clip-path:inset(0 0 0 0);animation:subject-brush 1.9s ease-out both}
@keyframes subject-brush{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.painting-art .color-sail{fill:transparent!important;mix-blend-mode:normal;stroke:#bf9550;stroke-width:2;stroke-dasharray:8 9;animation:none;cursor:pointer}
.painting-art .color-sail.sail-painted{stroke:none;pointer-events:none}
.painting-art .sail-art{opacity:0}
.painting-art .sail-art.is-painted{opacity:1;animation:subject-brush 2.5s ease-out both}
.painting-art .beaver-signature{opacity:0;transform-box:fill-box;transform-origin:center}
.painting-frame.is-signed .beaver-signature{animation:none;opacity:0}
.painting-frame.beaver-stamped .beaver-signature{animation:beaver-print 1.1s ease-out forwards}
@keyframes beaver-print{0%{opacity:0;filter:blur(5px)}30%{opacity:1;filter:blur(0);scale:1.12}65%,100%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.painting-art .subject-brush,.painting-art .sail-art.is-painted,.painting-frame.beaver-stamped .beaver-signature{animation-duration:.01ms;animation-delay:0s!important}}

.painting-art .sail-art.is-painted{animation:none}.painting-art .sail-art.is-painted .sail-brush{animation:subject-brush 2.5s ease-out both}
@media(prefers-reduced-motion:reduce){.painting-art .sail-art.is-painted .sail-brush{animation-duration:.01ms}}

/* v201: an opaque painter's cloth and physical answer cards. */
.atelier-curtain{position:absolute;z-index:30;transform-origin:50% 0;pointer-events:none;filter:drop-shadow(0 9px 8px #20130766)}
.curtain-cloth{position:absolute;inset:0;overflow:hidden;border:0;border-radius:3px 3px 10px 10px;background:#315d51 url('assets/atelier-v201/curtain-v216.webp') center/100% 100% no-repeat;box-shadow:0 3px 6px #21180f66}
.curtain-palette{position:absolute;left:calc(50% - 7cqw);top:calc(50% - 5.8cqw);width:14cqw;height:11.6cqw;opacity:.9;filter:drop-shadow(0 2px 1px #152f2866);rotate:-8deg}.curtain-palette svg{width:100%;height:100%}
.curtain-roller{position:absolute;left:-8px;right:-8px;bottom:0;height:17px;border:2px solid #7b4b24;border-radius:12px;background:linear-gradient(#ffe3a4,#bf8448 40%,#855429 75%,#c28e51);box-shadow:0 3px 4px #20130555}
.story-game .painter-answers button:disabled{opacity:1;filter:none}
.painter-answers .painter-card{background-color:#fffdf7}
.answer-flight{position:absolute;z-index:35;box-sizing:border-box;transform-origin:0 0;pointer-events:none;aspect-ratio:auto;min-height:0;margin:0;transition:none}
.painter-answers .answer-picked>.story-word-image{visibility:hidden}
.painter-answers .answer-returned{background:linear-gradient(135deg,#f5eed6,#e6dcc3);border-color:#87b57a;box-shadow:inset 0 2px 6px #5b492b22,0 4px 0 #754520}
.answer-check{font-size:clamp(30px,4cqw,65px);color:#417742;text-shadow:0 1px #fff;line-height:1}
.painting-reward{top:15.3%;gap:.85cqw}
.painting-reward>h2{font-size:clamp(18px,1.85cqw,30px);flex:none;max-width:94%;line-height:1.2;margin:0 0 .3cqw}
.painting-reward:has(.painting-caption) .painting-frame{height:63%}
@media(max-aspect-ratio:1/1){.painting-reward{top:7%;gap:16px}.painting-reward>h2{font-size:24px}.painting-reward:has(.painting-caption) .painting-frame{height:auto}.curtain-palette{width:24cqw;height:20cqw;left:calc(50% - 12cqw);top:calc(50% - 10cqw)}}

/* A real canvas on the tabletop easel; its existing white edges stay visible. */
.painter-game .story-world:has(.painting-reward){background-image:url('assets/atelier-v201/easel-babette-v236.webp')}
.painter-game .painting-reward{inset:0;display:block;gap:0}
.painter-game .painting-reward .painting-frame{position:absolute;left:39.7%;top:16.8%;width:43.1%;height:49.3%;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0}
.painter-game .painting-reward>h2{position:absolute;left:44.5%;right:23%;top:68.5%;font-size:clamp(13px,1.4cqw,24px);line-height:1.15;color:#503015;text-shadow:0 1px 0 #ffda9b99;max-width:none;margin:0}
.painter-game .painting-caption{position:absolute;left:41%;top:79%;height:10%;width:27%;gap:1cqw;font-size:clamp(14px,1.25cqw,21px)}
.painter-game .painting-caption .story-word-image{width:8cqw;height:100%;box-sizing:border-box}
.painter-game .painting-reward>.story-actions{position:absolute;left:69%;right:9%;top:82%;}
.painter-game .painting-reward .paint-tools{position:absolute;inset:0;display:block;min-height:0;width:100%;pointer-events:none}
.painting-reward .paint-tools>*{pointer-events:auto}
.painter-game .painting-reward .paint-pots{position:absolute;left:40%;right:16%;top:79.5%;gap:1cqw}
.painter-game .painting-reward .paint-help{position:absolute;left:40%;right:16%;top:91%;font-size:clamp(13px,1.2cqw,20px);text-shadow:0 1px 3px #47220e}
.painter-game .painting-reward .paint-tools>.story-actions{position:absolute;left:38%;right:14%;top:83%;}
.painter-game .ink-pot{position:absolute;left:84%;top:74%;width:9cqw;height:14%;min-width:70px;min-height:70px;margin:0;padding:0;background:none;border:0;box-shadow:none;animation:none!important;isolation:isolate}
.ink-pot .ink-bottle-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 3px 2px #45291555)}
.painter-game .ink-pot .quill{width:7cqw;height:10.5cqw;min-width:52px;min-height:78px;left:44%;bottom:78%;filter:none;z-index:1;transform-origin:8% 98%}
.quill img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.painter-game .ink-pot:disabled{opacity:1}
.painter-game .story-world[data-phase="sign"] .ink-pot:not(:disabled) .quill{animation:quill-invitation 2.8s ease-in-out infinite;filter:drop-shadow(0 0 2px #fffbe3) drop-shadow(0 0 5px #ffd76b)}
@keyframes quill-invitation{0%,100%{filter:drop-shadow(0 0 2px #fffbe3) drop-shadow(0 0 5px #ffd76b)}50%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #ffe28a) drop-shadow(0 0 16px #f5bd56)}}
.painter-game .story-world[data-phase="sign"] .ink-pot:focus-visible .quill{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px #ffe28a)}
@media(prefers-reduced-motion:reduce){.painter-game .story-world[data-phase="sign"] .ink-pot:not(:disabled) .quill{animation:none;filter:drop-shadow(0 0 3px #fffbe3) drop-shadow(0 0 8px #ffd76b)}}
.painting-art .sail-hint{opacity:0;transition:opacity .2s}
.painting-frame.sail-ready .sail-hint{opacity:1}
.painting-frame.sail-ready .color-sail{fill:color-mix(in srgb,var(--chosen-paint) 20%,transparent)!important;stroke:#fff6b4;stroke-width:5;stroke-dasharray:none;filter:drop-shadow(0 0 3px #734213);animation:ready-sail 2s ease-in-out infinite}
@keyframes ready-sail{50%{stroke-width:7;filter:drop-shadow(0 0 7px #fff7a8)}}
.painting-art .color-sail.sail-painted{fill:transparent!important;stroke:none;animation:none;filter:none}
@media(max-aspect-ratio:1/1){
 .game.story-game .story-world:has(.painting-reward){flex:none;width:100%;height:auto;aspect-ratio:1672/941;background-size:100% 100%;background-position:center}
 .story-world:has(.painting-reward):before{display:none}
 .painter-game .painting-reward .paint-pot{min-width:40px;width:5.8cqw;height:48px;padding:0 2px}
 .painter-game .painting-reward .paint-help{top:93%;font-size:12px}
 .painter-game .painting-reward>.story-actions{left:67%;right:3%;top:81%}
 .painter-game .painting-reward .story-button{font-size:13px;padding:5px 10px}
 .painter-game .painting-reward .paint-tools>.story-actions{left:34%;right:6%;gap:10px}
}

.painter-game .ink-pot .quill{left:33%;bottom:65%}
.painter-game .story-world[data-phase="sign"] .paint-help{left:80%;right:2%;top:90%}

/* v202: sixteen earned additions and two child-painted surfaces. */
.series-painting .paint-target{fill:#fff8dd35;stroke:#95612b;stroke-width:3;stroke-dasharray:9 8;cursor:pointer;outline:none}
.series-painting .paint-cue{opacity:0;transition:opacity .2s;pointer-events:none}
.series-painting.paint-ready .paint-cue{opacity:1;pointer-events:all;cursor:pointer}
.series-painting.paint-ready .paint-target{fill:color-mix(in srgb,var(--chosen-paint) 22%,transparent);stroke:#fff2a2;stroke-width:6;stroke-dasharray:none;filter:drop-shadow(0 0 4px #815523);animation:ready-sail 2s ease-in-out infinite}
.series-painting .paint-target:focus-visible{stroke:#155c7d;stroke-width:8;stroke-dasharray:12 6}
.series-painting .child-paint-brush{animation:subject-brush 2.5s ease-in-out both}
.painter-game .painting-intro-help{position:absolute;left:41%;right:27%;top:78%;margin:0;font-size:clamp(14px,1.4cqw,23px);color:#fff5dd;text-shadow:0 2px 3px #50250b}
.painter-game .painting-reward .paint-pot:disabled{opacity:1;filter:none}
.painter-game .painting-reward .paint-help{width:auto;max-width:none;text-align:center}
@media(prefers-reduced-motion:reduce){.series-painting .child-paint-brush{animation-duration:.01ms}.series-painting.paint-ready .paint-target{animation:none}}

/* Follow the active subject, including separate spots, before choosing paint. */
.series-painting .paint-sparkle-rim{pointer-events:none;fill:none}
.series-painting .paint-rim-gold{stroke:#eab84b;stroke-width:5;filter:drop-shadow(0 0 2px #61421e)}
.series-painting .paint-rim-glints{stroke:#fff9d6;stroke-width:4;stroke-linecap:round;stroke-dasharray:3 24 9 38;filter:drop-shadow(0 0 4px #ffe28b);animation:paint-edge-glitter 4s linear infinite}
.series-painting .paint-rim-stars{stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-dasharray:.3 91;filter:drop-shadow(0 0 5px #fff0a8);animation:paint-edge-glitter 6s linear infinite reverse}
.series-painting.paint-ready .paint-target{stroke:#eab84b;stroke-width:3;animation:none;filter:none}
@keyframes paint-edge-glitter{to{stroke-dashoffset:-148}}
@media(prefers-reduced-motion:reduce){.series-painting .paint-rim-glints,.series-painting .paint-rim-stars{animation:none}}

.painter-game .painting-reward .painting-frame{left:39.6%;top:16.35%;width:43.4%;height:51.6%}
.painting-reward .easel-front{position:absolute;inset:0;background:url('assets/atelier-v201/easel-babette-v236.webp') center/100% 100% no-repeat;pointer-events:none;z-index:2}
.painting-reward .easel-front-top{clip-path:polygon(57.5% 12%,64.6% 12%,64.6% 16.8%,57.5% 16.8%)}
.painting-reward .easel-front-left{clip-path:polygon(42.15% 66.1%,44.35% 66.1%,44.35% 70.2%,42.15% 70.2%)}
.painting-reward .easel-front-right{clip-path:polygon(77.8% 66.1%,80% 66.1%,80% 70.2%,77.8% 70.2%)}