/* 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: var(--r);
  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(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  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(--sans);
  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(46,204,113,.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: var(--r);
  padding: .25rem .4rem;
}
.line.held {
  border-color: rgba(225,45,45,.45);
  background: rgba(225,45,45,.05);
  box-shadow: 0 0 14px -4px rgba(225,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(0,0,0,.7);
}
.report {
  width: 100%;
  max-width: 26rem;
  border: 1px solid rgba(225,45,45,.45);
  border-radius: var(--r);
  background: var(--panel-2);
  box-shadow: 0 0 22px -6px rgba(225,45,45,.5);
  padding: .9rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.report-title {
  margin: 0;
  font-family: var(--round);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--red);
  text-shadow: 0 0 12px rgba(225,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(225,45,45,.5);
  box-shadow: none;
  text-shadow: 0 0 10px rgba(225,45,45,.4);
}
.btn.report-go:hover { background: rgba(225,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(240,41,108,.3);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 22px -8px rgba(240,41,108,.5);
  padding: .95rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
}
.homescreen .icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r);
  border: 1px solid rgba(240,41,108,.5);
  box-shadow: 0 0 22px -4px rgba(240,41,108,.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(240,41,108,.32);
  border-radius: var(--r-sm);
  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; }
/* Round sixteen: the count is words again, not a row of faces. The two rules
   that sized those faces are gone with them. */
.lobby .roomtop .cnt-btn .who-n { font-family: var(--sans); font-size: .78rem; color: var(--text-2); text-shadow: none; }
.lobby .roomtop .cnt-btn { margin-left: auto; }


/* ===================== 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: .1rem; }

/* ---- one bubble a message (round twelve, 2026-08-20) ----
   The shape in Martin's reference pictures, and it replaces the one-line pill
   round eight built. Theirs is charcoal on the left with a small face beside
   it and the name inside; yours is the fade on the right with no face and no
   name, because in your own bubble the name is you. The time sits UNDER the
   bubble, small and grey, not at the end of the words.

   Round ten pinned every line to the left, yours included, because yours kept
   jumping sides mid-conversation (Martin's phone 2026-08-19: "it start in the
   right and depending on how long my chat is it goes to the left"). That was
   a bug, not the side: yours was decided by the connection, and every
   reconnect handed out a new one. It is decided by your NAME now, which does
   not change, so the right-hand side is steady and comes back.

   The trade is real and Martin took it: a bubble is two rows plus a time, so
   about half as many messages fit a screen as the one-line pill did. */
.lines .line {
  display: flex; align-items: flex-end; gap: .4rem;
  width: 100%; max-width: 100%;
  background: none; border: 0; border-radius: 0; padding: 0;
  font-size: .95rem; line-height: 1.35; color: var(--text);
  overflow-wrap: anywhere;
  margin-bottom: .35rem;
}
.lines .line.mine { justify-content: flex-end; background: none; border: 0; }

/* The small face beside somebody else's bubble.
   Round sixteen: ONE size, whatever the level. The badge grows to 2.3rem when
   it is wearing a frame, so a level-20 line started further from the left
   than a level-1 line and the bubbles down the screen did not line up. The
   frame still draws, at this size, around the face and not over it. */
/* The face lines up with the NAME at the top of the column, which is where
   Martin's page has it, rather than floating near the bottom of a tall
   bubble. `align-self` beats the row's flex-end for this one child. */
.lines .line > .badge { flex: 0 0 auto; align-self: flex-start; margin: 1.05rem 0 0; }
.lines .line.mine > .badge { align-self: flex-end; margin: 0; }
.lines .line > .badge.sm,
.lines .line > .badge.sm.framed { width: 2rem; height: 2rem; font-size: .8rem; }

.lines .ln-col { display: flex; flex-direction: column; min-width: 0; max-width: 78%; }
.lines .line.mine .ln-col { align-items: flex-end; }

.lines .bub {
  width: fit-content; max-width: 100%;
  padding: .45rem .7rem; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text);
  /* His designed page's size (13.5px), not the page default 16px.
     Martin's call 2026-08-21: "make the chat text smaller". Every chat
     shares this rule: the Chat tab, the room and private messages. */
  font-size: .85rem;
}
.lines .line.mine .bub {
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #FFFFFF; font-weight: 500;
}

/* Round sixteen (2026-08-20): the name sits ABOVE the bubble, not inside it,
   which is how Martin's page draws it. Nothing else about the bubble moves. */
.lines .ln-head { display: block; margin: 0 .25rem .15rem; }
.lines .line-who {
  display: inline-block; vertical-align: middle; max-width: 11rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: 0; text-shadow: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lines .ln-head .lv { vertical-align: middle; margin: 0 0 0 .25rem; }
.lines .line-text { display: block; margin: 0; font-size: .95rem; color: inherit; white-space: pre-wrap; }
.lines .line-when {
  display: block; margin: .12rem .25rem 0;
  font-family: var(--sans); font-size: .66rem; color: var(--text-2); white-space: nowrap;
}
.lines .line.mine .line-when { text-align: right; }

/* system lines are not bubbles: centred, full width, grey (style.css); the
   win line gold (the game), the entry line violet */
/* Round sixteen: a system line is a grey pill, centred, the way Martin's page
   draws "tintin is here" and "You joined the room". It was plain centred text
   with nothing behind it, which read as a message somebody had sent. */
.lines .line.note-line {
  display: block; width: fit-content; max-width: 92%; text-align: center;
  margin: .1rem auto .35rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .7rem; font-size: .74rem; color: var(--text-2);
}
.lines .line.sys-win { color: #FFD700; }
.lines .line.sys-entry { color: var(--violet); text-shadow: 0 0 8px rgba(138,43,226,.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); }

/* ---- the heart on a message (round sixteen, 2026-08-20) ----
   Martin's page puts one beside every bubble. It sits on the bubble's own row
   so it lines up with the bottom of the words however tall the bubble is, and
   it is 2rem square so a thumb can hit it: the drawn heart inside is small,
   the thing you press is not.

   Yours has no heart. You cannot heart your own message, and a control that
   is there and refuses is worse than one that is not. */
.lines .bub-row { display: flex; align-items: flex-end; gap: .25rem; max-width: 100%; }
.lines .line.mine .bub-row { flex-direction: row-reverse; }
.lines .heart {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .12rem;
  width: auto; min-width: 2rem; height: 2rem; padding: 0 .3rem;
  background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-family: var(--sans); font-size: .7rem; font-weight: 700;
  border-radius: 999px;
}
.lines .heart svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; }
.lines .heart:hover { color: var(--text-2); }
/* On: pink, filled, and it grows for a moment so the tap is felt as well as
   seen. The count sits beside it and only shows once somebody has pressed. */
.lines .heart.on { color: var(--brand); }
.lines .heart.on svg { fill: var(--brand); stroke: var(--brand); }
.lines .heart .hn:empty { display: none; }
.lines .heart.pop svg { animation: heart-pop .28s ease; }
@keyframes heart-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lines .heart.pop svg { animation: none; } }

/* ==========================================================================
   Round fourteen (2026-08-20): the Chat tab is two tabs, to Martin's page.
   General is the one public room this app has always had. Private lists the
   private video rooms and your messages, both of which were only reachable
   from somewhere else before.
   ========================================================================== */

/* The title bar (.chattop) moved to style.css in round seventeen: it is
   shared chrome now, the Games page wears it too. */

/* ---- General / Private ---- */
.chatswitch {
  position: fixed; top: 3rem; left: 0; right: 0; z-index: 6;
  max-width: 27rem; margin-inline: auto;
  display: flex; gap: .3rem; padding: .2rem .9rem .55rem;
  background: var(--void);
}
.cswitch {
  flex: 1; min-height: 2.5rem; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text-2); font-family: var(--sans); font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding-inline: .1rem; white-space: nowrap;
}
/* Four tabs since round seventeen, so the words are a step smaller and never wrap. */
.cs-dot { width: .38rem; height: .38rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 5px var(--brand); animation: livedot-pulse 1.4s ease-in-out infinite; }
.cswitch.on .cs-dot { background: #FFFFFF; box-shadow: 0 0 5px rgba(255,255,255,.8); }
@keyframes livedot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cs-dot { animation: none; } }
.cswitch.on {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #FFFFFF; font-weight: 800;
}
.cs-n {
  font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem;
  background: rgba(255,255,255,.22); color: #FFFFFF;
}
.cswitch:not(.on) .cs-n { background: var(--brand); color: #FFFFFF; }

/* both panels start under the two fixed bars */
.lobby, .privatetab { padding-top: 6.1rem; }

/* ---- the room line above the messages ---- */
.roomtop .livedot {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 8px var(--brand); flex: 0 0 auto;
}
.roomtop .roomname { font-size: .85rem; font-weight: 700; color: #FFFFFF; white-space: nowrap; }

/* ---- the Private tab ---- */
.privatetab {
  position: fixed; inset: 0; bottom: calc(3.1rem + env(safe-area-inset-bottom));
  max-width: 27rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: .1rem;
  padding: 6.1rem .9rem 1rem; overflow-y: auto;
}
.privatetab.hidden { display: none; }

.mkroom {
  display: flex; align-items: center; gap: .75rem; width: 100%; cursor: pointer;
  background: var(--panel); border: 1.5px dashed rgba(240,41,108,.55); border-radius: var(--r);
  padding: .85rem .9rem; text-align: left; font: inherit; color: inherit;
}
.mkroom:active { background: rgba(240,41,108,.09); }
.mk-plus {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: inline-flex; align-items: center; justify-content: center;
}
.mk-plus svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; }
.mk-words b { display: block; font-size: .98rem; font-weight: 800; color: #FFFFFF; }
.mk-words span { display: block; font-size: .78rem; color: var(--text-2); }

.roomlist, .dmlist { display: flex; flex-direction: column; gap: .5rem; }

.rcard2 {
  display: flex; align-items: center; gap: .7rem; width: 100%; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .7rem; text-align: left; font: inherit; color: inherit;
}
.rcard2 .rthumb {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--r-sm); position: relative;
  background: linear-gradient(135deg, rgba(240,41,108,.35), rgba(138,43,226,.35));
  display: inline-flex; align-items: center; justify-content: center;
}
.rcard2 .rthumb svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linejoin: round; }
.rcard2 .rlock {
  position: absolute; right: -.2rem; bottom: -.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--void); border: 2px solid var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
}
.rcard2 .rlock svg { width: .55rem; height: .55rem; fill: var(--brand-2); stroke: none; }
.rcard2 .rwho { flex: 1; min-width: 0; }
.rcard2 .rtop { display: flex; align-items: center; gap: .4rem; }
.rcard2 .rtop b { font-size: .95rem; font-weight: 800; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard2 .rlive {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem;
  background: var(--brand); color: #FFFFFF; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  border-radius: 999px; padding: .1rem .4rem;
}
.rcard2 .rlive i { width: .3rem; height: .3rem; border-radius: 50%; background: #FFFFFF; animation: rp 1.4s infinite; }
@keyframes rp { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .rcard2 .rlive i { animation: none; } }
.rcard2 .rsub { display: block; font-size: .76rem; color: var(--text-2); margin-top: .1rem; }

/* ---- the create sheet ---- */
.mkwrap { position: fixed; inset: 0; z-index: 60; }
.mkback { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .2s ease; }
.mkwrap.up .mkback { opacity: 1; }
.mksheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 27rem; margin-inline: auto; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: .55rem .9rem calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease;
}
.mkwrap.up .mksheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mkback, .mksheet { transition: none; } }
.mkhandle { display: block; width: 2.4rem; height: .28rem; margin: .1rem auto .7rem; border-radius: 999px; background: rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer; }
.mkhead { display: flex; align-items: center; margin-bottom: .8rem; }
.mkhead b { font-family: var(--round); font-weight: 800; font-size: 1.15rem; color: #FFFFFF; }
.mkx { margin-left: auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.mkhost { display: flex; align-items: center; gap: .7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; }
.mkhost .mkh-w { min-width: 0; }
.mkhost small { display: block; font-size: .72rem; color: var(--text-2); }
.mkhost b { display: block; font-size: .95rem; font-weight: 800; color: #FFFFFF; }
.mklabel { margin: 1rem 0 .45rem; font-size: .82rem; font-weight: 800; color: #FFFFFF; }
.mkseats { display: flex; gap: .45rem; }
.mkseat {
  flex: 1; min-height: 2.5rem; border-radius: var(--r); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2);
  font-family: var(--sans); font-size: .92rem; font-weight: 800;
}
.mkseat.on { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; color: #FFFFFF; }
.mkseat.off { opacity: .4; cursor: default; }
.mknote { margin: .45rem 0 0; font-size: .72rem; color: var(--text-3); }
.mksheet .btn { margin-top: 1.2rem; }

/* On the Private tab the game coin and the room's own send row do not belong:
   this is a list of rooms and messages, not a room. */
body.private-open .gcoin, body.private-open .gmini { display: none; }
body.mk-open { overflow: hidden; }
/* a seat count that does not exist yet answers the tap rather than doing
   nothing at all, and says why underneath */
.mkseat.shake { animation: mk-shake .3s; }
@keyframes mk-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .mkseat.shake { animation: none; } }
/* the host's face in the create sheet */
.mkhost .badge { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; font-size: 1rem; }

/* ==========================================================================
   Round sixteen (2026-08-20): the Chat page brought to Martin's design.
   Scoped to .privatetab and .dmwrap so nothing here reaches the friends list
   on Home or on Profile, which share the .frow shape.
   ========================================================================== */

/* ---- Create a room: a SOLID card ----
   It was a pink dashed box, and so is the empty state right under it
   (.empty / .fempty, and that dashed pink IS the house style, line 247 of
   augh-yahh-house-style.css). Two boxes with the same look, one a button and
   one a message. The button is the one that moves. */
.mkroom {
  background: var(--panel);
  border: 1px solid var(--line);
}
.mkroom:active { background: var(--panel-2); transform: scale(.99); }

/* ---- a room card ---- */
.privatetab .rcard2 .rfaces { display: inline-flex; margin-right: .3rem; vertical-align: middle; }
.privatetab .rcard2 .rfaces .badge {
  width: 1.1rem; height: 1.1rem; font-size: .55rem;
  border: 1.5px solid var(--panel); margin-left: -.35rem;
}
.privatetab .rcard2 .rfaces .badge:first-child { margin-left: 0; }
.privatetab .rcard2 .rsub { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
/* A room that has closed: still listed, plainly greyed, still tappable so the
   gone page can say what happened. */
.privatetab .rcard2.rgone { opacity: .55; }
.privatetab .rcard2.rgone .rthumb { filter: grayscale(1); }

/* ---- a message row ----
   The time on the right of the name, the last thing said underneath, the
   unread count at the end, and the green dot ON the face. It used to float
   loose in the gap between the words and the badge. */
.privatetab .frow { width: 100%; }
.privatetab .frow .fav.on::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--green); border: 2px solid var(--void);
}
.privatetab .frow .ftop { display: flex; align-items: baseline; gap: .25rem; min-width: 0; }
.privatetab .frow .ftop b { flex: 0 1 auto; min-width: 0; }
.privatetab .frow .ftime {
  margin-left: auto; flex: 0 0 auto; display: block;
  font-size: .68rem; color: var(--text-2); white-space: nowrap;
}
.privatetab .frow .ftick { flex: 0 0 auto; width: .82rem; height: .82rem; fill: var(--brand); }
.privatetab .frow .fbot { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.privatetab .frow .fprev {
  flex: 1; min-width: 0; font-size: .76rem; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.privatetab .frow .fprev.un { color: var(--text); font-weight: 500; }
.privatetab .frow .fun {
  flex: 0 0 auto; min-width: 1.2rem; height: 1.2rem; padding: 0 .32rem;
  border-radius: 999px; background: var(--brand); color: #FFFFFF;
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- the create sheet's name box and coin entry ---- */
.mkname { width: 100%; margin-bottom: .2rem; }
/* The seat chips are all real now, so none of them is greyed and none shakes. */
.mkseat.off { opacity: 1; }

/* ---- one conversation, over the Private tab ----
   It slides in from the right and back out again, which is how Martin's page
   draws it, and it sits above the tab bar so nothing shows through. */
.dmwrap {
  position: fixed; inset: 0; z-index: 40;
  max-width: 27rem; margin-inline: auto;
  background: var(--void);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
}
.dmwrap.hidden { display: none; }
.dmwrap.up { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .dmwrap { transition: none; } }
.dmscreen { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 .9rem .9rem; }
.dmtop {
  flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
  padding: .7rem 0 .6rem; border-bottom: 1px solid var(--line);
}
.dmback {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; padding: 0;
  background: none; border: 0; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dmback svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dmback:hover { background: var(--panel-2); }
.dmback:active { transform: scale(.92); }
.dmface { position: relative; flex: 0 0 auto; display: inline-flex; }
.dmface .badge { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
.dmface.on::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--green); border: 2px solid var(--void);
}
.dmwho { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dmwho b { font-size: .95rem; font-weight: 800; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmwho span { font-size: .7rem; color: var(--text-2); }
.dmwrap .lines { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem .1rem; }
.dmwrap .say { padding-top: .5rem; border-top: 1px solid var(--line); }
.dmwrap .line.dm-first, .dmwrap .line.dm-off { color: var(--text-3); }
/* Nothing behind it can be scrolled or tapped while it is open. */
body.dm-open { overflow: hidden; }

/* ==========================================================================
   Round seventeen (2026-08-20), Martin's page: the Live and Friends tabs on
   Chat, and the Go live sheet.
   ========================================================================== */
.livetab, .friendstab { max-width: 27rem; margin-inline: auto; padding: 6.1rem .9rem calc(4.6rem + env(safe-area-inset-bottom)); }

/* the stage as a card while somebody is up */
.live-card {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem; color: inherit; text-decoration: none; cursor: pointer; font: inherit;
  margin-bottom: .7rem;
}
.live-card:active { background: var(--panel-2); }
.live-card .lc-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  background: var(--brand); color: #FFFFFF; font-family: var(--round); font-weight: 800;
  font-size: .72rem; padding: .28rem .6rem; border-radius: 999px;
  box-shadow: 0 0 14px rgba(240,41,108,.4);
}
.live-card .lc-pill i { font-style: normal; width: .38rem; height: .38rem; border-radius: 50%; background: #FFFFFF; animation: livedot-pulse 1.4s ease-in-out infinite; }
.live-card .lc-w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.live-card .lc-w b { font-family: var(--round); font-weight: 800; font-size: .95rem; color: #FFFFFF; }
.live-card .lc-w span { font-size: .76rem; color: var(--text-2); }

/* Go live yourself: the dashed empty-state card, which is the house style's
   shape for "nothing here yet, here is what to do". */
.golive {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%;
  border: 1.5px dashed rgba(240,41,108,.4); border-radius: var(--r);
  background: rgba(240,41,108,.03); padding: 1.1rem .9rem; cursor: pointer;
  font: inherit; color: inherit; text-align: center; text-decoration: none;
}
.golive:active { background: rgba(240,41,108,.1); }
.golive b { color: var(--brand); font-family: var(--round); font-weight: 800; font-size: .92rem; }
.golive span { color: var(--text-2); font-size: .76rem; }

/* the two doors on the Go live sheet */
.glopt {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem .9rem; margin-bottom: .6rem; cursor: pointer; font: inherit; color: inherit;
}
.glopt:active { border-color: var(--brand); background: rgba(240,41,108,.08); }
.glopt-ic {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--brand);
}
.glopt-ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glopt-w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.glopt-w b { font-size: .88rem; font-weight: 700; color: #FFFFFF; }
.glopt-w span { font-size: .72rem; color: var(--text-2); line-height: 1.35; }

/* Friends / Requests: the underline tabs from his page */
.ftabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.ftab {
  background: none; border: 0; cursor: pointer; padding: .5rem .1rem .6rem;
  color: var(--text-2); font-family: var(--sans); font-size: .88rem; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.ftab.on { color: #FFFFFF; border-bottom-color: var(--brand); }
.ft-n { font-size: .74rem; font-weight: 600; color: var(--text-3); }
.ftab.on .ft-n { color: var(--text-2); }

/* one friend, one row */
.fr2 {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .1rem;
}
.fr2 .fr2-face { flex: 0 0 auto; position: relative; cursor: pointer; }
.fr2 .fr2-dot {
  position: absolute; right: -.05rem; bottom: -.05rem; width: .55rem; height: .55rem;
  border-radius: 50%; background: var(--text-3); border: 2px solid var(--void);
}
.fr2 .fr2-dot.on { background: var(--green); box-shadow: 0 0 6px rgba(46,204,113,.7); }
.fr2 .fr2-w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.fr2 .fr2-w b { font-size: .9rem; font-weight: 700; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; }
.fr2 .fr2-w span { font-size: .74rem; color: var(--text-2); }
.fr2 .fr2-un {
  flex: 0 0 auto; min-width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: var(--brand); color: #FFFFFF; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding-inline: .3rem;
}
/* the row's one button: filled fade for the main thing, quiet for the rest */
.fr2-btn {
  flex: 0 0 auto; min-height: 2.2rem; padding: .35rem 1rem; cursor: pointer;
  border: 0; border-radius: 999px; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #FFFFFF;
}
.fr2-btn.quiet { background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); }
.fr2-btn:disabled { opacity: .5; cursor: default; }

/* The "You are up" sheet's rows (Martin's call 2026-08-21: the sheet joins
   the theme). A row that is ON goes green; Step down is amber, it takes you
   off the stage. */
.glopt.on .glopt-ic { color: var(--green); border-color: rgba(46,204,113,.5); }
.glopt.on .glopt-w b { color: var(--green); }
.glopt.amber .glopt-ic { color: var(--amber); border-color: rgba(255,154,60,.5); }
.glopt.amber .glopt-w b { color: var(--amber); }
.glopt.amber:active { border-color: var(--amber); background: rgba(255,154,60,.08); }