/* ================================================================
   THE LOUNGE — live presence map + threaded feed
   Kept in its own file the way js/lounge.js is; inherits every token
   from css/style.css :root.
   ================================================================ */

/* ── HERO ───────────────────────────────────────────────────────── */
.lounge-view { max-width: 1180px; margin: 0 auto; padding: 48px 24px 120px; }

.lg-hero { text-align: center; margin-bottom: 40px; position: relative; }

.lg-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 12px;
}
.lg-hero h1 em { color: var(--gold); font-style: italic; }
.lg-hero > p {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 18px;
  margin-bottom: 26px;
}

.lg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-bottom: 18px;
  cursor: help;
}
.lg-hero-badge.live { color: #7fc99e; border-color: rgba(127,201,158,0.3); background: rgba(127,201,158,0.07); }
.lg-hero-badge.solo { color: var(--text-muted); background: rgba(201,168,76,0.04); }

.lg-dot-live, .lg-dot-solo {
  width: 7px; height: 7px; border-radius: 50%;
}
.lg-dot-live { background: #7fc99e; box-shadow: 0 0 8px #7fc99e; animation: lgBlink 2s ease-in-out infinite; }
.lg-dot-solo { background: var(--text-muted); }
@keyframes lgBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.lg-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── SPARK BUTTON ───────────────────────────────────────────────── */
.lg-spark-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 6px 26px rgba(201,168,76,0.28);
  transition: var(--transition);
}
.lg-spark-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(201,168,76,0.42); }
.lg-spark-btn.is-lit {
  background: linear-gradient(135deg, #e07b3a, #c04a20);
  color: #fff2e4;
  box-shadow: 0 6px 26px rgba(224,123,58,0.35);
}
.lg-spark-ember {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff2c0, #e07b3a 60%, #a03510);
  box-shadow: 0 0 10px rgba(224,123,58,0.9);
  animation: lgEmber 1.8s ease-in-out infinite;
}
@keyframes lgEmber {
  0%,100% { box-shadow: 0 0 6px rgba(224,123,58,0.7); transform: scale(1); }
  50%     { box-shadow: 0 0 16px rgba(255,190,90,1); transform: scale(1.18); }
}

.lg-ghost-btn {
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--border-h);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: var(--transition);
}
.lg-ghost-btn:hover { color: var(--gold-light); border-color: var(--gold); background: var(--gold-glow); }

/* ── MAP PANEL ──────────────────────────────────────────────────── */
.lg-map-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 52px;
}
.lg-map-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.lg-map-head h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400; color: var(--gold-light);
}
.lg-live-count {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}

.lg-map {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 134;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(201,168,76,0.05), transparent 70%),
    var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lg-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-map-grid line { stroke: rgba(201,168,76,0.06); stroke-width: 0.25; }
.lg-map-tropics line {
  stroke: rgba(201,168,76,0.16);
  stroke-width: 0.3;
  stroke-dasharray: 2 2.5;
}
.lg-map-land path {
  fill: rgba(201,168,76,0.11);
  stroke: rgba(201,168,76,0.26);
  stroke-width: 0.22;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lg-map-night path { pointer-events: none; }

/* ── Terroir markers ────────────────────────────────────────────── */
.lg-terroir { pointer-events: auto; cursor: help; }
.lg-terroir-mark {
  fill: var(--gold);
  opacity: 0.8;
  transition: var(--transition);
}
.lg-terroir-halo {
  fill: none;
  stroke: rgba(201,168,76,0.26);
  stroke-width: 0.18;
}
.lg-terroir:hover .lg-terroir-mark { fill: var(--gold-light); opacity: 1; }
.lg-terroir:hover .lg-terroir-halo { stroke: var(--gold-light); }

/* ── Leaf-journey arcs ──────────────────────────────────────────── */
.lg-arc {
  fill: none;
  stroke: #c9a84c;
  stroke-width: 1.1px;
  stroke-linecap: round;
  stroke-dasharray: 3 3.5;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
  animation: lgArcFlow 3.4s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(201,168,76,0.4));
}
@keyframes lgArcFlow { to { stroke-dashoffset: -13; } }
.lg-arc.lit {
  opacity: 1;
  stroke: var(--gold-light);
  stroke-width: 1.6px;
  filter: drop-shadow(0 0 4px rgba(224,192,112,0.8));
}
.lg-arc.dim { opacity: 0.1; }

.lg-map-dots { position: absolute; inset: 0; }

.lg-map-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(13,11,9,0.75), transparent 70%);
}
.lg-map-empty p { color: var(--text-muted); font-size: 13px; }
.lg-map-empty-ember {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-dark); opacity: 0.5;
}

.lg-map-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* ── MAP EMBERS ─────────────────────────────────────────────────── */
.lg-ember {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  z-index: 3;
}
.lg-ember-glow {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,123,58,0.5), transparent 70%);
  animation: lgPulse 2.4s ease-in-out infinite;
}
.lg-ember-core {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #fff3cc 0%, #ffb347 45%, #e07b3a 100%);
  box-shadow: 0 0 10px rgba(255,160,70,0.95);
}
.lg-ember.is-me .lg-ember-core {
  background: radial-gradient(circle, #ffffff 0%, var(--gold-light) 45%, var(--gold) 100%);
  box-shadow: 0 0 12px rgba(224,192,112,1);
}
.lg-ember.is-me::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.55;
}
@keyframes lgPulse {
  0%,100% { transform: scale(0.85); opacity: 0.55; }
  50%     { transform: scale(1.35); opacity: 0.95; }
}

.lg-ember-card {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 148px; max-width: 210px;
  padding: 9px 12px;
  background: var(--bg-modal);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: var(--transition);
  z-index: 5;
  text-align: left;
}
.lg-ember:hover .lg-ember-card,
.lg-ember:focus-visible .lg-ember-card { opacity: 1; transform: translateX(-50%) translateY(0); }
.lg-ec-row { display: flex; flex-direction: column; gap: 1px; }
.lg-ec-row + .lg-ec-row {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border);
}
.lg-ec-head { font-size: 12px; font-weight: 600; color: var(--gold-light); white-space: nowrap; }
.lg-ec-head em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.lg-ec-item { font-size: 12px; color: var(--text-primary); line-height: 1.3; }
.lg-ec-meta { font-size: 10.5px; color: var(--text-muted); }
.lg-ec-foot {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--gold); letter-spacing: 0.02em;
}

/* Count badge when several people share one map cell */
.lg-ember-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold); color: var(--bg-deep);
  font-size: 9px; font-weight: 800;
  border: 1px solid var(--bg-deep);
}
.lg-ember.is-cluster .lg-ember-core { width: 10px; height: 10px; }

/* A thread of smoke off each ember */
.lg-ember-smoke {
  position: absolute;
  bottom: 60%; left: 50%;
  width: 1px; height: 12px;
  background: linear-gradient(to top, rgba(224,180,120,0.45), transparent);
  transform-origin: bottom center;
  animation: lgSmoke 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lgSmoke {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(2px) scaleY(0.5) skewX(0deg); }
  35%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-9px) scaleY(1.25) skewX(12deg); }
}

/* ── Legend + live stats ────────────────────────────────────────── */
.lg-map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: center;
  margin-top: 14px;
}
.lg-lg-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.02em;
}
.lg-lg-ember, .lg-lg-terroir, .lg-lg-arc, .lg-lg-night {
  width: 10px; height: 10px; flex-shrink: 0;
}
.lg-lg-ember {
  border-radius: 50%;
  background: radial-gradient(circle, #fff3cc, #ffb347 45%, #e07b3a);
  box-shadow: 0 0 6px rgba(255,160,70,0.7);
}
.lg-lg-terroir {
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.lg-lg-arc {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 5px);
}
.lg-lg-night {
  border-radius: 2px;
  background: #04060d;
  border: 1px solid rgba(201,168,76,0.25);
}

.lg-map-stats {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: center;
  margin-top: 14px;
}
.lg-map-stats:empty { display: none; }
.lg-ms { display: inline-flex; align-items: baseline; gap: 6px; }
.lg-ms strong {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 400; color: var(--gold-light);
}
.lg-ms em {
  font-style: normal; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── SESSION STRIP ──────────────────────────────────────────────── */
.lg-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.lg-strip-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 26px 16px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.lg-inline-btn {
  color: var(--gold); text-decoration: underline;
  text-underline-offset: 3px; font-size: inherit; font-family: inherit;
}

.lg-sess-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: var(--transition);
}
.lg-sess-card[data-item] { cursor: pointer; }
.lg-sess-card[data-item]:hover { border-color: var(--border-h); background: var(--bg-card-h); transform: translateY(-2px); }
.lg-sess-card.is-me { border-color: rgba(201,168,76,0.35); box-shadow: inset 0 0 0 1px rgba(201,168,76,0.08); }

.lg-sess-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.lg-sess-avatar { font-size: 20px; line-height: 1; }
.lg-sess-who { flex: 1; min-width: 0; }
.lg-sess-handle {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-sess-handle em {
  font-style: normal; font-size: 9.5px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em; margin-left: 5px;
}
.lg-sess-place { font-size: 11px; color: var(--text-muted); }
.lg-sess-timer {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: #e07b3a; font-weight: 600;
}

.lg-sess-item { display: flex; align-items: center; gap: 10px; }
.lg-sess-item img {
  width: 38px; height: 38px; object-fit: contain;
  background: var(--bg-deep); border-radius: var(--radius-sm); padding: 3px; flex-shrink: 0;
}
.lg-sess-noimg {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--bg-deep); border-radius: var(--radius-sm); font-size: 17px; flex-shrink: 0;
}
.lg-sess-item-name {
  font-size: 12.5px; color: var(--text-primary); font-weight: 500; line-height: 1.3;
}
.lg-sess-item-brand { font-size: 11px; color: var(--text-muted); }
.lg-sess-drink, .lg-sess-note {
  margin-top: 9px; font-size: 12px; color: var(--text-secondary);
  font-family: var(--font-body); line-height: 1.45;
}
.lg-sess-note { font-style: italic; }

/* ── FLOATING SESSION BAR ───────────────────────────────────────── */
.lg-session-bar {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px 11px 18px;
  background: rgba(30,25,18,0.95);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(224,123,58,0.35);
  border-radius: 999px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.7), 0 0 26px rgba(224,123,58,0.12);
  max-width: calc(100vw - 32px);
}
.lg-sb-ember {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle, #fff3cc, #ffb347 45%, #e07b3a);
  box-shadow: 0 0 12px rgba(255,160,70,0.9);
  animation: lgEmber 1.8s ease-in-out infinite;
}
.lg-sb-text { display: flex; flex-direction: column; min-width: 0; }
.lg-sb-text strong {
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
.lg-sb-text span {
  font-size: 11.5px; color: #e07b3a;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.lg-sb-end {
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--border-h);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; transition: var(--transition);
}
.lg-sb-end:hover { color: var(--gold-light); border-color: var(--gold); background: var(--gold-glow); }

/* ── FEED ───────────────────────────────────────────────────────── */
.lg-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.lg-sorts { display: flex; gap: 4px; background: var(--bg-card); border-radius: 999px; padding: 4px; }
.lg-sort {
  padding: 7px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  transition: var(--transition);
}
.lg-sort:hover { color: var(--text-secondary); }
.lg-sort.active { background: var(--gold-glow); color: var(--gold-light); }

.lg-new-post-btn {
  padding: 10px 20px; border-radius: 999px;
  background: var(--gold-glow); border: 1px solid var(--border-h);
  color: var(--gold-light); font-size: 13px; font-weight: 600;
  transition: var(--transition);
}
.lg-new-post-btn:hover { background: rgba(201,168,76,0.2); border-color: var(--gold); }

.lg-flairs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.lg-flair-pill {
  --fl: var(--text-muted);
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-muted); transition: var(--transition);
}
.lg-flair-pill:hover { color: var(--fl); border-color: color-mix(in srgb, var(--fl) 40%, transparent); }
.lg-flair-pill.active {
  color: var(--fl);
  border-color: color-mix(in srgb, var(--fl) 55%, transparent);
  background: color-mix(in srgb, var(--fl) 12%, transparent);
}
.lg-flairs.compose { margin-bottom: 4px; }

.lg-feed { display: flex; flex-direction: column; gap: 12px; }

.lg-feed-empty {
  text-align: center; padding: 56px 24px;
  background: var(--bg-card); border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.lg-feed-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.6; }
.lg-feed-empty h3 {
  font-family: var(--font-serif); font-size: 21px;
  font-weight: 400; color: var(--gold-light); margin-bottom: 8px;
}
.lg-feed-empty p {
  color: var(--text-muted); font-size: 13.5px; max-width: 460px;
  margin: 0 auto 20px; line-height: 1.6;
}

/* ── POST ───────────────────────────────────────────────────────── */
.lg-post {
  display: flex; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: var(--transition);
}
.lg-post:hover { border-color: var(--border-h); }
.lg-post-main { flex: 1; min-width: 0; }

.lg-votes {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0; padding-top: 2px;
}
.lg-votes.small { padding-top: 0; }
.lg-vote {
  font-size: 12px; line-height: 1; padding: 3px 5px;
  color: var(--text-muted); border-radius: var(--radius-sm);
  transition: var(--transition);
}
.lg-vote:hover { color: var(--gold-light); background: var(--gold-glow); }
.lg-vote.up.on { color: #e07b3a; }
.lg-vote.down.on { color: #8fb8d8; }
.lg-score {
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.lg-score.up { color: #e07b3a; }
.lg-score.down { color: #8fb8d8; }

.lg-post-meta {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.lg-post-flair {
  --fl: var(--gold);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  color: var(--fl);
  background: color-mix(in srgb, var(--fl) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--fl) 30%, transparent);
}
.lg-post-by { font-size: 12px; color: var(--text-secondary); }
.lg-post-time { font-size: 11.5px; color: var(--text-muted); }

.lg-post-title {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 400; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 6px;
}
.lg-post-body {
  font-family: var(--font-body); font-size: 15px;
  color: var(--text-secondary); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.lg-post-item {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 9px 13px 9px 9px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left; transition: var(--transition); width: 100%;
}
.lg-post-item:hover { border-color: var(--border-h); background: var(--bg-card-h); }
.lg-post-item img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.lg-pi-noimg { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.lg-post-item strong { display: block; font-size: 13px; color: var(--text-primary); font-weight: 600; }
.lg-post-item em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }

.lg-post-actions { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.lg-post-act {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  padding: 5px 10px; border-radius: var(--radius-sm); transition: var(--transition);
}
.lg-post-act:hover { color: var(--gold-light); background: var(--gold-glow); }
.lg-post-act.danger:hover { color: #d04040; background: rgba(208,64,64,0.1); }

/* ── THREAD ─────────────────────────────────────────────────────── */
.lg-thread { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.lg-comment-form { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px; }
.lg-comment-form .lg-textarea { flex: 1; }

.lg-comment { display: flex; gap: 11px; padding: 10px 0; }
.lg-comment.is-reply {
  margin-left: 26px; padding-left: 13px;
  border-left: 1px solid var(--border);
}
.lg-comment-main { flex: 1; min-width: 0; }
.lg-comment-meta {
  display: flex; gap: 9px; align-items: center;
  font-size: 11.5px; color: var(--text-secondary); margin-bottom: 4px;
}
.lg-comment-main p {
  font-family: var(--font-body); font-size: 14.5px;
  color: var(--text-secondary); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.lg-comment-acts { display: flex; gap: 4px; margin-top: 5px; }
.lg-reply-box { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; }
.lg-reply-box .lg-textarea { flex: 1; }
.lg-no-comments { font-size: 13px; color: var(--text-muted); padding: 4px 0 8px; }

/* Its own class rather than reusing .modal-title — a second element with
   that class sitting in the DOM shadows the cigar modal's real title for
   anything doing a document-wide querySelector. */
.lg-modal-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-right: 40px;
}

/* ── MODAL FORM ELEMENTS ────────────────────────────────────────── */
.lg-form { display: flex; flex-direction: column; }
.lg-form-intro {
  font-size: 13.5px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 20px;
}
.lg-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 16px 0 8px;
}
.lg-label:first-child { margin-top: 0; }
.lg-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }

.lg-input, .lg-textarea {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition);
}
.lg-textarea { resize: vertical; line-height: 1.55; font-family: var(--font-body); font-size: 15px; }
.lg-input:focus, .lg-textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
}
.lg-input::placeholder, .lg-textarea::placeholder { color: var(--text-muted); }

.lg-avatars { display: flex; flex-wrap: wrap; gap: 7px; }
.lg-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-deep);
  font-size: 19px; display: grid; place-items: center;
  transition: var(--transition);
}
.lg-avatar:hover { border-color: var(--border-h); transform: translateY(-1px); }
.lg-avatar.active { border-color: var(--gold); background: var(--gold-glow); box-shadow: 0 0 0 2px var(--gold-glow); }

.lg-form-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.lg-primary-btn {
  padding: 12px 26px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--bg-deep); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.03em; transition: var(--transition);
}
.lg-primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(201,168,76,0.35); }
.lg-primary-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lg-primary-btn.slim { padding: 9px 18px; font-size: 12.5px; flex-shrink: 0; }

.lg-form-err {
  margin-top: 12px; font-size: 12.5px; color: #d04040;
  background: rgba(208,64,64,0.08);
  border: 1px solid rgba(208,64,64,0.25);
  border-radius: var(--radius-sm); padding: 9px 12px;
}

.lg-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; cursor: pointer; }
.lg-check input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.lg-check span { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.lg-check strong { color: var(--gold-light); }
.lg-check em { color: var(--text-muted); font-style: normal; }
.lg-check input:disabled ~ span { opacity: 0.55; }

/* ── REDDIT ─────────────────────────────────────────────────────── */
.lg-reddit-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 2px 7px; border-radius: 999px;
  color: var(--text-muted);
  background: rgba(168,155,122,0.08);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: var(--transition);
  vertical-align: middle;
  white-space: nowrap;
}
.lg-reddit-chip:hover { color: #ff7a45; border-color: rgba(255,122,69,0.45); background: rgba(255,122,69,0.1); }
.lg-reddit-chip.verified {
  color: #ff7a45;
  background: rgba(255,122,69,0.1);
  border-color: rgba(255,122,69,0.32);
}
.lg-rc-tick { font-size: 9px; opacity: 0.9; }

.lg-reddit-block {
  margin-top: 22px; padding: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lg-reddit-block .lg-label { margin-top: 0; }
.lg-reddit-help {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 12px;
}
.lg-reddit-help strong { color: var(--text-secondary); }

.lg-reddit-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(255,122,69,0.12);
  border: 1px solid rgba(255,122,69,0.35);
  color: #ff7a45; font-size: 13px; font-weight: 600;
  transition: var(--transition);
}
.lg-reddit-btn:hover:not(:disabled) { background: rgba(255,122,69,0.2); border-color: #ff7a45; }
.lg-reddit-btn:disabled { opacity: 0.55; cursor: wait; }

.lg-reddit-linked {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lg-reddit-linked.verified {
  background: rgba(255,122,69,0.08);
  border-color: rgba(255,122,69,0.3);
}
.lg-reddit-mark {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; font-weight: 800;
  background: var(--bg-deep); color: var(--text-muted);
  border: 1px solid var(--border);
}
.lg-reddit-linked.verified .lg-reddit-mark {
  background: #ff7a45; color: #1a0f06; border-color: #ff7a45;
}
.lg-reddit-linked div { flex: 1; min-width: 0; }
.lg-reddit-linked strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.lg-reddit-linked span { font-size: 11px; color: var(--text-muted); }
.lg-reddit-linked.verified strong { color: #ff7a45; }

.lg-reddit-manual { margin-top: 14px; }
.lg-reddit-manual summary {
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; padding: 4px 0;
  transition: var(--transition);
}
.lg-reddit-manual summary:hover { color: var(--gold-light); }
.lg-reddit-manual-row { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0; }
.lg-reddit-manual-row .lg-input { flex: 1; }

/* ── LOCATION BLOCK ─────────────────────────────────────────────── */
.lg-loc-block {
  margin-top: 22px; padding: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lg-loc-block .lg-label { margin-top: 0; }
.lg-loc-help {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 14px;
}
.lg-loc-modes { display: grid; gap: 8px; }
.lg-loc-mode {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 11px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.lg-loc-mode:hover { border-color: var(--border-h); }
.lg-loc-mode.active { border-color: var(--gold); background: var(--gold-glow); }
.lg-loc-mode strong { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.lg-loc-mode span { font-size: 11.5px; color: var(--text-muted); }

.lg-city-pick { margin-top: 12px; }
.lg-city-list, .lg-pick-list {
  list-style: none; margin-top: 6px;
  max-height: 210px; overflow-y: auto;
  border-radius: var(--radius-sm);
}
.lg-city-list:not(:empty), .lg-pick-list:not(:empty) {
  border: 1px solid var(--border); background: var(--bg-card);
}
.lg-city-list button, .lg-pick-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 13px; font-size: 13px;
  color: var(--text-secondary); transition: var(--transition);
}
.lg-city-list button:hover, .lg-pick-list button:hover { background: var(--bg-card-h); color: var(--text-primary); }
.lg-city-list strong { color: var(--text-primary); font-weight: 600; }
.lg-city-list span { color: var(--text-muted); font-size: 11.5px; margin-left: auto; }
.lg-city-none { padding: 10px 13px; font-size: 12.5px; color: var(--text-muted); }

.lg-loc-preview {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding: 11px 13px;
  background: var(--gold-glow);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-sm);
}
.lg-loc-preview-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle, #fff3cc, #e07b3a);
  box-shadow: 0 0 10px rgba(224,123,58,0.8);
}
.lg-loc-preview div { flex: 1; min-width: 0; }
.lg-loc-preview strong { display: block; font-size: 13px; color: var(--gold-light); }
.lg-loc-preview span { font-size: 11px; color: var(--text-muted); }
.lg-loc-clear {
  font-size: 11.5px; color: var(--text-muted);
  padding: 5px 10px; border-radius: var(--radius-sm); transition: var(--transition);
}
.lg-loc-clear:hover { color: #d04040; background: rgba(208,64,64,0.1); }

/* ── ITEM PICKER ────────────────────────────────────────────────── */
.lg-picker { position: relative; }
.lg-pick-kind { font-size: 15px; flex-shrink: 0; }
.lg-pick-list button span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lg-pick-list strong { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.lg-pick-list em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }

.lg-picked {
  display: flex; align-items: center; gap: 11px;
  margin-top: 10px; padding: 11px 13px;
  background: var(--gold-glow);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-sm);
}
.lg-picked-kind { font-size: 18px; flex-shrink: 0; }
.lg-picked div { flex: 1; min-width: 0; }
.lg-picked strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.lg-picked span { font-size: 11.5px; color: var(--text-muted); }
.lg-picked-clear {
  font-size: 13px; color: var(--text-muted);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; transition: var(--transition);
}
.lg-picked-clear:hover { color: #d04040; background: rgba(208,64,64,0.12); }

/* ── NUB CARD ───────────────────────────────────────────────────── */
.lg-nub { text-align: center; align-items: center; }
.lg-nub-icon { font-size: 40px; margin-bottom: 10px; }
.lg-nub h3 {
  font-family: var(--font-serif); font-size: 23px;
  font-weight: 400; color: var(--gold-light); margin-bottom: 4px;
}
.lg-nub-time {
  font-size: 12px; color: #e07b3a; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px;
}
.lg-nub .lg-form-actions { justify-content: center; }

/* ── NAV BADGE ──────────────────────────────────────────────────── */
.lounge-nav-badge {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px;
  background: #e07b3a; color: #1a0f06;
  font-size: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 10px rgba(224,123,58,0.55);
  vertical-align: middle;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lounge-view { padding: 32px 16px 120px; }
  .lg-map-panel { padding: 16px; }
  .lg-map { aspect-ratio: 3 / 2; }
  .lg-strip { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lg-post { padding: 13px; gap: 10px; }
  .lg-post-title { font-size: 17px; }
  .lg-feed-head { flex-direction: column; align-items: stretch; }
  .lg-sorts { justify-content: center; }
  .lg-comment.is-reply { margin-left: 12px; }
  .lg-session-bar { left: 16px; right: 16px; transform: none; max-width: none; }
  .lg-sb-text strong { max-width: 140px; }
  .lg-ember-card { min-width: 130px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-ember-glow, .lg-spark-ember, .lg-sb-ember, .lg-dot-live,
  .lg-arc, .lg-ember-smoke { animation: none; }
  .lg-ember-smoke { opacity: 0.4; }
}

.lg-nub-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 14px;
  max-width: 380px;
}

/* ═════════════════════════════════════════════════════════════════
   LOUNGE PREMIUM ENHANCEMENTS (appended)
   • Smokers-online header chip with live flame
   • Live ember dot + smoke wisp on lit members in the strip
   • Web-Audio join chime (opt-in toggle)
   • Smooth slide-in entry animation for new chat messages & posts
   ═════════════════════════════════════════════════════════════════ */

/* ── Smokers-online header chip ──────────────────────────────────── */
.lg-smokers-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(224,123,58,0.08);
  border: 1px solid rgba(224,123,58,0.25);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--transition);
}
.lg-smokers-online.is-active {
  background: rgba(224,123,58,0.14);
  border-color: rgba(224,123,58,0.45);
  color: #e0986a;
}
.lg-smokers-online .lg-so-flame {
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(224,123,58,0.7));
  animation: lgFlameFlicker 2.2s ease-in-out infinite;
}
.lg-smokers-online .lg-so-count {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.lg-smokers-online .lg-so-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
@keyframes lgFlameFlicker {
  0%,100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50%     { transform: scale(1.12) rotate(2deg); opacity: 0.82; }
}

/* ── Live ember dot + smoke wisp on lit members ──────────────────── */
.lg-sess-avatar { position: relative; }
.lg-lit-ember {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  background: radial-gradient(circle, #fff3cc 0%, #ffb347 45%, #e07b3a 100%);
  box-shadow: 0 0 8px rgba(255,160,70,0.95);
  animation: lgEmberPulse 1.6s ease-in-out infinite;
}
@keyframes lgEmberPulse {
  0%,100% { box-shadow: 0 0 5px rgba(224,123,58,0.7); transform: scale(0.9); }
  50%     { box-shadow: 0 0 14px rgba(255,190,90,1); transform: scale(1.2); }
}
.lg-lit-smoke {
  position: absolute;
  bottom: 70%;
  left: 50%;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(224,180,120,0.5), transparent);
  transform-origin: bottom center;
  animation: lgSmokeWisp 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes lgSmokeWisp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(2px) scaleY(0.4) skewX(0); }
  35%  { opacity: 0.75; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scaleY(1.3) skewX(14deg); }
}

/* ── Smooth slide-in entry animation ────────────────────────────── */
@keyframes lgEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lg-enter { animation: lgEnter 300ms ease-out both; }

/* ── Join-sound toggle button ───────────────────────────────────── */
.lg-join-sound-btn { font-size: 12.5px; padding: 11px 20px; }
.lg-join-sound-btn[aria-pressed="true"] {
  color: var(--gold-light);
  border-color: var(--gold);
  background: var(--gold-glow);
}

@media (prefers-reduced-motion: reduce) {
  .lg-smokers-online .lg-so-flame,
  .lg-lit-ember, .lg-lit-smoke, .lg-enter { animation: none; }
  .lg-enter { opacity: 1; transform: none; }
  .lg-lit-smoke { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   BURN PROGRESS — elapsed against the cigar's own smoking time
═══════════════════════════════════════════════════════════════════ */
.lg-burn { margin-top: 11px; }
.lg-burn-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(201,168,76,0.1);
}
.lg-burn-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b4525, #b5713a 60%, #e07b3a);
  transition: width 1s linear;
}
.lg-burn-fill.done { background: linear-gradient(90deg, #6b4525, #8a8a8a); }
.lg-burn-ember {
  position: absolute; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff3cc, #ffb347 45%, #e07b3a);
  box-shadow: 0 0 8px rgba(255,160,70,0.9);
  transition: left 1s linear;
}
.lg-burn-label {
  display: block; margin-top: 5px;
  font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   THE RAIL — live chat
═══════════════════════════════════════════════════════════════════ */
.lg-chat-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 52px;
}
.lg-chat-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.lg-chat-head h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400; color: var(--gold-light);
}
.lg-chat-note { font-size: 11px; color: var(--text-muted); }
.lg-unread-pill {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a0f06; background: #e07b3a;
  padding: 3px 9px; border-radius: 999px;
}

.lg-chat-log {
  height: 300px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.lg-chat-empty {
  margin: auto; text-align: center; max-width: 380px;
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
}

.lg-msg { display: flex; gap: 10px; padding: 3px 0; }
.lg-msg.grouped { padding-top: 0; }
.lg-msg-gutter { width: 30px; flex-shrink: 0; }
.lg-msg-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 15px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.lg-msg-avatar:hover { border-color: var(--gold); }
.lg-msg-body { min-width: 0; flex: 1; }
.lg-msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lg-msg-who {
  font-size: 12.5px; font-weight: 600;
  color: var(--gold-light); padding: 0;
  transition: var(--transition);
}
.lg-msg-who:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-msg-time { font-size: 10.5px; color: var(--text-muted); }
.lg-msg-text {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.5;
  color: var(--text-secondary);
  word-break: break-word; white-space: pre-wrap;
}
.lg-msg.is-me .lg-msg-who { color: var(--gold); }

.lg-chat-form {
  display: flex; gap: 9px; align-items: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.lg-chat-input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 18px;
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition);
}
.lg-chat-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.lg-chat-input::placeholder { color: var(--text-muted); }
.lg-chat-send {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--bg-deep);
  transition: var(--transition);
}
.lg-chat-send:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,0.35); }

/* ══════════════════════════════════════════════════════════════════
   CLICKABLE IDENTITIES + PROFILE
═══════════════════════════════════════════════════════════════════ */
.lg-who { text-align: left; padding: 0; font: inherit; color: inherit; transition: var(--transition); }
.lg-who:hover { color: var(--gold-light); }
.lg-comment-by { font-size: 11.5px; }

.lg-reply-dot {
  display: inline-block;
  width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: #e07b3a;
  box-shadow: 0 0 6px rgba(224,123,58,0.8);
  vertical-align: middle;
}
.lounge-reply-badge {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  margin-left: 4px; border-radius: 999px;
  background: #7fc99e; color: #08140d;
  font-size: 10px; font-weight: 800;
  vertical-align: middle;
}
.lg-post-flash { animation: lgFlash 1.6s ease-out; }
@keyframes lgFlash {
  0%, 40% { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
  100%    { border-color: var(--border); box-shadow: none; }
}

.lg-prof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.lg-prof-avatar {
  width: 54px; height: 54px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 26px;
  background: var(--bg-deep);
  border: 1px solid var(--border-h);
}
.lg-prof-head h3 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 400; color: var(--text-primary);
}
.lg-prof-head h3 em {
  font-style: normal; font-size: 11px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.12em; margin-left: 8px;
}
.lg-prof-sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.lg-prof-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #e07b3a;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.lg-prof-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e07b3a; box-shadow: 0 0 8px #e07b3a;
  animation: lgEmber 1.8s ease-in-out infinite;
}

.lg-prof-label {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 9px;
}
.lg-prof-now {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px; margin-bottom: 18px;
}
.lg-prof-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 0;
}
.lg-prof-item img, .lg-prof-noimg {
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: contain; border-radius: var(--radius-sm);
}
.lg-prof-noimg { display: grid; place-items: center; font-size: 20px; background: var(--bg-card); }
.lg-prof-item strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.lg-prof-item em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.lg-prof-loc { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

.lg-prof-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 9px; margin-bottom: 14px;
}
.lg-pm {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px; text-align: center;
}
.lg-pm span {
  display: block; font-family: var(--font-serif);
  font-size: 20px; color: var(--gold-light); line-height: 1.15;
}
.lg-pm em {
  font-style: normal; font-size: 9.5px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
}

.lg-prof-origins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.lg-prof-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--gold-light);
  padding: 4px 11px; border-radius: 999px;
  background: var(--gold-glow); border: 1px solid var(--border-h);
}
.lg-prof-stamp em {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  color: var(--text-muted); background: var(--bg-deep);
  padding: 1px 5px; border-radius: 999px;
}

.lg-prof-since {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 20px;
}
.lg-prof-since strong { color: var(--text-secondary); }

.lg-prof-flairs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.lg-prof-flair {
  --fl: var(--gold);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: var(--fl);
  background: color-mix(in srgb, var(--fl) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fl) 30%, transparent);
}
.lg-prof-flair em {
  font-style: normal; font-size: 10px;
  color: var(--text-primary);
  background: rgba(0,0,0,0.35);
  padding: 1px 6px; border-radius: 999px;
}

.lg-prof-tops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.lg-prof-top {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 9px 11px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.lg-prof-top:hover { border-color: var(--border-h); background: var(--bg-card-h); }
.lg-prof-top img, .lg-prof-top .lg-prof-noimg {
  width: 38px; height: 38px; flex-shrink: 0;
  object-fit: contain; border-radius: var(--radius-sm);
}
.lg-prof-top strong { display: block; font-size: 12.5px; color: var(--text-primary); }
.lg-prof-top em { font-style: normal; font-size: 11px; color: var(--text-muted); }

.lg-prof-private {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.lg-prof-only-you {
  text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--gold);
  margin-left: 8px; font-size: 9.5px;
}
.lg-prof-journal-btn {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border-h);
  color: var(--gold-light); font-size: 12.5px; font-weight: 600;
  background: var(--gold-glow);
  transition: var(--transition);
}
.lg-prof-journal-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.2); }

.lg-prof-posts { display: flex; flex-direction: column; gap: 8px; }
.lg-prof-post {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left; padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.lg-prof-post:hover { border-color: var(--border-h); background: var(--bg-card-h); }
.lg-prof-post-title { font-size: 13.5px; color: var(--text-primary); line-height: 1.35; }
.lg-prof-post-meta { font-size: 11px; color: var(--text-muted); }
.lg-prof-none { font-size: 13px; color: var(--text-muted); }

@media (max-width: 600px) {
  .lg-chat-log { height: 240px; }
  .lg-prof-metrics { grid-template-columns: repeat(2, 1fr); }
  .lg-prof-tops .lg-prof-top { padding: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   WHAT THE ROOM SMOKES
═══════════════════════════════════════════════════════════════════ */
.lg-popular:empty { display: none; }
.lg-popular { margin-bottom: 52px; }
.lg-pop-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lg-pop-head h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400; color: var(--gold-light);
}
.lg-pop-note { font-size: 11.5px; color: var(--text-muted); }

.lg-pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}
.lg-pop-card {
  display: flex; align-items: center; gap: 12px;
  text-align: left; padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
}
.lg-pop-card:hover { border-color: var(--border-h); background: var(--bg-card-h); transform: translateY(-2px); }
.lg-pop-rank {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-serif);
  font-size: 15px; color: var(--text-muted); opacity: 0.5;
}
.lg-pop-card img, .lg-pop-noimg {
  width: 46px; height: 46px; flex-shrink: 0;
  object-fit: contain; border-radius: var(--radius-sm);
  background: var(--bg-deep);
}
.lg-pop-noimg { display: grid; place-items: center; font-size: 20px; }
.lg-pop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lg-pop-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; padding-right: 16px; }
.lg-pop-meta { font-size: 11px; color: var(--text-muted); }
.lg-pop-count { font-size: 10.5px; color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════
   AVATARS — drawn marks, emoji, or an uploaded picture
═══════════════════════════════════════════════════════════════════ */
.av-mark { width: 100%; height: 100%; color: var(--gold); display: block; }
.av-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.av-emoji { font-size: 0.95em; line-height: 1; }

/* Containers that used to hold a bare emoji now hold arbitrary content. */
.lg-sess-avatar, .lg-msg-avatar, .lg-prof-avatar, .lg-av-preview {
  display: grid; place-items: center; overflow: hidden;
}
.lg-sess-avatar { width: 26px; height: 26px; border-radius: 50%; }
.lg-sess-avatar .av-mark { width: 22px; height: 22px; }
.lg-prof-avatar .av-mark { width: 32px; height: 32px; }
.lg-msg-avatar .av-mark { width: 19px; height: 19px; }

.lg-inline-av, .lg-ec-av {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  vertical-align: -3px; margin-right: 5px;
  border-radius: 50%; overflow: hidden;
}
.lg-inline-av .av-mark, .lg-ec-av .av-mark { width: 15px; height: 15px; }
.lg-inline-av .av-emoji, .lg-ec-av .av-emoji { font-size: 13px; }

/* ── PICKER ─────────────────────────────────────────────────────── */
.lg-av-current {
  display: flex; align-items: center; gap: 14px;
  padding: 13px; margin-bottom: 12px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lg-av-preview {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-h);
  font-size: 25px;
}
.lg-av-preview .av-mark { width: 32px; height: 32px; }
.lg-av-caption { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.lg-av-tabs {
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg-deep);
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 12px;
}
.lg-av-tab {
  padding: 7px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  transition: var(--transition);
}
.lg-av-tab:hover { color: var(--text-secondary); }
.lg-av-tab.active { background: var(--gold-glow); color: var(--gold-light); }

.lg-av-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.lg-av-opt {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  font-size: 20px;
  transition: var(--transition);
}
.lg-av-opt:hover { border-color: var(--border-h); transform: translateY(-1px); }
.lg-av-opt.active {
  border-color: var(--gold);
  background: var(--gold-glow);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.lg-av-opt .av-mark { width: 26px; height: 26px; opacity: 0.8; }
.lg-av-opt.active .av-mark { opacity: 1; color: var(--gold-light); }

.lg-av-drop {
  display: flex; flex-direction: column; gap: 5px;
  padding: 22px 18px; text-align: center;
  border: 1px dashed var(--border-h);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
  cursor: pointer;
  transition: var(--transition);
}
.lg-av-drop:hover { border-color: var(--gold); background: var(--gold-glow); }
.lg-av-drop strong { font-size: 13.5px; color: var(--gold-light); font-weight: 600; }
.lg-av-drop span { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; }
.lg-av-remove {
  margin-top: 10px; font-size: 11.5px; color: var(--text-muted);
  padding: 6px 12px; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.lg-av-remove:hover { color: #d04040; background: rgba(208,64,64,0.1); }

/* Turnstile only becomes visible if Cloudflare decides a challenge is
   needed; in the common case it resolves invisibly and this is never seen. */
.vp-turnstile {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
}
.vp-turnstile:not(:empty) {
  padding: 18px;
  background: var(--bg-modal);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}

/* ── ROOM COUNT ─────────────────────────────────────────────────── */
.lg-room-count {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary);
  padding: 7px 16px; margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(127,201,158,0.07);
  border: 1px solid rgba(127,201,158,0.22);
}
.lg-room-count:empty { display: none; }
.lg-room-count strong { color: #7fc99e; font-weight: 700; }
.lg-rc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7fc99e; box-shadow: 0 0 8px #7fc99e;
  animation: lgBlink 2s ease-in-out infinite;
}
.lg-rc-dot.off { background: var(--text-muted); box-shadow: none; animation: none; }
.lg-live-count strong { color: var(--gold-light); }

/* Present but not smoking — a quieter mark than a lit ember. */
.lg-ember.is-idle .lg-ember-core {
  background: radial-gradient(circle, #d8d0bb 0%, #8a8371 100%);
  box-shadow: 0 0 7px rgba(200,190,165,0.55);
}
.lg-ember.is-idle .lg-ember-glow { background: radial-gradient(circle, rgba(200,190,165,0.28), transparent 70%); }
.lg-ember.is-idle .lg-ember-smoke { display: none; }
.lg-ec-item em { font-style: normal; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   NOTIFY ME WHEN SOMEONE LIGHTS UP
   ══════════════════════════════════════════════════════════════════ */

/* Toggle button — sits in the lounge hero actions row, styled to match
   the ghost button but with a bell/ember accent. */
.lg-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-h);
  color: var(--text-secondary);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.lg-notify-btn:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  background: var(--gold-glow);
  transform: translateY(-1px);
}
.lg-notify-btn.is-on {
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(201,168,76,0.32);
}
.lg-notify-btn.is-on:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.lg-notify-btn.is-denied {
  color: var(--text-muted);
  border-color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.lg-notify-btn.is-denied:hover {
  color: var(--text-muted);
  border-color: var(--text-muted);
  background: transparent;
  transform: none;
}
@media (max-width: 640px) {
  .lg-notify-btn { font-size: 12px; padding: 10px 16px; }
}

/* ── In-page toast (shown when the tab is focused) ────────────────── */
.lg-notify-toast {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 320;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 340px;
  padding: 14px 18px;
  background: rgba(30,25,18,0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(224,123,58,0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 44px rgba(0,0,0,0.7), 0 0 24px rgba(224,123,58,0.14);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  opacity: 0;
  transform: translateX(16px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.lg-notify-toast.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.lg-notify-toast-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(224,123,58,0.6));
}
.lg-notify-toast-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lg-notify-toast-line {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-notify-toast-line strong {
  color: var(--gold-light);
  font-weight: 600;
}
.lg-notify-toast-line span {
  color: var(--text-muted);
}
.lg-notify-toast:hover {
  border-color: rgba(224,123,58,0.6);
  box-shadow: 0 14px 44px rgba(0,0,0,0.7), 0 0 28px rgba(224,123,58,0.22);
}
@media (max-width: 640px) {
  .lg-notify-toast {
    top: 12px; right: 12px; left: 12px;
    max-width: none;
  }
}

/* ═════════════════════════════════════════════════════════════════
   MODERATION UI STYLES
   Report buttons (🚩), hide buttons (⊘), ban buttons (⛔),
   report modal, and admin dashboard.
   ═════════════════════════════════════════════════════════════════ */

/* ── Moderation buttons on posts and comments ─────────────────── */
.lg-mod-btn {
  opacity: 0.55;
  font-size: 0.82rem;
  padding: 2px 7px;
  border-radius: 5px;
  transition: opacity 0.15s, background 0.15s;
  background: transparent;
  border: 1px solid rgba(201,152,58,0.2);
  color: var(--text-muted, #a89b7a);
  cursor: pointer;
  vertical-align: middle;
}
.lg-mod-btn:hover {
  opacity: 1;
  background: rgba(201,152,58,0.08);
  border-color: rgba(201,152,58,0.4);
}
.lg-mod-btn.danger {
  border-color: rgba(224,80,80,0.2);
  color: rgba(224,100,100,0.8);
}
.lg-mod-btn.danger:hover {
  background: rgba(224,80,80,0.1);
  border-color: rgba(224,80,80,0.5);
  color: rgba(224,100,100,1);
}
.lg-mod-btn.sm {
  font-size: 0.72rem;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Chat message moderation buttons ─────────────────────────── */
.lg-msg-mod {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
}
.lg-msg:hover .lg-msg-mod {
  opacity: 0.7;
}
.lg-msg-mod .lg-mod-btn {
  border: none;
  background: transparent;
  padding: 1px 4px;
  font-size: 0.7rem;
}

/* ── Admin dashboard button in hero ─────────────────────────── */
.lg-admin-dash-btn {
  background: linear-gradient(135deg, rgba(201,152,58,0.15), rgba(201,152,58,0.05));
  border: 1px solid rgba(201,152,58,0.3);
  color: var(--gold-light, #e8b86d);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.lg-admin-dash-btn:hover {
  background: linear-gradient(135deg, rgba(201,152,58,0.25), rgba(201,152,58,0.1));
  border-color: rgba(201,152,58,0.5);
  box-shadow: 0 2px 12px rgba(201,152,58,0.15);
}
.lg-admin-dash-btn.hidden {
  display: none;
}

/* ── Report modal ────────────────────────────────────────────── */
.lg-mod-divider {
  border: none;
  border-top: 1px solid rgba(201,152,58,0.15);
  margin: 20px 0 16px;
}

/* ── Admin dashboard ─────────────────────────────────────────── */
.lg-admin-dash {
  max-height: 60vh;
  overflow-y: auto;
}
.lg-admin-section {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-light, #e8b86d);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,152,58,0.15);
}
.lg-admin-section:first-child {
  margin-top: 0;
}
.lg-admin-report {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(201,152,58,0.1);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.lg-admin-report-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.lg-admin-badge {
  background: rgba(224,80,80,0.15);
  color: rgba(224,120,120,0.9);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}
.lg-admin-time {
  font-size: 0.78rem;
  color: var(--text-muted, #a89b7a);
}
.lg-admin-reason {
  font-size: 0.88rem;
  color: var(--text-primary, #d4c5a9);
  margin: 4px 0 8px;
  line-height: 1.4;
}
.lg-admin-actions {
  display: flex;
  gap: 8px;
}
.lg-admin-ban {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(224,80,80,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.lg-admin-ban-id {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-muted, #a89b7a);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Removed content placeholder ──────────────────────────────── */
.lg-msg-text,
.lg-post-title,
.lg-post-body {
  transition: opacity 0.2s;
}
.lg-msg-text:empty::before,
.lg-post-title:empty::before {
  content: '';
}