/* Shared game-show setup: rules first, then a distinct join-and-start area. */
.lobby2 { position: absolute; left: 4%; right: 21%; top: 10%; bottom: 4%; z-index: 15; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; align-content: center; gap: 1cqw; padding: 1.4cqw; border-radius: 1.8cqw; color: #fff; background: #11152bf5; border: .12cqw solid #ffffff40; }
.lobby2 .lb-title { order: -1; justify-self: center; width: auto; max-height: 7cqw; max-width: 46%; object-fit: contain; }
.lobby2 .lb-title.lbbanner { border-radius: .6cqw; }
.gt-lobby-tools { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; width: 100%; }
.gt-lobby-tools .gt-howto-btn { position: static; margin: 0; box-shadow: none; padding: .7cqw 1cqw; border-radius: .7cqw; font-size: 1.3cqw; background: #ffffff12; border: .12cqw solid #ffffff55; color: #fff; }
.gt-lobby-tools .gt-ptime { position: static; margin: 0; padding: .4cqw 0; font-size: 1.2cqw; border: 0; background: none; box-shadow: none; backdrop-filter: none; color: #d1d2e0; }
.gt-lobby-tools .gt-ptime b { color: #fff; }
.lobby2 .lb-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8cqw; min-height: 0; }
.lobby2 .lb-step { position: relative; display: grid; grid-template-columns: 3.8cqw 1fr; align-content: center; align-items: center; column-gap: 1cqw; row-gap: .35cqw; padding: 1.1cqw; border-radius: .9cqw; background: #ffffff09; text-align: left; }
.lobby2 .lb-step .n { position: absolute; top: .5cqw; right: .6cqw; font: 800 1cqw Nunito,sans-serif; color: #aaaec4; }
.lobby2 .lb-step i { grid-row: 1 / 3; font-style: normal; font-size: 3cqw; text-align: center; line-height: 1; }
.lobby2 .lb-step b { padding-right: .7cqw; font: 600 1.7cqw/1.15 Fredoka,sans-serif; color: #fff; }
.lobby2 .lb-step small { grid-column: 2; font: 700 1.3cqw/1.4 Nunito,sans-serif; color: #d8dbe9; }
.lobby2 .lb-bar { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.8fr) minmax(0,1fr); gap: 1.2cqw; align-items: center; padding: 1.3cqw 0 0; border-top: .12cqw solid #ffffff40; }
.lobby2 .lb-join { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .5cqw 1cqw; }
.lb-join-label { grid-column: 1 / -1; margin: 0; color: #fff; font: 800 1.3cqw Nunito,sans-serif; }
.lobby2 .lb-join .qr { background: #fff; padding: .45cqw; border-radius: .6cqw; width: 7.5cqw; line-height: 0; }
.lobby2 .lb-join .qr img, .lobby2 .lb-join .qr canvas { width: 100% !important; height: auto !important; display: block; }
.lobby2 .lb-join .muted { font-size: 1.15cqw; color: #d8dbe9; overflow-wrap: anywhere; }
.lobby2 .lb-join .bigcode { font: 600 3.5cqw/1.15 Fredoka,sans-serif; letter-spacing: .1em; color: var(--lb-accent,#ffd23d); }
.lobby2 .lb-who { display: grid; gap: .6cqw; align-content: center; min-width: 0; }
.lobby2 .lb-who h4 { margin: 0; font: 800 1.3cqw Nunito,sans-serif; }
.lobby2 .seats { display: flex; flex-wrap: wrap; gap: .4cqw; max-height: 6.5cqw; overflow: auto; min-height: 0; }
.lobby2 .seat { display: inline-flex; align-items: center; gap: .3cqw; padding: .25cqw .5cqw; border-radius: .5cqw; background: #ffffff12; font-weight: 800; font-size: 1.2cqw; }
.lobby2 .seat .dav { font-size: 2cqw !important; }
.lobby2 .muted { color: #d1d2e0; font-weight: 700; font-size: 1.2cqw; }
.lobby2 .lb-go { display: grid; gap: .6cqw; min-width: 0; }
.lobby2 .lb-next { margin: 0; text-align: center; color: #d1d2e0; font: 700 1.1cqw/1.4 Nunito,sans-serif; }
.lobby2 .lengths { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; }
.lobby2 .lengths button { padding: .5cqw; border-radius: .6cqw; border: .12cqw solid #ffffff60; background: #ffffff09; color: #fff; font: 600 1.1cqw Fredoka,sans-serif; cursor: pointer; display: grid; gap: .2cqw; }
.lobby2 .lengths button small { font: 700 .9cqw Nunito,sans-serif; }
.lobby2 .lengths button.on { border-color: var(--lb-accent,#ffd23d); background: #ffffff20; }
.lobby2 .btn { font-size: 1.5cqw; padding: 1cqw; width: 100%; border-radius: .8cqw; background: var(--lb-accent,#ffd23d); color: #15162b; box-shadow: none; }
.lobby2 .btn:disabled { background: #30364d; color: #d1d2e0; opacity: 1; }
.lobby2 button:focus-visible, .gt-lobby-tools button:focus-visible { outline: .25cqw solid #fff; outline-offset: .3cqw; }

/* Readable setup panel; keep the approved studio and host unobstructed. */
.fstage .flobby { padding: 1.5cqw 2cqw; gap: .8cqw; background: #0e1733f5; border: .12cqw solid #ffffff45; border-radius: 1.6cqw; }
.flobby h1 { margin: 0; color: #ffd580; font-size: 3.3cqw; line-height: 1.15; }
.flobby p.f-goal { margin: 0; font-size: 1.5cqw; line-height: 1.4; color: #e1e5f2; }
.f-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8cqw; list-style: none; margin: .3cqw 0; padding: 0; text-align: left; }
.f-steps li { background: #ffffff09; padding: 1cqw; border-radius: .8cqw; }
.f-steps b { display: block; margin-bottom: .5cqw; font: 600 1.5cqw/1.2 Fredoka,sans-serif; color: #fff; }
.f-steps span { display: block; font: 700 1.25cqw/1.4 Nunito,sans-serif; color: #d8dfef; }
.flobby .wjoin { gap: 1.2cqw; }
.flobby .f-join-label { display: block; text-align: left; font-size: 1.3cqw; }
.flobby #joinUrl { text-align: left; font-size: 1.15cqw; color: #d8dfef; }
.flobby .bigcode { font-size: 4cqw; line-height: 1.1; }
.flobby .wjoin .qr { width: 7.5cqw; padding: .4cqw; }
.flobby .ft { min-height: 4.5cqw; padding: .5cqw; }
.flobby .btn { border-radius: .8cqw; padding: .8cqw 1.5cqw; font-size: 1.5cqw; box-shadow: none; }
.flobby #startBtn { background: #ffd580; color: #211332; }
.flobby #startBtn:disabled { background: #303d59; color: #d8dfef; opacity: 1; }
.flobby p.f-next { margin: 0; font-size: 1.15cqw; color: #d8dfef; }