.animated-character{--character-width:144px;display:inline-block;position:relative;width:var(--character-width);height:calc(var(--character-width)*4/3);flex-shrink:0;isolation:isolate;vertical-align:middle;line-height:0;pointer-events:none}.sprite-window{display:block;position:absolute;inset:0;overflow:hidden}.animated-character .sprite-sheet{position:absolute;left:0;top:0;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;image-rendering:pixelated;transform:translate(0,0);animation:sprite-idle 2.8s steps(1,end) infinite;filter:none!important;transition:none!important}.animated-character.tone-sunset:not(.outfit-ember-cape):not(.outfit-team-cape) .sprite-window{filter:hue-rotate(325deg) saturate(.9)}.animated-character.tone-sky:not(.outfit-ember-cape):not(.outfit-team-cape) .sprite-window{filter:hue-rotate(38deg) saturate(.8)}.animated-character.look-team .sprite-window{filter:saturate(.88)}.animated-character[data-motion="accept"] .sprite-sheet{animation:sprite-accept 2.1s steps(1,end) both}.animated-character[data-motion="complete"] .sprite-sheet{animation:sprite-complete 2.45s steps(1,end) both}.animated-character[data-motion="complete"]{animation:hero-celebrate 2.45s ease-out both}.animated-character[data-motion="accept"]{animation:hero-ready 2.1s ease-in-out both}.animated-character .wearable{position:absolute;image-rendering:pixelated;z-index:2;pointer-events:none}.wearable-banner{width:36%;height:68%;left:65%;bottom:1%;z-index:3!important}.wearable-book{width:22%;height:24%;left:22%;top:46%;transform:rotate(-9deg)}.wearable-medal{width:15%;height:17%;left:50%;top:29%}.animated-character[data-motion="complete"] .wearable-book{transform:rotate(4deg)}.wear-light{display:none;position:absolute;z-index:4;width:4px;height:4px;background:#c9e294;box-shadow:0 0 9px #bcd77a;animation:wear-glimmer 2.7s ease-in-out infinite;pointer-events:none}.light-one{left:7%;top:33%}.light-two{right:11%;top:55%;animation-delay:.7s}.light-three{left:25%;bottom:9%;animation-delay:1.4s}.look-moss .wear-light,.look-trail .wear-light{display:block}.look-trail .wear-light{background:#c7b4ef;box-shadow:0 0 10px #a99bcf}.wear-frame{display:none;position:absolute;inset:1% 1% 0;border:3px solid #d5b566;border-radius:40% 40% 10px 10px;box-shadow:0 0 0 3px #e9d89a55,0 0 17px #d6bb7133;z-index:-1}.look-frame .wear-frame{display:block}.wear-trail{display:none;position:absolute;bottom:2%;left:22%;width:58%;height:10%;background:radial-gradient(ellipse,#d9c8f4bb,transparent 70%);z-index:-1}.look-trail .wear-trail{display:block}.v4-character-stage .animated-character{--character-width:132px}.large-character.animated-character{--character-width:205px;margin:auto}.wardrobe-character.animated-character{--character-width:192px}.map-character.animated-character{--character-width:58px}.m-character-portrait .animated-character{--character-width:145px}.task-motion-figure.animated-character{--character-width:73px}.reward-character.animated-character{--character-width:165px}.action-preview-buttons{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:17px 0 8px}.action-preview-buttons button{padding:8px 12px;background:white;border:1px solid #d9e2d3;border-radius:8px;color:#56715c;font-size:12px;min-height:44px}.v4-motion-strip{display:flex;align-items:center;gap:14px;margin:15px 0;padding:4px 16px;background:#f0f5ea;border-radius:12px;min-height:98px}.v4-motion-strip strong{display:block;font-size:15px}.v4-motion-strip p{font-size:12px;color:#73816e;margin:6px 0}.v4-motion-strip .quiet-link{min-height:44px;font-size:12px}.outfit-preview-note{padding:10px 14px;background:#f7efd9;color:#8b703a;border-radius:9px;font-size:12px;display:flex;gap:10px;align-items:center;justify-content:space-between}.outfit-preview-note button{min-height:44px}.costume-stage{display:flex;align-items:center;justify-content:center;min-height:270px;background:linear-gradient(#edf2e7,#f8faf4);border:1px solid #e0e7d8;border-radius:16px;position:relative;overflow:hidden}.costume-stage:after{content:'';position:absolute;width:120px;height:15px;bottom:18px;background:#53684017;border-radius:50%;z-index:0}.costume-stage .animated-character{z-index:1}.costume-actions{display:flex;flex-direction:column;gap:7px}.costume-actions .btn{padding:8px 12px}.costume-actions .quiet-link{min-height:44px;font-size:12px}.souvenir-grid .outfit-thumb{display:grid;place-items:center;width:46px;height:48px;color:#98733d}.souvenir-grid .outfit-thumb svg{width:42px;height:42px}.souvenir-grid button{background:white}.wardrobe-stage{background:none;border:none;min-height:0}.v4-reward-person{text-align:center;padding:8px 0}.v4-reward-person .animated-character{display:block;margin:auto}@keyframes sprite-idle{0%,65%,100%{transform:translate(0,0)}68%,91%{transform:translate(-25%,0)}}@keyframes sprite-accept{0%,27%{transform:translate(-50%,0)}30%,68%{transform:translate(-75%,0)}71%,100%{transform:translate(0,-50%)}}@keyframes sprite-complete{0%,21%{transform:translate(-25%,-50%)}24%,70%{transform:translate(-50%,-50%)}73%,100%{transform:translate(-75%,-50%)}}@keyframes hero-celebrate{0%,21%,45%,100%{translate:0 0}31%{translate:0 -9px}37%{translate:0 -6px}}@keyframes hero-ready{0%,70%,100%{translate:0 0}77%{translate:3px -2px}}@keyframes wear-glimmer{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -9px}}@media(max-width:360px){.v4-character-stage .animated-character{--character-width:116px}.m-character-portrait .animated-character{--character-width:125px}.map-character.animated-character{--character-width:48px}.large-character.animated-character{--character-width:185px}}@media(prefers-reduced-motion:reduce){.animated-character,.sprite-sheet,.wear-light{animation:none!important;transition:none!important}.animated-character[data-motion="accept"] .sprite-sheet{transform:translate(0,-50%)}.animated-character[data-motion="complete"] .sprite-sheet{transform:translate(-75%,-50%)}}.reduce-motion .animated-character,.reduce-motion .sprite-sheet,.reduce-motion .wear-light,.motion-still,.motion-still .sprite-sheet{animation:none!important}.reduce-motion .animated-character[data-motion="accept"] .sprite-sheet,.motion-still[data-motion="accept"] .sprite-sheet{transform:translate(0,-50%)}.reduce-motion .animated-character[data-motion="complete"] .sprite-sheet,.motion-still[data-motion="complete"] .sprite-sheet{transform:translate(-75%,-50%)}

/* Keep an exact 3:4 atlas cell, independent of legacy portrait dimensions. */
.outfit-preview-note{scroll-margin-top:82px}
.v4-character-stage{border:0;cursor:pointer}.souvenir-grid .outfit-thumb{width:60px;height:80px;margin:auto}.thumbnail-character.animated-character{--character-width:60px}.thumbnail-character .sprite-sheet{animation:none!important}.thumbnail-character .wear-light{animation:none!important}
.animated-character{max-width:none;max-height:none;overflow:visible}
.animated-character .sprite-window{width:100%;height:100%;line-height:0}
.animated-character .sprite-sheet{display:block;margin:0;padding:0;border:0;object-position:left top}
.animated-character.home-character{position:relative;right:auto;bottom:auto;width:var(--character-width);height:calc(var(--character-width)*4/3);transform:none}
.animated-character:is(.large-character,.wardrobe-character,.map-character,.task-motion-figure,.reward-character){width:var(--character-width);height:calc(var(--character-width)*4/3)}
/* The companion brooch is drawn at the same per-pose chest anchors as badges. */
.costume-stage .animated-character{flex:0 0 auto}
@media(max-width:360px){.v4-character-stage .animated-character{--character-width:112px}.wardrobe-character.animated-character{--character-width:174px}.costume-stage{min-height:252px}.costume-actions .btn{padding:8px 10px}.outfit-preview-note{flex-wrap:wrap;gap:8px}}

/* Six identities share actions, never the underlying portrait or professional skills. */
.animated-character .sprite-window{z-index:1}
.character-garment{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;image-rendering:pixelated}
.character-garment.garment-cape{z-index:0}

/* A separate, deliberately small map actor. 4 columns x 6 rows, 256px cells. */
.map-pixel-character{--map-character-size:64px;display:inline-block;width:var(--map-character-size);height:var(--map-character-size);position:relative;isolation:isolate;vertical-align:middle;line-height:0;pointer-events:none;flex-shrink:0}
.map-mini-body{position:absolute;inset:0;display:block}
/* The compass and body are drawn on the same moving atlas, never two clocks. */
.compass-sheet>.sprite-image,.compass-sheet>.sprite-attachments,.map-compass-sheet>.sprite-attachments{display:block;position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0;padding:0;border:0;transform:none;image-rendering:pixelated;pointer-events:none}
.compass-sheet>.sprite-attachments:last-child,.map-compass-sheet>.sprite-attachments:last-child{z-index:2}
.map-compass-window{display:block;position:absolute;inset:0;overflow:hidden}
.map-compass-sheet{display:block;position:absolute;left:0;top:0;width:400%;height:100%;transform:translateX(0)}
.map-compass-sheet>.map-mini-sprite{background-size:100% 600%;background-position:0 var(--map-row)!important;animation:none!important}
.town-walking .map-compass-sheet,.is-walking .map-compass-sheet{animation:map-compass-walk .48s steps(1,end) infinite}
.direction-up .map-compass-sheet{transform:translateX(-75%)!important;animation:none!important}
@keyframes map-compass-walk{0%,49.99%{transform:translateX(-25%)}50%,100%{transform:translateX(-50%)}}
.reduce-motion .map-compass-sheet{animation:none!important;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.map-compass-sheet{animation:none!important;transform:translateX(0)}}
.map-mini-sprite{position:absolute;inset:0;display:block;z-index:1;background-image:var(--map-sheet,url('./assets/v5/map-characters.png'));background-size:400% 600%;background-repeat:no-repeat;background-position:0 var(--map-row);image-rendering:pixelated}
.map-pixel-character.tone-sunset .map-mini-sprite{filter:hue-rotate(325deg) saturate(.9)}
.map-pixel-character.tone-sky .map-mini-sprite{filter:hue-rotate(38deg) saturate(.8)}
.town-walking .map-mini-sprite,.map-pixel-character.is-walking .map-mini-sprite{animation:map-mini-walk .48s steps(1,end) infinite}
.direction-left .map-mini-body{transform:scaleX(-1)}
.direction-up .map-mini-sprite{background-position:100% var(--map-row)!important;animation:none!important}
.map-garment{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;image-rendering:pixelated}
.map-garment.garment-cape{z-index:0}
.direction-up .map-garment.garment-cape{z-index:2}
.map-pixel-character .wear-light{width:3px;height:3px}
@keyframes map-mini-walk{0%,49.99%{background-position:33.333333% var(--map-row)}50%,100%{background-position:66.666667% var(--map-row)}}

.roster-stage{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:10px;align-items:end;padding:10px 18px 17px;min-height:294px}
.roster-stage:after{display:none}
.roster-stage figure{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;z-index:1}
.roster-stage .large-character{--character-width:184px;margin:0}
.roster-stage figcaption{display:block;color:#7c886f;font-size:12px;line-height:1.6;margin-top:5px}
.roster-map-preview{padding-bottom:3px;gap:5px}
.roster-map-preview .map-pixel-character{--map-character-size:96px}
.roster-map-preview:before{content:'';position:absolute;left:11%;right:11%;height:24px;bottom:30px;border-radius:50%;background:#dfe7d2;z-index:-1}
.roster-caption{text-align:center;margin:13px 0 4px}
.roster-caption strong{font-size:17px;color:#2d4c3b;font-weight:600}
.roster-caption p{font-size:12px;color:#7a876f;margin:5px 0}
.roster-choice-label{font-size:13px;font-weight:600;margin:22px 0 10px}
.roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
.roster-choice{display:flex;align-items:center;gap:5px;min-width:0;min-height:83px;text-align:left;padding:7px;border:1px solid #dce5d3;border-radius:12px;background:#fff;color:#33513c;cursor:pointer;position:relative}
.roster-choice .map-pixel-character{--map-character-size:58px}
.roster-choice-copy{min-width:0}
.roster-choice strong{display:block;font-size:14px;line-height:1.7;font-weight:600}
.roster-choice small{display:block;font-size:11px;color:#849079;line-height:1.6}
.roster-choice[aria-pressed="true"]{border-color:#7a9570;background:#f0f6e9;box-shadow:inset 0 0 0 1px #8ba17b}
.roster-choice[aria-pressed="true"]:after{content:'';position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:#7f9b65}
.roster-choice:focus-visible{outline:2px solid #a68c4f;outline-offset:3px}
.journey-current-card{background:#fff;border:1px solid #dce5d5;border-radius:14px;padding:21px;margin:18px 0}
.journey-current-card>small{font-size:12px;color:#8b794e}
.journey-current-card h2{font-size:21px;line-height:1.55;margin:8px 0}
.journey-current-card p{font-size:13px;color:#71806a;line-height:1.8}
.journey-current-reward{display:flex;justify-content:space-between;gap:12px;padding:14px 0;margin:12px 0;border-top:1px solid #e7ecdf;color:#8a7545;font-size:12px}
.journey-current-card .btn{width:100%}
.journey-book-list{list-style:none;padding:0;margin:10px 0}
.journey-book-list li{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-top:1px solid #e5ebdf}
.journey-book-list li>svg{flex-shrink:0;margin-top:5px;color:#8ba16f}
.journey-book-list strong{display:block;font-size:14px;font-weight:600}
.journey-book-list small{display:block;font-size:12px;color:#7e8975;line-height:1.7;margin-top:4px}
.journey-book-list .quiet-link{margin-top:5px;font-size:12px}
.journey-town-link{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #dce5d5;border-radius:11px;background:#f4f7ee;padding:16px;width:100%;text-align:left;color:#3b5b42;font-size:14px;margin:15px 0}
@media(max-width:360px){.roster-stage{grid-template-columns:minmax(0,1fr) 88px;padding:8px 10px 15px;gap:3px;min-height:276px}.roster-stage .large-character{--character-width:170px}.roster-map-preview .map-pixel-character{--map-character-size:86px}.roster-choice{padding:5px;gap:0}.roster-choice .map-pixel-character{--map-character-size:53px}.roster-choice small{font-size:10px}.roster-grid{gap:8px}}
@media(prefers-reduced-motion:reduce){.map-mini-sprite{animation:none!important;background-position:0 var(--map-row)}}
.reduce-motion .map-mini-sprite{animation:none!important;background-position:0 var(--map-row)}

/* Garments and accessories use the exact timing of their underlying atlas.
   Keep transforms inside the SVG: percentages refer to the full atlas cell,
   never the bounds of an individual necklace, book, or apron. */
.animated-character .wearable.fitted-outfit,.map-pixel-character .wearable.fitted-outfit{position:absolute;inset:0;width:100%;height:100%;transform:none;translate:none;pointer-events:none;z-index:2}
.animated-character .wearable-banner.fitted-outfit,.map-pixel-character .wearable-banner.fitted-outfit{z-index:0!important}
.fitted-outfit .outfit-pose{opacity:0;animation:none}
.fitted-outfit .pose-0{opacity:1}
.animated-character[data-motion="idle"] .fitted-outfit .pose-0{animation:outfit-idle-first 2.8s steps(1,end) infinite}
.animated-character[data-motion="idle"] .fitted-outfit .pose-1{animation:outfit-idle-second 2.8s steps(1,end) infinite}
.animated-character:is([data-motion="accept"],[data-motion="complete"]) .fitted-outfit .outfit-pose{opacity:0}
.animated-character[data-motion="accept"] .fitted-outfit .pose-2{animation:outfit-accept-first 2.1s steps(1,end) both}
.animated-character[data-motion="accept"] .fitted-outfit .pose-3{animation:outfit-accept-second 2.1s steps(1,end) both}
.animated-character[data-motion="accept"] .fitted-outfit .pose-4{animation:outfit-accept-third 2.1s steps(1,end) both}
.animated-character[data-motion="complete"] .fitted-outfit .pose-5{animation:outfit-complete-first 2.45s steps(1,end) both}
.animated-character[data-motion="complete"] .fitted-outfit .pose-6{animation:outfit-complete-second 2.45s steps(1,end) both}
.animated-character[data-motion="complete"] .fitted-outfit .pose-7{animation:outfit-complete-third 2.45s steps(1,end) both}
@keyframes outfit-idle-first{0%,67.999%,100%{opacity:1}68%,99.999%{opacity:0}}
@keyframes outfit-idle-second{0%,67.999%,100%{opacity:0}68%,99.999%{opacity:1}}
@keyframes outfit-accept-first{0%,29.999%{opacity:1}30%,100%{opacity:0}}
@keyframes outfit-accept-second{0%,29.999%,71%,100%{opacity:0}30%,70.999%{opacity:1}}
@keyframes outfit-accept-third{0%,70.999%{opacity:0}71%,100%{opacity:1}}
@keyframes outfit-complete-first{0%,23.999%{opacity:1}24%,100%{opacity:0}}
@keyframes outfit-complete-second{0%,23.999%,73%,100%{opacity:0}24%,72.999%{opacity:1}}
@keyframes outfit-complete-third{0%,72.999%{opacity:0}73%,100%{opacity:1}}
/* The original raised-arm cells contain a few pixels from the next cell's
   outstretched hand. Crop only that unused outer edge, per matching pose. */
.animated-character[data-motion="complete"] .sprite-window{animation:portrait-complete-crop 2.45s steps(1,end) both}
@keyframes portrait-complete-crop{0%,23.999%{clip-path:inset(0 0 0 4%)}24%,72.999%{clip-path:inset(0 8% 0 0)}73%,100%{clip-path:inset(0)}}
.town-walking .map-pixel-character .fitted-outfit .pose-0,.map-pixel-character.is-walking .fitted-outfit .pose-0{opacity:0}
.town-walking .map-pixel-character .fitted-outfit .pose-1,.map-pixel-character.is-walking .fitted-outfit .pose-1{animation:outfit-walk-first .48s steps(1,end) infinite}
.town-walking .map-pixel-character .fitted-outfit .pose-2,.map-pixel-character.is-walking .fitted-outfit .pose-2{animation:outfit-walk-second .48s steps(1,end) infinite}
@keyframes outfit-walk-first{0%,49.999%{opacity:1}50%,100%{opacity:0}}
@keyframes outfit-walk-second{0%,49.999%{opacity:0}50%,100%{opacity:1}}
.map-pixel-character.direction-up .fitted-outfit .outfit-pose{opacity:0!important;animation:none!important}
.map-pixel-character.direction-up .fitted-outfit .pose-3{opacity:1!important}
/* Small catalog previews stay on the same first frame as their image. */
.thumbnail-character .fitted-outfit .outfit-pose{animation:none!important;opacity:0!important}
.thumbnail-character .fitted-outfit .pose-0{opacity:1!important}
.reduce-motion .fitted-outfit .outfit-pose,.motion-still .fitted-outfit .outfit-pose{animation:none!important;opacity:0!important}
.reduce-motion .sprite-window,.motion-still .sprite-window{animation:none!important;clip-path:inset(0)!important}
.reduce-motion .animated-character[data-motion="idle"] .fitted-outfit .pose-0,.reduce-motion .animated-character[data-motion="accept"] .fitted-outfit .pose-4,.reduce-motion .animated-character[data-motion="complete"] .fitted-outfit .pose-7,.motion-still[data-motion="accept"] .fitted-outfit .pose-4,.motion-still[data-motion="complete"] .fitted-outfit .pose-7{opacity:1!important}
.reduce-motion .map-pixel-character:not(.direction-up) .fitted-outfit .pose-0{opacity:1!important}
@media(prefers-reduced-motion:reduce){
  .animated-character .sprite-window{animation:none!important;clip-path:inset(0)!important}
  .fitted-outfit .outfit-pose{animation:none!important;opacity:0!important}
  .animated-character[data-motion="idle"] .fitted-outfit .pose-0,.animated-character[data-motion="accept"] .fitted-outfit .pose-4,.animated-character[data-motion="complete"] .fitted-outfit .pose-7,.map-pixel-character:not(.direction-up) .fitted-outfit .pose-0{opacity:1!important}
}