.joy-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #5a4027;
}
.joy-layer[hidden] { display: none; }
.game .topbar { z-index: 20; }
.joy-warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 47%, #ffeeb95c, #224c3929 70%);
}
.joy-card {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 36cqw;
  padding: 1.6cqw 2.5cqw 1.1cqw;
  transform: translate(-50%, -50%);
  text-align: center;
  background: linear-gradient(160deg, #fffdf1 10%, #fff1c7 85%);
  border: .3cqw solid #fffbed;
  border-radius: 3cqw;
  box-shadow: 0 .5cqw 0 #dcad5e, 0 1.5cqw 4cqw #3a4e3659, inset 0 0 0 .12cqw #edd296;
}
.joy-card::before, .joy-card::after {
  content: '✦';
  position: absolute;
  top: 16%;
  color: #e9b64c;
  font-size: 3cqw;
  transform: rotate(-14deg);
}
.joy-card::before { left: 14%; }
.joy-card::after { right: 14%; top: 25%; font-size: 1.8cqw; }
.joy-star { width: 6cqw; height: 6cqw; margin: -.5cqw auto .5cqw; filter: drop-shadow(0 .3cqw .5cqw #dfa54388); }
.joy-star svg, .joy-friends svg, .joy-keepsake svg { display: block; width: 100%; height: 100%; overflow: visible; }
.joy-kicker { margin: .6cqw 0 .3cqw; font-size: 1.05cqw; font-weight: 750; letter-spacing: .15em; color: #94723e; }
.joy-copy h2 { font-size: 3.2cqw; line-height: 1.2; margin: .3cqw 0 .7cqw; color: #38725b; font-weight: 900; }
.joy-message { margin: 0 auto; font-size: 1.45cqw; font-weight: 700; line-height: 1.5; max-width: 29cqw; }
.joy-friends { display: flex; justify-content: center; align-items: flex-end; gap: 1cqw; height: 6.2cqw; margin-top: .6cqw; }
.joy-friends span { width: 4.8cqw; height: 4.8cqw; transform-origin: 50% 90%; }
.joy-friends span:nth-child(2) { width: 5.7cqw; height: 5.7cqw; }
.joy-caption { font-size: .9cqw; color: #947c53; margin: .5cqw 0 0; }
.joy-layer[data-reward="level"] .joy-star { width: 9cqw; height: 9cqw; margin-top: -3.6cqw; }
.joy-layer[data-reward="level"] .joy-card { border-color: #ffefad; }
.joy-layer[data-reward="level"] .joy-copy h2 { color: #8b581c; font-size: 3.7cqw; }
.joy-sparks { position: absolute; left: 50%; top: 44%; }
.joy-sparks i { position: absolute; font-size: 1.8cqw; font-style: normal; color: var(--spark); opacity: 0; text-shadow: 0 .15cqw .2cqw #a87b4d44; }
.joy-keepsake {
  display: none;
  position: absolute;
  left: 2.5%;
  bottom: 12%;
  width: 11cqw;
  padding: .8cqw .4cqw;
  border: .18cqw solid #ffedaf;
  border-radius: 1.5cqw;
  background: #fff6dced;
  box-shadow: 0 .5cqw 1.3cqw #574a3733;
  text-align: center;
  font-size: 1.15cqw;
  font-weight: 800;
}
.joy-keepsake svg { width: 4cqw; height: 4cqw; margin: 0 auto .3cqw; }
.joy-layer[data-state="playing"] .joy-card { animation: joy-arrive 500ms cubic-bezier(.2,.8,.3,1.2) both; }
.joy-layer[data-state="playing"] .joy-star { animation: joy-star-pop 700ms cubic-bezier(.2,.8,.3,1.3) both; }
.joy-layer[data-state="playing"] .joy-friends span { animation: joy-hop 900ms 450ms ease-in-out both; }
.joy-layer[data-state="playing"] .joy-friends span:nth-child(2) { animation-delay: 580ms; }
.joy-layer[data-state="playing"] .joy-friends span:nth-child(3) { animation-delay: 720ms; }
.joy-layer[data-state="playing"] .joy-sparks i { animation: joy-spark 1550ms var(--delay) ease-out both; }
.joy-layer[data-state="settled"] > :not(.joy-keepsake) { display: none; }
.joy-layer[data-state="settled"][data-reward="level"] .joy-keepsake { display: block; }
.joy-layer[data-paused="true"] * { animation-play-state: paused !important; }
@keyframes joy-arrive { from { opacity: 0; transform: translate(-50%, -42%) scale(.83); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes joy-star-pop { 0% { transform: scale(.1) rotate(-24deg); } 65% { transform: scale(1.15) rotate(7deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes joy-hop { 0%, 100% { transform: translateY(0) rotate(0); } 32% { transform: translateY(-1.5cqw) rotate(-7deg); } 66% { transform: translateY(-.4cqw) rotate(6deg); } }
@keyframes joy-spark { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 16% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--turn)) scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .joy-layer *, .joy-layer *::before, .joy-layer *::after { animation: none !important; }
  .joy-sparks { display: none; }
}
@media (max-width: 700px) {
  .joy-card { width: 42cqw; }
  .joy-message { font-size: 1.75cqw; max-width: 35cqw; }
  .joy-kicker { font-size: 1.3cqw; }
  .joy-caption { font-size: 1.2cqw; }
  .joy-keepsake { font-size: 1.4cqw; width: 12cqw; left: 1%; }
}