.surprise-button { position:relative; overflow:visible; isolation:isolate; }
.surprise-lamp { position:relative; display:block; flex:none; width:62px; height:29px; }
.surprise-lamp > img { display:block; position:relative; z-index:2; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.surprise-genie { position:absolute; z-index:1; width:108px; height:162px; left:-50px; bottom:73%; opacity:0; transform:translateY(10px) scale(.96); transform-origin:50% 100%; pointer-events:none; transition:opacity 180ms ease,transform 240ms var(--ease-out); }
.surprise-genie img { display:block; width:100%; height:100%; object-fit:contain; }
@media (hover:hover) and (pointer:fine) {
  .surprise-button[data-genie-open="true"] .surprise-genie { opacity:1; transform:none; }
}
.surprise-button:focus-visible[data-genie-open="true"] .surprise-genie { opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion:reduce) {
  .surprise-genie { transform:none; transition:opacity 120ms ease; }
}
@media (max-width:600px) {
  .surprise-lamp { width:50px; height:24px; }
  .surprise-genie { width:90px; height:135px; left:-42px; }
}