/* Celebrity Match owns these rules; do not depend on the retired quick-profile UI. */
.public-pairing [data-avatar-id] {
  position:relative; display:grid; place-items:center; flex-shrink:0;
  overflow:hidden; isolation:isolate; border-radius:50%;
}
.public-pairing [data-avatar-id]>img {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  max-width:none; object-fit:cover; opacity:0;
}
.public-pairing [data-avatar-id].has-photo>img {opacity:1}
.public-pairing .pairing-avatar {
  width:32px; height:32px; background:#e0eaf0; color:#315f7d;
  border:1px solid #315f7d; font:600 11px/1 system-ui,sans-serif;
}
.public-pairing .pairing-avatar.b {background:#f4e6db; color:#945038; border-color:#ac5e43}
.public-pairing .pairing-person {display:flex; flex-direction:column}
.public-pairing .pairing-person-select {flex:1; background:transparent; color:#29453b; border-radius:12px}
.public-pairing .pairing-person-select strong {flex:1; justify-content:center; text-align:center}
.public-pairing .pairing-change {width:100%; min-height:48px; line-height:1.3}
.public-pairing .pairing-person-select:hover {background:#e3eade; color:#29453b}
.public-pairing .pairing-shuffle {background:transparent; color:#29453b; box-shadow:none}
.public-pairing .pairing-intro {position:relative}
.public-pairing .pairing-intro .eyebrow {display:flex; align-items:center; min-height:44px; padding-right:90px}
.public-pairing .pairing-title-row {display:block}
.public-pairing .pairing-top-share {position:absolute; top:0; right:0; padding:0}
.public-pairing .pairing-actions>button {
  display:flex; align-items:center; justify-content:center; min-width:0;
  gap:.5rem; font-size:15px; line-height:1.35; min-height:52px; border-radius:8px;
}
.public-pairing .pairing-actions>button>span {flex-shrink:0}
.public-pairing .pairing-random {background:#fffdf6; color:#29453b}
.public-pairing .pairing-submit {background:#294e40; color:#fffdf6}
.public-pairing .pairing-submit:hover {background:#365847; color:#fffdf6}

/* A fixed-height, top-anchored dialog keeps the input still as results change.
   Only results scroll. visualViewport accounts for the phone keyboard. */
.public-pairing .pairing-dialog {
  position:fixed; top:calc(var(--picker-viewport-top,0px) + 12px); bottom:auto;
  left:0; right:0; margin:0 auto; width:min(560px,calc(100% - 24px));
  height:min(680px,calc(var(--picker-viewport-height,100dvh) - 24px));
  max-height:none; padding:16px; border-radius:16px; overflow:hidden;
  overscroll-behavior:contain; box-sizing:border-box;
}
.public-pairing .pairing-dialog[open] {display:flex; flex-direction:column; gap:10px}
.public-pairing .pairing-dialog-heading {flex:none; align-items:center; gap:12px}
.public-pairing .pairing-dialog h2 {font-size:clamp(20px,5.8vw,26px); line-height:1.2; text-wrap:initial}
.public-pairing .pairing-dialog-heading button {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  background:#fffdf6; color:#29453b; border-radius:8px;
}
.public-pairing .pairing-dialog-heading button:hover {background:#e3eade; color:#29453b}
.public-pairing .pairing-dialog button {background:#fffdf6; color:#29453b}
.public-pairing .pairing-dialog button:hover {background:#e3eade; color:#29453b}
.public-pairing .pairing-picker-content {display:flex; flex:1; flex-direction:column; min-height:0}
.public-pairing .pairing-search-label {flex:none; margin:0 0 6px; font-size:14px}
.public-pairing .pairing-dialog input[type=search] {flex:none; margin:0; font-size:16px; height:50px; line-height:1.4}
.public-pairing .pairing-picker-results {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overflow-anchor:none;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 3px 8px;
  margin:8px -3px 0; scrollbar-gutter:stable;
}
.public-pairing .pairing-picker-tools {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.public-pairing .pairing-picker-tools h3 {margin:0; font-size:14px; line-height:1.35; text-wrap:initial}
.public-pairing .pairing-picker-tools button {
  min-height:44px; padding:8px 10px; border:1px solid #a9b9a2; border-radius:8px;
  color:#29453b; background:#fffdf6; font-size:14px; line-height:1.3;
}
.public-pairing .pairing-picker-tools button:hover {background:#e3eade; color:#29453b}
.public-pairing .pairing-picker-status {margin:0 0 10px; color:#29453b}
.public-pairing .pairing-name-list>button {background:#fffdf6; color:#29453b; min-height:48px; font-size:15px; line-height:1.4}
.public-pairing .pairing-name-list>button:hover {background:#e3eade; color:#29453b}
.public-pairing .pairing-more-names {background:transparent; color:#29453b}
.public-pairing .pairing-game-track {overflow-y:hidden}
.public-pairing .pairing-game-reveal-zone {min-height:8rem}
.public-pairing .pairing-game-person {flex-direction:column; text-align:center}
.public-pairing .pairing-game-answer .pairing-avatar {width:36px; height:36px}
.public-pairing .pairing-game-answer {font-size:14px; line-height:1.35}
@media(max-width:380px) {
  .public-pairing .pairing-actions {grid-template-columns:1fr}
  .public-pairing .pairing-person-select strong {font-size:14px}
  .public-pairing .pairing-change {font-size:12px; padding:6px; letter-spacing:0}
  .public-pairing .pairing-game {--game-visible:1}
}