/* DO NOT EDIT — copied from packages/shared/src/design/css/social.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Social Hub + Houses — shared presentation (2026-10-06 social rework, task R6).
   Used by the desktop /social + /houses pages, the Organizer Hub House console,
   /app's Houses pages and /m's Social page, so all of them read as one product.

   Hand-written, NOT generated. `npm run tokens` COPIES this file to
   apps/server/public/shared/social.css for the no-build web surfaces; the desktop
   app imports it through the `@tdtt/shared` exports map (apps/desktop/src/index.css).
   Edit this file, never the copy.

   ── Two tiers: solid base, rich layer ──────────────────────────────────────
   /m never uses alpha/transparent colour mixes (CLAUDE_WEB_MOBILE.md). So every
   block below is written in two tiers:

     1. BASE rules (the first part of each block) use SOLID token colours only:
        var(--surface|--surface-2|--input|--bg|--text|--text-dim|--muted|--cyan...)
        and `color-mix(in srgb, <token> N%, <solid token>)` against a solid base.
        No `rgb(from …)`, no `transparent` inside colour mixes, no alpha literals.
     2. RICH rules are all scoped under an ancestor carrying `.tdtt-social--rich`
        (washes, hex lattice, scanlines, glows, vignettes, fades — the layered
        banner recipe from chrome.css). Desktop and /app put `tdtt-social--rich` on
        the page root; /m simply NEVER adds the class, so it gets the solid base
        and nothing else. That is the whole opt-out: no per-rule overrides needed.

   Everything is token-derived — no raw colours. Fonts: --head/--display
   (Montserrat 700/800) for titles and labels, --body (Inter) for text. Titles are
   one flat white (--text); only the small eyebrow keeps its colour: the community
   pillar chrome, or the House emblem colour.

   ── Emblem colour ──────────────────────────────────────────────────────────
   Houses carry a validated `#RRGGBB` emblem colour. Call sites set it inline on
   the House block: style="--house-emblem:#RRGGBB". Everything that is "the
   House's accent" reads `var(--house-emblem, var(--chrome))`. Without it a House
   renders in chrome, the community pillar colour.

   ── Class index (markup shape in the _preview.html "Social" section) ───────
   .tdtt-social--rich            ancestor opt-in to the rich layer (never on /m)
   .tdtt-social-panel            generic titled panel (+ __head/__title/__action/__body)
   .tdtt-social-hero             landing hero (+ __eyebrow/__title/__sub/__actions/__art/
                                 __stats > __stat > __icon/__value[--null]/__label)
   .tdtt-social-channels         channel/topic list (+ __head/__add/__item[.on]/__hash/
                                 __name/__topic/__count/__unread)
   .tdtt-social-chat             chat frame (+ __head/__channel/__topic/__regions/__body/
                                 __composer)
   .tdtt-social-pinbar           pin bar (+ __bar/__icon/__label/__count/__chev/__list/
                                 __item/__author/__text/__unpin; .is-open expands)
   .tdtt-social-trending         ranked topic list (+ __item/__rank/__name/__count/__heat)
   .tdtt-social-feed             activity / latest-from-Houses list (+ __item/__badge[--kind]/
                                 __body/__title/__meta/__time)
   .tdtt-social-friendrail       friends online (+ __item/__avatar/__name/__sub, row
                                 [data-status=online|match|offline])
   .tdtt-social-datecard         event row (+ __date/__month/__day/__body/__title/__meta/
                                 __art/__cta)
   .tdtt-social-sheet            bottom channel-switch sheet for /m (+ __scrim/__panel/
                                 __grab/__title; .is-open shows)
   .tdtt-reactions               reaction pill row (+ __pill/__pill--mine/__emoji/__count/
                                 __add)
   .tdtt-house-shield            hexagonal emblem shield (+ --sm/--lg)
   .tdtt-house-pill              status pill (--online/--local/--public/--recruiting/--request)
   .tdtt-house-chip              game chip
   .tdtt-house-role              role chip ([data-role=OWNER|OFFICER|EVENT_ORGANIZER|MEMBER])
   .tdtt-house-card              browse card (+ __art/__ribbon/__badge/__shield/__body/__name/
                                 __meta/__desc/__games/__foot/__avatars/__more/__members/
                                 __cta)
   .tdtt-house-hero              detail hero (+ __art/__shield/__main/__eyebrow/__title/__tag/
                                 __badges/__meta/__desc/__games/__actions)
   .tdtt-house-staff             staff groups (+ __group[--owner|--moderator|--organizer]/
                                 __group-title/__row/__avatar/__name/__sub)
   .tdtt-house-games             supported games (+ __grid/__tile > .tdtt-gametile__plate/
                                 __label — game-tiles.css markup)
   .tdtt-house-gallery           masonry gallery (+ __grid/__item/__img/__cap)
   .tdtt-house-roster            member rows (+ __row/__avatar/__name/__sub; row
                                 [data-status] shows a dot ONLY when present — V7)
*/

/* ── tokens local to this file ───────────────────────────────────────────── */
.tdtt-social--rich {
  /* The banner's hex lattice, copied from chrome.css `.tdtt-banner::before` so the
     panels' texture matches the page texture. Stored once, referenced by every
     panel's ::before. The scanline pass is the first layer. */
  --sx-lattice:
    repeating-linear-gradient(0deg, rgb(from var(--cyan) r g b / 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(30deg, rgb(from var(--cyan) r g b / 0.07) 12%, transparent 12.5%, transparent 87%, rgb(from var(--cyan) r g b / 0.07) 87.5%, rgb(from var(--cyan) r g b / 0.07)),
    linear-gradient(150deg, rgb(from var(--cyan) r g b / 0.07) 12%, transparent 12.5%, transparent 87%, rgb(from var(--cyan) r g b / 0.07) 87.5%, rgb(from var(--cyan) r g b / 0.07)),
    linear-gradient(30deg, rgb(from var(--cyan) r g b / 0.07) 12%, transparent 12.5%, transparent 87%, rgb(from var(--cyan) r g b / 0.07) 87.5%, rgb(from var(--cyan) r g b / 0.07)),
    linear-gradient(150deg, rgb(from var(--cyan) r g b / 0.07) 12%, transparent 12.5%, transparent 87%, rgb(from var(--cyan) r g b / 0.07) 87.5%, rgb(from var(--cyan) r g b / 0.07)),
    linear-gradient(60deg, rgb(from var(--cyan) r g b / 0.05) 25%, transparent 25.5%, transparent 75%, rgb(from var(--cyan) r g b / 0.05) 75%, rgb(from var(--cyan) r g b / 0.05)),
    linear-gradient(60deg, rgb(from var(--cyan) r g b / 0.05) 25%, transparent 25.5%, transparent 75%, rgb(from var(--cyan) r g b / 0.05) 75%, rgb(from var(--cyan) r g b / 0.05));
  --sx-lattice-size: auto, 44px 76px, 44px 76px, 44px 76px, 44px 76px, 44px 76px, 44px 76px;
  --sx-lattice-pos: 0 0, 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
}

/* ── shared panel base ───────────────────────────────────────────────────── */
.tdtt-social-panel,
.tdtt-social-channels,
.tdtt-social-chat,
.tdtt-social-trending,
.tdtt-social-feed,
.tdtt-social-friendrail,
.tdtt-house-staff,
.tdtt-house-games,
.tdtt-house-gallery,
.tdtt-house-roster {
  position: relative; isolation: isolate; box-sizing: border-box; min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  color: var(--text); font-family: var(--body);
}

/* Titled header row used by every panel. Title is flat white; the action link
   keeps the community chrome colour (an accent, not a title). */
.tdtt-social-panel__head,
.tdtt-social-channels__head,
.tdtt-social-feed__head,
.tdtt-social-trending__head,
.tdtt-social-friendrail__head,
.tdtt-house-staff__head,
.tdtt-house-games__head,
.tdtt-house-gallery__head,
.tdtt-house-roster__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px;
}
.tdtt-social-panel__title,
.tdtt-social-channels__title,
.tdtt-social-feed__heading,
.tdtt-social-trending__title,
.tdtt-social-friendrail__title,
.tdtt-house-staff__title,
.tdtt-house-games__title,
.tdtt-house-gallery__title,
.tdtt-house-roster__title {
  margin: 0; min-width: 0;
  font-family: var(--head); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
}
.tdtt-social-panel__action {
  flex: none; font-family: var(--body); font-size: 12px; font-weight: 600;
  color: var(--cyan); text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer;
}
.tdtt-social-panel__action:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) {
  .tdtt-social-panel__action:hover { color: var(--text); }
}

/* RICH: every panel gets wash + lattice + scanline + vignette from one stack. */
.tdtt-social--rich :is(
  .tdtt-social-panel, .tdtt-social-channels, .tdtt-social-chat, .tdtt-social-trending,
  .tdtt-social-feed, .tdtt-social-friendrail, .tdtt-house-staff, .tdtt-house-games,
  .tdtt-house-gallery, .tdtt-house-roster
) {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(from var(--chrome) r g b / 0.10) 0%, transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--bg) 100%);
  box-shadow: inset 0 1px 0 rgb(from var(--chrome) r g b / 0.08);
}
.tdtt-social--rich :is(
  .tdtt-social-panel, .tdtt-social-channels, .tdtt-social-chat, .tdtt-social-trending,
  .tdtt-social-feed, .tdtt-social-friendrail, .tdtt-house-staff, .tdtt-house-games,
  .tdtt-house-gallery, .tdtt-house-roster
)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image: var(--sx-lattice);
  background-size: var(--sx-lattice-size);
  background-position: var(--sx-lattice-pos);
  opacity: 0.6;
}
.tdtt-social--rich :is(
  .tdtt-social-panel, .tdtt-social-channels, .tdtt-social-chat, .tdtt-social-trending,
  .tdtt-social-feed, .tdtt-social-friendrail, .tdtt-house-staff, .tdtt-house-games,
  .tdtt-house-gallery, .tdtt-house-roster
)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgb(from var(--bg) r g b / 0.6) 100%);
}

/* ── status dot (shared by friend rail, roster, staff) ───────────────────── */
/* A row with [data-status] gets a dot on its avatar; no attribute = no dot. */
.tdtt-social-friendrail__avatar,
.tdtt-house-roster__avatar,
.tdtt-house-staff__avatar {
  position: relative; flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 12px; font-weight: 700; color: var(--text-dim);
  overflow: visible;
}
.tdtt-social-friendrail__avatar img,
.tdtt-house-roster__avatar img,
.tdtt-house-staff__avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
[data-status] > .tdtt-social-friendrail__avatar::after,
[data-status] > .tdtt-house-roster__avatar::after,
[data-status] > .tdtt-house-staff__avatar::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); border: 2px solid var(--surface);
}
[data-status='online'] > .tdtt-social-friendrail__avatar::after,
[data-status='online'] > .tdtt-house-roster__avatar::after,
[data-status='online'] > .tdtt-house-staff__avatar::after { background: var(--green); }
[data-status='match'] > .tdtt-social-friendrail__avatar::after,
[data-status='match'] > .tdtt-house-roster__avatar::after,
[data-status='match'] > .tdtt-house-staff__avatar::after { background: var(--gold); }
[data-status='offline'] > .tdtt-social-friendrail__avatar::after,
[data-status='offline'] > .tdtt-house-roster__avatar::after,
[data-status='offline'] > .tdtt-house-staff__avatar::after { background: var(--muted); }
.tdtt-social--rich [data-status='online'] > :is(.tdtt-social-friendrail__avatar, .tdtt-house-roster__avatar, .tdtt-house-staff__avatar)::after {
  box-shadow: 0 0 8px rgb(from var(--green) r g b / 0.7);
}
.tdtt-social--rich [data-status='match'] > :is(.tdtt-social-friendrail__avatar, .tdtt-house-roster__avatar, .tdtt-house-staff__avatar)::after {
  box-shadow: 0 0 8px rgb(from var(--gold) r g b / 0.7);
}

/* ── hero (Social Hub landing) ───────────────────────────────────────────── */
.tdtt-social-hero {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  padding: 22px 22px 18px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 72%);
  border: 1px solid var(--border); border-radius: 18px;
  color: var(--text); font-family: var(--body);
  --ac: var(--chrome);
}
.tdtt-social-hero__eyebrow {
  margin: 0; font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ac, var(--chrome));
}
.tdtt-social-hero__title {
  margin: 4px 0 0;
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 40px);
  line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text);
}
.tdtt-social-hero__sub {
  margin: 8px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.45; color: var(--text-dim);
}
.tdtt-social-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Optional banner art slot (an <img> or a background-image div). Stays out of the
   flow under rich; a solid strip above the copy otherwise. */
.tdtt-social-hero__art {
  display: block; width: 100%; height: 96px; margin: 0 0 14px; border-radius: 12px;
  background: var(--surface-2); object-fit: cover;
}
.tdtt-social-hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  margin-top: 16px;
}
.tdtt-social-hero__stat {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px;
  background: var(--input); border: 1px solid var(--border); border-radius: 12px;
}
.tdtt-social-hero__icon { flex: none; display: flex; color: var(--cyan); }
.tdtt-social-hero__icon svg { width: 22px; height: 22px; }
.tdtt-social-hero__stat > div { min-width: 0; }
.tdtt-social-hero__value {
  display: block; font-family: var(--display); font-weight: 800; font-size: 20px;
  line-height: 1.1; color: var(--text);
}
/* Honest null: renders an em dash and never a 0, whatever the element holds. */
.tdtt-social-hero__value--null { font-size: 0; color: var(--text-dim); }
.tdtt-social-hero__value--null::after { content: '\2014'; font-size: 20px; }
.tdtt-social-hero__label {
  display: block; font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tdtt-social--rich .tdtt-social-hero {
  background:
    radial-gradient(120% 140% at 82% 18%, rgb(from var(--ac, var(--chrome)) r g b / 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--surface) 0%, var(--bg) 72%);
  box-shadow: inset 0 0 0 1px rgb(from var(--cyan) r g b / 0.12),
    0 0 40px -14px rgb(from var(--cyan) r g b / 0.35);
}
.tdtt-social--rich .tdtt-social-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--banner-image, none), var(--sx-lattice);
  background-size: cover, var(--sx-lattice-size);
  background-position: center, var(--sx-lattice-pos);
  opacity: 0.85;
}
.tdtt-social--rich .tdtt-social-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 40%, rgb(from var(--bg) r g b / 0.75) 100%);
}
.tdtt-social--rich .tdtt-social-hero__art {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; margin: 0;
  border-radius: 0; opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, black 100%);
  mask-image: linear-gradient(90deg, transparent 20%, black 100%);
}
.tdtt-social--rich .tdtt-social-hero__stat {
  background: linear-gradient(160deg, var(--input), rgb(from var(--bg) r g b / 0.7));
  box-shadow: inset 0 0 0 1px rgb(from var(--cyan) r g b / 0.06);
}
.tdtt-social--rich .tdtt-social-hero__icon { filter: drop-shadow(0 0 6px rgb(from var(--cyan) r g b / 0.6)); }

/* ── channel / topic list ────────────────────────────────────────────────── */
.tdtt-social-channels { padding: 12px; }
/* D2: a filled compact `.tdtt-btn tdtt-btn--accent`; these rules only size it to sit on the
   "Channels" header line (the base .tdtt-btn is 42px tall). */
.tdtt-social-channels__add.tdtt-btn {
  flex: none; min-height: 28px; padding: 0 10px; gap: 6px; font-size: 11px;
  --ac: var(--cyan); align-self: center; white-space: nowrap;
}
.tdtt-social-channels__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
/* A channel item is "where you are" when selected, so it follows the RAIL-ITEM
   pattern (gradient pill + right chevron), never chip reticle brackets. */
.tdtt-social-channels__item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  box-sizing: border-box; min-height: 40px; padding: 4px 10px; margin: 0;
  background: none; border: 1px solid var(--surface); border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tdtt-social-channels__hash {
  flex: none; width: 18px; text-align: center; font-family: var(--display); font-weight: 800;
  font-size: 15px; color: var(--cyan);
}
.tdtt-social-channels__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdtt-social-channels__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-social-channels__topic {
  font-size: 11.5px; font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdtt-social-channels__count {
  flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
}
.tdtt-social-channels__unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); }
.tdtt-social-channels__item.is-archived,
.tdtt-social-channels__item.is-archived .tdtt-social-channels__hash { color: var(--muted); }
@media (hover: hover) {
  .tdtt-social-channels__item:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
}
.tdtt-social-channels__item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-social-channels__item.on,
.tdtt-social-channels__item[aria-current='true'] {
  color: var(--text); background: var(--grad-primary); border-color: var(--magenta);
  padding-right: 28px;
}
.tdtt-social-channels__item.on .tdtt-social-channels__hash,
.tdtt-social-channels__item[aria-current='true'] .tdtt-social-channels__hash { color: var(--text); }
.tdtt-social-channels__item.on .tdtt-social-channels__topic,
.tdtt-social-channels__item[aria-current='true'] .tdtt-social-channels__topic { color: var(--text); }
/* right chevron, drawn with borders so it needs no icon asset */
.tdtt-social-channels__item.on::after,
.tdtt-social-channels__item[aria-current='true']::after {
  content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--text); border-top: 2px solid var(--text);
  transform: translateY(-50%) rotate(45deg);
}
.tdtt-social--rich .tdtt-social-channels__item.on,
.tdtt-social--rich .tdtt-social-channels__item[aria-current='true'] {
  box-shadow: 0 0 18px -4px rgb(from var(--magenta) r g b / 0.55);
}

/* ── chat frame (wraps ChatPane) ─────────────────────────────────────────── */
.tdtt-social-chat {
  display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden;
}
.tdtt-social-chat__head {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tdtt-social-chat__channel {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 17px;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdtt-social-chat__channel::before { content: '#'; margin-right: 6px; color: var(--cyan); }
.tdtt-social-chat__topic { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.tdtt-social-chat__regions {
  display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none;
  background: var(--input); border-bottom: 1px solid var(--border);
}
.tdtt-social-chat__regions::-webkit-scrollbar { display: none; }
.tdtt-social-chat__body { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 12px 16px; }
.tdtt-social-chat__composer { padding: 10px 12px; background: var(--input); border-top: 1px solid var(--border); }
.tdtt-social--rich .tdtt-social-chat {
  box-shadow: 0 0 0 1px rgb(from var(--cyan) r g b / 0.14), 0 0 36px -14px rgb(from var(--cyan) r g b / 0.4);
}
.tdtt-social--rich .tdtt-social-chat__head {
  background:
    linear-gradient(90deg, rgb(from var(--cyan) r g b / 0.14), transparent 70%),
    var(--surface-2);
  box-shadow: 0 1px 0 rgb(from var(--cyan) r g b / 0.35);
}
.tdtt-social--rich .tdtt-social-chat__body {
  background: repeating-linear-gradient(0deg, rgb(from var(--cyan) r g b / 0.03) 0 1px, transparent 1px 3px);
}
.tdtt-social--rich .tdtt-social-chat__composer { box-shadow: 0 -1px 0 rgb(from var(--cyan) r g b / 0.2); }

/* ── pin bar ─────────────────────────────────────────────────────────────── */
.tdtt-social-pinbar {
  box-sizing: border-box; min-width: 0; background: var(--input);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  font-family: var(--body); color: var(--text);
}
.tdtt-social-pinbar__bar {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 8px 12px; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.tdtt-social-pinbar__bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.tdtt-social-pinbar__icon { flex: none; display: flex; color: var(--gold); }
.tdtt-social-pinbar__label {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdtt-social-pinbar__count {
  flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--bg); background: var(--gold);
}
.tdtt-social-pinbar__chev {
  flex: none; width: 7px; height: 7px; border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); transition: transform 0.15s;
}
.tdtt-social-pinbar.is-open .tdtt-social-pinbar__chev { transform: rotate(225deg); }
.tdtt-social-pinbar__list { display: none; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tdtt-social-pinbar.is-open .tdtt-social-pinbar__list { display: block; }
.tdtt-social-pinbar__item {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--surface-2);
}
.tdtt-social-pinbar__item:last-child { border-bottom: 0; }
.tdtt-social-pinbar__author { flex: none; font-size: 12px; font-weight: 700; color: var(--cyan); }
.tdtt-social-pinbar__text { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.tdtt-social-pinbar__unpin {
  flex: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer;
}
@media (hover: hover) {
  .tdtt-social-pinbar__unpin:hover { color: var(--red); }
}
.tdtt-social--rich .tdtt-social-pinbar {
  background: linear-gradient(90deg, rgb(from var(--gold) r g b / 0.10), transparent 60%), var(--input);
  box-shadow: inset 3px 0 0 var(--gold);
}
.tdtt-social--rich .tdtt-social-pinbar__icon { filter: drop-shadow(0 0 5px rgb(from var(--gold) r g b / 0.6)); }

/* ── trending ────────────────────────────────────────────────────────────── */
.tdtt-social-trending__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tdtt-social-trending__item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; row-gap: 4px;
}
.tdtt-social-trending__rank { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--muted); text-align: center; }
.tdtt-social-trending__item:first-child .tdtt-social-trending__rank { color: var(--gold); }
.tdtt-social-trending__name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdtt-social-trending__count { font-size: 12px; font-weight: 700; color: var(--text-dim); }
/* Heat bar: --heat is the fill, set inline as a percentage (style="--heat:72%"). */
.tdtt-social-trending__heat {
  grid-column: 2 / 4; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden;
}
.tdtt-social-trending__heat > i {
  display: block; height: 100%; width: var(--heat, 0%); border-radius: inherit;
  background: var(--grad-primary);
}
.tdtt-social--rich .tdtt-social-trending__heat > i { box-shadow: 0 0 10px rgb(from var(--magenta) r g b / 0.7); }

/* ── feed (Latest from your Houses / activity) ───────────────────────────── */
.tdtt-social-feed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tdtt-social-feed__item {
  display: flex; gap: 12px; padding: 10px; min-width: 0;
  background: var(--input); border: 1px solid var(--border); border-radius: 12px;
}
.tdtt-social-feed__badge {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 18%, var(--bg)); border: 1px solid var(--cyan);
}
.tdtt-social-feed__badge svg { width: 18px; height: 18px; }
.tdtt-social-feed__badge--announcement { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, var(--bg)); }
.tdtt-social-feed__badge--event { color: var(--orange); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 18%, var(--bg)); }
.tdtt-social-feed__badge--member { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, var(--bg)); }
.tdtt-social-feed__badge--lfg { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--bg)); }
.tdtt-social-feed__body { flex: 1; min-width: 0; }
.tdtt-social-feed__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tdtt-social-feed__meta { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.tdtt-social-feed__time { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tdtt-social--rich .tdtt-social-feed__item {
  background: linear-gradient(160deg, var(--input), rgb(from var(--bg) r g b / 0.7));
}
.tdtt-social--rich .tdtt-social-feed__badge { box-shadow: 0 0 14px -3px currentColor; }

/* ── friends online ──────────────────────────────────────────────────────── */
.tdtt-social-friendrail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tdtt-social-friendrail__item {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px; border-radius: 10px;
}
.tdtt-social-friendrail__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdtt-social-friendrail__name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-social-friendrail__sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-social-friendrail__item[data-status='online'] .tdtt-social-friendrail__sub { color: var(--green); }
.tdtt-social-friendrail__item[data-status='match'] .tdtt-social-friendrail__sub { color: var(--gold); }
.tdtt-social-friendrail__item[data-status='offline'] .tdtt-social-friendrail__sub { color: var(--muted); }
@media (hover: hover) {
  .tdtt-social-friendrail__item:hover { background: var(--surface-2); }
}

/* ── date card (event row) ───────────────────────────────────────────────── */
.tdtt-social-datecard {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: stretch;
  gap: 12px; min-width: 0; padding: 10px; box-sizing: border-box;
  background: var(--input); border: 1px solid var(--border); border-radius: 12px;
  font-family: var(--body); color: var(--text);
}
.tdtt-social-datecard__date {
  flex: none; width: 52px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 6px 0; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-hi);
}
.tdtt-social-datecard__month { font-family: var(--head); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.tdtt-social-datecard__day { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; color: var(--text); }
.tdtt-social-datecard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tdtt-social-datecard__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-social-datecard__meta { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Optional event image. Set an inline background (e.g. fallbackGradient(seed)) for
   the fallback; with no image and no inline background it stays a solid plate. */
.tdtt-social-datecard__art {
  flex: none; width: 76px; border-radius: 10px; background: var(--surface-2);
  background-size: cover; background-position: center; object-fit: cover;
}
.tdtt-social-datecard__cta { flex: none; align-self: center; }
@media (max-width: 420px) { .tdtt-social-datecard__art { display: none; } }
.tdtt-social--rich .tdtt-social-datecard {
  background: linear-gradient(160deg, var(--input), var(--bg));
  box-shadow: inset 0 0 0 1px rgb(from var(--orange) r g b / 0.12);
}
.tdtt-social--rich .tdtt-social-datecard__date { box-shadow: 0 0 16px -6px rgb(from var(--orange) r g b / 0.6); }
.tdtt-social--rich .tdtt-social-datecard__art { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%); mask-image: linear-gradient(90deg, transparent 0%, black 45%); }

/* ── channel-switch sheet (/m) ───────────────────────────────────────────── */
/* Solid by design: the panel is an opaque surface. The scrim dims with `opacity`
   (not a transparent colour) so it stays inside /m's no-alpha-colour rule. */
.tdtt-social-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.tdtt-social-sheet.is-open { display: block; }
.tdtt-social-sheet__scrim { position: absolute; inset: 0; background: var(--bg); opacity: 0.7; }
.tdtt-social-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  max-height: 72vh; overflow-y: auto; padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border-hi); border-radius: 18px 18px 0 0;
}
.tdtt-social-sheet__grab { width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--muted); }
.tdtt-social-sheet__title {
  margin: 0 0 8px; font-family: var(--head); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  .tdtt-social-sheet.is-open .tdtt-social-sheet__panel { animation: tdtt-social-sheet-up 0.2s ease-out; }
}
@keyframes tdtt-social-sheet-up {
  from { transform: translateY(24px); }
  to { transform: translateY(0); }
}

/* ── reactions ───────────────────────────────────────────────────────────── */
.tdtt-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-width: 0; }
.tdtt-reactions__pill,
.tdtt-reactions__add {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
  height: 26px; padding: 0 9px; margin: 0; border-radius: 999px;
  background: var(--input); border: 1px solid var(--border);
  font: inherit; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--text-dim);
  cursor: pointer;
}
.tdtt-reactions__emoji { font-size: 14px; line-height: 1; }
.tdtt-reactions__pill:focus-visible,
.tdtt-reactions__add:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) {
  .tdtt-reactions__pill:hover,
  .tdtt-reactions__add:hover { background: var(--surface-2); border-color: var(--border-hi); color: var(--text); }
}
/* "mine": solid accent fill + border (a toggle; not brackets, not the rail pill) */
.tdtt-reactions__pill--mine {
  color: var(--text); border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 22%, var(--bg));
}
.tdtt-social--rich .tdtt-reactions__pill--mine { box-shadow: 0 0 12px -3px rgb(from var(--cyan) r g b / 0.6); }

/* ── House primitives: shield, pill, chip, role ──────────────────────────── */
/* Hexagonal emblem shield. The outer element is the emblem-colour rim; its single
   child (an <img> or an initials <span>) is the same hexagon inset by the rim. */
.tdtt-house-shield {
  --sx-ac: var(--house-emblem, var(--chrome));
  position: relative; flex: none; display: inline-block; box-sizing: border-box;
  width: 56px; height: 62px; padding: 2px;
}
/* The emblem-colour rim is a clipped pseudo-element, NOT a clip-path on the shield
   itself: a filter on an element that is also clip-path'd is clipped away, so the
   rich glow would never draw. The shield stays unclipped; its rendered (hexagonal)
   children carry the clip, and the rich drop-shadow below follows their shape. */
.tdtt-house-shield::before {
  content: ''; position: absolute; inset: 0; background: var(--sx-ac);
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
}
.tdtt-house-shield > * {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  box-sizing: border-box; background: var(--surface-2); object-fit: cover;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--text);
}
.tdtt-house-shield--sm { width: 36px; height: 40px; }
.tdtt-house-shield--sm > * { font-size: 11px; }
.tdtt-house-shield--lg { width: 104px; height: 116px; }
.tdtt-house-shield--lg > * { font-size: 28px; }
.tdtt-social--rich .tdtt-house-shield { filter: drop-shadow(0 0 8px rgb(from var(--house-emblem, var(--chrome)) r g b / 0.7)); }

.tdtt-house-pill {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 22px; padding: 0 9px;
  border-radius: 999px; font-family: var(--head); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-dim); background: var(--input); border: 1px solid var(--border-hi);
}
.tdtt-house-pill--online { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--bg)); }
.tdtt-house-pill--local { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--bg)); }
.tdtt-house-pill--public { color: var(--text-dim); border-color: var(--muted); }
.tdtt-house-pill--recruiting { color: var(--magenta); border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 16%, var(--bg)); }
.tdtt-house-pill--request { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); }

.tdtt-house-chip {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 10px;
  border-radius: 999px; font-family: var(--body); font-size: 11.5px; font-weight: 600;
  color: var(--text-dim); background: var(--input); border: 1px solid var(--border-hi); white-space: nowrap;
}

.tdtt-house-role {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 20px; padding: 0 8px;
  border-radius: 6px; font-family: var(--head); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-dim); border: 1px solid var(--muted); background: var(--input);
}
.tdtt-house-role[data-role='OWNER'] { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); }
.tdtt-house-role[data-role='OFFICER'] { color: var(--magenta); border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 14%, var(--bg)); }
.tdtt-house-role[data-role='EVENT_ORGANIZER'] { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--bg)); }

/* ── house card (browse) ─────────────────────────────────────────────────── */
.tdtt-house-card {
  --sx-ac: var(--house-emblem, var(--chrome));
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  font-family: var(--body); color: var(--text);
}
.tdtt-house-card__art {
  position: relative; height: 112px; flex: none; overflow: hidden;
  background: var(--surface-2); background-size: cover; background-position: center;
}
.tdtt-house-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tdtt-house-card__ribbon { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.tdtt-house-card__badge { position: absolute; right: 10px; top: 10px; z-index: 1; }
.tdtt-house-card__shield { position: relative; z-index: 2; margin: -22px 0 0 14px; align-self: flex-start; }
.tdtt-house-card__body { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 14px; flex: 1; min-width: 0; }
.tdtt-house-card__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.tdtt-house-card__meta { margin: 0; font-size: 12px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tdtt-house-card__desc {
  margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tdtt-house-card__games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tdtt-house-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tdtt-house-card__avatars { display: flex; align-items: center; min-width: 0; }
.tdtt-house-card__avatars > * {
  width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--surface); background: var(--surface-2); object-fit: cover; flex: none;
}
.tdtt-house-card__avatars > :first-child { margin-left: 0; }
.tdtt-house-card__more { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.tdtt-house-card__members { font-size: 12px; color: var(--text-dim); }
.tdtt-house-card__cta { margin-left: auto; display: flex; gap: 8px; }
@media (hover: hover) {
  .tdtt-house-card:hover { border-color: var(--border-hi); }
}
.tdtt-social--rich .tdtt-house-card {
  background: linear-gradient(165deg, var(--surface), var(--bg));
  box-shadow: 0 0 0 1px rgb(from var(--sx-ac) r g b / 0.14), 0 10px 28px -16px rgb(from var(--sx-ac) r g b / 0.5);
}
.tdtt-social--rich .tdtt-house-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--sx-lattice); background-size: var(--sx-lattice-size);
  background-position: var(--sx-lattice-pos); opacity: 0.5;
}
.tdtt-social--rich .tdtt-house-card__art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 30%, var(--surface) 100%),
    radial-gradient(100% 120% at 80% 0%, rgb(from var(--sx-ac) r g b / 0.3), transparent 65%),
    repeating-linear-gradient(0deg, rgb(from var(--cyan) r g b / 0.06) 0 1px, transparent 1px 3px);
}
@media (hover: hover) {
  .tdtt-social--rich .tdtt-house-card:hover { box-shadow: 0 0 0 1px rgb(from var(--sx-ac) r g b / 0.5), 0 14px 34px -14px rgb(from var(--sx-ac) r g b / 0.7); }
}

/* ── house hero (detail) ─────────────────────────────────────────────────── */
.tdtt-house-hero {
  --sx-ac: var(--house-emblem, var(--chrome));
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; padding: 0 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  font-family: var(--body); color: var(--text);
}
.tdtt-house-hero__art {
  display: block; width: 100%; height: 120px; flex: none; object-fit: cover;
  background: var(--surface-2); background-size: cover; background-position: center;
}
.tdtt-house-hero__shield { margin: -36px 0 0 18px; position: relative; z-index: 2; align-self: flex-start; }
.tdtt-house-hero__main { padding: 0 18px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tdtt-house-hero__eyebrow {
  margin: 0; font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--sx-ac);
}
.tdtt-house-hero__title {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 4vw, 36px);
  line-height: 1.05; color: var(--text); overflow-wrap: anywhere;
}
.tdtt-house-hero__tag {
  font-family: var(--head); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  padding: 2px 9px; border-radius: 6px; color: var(--text-dim);
  background: var(--input); border: 1px solid var(--border-hi);
}
.tdtt-house-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.tdtt-house-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-dim); }
.tdtt-house-hero__desc { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.tdtt-house-hero__games { display: flex; flex-wrap: wrap; gap: 8px; }
.tdtt-house-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

.tdtt-social--rich .tdtt-house-hero {
  padding: 22px 22px 18px; gap: 10px; flex-direction: row; flex-wrap: wrap; align-items: flex-end;
  background:
    radial-gradient(120% 140% at 82% 18%, rgb(from var(--sx-ac) r g b / 0.26) 0%, transparent 62%),
    linear-gradient(160deg, var(--surface) 0%, var(--bg) 72%);
  box-shadow: inset 0 0 0 1px rgb(from var(--sx-ac) r g b / 0.2), 0 0 44px -14px rgb(from var(--sx-ac) r g b / 0.5);
}
.tdtt-social--rich .tdtt-house-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--sx-lattice); background-size: var(--sx-lattice-size);
  background-position: var(--sx-lattice-pos); opacity: 0.85;
}
.tdtt-social--rich .tdtt-house-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 40%, rgb(from var(--bg) r g b / 0.78) 100%);
}
.tdtt-social--rich .tdtt-house-hero__art {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, black 100%);
  mask-image: linear-gradient(90deg, transparent 15%, black 100%);
}
.tdtt-social--rich .tdtt-house-hero__shield { margin: 0; }
.tdtt-social--rich .tdtt-house-hero__main { padding: 0; flex: 1 1 320px; }
@media (max-width: 560px) {
  .tdtt-social--rich .tdtt-house-hero { flex-direction: column; align-items: stretch; }
  .tdtt-social--rich .tdtt-house-hero__main { flex-basis: auto; }
}

/* ── staff & moderators ──────────────────────────────────────────────────── */
.tdtt-house-staff__group { margin: 0 0 12px; padding: 0; list-style: none; --role-ac: var(--text-dim); }
.tdtt-house-staff__group:last-child { margin-bottom: 0; }
.tdtt-house-staff__group--owner { --role-ac: var(--gold); }
.tdtt-house-staff__group--moderator { --role-ac: var(--magenta); }
.tdtt-house-staff__group--organizer { --role-ac: var(--cyan); }
.tdtt-house-staff__group-title {
  margin: 0 0 6px; font-family: var(--head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--role-ac);
}
.tdtt-house-staff__row {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 4px; border-radius: 10px;
}
.tdtt-house-staff__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdtt-house-staff__name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-house-staff__sub { font-size: 11.5px; color: var(--text-dim); }
.tdtt-house-staff__group .tdtt-house-staff__avatar { border-color: var(--role-ac); }
.tdtt-social--rich .tdtt-house-staff__group .tdtt-house-staff__avatar { box-shadow: 0 0 10px -2px rgb(from var(--role-ac) r g b / 0.55); }

/* ── supported games ─────────────────────────────────────────────────────── */
.tdtt-house-games__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.tdtt-house-games__tile { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; text-align: center; }
.tdtt-house-games__tile .tdtt-gametile__plate { aspect-ratio: 3 / 2; padding: 10px 12px; border: 1px solid var(--border); }
.tdtt-house-games__label {
  font-size: 11.5px; font-weight: 600; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdtt-social--rich .tdtt-house-games__tile .tdtt-gametile__plate {
  background: linear-gradient(160deg, var(--input), var(--bg));
  box-shadow: inset 0 0 0 1px rgb(from var(--cyan) r g b / 0.08);
}

/* ── gallery ─────────────────────────────────────────────────────────────── */
/* Masonry via CSS columns: House art and event images keep their own aspect.
   Each __item is a <button> so it is lightbox-ready (keyboard + click) — wire the
   lightbox on the button; this file only draws it. */
.tdtt-house-gallery__grid { column-width: 150px; column-gap: 10px; }
.tdtt-house-gallery__item {
  position: relative; display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 0;
  break-inside: avoid; overflow: hidden; cursor: zoom-in; font: inherit; color: inherit;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.tdtt-house-gallery__item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-house-gallery__img { display: block; width: 100%; height: auto; }
.tdtt-house-gallery__cap {
  display: block; padding: 6px 10px; font-size: 11.5px; color: var(--text-dim); text-align: left;
  background: var(--input);
}
@media (hover: hover) {
  .tdtt-house-gallery__item:hover { border-color: var(--border-hi); }
}
.tdtt-social--rich .tdtt-house-gallery__item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(from var(--cyan) r g b / 0.05) 0 1px, transparent 1px 3px);
}
.tdtt-social--rich .tdtt-house-gallery__cap { background: linear-gradient(0deg, var(--input), rgb(from var(--input) r g b / 0.85)); }

/* ── roster ──────────────────────────────────────────────────────────────── */
.tdtt-house-roster__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tdtt-house-roster__row {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px; border-radius: 10px;
}
.tdtt-house-roster__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdtt-house-roster__name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdtt-house-roster__sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  .tdtt-house-roster__row:hover { background: var(--surface-2); }
}

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .tdtt-social-hero { padding: 16px 14px 14px; }
  .tdtt-social-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdtt-house-card__cta { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tdtt-social-channels__item,
  .tdtt-social-pinbar__chev { transition: none; }
}