/* Keep portrait pixels steady. Hover emphasis belongs to the engraved frame. */
body #screen-setup #shopPanel #offers .offer:not(.equip-offer):hover,
body #screen-setup #shopPanel #offers .offer:not(.equip-offer):focus-visible,
body #screen-setup #formationPanel .slot.occupied:hover,
body #screen-setup #terrainPanel [data-roster]:hover{transform:none!important;filter:none!important}
body #screen-setup #offers .offer:not(.equip-offer):hover .summon-art,
body #screen-setup #formationPanel .slot.occupied:hover .formation-art,
body #screen-setup #terrainPanel [data-roster]:hover .roster-art{transform:none!important;filter:none!important}
/* Each element moves in its own language; the water ribbon retains its existing motion. */
#screen-setup [data-whimsy-element=Nature] .filigree-element{animation:leaf-dance256 5.6s ease-in-out infinite}
#screen-setup [data-whimsy-element=Fire] .filigree-element{animation:ember-lift256 3.8s ease-in-out infinite}
#screen-setup [data-whimsy-element=Air] .filigree-element{stroke-dasharray:26 4 12 3;animation:wind-thread256 5s linear infinite}
#screen-setup [data-whimsy-element=Earth] .filigree-element{animation:stone-gleam256 6s ease-in-out infinite}
#screen-setup [data-whimsy-element=Spirit] .filigree-element{animation:spirit-twinkle256 4.6s ease-in-out infinite}
#screen-setup [data-whimsy-element=Death] .filigree-element{stroke-dasharray:34 3 12 4;animation:wraith-thread256 7s linear infinite}
#screen-setup [data-whimsy-element]:not([data-whimsy-element=Water]) .element-filigree .filigree-element{transform-box:fill-box;transform-origin:center;animation-delay:var(--whimsy-delay,0s)}
@keyframes leaf-dance256{0%,100%{transform:rotate(-5deg) translateY(1px);opacity:.65}45%{transform:rotate(6deg) translateY(-2px);opacity:1}70%{transform:rotate(1deg);opacity:.85}}
@keyframes ember-lift256{0%,100%{transform:translateY(1px) scaleY(.95);opacity:.55}40%{transform:translate(1px,-3px) scaleY(1.05);opacity:1}65%{transform:translate(-1px,-1px);opacity:.75}}
@keyframes wind-thread256{from{stroke-dashoffset:0;opacity:.75}50%{opacity:1}to{stroke-dashoffset:-45;opacity:.75}}
@keyframes stone-gleam256{0%,100%{opacity:.45;stroke-width:.85}50%{opacity:1;stroke-width:1.3}}
@keyframes spirit-twinkle256{0%,100%{transform:rotate(-3deg) scale(.96);opacity:.5}45%{transform:rotate(4deg) scale(1.07);opacity:1}65%{opacity:.7}}
@keyframes wraith-thread256{from{stroke-dashoffset:0;opacity:.6}50%{opacity:.95}to{stroke-dashoffset:53;opacity:.6}}
body[data-whimsy-paused=true] #screen-setup .element-filigree .filigree-element,
body:has(#equipmentDetailsOverlay:not(.hidden)) #screen-setup .element-filigree .filigree-element{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#screen-setup .element-filigree .filigree-element{animation:none!important}}

/* v267: one engraved hover treatment for creature, item and relic offers. */
@media (hover:hover) and (pointer:fine){
 body #screen-setup #shopPanel #offers .offer{transition:border-color .18s ease,box-shadow .18s ease!important}
 body #screen-setup #shopPanel #offers .offer:is(:hover,:focus-visible):not(.offer-unavailable){
  transform:none!important;filter:none!important;border-color:#e5c58d!important;
  box-shadow:inset 0 0 16px #ead19b16,0 0 14px #d6b57832,0 5px 12px #0005!important;
 }
 body #screen-setup #shopPanel #offers .offer:is(:hover,:focus-visible) :is(.summon-art,.equipment-art){transform:none!important;filter:none!important}
}
body #screen-setup #shopPanel #offers .offer:focus-visible{outline:2px solid #ebcf96!important;outline-offset:2px!important}
@media(prefers-reduced-motion:reduce){body #screen-setup #shopPanel #offers .offer{transition:none!important}}