:root {
  color-scheme: light;
  --u: min(1px, calc(100vw / 720));
  --night-950: #071126;
  --night-900: #0b1730;
  --night-800: #151d3a;
  --night-card: rgba(18, 28, 56, .9);
  --plum-700: #3c2858;
  --gold-500: #d5a653;
  --gold-300: #f0d28a;
  --cream-050: #fff7e9;
  --cream-200: #e9dcc4;
  --text-main: #fff7e8;
  --text-muted: #b9b4c8;
  --ink: #493322;
  --success: #69c88d;
  --danger: #d86b70;
  --info: #8ea9e6;
  --scrim: rgba(3, 8, 20, .76);
  --social-canvas: #f8fafd;
  --social-surface: rgba(255, 255, 255, .94);
  --social-surface-strong: #ffffff;
  --social-border: #dfe6f1;
  --social-indigo: #6258d9;
  --social-indigo-soft: #eef0ff;
  --social-coral: #f1848d;
  --social-ink: #20283a;
  --social-muted: #738096;
  --social-shadow: 0 14px 38px rgba(71, 91, 128, .12);
  --radius-card: calc(20 * var(--u));
  --radius-control: calc(16 * var(--u));
  --shadow-dark: 0 calc(16 * var(--u)) calc(42 * var(--u)) rgba(0, 3, 12, .3);
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html { background: var(--social-canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--social-ink); background: var(--social-canvas); }
body.has-overlay { overflow: hidden; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:not(:disabled) { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(240, 210, 138, .75); outline-offset: 2px; }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .48; }
img {
  display: block;
  max-width: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
input,
textarea,
[contenteditable="true"],
[contenteditable="plaintext-only"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
[hidden] { display: none !important; }

#app { width: 100%; min-height: 100dvh; }
.phone-app {
  position: relative;
  isolation: isolate;
  width: min(100vw, 720px);
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--social-canvas);
  background-image:
    radial-gradient(circle at 8% 10%, rgba(98, 88, 217, .12), transparent 26%),
    radial-gradient(circle at 92% 24%, rgba(241, 132, 141, .1), transparent 24%),
    radial-gradient(circle at 18% 88%, rgba(116, 167, 230, .1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafd 54%, #f4f7fc 100%);
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 80px rgba(71, 91, 128, .12);
}

.phone-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .2));
}

.scroll-view {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-view::-webkit-scrollbar { display: none; }

.user-bar {
  position: relative;
  z-index: 2;
  min-height: calc(88 * var(--u) + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: env(safe-area-inset-top) calc(28 * var(--u)) 0;
  background: rgba(7, 17, 38, .75);
  border-bottom: 1px solid rgba(240, 210, 138, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.user-identity, .coin-balance, .top-icon, .detail-header button, .bottom-tabs button, .room-dock button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.user-identity { min-width: 0; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0; text-align: left; }
.avatar { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 38px; min-height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-500); box-shadow: 0 0 0 2px rgba(12, 22, 48, .8); }
.user-identity > span { min-width: 0; }
.user-identity strong, .user-identity small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-identity strong { max-width: calc(210 * var(--u)); font-size: max(13px, calc(24 * var(--u))); line-height: 1.25; }
.user-identity small { margin-top: calc(3 * var(--u)); color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); }

.coin-balance {
  min-width: calc(150 * var(--u));
  height: max(38px, calc(56 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px solid rgba(240, 210, 138, .45);
  border-radius: 999px;
  background: rgba(8, 15, 35, .78);
}
.coin-balance img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.coin-balance strong { font-size: max(12px, calc(22 * var(--u))); font-variant-numeric: tabular-nums; }
.coin-balance span { position: relative; width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex: 0 0 auto; overflow: hidden; color: var(--night-950); background: var(--gold-300); border-radius: 50%; font-size: 0; }
.coin-balance span::before, .coin-balance span::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(7px, calc(12 * var(--u))); height: max(1.5px, calc(2 * var(--u))); border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); transform-origin: center; }
.coin-balance span::after { transform: translate(-50%, -50%) rotate(90deg); }
.top-icon { position: relative; width: max(44px, calc(64 * var(--u))); height: max(44px, calc(64 * var(--u))); display: grid; place-items: center; padding: 0; }
.top-icon img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.top-icon i { position: absolute; top: calc(2 * var(--u)); right: calc(1 * var(--u)); min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--night-900); border-radius: 999px; background: var(--danger); color: #fff7e8; font-size: 10px; font-style: normal; }

.bottom-tabs {
  position: relative;
  z-index: 3;
  min-height: calc(104 * var(--u) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(240, 210, 138, .22);
  background: rgba(7, 15, 34, .95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bottom-tabs button { position: relative; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); color: var(--text-muted); font-size: max(12px, calc(22 * var(--u))); }
.bottom-tabs button + button { border-left: 1px solid rgba(240, 210, 138, .14); }
.bottom-tabs button::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: transparent; }
.bottom-tabs button.is-active { color: var(--gold-300); background: rgba(60, 40, 88, .52); }
.bottom-tabs button.is-active::before { background: var(--gold-300); }
.bottom-tabs img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); opacity: .7; }
.bottom-tabs .is-active img { opacity: 1; }

.rooms-view, .family-view, .wallet-view, .list-page { padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u)); }
.welcome-copy { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u)); }
.welcome-copy p { margin: 0; color: var(--gold-300); font-size: max(20px, calc(34 * var(--u))); line-height: 1.3; font-weight: 700; letter-spacing: .04em; }
.welcome-copy span { display: block; margin-top: calc(4 * var(--u)); color: var(--text-muted); font-size: max(11px, calc(20 * var(--u))); }

.room-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--u)); }
.room-shortcuts button {
  position: relative;
  min-height: calc(112 * var(--u));
  display: grid;
  grid-template-columns: calc(64 * var(--u)) 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 calc(10 * var(--u));
  padding: calc(14 * var(--u));
  overflow: hidden;
  border: 1px solid rgba(240, 210, 138, .4);
  border-radius: var(--radius-card);
  background: rgba(57, 39, 83, .82);
  color: var(--text-main);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 247, 232, .12), var(--shadow-dark);
}
.room-shortcuts button:nth-child(2) { background: rgba(29, 36, 77, .86); }
.room-shortcuts button > span { grid-row: 1 / 3; width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: rgba(255, 247, 232, .08); }
.room-shortcuts img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.room-shortcuts strong { align-self: end; font-size: max(13px, calc(25 * var(--u))); }
.room-shortcuts small { align-self: start; color: var(--text-muted); font-size: max(10px, calc(17 * var(--u))); }

.section-heading { min-height: calc(66 * var(--u)); display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: calc(20 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); }
.section-heading h1, .section-heading h2 { margin: 0; color: var(--gold-300); font-size: max(15px, calc(28 * var(--u))); line-height: 1.3; }
.section-heading span { color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); }
.section-heading.is-centered { justify-content: center; align-items: center; }

.room-list, .family-list, .member-list, .ledger-list { display: grid; gap: calc(14 * var(--u)); }
.room-card {
  position: relative;
  min-height: calc(160 * var(--u));
  display: grid;
  grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr);
  gap: calc(18 * var(--u));
  align-items: stretch;
  padding: calc(10 * var(--u));
  overflow: hidden;
  border: 1px solid rgba(240, 210, 138, .35);
  border-radius: var(--radius-card);
  background: rgba(16, 26, 52, .9);
  color: var(--text-main);
  text-align: left;
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 247, 232, .08);
}
.room-cover { width: calc(220 * var(--u)); height: calc(136 * var(--u)); align-self: center; border-radius: calc(14 * var(--u)); object-fit: cover; }
.room-card-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.room-card-copy > strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cream-050); font-size: max(13px, calc(25 * var(--u))); }
.room-card-copy > small { margin-top: calc(5 * var(--u)); color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); }
.room-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--cream-200); font-size: max(9px, calc(17 * var(--u))); }
.avatar-stack { display: flex; padding-left: calc(7 * var(--u)); }
.avatar-stack img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 22px; min-height: 22px; margin-left: calc(-7 * var(--u)); border: 1px solid var(--gold-300); border-radius: 50%; object-fit: cover; }
.room-card > em { position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); max-width: 40%; padding: calc(3 * var(--u)) calc(10 * var(--u)); overflow: hidden; border-radius: 999px; background: rgba(60, 40, 88, .9); color: var(--gold-300); font-size: max(9px, calc(16 * var(--u))); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }

.detail-header {
  position: relative;
  z-index: 3;
  min-height: calc(88 * var(--u) + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: env(safe-area-inset-top) calc(18 * var(--u)) 0;
  border-bottom: 1px solid rgba(240, 210, 138, .18);
  background: rgba(5, 14, 32, .74);
  backdrop-filter: blur(12px);
}
.detail-header button { width: max(44px, calc(64 * var(--u))); height: max(44px, calc(64 * var(--u))); display: grid; place-items: center; padding: calc(8 * var(--u)); }
.detail-header button img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.detail-header > img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border: 1px solid var(--gold-500); border-radius: 50%; object-fit: cover; }
.detail-header > span { min-width: 0; }
.detail-header > span strong, .detail-header > span small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detail-header > span strong { color: var(--cream-050); font-size: max(13px, calc(25 * var(--u))); }
.detail-header > span small { margin-top: calc(2 * var(--u)); color: var(--text-muted); font-size: max(9px, calc(17 * var(--u))); }
.page-header { grid-template-columns: auto 1fr auto; }
.page-header h1 { margin: 0; color: var(--gold-300); font-size: max(17px, calc(32 * var(--u))); text-align: center; }
.page-header > span { width: max(44px, calc(64 * var(--u))); }

.room-detail-view { display: flex; flex-direction: column; padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); }
.mic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)) calc(8 * var(--u)); }
.mic-seat { position: relative; min-width: 0; min-height: calc(148 * var(--u)); display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; color: var(--text-main); }
.mic-seat > span { position: relative; width: calc(92 * var(--u)); height: calc(92 * var(--u)); min-width: 46px; min-height: 46px; display: grid; place-items: center; border: 2px solid rgba(240, 210, 138, .62); border-radius: 50%; background: rgba(18, 28, 56, .9); box-shadow: inset 0 0 0 3px rgba(5, 12, 27, .68); }
.mic-seat > span img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mic-seat.is-empty > span img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); opacity: .82; }
.mic-seat.is-speaking > span { border-color: var(--success); box-shadow: 0 0 0 4px rgba(105, 200, 141, .24), inset 0 0 0 3px rgba(5, 12, 27, .68); }
.mic-seat.is-speaking > span::after { content: ""; position: absolute; inset: calc(-6 * var(--u)); border: 2px solid rgba(105, 200, 141, .72); border-radius: 50%; pointer-events: none; }
.mic-seat strong { max-width: 100%; margin-top: calc(7 * var(--u)); overflow: hidden; color: var(--cream-050); font-size: max(10px, calc(19 * var(--u))); white-space: nowrap; text-overflow: ellipsis; }
.mic-seat small { min-height: calc(22 * var(--u)); color: var(--gold-300); font-size: max(8px, calc(15 * var(--u))); }
.mic-seat > i { position: absolute; top: calc(72 * var(--u)); right: calc(18 * var(--u)); width: max(14px, calc(26 * var(--u))); height: max(14px, calc(26 * var(--u))); display: grid; place-items: center; border: 1px solid rgba(240, 210, 138, .45); border-radius: 50%; background: var(--night-950); color: var(--text-muted); font-size: max(8px, calc(14 * var(--u))); font-style: normal; }

.game-banner, .family-game-card { position: relative; min-height: calc(184 * var(--u)); display: block; margin-top: calc(12 * var(--u)); padding: 0; overflow: hidden; border: 1px solid var(--gold-500); border-radius: var(--radius-card); background: var(--night-800); color: var(--text-main); text-align: left; box-shadow: var(--shadow-dark); }
.game-banner::after, .family-game-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 12, 30, .58), rgba(5, 12, 30, .06)); pointer-events: none; }
.game-banner > img, .family-game-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-banner > span, .family-game-card > span { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: calc(184 * var(--u)); padding: calc(18 * var(--u)) calc(210 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)); }
.game-banner strong { color: var(--gold-300); font-size: max(24px, calc(48 * var(--u))); line-height: 1.2; letter-spacing: .01em; }
.family-game-card strong { color: var(--gold-300); font-size: max(14px, calc(28 * var(--u))); }
.game-banner small, .family-game-card small { margin-top: calc(5 * var(--u)); color: var(--cream-200); font-size: max(10px, calc(18 * var(--u))); }
.game-banner em, .family-game-card em { position: absolute; right: calc(18 * var(--u)); bottom: calc(16 * var(--u)); z-index: 2; padding: calc(11 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--gold-300); border-radius: 999px; background: rgba(7, 17, 38, .82); color: var(--cream-050); font-size: max(11px, calc(20 * var(--u))); font-style: normal; }

.chat-stream { min-height: calc(150 * var(--u)); display: flex; flex: 1; flex-direction: column; justify-content: end; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(4 * var(--u)); }
.chat-message { display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) auto; align-items: end; gap: calc(9 * var(--u)); }
.chat-message > img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 24px; min-height: 24px; border: 1px solid rgba(240, 210, 138, .48); border-radius: 50%; object-fit: cover; }
.chat-message p { width: fit-content; max-width: calc(520 * var(--u)); margin: 0; padding: calc(6 * var(--u)) calc(13 * var(--u)); border: 1px solid rgba(233, 220, 196, .22); border-radius: calc(12 * var(--u)); background: rgba(23, 31, 56, .78); }
.chat-message p strong { display: block; color: var(--gold-300); font-size: max(9px, calc(16 * var(--u))); }
.chat-message p span { display: block; margin-top: calc(2 * var(--u)); color: var(--cream-050); font-size: max(11px, calc(19 * var(--u))); line-height: 1.4; overflow-wrap: anywhere; }
.chat-message time { color: var(--text-muted); font-size: max(8px, calc(14 * var(--u))); }
.empty-chat { margin: auto; color: var(--text-muted); font-size: max(11px, calc(19 * var(--u))); text-align: center; }

.room-dock {
  position: relative;
  z-index: 3;
  min-height: calc(104 * var(--u) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 calc(10 * var(--u)) env(safe-area-inset-bottom);
  border-top: 1px solid rgba(240, 210, 138, .28);
  background: rgba(7, 15, 34, .96);
  backdrop-filter: blur(18px);
}
.room-dock button { min-width: 44px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); padding: 0; color: var(--cream-200); font-size: max(9px, calc(17 * var(--u))); }
.room-dock button img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.room-dock .is-on-seat, .room-dock .is-muted { color: var(--gold-300); }

.family-discover-hero { min-height: calc(430 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(16 * var(--u)); text-align: center; }
.family-discover-hero img { width: calc(260 * var(--u)); height: calc(260 * var(--u)); object-fit: contain; }
.family-discover-hero h1 { margin: calc(-28 * var(--u)) 0 calc(18 * var(--u)); color: var(--gold-300); font-size: max(20px, calc(36 * var(--u))); line-height: 1.35; }
.art-button, .outline-button {
  min-width: calc(182 * var(--u));
  min-height: max(44px, calc(62 * var(--u)));
  padding: calc(10 * var(--u)) calc(28 * var(--u));
  border: 1px solid #f2d48b;
  border-radius: 999px;
  background: #b98235;
  color: #fff8d8;
  box-shadow: inset 0 2px 0 rgba(255, 245, 204, .38), inset 0 -3px 0 rgba(99, 54, 17, .32), 0 8px 20px rgba(4, 8, 21, .26);
  font-size: max(13px, calc(24 * var(--u)));
  font-weight: 700;
  white-space: nowrap;
}
.outline-button { background: transparent; color: var(--ink); border-color: #a98252; box-shadow: none; }

.family-card { min-height: calc(152 * var(--u)); display: grid; grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr) auto; gap: calc(14 * var(--u)); align-items: center; padding: calc(12 * var(--u)); border: 1px solid rgba(118, 82, 45, .35); border-radius: var(--radius-card); background: rgba(255, 247, 233, .96); color: var(--ink); box-shadow: var(--shadow-dark); }
.family-card > img { width: calc(104 * var(--u)); height: calc(104 * var(--u)); object-fit: contain; }
.family-card > div { min-width: 0; }
.family-card strong, .family-card small, .family-card p { display: block; }
.family-card strong { font-size: max(13px, calc(25 * var(--u))); }
.family-card small { color: #806849; font-size: max(9px, calc(17 * var(--u))); }
.family-card p { margin: calc(4 * var(--u)) 0 0; overflow: hidden; font-size: max(10px, calc(17 * var(--u))); white-space: nowrap; text-overflow: ellipsis; }
.family-card > span { display: grid; justify-items: end; gap: calc(12 * var(--u)); }
.family-card > span button { min-width: max(54px, calc(96 * var(--u))); min-height: 36px; border: 1px solid #dfbc71; border-radius: 999px; background: #b98235; color: #fff8d8; }

.family-hero { position: relative; min-height: calc(290 * var(--u)); display: grid; grid-template-columns: calc(176 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); align-items: center; padding: calc(16 * var(--u)) calc(10 * var(--u)) calc(84 * var(--u)); }
.family-crest { width: calc(176 * var(--u)); height: calc(176 * var(--u)); object-fit: contain; }
.family-hero > div span { color: var(--text-muted); font-size: max(9px, calc(17 * var(--u))); }
.family-hero h1 { margin: calc(3 * var(--u)) 0; color: var(--gold-300); font-size: max(21px, calc(38 * var(--u))); }
.family-hero p { margin: 0 0 calc(6 * var(--u)); color: var(--cream-200); font-size: max(11px, calc(20 * var(--u))); }
.family-hero small { color: var(--gold-300); font-size: max(10px, calc(18 * var(--u))); }
.family-avatar-row { position: absolute; left: calc(48 * var(--u)); right: calc(48 * var(--u)); bottom: calc(16 * var(--u)); display: flex; align-items: center; justify-content: center; }
.family-avatar-row img, .family-avatar-row > span { width: calc(56 * var(--u)); height: calc(56 * var(--u)); min-width: 28px; min-height: 28px; margin-left: calc(-7 * var(--u)); border: 2px solid var(--gold-500); border-radius: 50%; object-fit: cover; }
.family-avatar-row > span { display: grid; place-items: center; background: var(--plum-700); color: var(--cream-050); font-size: max(9px, calc(17 * var(--u))); }
.family-game-card { width: 100%; margin-top: 0; }
.family-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.family-actions button { min-height: calc(124 * var(--u)); display: grid; grid-template-columns: calc(66 * var(--u)) 1fr; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid rgba(240, 210, 138, .38); border-radius: var(--radius-card); background: rgba(37, 35, 79, .86); color: var(--text-main); text-align: left; }
.family-actions img { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.family-actions strong, .family-actions small { display: block; }
.family-actions strong { color: var(--gold-300); font-size: max(12px, calc(22 * var(--u))); }
.family-actions small { margin-top: calc(2 * var(--u)); color: var(--text-muted); font-size: max(9px, calc(16 * var(--u))); line-height: 1.35; }
.family-activity { margin-top: calc(16 * var(--u)); }
.family-activity h2 { margin: 0 0 calc(8 * var(--u)); color: var(--gold-300); font-size: max(13px, calc(23 * var(--u))); }
.family-activity p { display: grid; grid-template-columns: calc(48 * var(--u)) 1fr auto; align-items: center; gap: calc(10 * var(--u)); margin: 0; padding: calc(10 * var(--u)); border: 1px solid rgba(240, 210, 138, .2); border-radius: var(--radius-control); background: rgba(15, 26, 53, .82); }
.family-activity img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; object-fit: cover; }
.family-activity span { font-size: max(10px, calc(18 * var(--u))); }
.family-activity time { color: var(--text-muted); font-size: max(8px, calc(15 * var(--u))); }
.danger-link { width: 100%; min-height: max(44px, calc(62 * var(--u))); margin-top: calc(16 * var(--u)); border: 1px solid rgba(216, 107, 112, .38); border-radius: var(--radius-control); background: rgba(216, 107, 112, .09); color: #ff9da1; font-size: max(12px, calc(21 * var(--u))); }

.conversation-view { padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u)); }
.conversation-family { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(22 * var(--u)); padding: calc(12 * var(--u)); border: 1px solid rgba(240, 210, 138, .28); border-radius: var(--radius-card); background: rgba(16, 25, 52, .86); }
.conversation-family img { width: calc(72 * var(--u)); height: calc(72 * var(--u)); object-fit: contain; }
.conversation-family strong, .conversation-family small { display: block; }
.conversation-family strong { color: var(--gold-300); font-size: max(13px, calc(24 * var(--u))); }
.conversation-family small { color: var(--text-muted); font-size: max(9px, calc(17 * var(--u))); }
.conversation-view .chat-message { margin-bottom: calc(12 * var(--u)); }
.family-game-message { margin: calc(16 * var(--u)) 0; }
.family-game-message > div { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(6 * var(--u)); color: var(--gold-300); font-size: max(10px, calc(18 * var(--u))); }
.family-game-message > div img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; object-fit: cover; }
.family-game-message > button { width: calc(430 * var(--u)); max-width: 78%; padding: calc(8 * var(--u)); overflow: hidden; border: 1px solid var(--gold-500); border-radius: var(--radius-card); background: var(--cream-050); color: var(--ink); text-align: left; }
.family-game-message > button > img { width: 100%; aspect-ratio: 16/7; border-radius: calc(12 * var(--u)); object-fit: cover; }
.family-game-message > button > span { display: block; padding: calc(8 * var(--u)); }
.family-game-message strong, .family-game-message small { display: block; }
.family-game-message strong { font-size: max(12px, calc(22 * var(--u))); }
.family-game-message small { color: #806849; font-size: max(9px, calc(17 * var(--u))); }
.chat-composer { min-height: calc(96 * var(--u) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr max(44px, calc(72 * var(--u))); gap: calc(12 * var(--u)); align-items: center; padding: calc(12 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(240, 210, 138, .2); background: rgba(7, 15, 34, .96); }
.chat-composer button { min-height: 44px; border: 1px solid rgba(240, 210, 138, .35); border-radius: 999px; background: rgba(255, 247, 232, .08); color: var(--text-muted); text-align: left; padding: 0 calc(18 * var(--u)); }
.chat-composer button:last-child { display: grid; place-items: center; padding: calc(8 * var(--u)); border-radius: 50%; }
.chat-composer img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }

.member-list button { min-height: calc(120 * var(--u)); display: grid; grid-template-columns: calc(80 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)); border: 1px solid rgba(240, 210, 138, .24); border-radius: var(--radius-card); background: rgba(16, 26, 52, .88); color: var(--text-main); text-align: left; }
.friend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8 * var(--u)); align-items: stretch; }
.friend-row > button:first-child { min-width: 0; }
.friend-delete { width: max(72px, calc(96 * var(--u))); height: max(42px, calc(48 * var(--u))); min-width: 0; min-height: max(42px, calc(48 * var(--u))) !important; align-self: center; display: grid !important; place-items: center; padding: 0; border: 1px solid rgba(216, 107, 112, .55) !important; border-radius: var(--radius-control); background: rgba(104, 35, 58, .72) !important; color: #ffd8d8 !important; font-size: max(10px, calc(17 * var(--u))); }
.member-list button > img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border: 2px solid rgba(240, 210, 138, .54); border-radius: 50%; object-fit: cover; }
.member-list strong, .member-list small { display: block; }
.member-list strong { color: var(--cream-050); font-size: max(13px, calc(24 * var(--u))); }
.member-list small { max-width: calc(420 * var(--u)); margin-top: calc(4 * var(--u)); overflow: hidden; color: var(--text-muted); font-size: max(9px, calc(17 * var(--u))); white-space: nowrap; text-overflow: ellipsis; }
.member-list em { padding: calc(4 * var(--u)) calc(12 * var(--u)); border: 1px solid rgba(240, 210, 138, .3); border-radius: 999px; color: var(--gold-300); font-size: max(9px, calc(16 * var(--u))); font-style: normal; }
.member-list i img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.request-card { margin-bottom: calc(12 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid rgba(240, 210, 138, .34); border-radius: var(--radius-card); background: rgba(60, 40, 88, .86); }
.request-card > div { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.request-card > div > img { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.request-card strong, .request-card small { display: block; }
.request-card strong { color: var(--gold-300); font-size: max(12px, calc(22 * var(--u))); }
.request-card small { color: var(--text-muted); font-size: max(9px, calc(17 * var(--u))); }
.request-card > button { width: 100%; min-height: 40px; margin-top: calc(12 * var(--u)); border: 1px solid var(--gold-300); border-radius: 999px; background: #b98235; color: #fff8d8; }
.friend-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }

.wallet-view { padding-bottom: calc(170 * var(--u)); }
.balance-card { position: relative; min-height: calc(232 * var(--u)); display: grid; grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr); align-items: center; padding: calc(14 * var(--u)); border: 1px solid rgba(240, 210, 138, .46); border-radius: var(--radius-card); background: rgba(28, 34, 73, .9); box-shadow: var(--shadow-dark); }
.balance-card > img { width: calc(205 * var(--u)); height: calc(205 * var(--u)); object-fit: contain; }
.balance-card span > strong, .balance-card span > small, .balance-card span > b { display: block; }
.balance-card span > strong { font-size: max(13px, calc(24 * var(--u))); }
.balance-card span > small { margin-top: calc(8 * var(--u)); color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); }
.balance-card span > b { margin-top: calc(3 * var(--u)); color: var(--gold-300); font-size: max(23px, calc(42 * var(--u))); font-variant-numeric: tabular-nums; }
.balance-card span > b i { font-size: max(11px, calc(20 * var(--u))); font-style: normal; }
.balance-card > button { position: absolute; right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); border: 0; background: transparent; color: var(--cream-200); font-size: max(10px, calc(18 * var(--u))); }
.package-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.coin-package { position: relative; min-height: calc(168 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(12 * var(--u)); overflow: hidden; border: 1px solid rgba(240, 210, 138, .3); border-radius: var(--radius-card); background: rgba(28, 34, 73, .9); color: var(--text-main); box-shadow: inset 0 1px 0 rgba(255, 247, 232, .08); }
.coin-package.is-selected { border: calc(4 * var(--u)) solid var(--gold-500); box-shadow: 0 0 0 2px rgba(240, 210, 138, .22), inset 0 1px 0 rgba(255, 247, 232, .1); }
.coin-package strong { color: var(--gold-300); font-size: max(18px, calc(34 * var(--u))); font-variant-numeric: tabular-nums; }
.coin-package strong small { font-size: max(10px, calc(18 * var(--u))); }
.coin-package > span { margin-top: calc(8 * var(--u)); font-size: max(14px, calc(26 * var(--u))); }
.coin-package em { position: absolute; top: 0; left: 0; padding: calc(4 * var(--u)) calc(13 * var(--u)); border-radius: 0 0 calc(12 * var(--u)) 0; background: #8f4f3f; color: #fff7e8; font-size: max(9px, calc(16 * var(--u))); font-style: normal; }
.withdraw-link { width: 100%; min-height: 44px; margin-top: calc(16 * var(--u)); border: 1px solid rgba(240, 210, 138, .3); border-radius: var(--radius-control); background: rgba(16, 26, 52, .7); color: var(--gold-300); }
.demo-note { margin: calc(12 * var(--u)) 0; color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); text-align: center; }
.wallet-checkout { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; min-height: calc(144 * var(--u) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(28 * var(--u)) calc(16 * var(--u) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(240, 210, 138, .3); background: rgba(255, 247, 233, .97); color: var(--ink); }
.wallet-checkout span { font-size: max(12px, calc(21 * var(--u))); }
.wallet-checkout span strong { color: #a46f2d; font-size: max(18px, calc(32 * var(--u))); }

.ledger-summary { min-height: calc(180 * var(--u)); display: flex; align-items: baseline; justify-content: center; gap: calc(8 * var(--u)); margin-bottom: calc(20 * var(--u)); border: 1px solid rgba(240, 210, 138, .34); border-radius: var(--radius-card); background: rgba(28, 34, 73, .88); color: var(--text-muted); }
.ledger-summary strong { color: var(--gold-300); font-size: max(28px, calc(52 * var(--u))); }
.ledger-list article { min-height: calc(108 * var(--u)); display: grid; grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)); border: 1px solid rgba(240, 210, 138, .2); border-radius: var(--radius-card); background: rgba(16, 26, 52, .86); }
.ledger-list article > img { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.ledger-list strong, .ledger-list small { display: block; }
.ledger-list strong { font-size: max(12px, calc(21 * var(--u))); }
.ledger-list small { color: var(--text-muted); font-size: max(9px, calc(16 * var(--u))); }
.ledger-list b { color: #ff9da1; font-size: max(14px, calc(25 * var(--u))); font-variant-numeric: tabular-nums; }
.ledger-list b.is-plus { color: var(--success); }

.success-page { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(90 * var(--u)) calc(36 * var(--u)) calc(60 * var(--u)); text-align: center; }
.success-page .back-float { position: absolute; top: calc(18 * var(--u) + env(safe-area-inset-top)); left: calc(18 * var(--u)); width: max(44px, calc(64 * var(--u))); height: max(44px, calc(64 * var(--u))); border: 0; background: transparent; }
.success-page .back-float img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.success-page h1 { margin: 0; color: var(--gold-300); font-size: max(20px, calc(36 * var(--u))); }
.success-page > img { width: calc(320 * var(--u)); height: calc(320 * var(--u)); margin: calc(12 * var(--u)) 0 calc(-20 * var(--u)); object-fit: contain; }
.success-page > strong { color: var(--gold-300); font-size: max(28px, calc(52 * var(--u))); }
.success-page > div { width: 100%; max-width: calc(648 * var(--u)); display: flex; justify-content: space-between; margin: calc(28 * var(--u)) 0; padding: calc(20 * var(--u)); border: 1px solid rgba(240, 210, 138, .34); border-radius: var(--radius-card); background: rgba(27, 34, 73, .88); }
.success-page > div small { color: var(--text-muted); }
.success-page > div b { color: var(--gold-300); }
.success-page .art-button, .success-page .outline-button { width: min(100%, calc(560 * var(--u))); margin-top: calc(12 * var(--u)); }
.success-page .outline-button { color: var(--gold-300); border-color: var(--gold-500); }

.onboarding { justify-content: center; background-position: center; }
.onboarding::before { background: linear-gradient(to bottom, rgba(6, 13, 34, .05), rgba(6, 13, 34, .24) 45%, rgba(4, 8, 23, .88)); }
.onboarding-petals { position: absolute; inset: 0; pointer-events: none; }
.onboarding-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: calc(54 * var(--u) + env(safe-area-inset-top)) calc(36 * var(--u)) calc(54 * var(--u) + env(safe-area-inset-bottom)); overflow-y: auto; }
.onboarding-brand { margin-bottom: calc(34 * var(--u)); padding-top: calc(20 * var(--u)); text-align: center; }
.onboarding-brand span { display: block; color: var(--gold-300); font-size: max(32px, calc(64 * var(--u))); font-weight: 700; letter-spacing: .12em; text-shadow: 0 4px 18px rgba(213, 166, 83, .25); }
.onboarding-brand small { display: block; margin-top: calc(6 * var(--u)); color: var(--cream-200); font-size: max(12px, calc(22 * var(--u))); letter-spacing: .16em; }
.language-picker { width: min(100%, calc(520 * var(--u))); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); margin: 0 0 calc(18 * var(--u)); padding: calc(6 * var(--u)); border: 1px solid var(--social-border); border-radius: calc(18 * var(--u)); background: rgba(255, 255, 255, .82); box-shadow: var(--social-shadow); direction: ltr; }
.language-option { min-height: max(38px, calc(58 * var(--u))); border: 0; border-radius: calc(13 * var(--u)); background: transparent; color: var(--social-muted); font-size: max(13px, calc(21 * var(--u))); font-weight: 700; }
.language-option.is-selected { color: var(--social-indigo); background: var(--social-indigo-soft); box-shadow: inset 0 0 0 1px rgba(98, 88, 217, .18); }
html[dir="rtl"] .language-option { direction: ltr; }
.gender-options { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.gender-card { position: relative; min-height: min(calc(430 * var(--u)), 34vh); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 calc(24 * var(--u)); overflow: hidden; border: 2px solid rgba(240, 210, 138, .42); border-radius: calc(32 * var(--u)); background: rgba(60, 40, 88, .58); color: var(--text-main); box-shadow: var(--shadow-dark); }
.gender-card:nth-child(2) { background: rgba(30, 49, 91, .64); }
.gender-card.is-selected { border-color: var(--gold-300); box-shadow: 0 0 0 3px rgba(240, 210, 138, .18), var(--shadow-dark); }
.gender-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.gender-card::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(26, 15, 42, .96)); }
.gender-card strong, .gender-card span { position: relative; z-index: 1; }
.gender-card strong { font-size: max(16px, calc(30 * var(--u))); }
.gender-card span { position: absolute; left: calc(16 * var(--u)); bottom: calc(14 * var(--u)); color: var(--gold-300); font-size: max(21px, calc(38 * var(--u))); }
.onboarding-start { width: min(90%, calc(520 * var(--u))); min-height: max(52px, calc(86 * var(--u))); margin-top: calc(34 * var(--u)); font-size: max(17px, calc(30 * var(--u))); }
.onboarding-content > p { margin: calc(14 * var(--u)) 0 0; color: var(--text-muted); font-size: max(10px, calc(18 * var(--u))); }
/* zh-CN only: the service is hosted overseas, so remind Chinese users about access. */
.onboarding-content > p.onboarding-notice { color: var(--social-ink); font-weight: 600; line-height: 1.4; text-align: center; }

html[dir="rtl"] .onboarding,
html[dir="rtl"] .phone-app { direction: rtl; }
html[dir="rtl"] .top-icon img,
html[dir="rtl"] .back-button img,
html[dir="rtl"] .dialog-close img { transform: scaleX(-1); }
html[dir="rtl"] .user-bar,
html[dir="rtl"] .room-card,
html[dir="rtl"] .friend-row,
html[dir="rtl"] .member-list button,
html[dir="rtl"] .menu-row { direction: rtl; }
html[dir="rtl"] [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

.overlay { position: fixed; inset: 0; z-index: 20; width: min(100vw, 720px); margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; padding-top: env(safe-area-inset-top); }
.overlay-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: var(--scrim); backdrop-filter: blur(5px); }
.paper-dialog, .composer-sheet { position: relative; z-index: 1; width: calc(100% - calc(36 * var(--u))); max-height: calc(100dvh - env(safe-area-inset-top) - calc(24 * var(--u))); overflow-x: hidden; overflow-y: auto; padding: calc(42 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u) + env(safe-area-inset-bottom)); border: 1px solid #d7c29a; border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; background-color: var(--cream-050); background-image: radial-gradient(circle at 12% 12%, rgba(213, 166, 83, .08), transparent 30%), radial-gradient(circle at 88% 76%, rgba(213, 166, 83, .08), transparent 28%); color: var(--ink); box-shadow: 0 -24px 64px rgba(0, 3, 12, .4); animation: sheet-enter .24s cubic-bezier(.22, .8, .24, 1) both; }
.paper-dialog h2 { margin: 0 0 calc(18 * var(--u)); color: var(--ink); font-size: max(18px, calc(31 * var(--u))); text-align: center; }
.sheet-grabber { position: absolute; top: calc(12 * var(--u)); left: 50%; width: calc(96 * var(--u)); height: max(4px, calc(8 * var(--u))); border-radius: 999px; background: rgba(73, 51, 34, .34); transform: translateX(-50%); }
.dialog-close { position: absolute; top: calc(14 * var(--u)); right: calc(16 * var(--u)); width: max(44px, calc(64 * var(--u))); height: max(44px, calc(64 * var(--u))); display: grid; place-items: center; padding: calc(10 * var(--u)); border: 0; background: transparent; }
.dialog-close img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.paper-dialog label { display: grid; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); color: #70563d; font-size: max(11px, calc(19 * var(--u))); font-weight: 600; }
.generated-name { display: grid; gap: calc(5 * var(--u)); margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border: 1px solid rgba(199, 171, 122, .7); border-radius: calc(12 * var(--u)); background: #fffdf8; }
.generated-name > span { color: #806849; font-size: max(10px, calc(16 * var(--u))); }
.generated-name > strong { color: var(--ink); font-size: max(16px, calc(26 * var(--u))); letter-spacing: .05em; }
.generated-name > p { margin: 0; color: var(--ink); font-size: max(12px, calc(19 * var(--u))); line-height: 1.45; }
.paper-dialog input { width: 100%; min-height: max(44px, calc(68 * var(--u))); padding: 0 calc(16 * var(--u)); border: 1px solid #c7ab7a; border-radius: calc(12 * var(--u)); background: #fffdf8; color: var(--ink); font-size: 16px; }
.paper-dialog .art-button { width: 100%; margin-top: calc(20 * var(--u)); }
.create-dialog { max-width: calc(648 * var(--u)); }
.draft-cover { width: 100%; height: calc(250 * var(--u)); border: 1px solid #c7ab7a; border-radius: var(--radius-card); object-fit: cover; }
.draft-crest { width: calc(176 * var(--u)); height: calc(176 * var(--u)); margin: 0 auto; object-fit: contain; }
.shuffle-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.shuffle-row button { min-height: 42px; border: 1px solid #b89967; border-radius: 999px; background: transparent; color: #70563d; }
.shuffle-row button:only-child { grid-column: 1 / -1; }
.create-dialog > p { margin: calc(14 * var(--u)) 0 0; color: #806849; font-size: max(10px, calc(18 * var(--u))); text-align: center; }
.create-dialog > p strong { color: #b45c4f; }

.profile-dialog, .user-dialog, .manage-dialog, .recharge-dialog, .withdraw-dialog { max-width: calc(648 * var(--u)); }
.avatar-preview-trigger { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.avatar-preview-trigger:focus-visible { outline-offset: calc(5 * var(--u)); }
.profile-avatar { width: calc(176 * var(--u)); height: calc(176 * var(--u)); margin: 0 auto; border: 3px solid var(--gold-500); border-radius: 50%; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-dialog h2 { margin: calc(12 * var(--u)) 0 calc(4 * var(--u)); }
.profile-dialog h2 em, .user-dialog h2 em { display: inline-block; padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: #cf7080; color: #fff7e8; font-family: inherit; font-size: max(9px, calc(16 * var(--u))); font-style: normal; vertical-align: middle; }
.profile-dialog > p { margin: 0; color: #806849; text-align: center; }
.profile-refresh { width: 100%; min-height: max(60px, calc(78 * var(--u))); display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border: 1px solid #dfc493; border-radius: var(--radius-control); background: linear-gradient(135deg, #fff9ef, #f7ead5); color: var(--ink); text-align: left; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76); }
.profile-refresh-icon { width: calc(48 * var(--u)); height: calc(48 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #ead0a2; }
.profile-refresh-icon img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.profile-refresh > span:nth-child(2) { min-width: 0; }
.profile-refresh strong, .profile-refresh small { display: block; }
.profile-refresh strong { font-size: max(12px, calc(21 * var(--u))); }
.profile-refresh small { margin-top: calc(3 * var(--u)); color: #806849; font-size: max(9px, calc(16 * var(--u))); }
.profile-refresh > b { padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(185, 130, 53, .14); color: #9b6b2a; font-size: max(10px, calc(17 * var(--u))); white-space: nowrap; }
.profile-refresh.is-loading { pointer-events: none; opacity: .68; }
.profile-refresh.is-loading .profile-refresh-icon { animation: profile-refresh-spin .8s linear infinite; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(22 * var(--u)) 0; border-top: 1px solid #e3d2b8; border-bottom: 1px solid #e3d2b8; }
.profile-stats span { display: grid; justify-items: center; gap: calc(3 * var(--u)); padding: calc(14 * var(--u)); }
.profile-stats span + span { border-left: 1px solid #e3d2b8; }
.profile-stats strong { font-size: max(17px, calc(30 * var(--u))); }
.profile-stats small { color: #806849; }
.menu-row, .danger-row { width: 100%; min-height: max(48px, calc(76 * var(--u))); display: grid; grid-template-columns: calc(48 * var(--u)) 1fr auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)); border: 0; border-bottom: 1px solid #e3d2b8; background: transparent; color: var(--ink); text-align: left; }
.menu-row img, .danger-row img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.menu-row b { font-size: max(17px, calc(30 * var(--u))); font-weight: 400; }
.danger-row { margin-top: calc(16 * var(--u)); border: 1px solid rgba(180, 80, 80, .25); border-radius: var(--radius-control); color: #a43e42; }
.profile-dialog .danger-link { color: #a43e42; }
.online-chip { display: inline-flex; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(105, 200, 141, .14); color: #397755; font-size: max(9px, calc(16 * var(--u))); }
.user-profile-main { display: grid; grid-template-columns: calc(176 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: center; margin: calc(14 * var(--u)) 0; }
.user-profile-main > .avatar-preview-trigger { width: calc(176 * var(--u)); height: calc(176 * var(--u)); border: 3px solid var(--gold-500); border-radius: 50%; overflow: hidden; }
.user-profile-main > .avatar-preview-trigger img { width: 100%; height: 100%; object-fit: cover; }
.user-profile-main h2 { margin: 0 0 calc(4 * var(--u)); text-align: left; }
.user-profile-main p { margin: 0; color: #806849; }
.user-profile-main span { display: block; margin-top: calc(10 * var(--u)); color: #70563d; font-size: max(11px, calc(19 * var(--u))); line-height: 1.5; }
.relation-row { display: flex; justify-content: space-between; padding: calc(16 * var(--u)) 0; border-top: 1px solid #e3d2b8; }
.relation-row strong { color: #806849; font-weight: 500; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.dialog-actions .art-button, .dialog-actions .outline-button { width: 100%; min-width: 0; margin-top: calc(16 * var(--u)); }

.avatar-lightbox { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: calc(72 * var(--u)) calc(28 * var(--u)) calc(48 * var(--u)); }
.avatar-lightbox-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3, 8, 20, .94); cursor: zoom-out; }
.avatar-lightbox-image { position: relative; z-index: 1; width: min(78vw, calc(520 * var(--u))); height: min(78vw, calc(520 * var(--u))); border: calc(5 * var(--u)) solid var(--gold-300); border-radius: 50%; object-fit: cover; box-shadow: 0 0 calc(48 * var(--u)) rgba(240, 210, 138, .28), 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .52); }
.avatar-lightbox-close { position: absolute; z-index: 2; top: calc(18 * var(--u) + env(safe-area-inset-top)); right: calc(18 * var(--u)); width: max(48px, calc(68 * var(--u))); height: max(48px, calc(68 * var(--u))); display: grid; place-items: center; padding: calc(10 * var(--u)); border: 1px solid rgba(240, 210, 138, .58); border-radius: 50%; background: rgba(7, 17, 38, .76); cursor: pointer; }
.avatar-lightbox-close img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.manage-room-head { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-bottom: calc(16 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid #e3d2b8; }
.manage-room-head img { width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: calc(16 * var(--u)); object-fit: contain; }
.manage-room-head strong, .manage-room-head small { display: block; }
.manage-room-head strong { font-size: max(14px, calc(25 * var(--u))); }
.manage-room-head small { color: #806849; }
.manage-dialog form .outline-button { width: 100%; margin-top: calc(12 * var(--u)); }
.permission-note { padding: calc(14 * var(--u)); border-radius: var(--radius-control); background: #f3e8d8; color: #806849; font-size: max(11px, calc(19 * var(--u))); }
.recharge-dialog > img { width: calc(180 * var(--u)); height: calc(180 * var(--u)); margin: calc(-12 * var(--u)) auto; object-fit: contain; }
.recharge-dialog dl { margin: calc(12 * var(--u)) 0; border: 1px solid #e3d2b8; border-radius: var(--radius-control); overflow: hidden; }
.recharge-dialog dl div { display: flex; justify-content: space-between; padding: calc(12 * var(--u)); }
.recharge-dialog dl div + div { border-top: 1px solid #e3d2b8; }
.recharge-dialog dt, .recharge-dialog dd { margin: 0; }
.recharge-dialog dd { font-weight: 700; }
.recharge-dialog > p { padding: calc(10 * var(--u)); border-radius: var(--radius-control); background: #f4ead9; color: #806849; font-size: max(10px, calc(18 * var(--u))); text-align: center; }
.withdraw-dialog > p { text-align: center; }
.withdraw-dialog > small { display: block; margin-top: calc(10 * var(--u)); color: #806849; text-align: center; }
.composer-sheet { width: 100%; padding-top: calc(34 * var(--u)); }
.composer-sheet label { color: var(--ink); font-size: max(12px, calc(21 * var(--u))); font-weight: 700; }
.composer-sheet > div:last-child { display: grid; grid-template-columns: 1fr auto; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.composer-sheet input, .friend-search input { min-width: 0; min-height: 48px; padding: 0 calc(16 * var(--u)); border: 1px solid #c7ab7a; border-radius: 999px; background: #fffdf8; color: var(--ink); font-size: 16px; }
.composer-sheet button, .friend-search button { min-width: 72px; min-height: 48px; border: 1px solid #d7b46a; border-radius: 999px; background: #b98235; color: #fff8d8; }

.game-layer { position: fixed; inset: 0; z-index: 40; width: min(100vw, 720px); height: 100vh; height: 100svh; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .36s; }
.game-layer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.game-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.game-sheet { position: relative; width: 100%; height: calc(65vh + (100vh - 65vh) / 3); max-height: calc(65vh + (100vh - 65vh) / 3); height: var(--game-sheet-height, calc(65svh + (100svh - 65svh) / 3)); max-height: var(--game-sheet-height, calc(65svh + (100svh - 65svh) / 3)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(240, 210, 138, .42); border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; background: var(--night-950); box-shadow: 0 -20px 70px rgba(0, 0, 0, .52); transform: translateY(100%); }
.game-layer.is-open .game-sheet { animation: game-sheet-enter .28s cubic-bezier(.22, .8, .24, 1) both; }
.game-layer.is-closing .game-sheet { animation: game-sheet-exit .36s cubic-bezier(.45, 0, 1, 1) both; }
.game-layer.is-fullscreen .game-sheet { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; }
.game-layer.is-fullscreen .game-stage { min-height: 0; aspect-ratio: auto; flex: 1 1 auto; }
.game-sheet .sheet-grabber { display: none; }
.game-stage { position: relative; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; background: #101712; }
.game-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; background: #101712; transition: opacity .2s ease; }
.game-stage iframe.is-ready { opacity: 1; }
.game-loading, .game-error { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(28 * var(--u)); background: #101712; color: #eef5f0; text-align: center; }
.game-loading > img { width: calc(84 * var(--u)); height: calc(84 * var(--u)); min-width: 56px; min-height: 56px; border-radius: calc(18 * var(--u)); }
.game-loading p { margin: calc(16 * var(--u)) 0 calc(4 * var(--u)); font-size: max(14px, calc(26 * var(--u))); }
.game-loading span, .game-error p { color: #9dab9f; font-size: max(10px, calc(18 * var(--u))); }
.game-error > img { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
.game-error h2 { margin: calc(12 * var(--u)) 0 0; }
.game-error > div { display: flex; gap: 10px; }
.game-error button { min-height: 44px; padding: 0 18px; border: 1px solid #9dab9f; border-radius: 999px; background: transparent; color: #eef5f0; }
.game-error button:first-child { border-color: var(--gold-300); background: #b98235; }

@media (min-width: 721px) {
  .game-sheet { width: 100%; }
}

.toast-host { position: fixed; top: calc(env(safe-area-inset-top) + 72px); left: 50%; z-index: 60; max-width: min(520px, calc(100vw - 36px)); padding: 11px 18px; visibility: hidden; opacity: 0; border: 1px solid rgba(240, 210, 138, .42); border-radius: 999px; background: rgba(7, 17, 38, .94); color: var(--cream-050); box-shadow: 0 12px 36px rgba(0, 0, 0, .32); font-size: 13px; text-align: center; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.toast-host.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }

@media (max-width: 380px) {
  .user-bar { padding-inline: 12px; gap: 5px; }
  .coin-balance { min-width: 88px; }
  .user-identity strong { max-width: 86px; }
  .family-actions small { display: none; }
  .family-actions button { min-height: 64px; }
}

@media (min-width: 721px) {
  :root { --u: 1px; }
  .overlay, .game-layer { left: 50%; right: auto; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .mic-seat.is-speaking > span { animation: speaking-pulse 1.6s ease-in-out infinite; }
  .game-loading > img { animation: loading-breathe 1.5s ease-in-out infinite; }
  .room-card, .family-card, .family-actions button { transition: transform .2s ease, border-color .2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes speaking-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(105, 200, 141, .2), inset 0 0 0 3px rgba(5, 12, 27, .68); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(105, 200, 141, .12), inset 0 0 0 3px rgba(5, 12, 27, .68); }
}

@media (prefers-reduced-motion: no-preference) {
  .mic-seat.is-speaking > span::after { animation: speaking-ring 1.6s ease-in-out infinite; }
}

@keyframes speaking-ring {
  0%, 100% { opacity: .45; transform: scale(.96); }
  50% { opacity: .95; transform: scale(1.08); }
}

@keyframes loading-breathe { 0%, 100% { transform: scale(.96); opacity: .72; } 50% { transform: scale(1); opacity: 1; } }

@keyframes sheet-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes profile-refresh-spin {
  to { transform: rotate(360deg); }
}

@keyframes game-sheet-enter {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes game-sheet-exit {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Multi-game entry carousel: native horizontal scrolling provides touch swipe. */
.game-carousel { position: relative; min-width: 0; margin-top: calc(12 * var(--u)); }
.game-carousel-track { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-card); }
.game-carousel-track::-webkit-scrollbar { display: none; }
.game-banner-slide { flex: 0 0 100%; scroll-snap-align: start; }
.game-carousel .game-banner-slide { margin-top: 0; cursor: pointer; }
.game-carousel-controls { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); min-height: calc(42 * var(--u)); }
.game-carousel-arrow { width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: grid; place-items: center; padding: 0; border: 1px solid rgba(240, 210, 138, .45); border-radius: 50%; background: rgba(7, 17, 38, .76); color: var(--gold-300); }
/* Vector chevron stays optically centered in the circle; the "‹"/"›" glyphs do not. */
.game-carousel-arrow svg { display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.game-carousel-dots { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); }
.game-carousel-dots button { width: calc(9 * var(--u)); height: calc(9 * var(--u)); min-width: 7px; min-height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(233, 220, 196, .38); }
.game-carousel-dots button.is-selected { width: calc(24 * var(--u)); border-radius: 999px; background: var(--gold-300); }
.family-game-message .game-carousel { width: calc(430 * var(--u)); max-width: 78%; }

.game-picker-dialog { max-width: calc(648 * var(--u)); }
.game-picker-dialog > h2 { margin-bottom: calc(6 * var(--u)); }
.game-picker-note { margin: 0 0 calc(16 * var(--u)); color: #806849; text-align: center; font-size: max(10px, calc(18 * var(--u))); }
.game-picker-list { display: grid; gap: calc(12 * var(--u)); }
.game-picker-item { width: 100%; min-height: calc(100 * var(--u)); display: grid; grid-template-columns: calc(88 * var(--u)) 1fr auto; align-items: center; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid rgba(118, 82, 45, .25); border-radius: var(--radius-card); background: rgba(255, 247, 233, .96); color: var(--ink); text-align: left; }
.game-picker-item img { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.game-picker-item strong, .game-picker-item small { display: block; }
.game-picker-item strong { font-size: max(13px, calc(25 * var(--u))); }
.game-picker-item small { margin-top: calc(5 * var(--u)); color: #806849; font-size: max(9px, calc(17 * var(--u))); }
.game-picker-item b { color: #9b6b2a; font-size: max(26px, calc(42 * var(--u))); font-weight: 400; }
.game-picker-item.is-selected { border-color: #b98235; box-shadow: 0 0 0 2px rgba(185, 130, 53, .14); }

/* Social light shell: keep the app chrome bright while game surfaces retain their own theme. */
.phone-app { color: var(--social-ink); }
.phone-app::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .18)); }
.user-bar, .detail-header {
  background: rgba(255, 255, 255, .9);
  border-color: var(--social-border);
  box-shadow: 0 4px 18px rgba(71, 91, 128, .06);
}
.user-identity strong, .detail-header > span strong { color: var(--social-ink); }
.user-identity small, .detail-header > span small { color: var(--social-muted); }
.coin-balance { border-color: #cbd5e5; background: rgba(255, 255, 255, .9); color: var(--social-ink); }
.coin-balance span { color: #4b3b18; }
.top-icon, .detail-header button { color: var(--social-ink); }
.top-icon i { border-color: #fff; }
.bottom-tabs { background: rgba(255, 255, 255, .96); border-color: var(--social-border); box-shadow: 0 -4px 18px rgba(71, 91, 128, .08); }
.bottom-tabs button { color: var(--social-muted); }
.bottom-tabs button + button { border-color: var(--social-border); }
.bottom-tabs button.is-active { color: var(--social-indigo); background: var(--social-indigo-soft); }
.bottom-tabs button.is-active::before { background: var(--social-indigo); }
.bottom-tabs img { opacity: .58; filter: saturate(.6); }
.bottom-tabs .is-active img { opacity: .95; filter: saturate(.95); }
.welcome-copy p, .section-heading h1, .section-heading h2, .page-header h1 { color: var(--social-indigo); }
.welcome-copy span, .section-heading span { color: var(--social-muted); }
.room-shortcuts button { border-color: #d5ddec; background: rgba(255, 255, 255, .92); color: var(--social-ink); box-shadow: var(--social-shadow); }
.room-shortcuts button:nth-child(2) { background: rgba(246, 247, 255, .96); }
.room-shortcuts button > span { background: var(--social-indigo-soft); }
.room-shortcuts small { color: var(--social-muted); }
.room-card, .member-list button, .ledger-list article {
  border-color: #dbe3ef;
  background: var(--social-surface);
  color: var(--social-ink);
  box-shadow: var(--social-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.room-card-copy > strong, .member-list strong, .ledger-list strong { color: var(--social-ink); }
.room-card-copy > small, .room-card-meta, .member-list small, .ledger-list small { color: var(--social-muted); }
.room-card > em { background: var(--social-indigo-soft); color: var(--social-indigo); }
.family-card { border-color: #dbe3ef; background: rgba(255, 255, 255, .96); color: var(--social-ink); box-shadow: var(--social-shadow); }
.family-card small { color: var(--social-muted); }
.family-card > span button, .request-card > button { border-color: #8d84e8; background: var(--social-indigo); color: #fff; }
.family-hero h1, .family-discover-hero h1, .family-actions strong, .family-activity h2 { color: var(--social-indigo); }
.family-hero > div span, .family-hero p, .family-hero small, .family-actions small { color: var(--social-muted); }
.family-actions button { border-color: #dbe3ef; background: rgba(255, 255, 255, .92); color: var(--social-ink); box-shadow: var(--social-shadow); }
.family-activity p { border-color: #dbe3ef; background: rgba(247, 249, 253, .94); }
.request-card { border-color: #dbe3ef; background: rgba(242, 244, 255, .96); }
.request-card strong { color: var(--social-indigo); }
.friend-delete { background: rgba(241, 132, 141, .12) !important; color: #c05c68 !important; }
.balance-card, .ledger-summary, .success-page > div { border-color: #dbe3ef; background: var(--social-surface); color: var(--social-ink); box-shadow: var(--social-shadow); }
.balance-card span > small, .balance-card > button, .ledger-summary { color: var(--social-muted); }
.balance-card span > b, .ledger-summary strong, .success-page h1, .success-page > strong { color: var(--social-indigo); }
.coin-package { border-color: #dbe3ef; background: rgba(255, 255, 255, .96); color: var(--social-ink); box-shadow: var(--social-shadow); }
.coin-package strong { color: var(--social-indigo); }
.coin-package.is-selected { border-color: var(--social-indigo); box-shadow: 0 0 0 2px rgba(98, 88, 217, .14), var(--social-shadow); }
.withdraw-link { border-color: #dbe3ef; background: rgba(255, 255, 255, .9); color: var(--social-indigo); }
.demo-note { color: var(--social-muted); }
.success-page > div b { color: var(--social-indigo); }
.success-page .outline-button { color: var(--social-indigo); border-color: #8d84e8; }
.onboarding::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .48)); }
.onboarding-brand span { color: var(--social-indigo); text-shadow: 0 4px 18px rgba(98, 88, 217, .16); }
.onboarding-brand small { color: var(--social-muted); }
.gender-card { border-color: #d5ddec; background: rgba(255, 255, 255, .8); color: var(--social-ink); box-shadow: var(--social-shadow); }
.gender-card:nth-child(2) { background: rgba(246, 247, 255, .88); }
.gender-card.is-selected { border-color: var(--social-indigo); box-shadow: 0 0 0 3px rgba(98, 88, 217, .14), var(--social-shadow); }
.gender-card::after { background: linear-gradient(transparent, rgba(255, 255, 255, .92)); }
.gender-card span { color: var(--social-indigo); }
.onboarding-content > p { color: var(--social-muted); }
.toast-host { border-color: #cbd5e5; background: rgba(32, 40, 58, .94); color: #fff; }
.mic-seat { color: var(--social-ink); }
.mic-seat > span { border-color: #b9c6dc; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 3px rgba(218, 226, 239, .72); }
.mic-seat strong { color: var(--social-ink); }
.mic-seat small { color: var(--social-indigo); }
.mic-seat > i { border-color: #cbd5e5; background: #fff; color: var(--social-muted); }
.chat-message > img { border-color: #cbd5e5; }
.chat-message p { border-color: #dbe3ef; background: rgba(255, 255, 255, .94); box-shadow: 0 5px 16px rgba(71, 91, 128, .08); }
.chat-message p strong { color: var(--social-indigo); }
.chat-message p span { color: var(--social-ink); }
.chat-message time, .empty-chat { color: var(--social-muted); }
.room-dock { border-color: var(--social-border); background: rgba(255, 255, 255, .96); box-shadow: 0 -4px 18px rgba(71, 91, 128, .08); }
.room-dock button { color: var(--social-muted); }
.room-dock .is-on-seat, .room-dock .is-muted { color: var(--social-indigo); }