.surprise-composer { position: relative; }
.surprise-round .login-heading { position: relative; }
.surprise-round .round-preview-nav { z-index: 8; }
.surprise-round .surprise-ticket { position: absolute; display: block; width: 38px; height: 27px; color: #e72c20; transform: translate(-50%, -50%); }
.surprise-ticket svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1; }
.surprise-round .surprise-nudge { animation: surprise-nudge .28s ease-out; }
@keyframes surprise-nudge { 25%,75% { translate: -3px 0; } 50% { translate: 3px 0; } }

/* The top sheet, including its heading, leaves as one physical card. */
.surprise-round[data-interaction='swipe-page'] .surprise-composer { isolation: isolate; padding: 0; }
.surprise-swipe-stack { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.surprise-swipe-sheet, .surprise-swipe-back { display: flex; flex-direction: column; justify-content: center; position: absolute; inset: 0; padding: 28px 22px; border-radius: inherit; }
.surprise-swipe-sheet { z-index: 2; background: #fff; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; transform: translateX(var(--swipe-x, 0)) rotate(var(--swipe-rotation, 0deg)); transition: transform .28s ease-out; box-shadow: 1px 0 0 #111; }
.surprise-swipe-sheet.is-dragging { transition: none; cursor: grabbing; }
.surprise-swipe-sheet:focus-visible { outline: 2px solid #e72c20; outline-offset: -7px; }
.surprise-is-revealed .surprise-swipe-sheet { transform: translateX(calc(var(--swipe-direction, 1) * 125%)) rotate(calc(var(--swipe-direction, 1) * 8deg)); pointer-events: none; }
.surprise-swipe-back { align-items: center; }
.surprise-found-get { width: min(100%, 290px); min-height: 78px; padding: 18px 24px; border: 1px solid #111; border-radius: 999px; background: #f53224; color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 5px 0 #111; touch-action: manipulation; }
.surprise-found-get:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #111; }
.surprise-is-revealed[data-interaction='swipe-page'] .invitation-actions { visibility: hidden; pointer-events: none; }
.surprise-round[data-interaction='swipe-page'] #onboarding-feedback { position: absolute; z-index: 3; bottom: 30px; left: 20px; right: 20px; }

.surprise-literal-word { display: inline; position: relative; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; background: transparent; cursor: text; }
.surprise-literal-word::before { content: ''; position: absolute; inset: -12px -3px; }
.surprise-morse { margin: 30px auto 0; }
.surprise-morse-target { color: #e72c20; font-size: clamp(18px, 5.8vw, 25px); line-height: 1.4; letter-spacing: .1em; white-space: nowrap; }
.surprise-morse-output { display: block; min-height: 26px; margin-top: 12px; color: #111; font-size: 19px; letter-spacing: .16em; line-height: 26px; }
.surprise-round[data-interaction='morse'] .invitation-get { touch-action: none; }
.surprise-holding .invitation-button-label { opacity: .6; }

.surprise-delivery-board { position: relative; width: 100%; height: 108px; margin: 31px auto 0; }
.surprise-delivery-divider { position: absolute; top: 13px; bottom: 13px; left: 48%; width: 2px; background: #111; }
.surprise-delivery-ticket { left: 20%; top: 50%; }
.surprise-delivery-receiver { position: absolute; display: block; left: 81%; top: 50%; width: 65px; height: 57px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); touch-action: none; cursor: grab; z-index: 2; }
.surprise-delivery-receiver span { display: block; position: absolute; inset: 6px; border: 1px dashed #111; border-radius: 4px; pointer-events: none; }
.surprise-delivery-receiver.is-dragging { cursor: grabbing; }
.surprise-delivery-blocked { animation: surprise-blocked .62s ease-in-out; }
@keyframes surprise-blocked { 40%,60% { left: calc(48% - 23px); } 48% { rotate: -6deg; } }
.surprise-is-delivered .surprise-delivery-receiver span { border-style: solid; border-color: #e72c20; }
.surprise-is-delivered .surprise-delivery-divider { opacity: .2; }

.surprise-launch-board { position: relative; width: 100%; height: 140px; margin: 28px auto 0; overflow: hidden; }
.surprise-launch-target { position: absolute; width: 48px; height: 48px; left: 68%; top: 25px; fill: #e72c20; transform: translate(-50%, -50%); }
.surprise-launch-target .launch-target-rim { fill: #fff; stroke: #111; stroke-width: 1.5; }
.surprise-launch-target .launch-target-inner { fill: #fff; }
.surprise-round .surprise-launch-ticket { left: 33%; top: calc(100% - 17px); z-index: 1; transform: translate(-50%,-50%) rotate(var(--launch-angle, 0deg)); }
.surprise-launch-origin { position: absolute; left: 33%; bottom: 0; width: 44px; height: 1px; background: #ddd; transform: translateX(-50%); }
.surprise-round[data-interaction='launch'] .invitation-get { touch-action: none; overflow: visible; background: transparent; border-color: #d7d7d7; }
.surprise-launch-handle { position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; border: 1px solid #111; border-radius: inherit; background: #111; color: #fff; transform: translate(var(--spring-x, 0), var(--spring-y, 0)); transition: transform .18s ease-out; pointer-events: none; }
.surprise-round[data-interaction='launch'] .invitation-get.is-dragging .surprise-launch-handle { transition: none; }
.surprise-is-launched .surprise-launch-ticket { left: 68% !important; top: 25px !important; transform: translate(-50%,-50%) scale(.65) !important; }
.surprise-is-launched .surprise-launch-target .launch-target-rim { stroke: #e72c20; }
.surprise-round[data-interaction='delivery'] .login-heading, .surprise-round[data-interaction='launch'] .login-heading { padding-block: 24px; }
@media (hover: hover) {
  .surprise-round[data-interaction='launch'] .invitation-get:hover:not(:disabled) .surprise-launch-handle { background: #e72c20; border-color: #e72c20; }
}
@media (min-width: 700px) {
  .surprise-swipe-sheet, .surprise-swipe-back { padding: 42px 48px; }
  .surprise-delivery-board { margin-top: 35px; }
}
@media (max-width: 699px) {
  .surprise-round[data-interaction='launch'] { padding-bottom: max(80px, env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .surprise-swipe-sheet, .surprise-swipe-back { padding-inline: 16px; }
  .surprise-morse-target { font-size: 18px; letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-round *, .surprise-round *::before, .surprise-round *::after { transition: none !important; animation: none !important; }
}