.ut-swipe { position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) 1.25rem 4rem; overflow: hidden; background: radial-gradient(circle at 16% 42%, rgb(151 79 207 / 14%), transparent 25rem), radial-gradient(circle at 83% 66%, rgb(0 219 244 / 11%), transparent 26rem); text-align: center; }
.ut-swipe > * { position: relative; z-index: 1; }
.ut-swipe__intro { margin: 0 auto 1.75rem; max-width: 36rem; }
.ut-swipe__eyebrow { color: #a95bdc; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ut-swipe h1 { margin: .3rem 0 .45rem; color: #fff; font-size: clamp(2rem, 5vw, 3.8rem); }
.ut-swipe__intro p:last-child { margin: 0; }
.ut-swipe__stage { position: relative; width: min(100%, 650px); min-height: min(76vh, 800px); margin: 0 auto; }
.ut-swipe__stack { position: relative; min-height: min(76vh, 800px); touch-action: pan-y; user-select: none; }
.ut-swipe__card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 2px solid rgb(255 255 255 / 42%); border-radius: 1.1rem; background: #111215; box-shadow: -1rem .8rem 0 rgb(143 74 194 / 22%), 1rem 1.1rem 0 rgb(0 229 255 / 15%), 0 16px 45px rgba(0,0,0,.3); cursor: grab; will-change: transform, opacity; }
.ut-swipe__card:active { cursor: grabbing; }
.ut-swipe:not(.ut-home-swipe) .ut-swipe__card { right: auto; left: 50%; width: var(--ut-card-width, 100%); }
.ut-swipe__card img { display: block; width: 100%; height: min(67vh, 690px); object-fit: contain; background: #090b0c; pointer-events: none; }
.ut-swipe__card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem 1rem; color: #fff; text-align: left; }
.ut-swipe__card-title { margin: 0; font-size: 1rem; }
.ut-swipe__view { color: #fff; font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.ut-swipe__stamp { position: absolute; top: 2rem; padding: .32rem .6rem; border: 3px solid currentColor; border-radius: .35rem; font-weight: 900; font-size: 1.4rem; letter-spacing: .08em; opacity: 0; transform: rotate(-12deg); }
.ut-swipe__stamp--no { left: 1.1rem; color: #e94855; }.ut-swipe__stamp--yes { right: 1.1rem; color: #57be83; transform: rotate(12deg); }
.ut-swipe__empty { padding: 4rem 1rem; }
.ut-swipe__actions { position: absolute; top: 50%; left: 50%; z-index: 3; display: flex; width: min(860px, calc(100% + 14rem)); justify-content: space-between; transform: translate(-50%, -50%); pointer-events: none; }
.ut-swipe__account { margin: 1.25rem 0 0; color: rgb(255 255 255 / 72%); font-size: .9rem; }.ut-swipe__account a { color: inherit; font-weight: 800; text-underline-offset: .2em; }
.ut-swipe__action { display: flex; width: 5.1rem; height: 5.1rem; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / 22%); font: inherit; font-size: 2.4rem; line-height: 1; cursor: pointer; pointer-events: auto; }
.ut-swipe__action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.ut-swipe__action--dislike { color: #171719; }.ut-swipe__action--like { color: #e34255; font-size: 2.7rem; }
.ut-swipe__ticu-point { position: absolute; top: calc(50% + .5rem); left: calc(50% - 25.5rem); z-index: 2; width: 12rem; pointer-events: none; }
.ut-swipe__ticu-point img { display: block; width: 100%; filter: drop-shadow(0 .8rem 1.2rem rgb(0 0 0 / 38%)); transform: scaleX(-1) rotate(2deg); transform-origin: center top; }
.ut-swipe__action:focus-visible, .ut-swipe__view:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
@media (max-width: 64rem) { .ut-swipe__ticu-point { display: none; } }
@media (max-width: 760px) { .ut-swipe { padding-inline: .8rem; }.ut-swipe__stage, .ut-swipe__stack { min-height: 67vh; }.ut-swipe__card img { height: 59vh; }.ut-swipe__actions { width: min(105%, calc(100% + 4rem)); }.ut-swipe__action { width: 4rem; height: 4rem; font-size: 1.85rem; }.ut-swipe__action--like { font-size: 2.15rem; } }
