/* Original RGBA atlas, displayed in fixed-size frames; labels live outside the image. */
.ui-icon {background-image:url("assets/ui/world-items-atlas-v1.png");background-size:var(--ui-size) var(--ui-size);background-position:var(--ui-x) var(--ui-y)}
[data-ui-icon="flower"] {--ui-x:1.85873606%;--ui-y:2.32342007%;--ui-size:704.49438202%}
[data-ui-icon="ribbon"] {--ui-x:21.08655617%;--ui-y:2.85451197%;--ui-size:746.42857143%}
[data-ui-icon="bowtie"] {--ui-x:40.18779343%;--ui-y:1.78403756%;--ui-size:663.49206349%}
[data-ui-icon="paper"] {--ui-x:59.68342644%;--ui-y:2.14152700%;--ui-size:696.66666667%}
[data-ui-icon="scarf"] {--ui-x:78.54477612%;--ui-y:2.61194030%;--ui-size:689.01098901%}
[data-ui-icon="glasses"] {--ui-x:98.58356941%;--ui-y:2.36071766%;--ui-size:643.07692308%}
[data-ui-icon="band"] {--ui-x:1.85873606%;--ui-y:21.00371747%;--ui-size:704.49438202%}
[data-ui-icon="hat"] {--ui-x:20.77431539%;--ui-y:20.96317280%;--ui-size:643.07692308%}
[data-ui-icon="backpack"] {--ui-x:40.11246485%;--ui-y:20.61855670%;--ui-size:670.58823529%}
[data-ui-icon="star_badge"] {--ui-x:58.94833948%;--ui-y:20.84870849%;--ui-size:737.64705882%}
[data-ui-icon="paw_badge"] {--ui-x:80.43684710%;--ui-y:20.89268756%;--ui-size:623.88059701%}
[data-ui-icon="letter"] {--ui-x:98.76777251%;--ui-y:20.56872038%;--ui-size:630.15075377%}
[data-ui-icon="crown"] {--ui-x:2.67034991%;--ui-y:40.51565378%;--ui-size:746.42857143%}
[data-ui-icon="clover"] {--ui-x:20.80223881%;--ui-y:40.11194030%;--ui-size:689.01098901%}
[data-ui-icon="charm"] {--ui-x:40.00000000%;--ui-y:40.09389671%;--ui-size:663.49206349%}
[data-ui-icon="lantern"] {--ui-x:59.33333333%;--ui-y:40.09523810%;--ui-size:614.70588235%}
[data-ui-icon="ring"] {--ui-x:80.56603774%;--ui-y:40.56603774%;--ui-size:646.39175258%}
[data-ui-icon="naoto_crown"] {--ui-x:98.76777251%;--ui-y:40.09478673%;--ui-size:630.15075377%}
[data-ui-icon="world"] {--ui-x:1.04364326%;--ui-y:59.29791271%;--ui-size:627.00000000%}
[data-ui-icon="book"] {--ui-x:19.90384615%;--ui-y:60.28846154%;--ui-size:585.98130841%}
[data-ui-icon="medal"] {--ui-x:40.13220019%;--ui-y:59.58451369%;--ui-size:643.07692308%}
[data-ui-icon="palette"] {--ui-x:59.25572519%;--ui-y:59.06488550%;--ui-size:608.73786408%}
[data-ui-icon="sun"] {--ui-x:80.19230769%;--ui-y:60.09615385%;--ui-size:585.98130841%}
[data-ui-icon="cloud"] {--ui-x:99.04942966%;--ui-y:59.98098859%;--ui-size:620.79207921%}
[data-ui-icon="rain"] {--ui-x:1.31332083%;--ui-y:79.17448405%;--ui-size:667.02127660%}
[data-ui-icon="snow"] {--ui-x:21.55411656%;--ui-y:78.53839038%;--ui-size:724.85549133%}
[data-ui-icon="moon"] {--ui-x:40.79696395%;--ui-y:79.03225806%;--ui-size:627.00000000%}
[data-ui-icon="sunrise"] {--ui-x:58.92351275%;--ui-y:79.69782814%;--ui-size:643.07692308%}
[data-ui-icon="sunset"] {--ui-x:78.72539831%;--ui-y:79.38144330%;--ui-size:670.58823529%}
[data-ui-icon="candy"] {--ui-x:98.22097378%;--ui-y:77.90262172%;--ui-size:674.19354839%}
[data-ui-icon="bubbles"] {--ui-x:1.70940171%;--ui-y:97.24596391%;--ui-size:623.88059701%}
[data-ui-icon="balloon"] {--ui-x:20.22792023%;--ui-y:97.43589744%;--ui-size:623.88059701%}
[data-ui-icon="fireworks"] {--ui-x:39.23220974%;--ui-y:97.28464419%;--ui-size:674.19354839%}
[data-ui-icon="camera"] {--ui-x:60.09615385%;--ui-y:98.75000000%;--ui-size:585.98130841%}
[data-ui-icon="musicbox"] {--ui-x:78.95734597%;--ui-y:97.63033175%;--ui-size:630.15075377%}
[data-ui-icon="surprise"] {--ui-x:99.04761905%;--ui-y:97.52380952%;--ui-size:614.70588235%}
.menu-grid .care-icon {width:32px;height:32px;flex-basis:32px}
#petAccessory .care-icon {width:1em;height:1em;flex:0 0 1em;background-color:transparent;border-radius:0}
.item-emoji .care-icon {width:1em;height:1em;flex-basis:1em}
.theme-swatch-circle .care-icon {width:26px;height:26px;flex-basis:26px}
.world-now-chip .care-icon,.world-now-effect .care-icon {width:18px;height:18px;flex-basis:18px}
.world-now-chip {display:inline-flex;align-items:center;gap:2px}
#storyFlashEmoji .care-icon {width:32px;height:32px;flex-basis:32px}
.icon-fallback {display:none;line-height:1}
/* UI-wide replacements inherit the original glyph box and never intercept a
   drag/tap. Hidden source characters retain the existing text-only contracts. */
.display-icon,.catalog-icon {display:inline-block;width:1em;height:1em;line-height:1;vertical-align:-.12em;flex:0 0 1em;pointer-events:none}
.display-source {display:none!important}
.display-icon > :not(.display-source),.catalog-icon > :not(.icon-fallback),
.display-icon .care-icon,.catalog-icon .care-icon {width:1em;height:1em;vertical-align:0}
.catalog-icon > img {display:block;object-fit:contain;image-rendering:pixelated}
.catalog-icon > svg {display:block}
.lifecard-title .comment-picture {width:1.65em;height:1.65em;vertical-align:middle;margin-right:.15em}
/* Inline drawings share the surrounding text size and never grow a line box.
   Existing speech/narration slots, scrolling and actor frames own their layout. */
:is(#speechText,#message,#storyFlashText,#birthdayToast,#dateMovieCaption,#duelQuestionText,#duelRevealText) .care-icon {
  width:1em;height:1em;flex-basis:1em;vertical-align:-.12em;
}
.comment-picture {display:inline-block;width:1em;height:1em;vertical-align:-.12em;line-height:1;text-align:center}
.comment-asset {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.comment-picture.asset-failed > .comment-asset {display:none}
.comment-picture.asset-failed > .icon-fallback {display:inline}
.comment-drawing {display:inline-block;width:1em;height:1em;vertical-align:-.12em;line-height:1;color:#694d3b}
.comment-drawing > svg {display:block;width:100%;height:100%}
.ach-grid .care-icon {width:1em;height:1em;flex-basis:1em;vertical-align:-.12em}
/* Inherit the existing 64/30/24/20px glyph sizes; the 46px drag hit areas stay intact. */
.mg-food-picture {display:inline-block;width:1em;height:1em;vertical-align:-.12em;line-height:1;color:#694d3b;pointer-events:none}
.mg-food-picture > svg {display:block;width:100%;height:100%;pointer-events:none}
#storyFlashEmoji .comment-drawing {width:32px;height:32px}
#storyFlashEmoji .comment-picture {width:32px;height:32px}
#storyFlashText .comment-drawing,#dateMovieCaption .comment-drawing,#birthdayToast .comment-drawing {color:#dcbf93}
#storyFlashText .comment-drawing:not([data-comment-symbol="infinity"]) > svg,
#dateMovieCaption .comment-drawing:not([data-comment-symbol="infinity"]) > svg,
#birthdayToast .comment-drawing:not([data-comment-symbol="infinity"]) > svg {stroke:#694d3b}
#speechSpeaker {width:1em;flex:0 0 1em}
#speechSpeaker .care-icon {width:1em;height:1em;flex-basis:1em}
/* Whole PNGs stay inside the existing decoration frame, including on failure. */
.scenery-picture {display:inline-block;width:1em;height:1em;vertical-align:top;line-height:1;text-align:center}
.scenery-asset {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.scenery-picture.asset-failed > .scenery-asset {display:none}
.scenery-picture.asset-failed > .icon-fallback {display:inline}
.care-icon:has(> .icon-fallback) {text-align:center;line-height:1}
html[data-ui-atlas="failed"] .ui-icon:not(.scenery-icon),
html[data-scenery-atlas="failed"] .scenery-icon,
html[data-care-atlas="failed"] [data-care-icon]:has(> .icon-fallback) {background-image:none}
html[data-ui-atlas="failed"] .ui-icon:not(.scenery-icon) > .icon-fallback,
html[data-scenery-atlas="failed"] .scenery-icon > .icon-fallback,
html[data-care-atlas="failed"] [data-care-icon] > .icon-fallback {display:inline}
html[data-scenery-atlas="failed"] .scenery-icon {clip-path:none}
/* The existing effect wrapper owns placement, opacity and movement. */
:is(.region-decor-item,.season-fx-item,.season-burst-item,.wx-cloud,.wx-flake,.wx-moon) > .care-icon {
  width:1em;height:1em;flex-basis:1em;vertical-align:top;
  background-color:transparent;border-radius:0;
}
@media (prefers-reduced-motion:reduce) {
  .region-decor-item {animation:none;transform:none;will-change:auto}
}

/* Header hit areas stay unchanged; only the drawing inside each badge changes. */
.ending-badge .care-icon {width:20px;height:20px;flex-basis:20px}
#regionLabel .care-icon,#seasonLabel .care-icon,#environmentLabel .care-icon {
  width:1em;height:1em;flex-basis:1em;vertical-align:-.12em;
}
/* Rectangular clipping keeps neighbouring atlas art out of square icon frames. */
.scenery-icon {background-image:url("assets/ui/season-region-atlas-v1.png");clip-path:var(--scenery-clip)}
[data-ui-icon="cherry_blossom"] {--ui-x:4.35663627%;--ui-y:5.06585613%;--ui-size:469.66292135%;--scenery-clip:inset(2.99625468% 1.49812734% 2.99625468% 1.49812734%)}
[data-ui-icon="sunflower"] {--ui-x:33.82352941%;--ui-y:3.67647059%;--ui-size:415.23178808%;--scenery-clip:inset(4.63576159% 1.32450331% 4.63576159% 1.32450331%)}
[data-ui-icon="maple_leaf"] {--ui-x:66.63190824%;--ui-y:3.85818561%;--ui-size:425.08474576%;--scenery-clip:inset(1.35593220% 6.10169492% 1.35593220% 6.10169492%)}
[data-ui-icon="green_leaf"] {--ui-x:96.37537239%;--ui-y:6.95134062%;--ui-size:507.69230769%;--scenery-clip:inset(1.61943320% 10.72874494% 1.61943320% 10.72874494%)}
[data-ui-icon="tree"] {--ui-x:2.95336788%;--ui-y:36.58031088%;--ui-size:433.91003460%;--scenery-clip:inset(1.38408304% 2.59515571% 1.38408304% 2.59515571%)}
[data-ui-icon="pine"] {--ui-x:34.10283316%;--ui-y:35.78174187%;--ui-size:416.61129568%;--scenery-clip:inset(1.32890365% 9.30232558% 1.32890365% 9.30232558%)}
[data-ui-icon="palm"] {--ui-x:66.87565308%;--ui-y:36.05015674%;--ui-size:422.22222222%;--scenery-clip:inset(1.34680135% 6.06060606% 1.34680135% 6.06060606%)}
[data-ui-icon="cactus"] {--ui-x:98.33159541%;--ui-y:36.18352450%;--ui-size:425.08474576%;--scenery-clip:inset(1.35593220% 12.54237288% 1.35593220% 12.54237288%)}
[data-ui-icon="snow_mountain"] {--ui-x:2.86016949%;--ui-y:67.26694915%;--ui-size:404.51612903%;--scenery-clip:inset(13.87096774% 1.29032258% 13.87096774% 1.29032258%)}
[data-ui-icon="mountain"] {--ui-x:35.75883576%;--ui-y:67.04781705%;--ui-size:429.45205479%;--scenery-clip:inset(10.61643836% 1.36986301% 10.61643836% 1.36986301%)}
[data-ui-icon="house"] {--ui-x:66.76986584%;--ui-y:66.66666667%;--ui-size:440.00000000%;--scenery-clip:inset(7.71929825% 1.40350877% 7.71929825% 1.40350877%)}
[data-ui-icon="city"] {--ui-x:96.63951120%;--ui-y:65.63136456%;--ui-size:461.02941176%;--scenery-clip:inset(3.86029412% 1.47058824% 3.86029412% 1.47058824%)}
[data-ui-icon="wheat"] {--ui-x:3.48595213%;--ui-y:96.04578564%;--ui-size:427.98634812%;--scenery-clip:inset(1.36518771% 6.99658703% 1.36518771% 6.99658703%)}
[data-ui-icon="wave"] {--ui-x:34.95346432%;--ui-y:95.86349535%;--ui-size:436.93379791%;--scenery-clip:inset(3.48432056% 1.39372822% 3.48432056% 1.39372822%)}
[data-ui-icon="shell"] {--ui-x:65.65656566%;--ui-y:94.24242424%;--ui-size:475.00000000%;--scenery-clip:inset(3.40909091% 1.51515152% 3.40909091% 1.51515152%)}
[data-ui-icon="hibiscus"] {--ui-x:97.70594369%;--ui-y:96.76746611%;--ui-size:425.08474576%;--scenery-clip:inset(6.77966102% 1.35593220% 6.77966102% 1.35593220%)}

/* Dedicated item masters share one optical frame; only the shop drawing grows. */
.item-picture {display:inline-block;width:1em;height:1em;vertical-align:-.12em;line-height:1;text-align:center;pointer-events:none}
.item-asset {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.item-picture.asset-failed > .item-asset {display:none}
.item-picture.asset-failed > .icon-fallback {display:inline}
.shop-item-emoji .item-picture {width:40px;height:40px;flex-basis:40px}
#petAccessory .item-picture {width:1em;height:1em;flex:0 0 1em}
.item-emoji .item-picture {width:1em;height:1em;flex-basis:1em}
#stickerPackBtn .item-picture {width:1.35em;height:1.35em;vertical-align:-.3em}