.surprise[hidden], .surprise [hidden] { display: none !important; }
.surprise-corner { position: fixed; z-index: 20; right: 0; bottom: 0; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.surprise-corner { color: #655f55; }
.surprise-corner.is-revealed { cursor: pointer; }
.surprise-corner.is-revealed::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.surprise-corner.is-revealed::after { width: 8px; height: 8px; background: currentColor; }
.surprise-dialog { position: fixed; inset: 0; margin: auto; width: min(260px, calc(100vw - 48px)); padding: 0; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #292720; box-shadow: 0 8px 30px #2927201a; overflow: visible; }
.surprise-dialog::backdrop { background: transparent; }
.surprise-dialog form { margin: 0; }
.surprise-prompt { position: absolute; left: 0; bottom: calc(100% + 12px); width: 100%; text-align: center; color: #655f55; font: 400 14px/1.5 Georgia, 'Times New Roman', serif; }
.surprise-dialog input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 12px; background: #fff; color: #292720; font: 400 16px/1.5 Georgia, 'Times New Roman', serif; }
.surprise-dialog input:focus-visible { outline: 2px solid #655f55; outline-offset: 3px; }
.surprise-stage { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.surprise-actor { position: absolute; margin: 0; bottom: max(64px, 8vh); }
.surprise-right { right: 0; width: clamp(127.5px, 24vw, 300px); aspect-ratio: 1; }
.surprise-right img { position: absolute; left: 17%; top: 12%; width: 66%; height: auto; transform-origin: center; }
.surprise-left { left: 0; width: clamp(112.5px, 18.75vw, 240px); }
.surprise-left img { display: block; width: 100%; height: auto; }
.surprise-bubble { position: absolute; margin: 0; padding: 12px 16px; border: 1px solid #292720; border-radius: 18px; background: #fff; color: #292720; font: 400 16px/1.4 Georgia, 'Times New Roman', serif; white-space: nowrap; }
.surprise-bubble::after { content: ''; position: absolute; width: 12px; height: 12px; background: #fff; border-right: 1px solid #292720; border-bottom: 1px solid #292720; transform: rotate(45deg); bottom: -7px; }
.surprise-left .surprise-bubble { left: 75%; bottom: 40%; }
.surprise-left .surprise-bubble::after { left: -7px; top: calc(50% - 6px); bottom: auto; transform: rotate(135deg); }
.surprise-right .surprise-bubble { right: 65%; top: 45%; }
.surprise-right .surprise-bubble::after { right: -7px; top: calc(50% - 6px); bottom: auto; transform: rotate(-45deg); }
@media (max-width: 650px) {
  .surprise-right { bottom: 42%; width: 39.75vw; }
  .surprise-left { bottom: 64px; width: 34.5vw; }
  .surprise-bubble { padding: 8px 10px; font-size: 14px; }
}