/* Quintessence · easter eggs (assets/js/oeufs.js), sur le site classique et l'écran de jeu */
#oeuf-chat { position: fixed; left: 16px; bottom: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 4px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
#oeuf-chat div { font: 600 14px/1.35 "Trebuchet MS", system-ui, sans-serif; color: #40ff40; background: rgba(0, 0, 0, .78); padding: 5px 10px; border-radius: 3px; text-shadow: 0 1px 0 #000; animation: oeuf-in .25s ease-out; transition: opacity .6s; }
#oeuf-chat div.sys { color: #ffd100; }
#oeuf-chat div.out { opacity: 0; }
@keyframes oeuf-in { from { opacity: 0; transform: translateY(8px); } }

.gnome-bulle { position: fixed; z-index: 9000; max-width: 220px; padding: 6px 10px; border-radius: 10px; background: #fff8e6; color: #2a1a10; font: italic 700 13px/1.3 Georgia, serif; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); pointer-events: none; animation: oeuf-in .2s ease-out; }
.gnome-bulle::after { content: ""; position: absolute; left: 22px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff8e6; }

.oeuf-murloc { position: fixed; bottom: 6px; left: -140px; z-index: 9000; width: 110px; pointer-events: none; animation: oeuf-murloc 6s linear forwards; }
.oeuf-murloc img { display: block; width: 100%; animation: oeuf-saut .3s ease-in-out infinite alternate; }
.oeuf-murloc span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 15px Georgia, serif; color: #ffd100; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
@keyframes oeuf-murloc { to { left: calc(100vw + 40px); } }
@keyframes oeuf-saut { to { transform: translateY(-10px); } }

.oeuf-leeroy { position: fixed; top: 40%; left: 100%; z-index: 9000; white-space: nowrap; font: 900 clamp(28px, 6vw, 72px) Georgia, serif; color: #ff7c0a; text-shadow: 0 3px 0 #000, 0 0 18px #000; pointer-events: none; animation: oeuf-leeroy 3s ease-in forwards; }
@keyframes oeuf-leeroy { to { left: -120%; } }

.oeuf-tourne { animation: oeuf-tourne 1s ease-in-out; }
@keyframes oeuf-tourne { to { transform: rotateY(720deg); } }

html.ivre #content, html.ivre #game { animation: oeuf-ivre 1.3s ease-in-out 3; }
@keyframes oeuf-ivre { 0%, 100% { transform: none; filter: none; } 25% { transform: rotate(1.2deg) skewX(2deg); filter: blur(1px); } 75% { transform: rotate(-1.2deg) skewX(-2deg); filter: blur(.6px); } }

@media (prefers-reduced-motion: reduce) {
  .oeuf-murloc, .oeuf-murloc img, .oeuf-leeroy, .oeuf-tourne, html.ivre #content, html.ivre #game { animation-duration: .01s; }
  .oeuf-murloc { left: 16px; animation: none; }
  .oeuf-leeroy { left: 16px; animation: none; }
}