/* ═══════════════════════════════════════════
   LittleScreen — Home (compact one-viewport layout)
   Everything fits in the visible viewport — no scroll.
   ═══════════════════════════════════════════ */

body.ls-page-home-v2 {
  /* 2026-05-02c — D's "fit most on the page" pass. The top/bottom bar
     padding shrunk so the live content rectangle starts higher and
     ends lower.
     2026-05-25 — bumped bottom 60→108 to match the bottombar height now
     that tools.js relocates the saybar into it (~98px tall). */
  padding-top: 54px;
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  /* Home is now a true scrollable hub (welcome strip + 4 categorized
     sections + featured Lobby). The compact one-viewport constraint
     is gone — let users scroll through everything. */
  min-height: 100vh;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120,60,160,.30) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,140,80,.10) 0%, transparent 70%),
    linear-gradient(180deg, #14101c 0%, #0d0a14 60%, #050308 100%);
}
body.ls-page-home-v2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 56% at 50% 0%, rgba(8, 7, 12, .18) 0%, rgba(8, 7, 12, .64) 72%),
    linear-gradient(180deg, rgba(7, 5, 10, .56) 0%, rgba(7, 5, 10, .74) 52%, rgba(5, 3, 8, .90) 100%);
}
body.ls-page-home-v2 .home-bg-video {
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120,60,160,.30) 0%, transparent 70%),
    linear-gradient(180deg, #14101c 0%, #050308 100%);
}
body.ls-page-home-v2 .home-bg-video video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: saturate(.82) contrast(1.05) brightness(.66);
  transform: scale(1.03);
}
/* 2026-05-25 — Removed .ls-bottombar from the position:relative override.
   Setting it relative broke its viewport pinning so the bar flowed inline
   with the grid content (mid-page) instead of sitting at the bottom.
   Bottombar keeps its chrome.css default of position:fixed; bottom:0. */
body.ls-page-home-v2 .ls-topnav,
body.ls-page-home-v2 .home-main,
body.ls-page-home-v2 .home-side {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.ls-page-home-v2 .home-bg-video {
    display: none;
  }
}
@media (hover: none) {
  body.ls-page-home-v2 .home-bg-video video {
    filter: saturate(.76) contrast(1.02) brightness(.50);
  }
}
html:has(body.ls-page-home-v2) {
  height: auto !important;
  overflow-y: auto !important;
}
/* 2026-05-25 — Bottom toolbar persists when chrome is "hidden"; keep its padding. */
body.chrome-hidden.ls-page-home-v2 { padding-top: 0; }

.home-main {
  display: flex; flex-direction: column;
  /* 14 → 9 so the categorized sections sit closer to the strip + Lobby. */
  gap: 9px;
  padding: 8px clamp(10px, 2.2vw, 22px);
  max-width: 1160px;
  margin: 0 auto;
}

/* 2026-05-06 — D: "main home page way cooler and more things — not just
   the rooms, but try to fit on one screen". Pull the home-main and
   the activity sidebar into a 2-column grid on desktop. The aside
   absorbs the bottom dead-space we used to waste below the room grid. */
@media (min-width: 980px){
  body.ls-page-home-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: 1fr;
    gap: 16px;
    align-items: start;
    max-width: 1260px;
    margin: 0 auto;
    padding-left: clamp(10px, 2vw, 22px);
    padding-right: clamp(10px, 2vw, 22px);
  }
  body.ls-page-home-v2 .home-main { padding: 0; max-width: none; }
  body.ls-page-home-v2 .home-side { padding: 0; }
  body.ls-page-home-v2 .ls-topnav,
  body.ls-page-home-v2 .ls-bottombar { grid-column: 1 / -1; }
}

.home-side {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 8px clamp(10px, 2.2vw, 22px) 16px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}
.home-side-card {
  background: linear-gradient(135deg, rgba(120,60,160,.10) 0%, rgba(20,14,28,.6) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.home-side-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.hsc-eyebrow {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #a09098);
  font-weight: 700;
}
.hsc-link { font-size: .72rem; color: var(--accent, #f0a050); text-decoration: none; font-weight: 700; }
.hsc-link:hover { text-decoration: underline; }
.hsc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(46, 213, 115, .12);
  border: 1px solid rgba(46, 213, 115, .35);
  font-size: .68rem;
  font-weight: 700;
  color: #9af2c5;
}
.hsc-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 6px rgba(46, 213, 115, .8);
  animation: ls-pres-pulse 2.2s ease-in-out infinite;
}
.home-side-now { display: flex; flex-direction: column; gap: 4px; }
.hsn-line {
  display: flex; gap: 10px;
  font-size: .76rem;
}
.hsn-key {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted, #a09098); font-weight: 700;
  min-width: 50px;
  padding-top: 2px;
}
.hsn-val { color: var(--text, #f5ede8); flex: 1; min-width: 0; word-break: break-word; }
.home-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.home-side-actions .hsa-btn {
  padding: 8px 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: var(--text, #f5ede8);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}
.home-side-actions .hsa-btn:hover { background: rgba(255,255,255,.10); border-color: var(--accent, #f0a050); color: var(--accent, #f0a050); }
.home-side-actions .hsa-btn:first-child { grid-column: 1 / -1; }
@media (max-width: 540px){
  .home-side { padding: 6px 8px 14px; gap: 8px; }
  .home-side-card { padding: 8px 10px; }
}

/* ─────────────────────────────────────────────────────────────
   HOME STRIP — clock, date, live presence, greeting
   Replaces the old "LittleScreen — chat · debate · sing · play" hero
   ───────────────────────────────────────────────────────────── */
.home-strip {
  position: relative;
  display: grid;
  /* 2026-05-02b — compacted per D's request. clock+date and stats now
     share a single row with the greeting; the giant 12-16px padding shrank
     to 8-12px so the card stops dominating the first viewport. */
  grid-template-columns: auto auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(120,60,160,.16) 0%, rgba(20,14,28,.6) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  overflow: hidden;
}
.home-strip-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .45;
}
.home-strip-bg .hero-orb {
  position: absolute;
  width: 24vmax; height: 24vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .4;
  mix-blend-mode: screen;
}
.home-strip-bg .hero-orb-a { background: var(--accent);  top: -12vmax; left: -8vmax; }
.home-strip-bg .hero-orb-b { background: var(--accent2); top: -12vmax; right: -8vmax; }

.home-strip-clock {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid rgba(255,255,255,.10);
  padding-right: 10px;
}
.home-strip-clock strong {
  /* 2026-05-02b — D: time/date should be smaller. Was clamp(1.35rem .. 1.8rem); */
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.home-strip-clock span {
  font-size: .58rem;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-strip-stats {
  position: relative; z-index: 1;
  /* 2026-05-02b — flowed inline horizontally so the strip can collapse to
     a single row on desktop, matching D's "fit on one screen" ask. */
  display: flex; flex-direction: row; gap: 12px;
  align-items: center;
}
.hs-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: .76rem;
}
.hs-stat strong {
  font-size: .92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.hs-stat-lbl { color: var(--muted); font-size: .64rem; }
.hs-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: inline-block;
}
.hs-dot.live   { background: #5fe27d; box-shadow: 0 0 8px #5fe27d; animation: hsPulse 2s ease-in-out infinite; }
.hs-dot.active { background: #f0a050; box-shadow: 0 0 4px #f0a050; }
@keyframes hsPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.home-strip-greeting {
  position: relative; z-index: 1;
  /* 2026-05-02b — sits inline at end of row instead of wrapping below.
     Falls back to grid-column:1/-1 only on narrow viewports. */
  margin: 0;
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.32;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-strip-greeting strong { color: var(--text); }
.home-strip-greeting em { color: var(--accent); font-style: normal; }

@media (max-width: 540px) {
  .home-strip { grid-template-columns: auto 1fr; padding: 10px 12px; gap: 10px; }
  .home-strip-clock { border-right: none; padding-right: 0; }
  .home-strip-greeting { grid-column: 1 / -1; text-align: left; white-space: normal; }
}

/* ─────────────────────────────────────────────────────────────
   HOME FEATURE — full-width Lobby card
   ───────────────────────────────────────────────────────────── */
.home-feature {
  display: grid;
  gap: 10px;
}
.home-feature .home-tile.featured {
  /* 2026-05-02b — was min-height:132px; D wants the lobby card smaller so
     more of the categorized rooms fit above the fold. */
  min-height: 92px;
  padding: 12px 14px;
  border-radius: 11px;
}
.home-feature .home-tile.featured .home-tile-name { font-size: 1.12rem; }
.home-feature .home-tile.featured .home-tile-desc { font-size: .78rem; -webkit-line-clamp: 2; }

/* ─────────────────────────────────────────────────────────────
   SECTIONS — Chat / Debate / Sing / Play / Other
   ───────────────────────────────────────────────────────────── */
.home-section {
  /* 2026-05-02b — gap shrunk to fit more sections in the first viewport. */
  display: flex; flex-direction: column; gap: 5px;
}
.home-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px;
}
.home-sec-head h2 {
  margin: 0;
  /* 2026-05-06 — D: section headers were nearly invisible against the
     dense room grid; bump size + add a side accent so each band reads. */
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
  color: var(--text, #f5ede8);
}
.home-section { position: relative; }
.home-section + .home-section { margin-top: 22px; }
.home-sec-head {
  border-left: 3px solid var(--accent, #f0a050);
  padding-left: 10px !important;
  margin-bottom: 8px;
}
.home-sec-head .home-sec-ic {
  font-size: 0;
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
}
.home-sec-head p {
  margin: 0;
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.28;
  padding-left: 0;
  /* tagline now sits inline next to the heading instead of below it */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
}

@media (max-width: 540px) {
  .home-sec-head { flex-wrap: wrap; gap: 6px; }
  .home-sec-head p { padding-left: 0; white-space: normal; flex-basis: 100%; }
  .home-sec-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 7px; }
}

/* HERO strip — compact, no big block of text */
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(20,14,26,.7), transparent);
  flex-shrink: 0;
}
.home-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.home-hero-bg .hero-orb {
  position: absolute;
  width: 30vmax; height: 30vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .25;
  mix-blend-mode: screen;
}
.home-hero-bg .hero-orb-a { background: var(--accent);  top: -15vmax; left: 0; }
.home-hero-bg .hero-orb-b { background: var(--accent2); top: -15vmax; right: 0; }

.home-hero-text { position: relative; z-index: 1; min-width: 0; }
.home-hero-title {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero-sub {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Identity card on hero (right side) */
.home-hero-id {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s;
}
.home-hero-id:hover { border-color: var(--accent); }
.home-id-pip {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem;
  background: var(--bg2);
  border: 2px solid var(--border-hi);
}
.home-id-meta { min-width: 0; }
.home-id-meta .eyebrow { font-size: .56rem; }
.home-id-meta span { font-weight: 700; font-size: .85rem; }

/* Legacy unified grid — kept hidden; sectioned home.js paints into the
   new .home-sec-grid containers instead. */
.home-rooms { display: none !important; }

.home-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  /* 2026-05-02c — D's "fit more on the page" pass: tile padding 12→9px,
     min-height 138→104px so the categorized rooms sit closer together.
     Hover/foot rules unchanged. */
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .14s, border-color .14s, box-shadow .14s;
  min-height: 104px;
}
.home-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-color, var(--accent));
  box-shadow: 0 12px 30px -16px var(--tile-color, var(--accent));
}
.home-tile.full { opacity: .55; pointer-events: none; }
.home-tile.full::after {
  content: 'FULL';
  position: absolute; top: 8px; right: 8px;
  background: var(--danger);
  color: #fff;
  font-size: .58rem; font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .12em;
}
.home-tile-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--tile-color) 0%, transparent 60%);
  opacity: .14;
  pointer-events: none;
}
/* Tiles with a room art image: paint it as the background, faded so text
   still reads. The radial gradient sits on top in the tint color. */
.home-tile.has-art .home-tile-bg {
  background:
    linear-gradient(to top, rgba(10,12,18,.92) 0%, rgba(10,12,18,.55) 45%, rgba(10,12,18,.30) 100%),
    radial-gradient(circle at 100% 0%, var(--tile-color) 0%, transparent 60%),
    var(--art-img) center/cover no-repeat,
    var(--card);
  opacity: 1;
}
.home-tile.has-art:hover .home-tile-bg {
  background:
    linear-gradient(to top, rgba(10,12,18,.85) 0%, rgba(10,12,18,.40) 50%, rgba(10,12,18,.15) 100%),
    radial-gradient(circle at 100% 0%, var(--tile-color) 0%, transparent 60%),
    var(--art-img) center/cover no-repeat,
    var(--card);
}
.home-tile.has-art .home-tile-desc { color: rgba(240,240,250,.85); }
.home-tile.has-art .home-tile-presence,
.home-tile.has-art .home-tile-name { color: #f5f5fa; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Lazy hover video — sits between bg and content, fades in when playing */
.home-tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.home-tile-video.playing { opacity: .55; }
.home-tile.has-art:hover .home-tile-video.playing { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .home-tile-video { display: none; }
}
.home-tile-head {
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
  min-width: 0;
}
.home-tile-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 0;
  background: rgba(255,255,255,.04);
  border-radius: 9px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.home-tile-name {
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.home-tile-desc {
  position: relative; z-index: 1;
  color: var(--muted);
  /* 2026-05-02c — desc shrunk + min-height removed so short tiles don't
     leave dead space. Lines clamp to 2 still. */
  font-size: .72rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.home-tile-foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
}
.home-tile-presence {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink, #f5ede8);
  background: rgba(20, 14, 28, .65);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  letter-spacing: .01em;
  /* PEOPLE-COUNT VISIBILITY (ls-2.44): was tiny .68rem muted text — now
     a pill so users can see how many people are in each room at a glance. */
}
.home-tile-presence .home-tile-dot {
  width: 8px; height: 8px;
}
.home-tile-presence.has-people {
  background: rgba(46, 213, 115, .18);
  border-color: rgba(46, 213, 115, .55);
  color: #9af2c5;
  box-shadow: 0 0 12px rgba(46, 213, 115, .15);
}
.home-tile-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: ls-pres-pulse 2.2s ease-in-out infinite;
}
/* 2026-05-06 — D: "main home page could use some love". An empty
   room shouldn't feel dead — a quiet breathing dot reads as "open / ready"
   without competing with rooms that have actual people in them. */
.home-tile-dot.idle {
  background: rgba(255, 215, 130, .32);
  box-shadow: 0 0 6px rgba(255, 215, 130, .25);
  animation: ls-pres-idle 3.6s ease-in-out infinite;
}
@keyframes ls-pres-idle {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: .9;  transform: scale(1); }
}
@keyframes ls-pres-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.home-tile-cta {
  font-size: .68rem;
  font-weight: 700;
  color: var(--tile-color, var(--accent));
}

/* Featured Lobby — spans 2 columns, has stronger gradient */
.home-tile.featured {
  grid-column: span 2;
  background:
    radial-gradient(circle at 100% 0%, var(--tile-color, var(--accent)) 0%, transparent 60%),
    var(--card);
  border-color: var(--tile-color, var(--accent));
}
.home-tile.featured .home-tile-icon { width: 38px; height: 38px; font-size: 0; }
.home-tile.featured .home-tile-name { font-size: 1.05rem; }
.home-tile.featured .home-tile-desc { font-size: .78rem; -webkit-line-clamp: 3; }

/* VR mode bigger */
body.vr-mode .home-tile { padding: 14px; }
body.vr-mode .home-tile-icon { width: 40px; height: 40px; font-size: 1.4rem; }
body.vr-mode .home-tile-name { font-size: 1rem; }
body.vr-mode .home-tile-desc { font-size: .82rem; }
body.vr-mode .home-hero-title { font-size: clamp(1.3rem, 3vw, 1.8rem); }
body.vr-mode .home-hero-sub { font-size: .95rem; }

/* Mobile — fewer columns */
@media (max-width: 1100px) {
  .home-rooms { grid-template-columns: repeat(5, 1fr); }
  .home-tile.featured { grid-column: span 2; }
}
@media (max-width: 760px) {
  .home-hero { grid-template-columns: 1fr; gap: 6px; padding: 8px 12px; }
  .home-hero-id { width: fit-content; }
  .home-rooms { grid-template-columns: repeat(3, 1fr); padding: 8px 10px; gap: 6px; }
  .home-tile.featured { grid-column: span 3; }
  .home-tile-icon { width: 28px; height: 28px; font-size: 1rem; }
  .home-tile-name { font-size: .78rem; }
  .home-tile-desc { font-size: .66rem; -webkit-line-clamp: 2; }
}
@media (max-width: 460px) {
  .home-rooms { grid-template-columns: repeat(2, 1fr); }
  .home-tile.featured { grid-column: span 2; }
}

/* Desktop dashboard pass.
   2026-05-25 — Used to lock body to 100vh + overflow:hidden so everything
   "fit on one screen". D reported "can't scroll" on Browse Home because
   content + the now-taller bottombar didn't actually fit. Allowed body to
   scroll while still aiming for one-screen presentation on tall viewports. */
@media (min-width: 900px) and (min-height: 680px) {
  body.ls-page-home-v2 {
    min-height: 100vh;
    padding-top: 64px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
  .home-main {
    min-height: calc(100vh - 64px - 108px);
    max-width: 1280px;
    padding: 8px clamp(10px, 1.6vw, 18px);
    gap: 8px;
  }
  .home-strip {
    grid-template-columns: auto auto 1fr;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 11px;
  }
  .home-strip-bg .hero-orb { display: none; }
  .home-strip-clock {
    padding-right: 12px;
  }
  .home-strip-clock strong {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
  }
  .home-strip-stats {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
  }
  .hs-stat {
    align-items: center;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 4px 9px;
  }
  .home-strip-greeting {
    grid-column: auto;
    border-top: 0;
    padding-top: 0;
    justify-self: end;
    max-width: 56ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-feature .home-tile.featured {
    min-height: 78px;
    padding: 10px 12px;
  }
  .home-feature .home-tile.featured .home-tile-icon {
    width: 34px;
    height: 34px;
  }
  .home-feature .home-tile.featured .home-tile-name {
    font-size: 1.08rem;
  }
  .home-feature .home-tile.featured .home-tile-desc {
    font-size: .78rem;
    -webkit-line-clamp: 1;
    min-height: 0;
  }
  .home-section {
    gap: 4px;
  }
  .home-sec-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
  }
  .home-sec-head h2 {
    font-size: .9rem;
    gap: 7px;
  }
  .home-sec-head .home-sec-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .home-sec-head p {
    padding-left: 0;
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-sec-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 7px;
  }
  .home-tile {
    min-height: 82px;
    padding: 9px 10px;
    gap: 5px;
    border-radius: 10px;
  }
  .home-tile-head {
    gap: 7px;
  }
  .home-tile-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }
  .home-tile-name {
    font-size: .86rem;
  }
  .home-tile-desc {
    font-size: .7rem;
    line-height: 1.25;
    -webkit-line-clamp: 1;
    min-height: 18px;
  }
  .home-tile-presence {
    font-size: .66rem;
    padding: 2px 7px;
  }
  .home-tile-cta {
    font-size: .64rem;
  }
}

/* ── SPLASH (cinematic) ──────────────────────── */
.ls-splash {
  position: fixed; inset: 0;
  z-index: 200;
  background: radial-gradient(ellipse at 50% 60%, #2a1830 0%, #0a0610 70%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 20px;
  animation: splashFadeOut .8s cubic-bezier(.6,0,.2,1) forwards 2.6s;
}
.ls-splash.gone { display: none !important; }
@keyframes splashFadeOut {
  to { opacity: 0; transform: scale(1.04); pointer-events: none; }
}
.ls-splash-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.splash-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: splashOrb 5s ease-in-out infinite alternate;
}
.splash-orb.orb-1 { width: 60vmax; height: 60vmax; background: var(--accent); top: -25vmax; left: -15vmax; opacity: .55; }
.splash-orb.orb-2 { width: 60vmax; height: 60vmax; background: var(--accent2); bottom: -25vmax; right: -15vmax; opacity: .45; animation-delay: -2s; }
.splash-orb.orb-3 { width: 30vmax; height: 30vmax; background: #6e4cff; top: 30%; left: 40%; opacity: .35; animation-delay: -3s; }
@keyframes splashOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vmax, -6vmax) scale(1.15); }
}
.splash-rays {
  position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(240,160,80,.06) 5deg, transparent 14deg);
  animation: rayspin 80s linear infinite;
  opacity: .5;
}
@keyframes rayspin { to { transform: rotate(360deg); } }

.ls-splash-mark {
  position: relative; z-index: 1;
  font-size: 5.6rem;
  filter: drop-shadow(0 0 50px var(--accent));
  animation: splashPop 1s cubic-bezier(.16,1.4,.3,1) .15s both;
}
.ls-splash-title {
  position: relative; z-index: 1;
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: -.05em;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--accent), #fff 50%, var(--accent2));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: splashRise .9s cubic-bezier(.2,1.2,.3,1) .35s both, splashShimmer 4s ease-in-out infinite;
}
@keyframes splashShimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.ls-splash-sub {
  position: relative; z-index: 1;
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  color: var(--muted);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 10px;
  animation: splashRise .8s ease .55s both;
}
@keyframes splashPop {
  0%   { opacity: 0; transform: scale(.4) rotate(-20deg) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.1) rotate(4deg) translateY(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes splashRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.ls-splash-bar {
  position: relative; z-index: 1;
  width: 240px; max-width: 60vw;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 38px;
}
.ls-splash-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  animation: splashFill 2.2s cubic-bezier(.4,0,.2,1) .3s forwards;
}
@keyframes splashFill { to { width: 100%; } }
.ls-splash-skip {
  position: relative; z-index: 1;
  margin-top: 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: splashRise .7s ease 1.1s both;
}
.ls-splash-skip:hover { color: var(--text); border-color: var(--accent); }

/* 2026-05-23 home/front-door pass: no home chat surface, compact intro,
   and a tighter picker that aims to fit the desktop home in one viewport. */
body.ls-page-home-v2 .home-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
}
.home-intro-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-intro-kicker {
  margin: 0;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent, #f0a050);
  font-weight: 800;
}
.home-intro-title {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.02;
  letter-spacing: 0;
}
.home-strip .home-strip-greeting {
  max-width: 72ch;
  margin: 0;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: .84rem;
  line-height: 1.35;
}
.home-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}
.home-intro-btn,
.home-random-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  color: var(--text, #f5ede8);
  text-decoration: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.home-intro-btn.primary,
.home-random-mini {
  background: var(--accent, #f0a050);
  border-color: var(--accent, #f0a050);
  color: #160f14;
}
.home-intro-btn:hover,
.home-random-mini:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #f0a050);
  color: var(--accent, #f0a050);
  background: rgba(255,255,255,.09);
}
.home-intro-btn.primary:hover,
.home-random-mini:hover {
  color: #160f14;
  background: #ffd59d;
}
.home-intro-status {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  align-content: center;
}
.home-intro-status .hs-stat {
  justify-content: space-between;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  padding: 7px 9px;
}
.home-intro-status .hs-stat strong { font-size: 1.05rem; }
.home-random-mini { width: 100%; }
.home-side-intro { border-color: rgba(240,160,80,.20); }
.home-side-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.home-side-steps li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.home-side-steps li:first-child {
  border-top: 0;
  padding-top: 0;
}
.home-side-steps strong { font-size: .82rem; }
.home-side-steps span {
  color: var(--muted, #a09098);
  font-size: .72rem;
  line-height: 1.35;
}
.home-side-actions { grid-template-columns: 1fr 1fr; }
.home-side-actions .hsa-btn:first-child { grid-column: auto; }
.home-side-actions .hsa-primary {
  background: var(--accent, #f0a050);
  border-color: var(--accent, #f0a050);
  color: #160f14;
}

@media (min-width: 980px){
  body.ls-page-home-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 12px;
    max-width: 1360px;
  }
}

@media (min-width: 900px) and (min-height: 680px) {
  .home-main {
    gap: 7px;
  }
  .home-strip {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    min-height: 116px;
    padding: 11px 13px;
  }
  .home-intro-title {
    font-size: 1.48rem;
  }
  .home-strip .home-strip-greeting {
    max-width: 68ch;
    font-size: .78rem;
    line-height: 1.3;
  }
  .home-feature .home-tile.featured {
    min-height: 70px;
    padding: 10px 12px;
  }
  .home-feature .home-tile.featured .home-tile-desc {
    -webkit-line-clamp: 1;
  }
  .home-section { gap: 4px; }
  .home-section + .home-section { margin-top: 8px; }
  .home-section-other { display: none !important; }
  .home-sec-head { margin-bottom: 4px; }
  .home-sec-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px;
  }
  .home-tile {
    min-height: 72px;
    padding: 8px 9px;
    gap: 4px;
  }
  .home-tile-desc {
    -webkit-line-clamp: 1;
    min-height: 18px;
  }
  .home-side {
    max-height: calc(100vh - 132px);
    overflow: hidden;
    gap: 8px;
  }
  .home-side-card {
    padding: 9px 10px;
    gap: 7px;
  }
  .home-side-steps { gap: 5px; }
  .home-side-steps li { padding: 6px 0; }
  .home-side-steps span {
    font-size: .68rem;
    line-height: 1.28;
  }
}

@media (max-width: 720px) {
  .home-strip { grid-template-columns: 1fr; }
  .home-intro-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-random-mini { min-width: 0; }
}

@media (max-width: 540px) {
  .home-intro-title { font-size: 1.28rem; }
  .home-intro-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-intro-status { grid-template-columns: 1fr; }
}

/* Last-mile compact home override: chrome-extras loads before home.css, so
   the mobile front-door rules live here to keep the intro short and visible. */
@media (max-width: 760px) {
  body.ls-page-home-v2 .home-side {
    display: none !important;
  }
  body.ls-page-home-v2 .home-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    min-height: 0 !important;
    align-items: start !important;
  }
  body.ls-page-home-v2 .home-intro-title {
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
  }
  body.ls-page-home-v2 .home-strip .home-strip-greeting {
    font-size: .72rem !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  body.ls-page-home-v2 .home-intro-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body.ls-page-home-v2 .home-intro-btn,
  body.ls-page-home-v2 .home-random-mini {
    min-height: 30px !important;
    padding: 6px 5px !important;
    font-size: .68rem !important;
    border-radius: 8px !important;
  }
  body.ls-page-home-v2 .home-intro-status {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body.ls-page-home-v2 .home-intro-status .hs-stat {
    min-width: 0;
    padding: 5px 4px !important;
    justify-content: center !important;
  }
  body.ls-page-home-v2 .home-random-mini {
    width: auto !important;
  }
}

/* Front-door chooser: the splash waits for an explicit path instead of
   auto-dropping visitors into the full home grid. */
body.ls-page-home-v2 .ls-splash {
  animation: none !important;
}
body.ls-page-home-v2 .ls-splash-actions {
  display: grid !important;
  width: min(980px, 92vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.ls-page-home-v2 .ls-splash-choice,
body.ls-page-home-v2 .ls-splash-sound,
body.ls-page-home-v2 .ls-splash-queue {
  min-height: clamp(50px, 7.2vh, 64px);
  order: 0;
}
body.ls-page-home-v2 .ls-splash-room .ls-splash-choice-kicker {
  font-size: clamp(.76rem, 1.18vw, .94rem);
}
body.ls-page-home-v2 .ls-splash-choice.is-selected {
  border-color: var(--accent, #f0a050);
  box-shadow: 0 0 0 2px rgba(240,160,80,.22), 0 18px 48px rgba(0,0,0,.32);
}
@media (max-height: 740px) {
  body.ls-page-home-v2 .ls-splash-reel {
    display: none;
  }
  body.ls-page-home-v2 .ls-splash-step {
    min-height: 0;
    padding: 8px 10px;
  }
}
@media (max-width: 720px) {
  body.ls-page-home-v2 .ls-splash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(480px, 92vw);
    gap: 10px;
  }
  body.ls-page-home-v2 .ls-splash-choice,
  body.ls-page-home-v2 .ls-splash-sound,
  body.ls-page-home-v2 .ls-splash-queue {
    min-height: 50px;
  }
}
@media (max-width: 420px), (max-height: 620px) {
  body.ls-page-home-v2 .ls-splash-steps {
    display: none;
  }
}

/* 2026-05-24 home media refinement: use the room-media language on the
   first screen, with a clearer logo, brighter video, and tighter chooser. */
body.ls-page-home-v2 .ls-splash {
  isolation: isolate;
  background: #050309;
  padding: clamp(16px, 2.6vh, 36px) clamp(18px, 4vw, 64px);
}
body.ls-page-home-v2 .ls-splash-bg::before {
  z-index: 2;
  background:
    radial-gradient(ellipse 70% 54% at 50% 30%, rgba(8,6,12,.06), rgba(8,6,12,.66) 72%),
    linear-gradient(90deg, rgba(4,3,8,.70), rgba(4,3,8,.12) 42%, rgba(4,3,8,.72)),
    linear-gradient(180deg, rgba(4,3,8,.18), rgba(4,3,8,.76));
}
body.ls-page-home-v2 .ls-splash-bg::after {
  opacity: .14;
  background-size: 100% 52px, 52px 100%;
}
body.ls-page-home-v2 .ls-splash-video-main {
  filter: saturate(1.08) contrast(1.08) brightness(.86);
  transform: scale(1.02);
}
body.ls-page-home-v2 .ls-splash-video-glass {
  mix-blend-mode: normal;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.38) 72%, rgba(0,0,0,.62)),
    radial-gradient(ellipse 54% 34% at 50% 18%, rgba(255,190,112,.18), transparent 76%);
}
body.ls-page-home-v2 .splash-rays,
body.ls-page-home-v2 .splash-orb {
  display: none !important;
}
body.ls-page-home-v2 .ls-splash-mark {
  width: clamp(64px, 7.2vw, 98px);
  height: clamp(64px, 7.2vw, 98px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    #130c18;
  box-shadow: 0 22px 70px rgba(0,0,0,.54), 0 0 44px rgba(255,172,87,.20);
  filter: none;
}
body.ls-page-home-v2 .ls-splash-mark::before {
  content: "LS";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,232,202,.82);
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 950;
  letter-spacing: .04em;
}
body.ls-page-home-v2 .ls-splash-mark img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow: none;
  background: rgba(8,5,10,.82);
}
body.ls-page-home-v2 .ls-splash-title {
  margin-top: clamp(8px, 1.3vh, 14px);
  font-size: clamp(3rem, 5.4vw, 5.45rem) !important;
  line-height: .92;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: #f7f3ef;
  color: #f7f3ef;
  text-shadow: 0 18px 58px rgba(0,0,0,.74);
  animation: splashRise .9s cubic-bezier(.2,1.2,.3,1) .35s both;
}
body.ls-page-home-v2 .ls-splash-sub {
  margin-top: 7px;
  color: rgba(255,248,240,.78);
  font-size: clamp(.72rem, 1.05vw, 1rem);
  letter-spacing: .28em;
}
body.ls-page-home-v2 .ls-splash-reel {
  width: min(980px, 88vw);
  gap: 12px;
  margin-top: clamp(14px, 2vh, 24px);
}
body.ls-page-home-v2 .ls-splash-clip {
  min-height: clamp(72px, 10.5vh, 116px);
  aspect-ratio: 16 / 5.4;
  border-radius: 14px;
  border-color: rgba(255,255,255,.20);
  background: rgba(12,8,16,.72);
  box-shadow: 0 18px 52px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
}
body.ls-page-home-v2 .ls-splash-clip video {
  filter: saturate(1.08) contrast(1.06) brightness(.94);
  transform: scale(1.025);
}
body.ls-page-home-v2 .ls-splash-clip::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.62)),
    linear-gradient(90deg, rgba(0,0,0,.46), transparent 62%);
}
body.ls-page-home-v2 .ls-splash-clip b {
  left: 14px;
  bottom: 12px;
  font-size: clamp(.76rem, 1vw, .96rem);
  letter-spacing: .08em;
}
body.ls-page-home-v2 .ls-splash-steps {
  width: min(980px, 88vw);
  gap: 10px;
  margin-top: clamp(10px, 1.6vh, 18px);
}
body.ls-page-home-v2 .ls-splash-step {
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10,8,14,.58);
  border-color: rgba(255,255,255,.13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.ls-page-home-v2 .ls-splash-step-h {
  font-size: .84rem;
}
body.ls-page-home-v2 .ls-splash-step-p {
  font-size: .7rem;
  line-height: 1.25;
}
body.ls-page-home-v2 .ls-splash-actions {
  display: grid !important;
  width: min(980px, 88vw);
  gap: 10px;
  margin-top: clamp(12px, 1.8vh, 20px);
}
body.ls-page-home-v2 .ls-splash-choice,
body.ls-page-home-v2 .ls-splash-actions .ls-splash-go,
body.ls-page-home-v2 .ls-splash-sound,
body.ls-page-home-v2 .ls-splash-queue {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  text-align: center !important;
  min-height: clamp(54px, 7.6vh, 72px);
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
    rgba(8,6,12,.68);
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.045);
}
body.ls-page-home-v2 .ls-splash-choice:hover,
body.ls-page-home-v2 .ls-splash-sound:hover {
  transform: translateY(-1px);
  border-color: rgba(255,206,142,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)),
    rgba(12,9,16,.78);
}
body.ls-page-home-v2 .ls-splash-go {
  background:
    linear-gradient(135deg, rgba(255,235,212,.88), rgba(246,190,154,.88)) !important;
  color: #170d0a !important;
}
body.ls-page-home-v2 .ls-splash-choice-kicker {
  font-size: clamp(.82rem, 1.04vw, 1rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f7f3ef;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
body.ls-page-home-v2 .ls-splash-choice-sub,
body.ls-page-home-v2 .ls-splash-track {
  color: rgba(255,248,240,.78);
  font-size: clamp(.62rem, .76vw, .74rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  margin-top: 4px;
}
body.ls-page-home-v2 .ls-splash-foot {
  margin-top: clamp(8px, 1.2vh, 14px);
  color: rgba(255,248,240,.58);
}

@media (min-width: 1180px) and (min-height: 820px) {
  body.ls-page-home-v2 .ls-splash {
    justify-content: center;
  }
  body.ls-page-home-v2 .ls-splash-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-height: 760px) {
  body.ls-page-home-v2 .ls-splash-steps {
    display: none;
  }
  body.ls-page-home-v2 .ls-splash-reel {
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  body.ls-page-home-v2 .ls-splash-reel {
    width: min(460px, 92vw);
    gap: 7px;
  }
  body.ls-page-home-v2 .ls-splash-clip {
    min-height: 58px;
    aspect-ratio: 1.3 / 1;
    border-radius: 10px;
  }
  body.ls-page-home-v2 .ls-splash-actions {
    width: min(460px, 92vw);
    gap: 8px;
  }
}

/* 2026-05-24 home chrome tightening: keep the main menu directly under
   the ticker. Earlier home-grid rules made the nav relative, which doubled
   the ticker/top padding and left a big empty media band above the menu. */
body.ls-page-home-v2 .ls-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 61;
}
body.ls-page-home-v2.ls-has-ticker .ls-topnav {
  top: var(--ls-ticker-height, 26px);
}

/* ==========================================================================
   Home Page Action Cards (First-time user path)
   ========================================================================== */
.home-action-section {
  padding: 16px 0 24px;
}
.home-action-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  width: 100%;
}
.home-action-card {
  background: var(--surface, rgba(25, 18, 25, 0.45));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text, #f5ede8);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.2s ease, 
              box-shadow 0.2s ease,
              background 0.2s ease;
}
.home-action-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent, #f0a050);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.hac-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}
.home-action-card:hover .hac-icon {
  transform: scale(1.12);
}
.hac-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--accent, #f0a050);
}
.hac-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.82;
  margin: 0 0 16px 0;
  flex: 1;
}
.hac-btn {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent2, #b980ff);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.home-action-card:hover .hac-btn {
  color: var(--accent, #f0a050);
}

/* ==========================================================================
   Cohesive Splash Step Cards Video Background Styling
   ========================================================================== */
body.ls-page-home-v2 .ls-splash-step {
  position: relative !important;
  overflow: hidden !important; /* Ensure background video is clipped */
  z-index: 1 !important;
}
body.ls-page-home-v2 .ls-splash-step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.65));
  pointer-events: none;
}
/* Style both by class and element tag to ensure it is always matched */
body.ls-page-home-v2 .ls-splash-step .step-bg-video,
body.ls-page-home-v2 .ls-splash-step video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
  filter: saturate(1.1) contrast(1.05) brightness(0.45) !important;
  transition: transform 0.25s ease, filter 0.25s ease;
}
body.ls-page-home-v2 .ls-splash-step:hover .step-bg-video,
body.ls-page-home-v2 .ls-splash-step:hover video {
  transform: scale(1.05) !important;
  filter: saturate(1.2) contrast(1.05) brightness(0.52) !important;
}
body.ls-page-home-v2 .ls-splash-step > *:not(.step-bg-video):not(video) {
  position: relative !important;
  z-index: 1 !important;
}


/* ==========================================================================
   Cohesive Actions/Buttons Background Video Styling
   ========================================================================== */
body.ls-page-home-v2 .ls-splash-choice,
body.ls-page-home-v2 .ls-splash-actions .ls-splash-go,
body.ls-page-home-v2 .ls-splash-sound,
body.ls-page-home-v2 .ls-splash-queue {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
body.ls-page-home-v2 .ls-splash-choice::after,
body.ls-page-home-v2 .ls-splash-sound::after,
body.ls-page-home-v2 .ls-splash-queue::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.72));
  pointer-events: none;
}
body.ls-page-home-v2 .choice-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
  filter: saturate(1.1) contrast(1.05) brightness(0.38) !important; /* Slightly darker for clear label contrast */
  transition: transform 0.25s ease, filter 0.25s ease;
}
body.ls-page-home-v2 .ls-splash-choice:hover .choice-bg-video,
body.ls-page-home-v2 .ls-splash-sound:hover .choice-bg-video,
body.ls-page-home-v2 .ls-splash-queue:hover .choice-bg-video {
  transform: scale(1.06) !important;
  filter: saturate(1.2) contrast(1.05) brightness(0.46) !important;
}
body.ls-page-home-v2 .ls-splash-choice > *:not(.choice-bg-video),
body.ls-page-home-v2 .ls-splash-actions button > *:not(.choice-bg-video),
body.ls-page-home-v2 .ls-splash-sound > *:not(.choice-bg-video),
body.ls-page-home-v2 .ls-splash-queue > *:not(.choice-bg-video) {
  position: relative !important;
  z-index: 1 !important;
}
body.ls-page-home-v2 .ls-splash-go {
  background:
    linear-gradient(135deg, rgba(255,235,212,.32), rgba(246,190,154,.32)) !important;
  color: var(--text, #f5ede8) !important; /* Lighter text for the Browse All card overlay */
}
body.ls-page-home-v2 .ls-splash-go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.72));
  pointer-events: none;
}

/* 2026-05-24 front-door finish: clear entry paths plus a real ID path. */
body.ls-page-home-v2 .ls-splash {
  min-height: 100svh;
  gap: clamp(8px, 1.25vh, 14px);
}
body.ls-page-home-v2 .ls-splash-title {
  margin-top: clamp(6px, 1vh, 12px);
}
body.ls-page-home-v2 .ls-splash-sub {
  max-width: min(720px, 88vw);
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  font-weight: 700;
}
body.ls-page-home-v2 .ls-splash-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 900px;
  margin-top: clamp(10px, 1.6vh, 18px);
}
body.ls-page-home-v2 .ls-splash-choice,
body.ls-page-home-v2 .ls-splash-queue {
  min-height: clamp(74px, 10vh, 104px) !important;
  padding: 12px 14px !important;
  gap: 4px;
}
body.ls-page-home-v2 .ls-splash-choice.is-primary {
  border-color: color-mix(in srgb, var(--accent, #f0a050) 74%, white 8%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #f0a050) 38%, transparent),
    0 22px 64px rgba(0,0,0,.42);
}
body.ls-page-home-v2 .ls-splash-choice-kicker {
  font-size: clamp(.86rem, 1.12vw, 1.08rem) !important;
  line-height: 1;
}
body.ls-page-home-v2 .ls-splash-choice-sub {
  max-width: 18ch;
  line-height: 1.25;
}
body.ls-page-home-v2 .ls-splash-status {
  margin: 0;
  min-height: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,4,10,.52);
  color: rgba(255,248,240,.72);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}
body.ls-page-home-v2 .ls-splash.has-id-ready .ls-splash-status {
  color: #c8ffe2;
  border-color: rgba(79,255,165,.30);
  background: rgba(35,120,75,.20);
}
body.ls-page-home-v2 .ls-splash-audio-control {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 0;
}
body.ls-page-home-v2 .ls-splash-sound {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  flex-direction: row !important;
  gap: 8px !important;
  background: rgba(8,6,12,.62) !important;
}
body.ls-page-home-v2 .ls-splash-audio-control .ls-splash-track {
  max-width: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ls-page-home-v2 .home-intro-status {
  min-width: 0;
}
body.ls-page-home-v2 .home-intro-status .hs-stat {
  min-width: 0;
  grid-template-columns: auto minmax(28px, 1fr) auto;
}
body.ls-page-home-v2 .home-intro-status .hs-stat-lbl {
  white-space: nowrap;
}
@media (max-width: 720px) {
  body.ls-page-home-v2 .ls-splash {
    justify-content: flex-start;
    padding-top: max(18px, env(safe-area-inset-top));
  }
  body.ls-page-home-v2 .ls-splash-mark {
    width: 58px;
    height: 58px;
  }
  body.ls-page-home-v2 .ls-splash-title {
    font-size: clamp(2.35rem, 13vw, 3.25rem) !important;
  }
  body.ls-page-home-v2 .ls-splash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(460px, 92vw);
  }
  body.ls-page-home-v2 .ls-splash-choice,
  body.ls-page-home-v2 .ls-splash-queue {
    min-height: 76px !important;
  }
}
@media (max-width: 390px), (max-height: 670px) {
  body.ls-page-home-v2 .ls-splash {
    gap: 7px;
  }
  body.ls-page-home-v2 .ls-splash-choice,
  body.ls-page-home-v2 .ls-splash-queue {
    min-height: 64px !important;
    padding: 9px 10px !important;
  }
  body.ls-page-home-v2 .ls-splash-foot {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-25 — Home page polish pass (D ask: cards look broken /
   too busy over the BG video). Strengthen card surfaces so text is
   readable regardless of what's playing behind, dim the background
   one more notch, and tighten the relationship between the action
   row and the room category grid.
───────────────────────────────────────────────────────────────── */

/* 1. Dim the background video more — was brightness(.66), now .42.
   Cards are read first; the BG is mood. */
body.ls-page-home-v2 .home-bg-video video {
  filter: saturate(.72) contrast(1.05) brightness(.42) !important;
}
body.ls-page-home-v2 .home-bg-video::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,5,10,.55) 0%, rgba(7,5,10,.78) 100%);
  pointer-events: none;
}

/* 2. Action cards: more solid background, less glass. The translucent
   look read as "broken" because text fought with bright video frames. */
body.ls-page-home-v2 .home-action-card {
  background: rgba(20, 14, 26, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
body.ls-page-home-v2 .home-action-card:hover {
  background: rgba(28, 20, 36, 0.88) !important;
  border-color: var(--accent, #f0a050) !important;
}

/* 3. Hero strip: solidify too, tighten action button row */
body.ls-page-home-v2 .home-strip {
  background: rgba(20, 14, 26, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* 4. Room category tiles (Discuss / Feed / Lounge / Debate / etc.):
   match the action card treatment so all cards feel like one system. */
body.ls-page-home-v2 .home-tile {
  background: rgba(20, 14, 26, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}
body.ls-page-home-v2 .home-tile:hover {
  background: rgba(28, 20, 36, 0.84) !important;
  border-color: var(--accent, #f0a050) !important;
}

/* 5. Right sidebar cards (HOW IT WORKS / LIVE NOW / QUICK ACTIONS):
   same surface treatment for visual consistency. */
body.ls-page-home-v2 .home-side-card {
  background: rgba(20, 14, 26, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-25 — Home cohesion pass 2 (D ask: "should be cohesive").
   The visual chaos came from THREE specific things:
     1. 5 action cards in a 4-col grid → awkward 4+1 wrap with
        Safety & Help alone on row 2.
     2. Lobby feature tile rendered full-width while every other
        tile was 1/4 width — broke the rhythm.
     3. Each hub tile painted with its own accent color → rainbow.
   Fixes below force the action row to fit evenly, size the Lobby
   featured tile to the grid cell, and mute the per-tile accents
   to one cohesive cream/orange.
───────────────────────────────────────────────────────────────── */

/* 1. Action cards: 5-up row at desktop. Was auto-fit minmax(180px)
   inside a parent constrained to 4-col grid — caused wrap. Pin to 5. */
@media (min-width: 980px){
  body.ls-page-home-v2 .home-action-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
/* Tablet — 3-up so each card stays tappable */
@media (min-width: 640px) and (max-width: 979px){
  body.ls-page-home-v2 .home-action-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
/* Phone — 2-up. Safety + Help wraps to row 3 alone but that's
   expected on narrow screens. */
@media (max-width: 639px){
  body.ls-page-home-v2 .home-action-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Action card internal tightening — at 5-up each card is ~180px wide */
body.ls-page-home-v2 .home-action-card {
  padding: 14px 14px 12px !important;
}
body.ls-page-home-v2 .home-action-card .hac-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
body.ls-page-home-v2 .home-action-card .hac-title {
  font-size: .94rem;
  margin-bottom: 4px;
}
body.ls-page-home-v2 .home-action-card .hac-desc {
  font-size: .74rem;
  margin-bottom: 10px;
}
body.ls-page-home-v2 .home-action-card .hac-btn {
  font-size: .68rem;
}

/* 2. Lobby feature tile: stay in the 4-col flow rather than spanning
   full width. The "featured" slot was overkill — make it the same
   width as the hub tiles below it. */
body.ls-page-home-v2 .home-feature {
  grid-column: 1 / -1;
}
body.ls-page-home-v2 .home-feature .home-tile.featured {
  max-width: none;
  min-height: 80px;
}

/* 3. Hub tile CTA links: use single accent (was per-tile rainbow). */
body.ls-page-home-v2 .home-tile .home-tile-cta,
body.ls-page-home-v2 .home-tile a[class*="enter"],
body.ls-page-home-v2 .home-tile .home-tile-bottom a {
  color: var(--accent, #f0a050) !important;
}

/* 2026-06-15 start-page repair: make media visible on first paint and
   keep the home front door friendly in mobile and VR browsers. */
body.ls-page-home-v2 {
  background:
    linear-gradient(180deg, rgba(7,5,10,.54), rgba(7,5,10,.90)),
    url("img/home-hero-bg.jpg") center / cover fixed no-repeat,
    #09060d !important;
}

body.ls-page-home-v2 .home-bg-video {
  background:
    linear-gradient(180deg, rgba(7,5,10,.44), rgba(7,5,10,.82)),
    url("img/home-hero-bg.jpg") center / cover no-repeat !important;
}

body.ls-page-home-v2 .ls-splash {
  background:
    linear-gradient(180deg, rgba(4,3,8,.28), rgba(4,3,8,.86)),
    url("img/lobby-bg.jpg") center / cover no-repeat,
    #050309 !important;
}

body.ls-page-home-v2 .ls-splash-bg {
  background: url("img/lobby-bg.jpg") center / cover no-repeat;
}

body.ls-page-home-v2 .ls-splash-video-main {
  opacity: .9;
}

body.ls-page-home-v2 .ls-splash-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(860px, 92vw) !important;
  gap: 10px !important;
}

body.ls-page-home-v2 .ls-splash-choice,
body.ls-page-home-v2 .ls-splash-queue {
  min-height: clamp(84px, 11vh, 118px) !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background-color: rgba(14,10,18,.78) !important;
}

body.ls-page-home-v2 .choice-bg-video {
  opacity: 1 !important;
  background-size: cover !important;
  background-position: center !important;
}

body.ls-page-home-v2 .ls-splash-choice::after,
body.ls-page-home-v2 .ls-splash-sound::after,
body.ls-page-home-v2 .ls-splash-queue::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.70) 76%),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12)) !important;
}

body.ls-page-home-v2 .ls-splash-choice-kicker {
  text-align: left;
  letter-spacing: .10em !important;
}

body.ls-page-home-v2 .ls-splash-choice-sub {
  text-align: left;
  max-width: none !important;
}

body.ls-page-home-v2 .ls-splash-choice.is-primary {
  border-color: rgba(111, 213, 255, .62) !important;
}

body.ls-page-home-v2 .home-main {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 10px !important;
}

body.ls-page-home-v2 .home-strip {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(22, 16, 28, .88), rgba(13, 9, 18, .82)),
    url("img/home-hero-bg.jpg") center / cover no-repeat !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
}

body.ls-page-home-v2 .home-intro-title {
  max-width: 22ch;
  font-size: clamp(1.45rem, 3.4vw, 2.35rem) !important;
}

body.ls-page-home-v2 .home-strip .home-strip-greeting {
  max-width: 68ch;
  color: rgba(247,243,239,.76) !important;
}

body.ls-page-home-v2 .home-intro-actions {
  gap: 8px !important;
}

body.ls-page-home-v2 .home-intro-btn,
body.ls-page-home-v2 .home-random-mini {
  min-height: 42px !important;
  border-radius: 13px !important;
  padding: 9px 13px !important;
  font-size: .82rem !important;
}

body.ls-page-home-v2 .home-action-section {
  padding: 0 !important;
}

body.ls-page-home-v2 .home-action-cards {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}

body.ls-page-home-v2 .home-action-card {
  min-height: 118px;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    rgba(18, 13, 24, .88) !important;
}

body.ls-page-home-v2 .home-feature .home-tile.featured {
  min-height: 118px !important;
  border-radius: 18px !important;
}

body.ls-page-home-v2 .home-tile {
  min-height: 124px !important;
  border-radius: 16px !important;
  background: rgba(17, 12, 23, .86) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

body.ls-page-home-v2 .home-tile.has-art .home-tile-bg {
  background:
    linear-gradient(180deg, rgba(9,7,12,.10) 0%, rgba(9,7,12,.52) 46%, rgba(9,7,12,.90) 100%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tile-color) 48%, transparent), transparent 60%),
    var(--art-img) center / cover no-repeat,
    var(--card) !important;
}

body.ls-page-home-v2 .home-tile-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}

body.ls-page-home-v2 .home-tile-name {
  font-size: 1rem !important;
}

body.ls-page-home-v2 .home-tile-desc {
  font-size: .76rem !important;
  line-height: 1.32 !important;
}

body.ls-page-home-v2 .home-tile-video {
  opacity: 0;
}

body.ls-page-home-v2 .home-tile-video.playing {
  opacity: .38 !important;
}

body.vr-mode.ls-page-home-v2 .home-tile,
body.vr-mode.ls-page-home-v2 .home-action-card {
  min-height: 148px !important;
}

body.vr-mode.ls-page-home-v2 .home-intro-btn,
body.vr-mode.ls-page-home-v2 .home-random-mini,
body.vr-mode.ls-page-home-v2 .ls-splash-choice {
  min-height: 64px !important;
}

@media (max-width: 820px) {
  body.ls-page-home-v2 {
    padding-top: 58px !important;
  }

  body.ls-page-home-v2 .ls-splash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(500px, 92vw) !important;
  }

  body.ls-page-home-v2 .ls-splash-choice,
  body.ls-page-home-v2 .ls-splash-queue {
    min-height: 92px !important;
  }

  body.ls-page-home-v2 .home-main {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }

  body.ls-page-home-v2 .home-strip {
    grid-template-columns: 1fr !important;
  }

  body.ls-page-home-v2 .home-intro-actions,
  body.ls-page-home-v2 .home-intro-status {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  body.ls-page-home-v2 .ls-splash {
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  body.ls-page-home-v2 .ls-splash-actions {
    gap: 8px !important;
  }

  body.ls-page-home-v2 .ls-splash-choice,
  body.ls-page-home-v2 .ls-splash-queue {
    min-height: 76px !important;
    padding: 10px !important;
  }

  body.ls-page-home-v2 .ls-splash-choice-kicker {
    font-size: .76rem !important;
  }

  body.ls-page-home-v2 .ls-splash-choice-sub {
    font-size: .62rem !important;
  }

  body.ls-page-home-v2 .home-action-cards,
  body.ls-page-home-v2 .home-intro-actions,
  body.ls-page-home-v2 .home-intro-status {
    grid-template-columns: 1fr !important;
  }

  body.ls-page-home-v2 .home-tile {
    min-height: 116px !important;
  }
}