/* augh yahh! -- the lobby side of round two. Loaded after style.css on the
   lobby pages. Same house style: dark ground, neon glow, lime for anything
   open to strangers, pink for a report, amber for a warning. */

/* ====================== the list of five lobbies ====================== */

.rooms {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-align: left;
}
.rm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgba(198,255,61,.35);
  border-radius: 7px;
  background: rgba(198,255,61,.03);
  padding: .65rem .75rem;
  text-decoration: none;
  color: inherit;
}
.rm:hover { background: rgba(198,255,61,.07); }
.rm:active { transform: translateY(1px); }
.rm .n {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 0 10px rgba(198,255,61,.5);
}
.rm .d { font-size: .8rem; color: var(--text-3); }
.rm .c {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-2);
  white-space: nowrap;
  flex: 0 0 auto;
}
.rm.hot .c { color: var(--green); text-shadow: 0 0 10px rgba(59,255,158,.45); }

/* =========================== the top bar ============================= */
/* Everything on one line at 390 px: lobby name and count, your name and
   how long it is yours, Who, Log out. The count and the buttons never
   wrap; if anything has to give, it is the name, and the time left stays. */

.lobby .roomtop {
  flex-wrap: nowrap;
  gap: .4rem;
  font-size: .62rem;
  letter-spacing: .06em;
}
.lobby .roomtop .cnt { flex: 0 0 auto; white-space: nowrap; }
.lobby .roomtop button, .lobby .roomtop a.out, .lobby .roomtop a.lnk {
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: .06em;
  padding: .3rem .5rem;
}
.lobby .me-chip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
  font-size: .6rem;
  overflow: hidden;
}
.lobby .me-chip .me-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby .me-chip .me-left { flex: 0 0 auto; white-space: nowrap; }

/* ============================ reporting ============================== */

/* A held finger must not select the words or bring up the phone's own menu. */
.line {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .25rem .4rem;
}
.line.held {
  border-color: rgba(255,45,45,.45);
  background: rgba(255,45,45,.05);
  box-shadow: 0 0 14px -4px rgba(255,45,45,.5);
}

.report-wrap {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 1rem calc(4.5rem + env(safe-area-inset-bottom));
  background: rgba(5,7,12,.7);
}
.report {
  width: 100%;
  max-width: 26rem;
  border: 1px solid rgba(255,45,45,.45);
  border-radius: 8px;
  background: var(--panel-2);
  box-shadow: 0 0 22px -6px rgba(255,45,45,.5);
  padding: .9rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.report-title {
  margin: 0;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--red);
  text-shadow: 0 0 12px rgba(255,45,45,.5);
  overflow-wrap: anywhere;   /* the name is shown as typed, however long */
}
.report-text { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-2); }
.btn.report-go {
  background: transparent;
  color: var(--red);
  border-color: rgba(255,45,45,.5);
  box-shadow: none;
  text-shadow: 0 0 10px rgba(255,45,45,.4);
}
.btn.report-go:hover { background: rgba(255,45,45,.08); filter: none; }
.btn.report-no {
  background: transparent;
  color: var(--text-2);
  border-color: var(--line);
  box-shadow: none;
  font-weight: 500;
}
.btn.report-no:hover { background: rgba(255,255,255,.04); filter: none; }

/* ======================= put it on your phone ======================== */

.homescreen {
  border: 1px solid rgba(248,8,120,.3);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 22px -8px rgba(248,8,120,.5);
  padding: .95rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
}
.homescreen .icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(248,8,120,.5);
  box-shadow: 0 0 22px -4px rgba(248,8,120,.7);
  display: block;
}
.homescreen .icon-row { display: flex; align-items: center; gap: .8rem; }
.homescreen .icon-note { margin: 0; font-size: .82rem; color: var(--text-2); }
.hint {
  border: 1px solid rgba(248,8,120,.32);
  border-radius: 7px;
  padding: .55rem .65rem;
  font-size: .82rem;
  color: var(--text-2);
}
.hint b { color: var(--brand); font-weight: 600; }
.homescreen .btn { margin-top: .1rem; }

/* Opened from the home screen, it is the app now: the box that says how to
   put it on your phone has done its job and stays out of the way. */
@media (display-mode: standalone) {
  .homescreen { display: none; }
}

/* Chat tab, since 2026-08-18: the top row is the count and nothing else; the
   count is a button that opens Who. */
.lobby .roomtop .cnt-btn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--lime); background: none; border: 0; padding: .3rem 0; cursor: pointer; text-shadow: 0 0 8px rgba(198,255,61,.5); }
.lobby .roomtop.quiet-top { justify-content: flex-start; }

/* Chat tab: the top row is the people's faces (up to ten) and "+N", tap for Who */
.lobby .roomtop .cnt-btn { display: flex; align-items: center; gap: .3rem; padding: .25rem 0; min-height: 2.2rem; }
.lobby .roomtop .cnt-btn .badge.sm { width: 1.5rem; height: 1.5rem; font-size: .7rem; }
.lobby .roomtop .cnt-btn .badge.sm.framed { width: 2.3rem; height: 2.3rem; }
.lobby .roomtop .who-more { font-family: var(--mono); font-size: .66rem; color: var(--lime); border: 1px solid rgba(198,255,61,.45); border-radius: 999px; padding: .1rem .45rem; margin-left: .2rem; }
.lobby .roomtop .who-none { font-family: var(--mono); font-size: .62rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }

/* ===================== one pill a line (round eight, 2026-08-19) =====================
   Both rooms, the Chat tab and the chat under the stage, draw a line the same
   way (mockup 2 of the round-eight plan): badge, name in the person's colour,
   the LVL tag, a colon, the words, the time small and grey at the end, on one
   soft pill. The words flow on after the name and wrap under it when long.
   Lines you sent carry a pink border and sit in the same left column as
   everyone else's (round ten). About twice as
   many lines fit a 390 px screen as the old two-row line. */
.lines { gap: .3rem; }
.lines .line {
  width: fit-content; max-width: 96%;
  padding: .22rem .7rem .24rem .3rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  font-size: .92rem; line-height: 1.35; color: var(--text);
  overflow-wrap: anywhere;
}
/* Every line starts at the same left edge, yours included (Martin, 2026-08-19:
   "chat is usually pinned in the left"). Yours used to sit on the right, which
   meant its left edge moved with the length of what you wrote. Yours is still
   yours: the pink border and background say so, in the same place as everyone
   else's. This undoes the right-hand side from round eight. */
.lines .line.mine { border-color: rgba(248,8,120,.45); background: rgba(248,8,120,.09); }
.lines .line .badge { vertical-align: middle; margin-right: .3rem; }
.lines .line-who {
  display: inline-block; vertical-align: middle; max-width: 11rem;
  font-family: var(--sans); font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; text-shadow: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the name keeps the person's own colour on your lines too; "mine" is the
   pink border, not a green name and not a side of its own */
.lines .line.mine .line-who { color: var(--brand); text-shadow: none; }
.lines .line .lv { vertical-align: middle; margin: 0 0 0 .3rem; }
.lines .line-sep { color: var(--text-2); }
.lines .line-text { display: inline; margin: 0; font-size: inherit; color: #F2FAFF; white-space: pre-wrap; }
.lines .line-when { display: inline; margin-left: .45rem; font-family: var(--mono); font-size: .58rem; color: var(--text-3); white-space: nowrap; vertical-align: middle; }
/* system lines are not pills: centred, full width, grey (style.css); the win
   line gold (the game), the entry line violet */
.lines .line.note-line { width: auto; max-width: 100%; align-self: stretch; background: none; border: 0; border-radius: 0; padding: .1rem .3rem; }
.lines .line.sys-win { color: #FFE45C; }
.lines .line.sys-entry { color: var(--violet); text-shadow: 0 0 8px rgba(157,107,255,.5); }
.lines .line.sys-entry b { color: var(--violet); font-weight: 700; }
.lines .line.empty-line { color: var(--text-2); }

/* The last three lines used to be pushed 3.6rem left, to keep them out from
   under the coin while it floated over the bottom right. The coin sits in the
   send row since 2026-08-19, so nothing floats over the lines any more, and
   that push was what Martin was seeing: his newest messages sat further left
   than his older ones and shifted as he typed ("depending on how long my chat
   is it goes to the left its not consistent"). Removed. The log-in bar below
   still keeps its own gap, because it sits level with the row. */
body:not(.game-open):not(.game-mini) .lobby .login-bar,
body:not(.game-open):not(.game-mini) .live-page .login-bar { padding-right: 3.9rem; }
/* a plain system line (round eight build B): the invite line, grey like the
   level-up line, no bold name */
.lines .line.sys-plain { color: var(--text-3); }