/* Physical attractiveness. Everything scoped under .pat-*. */

/* the blink frame */
.pat-frame {
  position: relative; width: min(62%, 220px); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: #05070d; border: 2px solid var(--line-strong); box-shadow: 0 0 0 6px rgba(123,92,253,.14), 0 10px 30px rgba(0,0,0,.5);
}
.pat-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.pat-frame img.on { visibility: visible; }
.pat-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 72px; font-weight: 700; color: var(--violet-bright);
}
.pat-count.go { animation: pat-pop .6s ease-out both; }
@keyframes pat-pop { from { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .2; } }
.pat-mask { position: absolute; inset: 0; opacity: 0; transition: opacity .3s .15s;
  background: repeating-linear-gradient(37deg, #1a2136 0 7px, #0a0e1a 7px 13px), #0a0e1a; }
.pat-frame.masked .pat-mask { opacity: 1; transition: none; }

/* rating buttons, three across */
.pat-rates { flex-direction: row; }
.pat-rates .choice { flex: 1; justify-content: center; text-align: center; padding: 12px 6px; font-size: 15px; }

/* the long look */
.pat-big { position: relative; width: min(66%, 240px); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 2px solid var(--line-strong); }
.pat-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.pat-big img.on { opacity: 1; }

/* the two ratings, side by side */
.pat-tab { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pat-th, .pat-tr { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: center; }
.pat-th b { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--violet-bright); text-align: center; }
.pat-tr { padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); }
.pat-tr img { width: 52px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.pat-tr i { font-style: normal; font-size: 15px; font-weight: 700; text-align: center; color: var(--dim); }
.pat-tr.same { border-color: var(--mint); background: rgba(63,214,154,.10); }
.pat-tr.same i { color: var(--text); }

/* the kindest face */
.pat-kind { width: 100%; }
.pat-kind .choice img { height: clamp(120px, 20vh, 170px); object-position: top; }
.pat-yours { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold); }

/* the computer dance */
.pat-dance { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pat-dance img { width: min(100%, 360px); display: block; }
.pat-chip { padding: 8px 14px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; color: var(--text); }
.pat-chip.rnd { border-color: var(--gold); color: var(--gold); }

/* the essay */
.pat-ess { width: 100%; }
.pat-two .choice { padding: 10px; }
.pat-essay { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px 10px; border-radius: 8px; background: #EAE3D7; min-height: 150px; }
.pat-essay p { height: 6px; border-radius: 3px; background: #b9b2a6; margin: 0; }
.pat-essay p.s { width: 70%; }
.pat-pin { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pat-two .choice .pat-pin img { width: 44px; height: 56px; border-radius: 4px; flex: none; object-fit: cover; object-position: top; }
.pat-pin small { font-size: 12px; font-weight: 800; color: #3a3530; text-align: left; line-height: 1.15; }
.pat-grade { position: absolute; right: 6px; top: 76px; padding: 2px 6px; border: 2px solid currentColor; border-radius: 6px; background: #EAE3D7; font-family: var(--mono); font-size: 20px; font-weight: 700; color: #3a3530; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: opacity .3s, transform .3s; }
.graded .pat-grade { opacity: 1; transform: rotate(-8deg) scale(1); }
.graded .pat-gl .pat-grade { color: #1f7a54; }

/* two profiles */
.pat-profs { display: flex; gap: 12px; width: 100%; justify-content: center; }
.pat-prof { flex: 1; max-width: 150px; padding: 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pat-prof img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; object-position: center 30%; }
.pat-prof small { font-size: 12px; font-weight: 800; color: var(--violet-bright); }
.pat-prof.gl small { color: var(--gold); }
.pat-prof p { margin: 0; font-size: 13px; line-height: 1.3; color: var(--text); }

@media (max-height: 700px) {
  .pat-frame { width: min(52%, 180px); }
  .pat-big { width: min(52%, 186px); }
  .pat-kind .choice img { height: 112px; }
  .pat-dance img { width: min(92%, 300px); }
  .pat-essay { min-height: 128px; gap: 6px; }
}