.family-login { max-width: 440px; margin: 40px auto; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.family-login h1 { font: 38px Georgia,serif; }
.family-login p { line-height: 1.7; font-size: 14px; color: var(--muted); }
.family-login label, #family-rename-form label { display: block; font-size: 13px; margin: 16px 0 7px; }
.family-login input, #family-rename { width: 100%; min-width: 0; min-height: 44px; padding: 11px; font-size: 16px; border: 1px solid var(--line); border-radius: 9px; }
.family-login .primary { width: 100%; }
#family-error { color: #874c43; }
.family-lobby { margin: 24px 0; padding: 22px; border: 1px solid var(--line); background: #eeefe4; border-radius: 18px; }
.family-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.family-heading > div { min-width: 0; }
.family-heading h2 { font: 27px Georgia,serif; margin: 10px 0; overflow-wrap: anywhere; }
#family-connection { font-size: 12px; color: var(--muted); }
.family-account-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: end; }
.family-lobby summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 14px; font-weight: 650; }
.family-lobby-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 24px; }
.family-lobby-grid > div { min-width: 0; }
.family-lobby h3 { font-size: 14px; }
.family-person, .family-game { background: var(--paper); padding: 12px; border-radius: 10px; margin: 10px 0; min-width: 0; }
.family-person { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.family-person > span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.family-person button { flex-shrink: 0; }
.family-game strong { font-size: 14px; overflow-wrap: anywhere; }
.family-game p { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 8px 0; }
.family-game-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.family-game button { max-width: 100%; }
.family-note { font-size: 11px; color: var(--muted); line-height: 1.8; }
#family-rename-form { max-width: 400px; margin-bottom: 15px; }
#family-rename-form button { margin-top: 8px; }
@media(max-width:700px) {
  .family-lobby { padding: 16px; }
  .family-lobby-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .family-heading { flex-wrap: wrap; }
  .family-account-actions { justify-content: start; }
  .family-login { margin-top: 24px; padding: 20px; }
}