/* easter-eggs — three hidden moments (js/easter-eggs.js). Scoped to .egg-rain (a device layer),
   .lb .row.mine.egg3d / .eggfade and their .egg-back; nothing else is touched. */

/* 1. croissant rain. The avatar is a tap target now: no double-tap zoom, no text selection of the initials, and Safari
   delivers delegated clicks reliably to a cursor:pointer element */
.aside .avatar { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the layer: pointer-less, over the scene (under toasts at z 32, over #fx at 28) */
.egg-rain { position: absolute; inset: 0; z-index: 29; overflow: clip; pointer-events: none; }
.egg-rain i { position: absolute; top: 0; left: 0; margin-left: -12px; font-style: normal; font-size: 24px; line-height: 1; will-change: transform; user-select: none; -webkit-user-select: none; }
/* reduced motion / no Physics2D: a row of croissants fades in along the top and out again (opacity only) */
.egg-rain.still i { top: calc(var(--safe-top) + 118px); opacity: 0; animation: egg-still 2.2s ease both; }
@keyframes egg-still { 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* 2. my leaderboard row, turned over: the row itself rotates (GSAP rotationX, self perspective 700px); its own
   children are the front face (hidden past 90°), .egg-back is pre-turned 180° and sits 1px proud of the row */
.lb .row.mine.egg3d { transform-style: preserve-3d; }
.lb .row.mine.egg3d > :not(.egg-back) { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.egg-back {
  position: absolute; inset: -1px; z-index: 2; border-radius: inherit; border: 1px solid var(--gold);
  background: linear-gradient(rgba(201, 164, 92, 0.18), rgba(201, 164, 92, 0.18)) var(--night);
  display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 14px; pointer-events: none;
  transform: rotateX(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.egg-back p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.egg-stats { font-family: var(--display); font-weight: 300; font-size: 17px; line-height: 20px; letter-spacing: -0.005em; color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.egg-stats b { font-weight: 400; color: var(--gold); }
.egg-stats .sep { color: var(--cream-30); margin: 0 0.3em; }
.egg-flourish { font-family: var(--display); font-style: italic; font-size: 12.5px; line-height: 15px; color: var(--cream-60); }
/* reduced motion / no GSAP: the back face crossfades over the row instead of turning */
.lb .row.mine.eggfade .egg-back { transform: none; opacity: 0; transition: opacity 0.3s ease; backface-visibility: visible; -webkit-backface-visibility: visible; }
.lb .row.mine.eggfade.flipped .egg-back { opacity: 1; }