:root {
  color-scheme: dark;
  --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);
  --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; }
html { background: #030714; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--text-main); background: #030714; }
body.has-overlay { overflow: hidden; }
button, input { 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%; }
[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(--night-950);
  background-image: linear-gradient(rgba(4, 12, 30, .25), rgba(4, 12, 30, .7)), url("/test-app/assets/social/backgrounds/app-main.webp");
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 80px rgba(0, 0, 0, .38);
}

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

.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 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, .9), rgba(5, 12, 30, .18)); 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, .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; }
.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: flex-end; 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: flex-end; min-height: 100%; padding: calc(90 * var(--u) + env(safe-area-inset-top)) calc(36 * var(--u)) calc(52 * var(--u) + env(safe-area-inset-bottom)); }
.onboarding-brand { margin-bottom: auto; 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; }
.gender-options { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.gender-card { position: relative; min-height: calc(430 * var(--u)); 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))); }

.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; }
.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)); }
.profile-avatar { width: calc(176 * var(--u)); height: calc(176 * var(--u)); margin: 0 auto; border: 3px solid var(--gold-500); border-radius: 50%; 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 > img { width: calc(176 * var(--u)); height: calc(176 * var(--u)); border: 3px solid var(--gold-500); border-radius: 50%; 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)); }
.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 { --game-header-height: max(54px, calc(92 * var(--u))); position: fixed; inset: 0; z-index: 40; width: min(100vw, 720px); 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: min(100%, calc(56.25dvh - 30px)); max-height: 100dvh; 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 .46s 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 { background: rgba(255, 247, 232, .48); }
.game-sheet-header { min-height: var(--game-header-height); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid rgba(240, 210, 138, .25); }
.game-sheet-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.game-sheet-brand > img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 32px; min-height: 32px; border-radius: calc(10 * var(--u)); }
.game-sheet-brand strong, .game-sheet-brand small { display: block; }
.game-sheet-brand strong { color: var(--gold-300); font-size: max(13px, calc(24 * var(--u))); }
.game-sheet-brand small { color: var(--text-muted); font-size: max(9px, calc(16 * var(--u))); }
.game-sheet-actions { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.game-sheet-actions button { min-height: 38px; padding: 0 calc(14 * var(--u)); border: 1px solid rgba(240, 210, 138, .42); border-radius: 999px; background: transparent; color: var(--cream-200); }
.game-sheet-actions .icon-only { width: 42px; display: grid; place-items: center; padding: 6px; border-radius: 50%; }
.game-sheet-actions img { width: 28px; height: 28px; }
.game-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; flex: 0 0 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: min(100%, calc(56.25dvh - 52px)); }
}

.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); }
}

@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%); }
  72% { transform: translateY(-1.6%); }
  88% { transform: translateY(.7%); }
  100% { transform: translateY(0); }
}

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