/* Weather on the page chrome. art.js sets #game[data-weather] to "gale", "scorch" or "home". */
#game[data-weather="gale"] .pad.wind .label { animation: gust .3s ease-in-out infinite alternate; box-shadow: 0 0 0 3px rgba(61,127,217,.45); }
#game[data-weather="scorch"] .pad.sun .label { animation: blaze .8s ease-in-out infinite alternate; box-shadow: 0 0 1rem rgba(255,150,30,.8); }
#game[data-weather="gale"] #mood { color: #2f6fc4; }
#game[data-weather="scorch"] #mood { color: #d0531a; }
#game[data-weather="home"] #mood { animation: hop .45s ease-in-out infinite alternate; }

@keyframes gust { from { transform: translateX(-3px) rotate(-2deg); } to { transform: translateX(4px) rotate(2deg); } }
@keyframes blaze { from { box-shadow: 0 0 .3rem rgba(255,150,30,.4); } to { box-shadow: 0 0 1.4rem rgba(255,120,20,.95); } }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* prefers-reduced-motion: keep the weather cues (outlines, colours) but nothing wobbles, glows in and out or slides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:active { transform: none; }
}