/* ================= Gift Wrap ================= */
.game-gifts { --t: 3.2vmin; }

/* Wrapping papers: --c is the paper color, white accents on top. */
.gifts-paper { background-color: var(--c); }
.gp-stripes { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .85) 0 calc(var(--t) * .45), transparent calc(var(--t) * .45) var(--t)); }
.gp-dots { background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 22%, transparent 25%); background-size: var(--t) var(--t); }
.gp-checks {
  background-image: conic-gradient(rgba(255, 255, 255, .8) 25%, transparent 0 50%, rgba(255, 255, 255, .8) 0 75%, transparent 0);
  background-size: calc(var(--t) * 1.1) calc(var(--t) * 1.1);
}
.gp-zigzag {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .85) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, .85) 25%, transparent 25%);
  background-size: var(--t) var(--t);
  background-position: calc(var(--t) / -2) 0, calc(var(--t) / -2) 0;
}

.gifts-row { align-items: flex-end; gap: 5vmin; margin-top: 8vmin; }
.gifts-box {
  position: relative; width: min(24vmin, 27vw); height: min(20vmin, 22vw);
  animation: popIn .6s var(--pop) backwards; animation-delay: calc(var(--i) * 120ms);
}
.gifts-body {
  position: absolute; inset: 0; border-radius: 1.2vmin 1.2vmin 2.4vmin 2.4vmin; overflow: hidden;
  box-shadow: inset 0 -1.4vmin 0 rgba(0, 0, 0, .15), var(--shadow);
}
.gifts-rim { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: rgba(0, 0, 0, .28); }
.gifts-inside { position: absolute; left: 12%; right: 12%; top: -30%; bottom: 30%; display: grid; place-items: center; }
.gifts-inside .piece { width: 80%; height: auto; aspect-ratio: 1; }

/* Lid floats open above the box, tilted, bobbing */
.gifts-lid {
  position: absolute; left: -6%; right: -6%; height: 26%; top: -48%; z-index: 3; border-radius: 1.2vmin;
  box-shadow: inset 0 -.8vmin 0 rgba(0, 0, 0, .15), 0 1vmin 1.4vmin rgba(0, 0, 0, .12);
  transform-origin: 20% 100%;
  animation: giftsLidFloat 2.2s ease-in-out infinite;
}
@keyframes giftsLidFloat {
  0%, 100% { transform: translate(-10%, -10%) rotate(-18deg); }
  50% { transform: translate(-12%, -30%) rotate(-24deg); }
}
.gifts-box.closed .gifts-lid { animation: giftsLidDrop .45s cubic-bezier(.5, 0, .6, 1.6) forwards; }
@keyframes giftsLidDrop {
  0% { transform: translate(-10%, -20%) rotate(-20deg); }
  100% { transform: translate(0, 175%) rotate(0); }
}
.gifts-box.closed .gifts-body { animation: giftsSquash .4s var(--pop) .35s; }
@keyframes giftsSquash { 0% { transform: scale(1); } 40% { transform: scale(1.1, .86); } 100% { transform: scale(1); } }

/* Ribbons + bow */
.gifts-ribbon-v, .gifts-ribbon-h { position: absolute; background: #ffd23d; box-shadow: 0 0 0 .3vmin rgba(0, 0, 0, .08); z-index: 2; }
.gifts-ribbon-v { left: 42%; width: 16%; top: 0; bottom: 0; transform: scaleY(0); transform-origin: top; }
.gifts-ribbon-h { top: 42%; height: 16%; left: 0; right: 0; transform: scaleX(0); transform-origin: left; }
.gifts-box.bowed .gifts-ribbon-v { animation: giftsRibbonV .3s ease-out forwards; }
.gifts-box.bowed .gifts-ribbon-h { animation: giftsRibbonH .3s ease-out .12s forwards; }
@keyframes giftsRibbonV { to { transform: scaleY(1); } }
@keyframes giftsRibbonH { to { transform: scaleX(1); } }
.gifts-bow {
  position: absolute; left: 50%; top: -3%; z-index: 4; font-size: 11vmin; line-height: 1;
  transform: translate(-50%, -60%) scale(0); pointer-events: none;
}
.gifts-box.bowed .gifts-bow { animation: giftsBow .6s var(--pop) .25s forwards, giftsBowIdle 1.6s ease-in-out .9s infinite; }
@keyframes giftsBow { 0% { transform: translate(-50%, -60%) scale(0) rotate(-90deg); } 100% { transform: translate(-50%, -60%) scale(1) rotate(0); } }
@keyframes giftsBowIdle { 0%, 100% { transform: translate(-50%, -60%) rotate(-6deg); } 50% { transform: translate(-50%, -66%) rotate(6deg) scale(1.06); } }

.piece.gifts-sink { animation: giftsSink .4s ease-in forwards; }
@keyframes giftsSink { to { transform: translateY(60%) scale(.6); opacity: 0; } }

/* Finale: shake, lid pops off, toy springs out */
.gifts-box.gifts-shake { animation: giftsShake .12s ease-in-out 5 alternate; }
@keyframes giftsShake { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.gifts-box.popped .gifts-lid { animation: giftsLidPop .7s ease-out forwards; }
@keyframes giftsLidPop { 0% { transform: translate(0, 175%); } 100% { transform: translate(-40%, -160%) rotate(-50deg); opacity: 0; } }
.gifts-box.popped .gifts-bow { animation: giftsBowPop .6s ease-out forwards; }
@keyframes giftsBowPop { to { transform: translate(40%, -300%) rotate(120deg); opacity: 0; } }
.gifts-box.popped .gifts-ribbon-v, .gifts-box.popped .gifts-ribbon-h { opacity: 0; transition: opacity .2s; }
.gifts-toy { position: absolute; left: 50%; top: 0; width: 16vmin; height: 16vmin; z-index: 5; animation: giftsToy .8s var(--pop) forwards; }
.gifts-toy .emoji { font-size: 13vmin; }
@keyframes giftsToy {
  0% { transform: translate(-50%, 30%) scale(.2); }
  60% { transform: translate(-50%, -95%) scale(1.15, .9); }
  100% { transform: translate(-50%, -70%) scale(1); }
}

/* Gifts in the tray: wrapped square with a toy tag */
.gifts-gift { width: 18vmin; height: 18vmin; }
.gifts-wrap {
  width: 100%; height: 100%; border-radius: 2.4vmin; display: grid; place-items: center; position: relative;
  box-shadow: inset 0 -1vmin 0 rgba(0, 0, 0, .15);
}
.gifts-tag {
  width: 58%; height: 58%; border-radius: 50%; background: #fff; box-shadow: 0 .5vmin 0 rgba(0, 0, 0, .12);
}
.gifts-tag .emoji { font-size: 7.5vmin; }