.friend-qr-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.friend-qr-actions button{min-height:44px}.friend-qr-dialog{box-sizing:border-box;width:min(92vw,440px);max-height:88vh;overflow:auto;border:1px solid #809d88;border-radius:22px;background:#faf8ef;color:#173c2e;padding:24px;box-shadow:0 20px 80px #102f2540}.friend-qr-dialog::backdrop{background:#102f25aa}.friend-qr-dialog h2{margin-top:0}.friend-qr-content canvas{display:block;max-width:100%;height:auto;margin:1rem auto;image-rendering:pixelated}.friend-qr-content video{display:block;width:100%;max-height:42vh;object-fit:cover;border-radius:12px;background:#173c2e}.friend-qr-content video:not([src]){min-height:0}.friend-qr-dialog button{min-height:44px}.friend-qr-status,#friend-qr-feedback{line-height:1.5;overflow-wrap:anywhere}.friend-qr-dialog .friend-code{text-align:center;overflow-wrap:anywhere}
/* Friends-only compact hero: keep the existing scenic style and bring actions closer. */
body[data-friends] main>header{min-height:0;padding:28px 30px}body[data-friends] main>header h1{font-size:clamp(35px,5vw,55px);margin:8px 0 12px}body[data-friends] main>header p{margin-bottom:0}@media(max-width:600px){body[data-friends] main>header{padding:22px}body[data-friends] main>header h1{font-size:38px}}

/* Friends field notes: scoped paper cards and readable, quiet section cues.
   Existing scenic art, content order, QR rendering and all interactions stay intact. */
body[data-friends] #friends-root { color:#254635; }
body[data-friends] #friends-root .social-card {
  background:#fffdf5; border-color:#c4cfb9; border-radius:16px;
  border-inline-start:4px solid #7b9473;
  box-shadow:0 3px 0 #25463508;
}
body[data-friends] #friends-root .social-card > small {
  display:inline-block; max-width:100%; box-sizing:border-box;
  padding:6px 10px; border-radius:6px; background:#e7eddf; color:#36533d;
  font:700 11px/1.5 system-ui,sans-serif; letter-spacing:1px;
}
body[data-friends] #friends-root .social-card h2 {
  font-size:clamp(25px,3vw,30px); line-height:1.25; margin-block:16px 12px;
  overflow-wrap:anywhere;
}
body[data-friends] #friends-root .social-card h2:first-child { margin-top:0; }
body[data-friends] #friends-root .social-status {
  background:#edf1e6; border:1px solid #d0dbc4; border-radius:10px;
  color:#314e3a;
}
body[data-friends] #friends-root .family-quiz {
  background:#f7f8ee; border-inline-start-color:#486f50;
}
body[data-friends] #friends-root .family-quiz-icons {
  display:flex; align-items:center; width:fit-content; max-width:100%;
  padding:10px 14px; margin:16px 0; border:1px solid #cbd7be;
  border-radius:12px; background:#fffdf5; font-size:28px; letter-spacing:8px;
}
body[data-friends] #friends-root .friend-code {
  width:fit-content; max-width:100%; box-sizing:border-box; padding:12px 14px;
  border:1px dashed #7b9473; border-radius:10px; background:#f1f4e9;
  overflow-wrap:anywhere;
}
body[data-friends] #friends-root :is(p,strong,summary,label) { overflow-wrap:anywhere; }
body[data-friends] #friends-root :is(input,select) { max-width:100%; box-sizing:border-box; }
body[data-friends] #friends-root :is(button,summary,input,select) { min-height:44px; }
body[data-friends] #friends-root button { white-space:normal; }
body[data-friends] #friends-root :is(a,button,input,select,summary):focus-visible {
  outline:3px solid #805615; outline-offset:3px;
}
@media(max-width:600px) {
  body[data-friends] #friends-root .social-card { padding:18px 16px; }
  body[data-friends] #friends-root .social-input input { min-width:0; flex-basis:100%; }
  body[data-friends] #friends-root .social-input button { width:100%; }
}