/* The Arcade lobby (/games/). Palette + fonts from quest.css (:root vars,
   @font-face) and retro.css (cc-crt, neon-*, .cc-panel, .cc-back, .cc-hud,
   .cc-topbar). Readability block: antialias DotGothic16 reading copy; leave
   the Press Start 2P headings crisp.

   A card is a small arcade cabinet: a marquee (the game's name and its
   world), a screen showing the game's own field at one art pixel per CSS
   pixel (the card art is a 240x200 window of the field each game chooses,
   captured at 1x by tools/arcade_check.js --shots and never scaled, so the
   pixels stay square), then the pitch, the controls, this
   browser's best and PLAY. The whole card is the link. */

.lobby-body {
    background: radial-gradient(circle at 50% 0%, #0c0c44 0%, var(--void) 60%);
    color: var(--ink);
    min-height: 100vh;
    min-height: 100dvh;
    /* quest.css pins html and body to the viewport with overflow hidden (the
       saga stage); the lobby is a long page, so the body scrolls (as
       .crews-body does). Without this only the first card was reachable. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lobby-body, .lobby-lede, .lobby-status, .lobby-blurb, .lobby-controls, .lobby-how p {
    font-family: 'DotGothic16', 'Courier New', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.lobby-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 16px 28px;
}
.lobby-title {
    text-align: center;
    font-size: clamp(var(--px-3, 24px), 6vw, 40px);
    letter-spacing: 2px;
    color: var(--gold);
    margin: 18px 0 10px;
    -webkit-font-smoothing: none;
}
.lobby-sub {
    text-align: center;
    font-size: var(--px-1, 8px);
    letter-spacing: 3px;
    color: var(--glint);
    margin-bottom: 16px;
    -webkit-font-smoothing: none;
}
.lobby-lede {
    max-width: 52ch;
    margin: 0 auto 18px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dim);
}
.lobby-status {
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: var(--glint);
    margin: 6px auto 16px;
    min-height: 1.6em;
}
.lobby-status--quiet { color: var(--dim); font-size: 14px; }
.lobby-retry {
    display: block;
    margin: -6px auto 18px;
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    color: var(--gold);
    background: rgba(8, 8, 40, 0.9);
    border: 2px solid var(--gold);
    border-radius: 6px;
    padding: 14px 18px;
    min-height: 44px;
    cursor: pointer;
    -webkit-font-smoothing: none;
}
.lobby-retry[hidden] { display: none; }
.lobby-retry:focus-visible { outline: 2px solid var(--glint); outline-offset: 2px; }

/* ---- couch mode: the room banner ---- */
.lobby-room {
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-color: var(--gold);
}
.lobby-room[hidden] { display: none; }
.lobby-room-k {
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 2px;
    line-height: 1.6;
    color: var(--gold);
    -webkit-font-smoothing: none;
}
.lobby-room-k b { font-weight: normal; color: var(--glint); letter-spacing: 4px; }
.lobby-room-p, .lobby-room-msg { font-family: 'DotGothic16', 'Courier New', monospace; font-size: 15px; line-height: 1.55; color: var(--ink); -webkit-font-smoothing: antialiased; }
.lobby-room-msg { color: var(--glint); min-height: 1.2em; }
.lobby-room-msg:empty { display: none; }
.lobby-room-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lobby-room-row[hidden] { display: none; }
.lobby-input {
    flex: 1 1 180px;
    min-width: 0; /* a flex item's min-width:auto keeps a text input at its 20-character intrinsic width (361px for the code box), which overflowed phones and wrapped the button under it */
    min-height: 44px;
    padding: 8px 12px;
    font-family: 'DotGothic16', 'Courier New', monospace;
    font-size: 16px;
    color: var(--ink);
    background: rgba(4, 4, 24, 0.9);
    border: 2px solid var(--win-line);
    border-radius: 6px;
}
.lobby-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.lobby-btn {
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.4;
    color: var(--ink);
    background: rgba(8, 8, 40, 0.9);
    border: 2px solid var(--glint);
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 44px;
    cursor: pointer;
    -webkit-font-smoothing: none;
}
.lobby-btn.gold { color: var(--gold); border-color: var(--gold); }
.lobby-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lobby-room-leave { align-self: flex-start; color: var(--dim); border-color: var(--win-line); }

.lobby-join { max-width: 560px; margin: 0 auto 18px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.lobby-join[hidden] { display: none; }
.lobby-input--code {
    flex: 0 1 160px;
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    -webkit-font-smoothing: none;
}

/* ---- the cabinet grid ---- */
.lobby-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 18px;
}
.lobby-card { display: flex; min-width: 0; }
.lobby-cab {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lobby-cab:hover, .lobby-cab:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 0 22px rgba(248, 204, 80, 0.16);
}
.lobby-cab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lobby-cab[aria-disabled="true"] { opacity: 0.6; cursor: default; }

/* the marquee: the game's name lit over the house pixel dash */
.lobby-marquee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 11px;
    text-align: center;
    background:
        repeating-linear-gradient(90deg, var(--win-line) 0 8px, transparent 8px 14px) left bottom / 100% 3px no-repeat,
        linear-gradient(180deg, rgba(248, 204, 80, 0.10), rgba(248, 204, 80, 0));
}
.lobby-name {
    font-size: var(--px-2, 16px);
    line-height: 1.3;
    letter-spacing: 1px;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(248, 204, 80, 0.35);
    -webkit-font-smoothing: none;
}
.lobby-world {
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.6;
    color: var(--dim);
    -webkit-font-smoothing: none;
}

/* the screen: the 1x card art (object-fit: none never scales it)
   in a dark glass with the bezel's inner lip */
.lobby-screen {
    position: relative;
    height: 200px;
    margin: 12px 12px 0;
    display: flex;
    justify-content: center;
    background: #03031a;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 2px #020212,
        inset 0 0 0 3px rgba(128, 232, 255, 0.09);
}
.lobby-shot {
    display: block;
    width: 240px;
    height: 200px;
    max-width: none;
    object-fit: none;
    object-position: 50% 50%;
    image-rendering: pixelated;
}
/* a faint glass sheen, the same recipe as the game cabinets */
.lobby-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(128, 232, 255, 0.06), transparent 40%);
}
.lobby-screen--empty::before {
    content: 'NO SIGNAL';
    margin: auto;
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 2px;
    color: var(--dim);
    -webkit-font-smoothing: none;
}

.lobby-body-copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
}
.lobby-blurb { font-size: 15px; line-height: 1.55; color: var(--ink); }
.lobby-controls { font-size: 14px; line-height: 1.5; color: var(--dim); }
.lobby-card-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 2px solid var(--win-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}
.lobby-best, .lobby-play {
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.6;
    -webkit-font-smoothing: none;
}
.lobby-best { color: var(--dim); }
.lobby-best b { color: var(--gold); font-weight: normal; }
.lobby-play { color: var(--glint); white-space: nowrap; }
.lobby-cab:hover .lobby-play, .lobby-cab:focus-visible .lobby-play { color: var(--gold); }

/* ---- quest explainer ---- */
.lobby-how {
    max-width: 640px;
    margin: 28px auto 0;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lobby-how-h {
    font-size: var(--px-1, 8px);
    letter-spacing: 2px;
    line-height: 1.6;
    color: var(--gold);
    font-weight: normal;
    -webkit-font-smoothing: none;
}
.lobby-how p { font-size: 15px; line-height: 1.6; color: var(--dim); }
.lobby-to-crews { align-self: flex-start; padding: 10px 0; }

.lobby-foot {
    margin-top: 28px;
    text-align: center;
    color: var(--dim);
    letter-spacing: 2px;
}

/* phones: the code box and its button fill the row together; when the row has to
   wrap (320px screens) each takes a full line instead of a short button sitting left */
@media (max-width: 480px) {
    .lobby-room-row > .lobby-btn { flex: 1 1 auto; }
    .lobby-input--code { flex: 1 1 140px; }
}
@media (max-width: 420px) {
    .lobby-wrap { padding: 10px 12px 24px; }
    .lobby-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lobby-cab { transition: none; }
    .lobby-cab:hover, .lobby-cab:focus-visible { transform: none; }
}

/* ---- the remote and the night (PARTY-MODES.md step 2) ----
   The phone that holds the remote sets the night here: chips at 44px for the
   cabinet, the round length and the night's length, WHO'S IN as ticked rows,
   one wide START. Everyone else sees THE NIGHT: who has the remote (the
   laurel crown), the round, the ladder, the next round's clock. */
.lobby-remote { max-width: 560px; margin: 0 auto 18px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; border-color: var(--glint); }
.lobby-remote[hidden] { display: none; }
.lobby-remote[data-remote="host"] { border-color: var(--gold); }
.lobby-remote-host, .lobby-remote-night, .lobby-remote-watch { display: flex; flex-direction: column; gap: 10px; }
.lobby-remote-host[hidden], .lobby-remote-night[hidden], .lobby-remote-watch[hidden], .lobby-ladder-wrap[hidden], .lobby-remote-next[hidden], .lobby-goto[hidden], .lobby-remote-actions > [hidden] { display: none; }
.lobby-pick { display: flex; flex-direction: column; gap: 6px; }
.lobby-pick-k { font-family: 'Press Start 2P', 'DotGothic16', monospace; font-size: var(--px-1, 8px); letter-spacing: 2px; line-height: 1.6; color: var(--dim); -webkit-font-smoothing: none; }
.lobby-pick-p { font-family: 'DotGothic16', 'Courier New', monospace; font-size: 14px; line-height: 1.5; color: var(--dim); -webkit-font-smoothing: antialiased; }
.lobby-pick-p:empty { display: none; }
.lobby-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lobby-chip {
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.4;
    color: var(--dim);
    background: rgba(8, 8, 40, 0.9);
    border: 2px solid var(--win-line);
    border-radius: 6px;
    padding: 12px 12px;
    min-height: 44px;
    cursor: pointer;
    -webkit-font-smoothing: none;
}
.lobby-chip.is-on { color: var(--gold); border-color: var(--gold); background: rgba(248, 204, 80, 0.08); }
.lobby-chip:disabled { opacity: 0.5; cursor: default; }
.lobby-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lobby-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-who-row { min-width: 0; }
.lobby-who-label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; background: rgba(4, 4, 24, 0.7); border: 2px solid var(--win-line); border-radius: 6px; cursor: pointer; }
.lobby-who-row.is-host .lobby-who-label { border-color: var(--gold); }
.lobby-who-label input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--gold); margin: 0; }
.lobby-who-name { display: flex; align-items: baseline; min-width: 0; font-family: 'DotGothic16', 'Courier New', monospace; font-size: 16px; color: var(--ink); overflow: hidden; white-space: nowrap; -webkit-font-smoothing: antialiased; }
/* B8: a name cell (WHO'S IN, the ladder) gives way to an ellipsis on the NAME alone, so " (you)" and " · guest" stay whole
   beside a 30-character name; the tail keeps its leading space (pre) as a flex item of its own */
.lobby-name-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-name-tail { flex: 0 0 auto; white-space: pre; }
.lobby-remote-round { font-size: var(--px-1, 8px); letter-spacing: 1px; line-height: 1.7; color: var(--gold); -webkit-font-smoothing: none; }
.lobby-remote-next { font-size: var(--px-1, 8px); letter-spacing: 1px; line-height: 1.7; color: var(--glint); -webkit-font-smoothing: none; }
.lobby-goto { text-decoration: none; text-align: center; align-self: flex-start; }
.lobby-ladder-wrap { display: flex; flex-direction: column; gap: 6px; }
.lobby-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lobby-ladder-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; font-family: 'DotGothic16', 'Courier New', monospace; font-size: 15px; line-height: 1.4; color: var(--ink); background: rgba(4, 4, 24, 0.7); border: 2px solid var(--win-line); border-radius: 6px; -webkit-font-smoothing: antialiased; }
.lobby-ladder-row.mine { color: var(--gold); border-color: var(--gold); }
.lobby-ladder-row .rank, .lobby-ladder-row .pts { font-family: 'Press Start 2P', 'DotGothic16', monospace; font-size: var(--px-1, 8px); -webkit-font-smoothing: none; }
.lobby-ladder-row .rank { width: 24px; color: var(--dim); }
.lobby-ladder-row .who { flex: 1 1 auto; display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; }
.lobby-ladder-row .who small { color: var(--dim); font-size: 12px; }
.lobby-ladder-row .pts { color: var(--gold); }
.lobby-remote-actions { align-items: stretch; }
.lobby-remote-start { flex: 1 1 100%; min-height: 48px; white-space: nowrap; }
.lobby-remote-start:disabled, .lobby-btn:disabled { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .lobby-chip { transition: none; } }
.lobby-crown { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; background: currentColor; color: var(--gold); -webkit-mask: url(/assets/quest/icons/laurel-crown.svg) center / contain no-repeat; mask: url(/assets/quest/icons/laurel-crown.svg) center / contain no-repeat; }

/* ---- hosted nights (PARTY-MODES.md section 10, H1) ----
   The GUEST badge beside the room code (the relay's word for a phone with no
   account); HOSTING AS, the crew chips (the tag in brackets, as the crews page
   writes it; a long name ends in an ellipsis, never widens the card); LOCK THE
   ROOM, a toggle chip that turns gold with the padlock when on; the WHO'S IN
   suffixes that say who is off the crew's ladder; the gain line after END, gold
   for a counting night and cyan for a friendly, fading in on four steps like
   the TV's reveal (still under reduced motion). */
.lobby-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 6px;
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1;
    vertical-align: 1px;
    color: var(--glint);
    border: 2px solid var(--glint);
    border-radius: 4px;
    background: rgba(128, 232, 255, 0.08);
    -webkit-font-smoothing: none;
}
.lobby-badge[hidden] { display: none; }
.lobby-pick[hidden] { display: none; }
.lobby-chip--crew { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-chip--crew.is-on:disabled { opacity: 1; }   /* the night's crew stays lit while the others fade: set, not broken */
.lobby-lock-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.lobby-lock-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(248, 204, 80, 0.08); }
.lobby-lock-glyph {
    display: none;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url(/assets/quest/icons/lock.svg) center / contain no-repeat;
    mask: url(/assets/quest/icons/lock.svg) center / contain no-repeat;
}
.lobby-lock-btn[aria-pressed="true"] .lobby-lock-glyph { display: inline-block; }
.lobby-who-name small { color: var(--dim); font-size: 12px; }
.lobby-remote-gain {
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.7;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(248, 204, 80, 0.4);
    -webkit-font-smoothing: none;
    animation: lobby-gain-in 0.6s steps(4, end) both;
}
.lobby-remote-gain.is-friendly { color: var(--glint); text-shadow: 0 0 10px rgba(128, 232, 255, 0.35); }
/* on the host's card the night that ended sits above the next night's pickers: the marquee's pixel dash closes it off */
.lobby-remote[data-remote="host"] .lobby-remote-watch {
    padding-bottom: 14px;
    background: repeating-linear-gradient(90deg, var(--win-line) 0 8px, transparent 8px 14px) left bottom / 100% 3px no-repeat;
}
.lobby-remote-gain[hidden] { display: none; }
@keyframes lobby-gain-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lobby-remote-gain { animation: none; } }
/* the night's crew on every watching phone: the card's heading turns into the TV's crew line in miniature
   ("CHECK CREW NIGHT", gold with the same glow and the dark pixel drop), wrapping anywhere so a 40-character
   name never widens the card */
.lobby-room-k.is-crew {
    color: var(--gold);
    overflow-wrap: anywhere;
    text-shadow: 0 0 6px rgba(248, 204, 80, 0.55), 0 0 14px rgba(248, 204, 80, 0.3), 1px 1px 0 #703808;
}
/* TRY AGAIN under a locked room's refusal: the gold action beside the dim LEAVE THE ROOM; USE HERE (the
   same seat opened in another tab, wave 3) sits in the same place */
.lobby-room-retry { align-self: flex-start; }

/* THE NIGHT'S TALLY (wave 3, B13): one reading line under the host's actions while a night is on. A night
   that counts reads gold (the record's own colour on the gain line); a capped week reads cyan (the friendly's);
   a friendly so far stays dim, the pickers' colour, since it is a running count and not yet news */
.lobby-tally { text-wrap: pretty; }
.lobby-tally[hidden] { display: none; }
.lobby-tally[data-tally="counts"] { color: var(--gold); }
.lobby-tally[data-tally="cap"] { color: var(--glint); }

/* KEEP YOUR SCORE (hosted nights H2): the room banner's gold-edged panel with
   the same input row and a dim NOT NOW. It is the night's reward on a guest's
   phone, so it arrives the way the gain line does (four steps of fade; none
   under reduced motion) and its heading carries the crew line's gold glow and
   dark pixel drop. A failure line turns the message danger red; the field is
   marked aria-invalid with it. */
.lobby-keep { max-width: 560px; margin: 0 auto 18px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; border-color: var(--gold); }
.lobby-keep[hidden] { display: none; }
.lobby-keep:not([hidden]) { animation: lobby-gain-in 0.6s steps(4, end) both; }
.lobby-keep .lobby-room-k { text-shadow: 0 0 6px rgba(248, 204, 80, 0.55), 0 0 14px rgba(248, 204, 80, 0.3), 1px 1px 0 #703808; }
/* the door and the night's date break where a reader would: never a lone "25." under "Sun, Oct" (a browser
   without text-wrap: pretty wraps as before); a crew name with no space in it (up to 40 characters) breaks
   inside the card rather than running through its gold edge */
.lobby-keep .lobby-room-p, .lobby-keep .lobby-room-msg { text-wrap: pretty; overflow-wrap: anywhere; }
.lobby-room-msg.is-err { color: var(--danger); }
.lobby-input[aria-invalid="true"] { border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .lobby-keep:not([hidden]) { animation: none; } }

/* WHO'S IN, INVITE TO CREW (H2): on a leader's remote a guest's row gains the
   button at its end (a sibling of the row's label, never inside it); once the
   relay says so, the gold INVITED tag in the crews page's chip recipe (8px
   pixel, 1px currentColor border). The row's frame moves from the label to the
   whole row, so the button reads as that guest's and nobody else's; on a phone
   it takes its own line under the name, inside the same frame. */
.lobby-who-row.has-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding-right: 8px; background: rgba(4, 4, 24, 0.7); border: 2px solid var(--win-line); border-radius: 6px; }
.lobby-who-row.has-invite .lobby-who-label { flex: 1 1 180px; min-width: 0; background: transparent; border: 0; }   /* the frame is the row's: the checkbox stays in line with the other rows' */
.lobby-who-invite { flex: 0 0 auto; margin: 4px 0; }
/* a row with no checkbox (a guest on a leader's TONIGHT'S GUESTS during a night, or a guest of tonight who
   went home): the name sits where the label would, at the label's 44px; one who left reads as gone, a dashed
   frame and a dim name, its INVITE TO CREW as bright as any (the relay takes it until END) */
.lobby-who-row.is-bare .lobby-who-name { flex: 1 1 180px; min-width: 0; padding: 6px 10px; line-height: 32px; }
.lobby-who-row.is-left { border-style: dashed; }
.lobby-who-row.is-left .lobby-who-name { color: var(--dim); }
/* the line under the list names the crew in a leader's invite note: a 40-character name with no space breaks inside it */
#remote-who-p { overflow-wrap: anywhere; }
.lobby-who-invited {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    font-family: 'Press Start 2P', 'DotGothic16', monospace;
    font-size: var(--px-1, 8px);
    letter-spacing: 1px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--gold);
    background: rgba(248, 204, 80, 0.08);
    border: 1px solid currentColor;
    border-radius: 4px;
    -webkit-font-smoothing: none;
}
@media (max-width: 480px) {
    .lobby-who-row.has-invite { padding: 0 0 8px; }
    .lobby-who-invite { flex: 1 1 100%; margin: 0 8px; }
}

/* B8: HAND OFF lists the hostable phones by name, in capitals, as CCModal's 8px pixel buttons. A 30-character
   name with no space (thirty W) has no break point and ran past the dialog at 320 px; it breaks anywhere now,
   inside its button. (the rule belongs on retro.css's .cc-modal-btn, names-builder handoff 3; until it moves, this keeps the lobby whole.) */
.cc-modal-btn { overflow-wrap: anywhere; }