:root{
  --private-accent:#6845a0;--private-ink:#4d2f77;
  --private-soft:color-mix(in srgb,var(--private-accent) 9%,var(--surface));
  --private-line:color-mix(in srgb,var(--private-accent) 35%,var(--surface));
  --social-accent:var(--action-teal);--social-soft:var(--brand-soft);
  --social-line:color-mix(in srgb,var(--social-accent) 30%,var(--surface));
}
.room-private{--room-accent:var(--private-accent);border-color:var(--private-line);border-left:4px solid var(--private-accent);border-radius:var(--r);background:var(--private-soft);color:var(--ink);box-shadow:none}
.room-private .room-icon{border-radius:50%;border-color:var(--private-accent);background:var(--private-accent)}
.room-private .room-copy h2,.room-private .room-copy .room-kicker{color:var(--private-ink)}
.room-private .room-copy .room-window{border:1px dashed var(--private-line);background:var(--surface);color:var(--private-ink)}
.room-private .room-window span,.room-private .room-copy .room-pitch,.room-private .room-format{color:var(--dim)}
.room-private .room-filters summary{color:var(--private-ink)}
.room-private .room-filters p{color:var(--dim);border-top:1px solid var(--private-line)}
.room-private .room-format b{color:var(--private-ink)}
.room-private .room-start{border-color:var(--private-accent);background:var(--private-accent);color:var(--button-ink)}
.room-private :focus-visible{outline-color:var(--private-accent)}
#social-open{border-color:var(--social-line);background:var(--social-soft)}
#social-open:hover{background:color-mix(in srgb,var(--social-accent) 13%,var(--surface))}
#social-open .lobby-replay-icon{background:var(--social-accent);border-radius:50%}
#social-open .lobby-replay-copy strong,#social-open .lobby-replay-arrow{color:var(--social-accent)}
#social-open .lobby-replay-copy small{color:var(--dim)}
.lobby-replay-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-dialog{width:calc(100% - 24px);max-width:440px;max-height:calc(100dvh - 24px);padding:0;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);font:var(--form-control-text)}
.social-dialog::backdrop{background:color-mix(in srgb,var(--chrome) 55%,transparent)}
.social-dialog .fills-head{padding:12px 16px;border-bottom:1px solid var(--line)}
.social-dialog .fills-head h2{margin:0;font:var(--room-title-text)}
.social-dialog .x{min-width:44px;min-height:44px;flex:none}
.social-body{padding:16px}
.social-body p,.social-body small{font:var(--form-help-text);color:var(--dim)}
.social-body input:not([type=checkbox]),.social-body select{width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);font:var(--form-control-text);background:var(--surface);color:var(--ink)}
.social-body .btn{min-height:44px}
.social-body :focus-visible{outline:2px solid var(--action-blue);outline-offset:2px}
#invite-waiting{margin-top:12px}
.social-hero{padding:20px;background:var(--chrome);color:var(--button-ink)}
.social-hero .eyebrow{color:var(--chrome-muted);font:var(--room-kicker-text)}
.social-hero h3,.social-intro h3,.social-empty h3{margin:0 0 8px;font:var(--room-title-text)}
.social-hero p{margin:0;color:var(--chrome-muted);font:var(--form-help-text)}
.social-hero .eyebrow{margin-bottom:8px}
.social-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.social-tabs button{flex:1;min-width:0;min-height:44px;padding:10px 4px;border-bottom:3px solid transparent;color:var(--dim);font:var(--control-emphasis)}
.social-tabs button[aria-pressed=true]{border-color:var(--brand);color:var(--brand)}
.social-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;color:var(--dim);font:var(--chart-control-text)}
.social-toolbar .help-link{flex:none}
.social-body h3{font:var(--room-title-text)}
.social-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.social-share{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.social-share h3{font:var(--room-title-text);margin:0}
.social-actions .btn{flex:1;margin:0;padding:10px}
.social-empty{padding:22px 16px;margin:16px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);text-align:center}
.social-empty-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand);font:var(--nav-icon-text)}
.social-empty p{margin:10px 0 16px}
.social-empty .btn{margin:0;background:var(--brand);border-color:var(--brand);color:var(--button-ink)}
.social-list-heading{margin:18px 0 8px}
.host-account-note{padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.host-account-note p{margin:6px 0 0}
.social-intro{margin-bottom:20px}
.social-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.social-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px;overflow-wrap:anywhere}
.social-person{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:56px;text-align:left;padding:0}
.social-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);font:var(--nav-icon-text)}
.social-person-copy{display:grid;gap:4px;min-width:0}
.social-person-copy strong{font:var(--room-pitch-text);color:var(--ink)}
.social-person-copy small{font:var(--chart-control-text);color:var(--dim)}
.social-person-arrow{margin-left:auto;color:var(--brand)}
.social-profile-identity{display:flex;align-items:center;gap:12px;margin:12px 0}
.social-profile-identity h3{margin:0;overflow-wrap:anywhere}
.social-event{padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);overflow-wrap:anywhere}
.social-event .social-profile-identity{margin-top:0}
.social-event .btn{margin-bottom:8px}
.social-row>.btn{width:auto;flex:none;padding:10px;margin:0}
.social-row .btn{white-space:normal;overflow-wrap:anywhere}
.social-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:12px 0;font:var(--form-control-text)}
.social-check input{flex:none;width:20px;height:20px;accent-color:var(--action-blue)}
.social-search{display:flex;gap:8px}
.social-notice{position:fixed;z-index:50;top:64px;left:12px;right:12px;max-width:410px;margin:0 auto;padding:12px;border:1px solid var(--action-blue);border-radius:var(--r);background:var(--surface);color:var(--ink);font:var(--form-control-text)}
.social-notice[hidden]{display:none}
.social-notice p{margin:0;grid-column:1 / -1;overflow-wrap:anywhere}
.social-notice .btn{min-height:44px;margin:0;width:auto}
.social-notice{display:grid;grid-template-columns:1fr 44px;gap:8px;box-shadow:0 4px 18px color-mix(in srgb,var(--chrome) 14%,transparent)}
.social-notice[data-phase="game"]{top:calc(var(--game-top) + 4px)}
#social-notice-open{background:var(--action-blue);border-color:var(--action-blue);color:var(--button-ink)}
#social-notice-close{padding:0}
#friend-room-join{background:var(--action-blue);border-color:var(--action-blue)}
.social-dialog [hidden]{display:none}
.social-body #social-status:empty{display:none}
.social-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.social-stat{display:flex;flex-direction:column;gap:8px;padding:14px 12px;min-width:0;border:1px solid var(--social-line);border-radius:var(--r-sm);background:var(--social-soft);overflow-wrap:anywhere}
.social-stat span{color:var(--dim);font:var(--chart-control-text)}
.social-stat b{color:var(--ink);font:var(--room-title-text)}
.social-alert-options{margin:18px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.social-alert-options legend{padding-inline:6px;font:var(--control-emphasis)}
.social-alert-options .social-check{margin:4px 0}
.social-stat-note summary{min-height:44px;padding-block:12px;color:var(--brand);font:var(--control-emphasis);cursor:pointer}
.social-result{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.social-result strong{font:var(--room-pitch-text)}
.social-result small{color:var(--dim);font:var(--chart-control-text)}
.social-result .btn{margin:4px 0 0}
.social-invite-status{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:var(--r-sm);background:var(--social-soft);color:var(--brand);font:var(--control-emphasis)}

.social-trader-group{margin-top:14px}
.social-trader-group h3{margin:0;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--ink);font:var(--control-emphasis)}

/* Distinct sections retain labels and a selected border as well as color. */
#social-dialog{--section-accent:var(--brand);--section-wash:var(--brand-soft)}
#social-dialog[data-view="following"]{--section-accent:var(--action-blue);--section-wash:color-mix(in srgb,var(--action-blue) 8%,var(--surface))}
#social-dialog[data-view="inbox"]{--section-accent:var(--private-accent);--section-wash:var(--private-soft)}
.social-tabs [data-social-view="following"]{color:var(--action-blue)}
.social-tabs [data-social-view="inbox"]{color:var(--private-accent)}
#social-dialog .social-tabs button[aria-pressed=true]{border-color:var(--section-accent);color:var(--section-accent);background:var(--section-wash);border-radius:var(--r-sm) var(--r-sm) 0 0}
#social-dialog .social-empty .btn{background:var(--section-accent);border-color:var(--section-accent)}
#social-dialog .social-empty-icon,#social-dialog .social-invite-status{background:var(--section-wash);color:var(--section-accent)}
#social-dialog[data-view="inbox"] .social-event{border-color:var(--private-line);background:var(--private-soft)}
#social-dialog[data-view="inbox"] .social-event .btn{border-color:var(--private-accent);color:var(--private-ink);background:var(--surface)}
#social-dialog[data-view="following"] .social-actions .btn{border-color:var(--action-blue);color:var(--action-blue);background:var(--surface)}