.announcement { top: 230px; }

.top-actions {
  justify-self: end;
  display: flex;
  gap: 9px;
  pointer-events: auto;
}

.sticker-book-button {
  position: relative;
  color: #fff8c8;
  background: linear-gradient(145deg, #ef79b5, #9c58c6);
  box-shadow: inset 0 2px #ffffff9c, 0 6px 0 #704093, 0 11px 22px #67448745, 0 0 14px #ffd85a88;
  animation: sticker-book-invite 2.4s ease-in-out infinite;
}

.sticker-book-button::after {
  content: attr(data-count);
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 23px;
  height: 23px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #6d427d;
  background: #fff7c7;
  font-size: .52rem;
  font-weight: 900;
}

body.gentle-motion .sticker-book-button { animation: none; }

.sticker-card {
  border-color: #f7cc66;
  background: linear-gradient(90deg, #efd2e9 0 16px, #fffdf5 16px 50%, #f2e4cb 50% 52%, #fffdf5 52% 100%);
  box-shadow: inset 0 0 0 6px #fff8, 0 25px 60px #5c3f7770, 0 0 0 8px #f6d47a55;
}

@keyframes sticker-book-invite {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-3px) rotate(-4deg); }
  55% { transform: translateY(-3px) rotate(4deg); }
}

.recipe-card {
  min-width: 370px;
  min-height: 92px;
  padding-left: 112px;
}

.recipe-bottle {
  position: absolute;
  left: 18px;
  top: 4px;
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px #59387835);
}

.menu-row { flex-wrap: wrap; }

.reward-sticker {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 9px #6b3e7b42);
  animation: sticker-pop .55s cubic-bezier(.2, 1.5, .45, 1);
}

.sticker-card {
  width: min(94vw, 760px);
}

.sticker-card > p {
  margin: 6px 0 14px;
  color: #805391;
  font-weight: 900;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

.sticker {
  min-height: 145px;
  padding: 8px;
  border: 2px solid #fff;
  border-radius: 20px;
  background: #f6edfb;
  box-shadow: 0 5px 12px #6f4a8730;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sticker img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.sticker strong {
  font-size: .57rem;
  line-height: 1.15;
  color: #674779;
}

.sticker em {
  margin: 2px 0 4px;
  color: #9a72aa;
  font-size: .45rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sticker.uncommon { border-color: #8ed8e0; }
.sticker.rare { border-color: #e7ae36; background: #fff8da; box-shadow: 0 0 18px #f2c64b72; }
.sticker.rare em { color: #b26c12; }

.lessons-card .lesson-grid button.uncommon { background: linear-gradient(145deg, #5bcad5, #6671c9); }
.lessons-card .lesson-grid button.rare { background: linear-gradient(145deg, #ffd75c, #eb769e); box-shadow: 0 5px 0 #b36e32, 0 0 12px #ffd95b; }

.sticker.locked span {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #cdbbd7;
  font-size: 2rem;
  font-weight: 900;
}

.lessons-card .lesson-grid {
  max-height: 48vh;
  overflow-y: auto;
  padding: 4px;
  grid-template-columns: repeat(10, 1fr);
}

@keyframes sticker-pop {
  from { opacity: 0; transform: scale(.35) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

body:not(.gentle-motion) .ingredient-button img {
  animation: ingredient-float 3.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}

body:not(.gentle-motion) .ingredient-button:nth-child(2n) img { animation-delay: -.8s; }
body:not(.gentle-motion) .ingredient-button:nth-child(3n) img { animation-delay: -1.7s; }

body:not(.gentle-motion) .ingredient-button::after {
  content: "✦";
  position: absolute;
  z-index: 3;
  top: 18%;
  right: 18%;
  color: #fff;
  font-size: 1.25rem;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 9px var(--glow);
  animation: gem-glint 2.8s ease-in-out infinite;
}

body:not(.gentle-motion) .ingredient-button:nth-child(2n)::after { animation-delay: -1.2s; }
body:not(.gentle-motion) .ingredient-button.just-chosen { animation: ingredient-drop .62s cubic-bezier(.18, 1.4, .35, 1); }
body:not(.gentle-motion) .selected-tray span { animation: tray-pop .38s cubic-bezier(.2, 1.45, .4, 1) both; }
body:not(.gentle-motion) .recipe-bottle { animation: target-breathe 2.6s ease-in-out infinite; }
body:not(.gentle-motion) .potion-badge { animation: badge-float 2.8s ease-in-out infinite; }

body:not(.gentle-motion) #game-shell.mixing-now .recipe-card {
  animation: magic-rumble .16s ease-in-out 6 alternate;
}

body:not(.gentle-motion) #game-shell.mixing-now .mix-button {
  animation: mix-charge .6s ease-in-out infinite alternate;
}

body:not(.gentle-motion) .reward-sticker {
  animation: sticker-pop .55s cubic-bezier(.2, 1.5, .45, 1), sticker-shine 1.8s .55s ease-in-out infinite;
}

@keyframes ingredient-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

@keyframes gem-glint {
  0%, 66%, 100% { opacity: 0; transform: scale(.25) rotate(0); }
  76% { opacity: 1; transform: scale(1.2) rotate(90deg); }
  86% { opacity: 0; transform: scale(.5) rotate(150deg); }
}

@keyframes ingredient-drop {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(18px) scale(.9); }
  70% { transform: translateY(-9px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes tray-pop {
  from { opacity: 0; transform: translateY(-28px) scale(.4) rotate(-15deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes target-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 5px 5px #59387835); }
  50% { transform: scale(1.07); filter: drop-shadow(0 7px 9px #f2b8ff88); }
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes magic-rumble {
  from { transform: translateX(calc(-50% - 3px)) rotate(-.5deg); }
  to { transform: translateX(calc(-50% + 3px)) rotate(.5deg); }
}

@keyframes mix-charge {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.22) drop-shadow(0 0 18px #fff); transform: scale(1.05); }
}

@keyframes sticker-shine {
  0%, 100% { filter: drop-shadow(0 10px 9px #6b3e7b42); transform: rotate(-1deg); }
  50% { filter: drop-shadow(0 10px 18px #f4ca58aa); transform: rotate(1deg) scale(1.04); }
}

.potion-first-coach {
  position: absolute;
  left: 70%;
  bottom: 19%;
  z-index: 36;
  width: 250px;
  pointer-events: none;
  text-align: center;
}
.potion-first-coach strong {
  display: inline-block;
  padding: 9px 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #351269;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 25px #3512694d;
  font: 900 15px/1.1 system-ui, sans-serif;
  animation: potion-coach-breathe 2s ease-in-out infinite;
}
.potion-first-coach > div { position: relative; width: 82px; height: 70px; margin: 4px auto 0; }
.potion-first-coach span { position: absolute; left: 24px; top: 16px; z-index: 2; font-size: 42px; filter: drop-shadow(0 7px 8px #35126955); animation: potion-coach-tap 2.1s ease-in-out infinite; }
.potion-first-coach i { position: absolute; left: 20px; top: 3px; width: 38px; height: 38px; border: 4px solid #ffe35c; border-radius: 50%; box-shadow: 0 0 0 7px #ffe35c38, 0 0 22px #ffe35c; animation: potion-coach-pulse 2.1s ease-out infinite; }
.potion-first-coach b { position: absolute; left: 6px; top: 23px; width: 68px; height: 8px; border-radius: 99px; background: linear-gradient(90deg,transparent,#ffe35c,transparent); filter: drop-shadow(0 0 7px #ffe35c); animation: potion-coach-trail 2.1s ease-in-out infinite; }
@keyframes potion-coach-tap { 0%,18%,82%,100%{transform:translate(-25px,10px)} 58%,70%{transform:translate(30px,0)} }
@keyframes potion-coach-pulse { 0%,18%{transform:scale(.55);opacity:0} 28%{opacity:1} 65%,100%{transform:scale(1.45);opacity:0} }
@keyframes potion-coach-trail { 0%,18%{transform:translateX(-23px) scaleX(.3);opacity:0} 35%,70%{transform:translateX(0) scaleX(1);opacity:1} 82%,100%{transform:translateX(23px) scaleX(.3);opacity:0} }
@keyframes potion-coach-breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

@media (prefers-reduced-motion: reduce) {
  .ingredient-button img,
  .ingredient-button::after,
  .selected-tray span,
  .recipe-bottle,
  .potion-badge,
  .reward-sticker { animation: none !important; }
  .sticker-book-button { animation: none !important; }
  .potion-first-coach * { animation: none !important; }
}

@media (max-width: 650px) {
  .announcement { top: 250px; }
  .recipe-card { min-width: 330px; padding-left: 96px; }
  .recipe-bottle { width: 72px; height: 72px; left: 14px; top: 8px; }
  .sticker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lessons-card .lesson-grid { grid-template-columns: repeat(5, 1fr); }
  .top-actions { gap: 5px; }
  .top-actions .round-button { width: 45px; height: 45px; border-radius: 15px; }
}

@media (max-height: 580px) and (orientation: landscape) {
  .announcement { top: 215px; }
}