/* ═══════════════════════════════════════════════════════════════
   effects.css — Easter egg effects & special animations
   - Screen shake, Critical hit flash/text
   - Disco mode, Emoji rain, Big message
   - Power-up indicator, Party mode (Konami code)
   - Boss overlay, Footer decoration
   ═══════════════════════════════════════════════════════════════ */

  /* ─── Easter Egg Effects ─── */

  /* Screen shake */
  @keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(4px, -2px); }
    30% { transform: translate(-2px, 4px); }
    40% { transform: translate(2px, -4px); }
    50% { transform: translate(-4px, 0); }
    60% { transform: translate(4px, 2px); }
    70% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 4px); }
    90% { transform: translate(-4px, -2px); }
  }
  body.shake { animation: screenShake 0.4s ease-out; }

  /* Critical hit flash */
  .crit-flash {
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(circle, rgba(255,225,86,0.4) 0%, transparent 70%);
    opacity: 0; animation: critFlash 0.6s ease-out forwards;
  }
  @keyframes critFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Critical hit text */
  .crit-text {
    position: fixed; top: 50%; left: 50%; z-index: 9998;
    transform: translate(-50%, -50%) scale(0.3);
    font-family: 'Bungee Shade', cursive;
    font-size: 48px;
    color: var(--yellow);
    text-shadow: 0 0 40px var(--yellow-glow), 0 0 80px rgba(255,225,86,0.3);
    pointer-events: none;
    animation: critTextPop 1.2s cubic-bezier(.22,.68,0,.98) forwards;
    white-space: nowrap;
  }
  @keyframes critTextPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-10deg); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(3deg); }
    40% { transform: translate(-50%, -50%) scale(1) rotate(0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
  }

  /* Disco mode */
  .disco-overlay {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    animation: discoRainbow 0.5s linear infinite;
    opacity: 0.08;
    mix-blend-mode: screen;
  }
  @keyframes discoRainbow {
    0% { background: var(--pink); }
    16% { background: var(--orange); }
    33% { background: var(--yellow); }
    50% { background: var(--lime); }
    66% { background: var(--cyan); }
    83% { background: var(--purple); }
    100% { background: var(--pink); }
  }

  /* Emoji rain */
  .emoji-rain {
    position: fixed; top: -60px; z-index: 9996; pointer-events: none;
    font-size: 32px;
    animation: emojiDrop linear forwards;
  }
  @keyframes emojiDrop {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
  }

  /* Big center message (for milestones) */
  .big-msg {
    position: fixed; top: 50%; left: 50%; z-index: 9998;
    transform: translate(-50%, -50%) scale(0.3);
    font-size: 20px; font-weight: 900;
    color: var(--text);
    text-align: center;
    text-shadow: 0 0 30px var(--purple-glow);
    pointer-events: none;
    animation: bigMsgPop 2.5s cubic-bezier(.22,.68,0,.98) forwards;
    background: var(--bg-card-solid);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 32px;
    max-width: 340px;
    line-height: 1.6;
    backdrop-filter: blur(16px);
  }
  .big-msg .bm-emoji { font-size: 48px; display: block; margin-bottom: 8px; }
  .big-msg .bm-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: block; }
  @keyframes bigMsgPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    25% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
  }

  /* Power-up indicator */
  .powerup-active {
    position: fixed; bottom: 96px; left: 24px; z-index: 998;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: var(--bg-deep);
    font-size: 11px; font-weight: 900;
    padding: 8px 16px; border-radius: 100px;
    box-shadow: 0 0 20px var(--yellow-glow);
    animation: powerupPulse 1s ease-in-out infinite alternate;
    pointer-events: none;
    font-family: 'Heebo', sans-serif;
  }
  @keyframes powerupPulse {
    from { box-shadow: 0 0 15px var(--yellow-glow); transform: scale(1); }
    to { box-shadow: 0 0 30px var(--yellow-glow); transform: scale(1.05); }
  }

  /* Party mode (konami code) */
  body.party-mode .bg-orb { animation-duration: 3s !important; opacity: 0.5 !important; }
  body.party-mode .floating-note { animation-duration: 5s !important; }
  body.party-mode .logo { animation: partyLogo 0.5s ease-in-out infinite alternate; }
  @keyframes partyLogo {
    from { filter: drop-shadow(0 0 30px var(--pink-glow)) hue-rotate(0deg); }
    to { filter: drop-shadow(0 0 30px var(--cyan-glow)) hue-rotate(90deg); }
  }

  /* Boss defeated overlay */
  .boss-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(13,2,33,0.92); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    animation: bossIn 0.4s cubic-bezier(.22,.68,0,.98);
    text-align: center; padding: 20px;
    cursor: pointer;
  }
  .boss-overlay .boss-emoji { font-size: 64px; margin-bottom: 12px; }
  .boss-overlay .boss-title {
    font-family: 'Bungee Shade', cursive;
    font-size: 28px; margin-bottom: 8px;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px var(--yellow-glow));
  }
  .boss-overlay .boss-sub {
    font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 6px;
  }
  .boss-overlay .boss-flavor {
    font-size: 13px; color: var(--text-dim); max-width: 300px; line-height: 1.6;
    margin-bottom: 20px;
  }
  .boss-overlay .boss-dismiss {
    font-size: 11px; color: var(--text-dim); opacity: 0.5;
    animation: bossDismissBlink 1.5s ease-in-out infinite;
  }
  @keyframes bossIn {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes bossDismissBlink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
  }

  /* ─── Footer ─── */
  .footer-deco {
    text-align: center; padding: 16px; font-size: 18px;
    color: var(--text-dim); opacity: 0.4;
    letter-spacing: 6px;
  }