.quest-panel {
  min-height: 100svh;
  padding: 72px 16px 82px;
  background:
    linear-gradient(rgb(81 135 51 / 82%), rgb(81 135 51 / 82%)),
    url("../../../assets/stardew/scenes/spring-panorama.png") center / cover fixed;
  color: #fff8d6;
}

.quest-panel__window {
  position: relative;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 28px 18px 22px;
  border: 8px solid #34284f;
  border-radius: 4px;
  outline: 4px solid #8271ad;
  background: #302746;
  box-shadow: 9px 10px 0 rgb(43 61 29 / 40%);
}

.quest-panel__ribbon {
  position: absolute;
  top: -30px;
  right: 12px;
  margin: 0;
  padding: 8px 14px;
  border: 3px solid #76263b;
  background: #d54457;
  color: #fff5cc;
  font-weight: 900;
  transform: rotate(3deg);
}

.quest-panel__gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.quest-panel__tile {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #b89362;
  background: #77bfc5;
  overflow: hidden;
}

.quest-panel__tile:nth-child(2) { background: #d9869b; }
.quest-panel__tile:nth-child(3) { background: #e5b35e; }
.quest-panel__tile:nth-child(4) { background: #79af62; }
.quest-panel__tile:nth-child(5) { background: #708fc4; }

.quest-panel__junimo {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  filter: sepia(1) saturate(5) hue-rotate(55deg);
  animation: quest-junimo-bob 1.4s steps(2, end) infinite;
}

.quest-panel__tile:nth-child(2) .quest-panel__junimo { filter: sepia(1) saturate(7) hue-rotate(285deg); }
.quest-panel__tile:nth-child(3) .quest-panel__junimo { filter: sepia(1) saturate(7) hue-rotate(5deg); }
.quest-panel__tile:nth-child(4) .quest-panel__junimo { filter: sepia(1) saturate(7) hue-rotate(95deg); }
.quest-panel__tile:nth-child(5) .quest-panel__junimo { filter: sepia(1) saturate(7) hue-rotate(170deg); }

.quest-panel__title {
  margin: 0 0 14px;
  color: #fff5cc;
  font-size: clamp(1.55rem, 7vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 3px 3px #171121;
}

.quest-panel__intro {
  margin: 0 0 20px;
  color: #e9e0cd;
  line-height: 1.75;
}

.quest-panel__objectives {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.quest-panel__objective {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  line-height: 1.6;
}

.quest-panel__star {
  color: #ffd02e;
  font-size: 1.35rem;
  text-shadow: 2px 2px #9a5c17;
}

.quest-panel__reward {
  display: grid;
  margin: 24px 0 0;
  padding: 14px 12px;
  border: 4px solid #7160a1;
  background: #19162d;
  gap: 4px;
  text-align: center;
}

.quest-panel__reward span { color: #d6c4ef; font-size: 0.8rem; }
.quest-panel__reward strong { color: #ffdc65; font-size: 1.05rem; }

@keyframes quest-junimo-bob {
  50% { transform: translateY(-4px); }
}

@media (min-width: 640px) {
  .quest-panel__window { padding: 38px 42px 32px; }
  .quest-panel__gallery { gap: 14px; }
  .quest-panel__junimo { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .quest-panel__junimo { animation: none; }
}