/* Subtle persistent Easter Egg progress; independent of SPA page rendering. */
#tjb-egg-counter {
  position:fixed; left:16px; bottom:16px; z-index:2147483000; visibility:visible; opacity:1; display:block;
  padding:9px 12px; border:1px solid rgba(255,255,255,.19);
  border-radius:8px; background:rgba(9,9,11,.88); color:#f5f5f5;
  font:700 11px/1.2 system-ui,sans-serif; letter-spacing:.09em;
  pointer-events:auto; cursor:pointer; user-select:none; backdrop-filter:blur(8px);
}
#tjb-egg-counter.tjb-egg-counter-new { animation:tjb-egg-counter-flash .65s ease-out; }
@keyframes tjb-egg-counter-flash { 0%{border-color:#e50914;box-shadow:0 0 16px rgba(229,9,20,.6)}100%{border-color:rgba(255,255,255,.19);box-shadow:none} }
@media(max-width:480px){#tjb-egg-counter{left:10px;bottom:10px;padding:7px 9px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#tjb-egg-counter.tjb-egg-counter-new{animation:none}}

/* Reveal collected names directly above the existing badge, matching its width and style. */
#tjb-egg-list {
  position:absolute; left:-1px; bottom:calc(100% + 1px);
  box-sizing:border-box; width:calc(100% + 2px);
  padding:6px 0; border:1px solid rgba(255,255,255,.19);
  border-radius:8px; background:rgba(9,9,11,.96); color:#f5f5f5;
  font:inherit; letter-spacing:inherit; backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  pointer-events:none;
}
#tjb-egg-counter:hover #tjb-egg-list,
#tjb-egg-counter:focus-visible #tjb-egg-list,
#tjb-egg-counter.tjb-egg-list-open #tjb-egg-list {
  opacity:1; visibility:visible; transform:translateY(0);
}
.tjb-egg-list-row { padding:6px 9px; white-space:nowrap; font-size:9px; letter-spacing:.025em; color:#85858d; }
.tjb-egg-list-row.is-found { color:#f5f5f5; }
@media(prefers-reduced-motion:reduce){#tjb-egg-list{transition:none;transform:none}}

/* Temporary developer test button beside the original progress badge. */
#tjb-egg-reset {
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.19); border-radius:8px;
  padding:9px 10px; background:rgba(9,9,11,.88); color:#f5f5f5;
  font:700 10px/1.2 system-ui,sans-serif; letter-spacing:.09em;
  white-space:nowrap; cursor:pointer; backdrop-filter:blur(8px);
}
#tjb-egg-reset:hover, #tjb-egg-reset:focus-visible { border-color:#e50914; color:#fff; }
@media(max-width:480px){#tjb-egg-reset{padding:7px 8px;font-size:9px}}

#tjb-egg-reset { width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; }
@media(max-width:480px){#tjb-egg-reset{width:29px;height:29px;padding:0;font-size:20px}}

/* Fifth achievement is a permanently golden, gently dancing mystery. */
#tjb-egg-list .tjb-egg-list-row.tjb-egg-gold {
  color:#f4c64e; text-shadow:0 0 5px rgba(255,199,45,.9),0 0 13px rgba(255,177,0,.55);
  animation:tjb-gold-dance 2.4s ease-in-out infinite;
}
@keyframes tjb-gold-dance {
  0%,100%{transform:translateY(0) rotate(0deg);filter:brightness(1)}
  25%{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.3)}
  50%{transform:translateY(1px) rotate(1deg);filter:brightness(1.05)}
  75%{transform:translateY(-1px) rotate(-.5deg);filter:brightness(1.4)}
}
@media(prefers-reduced-motion:reduce){#tjb-egg-list .tjb-egg-list-row.tjb-egg-gold{animation:none}}
