/* ROOFTOP QUEST — the waiting room.
 *
 * A centred overlay shown only between joining a realm room and the tape
 * dropping. It sits ABOVE the racing HUD (there is nothing to race yet) and
 * BELOW the results card and the rotate gate, both of which must win if they
 * are up at the same time.
 *
 * It is not a [data-panel]. Those are the racing HUD and src/selftest.js
 * asserts none of them overlap; this thing deliberately covers the middle.
 *
 * Everything is one flat class layer at 0,1,0 or 0,2,0, same discipline as
 * assets/hud.css — no #id selectors, so a later modifier class can still win.
 */

.lb {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 5);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* The card takes clicks; the rest of the screen does not, so the course keeps
   * turning behind it and a drag still spins the camera. */
  pointer-events: none;
}

.lb[hidden] { display: none; }

.lb__card {
  pointer-events: auto;
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
  width: min(420px, 100%);
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-radius: var(--r-xl);
  background: var(--c-surface-solid);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-3), var(--sh-lip);
  animation: ps-pop-in var(--dur-3) var(--ease-pop);
}

/* ------------------------------------------------------------- eyebrow */

.lb__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.lb__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 4px rgba(92, 192, 106, 0.16);
}

/* ---------------------------------------------------------------- code */

.lb__code {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  /* A code exists to be read out loud and typed in. Wide tracking and a
   * tabular face are what stop 8 and B arguing with each other. */
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1;
  color: var(--c-cream);
  text-shadow: var(--sh-text);
}

.lb__wait {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-green);
}

/* --------------------------------------------------------------- share */

.lb__share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  width: 100%;
}

.lb__link {
  min-width: 0;               /* or the input refuses to shrink inside the grid */
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text-dim);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  /* The whole point of this field is to be selected, so give the text back what
   * the body-wide user-select:none took away. */
  user-select: text;
  -webkit-user-select: text;
}

.lb__link:focus-visible { box-shadow: var(--ring); }

.lb__copy {
  white-space: nowrap;
  --icon-size: 16px;
}

/* The tick is only there once the copy actually landed. */
.lb__copy .lb__copied { display: none; }
.lb__copy.is-done .lb__copied { display: block; }

.lb__hint,
.lb__fill {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--c-text-mute);
}

/* ------------------------------------------------------------ who is in */

.lb__who {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  width: 100%;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

.lb__who-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  --icon-size: 15px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.lb__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb__p {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  max-width: 100%;
}

.lb__p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The swatch is the racer: body colour inside, roof colour as the ring. Both
 * are written inline from RACER_COLORS / ROOF_COLORS, because the server sends
 * an index and the palette lives in shared/course.js. */
.lb__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-green);
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 460px) {
  .lb__card { padding: var(--s-5) var(--s-4) var(--s-4); gap: var(--s-3); }
  .lb__code { font-size: var(--fs-2xl); }
  .lb__share { grid-template-columns: minmax(0, 1fr); }
}

/* A phone in landscape has almost no vertical room. Drop the parts that are
 * explanation rather than action. */
@media (max-height: 460px) {
  .lb__card { padding: var(--s-4); gap: var(--s-2); }
  .lb__code { font-size: var(--fs-xl); }
  .lb__hint,
  .lb__fill { display: none; }
  .lb__who { padding-top: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .lb__card { animation: none; }
}