/* Gaya easter egg tambahan (lihat egg-games.js). Animasi eggRise / eggSettle ada di halaman. */

/* mode mini game: tak ada teks petunjuk, tutup lewat × */
.egg-overlay.play{ cursor: default; }
.egg-overlay.play .egg-hint{ display: none; }
.egg-x{
  position: absolute; top: 18px; right: 18px; z-index: 5; width: 40px; height: 40px; display: none;
  align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer;
  color: #F5E7D8; opacity: .6; transition: opacity .2s;
}
.egg-x:hover{ opacity: 1; }
.egg-x svg{ width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.egg-overlay.play .egg-x{ display: flex; }

.egg-stage button{ font: inherit; -webkit-tap-highlight-color: transparent; }
.eg-cap{
  flex-basis: 100%; text-align: center; margin-top: 4px; color: #F5E7D8;
  font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.1;
  --rot: 0deg; animation: eggRise .7s cubic-bezier(.2,.8,.2,1) both;
}
.eg-photo{
  display: block; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  --rot: 0deg; animation: eggRise .8s cubic-bezier(.2,.8,.2,1) both;
}

/* Gosok */
.eg-scratch{
  position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  --rot: 0deg; animation: eggRise .8s cubic-bezier(.2,.8,.2,1) both;
}
.eg-scratch img{ display: block; width: 100%; height: 100%; max-width: none; }
.eg-scratch canvas{
  position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab;
  transition: opacity .6s ease;
}
.eg-scratch canvas.gone{ opacity: 0; pointer-events: none; }

/* Puzzle */
.eg-puzzle{
  position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  --rot: 0deg; animation: eggRise .8s cubic-bezier(.2,.8,.2,1) both;
}
.eg-tile{
  position: absolute; left: 0; top: 0; border: 0; padding: 0; cursor: pointer; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(10,9,12,.55); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .4s, filter .2s;
}
.eg-tile.sel{ box-shadow: inset 0 0 0 3px #F5E7D8; filter: brightness(1.12); z-index: 1; }
.eg-puzzle.solved .eg-tile{ box-shadow: none; cursor: default; }

/* Kartu kembar */
.eg-memory{ display: grid; gap: 12px; justify-content: center; }
.eg-mcard{
  position: relative; border: 0; padding: 0; background: none; cursor: pointer; perspective: 700px;
  --rot: 0deg; animation: eggRise .6s cubic-bezier(.2,.8,.2,1) both;
}
.eg-mback, .eg-mface{
  position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.eg-mback{
  background: #F5E7D8 radial-gradient(circle at 50% 50%, transparent 17%, rgba(28,28,28,.12) 18%, rgba(28,28,28,.12) 20%, transparent 21%);
}
.eg-mface{ transform: rotateY(180deg); background: #141316; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eg-mface img{ width: 100%; height: 100%; object-fit: contain; }
.eg-mcard.flip .eg-mback{ transform: rotateY(-180deg); }
.eg-mcard.flip .eg-mface{ transform: rotateY(0); }
.eg-mcard.ok .eg-mface{ box-shadow: 0 0 0 2px #F5E7D8, 0 10px 24px rgba(0,0,0,.45); }

/* Tangkap */
.eg-field{ position: fixed; inset: 0; overflow: hidden; transition: opacity .4s; }
.eg-field.done{ opacity: 0; pointer-events: none; }
.eg-heart{
  position: absolute; top: -60px; width: 46px; height: 46px; padding: 8px; border: 0; background: none; cursor: pointer;
  color: #f2a7b5; animation: egFall linear forwards; touch-action: manipulation;
}
.eg-heart svg, .eg-count svg, .eg-seal svg, .eg-up svg{ width: 100%; height: 100%; fill: currentColor; display: block; }
.eg-heart.got{ animation-play-state: paused; pointer-events: none; }
.eg-heart.got svg{ animation: egPop .35s ease-out forwards; }
@keyframes egFall{
  0%{ transform: translate(0, 0) rotate(-8deg); }
  50%{ transform: translate(var(--sw), 55vh) rotate(8deg); }
  100%{ transform: translate(0, calc(100vh + 80px)) rotate(-8deg); }
}
@keyframes egPop{ to{ transform: scale(1.8); opacity: 0; } }
.eg-count{ position: fixed; top: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.eg-count i{ width: 18px; height: 18px; color: rgba(245,231,216,.22); transition: color .3s, transform .3s; }
.eg-count i.on{ color: #f2a7b5; transform: scale(1.15); }

/* Surat */
.eg-env{
  position: relative; width: min(78vw, 360px); aspect-ratio: 3 / 2; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 900px; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5));
  --rot: 0deg; animation: eggRise .8s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .42s ease-in, opacity .42s ease-in;
}
.eg-env > i{ position: absolute; display: block; }
.eg-env-back{ inset: 0; z-index: 0; background: #e3cdb4; border-radius: 6px; }
.eg-env-paper{
  left: 7%; right: 7%; top: 8%; height: 80%; z-index: 1; background: #fffaf3; border-radius: 3px;
  transition: transform .7s cubic-bezier(.2,.8,.2,1) .45s;
}
.eg-env-front{ inset: 0; z-index: 2; background: #F5E7D8; border-radius: 6px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.eg-env-flap{
  left: 0; right: 0; top: 0; height: 58%; z-index: 3; background: #ecdcc8; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform .5s ease, z-index 0s .25s;
}
.eg-seal{
  left: 50%; top: 58%; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 12px; border-radius: 50%;
  background: #b5485a; color: #F5E7D8; box-shadow: 0 3px 8px rgba(0,0,0,.35); transition: opacity .3s, transform .3s;
}
.eg-env.open .eg-seal{ opacity: 0; transform: scale(.6); }
.eg-env.open .eg-env-flap{ transform: rotateX(180deg); z-index: 0; }
.eg-env.open .eg-env-paper{ transform: translateY(-45%); }
.eg-env.gone{ transform: translateY(40px) scale(.94); opacity: 0; }
.eg-letter{
  background: #fffaf3; padding: 14px 14px 16px; border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  --rot: -1.5deg; animation: eggRise .8s cubic-bezier(.2,.8,.2,1) both;
}
.eg-letter .eg-photo{ border-radius: 2px; box-shadow: none; animation: none; }
.eg-letter-cap{
  margin-top: 12px; text-align: center; color: #2a2a2a; font-family: "Caveat", cursive; font-weight: 700;
  font-size: 1.6rem; line-height: 1.15; width: 0; min-width: 100%; overflow-wrap: anywhere;
}

/* Hati naik (Surat & Hujan hati) */
.eg-up{ position: absolute; bottom: -40px; animation: egUp ease-out forwards; opacity: 0; }
@keyframes egUp{
  0%{ transform: translate(0, 0); opacity: 0; }
  15%{ opacity: .9; }
  50%{ transform: translate(var(--sw), -55vh); }
  100%{ transform: translate(0, -110vh); opacity: 0; }
}

/* Tumpukan kartu */
.eg-stack{ position: relative; cursor: pointer; }
.eg-scard{
  position: absolute; left: 50%; top: 50%; background: #fff; padding: 10px; border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5); transform: translate(-50%, -50%) rotate(var(--rot));
  animation: egDeal .7s cubic-bezier(.2,.8,.2,1) both;
}
.eg-scard img{ display: block; width: auto; height: auto; }
.eg-scard.gone{ animation: egFly .55s ease-in forwards; pointer-events: none; }
@keyframes egDeal{ from{ opacity: 0; transform: translate(-50%, -50%) translateY(-30px) rotate(calc(var(--rot) - 8deg)) scale(1.04); } }
@keyframes egFly{ to{ opacity: 0; transform: translate(calc(-50% + var(--out) * 70vw), -60%) rotate(calc(var(--out) * 25deg)); } }

@media (prefers-reduced-motion: reduce){
  .eg-cap, .eg-photo, .eg-scratch, .eg-puzzle, .eg-mcard, .eg-env, .eg-letter, .eg-scard, .eg-up{ animation-duration: .01ms !important; }
}