/* "What's your type?": the opening hook (see opposites.js). Dark zine dialog, cream cards, a pink card for the reveal. */
.opposites-dialog{width:min(720px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:0;border-radius:32px;color:var(--cream);background:radial-gradient(ellipse at 80% 0%,#ff80bd33,transparent 55%),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 26px),linear-gradient(170deg,#2c2638,#1b1824 70%);box-shadow:0 30px 80px #00000080}
.opposites-dialog::backdrop{background:#0d0b14b8;backdrop-filter:blur(4px)}
.opposites-close{position:absolute;top:18px;right:20px;z-index:3;width:44px;height:44px;border-radius:50%;background:#ffffff14;color:var(--cream);font-size:24px;line-height:1}
.opposites-close:hover{background:#ffffff26}
.opposites-stage{padding:26px 28px 28px}
.opposites-title{margin:0 0 20px;font-family:var(--display);font-weight:400;font-size:44px;line-height:1.05;color:var(--cream)}

/* Step one: the cards */
.opposites-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.opposites-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 14px 18px;border-radius:24px;border:3px solid #16121c;background:#eee8d9;color:#2a2430;box-shadow:7px 9px 0 #16121c;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.opposites-option:hover,.opposites-option:focus-visible{transform:translate(-2px,-3px);box-shadow:9px 12px 0 #16121c;outline:none}
.opposites-option.is-picked{background:#fff1c4;transform:rotate(-2deg) translate(-2px,-4px)}
.opposites-face{display:block;width:126px;height:126px;border-radius:50%;overflow:hidden;background:var(--pink);border:3px solid #16121c}
.opposites-face img{display:block;width:100%;height:100%}
.opposites-option-label{font-family:var(--display);font-size:24px;line-height:1.1}
.opposites-doodle{position:absolute;width:30px;height:30px;pointer-events:none}
.opposites-doodle.d1{top:10px;left:12px;rotate:-28deg}
.opposites-doodle.d2{top:12px;right:16px;rotate:24deg}
.opposites-doodle.d3{top:54%;right:14px;rotate:-12deg}
.opposites-option:nth-child(even) .opposites-doodle.d3{right:auto;left:14px;rotate:16deg}
.opposites-option:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 10px);margin:0 auto;width:100%}

/* Step two: the pink card */
.opposites-reveal[hidden]{display:none}
.opposites-reveal{display:flex;flex-direction:column;align-items:center;gap:18px}
.opposites-reveal .opposites-title{align-self:flex-start;margin-bottom:0}
.opposites-preview{width:min(440px,100%);aspect-ratio:1080/1350;border-radius:6px;overflow:hidden;background:#ffffff10;rotate:-2deg;box-shadow:10px 12px 0 #0e0b16;animation:opposites-enter .7s cubic-bezier(.3,.9,.3,1.25) both}
.opposites-preview:empty{display:none}
.opposites-preview img{display:block;width:100%;height:100%}
.opposites-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:6px}
.opposites-actions button{border-radius:100px;font-weight:600;transition:transform .2s,background .2s}
.opposites-actions button:hover{transform:translateY(-2px)}
.opposites-start{width:100%;min-height:62px;font-size:22px;background:var(--pink);color:#2a0f20}
.opposites-ghost{min-height:46px;padding:0 24px;font-size:16px;background:#ffffff14;color:var(--cream);border:1px solid #ffffff38}
.opposites-status{min-height:1.2em;margin:0;font-size:13.5px;color:#e2d5e8d0;text-align:center}
@keyframes opposites-enter{from{transform:translateY(24px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media(max-width:560px){
  .opposites-stage{padding:20px 16px 20px}
  .opposites-title{font-size:36px}
  .opposites-options{gap:14px 12px}
  .opposites-option{padding:18px 10px 14px;gap:10px}
  .opposites-face{width:96px;height:96px}
  .opposites-option-label{font-size:20px}
  .opposites-doodle{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){.opposites-dialog *{animation:none!important;transition:none!important}}