/* A game room's front desk (games/common/src/lobby.ts, start.ts, desk.ts, levels.ts; Pool's and Ship Sinker's lobbies
   too): the room's name and links, the Start a game panel, Join a room and Your day beside it, the room in numbers,
   and the waiting room. room.css brings it in for the newer games; Pool's and Ship Sinker's pages link it themselves.
   Everything is kept inside the desk's own containers, so the room's pages (drawn in the same place) and the table's
   controls keep their own looks. */
.lobby {
  --lb-gold: #dbbc76; --lb-gold-2: #f5dfaa; --lb-cream: #f8f0dc; --lb-soft: #d9cfbd; --lb-mist: #c7d4d4; --lb-muted: #a9babd;
  --lb-line: #d7e3e73d; --lb-line-2: #d7e3e75c; --lb-line-3: #d7e3e71f; --lb-in: #060d12; --lb-ink: #081117;
  --lb-glass: linear-gradient(145deg, #14242ee6, #081117ee);
}
.lobby-main:has(> .start-desk) { width: min(1180px, 100%); }
/* the scene behind the desk dims further down the page, so the panels and the numbers read clearly */
#lobby:has(.start-desk) { background: radial-gradient(ellipse at 50% 30%, rgba(4,7,10,0.1), rgba(4,7,10,0.6) 75%),
  linear-gradient(180deg, rgba(4,7,10,0.5) 0, rgba(4,7,10,0.66) 420px, rgba(4,7,10,0.86) 820px, rgba(4,7,10,0.93) 100%); }

/* ---------------------------------------------------------------- the room's name, a few words, its links */
.lobby-head { display: flex; flex-direction: column; gap: 12px; max-width: none; margin: 4px 0 26px; font-family: var(--gu-sans); }
.lobby-head h1 { margin: 0; font: 400 54px/1.05 var(--gu-serif); letter-spacing: -.01em; color: var(--lb-cream); text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.lobby-head p { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--lb-soft); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.lobby-head .room-nav { margin-top: 8px; }
.lobby-error { margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: #3a1712d9; border: 1px solid #e7a08f66; color: #f6c9bb; font: 14px/1.45 var(--gu-sans); }
.lobby-error:empty { display: none; }

/* ---------------------------------------------------------------- the desk: the panel, and the column beside it */
.start-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 24px; align-items: start; margin: 0 0 30px;
  font-family: var(--gu-sans); color: var(--lb-cream); }
.start-desk:not(:has(> .desk-side > :not([hidden]))) { grid-template-columns: minmax(0, 760px); }
.desk-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.desk-side:not(:has(> :not([hidden]))) { display: none; }
@media (max-width: 999px) {
  .start-desk, .start-desk:not(:has(> .desk-side > :not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}

.start-desk .tile { position: relative; margin: 0; padding: 28px 30px; border-radius: 20px; background: var(--lb-glass); border: 1px solid var(--lb-line);
  box-shadow: 0 24px 60px #00000099, inset 0 1px #ffffff11; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--lb-cream); }
.start-desk .desk-side .tile { padding: 22px; }
.start-desk .tile h2 { display: block; margin: 0; font: 400 28px/1.15 var(--gu-serif); color: var(--lb-cream); }
.start-desk .desk-side .tile h2 { font-size: 22px; }
.start-desk .tile > p { margin: 0; }
.start-desk a { color: var(--lb-gold-2); }
.start-desk a:hover { color: #fff; }

/* buttons: gold filled pills, gold outlined for the second choice */
.start-desk .go { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--lb-gold); background: var(--lb-gold); color: var(--lb-ink); font: 600 15px/1.2 var(--gu-sans);
  text-decoration: none; box-shadow: none; filter: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.start-desk .go:hover { background: #e7cc8f; border-color: #e7cc8f; filter: none; }
.start-desk .go:disabled { opacity: .55; cursor: progress; }
.start-desk .go.quiet { background: transparent; color: var(--lb-gold-2); }
.start-desk .go.quiet:hover { background: #dbbc761a; border-color: var(--lb-gold); }
.start-desk .go.start { min-height: 52px; min-width: 0; padding: 0 30px; font-size: 17px; }
.start-desk .go.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.start-desk .go:focus-visible, .start-desk a:focus-visible, .start-desk .link-btn:focus-visible, .start-desk input:focus-visible,
.start-desk .seg:focus-visible, .start-desk .mode:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- Start a game */
.start-desk .newgame { display: flex; flex-direction: column; gap: 22px; }
.newgame > .lead { margin: -10px 0 0; font-size: 15px; line-height: 1.5; color: var(--lb-mist); }
/* a panel its extra draws whole (a ladder of levels): its own heading, once it's there */
.newgame.bare.filled > h2, .newgame.bare.filled > .lead { display: none; }

.newgame .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.newgame .modes.n2, .newgame .modes.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.newgame .mode { appearance: none; display: flex; flex-direction: row; gap: 12px; align-items: flex-start; min-height: 44px; margin: 0; padding: 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--lb-line); background: var(--lb-in); color: var(--lb-cream); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.newgame .mode:hover { border-color: #dbbc7699; }
.newgame .mode[aria-checked=true] { border-color: var(--lb-gold); background: #dbbc761f; }
.newgame .mode-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff12; }
.newgame .mode[aria-checked=true] .mode-ico { background: var(--lb-gold); }
.newgame .mode-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--lb-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.newgame .mode[aria-checked=true] .mode-icon { stroke: var(--lb-ink); }
.newgame .mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.newgame .mode-txt b { display: block; font-size: 16px; font-weight: 600; color: inherit; }
.newgame .mode-txt small { display: block; margin: 0; font-size: 13px; line-height: 1.35; color: #b8c5c7; }

/* the chosen way's options: two to a row, anything that isn't a choice the whole width */
.newgame .opts { margin: 0; padding: 0; border: 0; }
.newgame .opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.newgame .opt-grid[hidden] { display: none !important; }
.newgame .opt-grid > :not(.choice), .newgame .opt-grid > .choice.wide { grid-column: 1 / -1; }
.newgame .mode-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lb-mist); }

.start-desk .choice { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; min-width: 0; }
.start-desk .choice-label { width: auto; font-size: 14px; color: var(--lb-soft); }
.start-desk .segs { display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 0; max-width: 100%; padding: 3px; border-radius: 22px; border: 1px solid var(--lb-line); background: var(--lb-in); }
.start-desk .seg { appearance: none; min-height: 40px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--lb-soft);
  font: 500 14px var(--gu-sans); box-shadow: none; cursor: pointer; }
.start-desk .seg:hover { color: var(--lb-cream); }
.start-desk .seg[aria-pressed=true] { background: var(--lb-gold); color: var(--lb-ink); box-shadow: none; }
.start-desk .choice-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--lb-muted); }
.start-desk .choice-note:empty { display: none; }

/* online: the room's name and privacy; one screen: the other players' names */
.start-desk .field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.start-desk .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.start-desk .field label, .start-desk .names-label { font-size: 14px; color: var(--lb-soft); }
.start-desk input:not([type=checkbox]) { box-sizing: border-box; width: 100%; height: 46px; margin: 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lb-line-2);
  background: var(--lb-in); color: var(--lb-cream); font: 16px var(--gu-sans); }
.start-desk input:not([type=checkbox]):focus { border-color: var(--lb-line-2); }
.start-desk input::placeholder { color: #7f9396; }
.start-desk .check { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lb-line);
  background: var(--lb-in); color: var(--lb-cream); font-size: 15px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.start-desk .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--lb-gold); }
.start-desk .check:focus-within { outline: 2px solid var(--lb-gold); outline-offset: 2px; }
.start-desk .check input:focus-visible { outline: 0; }
.start-desk .names { display: flex; flex-direction: column; gap: 8px; }
.start-desk .name-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.start-desk .name-boxes.n1 { grid-template-columns: minmax(0, 1fr); }
.start-desk .name-boxes.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the start button and what it will start */
.start-desk .start-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; padding-top: 18px; border-top: 1px solid var(--lb-line-3); }
.start-desk .start-row:has(> .start[hidden]):has(> .start-summary:empty) { display: none; }
.start-desk .start-summary { flex: 1 1 220px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--lb-mist); }
.start-desk .start-summary:empty { display: none; }

/* the player's own part of the panel (best scores, a purse, a ladder) */
.start-desk .tile-extra { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.start-desk .tile-extra:empty { display: none; }
.start-desk .bests { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.start-desk .bests.n1 { grid-template-columns: minmax(0, 340px); }
.start-desk .best { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lb-line); background: var(--lb-in); min-width: 0; }
.start-desk .best dt { font-size: 13px; color: var(--lb-muted); }
.start-desk .best dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; font: 400 28px/1.15 var(--gu-serif); color: var(--lb-soft); }
.start-desk .best dd > :not(:first-child) { font: 600 13px var(--gu-sans); }
.start-desk .best.on { border-color: #dbbc7666; background: #dbbc7614; }
.start-desk .best.on dd { color: var(--lb-gold-2); }

/* a seat at a casino table: the table's curve, the dealer at the top */
.start-desk .seat-arc .arc { position: relative; height: 132px; max-width: 520px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #123426; border: 1px solid #2f6b4f;
  box-shadow: inset 0 -18px 40px #00000040; }
.start-desk .arc-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 12px; color: #a9d8b8; }
.start-desk .arc-seat { position: absolute; left: var(--x); top: calc(26px + var(--y) * 50px); transform: translateX(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px dashed var(--lb-line-2); background: var(--lb-in); color: var(--lb-ink); font: 700 15px var(--gu-sans); cursor: pointer; transition: border-color .15s, background .15s; }
.start-desk .arc-seat:hover { border-color: var(--lb-gold); }
.start-desk .arc-seat[aria-pressed=true] { border: 2px solid var(--lb-gold); background: var(--lb-gold); }
.start-desk .arc-seat:focus-visible { outline: 2px solid var(--lb-gold-2); outline-offset: 3px; }

/* a ladder of levels (Word Wheel, Hidden Word) */
.start-desk .ladder { display: flex; flex-direction: column; gap: 18px; }
.start-desk .ladder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.start-desk .ladder-head span { font-size: 14px; color: var(--lb-muted); }
.start-desk .ladder-bar { height: 10px; border-radius: 5px; background: #ffffff14; overflow: hidden; }
.start-desk .ladder-bar b { display: block; height: 100%; border-radius: 5px; background: var(--lb-gold); }
.start-desk .ladder-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.start-desk .ladder-chips li { padding: 6px 12px; border-radius: 999px; background: var(--lb-in); border: 1px solid var(--lb-line); font-size: 14px; }
.start-desk .ladder-go { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--lb-line-3); }
.start-desk .link-btn { appearance: none; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--lb-gold-2); font: 15px var(--gu-sans); cursor: pointer;
  text-decoration: underline; text-decoration-color: #f5dfaa66; text-underline-offset: 3px; }
.start-desk .link-btn:hover { color: #fff; text-decoration-color: currentColor; }
.start-desk .ladder-levels[hidden] { display: none; }
.start-desk .ladder-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--lb-muted); }

/* ---------------------------------------------------------------- Join a room */
.start-desk .tables { display: flex; flex-direction: column; gap: 12px; height: auto; min-height: 0; }
.start-desk .tables-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.start-desk .tables .count { font: 13px var(--gu-sans); color: var(--lb-muted); white-space: nowrap; }
.start-desk .tables .count:empty { display: none; }
.start-desk .tables-text { font-size: 14px; line-height: 1.5; color: var(--lb-mist); }
.start-desk .rooms { list-style: none; margin: 0; padding: 0; border: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.start-desk .rooms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; gap: 10px; align-items: center; padding: 10px 0; border: 0; border-top: 1px solid var(--lb-line-3); }
.start-desk .rooms li:first-child { border-top: 0; }
.start-desk .room-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start-desk .rooms .room-name { grid-area: auto; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-desk .rooms .room-meta { grid-area: auto; font-size: 13px; line-height: 1.4; color: var(--lb-muted); }
.start-desk .rooms button { grid-area: auto; }
.start-desk .rooms .empty { display: block; padding: 6px 0 4px; font-size: 14px; line-height: 1.5; color: var(--lb-muted); }
.start-desk .join-code { display: block; margin: 0; padding-top: 12px; border-top: 1px solid var(--lb-line-3); }
.start-desk .code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; flex: none; min-width: 0; }
.start-desk .code label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--lb-soft); }
.start-desk .code input { text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.start-desk .code .go { min-height: 46px; border-radius: 12px; }

/* ---------------------------------------------------------------- Your day */
.start-desk .day { display: flex; flex-direction: column; gap: 16px; }
.start-desk .day[hidden] { display: none !important; }
.start-desk .day-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.start-desk .day-tokens { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--lb-gold-2); white-space: nowrap; }
.start-desk .day-tokens svg { width: 16px; height: 16px; }
.start-desk .day-tokens path { fill: var(--lb-gold); }
.start-desk .day-tokens circle { fill: var(--lb-ink); fill-opacity: .35; }
.start-desk .meter { display: flex; flex-direction: column; gap: 6px; }
.start-desk .meter-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.start-desk .meter-value { color: var(--lb-mist); white-space: nowrap; }
.start-desk .meter-bar { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 4px; }
.start-desk .meter-bar i { height: 8px; border-radius: 4px; background: #ffffff1a; }
.start-desk .meter.fire .meter-bar i.lit { background: #e0a35a; }
.start-desk .meter.today .meter-bar i.lit { background: var(--lb-gold); }
.start-desk .challenge { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--lb-in); border: 1px solid var(--lb-line); }
.start-desk .challenge small { font-size: 13px; color: var(--lb-muted); }
.start-desk .challenge strong { font-size: 15px; font-weight: 600; }
.start-desk .challenge span { font-size: 13px; line-height: 1.4; color: var(--lb-mist); }
.start-desk .challenge.done { border-color: #dbbc7666; background: #dbbc7614; }
.start-desk .challenge.done small { color: var(--lb-gold-2); }
.start-desk .challenge.done strong::before { content: "✓ "; color: var(--lb-gold); }
.start-desk .day-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.start-desk .day-links a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------------------------------------------------------------- the room so far */
.lobby-numbers { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 0; font-family: var(--gu-sans); }
.lobby-numbers[hidden] { display: none; }
.lobby-numbers .lobby-sub { margin: 0; font: 400 20px var(--gu-serif); color: var(--lb-soft); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.lobby-numbers .room-headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.lobby-numbers .room-headline div { padding: 14px 16px; border-radius: 14px; border: 1px solid #d7e3e724; background: #0a161ecc; text-align: left; }
.lobby-numbers .room-headline dt { font-size: 13px; color: var(--lb-muted); }
.lobby-numbers .room-headline dd { margin: 4px 0 0; font: 400 26px var(--gu-serif); color: var(--lb-gold-2); }

/* ---------------------------------------------------------------- waiting in an online room */
.start-desk .waiting-room { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.start-desk .wait-head { display: flex; flex-direction: column; gap: 8px; }
.start-desk .wait-head h2 { font-size: 30px; overflow-wrap: anywhere; }
.start-desk .wait-sum { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lb-mist); }
.start-desk .waiting-room .notice { margin: 0; padding: 10px 14px; border-radius: 12px; background: #dbbc7614; border: 1px solid #dbbc7666; color: var(--lb-gold-2); font-size: 15px; }
.start-desk .seat-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; text-align: left; }
.start-desk .seat { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--lb-line);
  background: #0a161e; font-style: normal; color: var(--lb-cream); }
.start-desk .seat.empty { border-style: dashed; border-color: var(--lb-line-2); background: transparent; }
.start-desk .seat .avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--seat, var(--lb-gold)); color: var(--lb-ink); font-weight: 700; }
.start-desk .seat.empty .avatar { background: #ffffff12; }
.start-desk .seat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start-desk .seat-text b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-desk .seat.empty .seat-text b { font-weight: 500; color: var(--lb-muted); }
.start-desk .seat-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--lb-muted) !important; }
.start-desk .seat .rel { margin: 0; }
.start-desk .team-badge { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--team); color: var(--lb-ink); font-size: 12px; font-weight: 600; }
.start-desk .code-box { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; background: var(--lb-in); border: 1px solid var(--lb-line); }
.start-desk .code-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.start-desk .code-text > span:first-child { font-size: 14px; line-height: 1.45; color: var(--lb-mist); }
.start-desk .waiting-room .code-big { margin: 0; padding: 0; font: 400 36px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--lb-gold-2) !important; }
.start-desk .code-box .copy { margin-left: auto; }
.start-desk .wait-actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 4px; }
.start-desk .wait-actions .go.quiet { border-color: var(--lb-line-2); color: var(--lb-soft); font-weight: 500; }
.start-desk .wait-actions .go.quiet:hover { border-color: var(--lb-gold); color: var(--lb-cream); background: transparent; }
.start-desk .host-wait { margin: 0; font-size: 15px; color: var(--lb-mist) !important; }
.start-desk .waiting-room .invited { margin: 0; font-size: 13px; color: var(--lb-muted); }
.start-desk .waiting-room .lobby-error { margin: 0; }
.start-desk .pulse { animation: lb-pulse 2.4s ease-in-out infinite; }
@keyframes lb-pulse { 50% { opacity: .5; } }

/* ---------------------------------------------------------------- phones (and the app): one column, the ways to play as one control */
@media (max-width: 560px) {
  .lobby-head { gap: 8px; margin-bottom: 16px; }
  .lobby-head h1 { font-size: 36px; }
  .lobby-head p { font-size: 15px; line-height: 1.5; }
  .lobby-head .room-nav { margin-top: 6px; }
  .start-desk { gap: 16px; margin-bottom: 22px; }
  .start-desk .tile, .start-desk .desk-side .tile { padding: 18px 16px; border-radius: 18px; }
  .start-desk .tile h2 { font-size: 24px; }
  .start-desk .desk-side .tile h2 { font-size: 21px; }
  .start-desk .newgame { gap: 18px; }
  .newgame .modes, .newgame .modes.n2 { display: flex; gap: 0; padding: 3px; border-radius: 14px; border: 1px solid var(--lb-line); background: var(--lb-in); }
  .newgame .modes.n4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .newgame .mode { flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 6px;
    text-align: center; border: 0; border-radius: 11px; background: transparent; color: var(--lb-soft); }
  .newgame .mode[aria-checked=true] { background: var(--lb-gold); color: var(--lb-ink); }
  .newgame .mode-ico { display: none; }
  .newgame .mode-txt { align-items: center; }
  .newgame .mode-txt b { font-size: 15px; }
  .newgame .mode-txt small { font-size: 12px; color: inherit; opacity: .8; }
  .newgame .opt-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .start-desk .segs { display: flex; align-self: stretch; }
  .start-desk .seg { flex: 1 1 0; min-width: max-content; padding: 0 10px; }
  .start-desk .field-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .start-desk .name-boxes, .start-desk .name-boxes.n2 { grid-template-columns: minmax(0, 1fr); }
  .start-desk .start-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 0; border-top: 0; }
  .start-desk .go.start { width: 100%; min-height: 54px; }
  .start-desk .start-summary { flex: none; font-size: 14px; text-align: center; }
  .start-desk .ladder-go { flex-direction: column; align-items: stretch; }
  .start-desk .seat-grid { grid-template-columns: minmax(0, 1fr); }
  .start-desk .code-box { padding: 16px; }
  .start-desk .code-box .copy { margin-left: 0; }
  .start-desk .waiting-room .code-big { font-size: 30px; }
  .start-desk .seat-arc .arc { height: 118px; }
}
@media (max-width: 420px) {
  /* three ways to play side by side: their names only */
  .newgame .modes.n3 .mode-txt small { display: none; }
  .newgame .modes.n3 .mode { min-height: 48px; }
  .start-desk .arc-seat { top: calc(24px + var(--y) * 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .start-desk .pulse { animation: none; }
  .newgame .mode, .start-desk .go, .start-desk .arc-seat { transition: none; }
}

/* someone not signed in: the desk to look round, and the two ways in */
.guest-note { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: -8px 0 24px; padding: 16px 20px; border-radius: 16px;
  background: #0d0a06c7; border: 1px solid #dbbc7666; font-family: var(--gu-sans); }
.guest-note p { flex: 1 1 280px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--lb-cream); }
.guest-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* no WebGL 2: the game's name and what it is, over the note (games/common/src/nogl.ts) */
.nogl-head { max-width: 620px; }
.nogl-head h1 { margin: 0 0 12px; font: 400 44px/1.1 var(--gu-serif); }
.nogl-head p { margin: 0 0 14px; }
.nogl-head .nogl-note { opacity: .75; font-size: 15px; }