/* =====================================================
   TENGOCHAT, the screens that are new.

   Live, rooms, you, random. theme.css gives these their tokens and
   their small parts; this file assembles them.

   THE IDEA BEHIND THE LIVE SCREEN
   A live stream is not a page you visit, it is a channel you land in.
   So the feed is a full-bleed vertical pager with snap points, one
   stream filling the screen at a time, and everything that is not the
   stream floats over it. Nothing is in a card, nothing has a margin
   around it, and there is no header telling you where you are. You
   swipe and you are somewhere else.
   ===================================================== */

/* =====================================================
   SPLASH, SIGN IN
   ===================================================== */

.splash {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--bg);
}
.splash .brand-mark { animation: breathe 1.8s var(--snap) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.09); opacity: 1; } }

.brand-mark {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--grad); color: #2B1A08; box-shadow: var(--glow); flex-shrink: 0;
}
.brand-mark svg { width: 27px; height: 27px; stroke-width: 2.1; }
.brand-mark img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* the light behind the sign in card, so the screen has a centre */
.auth-glow {
  position: fixed; top: -20%; left: 50%; width: 520px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,138,61,.30), transparent 68%);
  filter: blur(40px); pointer-events: none;
}

/* =====================================================
   FULL SCREEN LAYERS
   Live rooms and random sessions are layers, not screens: they cover
   everything including the navigation, because while you are in one
   there is nowhere else to be.
   ===================================================== */

.layer {
  position: fixed; inset: 0; z-index: 120;
  background: #000; color: #fff;
  display: flex; flex-direction: column;
  animation: layer-in .3s var(--out) both;
}
@keyframes layer-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.layer.closing { animation: layer-out .22s var(--snap) both; }
@keyframes layer-out { to { opacity: 0; transform: scale(.97); } }

/* =====================================================
   LIVE, the feed
   ===================================================== */

.live-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0;
}
/* Live sits over the whole app, under the navigation, which is the one
   piece of chrome that stays on top of it. */
#scLive {
  position: absolute; inset: 0; z-index: 2;
  padding-bottom: 0; background: #000;
}

#scLive .chips-wrap {
  position: absolute; top: calc(var(--bar) + var(--sat) - 4px); left: 0; right: 0; z-index: 12;
}
#scLive .chips { padding: 4px 14px 10px; }
#scLive .chip {
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border: 0;
}
#scLive .chip.on { background: #fff; color: #000; }
#scLive .chip .n { opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* The pager. Scroll snap does the work the browser is already good at,
   so a swipe feels like the phone's own scrolling rather than a script
   trying to imitate it. */
.reels {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { width: 0; }

.reel {
  position: relative; height: 100%; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #100D0A;
  display: flex; flex-direction: column; justify-content: flex-end;
  content-visibility: auto;
}
.reel-skel { height: 100%; padding: 80px 16px 90px; }

/* the stream itself, or its poster until the player attaches */
.reel-media { position: absolute; inset: 0; background: #100D0A; }
.reel-media video, .reel-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reel-media.blur img { filter: blur(26px) saturate(1.3); transform: scale(1.15); }

/* a cover that is only the host's avatar, enlarged, is better than an
   empty rectangle and costs nothing extra to fetch */
.reel-cover { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-cover::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,138,61,.22), transparent 62%), #100D0A;
}
/* Dimmed and soft, because this is what is there while the stream
   connects. A crisp full-brightness avatar reads as the content itself,
   and then the video replacing it looks like a glitch. */
.reel-cover .av { --size: 104px; position: relative; opacity: .5; filter: blur(.4px); }

.reel-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 22%, transparent 52%, rgba(0,0,0,.82) 100%);
}

/* ---- what floats over the stream ---- */

.reel-top {
  position: absolute; top: calc(var(--bar) + var(--sat) + 44px); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px; z-index: 6;
}
.reel-host {
  display: flex; align-items: center; gap: 9px;
  background: rgba(0,0,0,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 5px 13px 5px 5px; border-radius: var(--r-full); max-width: 66%;
  border: 1px solid rgba(255,255,255,.1);
}
.reel-host .who { min-width: 0; }
.reel-host .verify-tick svg { width: 14px; height: 14px; }
.lr-line .verify-tick svg { width: 12px; height: 12px; }
.reel-host b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-host small { display: block; font-size: 11px; color: rgba(255,255,255,.62); font-weight: 500; }
/* Brand, not live red. Red on this screen means one thing, somebody is
   broadcasting, and a Follow button wearing it steals that signal. */
.reel-follow {
  margin-left: 4px; height: 28px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--accent); color: #2B1A08; font-size: 12px; font-weight: 800; flex-shrink: 0;
  transition: transform .18s var(--spring);
}
.reel-follow:active { transform: scale(.9); }
.reel-follow.on { background: rgba(255,255,255,.18); color: #fff; }

.reel-count {
  margin-left: auto; display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: rgba(0,0,0,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 6px 11px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,.1);
}
.reel-count svg { width: 15px; height: 15px; }

/* the column of actions down the right */
.reel-side {
  position: absolute; right: 8px; bottom: 58px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.reel-act {
  width: 52px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  transition: transform .2s var(--spring);
}
.reel-act svg { width: 29px; height: 29px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.reel-act:active { transform: scale(.85); }
.reel-act.on { color: var(--live); }
.reel-act.on svg { fill: var(--live); stroke: var(--live); }
.reel-act.gift svg { color: var(--amber); }

/* the block of text at the bottom left */
.reel-meta {
  /* Clears the navigation, the overlay's say bar, and the safe area.
     The video runs full bleed behind all three, which is the point. */
  position: relative; z-index: 6;
  padding: 0 76px calc(var(--nav) + var(--sab) + 58px) 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.reel-title { font-size: 15px; font-weight: 600; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.reel-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.reel-tag { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.8); }
.reel-join {
  align-self: flex-start; margin-top: 4px;
  height: 42px; padding: 0 22px; border-radius: var(--r-full);
  background: var(--grad); color: #2B1A08; font-weight: 800; font-size: 14.5px;
  box-shadow: var(--glow); display: inline-flex; align-items: center; gap: 8px;
  transition: transform .2s var(--spring);
}
.reel-join:active { transform: scale(.95); }

/* the last few chat lines, previewed on the card */
.reel-chat { display: flex; flex-direction: column; gap: 3px; max-width: 78%; }
.reel-chat span {
  font-size: 12.5px; color: rgba(255,255,255,.88); line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.reel-chat b { color: var(--violet-2); font-weight: 700; }
.reel-chat span.sysline { color: var(--violet-2); font-weight: 600; }
.reel-chat span.gift { color: var(--amber); }

.reel-boost {
  position: absolute; top: calc(var(--bar) + var(--sat) + 90px); right: 12px; z-index: 7;
}

/* =====================================================
   LIVE, the room you are actually in
   ===================================================== */

.lr-stage { position: absolute; inset: 0; background: #100D0A; }
.lr-stage video { width: 100%; height: 100%; object-fit: cover; }

/* the host, and up to three guests, tiled. Two people is side by side,
   three or more is a grid, because a guest squeezed into a corner is
   how every other app makes a guest feel like an afterthought. */
.lr-tiles { position: absolute; inset: 0; display: grid; gap: 2px; }
.lr-tiles[data-n="1"] { grid-template-columns: 1fr; }
.lr-tiles[data-n="2"] { grid-template-rows: 1fr 1fr; }
.lr-tiles[data-n="3"], .lr-tiles[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lr-tile { position: relative; overflow: hidden; background: #1A1512; }
.lr-tile video { width: 100%; height: 100%; object-fit: cover; }
.lr-tile .nm {
  position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; font-weight: 700;
  background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: var(--r-full);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lr-tile.speaking { outline: 2px solid var(--lime); outline-offset: -2px; }
.lr-tile .muted-ic { position: absolute; right: 8px; bottom: 8px; color: var(--bad); }
.lr-tile .muted-ic svg { width: 17px; height: 17px; }

.lr-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 18%, transparent 44%, rgba(0,0,0,.86) 100%);
}

.lr-top {
  position: relative; z-index: 6; padding: calc(var(--sat) + 10px) 10px 0;
  display: flex; align-items: flex-start; gap: 8px;
}
.lr-close { margin-left: auto; }
.lr-close, .lr-more {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; flex-shrink: 0;
}

/* the ticker of top gifters, which is the single most effective thing
   any live app does: it turns spending into a leaderboard */
.lr-board {
  display: flex; align-items: center; gap: -6px; margin-left: 6px;
  background: rgba(0,0,0,.4); border-radius: var(--r-full); padding: 4px 10px 4px 4px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lr-board .av { --size: 26px; margin-right: -8px; border: 1.5px solid rgba(0,0,0,.5); }
.lr-board .av:last-of-type { margin-right: 4px; }
.lr-board .tot { font-size: 11.5px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }

/* the host's own earnings, only ever shown to the host */
.lr-hud {
  position: relative; z-index: 6; margin: 10px 10px 0; align-self: flex-start;
  background: rgba(10,10,16,.72); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r); padding: 11px 14px; min-width: 210px;
}
.lr-hud .row1 { display: flex; align-items: baseline; gap: 7px; }
.lr-hud .coins { font-family: var(--font-display); font-size: 25px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }
.lr-hud .lbl { font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lr-hud .track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin: 9px 0 6px; overflow: hidden; }
.lr-hud .fill { display: block; height: 100%; background: var(--grad); border-radius: 3px; transition: width .6s var(--out); }
.lr-hud .note { font-size: 11.5px; color: var(--text-2); }
.lr-hud .note b { color: var(--text); }

/* chat sits at the bottom left and fades out upward, so it never
   competes with the person on camera */
.lr-chat {
  position: absolute; left: 10px; right: 84px; bottom: 74px; z-index: 6;
  max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 5px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34px);
  mask-image: linear-gradient(to bottom, transparent, #000 34px);
}
.lr-chat::-webkit-scrollbar { width: 0; }
.lr-line {
  display: flex; align-items: flex-start; gap: 7px;
  animation: line-in .28s var(--out) both;
  font-size: 13px; line-height: 1.35;
}
@keyframes line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lr-line .av { --size: 22px; margin-top: 1px; }
.lr-line .tx { background: rgba(0,0,0,.4); padding: 5px 11px; border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lr-line b { color: var(--violet-2); font-weight: 700; margin-right: 5px; }
.lr-line.gift .tx { background: linear-gradient(90deg, rgba(255,197,61,.30), rgba(255,90,74,.20)); }
.lr-line.gift b { color: var(--amber); }
.lr-line.sys { background: none; padding: 0; margin: 0; max-width: none; align-self: stretch; border-radius: 0; }
.lr-line.sys .tx { background: rgba(255,138,61,.22); color: var(--violet-2); font-weight: 600; }

.lr-bottom {
  position: relative; z-index: 7; margin-top: auto;
  padding: 8px 10px calc(10px + var(--sab));
  display: flex; align-items: center; gap: 6px;
}
.lr-bottom .lr-say { min-width: 0; }
.lr-say {
  flex: 1; min-width: 0; height: 42px; border-radius: var(--r-full);
  background: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 0 17px; color: #fff; font-size: 14.5px;
  border: 1px solid rgba(255,255,255,.12);
}
.lr-say::placeholder { color: rgba(255,255,255,.55); }
.lr-say:focus { outline: none; border-color: var(--violet); background: rgba(255,255,255,.16); }
.lr-ic {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; transition: transform .2s var(--spring);
}
.lr-ic:active { transform: scale(.88); }
.lr-ic.gift { background: linear-gradient(135deg, var(--amber), var(--pink)); }
.lr-ic.heart { background: rgba(255,59,92,.22); color: var(--live); }
.lr-ic.on { background: var(--violet); }
.lr-ic.bad { background: var(--bad); }
.lr-ic .pip {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--live); border-radius: var(--r-full); font-size: 10px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #000;
}
.lr-ic { position: relative; }

/* ---- the gift picker ---- */
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gift-card {
  background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 6px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .18s var(--spring), background .18s;
}
.gift-card:active { transform: scale(.92); }
.gift-card.on { background: var(--violet-dim); outline: 1.5px solid var(--violet); }
.gift-card .em { font-size: 30px; line-height: 1; }
.gift-card .nm { font-size: 11px; font-weight: 600; color: var(--text-2); text-align: center; }
.gift-card .pr { font-size: 11.5px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }

/* ---- flying gift, and the hearts ---- */
.fx { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.gift-fly {
  position: absolute; left: 50%; bottom: 20%; font-size: 76px; line-height: 1;
  animation: gift-fly 1.5s var(--out) forwards;
}
@keyframes gift-fly {
  0%   { transform: translate(-50%, 40px) scale(.3); opacity: 0; }
  22%  { transform: translate(-50%, 0) scale(1.15); opacity: 1; }
  62%  { transform: translate(-50%, -14px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -140px) scale(.7); opacity: 0; }
}
.heart {
  position: absolute; right: 30px; bottom: 120px; width: 26px; height: 26px; color: var(--live);
  animation: heart-up 2.4s var(--out) forwards;
}
.heart svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
@keyframes heart-up {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  12%  { transform: translate(0, -18px) scale(1); opacity: .95; }
  100% { transform: translate(var(--drift, -26px), -280px) scale(.6); opacity: 0; }
}

/* the bar that shows who is winning a battle */
.lr-battle {
  position: relative; z-index: 6; margin: 8px 10px 0;
  height: 26px; border-radius: var(--r-full); overflow: hidden; display: flex;
  background: var(--bad); font-size: 11.5px; font-weight: 800;
}
.lr-battle .side { display: grid; place-items: center; color: #fff; transition: flex-grow .5s var(--out); }
.lr-battle .a { background: var(--violet); }
.lr-battle .b { background: var(--pink); }

/* =====================================================
   GOING LIVE
   ===================================================== */
.golive-prev {
  position: relative; aspect-ratio: 9 / 14; max-height: 42vh; border-radius: var(--r);
  overflow: hidden; background: #1A1512; margin-bottom: 16px;
}
.golive-prev video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.golive-prev .hint {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--text-3); font-size: 13px; padding: 24px;
}

/* =====================================================
   ROOMS AND SUBJECTS
   ===================================================== */

.topic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px; padding: 4px 14px 16px;
}
.topic {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / .78; border-radius: var(--r-sm); padding: 11px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  background: var(--surface-2); text-align: left;
  transition: transform .2s var(--spring);
}
.topic:active { transform: scale(.95); }
.topic::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--tint, var(--violet)) 0%, transparent 78%);
  opacity: .34;
}
.topic .em { position: relative; font-size: 24px; line-height: 1; margin-bottom: 5px; }
.topic b { position: relative; font-size: 13.5px; font-weight: 700; }
.topic small { position: relative; font-size: 11px; color: var(--text-2); font-weight: 550; }
.topic.on { outline: 2px solid var(--violet); outline-offset: -2px; }

.room-row { align-items: flex-start; }
.room-row .tile {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 21px;
  background: var(--surface-2); background-size: cover; background-position: center;
}
.room-row .room-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.room-about {
  font-size: 13px; color: var(--text-2); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.room-cta { align-self: center; margin-left: auto; flex-shrink: 0; }

.req-row .tbtn { height: 34px; padding: 0 14px; font-size: 13px; }
.req-row .acts { display: flex; gap: 7px; margin-left: auto; }

/* the mask picker, for a room where you are someone else */
.mask {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--surface-2); border-radius: var(--r); margin-bottom: 14px;
}
.mask .face {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-soft); font-size: 22px; flex-shrink: 0;
}
.mask b { display: block; font-size: 15px; font-family: var(--font-display); }
.mask small { display: block; font-size: 12px; color: var(--text-3); }

/* =====================================================
   YOU
   ===================================================== */

.me-head {
  position: relative; padding: calc(var(--sat) + 28px) 20px 22px; text-align: center;
  overflow: hidden;
}
.me-head::before {
  content: ''; position: absolute; top: -140px; left: 50%; width: 420px; height: 340px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,138,61,.32), transparent 66%);
  filter: blur(30px); pointer-events: none;
}
.me-head .av-wrap { margin: 0 auto 12px; position: relative; }
.me-name { position: relative; font-family: var(--font-display); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; }
.me-handle { position: relative; font-size: 13.5px; color: var(--text-3); font-weight: 550; margin-top: 1px; }
.me-actions { position: relative; display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

/* Gold, not the usual teal. Teal is the only cool colour that would
   appear anywhere on this palette, and one cool dot on a warm screen
   reads as a mistake rather than a mark of anything. */
.verify-tick { color: var(--yellow); display: inline-grid; place-items: center; }
.verify-tick svg { width: 19px; height: 19px; }
.verify-tick.gold { color: var(--coral); filter: drop-shadow(0 0 5px rgba(255,90,74,.45)); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 14px 16px; }
.stat-tile {
  background: var(--surface); border-radius: var(--r-sm); padding: 13px 10px; text-align: center;
}
.stat-tile .v { font-family: var(--font-display); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-tile .k { font-size: 11px; color: var(--text-3); font-weight: 650; margin-top: 2px; }
.stat-tile.coins .v { color: var(--amber); }
.stat-tile.earn .v { color: var(--lime); }

/* the card that sends people back to the feed, deliberately the one
   thing on this screen wearing the platform's own warm colour */
.feed-card {
  margin: 0 14px 16px; padding: 16px; border-radius: var(--r);
  background: var(--grad);
  display: flex; align-items: center; gap: 13px; color: #2B1A08;
  box-shadow: var(--glow);
  transition: transform .2s var(--spring);
}
.feed-card:active { transform: scale(.98); }
.feed-card .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(43,26,8,.16); display: grid; place-items: center; flex-shrink: 0; }
.feed-card b { display: block; font-size: 15.5px; font-weight: 750; }
.feed-card small { display: block; font-size: 12.5px; opacity: .72; }
.feed-card .go { margin-left: auto; opacity: .65; }

.earn-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.earn-row .amt { margin-left: auto; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
.earn-row .amt.pending { color: var(--text-3); }

/* =====================================================
   RANDOM
   ===================================================== */

.rnd { align-items: center; justify-content: center; text-align: center; padding: 24px; }
.rnd-orb {
  width: 148px; height: 148px; border-radius: 50%; margin-bottom: 26px; position: relative;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 0 70px rgba(255,138,61,.5);
}
.rnd-orb::before, .rnd-orb::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid rgba(255,138,61,.55); animation: ping 2.4s var(--out) infinite;
}
.rnd-orb::after { animation-delay: 1.2s; }
@keyframes ping { 0% { transform: scale(.88); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.rnd-orb svg { width: 54px; height: 54px; color: #2B1A08; }
.rnd h2 { font-family: var(--font-display); font-size: 25px; margin-bottom: 8px; }
.rnd p { color: var(--text-2); font-size: 14.5px; max-width: 300px; line-height: 1.55; margin: 0 auto; }
.rnd .waiting { margin-top: 18px; font-size: 13px; color: var(--text-3); }

/* the session itself: a stripped down thread with a mask at the top */
.rs { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.rs-top {
  padding: calc(var(--sat) + 10px) 12px 10px; display: flex; align-items: center; gap: 11px;
  border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.rs-face {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-soft); font-size: 20px; flex-shrink: 0;
}
.rs-top .who b { display: block; font-size: 15px; font-weight: 700; font-family: var(--font-display); }
.rs-top .who small { display: block; font-size: 11.5px; color: var(--text-3); }
.rs-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.rs-msgs::-webkit-scrollbar { width: 0; }
.rs-b {
  max-width: 76%; padding: 9px 14px; border-radius: 19px; font-size: 14.5px; line-height: 1.4;
  background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 7px;
  animation: line-in .24s var(--out) both; overflow-wrap: anywhere;
}
.rs-b.me { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-left-radius: 19px; border-bottom-right-radius: 7px; }
.rs-b.sys { align-self: center; background: none; color: var(--text-3); font-size: 12.5px; text-align: center; max-width: 88%; }
.rs-bottom { display: flex; gap: 8px; padding: 8px 10px calc(10px + var(--sab)); border-top: 1px solid var(--hairline); flex-shrink: 0; }
.rs-in {
  flex: 1; height: 44px; border-radius: var(--r-full); background: var(--surface-2);
  padding: 0 18px; font-size: 15px; color: var(--text);
}
.rs-in:focus { outline: none; background: var(--surface-3); }

/* =====================================================
   SMALL SHARED THINGS
   ===================================================== */

.ib.feed-jump { color: var(--pink); }

.center-wrap { display: grid; place-items: center; height: 100%; padding: 40px 24px; }

.count-up { font-variant-numeric: tabular-nums; }

/* a live indicator that breathes, used on avatars in the chat list when
   the person on the other end is broadcasting right now */
.chat-live {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  background: var(--live); color: #fff; font-size: 8.5px; font-weight: 900;
  padding: 1px 5px; border-radius: var(--r-full); letter-spacing: .05em;
  border: 1.5px solid var(--bg);
}


@media (prefers-reduced-motion: reduce) {
  .heart, .gift-fly, .rnd-orb::before, .rnd-orb::after, .splash .brand-mark { animation: none; }
  .layer { animation: none; }
}

/* The one overlay that follows the active card.
   It stops ABOVE the navigation. The first version sat at bottom: 0 of a
   screen with no bottom padding, which put the say bar and the gift
   button underneath the nav bar: visible, and completely untappable. */
#liveOver {
  position: absolute; left: 0; right: 0; z-index: 8;
  bottom: calc(var(--nav) + var(--sab));
  pointer-events: none;
}
#liveOver .lr-bottom { padding-bottom: 8px; }
#liveOver > * { pointer-events: auto; }
#liveOver .lr-bottom { margin-top: 0; }

/* the tappable name in a random chat */
.rs-top .who { text-align: left; min-width: 0; flex: 1; }
.rs-top .who b, .rs-top .who small { display: block; }

/* =====================================================
   THE STACK, in one place

   The messenger's layers and the newer ones were written years apart
   and each picked its own z-index, which is how a sheet ends up
   underneath the live room it was opened from: visible, and completely
   untappable. Every layer in the app is listed here, in order, so the
   question "what covers what" has exactly one answer.

   This file loads last, so these win.
   ===================================================== */

/* =====================================================
   SCREENS ARE OPAQUE

   A screen that is "off" is only transparent, not removed, and none of
   them had a background. On a phone that was invisible, because exactly
   one screen was ever on. On a desktop the chat list is deliberately
   left visible behind Live, and that made every other screen render on
   top of it: the Rooms error and the chat list's own empty state
   printed over each other, one line on top of another.

   A screen covers what is behind it. That is what makes it a screen.
   ===================================================== */

.screen { background: var(--bg); }

/* Off screens take themselves out of the way completely rather than
   sitting invisibly over the top of whatever is on. */
.screen:not(.on) { visibility: hidden; }

.emoji-host { z-index: 30; }
.app        { z-index: 40; }
.gate       { z-index: 45; }
.auth       { z-index: 48; }
.splash     { z-index: 50; }

/* a live room or a random session covers the app, including the nav */
.layer      { z-index: 120; }

/* hearts and flying gifts: over the stream, under anything you can tap */
.fx         { z-index: 130; pointer-events: none; }
.fx-layer   { z-index: 135; }

/* a call takes over from a live room */
.call-host  { z-index: 150; }

/* and these go over everything, because they are what you opened last */
.sheet-host { z-index: 160; }
.ctx        { z-index: 170; }
.toast      { z-index: 190; }


/* =====================================================
   WIDE SCREENS

   The first attempt made .reels a flex column so the cards would
   centre. That quietly broke `height: 100%` on the card, every reel
   collapsed to its content, and four streams stacked on top of each
   other inside a 400px sidebar. The card needs a parent with a definite
   height, which is what `flex: 1` on a column already gives it, so the
   pager is left exactly as it is on a phone.

   What changes on a desktop is where Live sits: it takes the space the
   thread occupies, so the chat list and the navigation stay where they
   are on the left and nothing has to be closed to get back.
   ===================================================== */

@media (min-width: 880px) {
  #scLive { left: var(--col); }

  /* The thread pane owns the right hand side and paints above the live
     screen. While Live is the screen you are on, and no conversation is
     open over the top of it, Live wins instead. */
  #scLive.on { z-index: 4; }
  body.thread-open #scLive.on { z-index: 2; }

  /* Live has taken the right hand side, so the column keeps showing the
     chat list rather than going blank. This applies ONLY while Live is
     the screen you are on: when Rooms or You is on, they are in the
     column themselves and the list has to get out of the way. */
  body[data-screen="live"] #paneList {
    opacity: 1; pointer-events: auto; transform: none; visibility: visible;
  }
  #scRooms.on, #scMe.on { z-index: 3; }
  .reel {
    width: 100%; max-width: 480px; margin-inline: auto;
    border-radius: var(--r-lg);
  }
  #scLive .chips-wrap, .live-bar { max-width: 480px; margin-inline: auto; }
  #liveOver {
    bottom: 0; left: 50%; right: auto;
    width: 100%; max-width: 480px; transform: translateX(-50%);
  }
  #liveOver .lr-bottom { padding-bottom: 14px; }

  /* A live room or a random session is a phone-shaped column, centred,
     because a single camera stretched across a 27 inch monitor is worse
     than a smaller one you can actually look at. */
  .layer { max-width: 520px; left: 50%; transform: translateX(-50%); }
}