/* Laptop lobby, variant F. Calm on purpose: one column, a clear order from top to
   bottom, and only one loud colour (the start button). Seat colours stay, since they
   help people tell players apart. Light by default. */

:root,
html[data-theme="light"] {
  --lb-bg: #efecdb;
  --lb-card: #fffdf5;
  --lb-ink: #2d282a;
  --lb-muted: #6b6264;
  --lb-line: #d8d2bd;
  --lb-red: #c8402b;
  --lb-cream: #efecdb;
}

html[data-theme="dark"] {
  --lb-bg: #1f1a1c;
  --lb-card: #2d282a;
  --lb-ink: #efecdb;
  --lb-muted: #a9a09a;
  --lb-line: #443c40;
  --lb-red: #b8382a;
  --lb-cream: #efecdb;
}

body:has(#lobby:not([hidden])) {
  background: var(--lb-bg);
  background-image: none;
  color: var(--lb-ink);
  font-family: var(--brand-mono);
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body:has(#lobby:not([hidden])) main {
  max-width: none;
  margin: 0;
  padding: 0;
}

#lobby {
  color: var(--lb-ink);
  font-family: var(--brand-mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#lobby h2 {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  margin: 0;
}
#lobby p { margin: 0; }
#lobby .muted { color: var(--lb-muted); }
#lobby .error { color: var(--lb-red); font-weight: 700; text-align: center; padding: 0 24px; min-height: 1.2rem; }

/* Header: logo and two quiet actions. */
#lobby .f-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  border-bottom: 1px solid var(--lb-line);
}
#lobby .f-logo { width: 180px; height: auto; display: block; }
#lobby .f-top-actions { display: flex; gap: 10px; }

/* Body: one centred column in a fixed order. */
#lobby .f-body {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
#lobby .f-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb-muted);
  margin: 0 0 6px;
}

/* Join: the code and QR code side by side, with nothing around them. */
#lobby .f-join {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
#lobby .qr {
  background: #fff;
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 8px;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}
#lobby .qr svg { width: 100%; height: 100%; display: block; }
#lobby .f-code {
  font-family: var(--brand-display);
  font-size: 5.4rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--lb-red);
  margin-bottom: 14px;
}
#lobby .join-url { font-weight: 700; word-break: break-all; }

/* Sections share one rhythm: a heading row, then the content. */
#lobby .f-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
#lobby .f-row h2 { margin: 0; }
#lobby .f-bots { display: flex; gap: 8px; flex-wrap: wrap; }
#lobby .f-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 10px;
  min-height: 36px;
}
#lobby .badge {
  display: inline-block;
  color: inherit;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 700;
}
#lobby .f-note { font-size: 0.85rem; color: var(--lb-muted); margin-top: 6px; }

/* Roles: a plain two-column checklist with no boxes. */
#lobby .f-roles { display: flex; flex-direction: column; gap: 14px; }
#lobby .f-role-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 24px;
}
#lobby .f-role-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lb-line);
  font-size: 1rem;
  cursor: pointer;
}
#lobby .f-role-list input { accent-color: var(--lb-red); width: 1.1em; height: 1.1em; margin: 0; }
#lobby .f-save-status { font-weight: 700; color: #2f7d46; }
html[data-theme="dark"] #lobby .f-save-status { color: #7fc792; }

/* Buttons: outlined by default. The start button is the only solid one. */
#lobby button.secondary {
  background: transparent;
  color: var(--lb-ink);
  border: 1px solid var(--lb-ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--brand-mono);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: none;
}

/* Footer: the start action, centred. */
#lobby .f-go {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--lb-bg);
  border-top: 1px solid var(--lb-line);
  padding: 16px 40px 16px;
  padding-right: 180px; /* room for the Sound button in the corner */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
#lobby .f-hint { font-family: var(--brand-display); font-size: 1.4rem; }
body:has(#lobby:not([hidden])) .sound-toggle {
  background: var(--lb-card);
  color: var(--lb-ink);
  border: 1px solid var(--lb-ink);
  border-radius: 999px;
  z-index: 10;
}

/* Case file: the same full-screen rules slides as D and E. */
#lobby .f-case {
  position: fixed;
  inset: 0;
  background: var(--lb-ink);
  color: var(--lb-cream);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
#lobby .f-case.is-open { transform: translateY(0); }
#lobby .f-case .v-case-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 32px;
}
#lobby .f-case .secondary { color: var(--lb-cream); border-color: var(--lb-cream); }
#lobby .v-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#lobby .v-track::-webkit-scrollbar { display: none; }
#lobby .v-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 24px 9vw 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 900px;
}
#lobby .v-slide .v-big {
  font-family: var(--brand-display);
  font-size: 9rem;
  line-height: 0.9;
  color: #c7a94b;
  margin: 0;
  max-width: none;
}
#lobby .v-slide h3 {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: 3rem;
  margin: 0.2rem 0 1rem;
  line-height: 1;
}
#lobby .v-slide p { font-size: 1.1rem; line-height: 1.6; max-width: 62ch; margin: 0 0 0.6rem; }
#lobby .v-slide ul { padding-left: 1.3rem; line-height: 1.6; font-size: 1.05rem; max-width: 62ch; }
#lobby .v-slide li { margin-bottom: 0.5rem; }
#lobby .v-slide strong { color: #c7a94b; }
#lobby .f-case .v-case-nav {
  display: flex;
  justify-content: space-between;
  padding: 22px 32px;
}
#lobby .f-case .v-case-nav button:not(.secondary) {
  background: #c7a94b;
  color: #2d282a;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  font-family: var(--brand-display);
  font-size: 1.6rem;
  cursor: pointer;
}
#lobby .f-case .v-case-nav .secondary { color: var(--lb-cream); border-color: var(--lb-cream); }

@media (max-width: 720px) {
  #lobby .f-top { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  #lobby .f-logo { width: 140px; }
  #lobby .f-body { padding: 28px 18px 16px; gap: 34px; }
  #lobby .f-code { font-size: 4.2rem; }
  #lobby .f-go { padding-right: 18px; }
}

/* ---- Mix of C and F -------------------------------------------------------
   C's ticker, headline, black code panel and red start pill, on F's calm,
   single-column order. Players are pawns (from G). */

#lobby .h-marquee {
  background: var(--lb-ink);
  color: var(--lb-cream);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#lobby .h-marquee-track { display: inline-block; animation: h-scroll 24s linear infinite; }
#lobby .h-marquee-track span { padding-right: 0.5rem; }
@keyframes h-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #lobby .h-marquee-track { animation: none; }
}

#lobby .h-headline {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 0.95;
  margin: 0;
}
#lobby .h-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lb-muted);
  margin: 0 0 6px;
}

/* The code panel: C's black block with uneven corners, with the QR code inside. */
#lobby .h-code {
  background: var(--lb-ink);
  color: var(--lb-cream);
  border-radius: 40px 0 40px 0;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
#lobby .h-code .qr { border: 0; }
#lobby .h-code .h-kicker { color: var(--lb-cream); opacity: 0.75; }
#lobby .h-code-big {
  font-family: var(--brand-display);
  font-size: 5.6rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #c7a94b;
  margin-bottom: 12px;
}
#lobby .h-code .join-url { color: var(--lb-cream); }

#lobby .f-body { gap: 36px; }
#lobby .f-go { border-top: 2px solid var(--lb-ink); }

/* The empty seat is a plain dashed circle. Overrides the default mustard button style. */
#lobby button.pawn-slot { background: transparent; }

/* Shapes from C on F's calm layout: the seats and roles become soft panels with
   C's uneven corners, and the start button keeps C's pill. */
#lobby .f-seats,
#lobby .f-roles {
  background: var(--lb-card);
  border: 2px solid var(--lb-ink);
  padding: 22px 26px;
}
#lobby .f-seats { border-radius: 14px 14px 40px 14px; }
#lobby .f-roles { border-radius: 40px 14px 14px 40px; }
/* Layout from C, style from F: a 12-column grid. The code and start panels share the
   top row, and the players and roles panels share the next. Flat, with no heavy shadows. */
#lobby .f-body {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  align-content: start;
}
#lobby .h-headline { grid-column: 1 / -1; }
#lobby .h-code { grid-column: span 7; }
#lobby .h-start {
  grid-column: span 5;
  background: var(--lb-red);
  color: var(--lb-cream);
  border-radius: 0 40px 0 40px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
#lobby .h-start .h-kicker { color: var(--lb-cream); opacity: 0.8; }#lobby .h-start .f-hint { color: var(--lb-cream); }
#lobby .f-seats { grid-column: span 5; border: 0; box-shadow: none; }
#lobby .f-roles { grid-column: span 7; border: 0; box-shadow: none; }
#lobby .f-seats { border-radius: 14px 14px 40px 14px; }
#lobby .f-roles { border-radius: 40px 14px 14px 40px; }
#lobby .f-seats, #lobby .f-roles { background: var(--lb-card); padding: 22px 26px; }
#lobby .f-go { display: none; }
#lobby .h-start-lower { display: none; }
@media (max-width: 860px) {
  #lobby .h-code, #lobby .h-start, #lobby .f-seats, #lobby .f-roles { grid-column: 1 / -1; }
}

/* C's card colours: steel for players, gold for roles. Text and controls switch to suit. */
#lobby {
  --lb-steel: #4a5d6f;
  --lb-gold-card: #c7a94b;
}
html[data-theme="dark"] #lobby { --lb-steel: #3f5263; }
#lobby .f-seats { background: var(--lb-steel); color: var(--lb-cream); }
#lobby .f-seats .muted { color: var(--lb-cream); opacity: 0.8; }
#lobby .f-seats button.secondary { color: var(--lb-cream); border-color: var(--lb-cream); }
#lobby .f-roles { background: var(--lb-gold-card); color: #2d282a; }
#lobby .f-roles .muted { color: #2d282a; opacity: 0.8; }
#lobby .f-roles .f-role-list label { border-bottom-color: rgba(45, 40, 42, 0.35); }
#lobby .f-roles button.secondary { color: #2d282a; border-color: #2d282a; }
#lobby .f-roles input { accent-color: #2d282a; }

/* No rule under the header. */
#lobby .f-top { border-bottom: 0; }

/* "The game is full" and similar messages sit under the start button as a clear banner. */
#lobby .h-start #lobby-error {
  background: var(--lb-cream);
  color: var(--lb-ink);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--brand-display);
  font-size: 1.3rem;
  line-height: 1.1;
  min-height: 0;
  margin: 0;
}
#lobby .h-start #lobby-error:empty { display: none; }

/* Role checkboxes: rounded squares with a tick, instead of the browser's default box. */
#lobby .f-role-list input {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid #2d282a;
  border-radius: 6px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#lobby .f-role-list input:checked {
  background-color: #2d282a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23efecdb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
#lobby .f-role-list input:focus-visible { outline: 3px solid var(--lb-cream); outline-offset: 2px; }

/* Confirm dialog: a card with C's uneven corners over a dimmed page. */
.h-modal {
  position: fixed;
  inset: 0;
  background: rgba(45, 40, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}
.h-modal[hidden] { display: none; }
.h-modal-card {
  background: var(--lb-card);
  color: var(--lb-ink);
  border: 3px solid var(--lb-ink);
  border-radius: 40px 14px 40px 14px;
  box-shadow: 8px 8px 0 var(--lb-ink);
  padding: 30px 32px 28px;
  width: min(440px, 100%);
  animation: h-pop 0.2s ease-out;
}
@keyframes h-pop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.h-modal-card h2 {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--lb-red);
  margin: 0.2rem 0 0.8rem;
}
.h-modal-card p#confirm-message { font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.4rem; }
.h-modal-card .h-kicker { color: var(--lb-muted); }
.h-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.h-modal-actions button {
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-family: var(--brand-mono);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.h-modal-actions #confirm-yes {
  background: var(--lb-red);
  color: var(--lb-cream);
  border: 0;
  box-shadow: 3px 3px 0 var(--lb-ink);
}
.h-modal-actions #confirm-no {
  background: transparent;
  color: var(--lb-ink);
  border: 2px solid var(--lb-ink);
}

/* The ticker stays dark in both modes, and "Ready to begin!" shows in green when the table is full. */
#lobby .h-marquee {
  background: #2d282a;
  color: #efecdb;
}
#lobby .h-marquee .h-ready { color: #7fc792; font-weight: 700; }

/* "What is Mafia?" dialog text. Uses the same card as the confirm dialog. */
#lobby .h-info-text { font-size: 1.05rem; line-height: 1.5; margin: 0 0 0.9rem; }
#lobby #info-close {
  background: var(--lb-red);
  color: var(--lb-cream);
  border: 0;
  box-shadow: 3px 3px 0 var(--lb-ink);
}

/* The logo: dark letters on the light page, cream letters on the dark page. */
#lobby .h-logo-dark { display: none; }
html[data-theme="dark"] #lobby .h-logo-light { display: none; }
html[data-theme="dark"] #lobby .h-logo-dark { display: block; }

/* "Scan to join" in the banner shows in gold, so it stands out from the rest. */
#lobby .h-marquee .h-scan { color: #c7a94b; font-weight: 700; }

/* Dark mode: panels that should stay dark keep a fixed dark colour and light text,
   instead of following the page tokens, which flip in dark mode. */
#lobby .h-code {
  background: #2d282a;
  color: #efecdb;
}
#lobby .h-code .h-kicker,
#lobby .h-code .join-url { color: #efecdb; }
#lobby .f-case {
  background: #2d282a;
  color: #efecdb;
}
.h-modal-card {
  background: #fffdf5;
  color: #2d282a;
}
html[data-theme="dark"] .h-modal-card { background: #2d282a; color: #efecdb; }
html[data-theme="dark"] .h-modal-card h2 { color: #e0553d; }

/* "What is Mafia?" matches the Join the game card: cream card, ink outline, red offset
   shadow, ink heading, and a gold button. Fixed colours, so it looks the same in dark mode. */
#info-modal .h-modal-card {
  background: #fffdf5;
  color: #2d282a;
  border: 2px solid #2d282a;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #c8402b;
}
#info-modal .h-kicker { display: none; }
#info-modal .h-modal-card h2 {
  color: #2d282a;
  font-size: 2.6rem;
}
#info-modal .h-info-text { color: #2d282a; }
#info-modal #info-close {
  background: #c7a94b;
  color: #2d282a;
  border: 2px solid #2d282a;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #2d282a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- One button system -------------------------------------------------------
   Primary: solid gold, ink outline, small offset shadow (the Join button's look).
   Secondary: outlined, in the text colour of its panel. Both are pills, so there
   is one shape. The overrides below repeat the earlier selectors so they win. */
#lobby button,
.h-modal button {
  font-family: var(--brand-mono);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 2px solid #2d282a;
  background: #c7a94b;
  color: #2d282a;
  box-shadow: 3px 3px 0 #2d282a;
  cursor: pointer;
}
#lobby button.secondary,
.h-modal button.secondary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  box-shadow: none;
}
#lobby button:disabled,
.h-modal button:disabled { opacity: 0.45; box-shadow: none; cursor: default; }.h-modal-actions #confirm-yes,
#info-modal #info-close,
#lobby #info-close {
  background: #c7a94b;
  color: #2d282a;
  border: 2px solid #2d282a;
  box-shadow: 3px 3px 0 #2d282a;
}
.h-modal-actions #confirm-no {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  box-shadow: none;
}
#lobby .f-case .v-case-nav button:not(.secondary) {
  background: #c7a94b;
  color: #2d282a;
  border: 2px solid #2d282a;
  box-shadow: 3px 3px 0 #2d282a;
}
#lobby .f-case .v-case-nav .secondary,
#lobby .f-case .v-case-top .secondary {
  background: transparent;
  color: #efecdb;
  border-color: #efecdb;
  box-shadow: none;
}
#lobby .f-seats button.secondary,
#lobby .f-roles button.secondary,
#lobby .f-top-actions button.secondary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  box-shadow: none;
}

/* Final button shapes, from the Join game and secondary examples:
   primary is a rounded block with a deeper offset shadow; secondary stays an outlined pill. */
#lobby button,
.h-modal button {
  border-radius: 6px;
  box-shadow: 4px 4px 0 #2d282a;
}
#lobby button.secondary,
.h-modal button.secondary,
.h-modal-actions #confirm-no,
#lobby .f-seats button.secondary,
#lobby .f-roles button.secondary,
#lobby .f-top-actions button.secondary {
  border-radius: 999px;
  box-shadow: none;
}
/* Case file: Next uses the same outlined style as Back. */
#lobby .f-case .v-case-nav button:not(.secondary),
#lobby .f-case .v-case-nav .secondary {
  background: transparent;
  color: #efecdb;
  border: 2px solid #efecdb;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--brand-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.3rem;
}

/* The What is Mafia? card stays cream in dark mode, like the Join the game card. */
html[data-theme="dark"] #info-modal .h-modal-card {
  background: #fffdf5;
  color: #2d282a;
}
html[data-theme="dark"] #info-modal .h-modal-card h2 { color: #2d282a; }
html[data-theme="dark"] #info-modal .h-info-text { color: #2d282a; }
/* The start panel's explanation: plain sentences, not a small label. */
#lobby .h-start-copy {
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
  max-width: 26ch;
}

/* Start panel: a title and the instruction at the top, with the button and its hint
   grouped at the bottom, so the text never crowds the button. */
#lobby .h-start { min-height: 280px; }
#lobby .h-start-title {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: #efecdb;
  margin: 0;
}
#lobby .h-start-copy {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
  max-width: 30ch;
}
#lobby .h-start-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
}
#lobby .h-start-foot .f-hint { margin: 0; }

/* Banner colours: "The game is full" in red, "Ready to begin" in cream, and a green
   "Ready to begin!" once the minimum number of players has joined. */
#lobby .h-marquee .h-full { color: #e0553d; font-weight: 700; }
#lobby .h-marquee .h-cream { color: #efecdb; font-weight: 700; }

/* Start panel: copy at the top, and the hint on the left with the button on the right. */
#lobby .h-start-foot {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
#lobby .h-start-foot #start-hint { order: -1; flex: 1; min-width: 10rem; font-size: 1.3rem; }
/* Players panel: the heading and controls at the top, the seats in the middle, and the
   note pinned to the bottom, with clear space between them. */
#lobby .f-seats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
}
#lobby .f-seats .f-row { order: 0; }
#lobby .f-seats #players-lobby { order: 1; margin: 0; }
#lobby .f-seats .f-note { order: 2; margin: auto 0 0; padding-top: 6px; }

/* Players panel: one pair of bot buttons at the bottom, for playing alone while testing. */
#lobby .h-bot-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* The bot buttons sit below the player list, at the bottom of the panel. */
#lobby .f-seats .h-bot-actions { order: 2; }

/* Add and remove bot sit right under the heading, where the players will appear. */
#lobby .f-seats .h-bot-actions { order: 1; margin-top: 0; }
#lobby .f-seats #players-lobby { order: 2; }
#lobby .f-seats { min-height: 0; }

/* The x on a player's pill removes them from the lobby. */
#lobby .badge .badge-remove {
  background: transparent;
  color: inherit;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 0.45rem;
  margin-left: 0.15rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  opacity: 0.8;
}
#lobby .badge .badge-remove:hover { opacity: 1; }

/* "+ Bot" sits in the top right corner of the players panel, level with the heading. */
#lobby .f-seats > .f-row { position: relative; }
#lobby .f-seats .h-add-bot {
  margin-left: auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}

/* The status line under the start button ("Ready to play!", "The game is full") is a
   cream pill, the same shape as the error banner. */
#lobby .h-start-foot #start-hint {
  background: #efecdb;
  color: #2d282a;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--brand-display);
  font-size: 1.3rem;
  line-height: 1.1;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}
#lobby .h-start-foot #start-hint:empty { display: none; }

/* Keep the status pill and the Start button side by side. */
#lobby .h-start-foot {
  flex-wrap: nowrap;
  gap: 0.6rem;
}
#lobby .h-start-foot #start-hint {
  flex: 0 1 auto;
  font-size: 1.1rem;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}
/* The status pill takes the space left beside the button and wraps its text, so the
   row keeps its shape. */
#lobby .h-start-foot #start-hint {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  border-radius: 22px;
  font-size: 1.05rem;
  padding: 0.5rem 0.9rem;
}
/* The status pill keeps its natural width, sitting just wide enough for its text. */
#lobby .h-start-foot #start-hint {
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: 0.98rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

/* Long status text wraps inside the pill rather than spilling out of it. */
#lobby .h-start-foot #start-hint {
  white-space: normal;
  border-radius: 22px;
  max-width: 60%;
  text-align: left;
}

/* Case file kicker matches the other small labels. */
#lobby .v-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 0.4rem;
}

/* The Start game button, in one place. Ink with cream text on the red start panel,
   a cream offset shadow, and a dim look while it is disabled. */
#lobby .h-start-foot #start,
#lobby .h-start #start {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #2d282a;
  color: #efecdb;
  border: 2px solid #2d282a;
  border-radius: 6px;
  box-shadow: 4px 4px 0 #efecdb;
  padding: 0.75rem 1.4rem;
  font-family: var(--brand-mono);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#lobby .h-start-foot #start:disabled,
#lobby .h-start #start:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
}


/* Icons inside buttons sit beside the text. */
.btn-icon { display: inline-grid; place-items: center; vertical-align: middle; }
.btn-icon svg { width: 20px; height: 20px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 8px; }

/* New room code: a pill in the top right of the code panel, the same size as the bot button. */
#lobby .h-code { position: relative; }
#lobby .h-new-code {
  position: absolute; top: 22px; right: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.5rem 0.9rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
  background: transparent; color: var(--lb-cream); border: 1px solid var(--lb-cream); border-radius: 999px; box-shadow: none;
  cursor: pointer;
}
#lobby .h-new-code:hover { background: rgba(239, 234, 219, 0.12); }
#lobby .h-new-code:focus-visible { outline: 3px solid #c7a94b; outline-offset: 2px; }
#lobby .h-new-code .btn-icon svg { width: 16px; height: 16px; }
/* Same type and padding as the bot button, so the two read as a pair. */
#lobby .h-code .h-new-code { padding: 0.5rem 0.9rem; font-size: 0.8rem; letter-spacing: 0.06em; }
#lobby .h-code .h-new-code .btn-icon { height: 14px; }
#lobby .h-code .h-new-code .btn-icon svg { width: 14px; height: 14px; }


/* What is Mafia? modal: more space below the heading and below the text block. */
#info-modal .h-modal-card h2 { margin-bottom: 1rem; }
#info-modal .h-info-text { margin-bottom: 1.1rem; }