/* ============================================================
   Lobby — faint how-to hints, below the TV row (page 1).
   Picture-first illustrations: right-click → emote wheel, tap E →
   random emote. They sit low and semi-transparent as a background
   layer, and use the --ink token so they flip with the lights.
   ============================================================ */

.lobby-tips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(70px, 10vh, 150px);   /* below the TV, above the controls */
  z-index: 1;                          /* behind the screens; it's background */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(var(--space-6), 9vw, var(--space-9));
  opacity: 0.3;                        /* faint — a hint, not the focus */
  pointer-events: none;
}

.lobby-tip {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.lobby-tip:nth-child(odd)  { transform: rotate(-1.5deg); }
.lobby-tip:nth-child(even) { transform: rotate(1.5deg); }

.lobby-tip__art {
  width: clamp(150px, 16vw, 220px);
  color: var(--ink);                   /* SVG currentColor follows the lights */
  transition: color var(--duration-base) var(--ease-out-expo);
}
.lobby-tip__art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Reuse the doodle--tag pill, tuned for the ink token. */
.lobby-tip__tag {
  font-size: 16px;
  color: var(--ink);
  border-color: var(--ink-muted);
  transition: color var(--duration-base) var(--ease-out-expo),
              border-color var(--duration-base) var(--ease-out-expo);
}