.search-easter-egg {
  z-index: 40;
  padding: 22px;
  background: #05080de8;
}

.search-easter-egg-card {
  position: relative;
  width: min(920px, 100%);
  max-height: 92dvh;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--interface-accent, #5ba4f5) 50%, #fff);
  border-radius: 20px;
  background: #0c1117;
  box-shadow: 0 30px 100px #000d;
}

.search-easter-egg-card img {
  display: block;
  width: 100%;
  max-height: calc(92dvh - 20px);
  object-fit: contain;
  border-radius: 12px;
}

.search-easter-egg-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #090d12e8;
  color: #fff;
  font: 400 42px/1 system-ui, sans-serif;
  box-shadow: 0 8px 28px #000b;
  cursor: pointer;
}

.search-easter-egg-close:hover,
.search-easter-egg-close:focus-visible {
  border-color: var(--interface-accent, #5ba4f5);
  color: var(--interface-accent-light, #9dccff);
  outline: 3px solid var(--interface-accent-soft, #5ba4f533);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .search-easter-egg {
    padding: 0;
  }
  .search-easter-egg-card {
    width: 100%;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .search-easter-egg-card img {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
  }
  .search-easter-egg-close {
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
  }
}