/* ============================================================
   MORLUP — easter egg görünümleri (bkz. eggs.js)
   ============================================================ */

/* ---------- Bildirim (toast) ---------- */
.egg-toast {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3500;
  background: var(--bg-soft);
  border: 1px solid var(--violet);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  animation: egg-toast-in 0.35s cubic-bezier(.34,1.56,.64,1);
  transition: opacity 0.4s, transform 0.4s;
  white-space: nowrap;
}
.egg-toast.out { opacity: 0; transform: translate(-50%, -12px); }
@keyframes egg-toast-in {
  from { opacity: 0; transform: translate(-50%, -16px) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ---------- Pencere (ödül + bulmaca) ---------- */
.egg-modal {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: rgba(6, 4, 14, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: egg-fade 0.2s ease-out;
  transition: opacity 0.25s;
}
.egg-modal.out { opacity: 0; }
@keyframes egg-fade { from { opacity: 0; } to { opacity: 1; } }
.egg-card {
  position: relative;
  width: min(440px, 100%);
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.28), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 28px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: egg-pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes egg-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.egg-card h3 { font-size: 24px; margin: 6px 0 8px; }
.egg-card p { color: var(--ink-dim); font-size: 15px; margin: 0 0 18px; }
.egg-wolf { font-size: 44px; animation: egg-bob 2.4s ease-in-out infinite; display: inline-block; }
@keyframes egg-bob {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(5px, -6px) rotate(6deg); }
  75% { transform: translate(-5px, -6px) rotate(-6deg); }
}
.egg-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.egg-x:hover { border-color: var(--violet); color: var(--ink); }
.egg-code { justify-content: center; margin: 0 0 22px; }
.egg-code span { width: 44px; height: 44px; font-size: 20px; }
.egg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Bulmaca */
.egg-answer, .egg-pool { justify-content: center; gap: 8px; margin: 0 0 14px; }
.egg-answer .slot {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #17102e;
}
.egg-answer .slot.filled { border: none; animation: tile-pop 0.3s cubic-bezier(.34,1.56,.64,1); }
.egg-pool button {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: none;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: #17102e;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), opacity 0.2s;
}
.egg-pool button:hover:not(:disabled) { transform: translateY(-4px) rotate(-4deg); }
.egg-pool button:disabled { opacity: 0.15; cursor: default; }
.egg-msg { min-height: 24px; margin: 4px 0 0 !important; font-family: "Fredoka", sans-serif; color: var(--ink) !important; }

.egg-shake { animation: egg-shake 0.45s ease; }
@keyframes egg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.egg-bravo span, .egg-bravo .slot { animation: egg-jump 0.5s cubic-bezier(.34,1.56,.64,1) both; }
.egg-bravo > :nth-child(2) { animation-delay: 0.05s; }
.egg-bravo > :nth-child(3) { animation-delay: 0.1s; }
.egg-bravo > :nth-child(4) { animation-delay: 0.15s; }
.egg-bravo > :nth-child(5) { animation-delay: 0.2s; }
.egg-bravo > :nth-child(6) { animation-delay: 0.25s; }
.egg-bravo > :nth-child(n+7) { animation-delay: 0.3s; }
@keyframes egg-jump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-16px) rotate(-6deg); }
}

/* ---------- 1) Harf yağmuru ---------- */
.egg-rain, .egg-stars {
  position: fixed;
  inset: 0;
  z-index: 3200;
  pointer-events: none;
  overflow: hidden;
}
.egg-rain span {
  position: absolute;
  top: -60px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #17102e;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  animation: egg-fall linear forwards;
}
@keyframes egg-fall {
  to { transform: translateY(calc(100vh + 120px)) rotate(var(--r)); }
}
.egg-row {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3300;
  margin: 0;
  pointer-events: none;
}
.egg-row span {
  width: 58px;
  height: 58px;
  font-size: 26px;
  border-radius: 13px;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.35), 0 6px 0 rgba(0, 0, 0, 0.2);
}
.egg-row.pop span { animation: egg-burst 0.45s ease-in forwards; }
@keyframes egg-burst {
  40% { transform: scale(1.25); filter: brightness(1.6); }
  100% { transform: scale(0); opacity: 0; }
}

/* ---------- 2) Sürüklenen kutucuklar ---------- */
.game-hero .tile-row span { cursor: grab; touch-action: none; }
.game-hero .tile-row span.egg-dragging {
  cursor: grabbing;
  transform: scale(1.2) rotate(-6deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  z-index: 2;
  position: relative;
}

/* ---------- 3) Konami: yazılar kutucuk olur ---------- */
.egg-tilechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95em;
  padding: 0 0.06em;
  margin: 0.04em 0.03em;
  border-radius: 0.18em;
  color: #17102e !important;
  -webkit-text-fill-color: #17102e;
  animation: tile-pop 0.4s cubic-bezier(.34,1.56,.64,1) backwards;
}

/* ---------- 4) Ay + koşan kurt ---------- */
.egg-moon {
  position: relative; flex: none;
  width: 22px; height: 22px; margin-left: 4px;
  padding: 0; border: none; border-radius: 50%; cursor: pointer;
  /* Gerçek hilal: arka plana bağlı değil, her temada düzgün görünür */
  background: radial-gradient(circle at 35% 40%, #fff6d0, var(--moon) 70%);
  -webkit-mask: radial-gradient(circle at 74% 30%, transparent 44%, #000 46%);
          mask: radial-gradient(circle at 74% 30%, transparent 44%, #000 46%);
  filter: drop-shadow(0 0 var(--glow, 3px) var(--moon));
  opacity: 0.7;
  transition: opacity 0.2s, filter 0.25s, transform 0.25s;
}
.egg-moon:hover { opacity: 1; transform: rotate(-14deg) scale(1.15); }
.egg-moon.bump { animation: egg-moon-bump 0.3s cubic-bezier(.34,1.56,.64,1); }
@keyframes egg-moon-bump { 50% { transform: scale(1.4); } }
.egg-moon.float { position: fixed; left: 16px; bottom: 16px; z-index: 1500; margin: 0; }

.egg-runner {
  position: fixed;
  left: 0;
  bottom: 14px;
  z-index: 3400;
  pointer-events: none;
}
.egg-runner.sprite canvas { width: 100%; height: 100%; display: block; }
/* Sprite yoksa logo zıplayarak koşar */
.egg-runner img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: egg-hop 0.32s ease-in-out infinite alternate;
}
@keyframes egg-hop {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-22px) rotate(4deg); }
}
.egg-paw {
  position: fixed;
  z-index: 3300;
  font-size: 15px;
  pointer-events: none;
  animation: paw-fade-egg 1.4s ease-out forwards;
}
@keyframes paw-fade-egg { from { opacity: 0.8; } to { opacity: 0; transform: scale(0.6); } }

/* ---------- 5) Uyuyan kurt ---------- */
.hero-art.egg-asleep img {
  animation: egg-snore 3s ease-in-out infinite;
  filter: brightness(0.75) saturate(0.8);
  transition: filter 0.6s;
}
@keyframes egg-snore {
  0%, 100% { transform: rotate(-6deg) scale(0.98); }
  50% { transform: rotate(-6deg) scale(1.02); }
}
.hero-art.egg-wake img { animation: egg-wake 0.55s cubic-bezier(.34,1.56,.64,1); }
@keyframes egg-wake {
  30% { transform: translateY(-26px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.egg-zzz {
  position: absolute;
  top: 18%;
  right: 16%;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--moon);
  pointer-events: none;
  animation: egg-zzz 2.6s ease-out forwards;
}
@keyframes egg-zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(40px + var(--x)), -90px) scale(1.3) rotate(12deg); }
}

/* ---------- 6) Baş dönmesi ---------- */
.page.egg-spin { animation: egg-spin 1.2s cubic-bezier(.45,.05,.35,1); transform-origin: 50% 40vh; }
@keyframes egg-spin {
  0% { transform: rotate(0); }
  70% { transform: rotate(370deg) scale(0.92); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---------- 7) Yıldız yağmuru ---------- */
.egg-stars span {
  position: absolute;
  top: -30px;
  color: var(--moon);
  text-shadow: 0 0 8px var(--moon);
  animation: egg-star-fall ease-in forwards;
}
@keyframes egg-star-fall {
  to { transform: translateY(calc(100vh + 60px)) rotate(200deg); opacity: 0.2; }
}

@media (max-width: 640px) {
  .egg-toast { top: 80px; font-size: 14px; white-space: normal; text-align: center; max-width: calc(100vw - 32px); }
  .egg-row span { width: 44px; height: 44px; font-size: 20px; }
}