/* Mobile-first account social surfaces; game/header styles are deliberately untouched. */
.social-modal { position:fixed; inset:0; z-index:14000; overflow-y:auto; display:grid; justify-items:center; align-items:start; padding:max(12px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)); background:#061020ed; }
.social-modal.hidden { display:none; }
.social-card { box-sizing:border-box; width:min(100%,560px); padding:18px; border-radius:20px; border:1px solid var(--dt-outline,#304565); background:var(--dt-bg,#0b1730); color:var(--dt-text,#eff6ff); box-shadow:0 20px 60px #0006; }
.social-card header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.social-card h2 { margin:0; font-size:1.25rem; }
.social-card button { min-height:44px; border-radius:10px; padding:9px 12px; font-size:.85rem; white-space:normal; }
.social-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:16px; }
.social-tabs button { background:var(--dt-surface-2,#182844); border:1px solid var(--dt-outline,#304565); color:inherit; }
.social-tabs button[aria-pressed=true] { border-color:var(--dt-teal,#6cdfd7); color:var(--dt-teal,#6cdfd7); }
#socialStatus { min-height:1.3em; line-height:1.4; margin:12px 0; color:#c5eaff; overflow-wrap:anywhere; }
.social-card form { margin:12px 0 18px; }
.social-card label { display:block; font-size:.85rem; font-weight:700; }
.social-input-row { display:flex; gap:8px; align-items:end; margin-top:6px; }
.social-input-row input, .social-input-row label { flex:1; min-width:0; }
.social-card input, .social-card select { box-sizing:border-box; min-height:44px; font-size:16px; width:100%; border:1px solid var(--dt-outline,#304565); background:var(--dt-surface-2,#182844); color:inherit; border-radius:8px; padding:10px; }
.social-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; padding:14px 0; border-bottom:1px solid var(--dt-outline,#304565); }
.social-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; background:var(--dt-surface-2,#182844); }
.social-person { display:grid; gap:5px; min-width:0; }
.social-person strong { overflow-wrap:anywhere; }
.social-person small { color:#b7c7da; line-height:1.45; }
.social-actions { grid-column:2; display:flex; flex-wrap:wrap; gap:8px; }
.social-actions small { flex-basis:100%; }
.social-card .secondary { background:transparent; border:1px solid var(--dt-outline,#304565); color:inherit; }
.social-empty { padding:18px 0; color:#b7c7da; line-height:1.5; }
.social-card small { display:block; line-height:1.5; margin:4px 0; }
#socialRetry { margin-top:18px; width:100%; }
body.social-open { overflow:hidden; }
@media(max-width:360px) { .social-card { padding:12px; } .social-card button { padding:8px; } }