/* glass.css: the Instinct Chat design system for the home page. Loaded after
   discover.css and layered on top of it, so the page structure stays where it was and
   this file owns the look: tokens first, then reusable glass surfaces, then components.
   Mobile first; wider layouts are in the min-width blocks at the end of each part. */

/* ---------- 1. tokens ---------- */
:root {
  /* colour */
  --gl-bg: #07070c;
  --gl-ink: #ffffff;
  --gl-ink-2: rgba(255, 255, 255, 0.74);
  --gl-ink-3: rgba(255, 255, 255, 0.52);
  --gl-pink: #ff2d87;
  --gl-pink-2: #ff5fa2;
  --gl-purple: #8b5cf6;
  --gl-blue: #3b82f6;
  --gl-line: rgba(255, 255, 255, 0.10);
  --gl-line-hi: rgba(255, 255, 255, 0.22);
  /* spacing: 8 12 16 24 32 48 64 */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px;
  /* radius: controls, buttons, cards, large containers */
  --r-ctl: 12px; --r-btn: 16px; --r-card: 20px; --r-xl: 28px;
  /* glass: three strengths. 1 = light (cards), 2 = medium (nav, hero overlays), 3 = strong (dropdowns, modals) */
  --gl-1-bg: rgba(18, 18, 26, 0.46);
  --gl-2-bg: rgba(15, 15, 22, 0.60);
  --gl-3-bg: rgba(14, 14, 20, 0.84);
  --gl-blur: blur(20px) saturate(140%);
  --gl-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --gl-shadow-lift: 0 16px 44px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --gl-ease: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 2. reusable surfaces ---------- */
.gl-glass-1, .gl-glass-2, .gl-glass-3 { border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.gl-glass-1 { background: var(--gl-1-bg); }
.gl-glass-2 { background: var(--gl-2-bg); }
.gl-glass-3 { background: var(--gl-3-bg); }

/* ---------- 3. page background and ambient light ---------- */
/* A near-black navy base with three very soft light sources behind the content: pink
   top-left, blue to the right, purple lower down. They sit on a fixed layer so the
   page scrolls over them like light behind glass. */
.dsc-body { background: var(--gl-bg); }
.dsc-body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 46vh at 8% 4%, rgba(255, 45, 135, 0.13), transparent 70%),
    radial-gradient(52vw 50vh at 100% 30%, rgba(59, 130, 246, 0.10), transparent 72%),
    radial-gradient(70vw 50vh at 30% 100%, rgba(139, 92, 246, 0.10), transparent 72%),
    linear-gradient(180deg, #0a0a12 0%, #07070c 60%, #06060a 100%); }
.dsc { max-width: 1240px; padding: 0 var(--s3); }

/* ---------- 4. floating glass navigation ---------- */
.gl-nav { position: sticky; top: var(--s1); z-index: 60; margin-top: var(--s1); padding: var(--s1) var(--s2); gap: var(--s2);
  border-radius: var(--r-card); border: 1px solid var(--gl-line); background: var(--gl-2-bg); box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.gl-nav .brand-logo { height: 20px; width: auto; }
.gl-nav-right { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.gl-nav .dsc-links { gap: var(--s5); }
.gl-nav .dsc-link { position: relative; color: var(--gl-ink-2); border-bottom: none; padding: 10px 2px; transition: color var(--gl-ease); }
.gl-nav .dsc-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gl-pink);
  box-shadow: 0 0 12px rgba(255, 45, 135, 0.8); transform: scaleX(0); transform-origin: left; transition: transform var(--gl-ease); }
.gl-nav .dsc-link:hover { color: var(--gl-ink); }
.gl-nav .dsc-link.active { color: var(--gl-pink-2); }
.gl-nav .dsc-link.active::after, .gl-nav .dsc-link:hover::after { transform: scaleX(1); }

/* Search. Phones: a magnifier that opens the field across the bar. Desktop: always open. */
.gl-search { position: relative; display: flex; align-items: center; }
.gl-search-btn { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: transparent; color: var(--gl-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background var(--gl-ease); }
.gl-search-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--gl-ink); }
.gl-search-btn svg { width: 21px; height: 21px; }
.gl-search-input { display: none; min-width: 0; height: 44px; border-radius: 999px; border: 1px solid var(--gl-line); background: rgba(255, 255, 255, 0.05);
  color: var(--gl-ink); font: inherit; font-size: 16px; padding: 0 var(--s3) 0 44px; outline: none; transition: border-color var(--gl-ease), background var(--gl-ease); }
.gl-search-input::placeholder { color: var(--gl-ink-3); }
.gl-search-input:focus { border-color: rgba(255, 45, 135, 0.7); background: rgba(255, 255, 255, 0.08); }
.gl-search-input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }
.gl-search.expanded { position: absolute; left: var(--s1); right: var(--s1); top: var(--s1); z-index: 3; }
.gl-search.expanded .gl-search-input { display: block; flex: 1; background: #14141c; }
.gl-search.expanded .gl-search-btn { position: absolute; left: 0; pointer-events: none; color: var(--gl-ink-2); }
.gl-search-results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 5; max-height: min(70vh, 460px); overflow-y: auto; padding: var(--s1);
  border-radius: var(--r-card); animation: gl-pop 180ms ease-out; }
.gl-search-results[hidden] { display: none; }
/* Sits inside the glass bar, so it cannot blur what is behind it: near-solid instead. */
.gl-search-results.gl-glass-3 { background: rgba(16, 16, 24, 0.97); box-shadow: var(--gl-shadow-lift); }
@keyframes gl-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.gl-sr-head { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gl-ink-3); padding: 10px 10px 6px; }
.gl-sr { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 52px; padding: 6px 10px; border-radius: var(--r-ctl); border: none; background: none;
  color: var(--gl-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background var(--gl-ease); }
.gl-sr:hover, .gl-sr:focus-visible { background: rgba(255, 255, 255, 0.09); color: var(--gl-ink); outline: none; }
.gl-sr-thumb { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  background: #23232e center 20% / cover no-repeat; }
.gl-sr-thumb.round { border-radius: 50%; background-color: var(--gl-pink); background-position: center; font-family: "Outfit", sans-serif; }
.gl-sr-text { display: flex; flex-direction: column; min-width: 0; }
.gl-sr-text b { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-sr-text span { font-size: 13px; color: var(--gl-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-sr-empty { color: var(--gl-ink-2); font-size: 14px; line-height: 1.5; padding: var(--s2); margin: 0; }

/* ---------- 5. buttons ---------- */
.dsc-btn { gap: 10px; min-height: 52px; padding: 0 var(--s4); border-radius: var(--r-btn); font-size: 15.5px;
  transition: transform var(--gl-ease), box-shadow var(--gl-ease), background var(--gl-ease), border-color var(--gl-ease); }
.dsc-btn svg { width: 20px; height: 20px; flex: none; }
.gl-btn-primary { color: #fff; border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #ff4f9c 0%, #ff2d87 48%, #d81b72 100%);
  box-shadow: 0 10px 30px rgba(255, 45, 135, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
.gl-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 45, 135, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.gl-btn-glass { color: #fff; border: 1px solid var(--gl-line-hi); background: rgba(12, 12, 18, 0.5); box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.gl-btn-glass:hover { color: #fff; transform: translateY(-2px); background: rgba(40, 40, 54, 0.6); border-color: rgba(255, 255, 255, 0.36); }

/* ---------- 6. hero ---------- */
.gl-hero { position: relative; margin-top: var(--s3); border-radius: var(--r-xl); border: 1px solid var(--gl-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
/* Phone: the photo fills the top, the copy sits on a dark fade below the face. */
.dsc-hero.photo.gl-hero { background:
    linear-gradient(180deg, rgba(7, 7, 12, 0) 0, rgba(7, 7, 12, 0) 30vw, rgba(7, 7, 12, 0.86) 58vw, #07070c 74vw),
    radial-gradient(90% 60% at 0% 100%, rgba(255, 45, 135, 0.22), transparent 70%),
    url("/assets/hero/hero-tall.webp?v=2") center top / 100% auto no-repeat, #07070c; }
.gl-hero .dsc-hero-inner { position: relative; z-index: 1; padding: 50vw var(--s3) var(--s4); }
.gl-hero .dsc-hero-title { font-size: 34px; line-height: 1.04; letter-spacing: -1px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.gl-hero .dsc-hero-title span { color: var(--gl-pink); text-shadow: 0 0 28px rgba(255, 45, 135, 0.55); }
.gl-hero p { color: var(--gl-ink-2); margin: var(--s2) 0 var(--s4); }
.gl-hero .dsc-hero-actions { gap: var(--s2); }
.gl-hero .dsc-hero-actions .dsc-btn { flex: 1 1 100%; }
.gl-hero .dsc-live { margin-top: var(--s4); gap: 10px; flex-wrap: wrap; color: var(--gl-ink); }
.gl-hero .dsc-live[hidden] { display: none; }
.gl-hero .dsc-dot { box-shadow: 0 0 10px #3ddc84; }
.gl-hero-panel { display: none; }

/* ---------- 7. section headings ---------- */
.dsc-section { margin-top: var(--s6); scroll-margin-top: 88px; }
#rooms + #random, #trending + #random { margin-top: var(--s6); }
.gl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px var(--s3); margin-bottom: var(--s3); }
.gl-head h2 { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 800; letter-spacing: -0.4px; color: var(--gl-ink); }
.gl-head p { color: var(--gl-ink-2); font-size: 14px; margin: 0; flex: 1 1 100%; }
.gl-head .dsc-seeall { margin-left: auto; color: var(--gl-ink); order: 2; transition: color var(--gl-ease); }
.gl-head .dsc-seeall span { display: inline-block; transition: transform var(--gl-ease); }
.gl-head .dsc-seeall:hover span { transform: translateX(3px); }
.gl-head h2 { flex: 1; }
.gl-head-ic { width: 26px; height: 26px; flex: none; color: var(--gl-pink); filter: drop-shadow(0 0 10px rgba(255, 45, 135, 0.6)); }
.gl-head-emoji { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.5)); }
.gl-head .dsc-bolt { width: 26px; height: 26px; }
.dsc-head-random.gl-head { flex-direction: row; align-items: baseline; }

/* ---------- 8. room cards (shared) ---------- */
.gl-card { border-radius: var(--r-card); border: 1px solid var(--gl-line); background-color: #101018;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--gl-ease), border-color var(--gl-ease), box-shadow var(--gl-ease); }
.gl-card .dsc-cimg { transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.gl-card .dsc-cshade { background: linear-gradient(180deg, rgba(7, 7, 12, 0) 30%, rgba(7, 7, 12, 0.55) 60%, rgba(7, 7, 12, 0.96) 100%); }
.gl-card:hover { transform: translateY(-3px); border-color: var(--gl-line-hi);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 45, 135, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.gl-card:hover .dsc-cimg { transform: scale(1.035); }
.gl-card:focus-visible { outline: 2px solid var(--gl-pink-2); outline-offset: 3px; }
.gl-card .dsc-cname { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.gl-card .dsc-ccount { color: var(--gl-ink-2); font-size: 13px; }
.gl-card .dsc-ccount:not(.quiet) .dsc-dot { box-shadow: 0 0 8px #3ddc84; }
.gl-card .dsc-cgo { right: var(--s2); bottom: var(--s2); width: 32px; height: 32px; background: rgba(12, 12, 18, 0.5); border-color: var(--gl-line-hi);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background var(--gl-ease), transform var(--gl-ease); }
.gl-card:hover .dsc-cgo { background: var(--gl-pink); transform: translateX(2px); }
.gl-card .dsc-18 { top: var(--s2); right: var(--s2); box-shadow: 0 0 14px rgba(255, 45, 135, 0.6); }
.gl-card .dsc-cbody { padding-right: 36px; }
.dsc-row { gap: var(--s2); padding-top: 6px; padding-bottom: var(--s2); margin-bottom: calc(-1 * var(--s2)); }

/* Live now: the largest cards. A thin pink edge marks them as active. */
.gl-live { flex: 0 0 74vw; max-width: 300px; height: 330px; padding: var(--s3); border-color: rgba(255, 45, 135, 0.34);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), 0 0 22px rgba(255, 45, 135, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.gl-live .dsc-cbody { padding-right: 0; gap: 6px; }
.gl-live .dsc-cname { font-size: 21px; }
.gl-ctopic { color: var(--gl-ink-2); font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gl-live-top { position: absolute; top: var(--s2); left: var(--s2); right: var(--s2); z-index: 2; display: flex; align-items: center; gap: var(--s1); }
.gl-live-badge { background: var(--gl-pink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; padding: 5px 9px; border-radius: 8px;
  box-shadow: 0 0 16px rgba(255, 45, 135, 0.7); }
.gl-live-count { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 12.5px; color: #fff;
  background: rgba(10, 10, 16, 0.55); border: 1px solid var(--gl-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gl-live-count svg { width: 13px; height: 13px; }

/* Face stacks: real members only. */
.gl-faces { display: flex; align-items: center; margin-top: 6px; }
.gl-faces[hidden] { display: none; }
.gl-face { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-left: -8px; border: 2px solid rgba(255, 255, 255, 0.85); background: #23232e center / cover no-repeat; }
.gl-face:first-child { margin-left: 0; }
.gl-face-more { margin-left: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gl-ink-2);
  background: rgba(10, 10, 16, 0.55); border: 1px solid var(--gl-line); }
.gl-hero .gl-faces { margin-top: 0; }

/* Popular rooms: a visual row, a size down from Live now. */
.gl-pop { flex: 0 0 156px; height: 208px; padding: var(--s2); }
/* Explore by category: compact photo cards in a grid. */
.gl-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.gl-cat { flex: none; width: auto; height: 168px; padding: var(--s2); }
.gl-cat .dsc-cname { font-size: 16.5px; }
.dsc-fine { color: var(--gl-ink-3); margin-top: var(--s3); }

/* ---------- 9. random chat cards ---------- */
.dsc-rcard { border-radius: var(--r-card); border-color: var(--gl-line); box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  transition: transform var(--gl-ease), border-color var(--gl-ease), box-shadow var(--gl-ease);
  background:
    radial-gradient(90% 150% at 96% 120%, rgba(255, 45, 135, 0.34) 0%, transparent 55%),
    radial-gradient(60% 120% at 0% 0%, rgba(139, 92, 246, 0.20) 0%, transparent 60%),
    var(--gl-2-bg); }
/* Voice leans blue and purple; text leans pink and purple. */
.dsc-rcard.alt { background:
    radial-gradient(90% 150% at 96% 120%, rgba(59, 130, 246, 0.36) 0%, transparent 55%),
    radial-gradient(60% 120% at 0% 0%, rgba(139, 92, 246, 0.22) 0%, transparent 60%),
    var(--gl-2-bg); }
.dsc-rcard:hover { transform: translateY(-3px); border-color: var(--gl-line-hi); box-shadow: var(--gl-shadow-lift), 0 0 26px rgba(255, 45, 135, 0.16); }
.dsc-rcard.alt:hover { box-shadow: var(--gl-shadow-lift), 0 0 26px rgba(59, 130, 246, 0.2); }
.dsc-rcard .dsc-ricon { border: 1px solid rgba(255, 255, 255, 0.16); }
.dsc-rcard.alt .dsc-ricon { background: linear-gradient(150deg, #3b6fe0 0%, #4b2aa8 100%); box-shadow: 0 8px 22px rgba(59, 110, 224, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.dsc-rcard.alt .dsc-ricon svg path[stroke="#b0246a"] { stroke: #3b4fc0; }
.dsc-rcard .dsc-arrow { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff;
  background: rgba(10, 10, 16, 0.4); border: 1px solid var(--gl-line-hi); }
.dsc-rtext span { color: var(--gl-ink-2); }

/* ---------- 10. party call to action, rules, footer, tab bar ---------- */
.dsc-partycta { border-radius: var(--r-xl); border-color: rgba(255, 45, 135, 0.3); box-shadow: var(--gl-shadow);
  background: radial-gradient(520px 240px at 100% 0%, rgba(255, 45, 135, 0.30), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(139, 92, 246, 0.18), transparent 70%), var(--gl-2-bg); }
.dsc-partycta-btn { border-radius: var(--r-btn); min-height: 52px; background: linear-gradient(135deg, #ff4f9c 0%, #ff2d87 48%, #d81b72 100%);
  box-shadow: 0 10px 28px rgba(255, 45, 135, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: transform var(--gl-ease), box-shadow var(--gl-ease); }
.dsc-partycta-btn:hover { background: linear-gradient(135deg, #ff64a8 0%, #ff3d92 48%, #e0267c 100%); color: #fff; transform: translateY(-2px); }
.dsc-rules { gap: var(--s2); }
.dsc-rule { border-radius: var(--r-card); border-color: var(--gl-line); background: var(--gl-1-bg); box-shadow: var(--gl-shadow); padding: var(--s4) var(--s3); }
.dsc-rule p { color: var(--gl-ink-2); }
.dsc-rule-links a { border-radius: var(--r-ctl); border-color: var(--gl-line); background: rgba(255, 255, 255, 0.03); transition: border-color var(--gl-ease), background var(--gl-ease); }
.dsc-footer { margin-top: var(--s7); border-top-color: var(--gl-line); }
.dsc-tabs { background: rgba(10, 10, 16, 0.72); border-top-color: var(--gl-line); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }

/* ---------- 11. tablet ---------- */
@media (min-width: 640px) {
  .dsc { padding: 0 var(--s4); }
  .gl-nav { top: var(--s2); margin-top: var(--s2); padding: 10px var(--s3); }
  .dsc-hero.photo.gl-hero { background:
      linear-gradient(90deg, rgba(7, 7, 12, 0.92) 0%, rgba(7, 7, 12, 0.62) 36%, rgba(7, 7, 12, 0.10) 62%, rgba(7, 7, 12, 0) 100%),
      radial-gradient(60% 80% at 0% 100%, rgba(255, 45, 135, 0.26), transparent 70%),
      radial-gradient(40% 70% at 100% 0%, rgba(59, 130, 246, 0.20), transparent 70%),
      url("/assets/hero/hero-wide.webp?v=2") right center / cover no-repeat, #0b0b12; }
  .gl-hero .dsc-hero-inner { padding: var(--s6) var(--s5); max-width: 560px; }
  .gl-hero .dsc-hero-title { font-size: 46px; }
  .gl-hero .dsc-hero-actions .dsc-btn { flex: 0 0 auto; }
  .gl-head p { flex: 0 1 auto; }
  .gl-head h2 { flex: 0 0 auto; font-size: 25px; }
  .gl-head-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gl-live { flex-basis: 250px; height: 340px; }
  .gl-pop { flex-basis: 184px; height: 232px; }
  .gl-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .gl-cat { height: 190px; }
  .dsc-row { gap: var(--s3); }
  .gl-search { flex: 1; }
  .gl-search-btn { position: absolute; left: 0; pointer-events: none; color: var(--gl-ink-2); }
  .gl-search-input { display: block; width: 100%; }
  .gl-search-results { left: auto; right: 0; width: min(380px, 92vw); }
  .gl-nav-right { flex: 1; justify-content: flex-end; }
  .gl-search { max-width: 250px; }
}

/* ---------- 12. desktop ---------- */
@media (min-width: 960px) {
  .gl-nav { padding: 10px var(--s4); }
  .gl-nav .brand-logo { height: 22px; }
  .gl-hero { min-height: 400px; display: flex; align-items: center; }
  .gl-hero .dsc-hero-inner { padding: var(--s7) var(--s6); max-width: 640px; }
  .gl-hero .dsc-hero-title { font-size: 56px; letter-spacing: -1.6px; }
  .gl-hero p { font-size: 17px; }
  /* The glass panel on the right of the hero. */
  .gl-hero-panel { display: block; position: absolute; right: var(--s4); bottom: var(--s4); z-index: 1; width: 236px; padding: var(--s4) var(--s3); border-radius: var(--r-card); }
  .gl-hero-panel-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; line-height: 1.5; color: var(--gl-ink); margin: 0 0 var(--s2);
    padding-bottom: var(--s2); border-bottom: 1px solid rgba(255, 45, 135, 0.55); }
  .gl-hero-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
  .gl-hero-panel li { display: flex; align-items: center; gap: 10px; color: var(--gl-ink-2); font-size: 13.5px; margin: 0; }
  .gl-hero-panel svg { width: 18px; height: 18px; flex: none; color: var(--gl-ink); }
  /* Rows become grids: nothing to scroll sideways with a mouse. */
  .gl-live-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); overflow: visible; margin: 0; padding: 0; gap: var(--s3); }
  .gl-live { max-width: none; height: 350px; }
  .gl-pop-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: var(--s3); }
  .gl-pop { height: 236px; }
  .gl-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gl-cat { height: 200px; }
  .gl-search { max-width: 280px; }
  .dsc-section { margin-top: var(--s7); }
  #rooms + #random { margin-top: var(--s7); }
}

/* People who ask for less motion get none of the lifts or scaling. */
@media (prefers-reduced-motion: reduce) {
  .gl-card, .gl-card .dsc-cimg, .dsc-rcard, .dsc-btn, .dsc-partycta-btn, .gl-search-results { transition: none; animation: none; }
  .gl-card:hover, .dsc-rcard:hover, .dsc-btn:hover, .dsc-partycta-btn:hover { transform: none; }
  .gl-card:hover .dsc-cimg { transform: none; }
}

/* ---------- 13. motion: light catching glass, never neon ---------- */
/* Everything here is slow or waits for the pointer. Nothing shimmers on its own. */

/* Ambient light: a second fixed layer of soft pink, purple and blue that drifts very
   slowly behind the page (about a minute and a half per pass). */
.dsc-body::after { content: ""; position: fixed; inset: -20vh -20vw; z-index: 0; pointer-events: none; opacity: 0.9; will-change: transform;
  background:
    radial-gradient(34vw 30vh at 24% 22%, rgba(255, 45, 135, 0.10), transparent 70%),
    radial-gradient(30vw 34vh at 78% 44%, rgba(59, 130, 246, 0.09), transparent 72%),
    radial-gradient(38vw 30vh at 44% 82%, rgba(139, 92, 246, 0.09), transparent 72%);
  animation: gl-drift 90s ease-in-out infinite alternate; }
@keyframes gl-drift {
  0% { transform: translate3d(-3vw, -2vh, 0) scale(1); }
  50% { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
  100% { transform: translate3d(-2vw, 5vh, 0) scale(1.03); }
}

/* Specular highlight: interactive glass catches a soft light where the pointer is.
   discover.js writes --mx / --my (pixels inside the element) while the pointer moves. */
.gl-card, .dsc-rcard, .dsc-rule, .dsc-partycta, .gl-hero-panel { --mx: 50%; --my: 0%; }
.gl-card::after, .dsc-rcard::after, .dsc-rule::after, .dsc-partycta::after, .gl-hero-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 260ms ease;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 40%, transparent 65%); }
.dsc-rule, .dsc-partycta { position: relative; overflow: hidden; }
@media (hover: hover) {
  .gl-card:hover::after, .dsc-rcard:hover::after, .dsc-rule:hover::after, .dsc-partycta:hover::after, .gl-hero-panel:hover::after { opacity: 1; }
}
/* A fixed, very faint reflection along the top edge of the big glass pieces. */
.gl-nav::before, .gl-hero-panel::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent); }

/* Card photos drift a few pixels against the pointer (--px / --py run 0 to 1). */
.gl-card { --px: 0.5; --py: 0.5; }
@media (hover: hover) {
  .gl-card:hover .dsc-cimg { transform: scale(1.05) translate3d(calc((var(--px) - 0.5) * -10px), calc((var(--py) - 0.5) * -10px), 0); }
}

/* Hero photo: a slight parallax as the page scrolls (--hero-y is set by discover.js). */
@media (min-width: 640px) {
  .dsc-hero.photo.gl-hero { background-position: 0 0, 0 0, 0 0, right calc(0% - var(--hero-y, 0px)); }
}

/* LIVE: a gentle breath on the badge dot and the hero's online dot. */
.gl-live-badge { display: inline-flex; align-items: center; gap: 6px; }
.gl-live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: gl-breathe 2.6s ease-in-out infinite; }
.gl-hero .dsc-dot { animation: gl-breathe 2.6s ease-in-out infinite; }
@keyframes gl-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

/* Primary button: one soft pass of light when the pointer arrives. */
.gl-btn-primary, .dsc-partycta-btn { position: relative; overflow: hidden; }
.gl-btn-primary::after, .dsc-partycta-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 46%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent); transform: skewX(-18deg); opacity: 0; }
@media (hover: hover) {
  .gl-btn-primary:hover::after, .dsc-partycta-btn:hover::after { animation: gl-sweep 700ms ease-out 1; }
}
@keyframes gl-sweep { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }

/* Sections ease in the first time they scroll into view (discover.js adds .gl-in). */
.gl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.gl-reveal.gl-in { opacity: 1; transform: none; }

/* Account pop-ups on this page use the strong glass and fade in. */
.dsc-body .ac-sheet { background: var(--gl-3-bg); border-color: var(--gl-line); box-shadow: var(--gl-shadow-lift);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); animation: gl-pop 200ms ease-out; }
.dsc-body .ac-profile .pf-bar { background: linear-gradient(180deg, rgba(14, 14, 20, 0) 0%, rgba(14, 14, 20, 0.96) 30%); }

@media (prefers-reduced-motion: reduce) {
  .dsc-body::after, .gl-live-badge::before, .gl-hero .dsc-dot, .dsc-body .ac-sheet { animation: none; }
  .gl-btn-primary:hover::after, .dsc-partycta-btn:hover::after { animation: none; }
  .gl-card:hover .dsc-cimg { transform: none; }
  .gl-reveal { opacity: 1; transform: none; transition: none; }
  .dsc-hero.photo.gl-hero { --hero-y: 0px; }
}

/* ---------- 14. fixes found in visual review ---------- */
/* Scrolling rows: keep the first card off the screen edge when it snaps. */
.dsc-row { scroll-padding-inline: var(--s3); }
@media (min-width: 640px) { .dsc-row { scroll-padding-inline: var(--s4); } }
/* Phone: title and "See all" share the first line, the one-line pitch sits under them. */
.gl-head p { order: 3; }
@media (min-width: 640px) { .gl-head p { order: 0; } .gl-head .dsc-seeall { order: 2; } }
/* Phone: Live cards a little narrower so the next one clearly peeks in. */
@media (max-width: 639px) { .gl-live { flex-basis: 66vw; height: 300px; } }

/* ---------- 15. liquid glass, second pass (mockup v2) ---------- */
/* Luminous edges: a thin gradient rim (white at the top-left catching light, then pink,
   purple and blue) drawn as a masked border, so it follows any radius. Used on cards,
   the hero, the nav and the random cards. */
.gl-rim::before, .gl-card::before, .gl-hero::before, .gl-nav::after, .dsc-rcard::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(255, 45, 135, 0.55) 48%, rgba(139, 92, 246, 0.42) 72%, rgba(59, 130, 246, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.55; transition: opacity var(--gl-ease); }
.gl-card:hover::before, .dsc-rcard:hover::before { opacity: 1; }
.gl-card, .gl-hero, .gl-nav, .dsc-rcard { border-color: transparent; }
.gl-nav::after { opacity: 0.35; }
.gl-hero::before { opacity: 0.8; }
/* Inner light: a faint glass sheen across the top and a pink glow rising from the bottom edge. */
.gl-card { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -36px 40px -34px rgba(255, 45, 135, 0.45); }
.gl-card .dsc-cshade { background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(180deg, rgba(7, 7, 12, 0) 34%, rgba(7, 7, 12, 0.55) 62%, rgba(10, 6, 18, 0.95) 100%); }
.gl-live { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 45, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -40px 46px -36px rgba(255, 45, 135, 0.5); }
/* Category cards lean blue at the edge so the page cools as you scroll down. */
.gl-cat::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.06) 25%, rgba(139, 92, 246, 0.5) 60%, rgba(59, 130, 246, 0.6) 100%); }
.gl-cat { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -36px 40px -34px rgba(120, 90, 255, 0.4); }

/* Hero: the photo fills the whole frame, with a glowing rim and the text on a soft left fade.
   The side panel is retired in this version of the design. */
.gl-hero-panel { display: none !important; }
.gl-hero { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 45, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
@media (min-width: 640px) {
  .dsc-hero.photo.gl-hero { background:
      linear-gradient(90deg, rgba(8, 6, 14, 0.88) 0%, rgba(8, 6, 14, 0.55) 34%, rgba(8, 6, 14, 0.06) 62%, rgba(8, 6, 14, 0) 100%),
      linear-gradient(0deg, rgba(8, 6, 14, 0.55) 0%, rgba(8, 6, 14, 0) 40%),
      radial-gradient(50% 90% at 100% 0%, rgba(59, 130, 246, 0.22), transparent 70%),
      url("/assets/hero/hero-wide.webp?v=2") right calc(0% - var(--hero-y, 0px)) / cover no-repeat, #0b0b12; }
}

/* Random cards: a single soft band of light sweeping across, like a reflection in glass. */
.dsc-rcard::after { content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 1; inset: auto;
  width: 70%; height: 260%; right: -12%; top: -80%; border-radius: 50%; transform: rotate(28deg);
  background: radial-gradient(closest-side, rgba(255, 45, 135, 0.42), rgba(255, 45, 135, 0.12) 55%, transparent 75%); filter: blur(14px);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.dsc-rcard.alt::after { background: radial-gradient(closest-side, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.14) 55%, transparent 75%); }
@media (hover: hover) { .dsc-rcard:hover::after { transform: rotate(28deg) translateX(-14px); } }
.dsc-rcard > * { position: relative; z-index: 1; }

/* Live now arrow (desktop): a round glass button over the right edge of the row. */
.gl-carousel { position: relative; }
.gl-next { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid var(--gl-line-hi); background: rgba(14, 14, 20, 0.6);
  box-shadow: var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); transition: background var(--gl-ease), transform var(--gl-ease); }
.gl-next:hover { background: rgba(255, 45, 135, 0.55); transform: translateY(-50%) scale(1.05); }
.gl-next svg { width: 22px; height: 22px; }
.gl-next[hidden] { display: none; }
@media (max-width: 959px) { .gl-next { display: none; } } /* phones and tablets swipe */
@media (min-width: 960px) {
  /* Desktop Live now: one row of five, scrolling sideways when more rooms are live. */
  .gl-live-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--s3); margin: 0; padding: 4px 0 var(--s2); scroll-padding-inline: 0; }
  .gl-live { flex: 0 0 calc((100% - 4 * var(--s3)) / 5); max-width: none; }
}

/* Slightly richer ambient light, still behind everything. */
.dsc-body::before { background:
    radial-gradient(60vw 46vh at 8% 4%, rgba(255, 45, 135, 0.16), transparent 70%),
    radial-gradient(52vw 50vh at 100% 30%, rgba(59, 130, 246, 0.14), transparent 72%),
    radial-gradient(70vw 50vh at 30% 100%, rgba(139, 92, 246, 0.14), transparent 72%),
    linear-gradient(180deg, #0b0a14 0%, #08070f 60%, #06060a 100%); }
@media (prefers-reduced-motion: reduce) { .dsc-rcard::after { transition: none; } }
/* Tablet: keep the headline to the left so it does not run across the face in the photo. */
@media (min-width: 640px) and (max-width: 959px) {
  .gl-hero .dsc-hero-inner { max-width: 430px; padding: var(--s5) var(--s4) var(--s5) var(--s5); }
  .gl-hero .dsc-hero-title { font-size: 40px; }
  .dsc-hero.photo.gl-hero { background-position: 0 0, 0 0, 0 0, 72% calc(0% - var(--hero-y, 0px)); }
}

/* ---------- 16. random cards: silk ribbons (mockup v3) ---------- */
/* Dark cards with flowing magenta ribbons behind the content that wave very slowly, like
   a banner in a light breeze. Both icon tiles share the same deep magenta. */
.dsc-rcard { min-height: 124px; border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(110deg, #1b0e17 0%, #140b12 55%, #1a0c16 100%); }
.dsc-rcard.alt { background: linear-gradient(110deg, #10111c 0%, #0f0f19 50%, #170d1b 100%); }
.dsc-rcard::before { opacity: 0.18; }              /* the rim stays, barely there */
.dsc-rcard::after { display: none; }               /* replaced by the ribbons */
.dsc-rcard:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 45, 135, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.dsc-rcard.alt:hover { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(139, 92, 246, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.gl-wave { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; border-radius: inherit; pointer-events: none; }
.gl-wave svg { position: absolute; left: -6%; top: -10%; width: 112%; height: 120%; filter: blur(7px); opacity: 0.75; }
.gl-wave .rb { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }
.gl-wave .rb1 { animation: gl-wave1 17s ease-in-out infinite alternate; }
.gl-wave .rb2 { animation: gl-wave2 23s ease-in-out infinite alternate; opacity: 0.8; }
.gl-wave .rb3 { animation: gl-wave3 29s ease-in-out infinite alternate; opacity: 0.35; }
@keyframes gl-wave1 { 0% { transform: translate(-2%, 0) skewY(0deg) scaleY(1); } 50% { transform: translate(2%, -6%) skewY(-3deg) scaleY(1.12); } 100% { transform: translate(-1%, 4%) skewY(2deg) scaleY(0.94); } }
@keyframes gl-wave2 { 0% { transform: translate(0, 0) skewY(0deg); } 50% { transform: translate(-3%, 5%) skewY(4deg) scaleY(1.1); } 100% { transform: translate(2%, -3%) skewY(-2deg); } }
@keyframes gl-wave3 { 0% { transform: translate(0, 0) scaleY(1); } 100% { transform: translate(3%, 8%) scaleY(1.25); } }
@media (hover: hover) { .dsc-rcard:hover .gl-wave svg { opacity: 1; } }
.gl-wave svg { transition: opacity 400ms ease; }
/* Icon tiles: one deep magenta for both, white glyphs. */
.dsc-rcard .dsc-ricon, .dsc-rcard.alt .dsc-ricon { background: linear-gradient(150deg, #8a2a62 0%, #5e1b44 100%); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 26px rgba(120, 25, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.dsc-rcard.alt .dsc-ricon svg path[stroke="#3b4fc0"], .dsc-rcard .dsc-ricon svg path[stroke="#b0246a"] { stroke: #6e2050; }
.dsc-rcard .dsc-ricon svg circle[fill="#b0246a"] { fill: #6e2050; }
/* Arrow: a plain pink arrow that nudges right on hover. */
.dsc-rcard .dsc-arrow { width: auto; height: auto; border: none; background: none; color: var(--gl-pink); font-size: 24px; }
.dsc-rcard:hover .dsc-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .gl-wave .rb { animation: none; } }

/* Explore by category holds seven rooms now (Bi Chat added): one even row on desktop. */
@media (min-width: 960px) { .gl-cat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
/* A room without a licensed photo yet: its colour tone and emoji, with the same glass. */
.gl-card:not(.has-cover) { background: radial-gradient(120% 80% at 80% 0%, var(--c1), transparent 70%), radial-gradient(90% 70% at 0% 100%, rgba(255, 45, 135, 0.35), transparent 70%), var(--c2); }
.gl-card:not(.has-cover) .dsc-cicon { font-size: 44px; top: 18px; left: 16px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4)); }

/* My rooms: a room nobody is in right now keeps its card but drops the LIVE badge. */
.gl-live.is-quiet .gl-live-badge { display: none; }
.gl-live.is-quiet .gl-live-count { opacity: 0.8; }
.gl-live.is-quiet { border-color: var(--gl-line); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -36px 40px -34px rgba(255, 45, 135, 0.3); }
/* Large cards keep the room emoji clear of the LIVE badge row. */
.gl-live:not(.has-cover) .dsc-cicon { top: 58px; font-size: 52px; }
/* Group labels inside Explore by category. */
.gl-cat-label { grid-column: 1 / -1; margin: var(--s3) 0 0; font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gl-ink-3); }
.gl-cat-label:first-child { margin-top: 0; }
@media (min-width: 960px) { .gl-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* My rooms: no LIVE badge. A small "N here now" chip shows only when someone is in the room. */
.gl-live .gl-live-badge { display: none; }
.gl-live .gl-live-count { gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.gl-live .gl-live-count .dsc-dot { box-shadow: 0 0 8px #3ddc84; }
.gl-live.is-quiet .gl-live-count { display: none; }
.gl-live { border-color: var(--gl-line); }
/* "No guests allowed" label on members-only room cards. */
.gl-members { position: absolute; z-index: 2; top: var(--s2); left: var(--s2); padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: #fff; background: rgba(10, 10, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gl-live .gl-members { top: auto; bottom: 64px; }
/* "🔥 Active" on a room card when a real conversation is happening. */
.gl-active { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(255, 80, 40, 0.28); border: 1px solid rgba(255, 140, 60, 0.6); }
/* Keep "No guests allowed" clear of the 18+ badge: it sits just above the room name. */
.gl-card .gl-members { top: auto; bottom: 62px; left: var(--s2); }
.gl-live .gl-members { bottom: 72px; }

/* "No guests allowed" sits in the card text, under the room name, on one line, so it never
   collides with the 18+ badge or a long name on a narrow phone card. */
.gl-card .gl-members, .gl-live .gl-members { position: static; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  margin: 2px 0 1px; padding: 2px 7px; font-size: 10px; letter-spacing: 0.2px; top: auto; bottom: auto; left: auto; }

/* Above the room name, so the round arrow (bottom right) never covers it; it may use the
   full card width. */
.gl-card .gl-members { margin: 0 -30px 4px 0; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 700; }