/* Shared room browser for every game. The application's background is unchanged. */
#lobby,#bomber-lobby{gap:10px}
#lobby button,#bomber-lobby button{letter-spacing:.35px;font-weight:600}
#lobby :is(#expand,form>button),#bomber-lobby :is(#bomber-expand,form>button){border:1px solid #efa43e;background:linear-gradient(120deg,#58301780,#30251c);color:#fff3e4;box-shadow:inset 0 0 12px #ff9d1818,0 0 5px #ff9d1830}
#lobby :is(#expand,form>button):hover,#bomber-lobby :is(#bomber-expand,form>button):hover{border-color:#ffd386;background:linear-gradient(120deg,#714421,#393026)}
#expand::before,#bomber-expand::before{content:'+';font-size:20px;color:#ffa62e;vertical-align:-1px;margin-right:10px}
#create,#bomber-create-form{border-color:#44596b;background:var(--panel);border-radius:7px;padding:10px}
#lobby input,#bomber-lobby input{border:1px solid #3e4e5a;background:linear-gradient(115deg,#20252b,#192027);border-radius:6px;min-height:32px;color:#eff4f9}
#lobby input:focus,#bomber-lobby input:focus{border-color:#65baff;box-shadow:0 0 0 2px #359fe722}
#lobby .slice,#bomber-lobby .slice{border-color:#485d70;background:linear-gradient(#1c2630,#131a22)}
#lobby .slice::before,#bomber-lobby .slice::before{border-color:#47b3f5;background:linear-gradient(#183a54,#114669);box-shadow:inset 0 0 9px #59c3ff48}
#lobby .slice button,#bomber-lobby .slice button{color:#b7c6d8}
#lobby .slice [aria-pressed=true],#bomber-lobby .slice [aria-pressed=true]{color:#fff}
#refresh,#bomber-refresh{color:#dcefff;border-color:#45637b;background:linear-gradient(#1e2c39,#17212b)}
#rooms,#bomber-rooms{background:var(--panel);border:1px solid #344854;padding:5px;border-radius:7px}
.room-tag{height:88px;border:1px solid #3a4c5c;border-radius:7px;background:linear-gradient(110deg,#222a31,#192027);margin-bottom:5px;box-shadow:inset 0 1px #ffffff07}
.room-tag .details{gap:6px;padding:10px 12px}
.room-title{font-weight:600;color:#edf3fa}
.room-tag .counts{color:#b5c9dc;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-tag .status{font-size:10px;letter-spacing:.7px}
.room-controls{width:42px}
.room-controls .join{width:42px;flex:1;background:linear-gradient(#1d2c38,#15202b);border-color:#3c5569}
.room-controls .join:hover:enabled{background:#254b65}
.room-controls .join img{filter:brightness(0) saturate(100%) invert(83%) sepia(17%) saturate(950%) hue-rotate(170deg);width:17px;height:17px}
#lobby .back,#bomber-lobby .back{border-color:#486b89;color:#deebf7;background:linear-gradient(#223344,#17232e)}
.empty{border:1px dashed #354857;border-radius:6px;margin:4px;color:#8da3b6;text-align:center;padding:22px 8px}
#lobby button:focus-visible,#bomber-lobby button:focus-visible{outline:2px solid #64bdff;outline-offset:2px}
/* Four-way switch (PvE NPC level): the highlight moves to the chosen segment. */
.slice.four::before{width:calc((100% - 2px)/4);transform:translateX(calc(var(--index,0)*100%))}
.slice.four button{font-size:10px;letter-spacing:.2px}

/* Three-way switch (Bomber PvP / PvE / CUSTOM). */
.slice.three::before{width:calc((100% - 2px)/3);transform:translateX(calc(var(--index,0)*100%))}